@charset "utf-8";
#shHeader{position:relative;width:100%}
#shHeader .gnb_top{display:flex;justify-content:space-between;align-items:center;padding:20px 0;margin:auto;width:90%}
#shHeader .cateSlide{position:relative;margin:0 20px 0 auto;height:30px}
#shHeader .cateSlide li{display:flex;align-items:center;gap:15px}
#shHeader .cateSlide li a{font-size:16px;font-weight:600;color:#444}
#shHeader .cateSlide li .number{font-size:16px;font-weight:600;color:var(--primary)}
#shHeader .btn_utils{display:flex;align-items:center;gap:18px}
#shHeader form{position:relative;z-index:2;width:350px;height:50px}
#shHeader form.mo_search{display:none}
#shHeader form input{padding-left:24px;width:100%;height:100%;border:none;border-radius:32px;font-size:15px;font-weight:500;color:#666;background-color:#f5f5f5}
#shHeader form input::placeholder{font-size:15px;font-weight:500;color:#888}
#shHeader form input:focus{border:none !important;outline:none !important;box-shadow:none !important}
#shHeader form button{position:absolute;top:50%;right:15px;transform:translateY(-50%);border:none;color:#111;background-color:transparent}
#shHeader form button svg{width:20px;height:20px}
#shHeader .btn_utils a svg{color:#111;transition:all.3s}

/* 메뉴 */
#shHeader .gnb_area{border-top:1px solid #e9e9e9}
#shHeader .gnb_area .inner{display:flex;justify-content:space-between;align-items:center;position:relative;width:88%;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}
#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;line-height:65px;}
#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:17px;font-weight:600}
#shHeader .gnb_area .nav_wrap.off > ul > li ul{display:none;position:absolute;left:50%;top:90%;transform:translateX(-50%);min-width:140px;width:max-content;padding:25px 30px;border-radius:10px;background:var(--primary)}
#shHeader .gnb_area .nav_wrap.off > ul > li ul li{text-align:center;line-height:1.5}
#shHeader .gnb_area .nav_wrap.off > ul > li ul a{font-size:15px;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}

/* 전체메뉴 버튼 */
#shHeader .dft_btn{border:none;border-radius:4px;background:none;font-family:var(--k-font);color:#000}
#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}

#shHeader .gnb_area .register{display:flex;align-items:center}
#shHeader .gnb_area .register a{display:block;padding:0 15px;border-right:1px solid #e1e1e1;font-size:15px;font-weight:600;color:#888;transition:all .3s}
#shHeader .gnb_area .register li:last-child a{border:none}
#shHeader .gnb_area .register .login{color:#111}

@media(hover:hover){
#shHeader .btn_utils a:hover svg{color:var(--primary)}
#shHeader .gnb_area .nav_wrap > ul > li ul a:hover{opacity:.7}
#shHeader .gnb_area .nav_wrap.on > ul > li ul a:hover{opacity:1}
#shHeader .gnb_area .register a:hover{color:var(--primary)}
}

@media (max-width:1230px){
#shHeader .gnb_top{width:100%;padding:20px 30px}
#shHeader .gnb_area .inner{width:calc(100% - 60px);padding-left:60px}
}
@media (max-width:1024px){
#shHeader .gnb_top{padding:20px 15px}
#shHeader .gnb_top .logo img{height:40px}
#shHeader  form{width:280px}
#shHeader .cateSlide{margin-right:15px}
#shHeader .gnb_area .inner{width:100%;padding:0 15px}
#shHeader .gnb_area .nav_wrap.off{margin:0 auto}
#shHeader .gnb_area .register a{display:none}
#shHeader .dft_btn{display:none}
}
@media (max-width:768px){
#shHeader .gnb_top{padding:15px}
#shHeader .cateSlide{display:none}
#shHeader .btn_utils{gap:10px}
#shHeader form{width:230px;height:45px}
#shHeader .gnb_area .inner{height:55px}
#shHeader .gnb_area .nav_wrap.off > ul > li{line-height:55px}
#shHeader .gnb_area .nav_wrap.off > ul > li+li{margin-left:25px}
#shHeader .gnb_area .nav_wrap.off > ul > li > a{font-size:15px}
}
@media (max-width:480px){
#shHeader .gnb_top{flex-wrap:wrap}
#shHeader .gnb_top .logo img{height:35px}
#shHeader form.mo_search{display:block;width:100%;margin-top:15px}
#shHeader form.pc_search{display:none}
#shHeader form input{padding-left:15px;border-radius:5px}
#shHeader .gnb_area .inner{padding:0 10px}
#shHeader .gnb_area .nav_wrap.off{overflow-x:scroll}
#shHeader .gnb_area .nav_wrap.off > ul > li+li{margin-left:15px}
#shHeader .gnb_area .nav_wrap.off > ul > li > a{white-space:nowrap}
}
/* 반응형 메뉴 [e] */