@charset "utf-8";

#shHeader{position:relative;z-index:1}

#shHeader .gnb_top{background:var(--primary)}
#shHeader .gnb_top ul{display:flex;align-items:center;justify-content:flex-end;max-width:var(--mainsize);height:38px;margin:0 auto}
#shHeader .gnb_top ul li+li{margin-left:25px}
#shHeader .gnb_top ul li a{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase}

/* 로고+아이콘 */
#shHeader .gnb_mid{display:flex;align-items:center;justify-content:center;position:relative;max-width:var(--mainsize);height:100px;margin:0 auto; text-align:center}
#shHeader .gnb_mid .sh_logo{width:182px}
#shHeader .gnb_mid .btn_utils{display:flex;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%)}
#shHeader .gnb_mid .btn_utils p{font-size:36px}
#shHeader .gnb_mid .btn_utils .cart{position:relative;margin-left:15px}
#shHeader .gnb_mid .btn_utils .cart .count{position:absolute;right:-6px;top:3px;min-width:19px;height:19px;padding:0 3px;border-radius:10px;font-size:10px;font-weight:700;line-height:19px;color:#fff;text-align:center;background:var(--primary)}

/* 메뉴 */
#shHeader .gnb_area{border-top:1px solid #e9e9e9}
#shHeader .gnb_area .inner{display:flex;align-items:center;position:relative;max-width:var(--mainsize);height:65px;margin:0 auto;padding-left:70px}
#shHeader .gnb_area .nav_wrap .close{display:none;position:absolute;right:5px;top:8px}
#shHeader .gnb_area .nav_wrap .close span{font-size:34px}
#shHeader .gnb_area .nav_wrap .mo_mn{display:none;padding-top:25px;margin-top:25px;border-top:1px solid #e9e9e9}
#shHeader .gnb_area .nav_wrap .mo_mn ul li a{font-size:14px;font-weight:500;line-height:2.2;color:#777}
#shHeader .gnb_area .nav_wrap.off{display:flex;align-items:center;width:100%;height:100%}
#shHeader .gnb_area .nav_wrap.off > ul{display:flex;width:100%;height:100%}
#shHeader .gnb_area .nav_wrap.off > ul > li{display:flex;align-items:center;position:relative}
#shHeader .gnb_area .nav_wrap.off > ul > li+li{margin-left:50px}
#shHeader .gnb_area .nav_wrap.off > ul > li.loc_li1{margin-left:auto}
#shHeader .gnb_area .nav_wrap.off > ul > li > a{font-size:16px;font-weight:700}
#shHeader .gnb_area .nav_wrap.off > ul > li ul{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);min-width:140px;width:max-content;padding:25px 30px;background:var(--primary)}
#shHeader .gnb_area .nav_wrap.off > ul > li ul a{font-size:14px;font-weight:500;line-height:2;color:#fff}
#shHeader .gnb_area .loc_nav{margin-left:auto}
#shHeader .gnb_area .no-cate{font-size:15px;font-weight:500}
#shHeader .gnb_area .no-cate a{margin-left:10px}
@media(hover:hover){
#shHeader .gnb_area .nav_wrap > ul > li ul a:hover{opacity:.7}
}

/* 전체메뉴 버튼 */
#allCateBtn{position:absolute;left:0;width:18px;height:45px}
#allCateBtn span{display:block;position:relative;width:18px;height:2px;background:#000;transition:all .2s .2s}
#allCateBtn span:before{display:block;content:"";position:absolute;left:0;top:-6px;width:18px;height:2px;background:#000;transition:all .2s }
#allCateBtn span:after{display:block;content:"";position:absolute;left:0;top:6px;width:18px;height:2px;background:#000;transition:all .2s }
#allCateBtn.on span{width:0;transition:all .2s 0s }
#allCateBtn.on span:before{top:0;transform:rotate(45deg);left:-1px;width:20px;transition:all .2s .2s}  
#allCateBtn.on span:after{top:0;transform:rotate(-45deg);left:-1px;width:20px;transition:all .2s .2s}  

/* 전체메뉴 */
#shHeader .gnb_area .nav_wrap.on{overflow-y:scroll;-ms-overflow-style:none;position:absolute;top:-1px;left:60px;width:calc(100% - 60px);height:auto;max-height:400px;padding:45px 40px;border:1px solid #e9e9e9;background:#fff}
#shHeader .gnb_area .nav_wrap.on::-webkit-scrollbar{width:4px}
#shHeader .gnb_area .nav_wrap.on::-webkit-scrollbar-thumb{background-color:#bbb}
#shHeader .gnb_area .nav_wrap.on::-webkit-scrollbar-track{background-color:#fff}
#shHeader .gnb_area .nav_wrap.on > ul{display:grid;display:grid;grid-template-columns:repeat(5, 1fr);column-gap:20px;row-gap:40px}
#shHeader .gnb_area .nav_wrap.on > ul > li > a{display:block;margin-bottom:15px;font-size:16px;font-weight:700}
#shHeader .gnb_area .nav_wrap.on > ul > li ul{display:block!important;opacity:1!important}
#shHeader .gnb_area .nav_wrap.on > ul > li ul a{opacity:.7;font-size:14px;font-weight:600;line-height:1.8;color:#111}
@media(hover:hover){
#shHeader .gnb_area .nav_wrap.on > ul > li ul a:hover{opacity:1}
}

/* 검색 레이어 */
#searchPop{display:none;position:fixed;top:0;left:0;z-index:2;width:100%;height:100%;padding-bottom:10vh;background:rgba(0, 0, 0, 0.85)}
#searchPop .close{position:absolute;right:2.5%;top:30px}
#searchPop .close span{font-size:40px;color:#fff}
#searchPop .inner{display:flex;height:100%}
#searchPop .sch_area{max-width:800px;width:100%;border-bottom:2px solid #fff;margin:auto}
#searchPop .sch_area form{display:flex}
#searchPop .sch_area input{flex-grow:1;height:60px;padding:0 15px;border:none;background:none;font-size:20px;color:#fff}
#searchPop .sch_area input:focus{border:none!important}
#searchPop .sch_area button{width:70px;margin-left:auto;color:#fff}
#searchPop .sch_area button p{font-size:40px}

/* 모바일 고정 탭 */
#moTab{display:none;justify-content:space-around;position:fixed;left:0;bottom:0;width:100%;height:52px;border-top:1px solid #e9e9e9;line-height:45px;background:#fff}
#moTab a{display:flex;align-items:center}
#moTab a p{font-size:32px}
#moTab a.cart{position:relative}
#moTab a.cart .count{position:absolute;right:-4px;top:13px;min-width:17px;height:17px;padding:0 3px;border-radius:10px;font-size:9px;font-weight:700;line-height:17px;color:#fff;text-align:center;background:var(--primary)}

@media(max-width:1520px){
#shHeader .gnb_top{padding:0 20px}    
#shHeader .gnb_mid .btn_utils{right:20px}
#shHeader .gnb_area{padding:0 20px}
}
@media(max-width:1024px){
#shHeader .gnb_area .nav_wrap.off > ul{overflow-x:scroll;-ms-overflow-style:none}
#shHeader .gnb_area .nav_wrap.off > ul::-webkit-scrollbar{height:4px}
#shHeader .gnb_area .nav_wrap.off > ul::-webkit-scrollbar-thumb{background-color:#bbb}
#shHeader .gnb_area .nav_wrap.off > ul::-webkit-scrollbar-track{background-color:#fff}
#shHeader .gnb_area .nav_wrap.off > ul > li > a {white-space:nowrap}
#shHeader .gnb_area .nav_wrap.off > ul > li+li{margin-left:50px!important}
#shHeader .gnb_area .nav_wrap.off > ul > li ul{display:none!important;opacity:1!important}
#shHeader .gnb_area .nav_wrap.on{left:40px;width:calc(100% - 30px);padding:35px 30px}
#shHeader .gnb_area .nav_wrap.on > ul{grid-template-columns:repeat(4, 1fr)}
#searchPop{padding:0 20px}
}
@media(max-width:768px){
#shHeader .gnb_top ul{height:34px}   
#shHeader .gnb_mid{height:75px} 
#shHeader .gnb_mid .sh_logo{width:140px}
}
@media(max-width:580px){
#shHeader .gnb_top{display:none}
#shHeader .gnb_mid{justify-content:normal;height:60px;padding:0 20px}
#shHeader .gnb_mid .btn_utils .cart{margin-left:5px}
#shHeader .gnb_mid .btn_utils p{font-size:32px}
#shHeader .gnb_area .inner{height:40px;padding-left:0}
#shHeader .gnb_area .nav_wrap.off > ul > li+li{margin-left:30px!important}
#shHeader .gnb_area .nav_wrap.off > ul > li > a{font-size:15px}
#shHeader .gnb_area .nav_wrap.on{position:fixed;left:0;top:0;width:100%;height:100vh;max-height:none;padding:35px 20px 0;border:none}
#shHeader .gnb_area .nav_wrap.on .close{display:block}
#shHeader .gnb_area .nav_wrap.on .mo_mn{display:block!important}
#shHeader .gnb_area .nav_wrap.on > ul{display:block}
#shHeader .gnb_area .nav_wrap.on > ul > li + li{margin-top:10px}
#shHeader .gnb_area .nav_wrap.on > ul > li > a{margin-bottom:0;padding:5px 0}
#shHeader .gnb_area .nav_wrap.on > ul > li ul{  display:none!important}
#allCateBtn{display:none}
#moTab{display:flex}
#searchPop .close span{font-size:34px}
#searchPop .sch_area input{height:50px;padding:0 10px;font-size:16px}
#searchPop .sch_area button{width:50px}
#searchPop .sch_area button p{font-size:34px}
}