/* 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; background: rgba(0, 0, 0, 0.5);}
.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: 600px;}
.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%;}
.popupLayer .main_popup2 {position: fixed; z-index: 33; width: 80%; height: auto; visibility: visible; opacity: 1; left: 50%; top: 45%; transform: translate(-50%, -50%); max-width: 600px; border-radius: 16px 16px 0 0;}
.popupLayer .main_popup2 .swiper-container {overflow:hidden; position:relative;}
.popupLayer .main_popup2 .swiper-container .swiper-pagination {position:absolute; top:16px; right:16px; left:auto; bottom:auto; padding:5px 10px;; background:rgba(0,0,0,0.4); color:#fff; width:auto; border-radius:16px;}
.popupLayer .main_popup2 .swiper-container .popup_controls {display:flex; position:absolute; bottom:16px; right:16px; gap:4px;}
.popupLayer .main_popup2 .swiper-container .popup_controls .swiper-button-prev, .popupLayer .main_popup2 .swiper-container .popup_controls .swiper-button-next {position:relative; margin-top:0; left:auto; right:auto; top:auto;}
.main_popup2 .popup_controls .swiper-button-autoplay {
    position: static;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:10;
}

/* autoplay 기본 아이콘 제거 */
.main_popup2 .swiper-button-autoplay:before,
.main_popup2 .swiper-button-autoplay:after {
    content: '';
    display: block;
}

/* 재생 중 상태: pause 아이콘 */
.main_popup2 .swiper-button-autoplay.is-play:before {
    width: 2px;
    height: 14px;
    background: #fff;
    margin-right: 4px;
}

.main_popup2 .swiper-button-autoplay.is-play:after {
    width: 2px;
    height: 14px;
    background: #fff;
}

/* 정지 상태: play 아이콘 */
.main_popup2 .swiper-button-autoplay.is-pause:before {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #fff;
}

.main_popup2 .swiper-button-autoplay.is-pause:after {
    display: none;
}
.popup-bottom {display: flex; justify-content: space-between; align-items: center; min-height: 30px; line-height: 30px; padding:0 10px; font-size: 13px; background:#000;}
.popup-bottom >*{color: #ffffff; font-weight: 600;}
.popup-bottom .justClose svg{width: 25px; height: 25px;}

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