@charset "utf-8";
.pc-nav {position: relative;z-index:9999;}
.pc-nav .logo img{height: 50px; width: 167px;}
.pc-nav .nav .nav-item>a{height: 105px; display: block; line-height: 105px; position: relative; overflow: hidden; color: #323232; font-weight: bold; font-size: 18px;}
.pc-nav .nav .nav-item{margin-left: 60px; position: relative;}
.pc-nav .nav .nav-item .nav-item:first-child{margin-left: 0;}
.pc-nav .nav .nav-item .nav-item.on>a{color: var(--red) !important;}
.pc-nav .nav .nav-item::after{width: 0; height: 3px; background-color: var(--red); content: ' '; position: absolute; bottom: 0; right: 0; transition: all 300ms}
.pc-nav .nav .nav-item:hover::after, .pc-nav .nav .nav-item.on::after{right: auto; width: 100%; left: 0}
.pc-nav .contact{margin-left: 40px; padding-left: 45px; border-left: 1px solid #dfdfdf}
.pc-nav .contact *{display: block;}
.pc-nav .contact span{font-size: 15px; color: #838383;}
.pc-nav .contact b{color: var(--red); font-size: 26px; font-family: 'Roboto-Bold'}
.pc-nav .nav .nav-item .sub-menu{position: absolute; visibility: hidden; transition: all 300ms; opacity: 0; top: 150%; left: 50%; transform: translateX(-50%); background: white; white-space: nowrap; z-index: 1; padding: 10px 0; border-radius: 0 0 10px 10px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);}
.pc-nav .nav .nav-item:hover .sub-menu{visibility: visible; opacity: 1; top: 100%;}
.pc-nav .nav .nav-item:hover .sub-menu>li>a{padding: 10px 15px; display: block; text-align: center;}
.pc-nav .nav .nav-item .sub-menu>li>a:hover{background: #faeaeb; font-weight: 600;}
.pc-nav .nav .nav-item .sub-menu-list{list-style: none; border-radius: 10px; overflow: hidden; padding: 0; margin: 0; position: absolute; top: 1px; left: 100%; padding-left: 1px; opacity: 0; transition: all 300ms; }
.pc-nav .nav .nav-item .sub-menu>li:hover .sub-menu-list{visibility: visible; opacity: 1;}
.pc-nav .nav .nav-item .sub-menu-list li{background-color: white;}
.pc-nav .nav .nav-item .sub-menu-list li a{display: block; color: #323232; font-size: 14px; padding: 5px 10px; border-radius: 5px; transition: all 300ms;}
.pc-nav .nav .nav-item .sub-menu-list li a:hover{background: #f5f5f5;}
.nav-user-area{display:flex;align-items:center;margin-left:24px;}
.nav-login-btn{display:inline-block;padding:6px 22px;text-decoration:none;border-radius:5px;font-size:13px;font-weight:500;letter-spacing:.5px;transition:background .2s, box-shadow .2s;white-space:nowrap;box-shadow:0 2px 6px rgba(192,57,43,.3);margin:0 0.5rem;}
.nav-login-btn.register{background:#efefef;color:#c0392b!important;}
.nav-login-btn.login{background:#c0392b;color:#fff!important;}
.nav-login-btn:hover{background:#a93226;box-shadow:0 3px 10px rgba(192,57,43,.45);color:#fff!important;}
.nav-nickname{font-size:14px;font-weight:600;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;}

.mobile-top-wrap{display: none; height: 75px;}
.mobile-top{height: auto; background-color: var(--red); padding: 15px; position: fixed; left: 0; width: 100%; top: 0; z-index: 9;}
.mobile-top .mobile-logo{width: 145px; transition: all 300ms;}
.mobile-top.show-nav .mobile-logo{transform: translateX(-300px);}
.mobile-top .mobile-logo img{display: block; width: 100%; height: auto;}
.mobile-top .right{transition: all 300ms;}
.mobile-top.show-nav .right{transform: translateX(-272px);}
.mobile-top .nav-btn{width:22px; height:22px; overflow:hidden; position:relative; margin-left: 25px;}
.mobile-top .nav-btn span{width:100%; left:0; background:#D8D8D8; height:2px; position:absolute; transition:all 500ms;}
.mobile-top .nav-btn .line1{top:0; transform:rotate(0); transform-origin:left top;}
.mobile-top .nav-btn .line2{top:10px;}
.mobile-top .nav-btn .line3{bottom:0; transform:rotate(0); transform-origin:left bottom;}
.mobile-top .nav-btn.on .line1{width:145px; transform:rotate(41deg);}
.mobile-top .nav-btn.on .line2{left:-100%;}
.mobile-top .nav-btn.on .line3{width:145px; transform:rotate(-41deg);}
.mobile-nav{position: fixed; right: -272px; top: 0; bottom: 0; overflow-y: auto; z-index: 10; background-color: #052733; width: 272px; transition: all 300ms;}
.mobile-nav.show{right: 0;}
.mobile-nav li a{display: block; color: white; height: 65px; line-height: 65px; font-size: 16px; border-bottom: 1px solid #1A3640; padding-left: 40px;}

.footer{background: #eff1f4;}
.footer .top{position: relative;}
.footer .top .l{padding-top: 3rem; padding-bottom: 2rem;font-weight:normal;}
.footer .top .logo-qrcode{display:flex;justify-content:space-between;align-items: center;}
.footer .top .logodiv{height: 62px;display:flex;margin-right:2rem;}
.footer .top .logo{width: 207px; height: 62px;}
.footer .top .l b{display: block; font-size: 40px; color: var(--red); font-family: 'Roboto-Bold'; font-weight: normal; margin-top: 1rem; margin-bottom: 1rem;}
.footer .top ul{display:block;margin:30px 15px 0 15px;}
.footer .top li{color: #333333; padding-top: 10px;}
.footer .top li .iconfont{margin-right: 10px;}
.footer .top .qrcode{display: flex; align-items: center; color: #333333; font-size: 14px;}
.footer .top .qrcode img{width: 75px; height: 75px; margin-right: 0.5rem; flex-shrink: 0}
.footer .top .r{border-left: 1px solid #d7d8db; padding-top: 3rem; padding-bottom: 2rem;min-width: 65%;display: flex;justify-content: space-around;padding-left: 3rem;}
.footer .top dt{font-size: 17px; color: #252525; font-weight: 600; padding-bottom: 22px; margin-bottom: 29px; line-height: 1; position: relative;}
.footer .top dt::after{width: 1em; height: 3px; background-color: var(--red); content: ' '; position: absolute; bottom: 0; left: 0;}
.footer .top dd{margin-bottom: 18px; line-height: 1}
.footer .top dd a{color: #333333; font-weight: normal;}
.footer .top .copy{position: absolute; right: 0; bottom: 2rem; color: #333333; line-height: 1.5;font-weight:normal;}
.footer .top .copy a{color: var(--red)}
.footer .flinks-wrap{border-top: 1px solid #d7d8db; padding: 30px 0; font-size: 15px;}
.footer .flinks{background: white; padding: 15px; position: relative;}
.footer .flinks .iconfont{color: #3c3f3f}
.footer .flinks label{margin-left: 8px; margin-right: 30px;}
.footer .flinks a{color: var(--red); margin-right: 30px;}
.footer .flinks .icon-arrow-sortdown-smal{color: #9f9fa0; transition: all 300ms;}
.footer .flinks ul{position: absolute; bottom: 100%; max-height: 50vh; overflow-y: auto; left: 0; width: 100%; background: white; box-shadow: 0 -10px 10px 0 rgba(0,0,0,.1); padding: 10px 0; display: none}
.footer .flinks li{padding: 5px 15px;}
.footer .flinks:hover ul{display: block;}
.footer .flinks:hover .icon-arrow-sortdown-smal{transform: rotate(180deg);}
.footer .towrow-div {display: grid;grid-template-columns: repeat(2, 1fr);gap: 0 30px;margin: 0;padding: 0;}

@media (max-width: 1499px) {
  .footer .top dl{margin-left: 100px;}
}
@media (max-width: 1399px) {
  .pc-nav .nav .nav-item{margin-left: 30px;}
  .pc-nav .contact{margin-left: 20px; padding-left: 25px;}
  .footer .top dl{margin-left: 50px;}
}
@media (max-width: 1299px) {
  .pc-nav .nav .nav-item{margin-left: 15px;}
  .pc-nav .contact{margin-left: 15px; padding-left: 15px;}
  .footer .top dl{margin-left: 30px;}
}
@media (max-width: 991px) {
  .pc-nav{display: none;}
  .mobile-top-wrap{display: block;}
  .footer .top .logo{width: 200px; height: 59px;}
  .footer .top{display: block;}
  .footer .top .l{padding: 30px 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
  .footer .top .l b{font-size: 25px; margin-top: 25px; margin-bottom: 15px;display: none;}
  .footer .top .r{display: none}
  .footer .top .copy{position: relative; bottom: 0; text-align: center; padding-bottom: 30px;}
  .footer .flinks-wrap{display: none}
}
@media (max-width: 767px) {
}
@media (max-width: 699px) {
}
@media (max-width: 599px) {
}
@media (max-width: 414px) {
}
@media (max-width: 400px) {
}
@media (max-width: 375px) {
}
@media (max-width: 320px) {
}