/* BASIC css start */
#header .headroom--unpinned .top{transition: 0.3s;}
#header .top{padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; box-sizing: border-box; background-color: #fff;}
#header .headroom--unpinned .top.hide{opacity:0;  visibility:hidden;}
#header .headroom--unpinned .top .back-btn{display: inline-block;}
#header .scroll .cate-wrap{top:59px ! important;}

#header .cate-wrap{display: none;}
#header .headroom--unpinned .cate-wrap{display: block; position: fixed; top: 0; left: 0; width: 100%; transition: 0.3s; background-color: rgba(255,255,255,0.9); z-index: 10;}

#header .cate-wrap.no{ opacity:0; transition:0.1s; height:0; visibility:hidden;}

#header .cate-wrap .swiper{padding:0 18px;}
#header .cate-wrap li{width: fit-content;}
#header .cate-wrap li a{font-size: 14px; font-weight: 500; color: #111; line-height: 18px; padding: 11px 0; display: block;}

#header .top .logo svg{height: 18px;}

#header .top .util{display: flex; align-items: center; gap: 20px;}
#header .top .util a svg{max-width: 20px;}
#header .util .cart a { position: relative; display:block;}
#header .util .cart .count { position: absolute; top: -6px; right:-7px; width: 16px; height: 16px; background: #000; border-radius: 50%; line-height: 18px; text-align: center;  font-weight: 600; font-size: 8px; color: #fff; }

#header .headroom--top .left .back-btn svg,
#header .headroom--top .util .cart svg{fill: #fff;}

#header .headroom--top .util .search svg,
#header .headroom--top .util .mypage svg,
#header .headroom--top .left .home svg,
#header .headroom--top .util .ham svg{stroke: #fff;}

/*»óÇ° »ó¼¼ÆäÀÌÁö*/
#detail-header #header .headroom--top .left .back-btn svg,
#detail-header #header .headroom--top .util .cart svg{fill: #fff ! important;}

#detail-header #header .headroom--top .util .search svg,
#detail-header #header .headroom--top .util .mypage svg,
#detail-header #header .headroom--top .left .home svg,
#detail-header #header .headroom--top .util .ham svg{stroke: #fff ! important;}
#detail-header #header .headroom--top .top{background-color: transparent ! important;}

#header .top .left .home{margin-left: 10px;}


/*Àüü ÆäÀÌÁö*/
#header .headroom{background-color: #fff;}
#header .headroom .left .back-btn svg,
#header .headroom .util .cart svg{fill: #111;}

#header .headroom .util .search svg,
#header .headroom .util .mypage svg,
#header .headroom .left .home svg,
#header .headroom .util .ham svg{stroke: #111;}


.dimBox.open{background-color: rgba(0,0,0,0.5); width: 100%; height: 100dvh; z-index: 100000; position: fixed; top: 0; right: 0;}



/*¸ÞÀÎÆ˾÷*/
.popupLayer{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000;}
.popupLayer .main_popup{position: fixed; z-index: 33; width: 80%; height: auto; visibility: visible; opacity: 1; left: 50%; top: 45%; transform: translate(-50%, -50%); max-width: 500px;  background: #000;}
.popupLayer .main_popup .swiper-container{overflow: hidden;}
.popupLayer .main_popup .swiper-pagination{position: absolute; top: -25px; right: 0; background: #000; width: 40px; height: 20px; color: #fff; left: auto; font-size: 11px; line-height: 20px; border-radius: 20px;}
.popupLayer .swiper-slide img{width: 100%;}

.popup-bottom {display: flex; justify-content: space-between; align-items: center; padding: 2px 10px; font-size: 13px;}
.popup-bottom >*{color: #ffffff; font-weight: 600;}
.popup-bottom .justClose svg{width: 25px; height: 25px;}

.popupLayer.open{display: block;}
/* BASIC css end */