/* BASIC css start */
#headerWrap {width:100%; position:relative; z-index:999; position:fixed; top:0; left:0;}
#headerWrap .top_banner {width:100%; position:relative; text-align:center; background:#050A05; height:36px; }
#headerWrap .top_banner p {font-size:12px; font-weight:400; color:#fff; line-height:36px; letter-spacing:-0.03em;}
#headerWrap .top_banner a.close_btn {display:block; width:15px; height:15px; background:url('/design/hanstyle/wib/2022wib/img/main/pop_close.svg') no-repeat center center; position:absolute; top:50%; margin-top:-8px; right:15px;} 

#headerWrap .top {width:100%; position:relative; background:#fff; transition:all 0.4s; position:fixed; top:36px; left:0;}
#headerWrap .top .h_logo {width:100%; text-align:Center; padding:23px 0;}
#headerWrap .top .h_logo a {display:inline-block; }
#headerWrap .top .ham {position:absolute; top:20px; left:15px; width:22px; height:19px; display:inline-block; transition:all 0.4s; box-sizing:border-box;}
#headerWrap .top .ham span {display: inline-block; transition: all .4s; box-sizing: border-box; position:absolute; left:0; width:100%; height:1px; background:#050A05;}
#headerWrap .top .ham span:nth-of-type(1) {top: 0;}
#headerWrap .top .ham span:nth-of-type(2) {top: 9px;}
#headerWrap .top .ham span:nth-of-type(3) {bottom: 0;}

#headerWrap .top > ul {display:inline-block; width:auto; height:27px; position:absolute; top:16px; right:8px; overflow:hidden;}
#headerWrap .top > ul li {float:left; width:22px; height:100%; margin-right:10px; position:relative;}
#headerWrap .top > ul li:last-child {margin:0; width:30px; }
#headerWrap .top > ul li a {display:block; width:100%; height:100%; }
#headerWrap .top > ul li:first-child a {background:url('/design/hanstyle/wib/2022wib/img/mo/h_search_b.svg') no-repeat center center;}
#headerWrap .top > ul li:last-child a {background:url('/design/hanstyle/wib/2022wib/img/mo/h_cart_b.svg') no-repeat center left;}
#headerWrap .top > ul li:last-child span {display:inline-block; width:14px; height:14px; background:#50696F; border-radius:50%; text-align:center; line-height:14px; font-size:10px; font-weight:400; color:#fff; letter-spacing:-0.03em; position:absolute; top:0; right:0; }

#headerWrap .top_b2 {top:-63px; z-index:200;}
#headerWrap .top_b2.n {top:0;}

#headerWrap .bottom {width:100%; height:50px; background:#fff; overflow:hidden; transition:all 0.4s; position:fixed; top:-50px; left:0; z-index:100}
#headerWrap .bottom.fixed {top:0;}
#headerWrap .bottom ul {margin-left:15px; height:100%; display:flex;overflow-x:auto; flex-wrap:nowrap; -ms-overflow-style: none; scrollbar-width: none;}
#headerWrap .bottom ul::-webkit-scrollbar {display:none;}
#headerWrap .bottom ul li {flex:0 0 auto; width:auto; display:inline-block; height:100%; margin-right:20px;}   /*  메뉴간 간격이 넓어보여 margin-right:30px;을 margin-right:20px; 로 수정함 */
#headerWrap .bottom ul li a {display:inline-block; font-size:12px; font-weight:400; color:#505050; line-height:50px; }
#headerWrap .bottom ul li a img {vertical-align:middle; margin-bottom:3px;}   /* hs로고가 폰트보다 아래에 있어서  margin-bottom:3px; 추가함 */


/* 검색 */
.search_box {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:#fff; z-index:1000; overflow-y:scroll; -ms-overflow-style: none; scrollbar-width: none;}
.search_box::-webkit-scrollbar {display:none;}
.search_box .top {background:#F5F5F5; padding:60px 15px 47px; position:relative; }
.search_box .top .search_x {display:block; width:20px; height:20px; background:url('/design/hanstyle/wib/2022wib/img/mo/search_x.svg') no-repeat center center; position:absolute; top:20px; left:15px;}
.search_box .top .hd-search {position:relative; }
.search_box .top .hd-search input {width:100%; height:46px; border:1px solid #505050; border-radius:3px; background:#fff; padding:0; text-indent: 10px;}
.search_box .top .hd-search input::placeholder {font-size:12px; font-weight:400; color:#838383; letter-spacing:-0.05em; line-height:46px; }
.search_box .top .hd-search a.btn_search {display:block; width:22px; height:22px; background:url('/design/hanstyle/wib/2022wib/img/mo/search_btn.svg') no-repeat center center; position:absolute; top:12px; right:11px; }
.search_box .inner_box {padding:0 15px 180px; }
.search_box .btm {padding-top:27px;}
.search_box .btm > div > h2 {font-size:18px; font-weight:500; letter-spacing:-0.03em; line-height:1; padding-bottom:20px; margin-bottom:25px; border-bottom:1px solid #F2F2F2}
.search_box .best ul {overflow:hidden;}
.search_box .best ul li {width:50%; margin-bottom:18px; float:left;  }
.search_box .best ul li a {display:inline-block; font-size:14px; font-weight:400; color:#505050; letter-spacing:-0.03em; line-height:1;}
.search_box .best ul li a span {display:inline-block;padding-right:12px; font-size:14px; font-weight:500; color:#a63737; line-height:1;  }

.search_box .best ul li:nth-of-type(1){animation-name:li1;-webkit-animation-name:li1; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 0.1s;-webkit-animation-delay: 0.1s;-moz-animation-delay: 0.1s;-ms-animation-delay: 0.1s;-o-animation-delay: 0.1s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_box .best ul li:nth-of-type(2){animation-name:li2;-webkit-animation-name:li2; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 0.3s;-webkit-animation-delay: 0.3s;-moz-animation-delay: 0.3s;-ms-animation-delay: 0.3s;-o-animation-delay: 0.3s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_box .best ul li:nth-of-type(3){animation-name:li2;-webkit-animation-name:li2; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 0.5s;-webkit-animation-delay: 0.5s;-moz-animation-delay: 0.5s;-ms-animation-delay: 0.5s;-o-animation-delay: 0.5s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_box .best ul li:nth-of-type(4){animation-name:li2;-webkit-animation-name:li2; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 0.7s;-webkit-animation-delay: 0.7s;-moz-animation-delay: 0.7s;-ms-animation-delay: 0.7s;-o-animation-delay: 0.7s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_box .best ul li:nth-of-type(5){animation-name:li2;-webkit-animation-name:li2; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 0.9s;-webkit-animation-delay: 0.9s;-moz-animation-delay: 0.9s;-ms-animation-delay: 0.9s;-o-animation-delay: 0.9s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_box .best ul li:nth-of-type(6){animation-name:li2;-webkit-animation-name:li2; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 1.2s;-webkit-animation-delay: 1.2s;-moz-animation-delay: 1.2s;-ms-animation-delay: 1.2s;-o-animation-delay: 1.2s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_box .best ul li:nth-of-type(7){animation-name:li2;-webkit-animation-name:li2; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;-ms-animation-delay: 1.5s;-o-animation-delay: 1.5s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_box .best ul li:nth-of-type(8){animation-name:li2;-webkit-animation-name:li2; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 1.8s;-webkit-animation-delay: 1.8s;-moz-animation-delay: 1.8s;-ms-animation-delay: 1.8s;-o-animation-delay: 1.8s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_box .best ul li:nth-of-type(9){animation-name:li2;-webkit-animation-name:li2; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 2.1s;-webkit-animation-delay: 2.1s;-moz-animation-delay: 2.1s;-ms-animation-delay: 2.1s;-o-animation-delay: 2.1s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}
.search_box .best ul li:nth-of-type(10){animation-name:li2;-webkit-animation-name:li2; animation-duration:0.3s; -webkit-animation-duration:0.3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;animation-delay: 2.3s;-webkit-animation-delay: 2.3s;-moz-animation-delay: 2.3s;-ms-animation-delay: 2.3s;-o-animation-delay: 2.3s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;}

@keyframes li1{
	0%{top:-1rem;opacity:0;}
	100%{top:0;opacity:1;}
}
@keyframes li2{
	0%{top:-1rem;opacity:0;}
	100%{top:0;opacity:1;}
}

.search_box .rec {padding:42px 0 55px;}
.search_box .rec ul li {display:inline-block; padding:0 15px; text-align:center;  border:1px solid #505050; border-radius:17px; margin-bottom:5px; margin-right:1px; height:34px; width:auto;}
.search_box .rec ul li a {display:inline-block; line-height:34px; font-size:14px; letter-spacing:-0.03em; color:#505050; font-weight:400; width:100%; height:100%; }
.search_box .s_banner {width:100%; }
.search_box .s_banner .img {width:100%; }
.search_box .s_banner .img img {width:100%; }
.search_box .s_banner .txt {padding-top:10px;}
.search_box .s_banner .txt p:first-child {font-size:14px; font-weight:400; color:#050a05; letter-spacing:-0.03em; line-height:1; }
.search_box .s_banner .txt p:nth-child(2) {font-size:12px; line-height:18px; color:#838383; letter-spacing:-0.05em; font-weight:400; padding:10px 0 15px; }
.search_box .s_banner .txt a {font-size:9px; font-weight:400; color:#838383; letter-spacing:0.05em; line-height:30px; width:90px; height:30px; border:1px solid #e5e5e5; text-align:center; display:block; }
.search_box .s_banner .txt a img {display:inline-block; vertical-align:middle; padding-left:5px; }
/* 검색 */


/* 메뉴 */
.menubox {transition:all 0.4s; position:fixed; top:0; left:-100%; width:100%; height:100vh; z-index:999; background:#fff;overflow-y:scroll; -ms-overflow-style: none; scrollbar-width: none;}
.menubox::-webkit-scrollbar {display:none;}
.menubox.open {left:0; }
.menubox .top {padding:20px 15px; text-align:right; position:relative; }
.menubox .top > a.ham_x {display:block; width:20px; height:20px; background:url('/design/hanstyle/wib/2022wib/img/mo/search_x.svg') no-repeat center center;}
.menubox .top > ul {display:flex; position:absolute; top:15px; right:7px; width:100px; height:26px; }
.menubox .top > ul li {width:33.3%; height:22px; position:relative; top:4px;}
.menubox .top > ul li:first-child a {display:block; width:22px; height:100%; background:url('/design/hanstyle/wib/2022wib/img/mo/m_search.svg') no-repeat center center;}
.menubox .top > ul li:nth-child(2) a {display:block; width:22px; height:100%; background:url('/design/hanstyle/wib/2022wib/img/mo/m_lang.svg') no-repeat center center;}
.menubox .top > ul li:last-child a {display:block; width:22px; height:100%; background:url('/design/hanstyle/wib/2022wib/img/mo/m_cart.svg') no-repeat center center;}
.menubox .top > ul li:last-child span {display:inline-block; width:14px; height:14px; background:#50696F; border-radius:50%; text-align:center; line-height:14px; font-size:10px; font-weight:400; color:#fff; letter-spacing:-0.03em; position:absolute; top:-4px; right:3px; }
.menubox .menu_inner {padding:4px 0 0;} 
.menubox .login_box {padding:0 15px 25px; width:calc(100% - 30px);}
.menubox .login_box .textBox {position:relative; width:100%;}
.menubox .login_box .textBox > p {font-size:18px; font-weight:400; color:#050a05; letter-spacing:-0.03em; line-height:26px;}
.menubox .login_box .textBox > p > span {font-size:22px; }
.menubox .login_box .textBox > p > span span {font-weight:700;}
.menubox .login_box .textBox > a {position:absolute; bottom:0; right:0;  width:80px; height:35px; border:1px solid #050a05; border-radius:3px; text-align:center; line-height:35px; font-size:13px; letter-spacing:0.05em; font-weight:500; color:#050a05; }
.menubox .sidemenu {width:100%; height:80px; display:flex; border-top:1px solid #F2F2F2; border-bottom:1px solid #F2F2F2;}
.menubox .sidemenu li {width:33.3%; padding:16px 0; position:relative; text-align:center; }
.menubox .sidemenu li::before {content:''; display:block; width:1px; height:100%; background:#f2f2f2; position:absolute; top:0; right:0;}
.menubox .sidemenu li:last-child::before {display:none;}
.menubox .sidemenu li a {display:block; padding-top:35px; font-size:12px; font-weight:400; color:#838383; line-height:1; }
.menubox .sidemenu li:first-child a {background:url('/design/hanstyle/wib/2022wib/img/mo/side_1.svg') no-repeat top center;}
.menubox .sidemenu li:nth-child(2) a {background:url('/design/hanstyle/wib/2022wib/img/mo/side_2.svg') no-repeat top center;}
.menubox .sidemenu li:last-child  a {background:url('/design/hanstyle/wib/2022wib/img/mo/side_3.svg') no-repeat top center;}
.menubox .menuBanner {width:100%; position:relative; background:#000;}
.menubox .menuBanner img {width:100%;}
.menubox .depth1box {position:relative;height:calc(100vh - 264px); overflow:hidden; }
.menubox .depth1box > ul {background:#F5F5F5; width:120px; overflow-y:scroll; height:100%; }
.menubox .depth1box > ul > li > a {transition:all 0.4s; display:inline-block; padding:23px 0; width:120px; text-align:center; border-bottom:1px solid #fff; font-size:14px; font-weight:400; line-height:1; color:#778877; }
.menubox .depth1box > ul > li > a img.on {display:none; }
.menubox .depth1box > ul > li > a.on {color:#fff; background:#243640;}
.menubox .depth1box > ul > li > a.on img.on {display:inline-block;}
.menubox .depth1box > ul > li > a.on img.off {display:none; }

.menubox .depth1box > .depth2box {position:absolute; top:0; right:0; width:calc(100% - 160px); height:calc(100% - 40px); background:#fff; opacity:0; visibility:hidden; transition:all 0.4s; padding:20px; overflow-y:auto; -ms-overflow-style: none; scrollbar-width: none;}
.menubox .depth1box > .depth2box::-webkit-scrollbar {display:none;}
.menubox .depth1box > .depth2box.on {opacity:1; visibility:visible; }
.menubox .depth1box > .depth2box > ul > li {margin-bottom:28px; display:block; position:relative; }
.menubox .depth1box > .depth2box > ul > li > a {display:block; font-size:14px; font-weight:400; color:#3a3a3a; line-height:1; } 
.menubox .depth1box > .depth2box > ul > li > span.md {width:20px; height:9px; background:url('/design/hanstyle/wib/2022wib/img/mo/menubtn.svg') no-repeat center right; display:block; position:absolute; top:2.5px; right:0; z-index:100; cursor:pointer; }
.menubox .depth1box > .depth2box > ul > li > ul {margin-top:20px; border-top:1px solid #F2F2F2; padding:0 0 28px 10px; border-bottom:1px solid #F2F2F2; display:none; }
.menubox .depth1box > .depth2box > ul > li > ul li {padding-top:28px; }
.menubox .depth1box > .depth2box > ul > li > ul li a {display:block; font-size:14px; font-weight:400; color:#505050; line-height:1; }
/* 메뉴 */

/* 언어 */
.langPop {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:transparent; z-index:1000; }
.langPop .dim {width:100%; height:100%; background:rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); position:absolute; top:0; left:0; z-index: -1;}
.langPop .langbox {width:calc(100% - 40px); background:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; padding:40px 0; }
.langPop .langbox > a {width:15px; height:15px; background:url('/design/hanstyle/wib/2022wib/img/mo/lang_x.svg') no-repeat center center; position:absolute; top:15px; right:15px; }
.langPop .langbox > p {font-size:22px; font-weight:600; color:#120b19; line-height:1; padding-bottom:20px;}
.langPop .langbox > select {appearance: none; height:45px; padding-left:13px; font-size:13px; letter-spacing:-0.05em; font-weight:400; color:#120b19; line-height:45px; background:#f8f8fa url('/design/hanstyle/wib/2022wib/img/mo/lang_sel.svg') no-repeat right 19px center; border:none; width:275px; margin:0 auto; }
.langPop .langbox > select::-ms-expand {display: none;}
.langPop .langbox > span {display:block; width:275px; height:45px; background:#505050; text-align:center; color:#fff; font-size: 13px; font-weight:600; line-height:45px; margin:10px auto 0; }
/* 언어 */


#scroll-right {position: fixed; z-index:999;  bottom: 20px;  right: 16px; height: auto; width: 50px; text-align: center; display: none;}
#scroll-right ul {height:100%; width:100%; display:block;}
#scroll-right ul li {width:100%; height:50px; }
#scroll-right ul li.scroll_cart {margin-bottom:5px;}
#scroll-right ul li.scroll_cart a {display:block; width:100%; height:100%; text-align:center; line-height:50px; border-radius:10px; color:#fff; font-size:14px; font-weight:400;  background:#243640; }
#scroll-right ul li.scroll_top a {display:block; width:100%; height:100%; background:#fff url('/design/hanstyle/wib/2022wib/img/mo/scroll_top.svg') no-repeat center center;border-radius:10px;}


.btmfix {position:absolute; bottom:0; left:0; width:100%; display:flex; justify-content:center; align-items:center; background:#fff; height:40px; border-top:1px solid #e5e5e5; }
.btmfix a {display:inline-block; font-size:12px; font-weight:400; color:#505050;}
.btmfix a:first-child {margin-right:70px;}


/* BASIC css end */