@charset "utf-8";

#shGnb{font-size:14px;font-weight:600;color:#111;z-index:160;}
#shGnb .gnb_wrap{display:flex;align-items:center;position:relative;height:80px;margin:0 auto}
#shGnb .sh_nav{position:relative;border-top:1px solid #e1e1e1}
#shGnb .nav_wrap_0605{display:flex;align-items:center;position:relative;height:40px;margin:0 auto}
#shGnb.sub{border-bottom:1px solid #e1e1e1}

#shGnb .sh_logo img{width:137px}

/* 검색 */
#shGnb .sh_search{overflow:hidden;position:absolute;left:50%;transform:translateX(-50%);width:30%;height:50px;border-radius:50px;border:2.5px solid var(--primary)}
#shGnb .sh_search .sch_input{display:block;width:calc(100% - 60px);height:100%;padding-left:24px;border:none;font-size:16px;background:#fff;font-family:'Pretendard'}
#shGnb .sh_search .sch_input::placeholder{color:#a2a2a2}
#shGnb .sh_search .sch_input:focus,#shGnb .sh_search .sch_input:active{border:none!important;outline:none;box-shadow:none}
#shGnb .sh_search button{position:absolute;right:0;top:0;width:60px;height:100%;padding:2px 1px 0 0;border:none;color:var(--dark);background:none}
#shGnb .sh_search button svg{width:22px;height:22px;stroke-width:2.5;color:var(--primary)}
#shGnb .sch_kwd_mo{display:none}

#shGnb .sh_search.re{display:flex;width:35%;padding-left:15px}
#shGnb .sh_search.re select{width:102px;border:none;font-size:15px;font-weight:600;color:var(--primary);-webkit-appearance:none;appearance:none;background:url(/sh_img/common/cm_arr_prm.png) right center no-repeat;background-size:16px;font-family:'Pretendard'}
#shGnb .sh_search.re select:focus{outline:none;border:none!important;box-shadow:none}
#shGnb .sh_search.re .sch_input{padding-left:15px}

/* nav 버튼 */
#navBtn_0605{display:flex;flex-shrink:0;z-index:160;align-items:center;border:none;background:none;font-size:14px;font-weight:700;color:#111;font-family:'Pretendard'}
#navBtn_0605 .mn_btn{}
#navBtn_0605 .mn_btn div{position:relative;width:19px;height:14px;margin-right:10px}
#navBtn_0605 .mn_btn span{display:block;position:absolute;height:2px;background:#111;transition:all .2s}
#navBtn_0605 .mn_btn .span1{top:50%;left:0;width:19px;margin-top:-1px;transform-origin:50% 50%}
#navBtn_0605 .mn_btn .span2{top:0;left:0;width:19px;transform-origin:0 50%}
#navBtn_0605 .mn_btn .span3{bottom:0;right:0;width:19px;transform-origin:100% 50%;transform:translate(0, 0)}
#navBtn_0605.active .mn_btn .span1{transform:rotate(-45deg)}
#navBtn_0605.active .mn_btn .span2{width:9px;transform:translate(2.5px, 0) rotate(45deg)}
#navBtn_0605.active .mn_btn .span3{width:9px;transform:translate(-2.5px, 0) rotate(45deg)}
#shGnb .nav_wrap_0605 ul{display:flex;align-items:center;margin-left:60px;}
#shGnb .nav_wrap_0605 ul li{position:relative}
#shGnb .nav_wrap_0605 ul li+li{margin-left:25px}
#shGnb .nav_wrap_0605 ul li.line:before{display:block;content:"";position:absolute;left:-20px;top:50%;width:1px;height:12px;margin-top:-6px;background:#ddd}
#shGnb .nav_wrap_0605 ul li.line{margin-left:40px!important}
#shGnb .nav_wrap_0605 ul li.sm{margin-left:15px}
#shGnb .nav_wrap_0605 ul li.sm a{font-size:15px;color:#999}
#shGnb .nav_wrap_0605 ul li.sm a.on{color:#111}
#shGnb .nav_wrap_0605 ul li a{display:flex;align-items:center;font-size:14px;font-weight:600;color:#111;letter-spacing:-.3px}
#shGnb .nav_wrap_0605 ul li a.on{color:var(--primary)}
#shGnb .nav_wrap_0605 ul li a img{width:28px;margin-right:4px}
#shGnb .nav_wrap_0605 ul li a .st{margin:0 0 6px 4px;font-size:11px;font-weight:700;color:#0066ff}
#shGnb .nav_wrap_0605 ul li a .st2{margin:0 0 6px 4px;font-size:11px;font-weight:700;color:#fa3390}
#shGnb .nav_wrap_0605 .ps{display:flex;align-items:center;margin-left:auto;font-size:16px;font-weight:500;color:#111}
#shGnb .nav_wrap_0605 .ps span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:10px;border-radius:50%;background:#f2f2f2;transition:all .2s}
#shGnb .nav_wrap_0605 .ps svg{width:16px;height:16px}
@media(hover:hover){
#shGnb .nav_wrap_0605 ul li a:hover{color:var(--primary)}
#shGnb .nav_wrap_0605 ul li.sm a:hover{color:#111}
#shGnb .nav_wrap_0605 .ps:hover span{color:#fff;background:var(--dark)}
}

/* 카테고리 슬라이드 */
#shGnb .cate_wrap{overflow:hidden;position:relative;padding:0 120px 0 185px}
#shGnb .cate_wrap:before{display:block;content:"";position:absolute;left:55px;top:50%;transform:translateY(-50%);width:1px;height:45px;background:var(--line)}
#shGnb .cate_wrap button{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:12px;border:none;color:#fff;background:#bbb}
#shGnb .cate_wrap button.prev{left:111px}
#shGnb .cate_wrap button.next{right:50px}
#shGnb .cate_wrap button.swiper-button-disabled{opacity:.35}
#shGnb .cate_slide a{display:flex;flex-flow:column;justify-content:center;align-items:center;width:80px;height:80px;border-radius:16px;background:var(--pale)}
#shGnb .cate_slide a img{width:35px;margin-bottom:8px}

/* 전체 카테고리 */
#allCate{display:none;overflow:hidden;position:absolute;left:calc((100% - 1320px) / 2);top:60px;width:300px;border:1px solid var(--line);border-radius:12px;font-size:14px;box-shadow:3px 3px 10px rgba(0,0,0,.08);background:#fff}
#allCate .cate_top{display:none;height:55px;border-bottom:1px solid #e1e1e1;color:#111}
#allCate .cate_top button{width:55px;height:100%;border:none;color:#111;background:#fff}
#allCate .cate_back svg{position:absolute;left:12px;top:14px}
#allCate .cate_p{display:none;width:160px;padding:15px 18px 8px;font-size:13px}
#allCate .flex>ul>li{padding-left:15px}
#allCate .flex>ul>li.on button{background:var(--pale)}
#allCate ul{width:160px;padding:20px 0 20px 0}
/*#allCate ul li{line-height:30px}*/
#allCate ul li button{display:block;position:relative;width:100%;padding-left:15px;border:none;border-radius:20px 0 0 20px;background:none;font-weight:600;font-size:14px;line-height:30px;color:#111;text-align:left;font-family:'Pretendard'}
#allCate .s_cate{overflow-y:scroll;width:200px;display:none;position:absolute;top:0;right:0;height:100%;padding:20px 20px;background:var(--pale)}
#allCate .s_cate a{display:block;color:#888;line-height:26px}
#allCate .s_cate li.on a{color:var(--primary)}
#allCate li.on .s_cate{display:block}
#allCate .links{display:none;width:100%;padding:20px 0;margin:20px 0 0 10px;border-top:1px solid #e9e9e9}
#allCate .links a{display:block;font-size:13px;color:#111}
#allCate .links a+a{margin-top:15px}
@media(hover:hover){
#allCate .s_cate a:hover{color:#111}
#allCate ul li.on button, #allCate ul li:hover button{background:var(--pale)}
#allCate ul li.on button:after, #allCate ul li:hover button:after{position:absolute;top:0;right:15px;content:"\f105";font-family:'fontawesome'}
}

/* 모바일 */
#shGnbMo{display:none;justify-content:space-between;align-items:center;z-index:160;width:100%;height:40px;padding:0 12px;background:#fff}
#shGnbMo .logo_m{position:absolute;left:50%;top:25%;transform:translate(-50%,-50%);font-size:18px;font-weight:700;text-transform:uppercase}
#shGnbMo .logo_m img{width:120px}
#shGnbMo button{height:100%;border:none;background:none}
#shGnbMo .all_menu div{position:relative;width:19px;height:14px;margin-right:10px}
#shGnbMo .all_menu span{display:block;position:absolute;height:2px;background:#111;transition:all .2s}
#shGnbMo .all_menu .span1{top:50%;left:0;width:19px;margin-top:-1px;transform-origin:50% 50%}
#shGnbMo .all_menu .span2{top:0;left:0;width:19px;transform-origin:0 50%}
#shGnbMo .all_menu .span3{bottom:0;right:0;width:19px;transform-origin:100% 50%;transform:translate(0, 0)}
#shGnbMo .u_cart{position:relative;margin-left:8px}
#shGnbMo .u_cart span{display:block;position:absolute;right:2px;top:-10px;height:22px;border-radius:5px;padding:1px 5px;font-size:11px;line-height:22px;color:#fff;text-align:center;background:var(--primary)}
#shGnbMo .mo_sch_btn{margin:0 auto 0 0;color:#111}
#shGnbMo .sch_wrap{display:none;position:fixed;top:0;left:0;z-index:160;transform:none;width:100%;height:100vh;background:#fff}
#shGnbMo .sch_wrap .flex{display:flex;flex-wrap:wrap;height:55px;border-bottom:1px solid #e1e1e1}
#shGnbMo .sch_wrap .sch_back{width:45px;height:54px;border:none;color:#111;background:#fff}
#shGnbMo .sch_wrap .sch_back svg{position:absolute;left:12px;top:14px}
#shGnbMo .sch_wrap .sh_search{position:relative;left:auto!important;transform:none;width:calc(100% - 55px);height:100%;border:none;border-radius:0;background:#fff}
#shGnbMo .sch_wrap .sh_search button{width:auto;padding:0 20px 0 0}
#shGnbMo .sch_wrap .sh_search button svg{width:24px;height:24px;stroke-width:2px;color:#111}
#shGnbMo .sch_wrap .sh_search .sch_input{padding-left:0;background:#fff}
#shGnbMo .sch_kwd_mo{width:100%;padding:20px 15px;font-size:15px;font-weight:500}
#shGnbMo .sch_kwd_mo ul li a{color:#555}
#shGnbMo .sch_kwd_mo ul li+li{margin-top:20px}
#shGnbMo .sch_kwd_mo ul li a{display:flex;align-items:center}
#shGnbMo .sch_kwd_mo ul li a:before{content:"\f002";width:20px;height:20px;margin-right:8px;border-radius:50%;font-size:9px;color:#fff;text-align:center;line-height:18px;background:#d5d5d5;font-family:'fontawesome'}
#shGnbMo .sch_kwd_mo ul li a b{margin:0;padding:0;background:none;line-height:auto;font-weight:700;color:#111}
#shTabMo{display:none;position:fixed;z-index:999;width:100%;left:0;bottom:0;z-index:100;height:50px;background:rgba(255,255,255,1);box-shadow:0 -3px 2px rgba(0,0,0,.03)}
#shTabMo ul{display:flex;align-items:center;height:100%}
#shTabMo ul li{width:25%}
#shTabMo button{border:none;background:none;font-family:'Pretendard'}
#shTabMo button, #shTabMo a{display:flex;flex-flow:column;justify-content:center;align-items:center;width:100%;height:100%;font-size:11px;font-weight:600;line-height:1;color:#222}
#shTabMo svg{width:20px;height:20px;margin-bottom:6px}
#shTabMo .home{flex-shrink:0;width:38px;height:38px;margin:0 auto;padding-bottom:2px;border-radius:12px;color:#fff;background:var(--primary)}
#shTabMo .home img{width:17px}
#shTabMo a.cart{position:relative}
/*#shTabMo a.cart:before{content:"";position:absolute;right:28%;top:0;width:5px;height:5px;border-radius:50%;background:#fff}*/

#shGnbMo .sch_wrap .sh_search.re{width:calc(100% - 55px);padding-left:0}
#shGnbMo .sch_wrap .sh_search.re select{margin-right:12px}

/* 마케팅수신동의 팝업 */
/*
#agreePop{ opacity:0;position:absolute;top:120px;right:calc((100% - 1320px) / 2);z-index:101;width:280px;margin-top:10px;padding:28px 30px 18px;border-radius:10px;font-size:14px;line-height:1.45;color:#777;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.15);transition:all .3s}
#agreePop.on{opacity:1;margin-top:0}
#agreePop .close{position:absolute;right:20px;top:20px;color:#111}
#agreePop .tit{margin-bottom:10px;font-size:17px;font-weight:700;color:#111}
#agreePop div{white-space:pre-line}
#agreePop .agree{display:block;width:100%;height:40px;margin:10px 0 5px;border:none;border-radius:4px;font-size:15px;text-align:center;line-height:40px;font-weight:600;font-size:15px;color:#fff;background:var(--primary);font-family:'Pretendard'}
#agreePop .reject{text-align:right}
#agreePop .reject button{border:none;font-size:12px;text-decoration:underline;background:none;font-family:'Pretendard'}


@media(min-width:769px){#shTabMo{display:none!important}}
@media(hover:hover){
#shGnb .cate_slide a:hover{border:1px solid var(--line);background:#fff}
}
@media(max-width:1360px){
#shGnb .gnb_wrap{padding:0 20px}	
#allCate{left:10px}
#shGnb .nav_wrap_0605{padding:0 20px}
#agreePop{right:20px}
}
@media(max-width:1024px){
#shGnb .nav_wrap_0605 .ps{display:none}
#shGnb .sh_search{left:43%}
#shGnb .sh_search.re{width:40%}
#shGnb .user_tip a+a{margin-left:12px}
#shGnb .user_tip .u_join{margin-left:20px}
#shGnb .cate_wrap{padding:0 85px 0 105px}
#shGnb .cate_wrap:before{left:20px}
#shGnb .cate_wrap button.next{right:22px}
#shGnb .cate_wrap button.prev{left:42px}
#shGnb .cate_slide a{width:70px;height:70px}
#shGnb .cate_slide a img{width:28px}
#shGnb .nav_wrap_0605 ul{overflow:auto;white-space:nowrap}
}

*/




@media(max-width:2500px){
#shGnb.sub{border:none}
#shGnb .gnb_wrap{display:none}
#shGnb .sh_nav{border:none;max-width:480px;}
#shGnb .nav_wrap_0605 ul{margin:0;padding:5px 5px 5px}
#shGnb .nav_wrap_0605 ul{overflow-x:scroll;}
#shGnb .nav_wrap_0605 ul::-webkit-scrollbar{height:4px}
#shGnb .nav_wrap_0605 ul::-webkit-scrollbar-thumb{background-color:#ddd}
#shGnb .nav_wrap_0605 ul::-webkit-scrollbar-track{background-color:#fff}
#shGnb .nav_wrap_0605 ul li+li{margin-left:12px}
#shGnb .nav_wrap_0605 ul li a{font-size:13px}
#shGnb .nav_wrap_0605 ul li a img{width:25px;margin-right:3px}
.nav_wrap_0605 ul{overflow-x:scroll;white-space:nowrap}
#navBtn_0605{display:none}


/* 모바일 */
#shGnbMo{display:flex;}
#shGnb .sch_kwd_mo{display:block}
#shTabMo{display:none;z-index:150;}
#allCate{left:0;top:0;z-index:200;width:100%;height:900px;overflow-y:scroll;border:none;border-radius:0;font-size:14px;}
#allCate .cate_top{display:block}
#allCate .flex>ul{display:flex;flex-wrap:wrap;width:200px;padding:0 4px}
#allCate .flex>ul>li{width:50%;padding:2.5px}
#allCate .flex>ul>li.on button{color:#fff;border:none;background:var(--primary)}
#allCate .flex>ul>li:nth-child(even) button{border-left:1px solid #e1e1e1}
#allCate .flex>ul>li>a{padding-left:10px;font-size:15px;color:#999}
#allCate .cate_p{display:block}
#allCate ul{width:50%;padding:12px 0 12px;height:auto; /* 세로 스크롤바 추가 */}
#allCate ul li {max-height:26px;}
#allCate ul li a {max-height:22px;}
#allCate ul li button{border-radius:5px;padding-left:0;border:1px solid #e1e1e1;font-size:10px;text-align:center;line-height:22px}
#allCate ul li button:after{display:none!important}
#allCate .s_cate{overflow-y:scroll;top:55px;width:calc(100% - 200px);height:calc(100% - 55px);padding:20.5px 5px 12px 10px;background:#f2f2f2}
#allCate .s_cate li{float:left;padding:4px}
#allCate .s_cate a{padding:0 8px;border-radius:5px;font-size:11px;line-height:26px;background:#fff}
#allCate .s_cate li .box {padding:0;background:#fff}
#allCate .links{display:block}
#agreePop{position:fixed;top:auto;right:0;bottom:0;width:100%;padding:20px 20px 18px;border-radius:12px 12px 0 0}
}


@media(max-width:600px){
    #shGnbMo {width:100%;}
    #shGnb .sh_nav{width:100%;}
}