/* BASIC css start */
/* titleWrap */
#header .cateHeader {display: none;}

/***** common *****/
div#container { padding-top: 0; }
div#contents { padding: 0; }
#contents main { padding-bottom: 24px; box-sizing: border-box; }
#contents section { width: 100%; padding: 32px 0; box-sizing: border-box; }
#contents section [class^="banner"] {padding: 32px 0;}
#contents section:not(.topBanner) .swiper-container, #contents .gridWrap  {padding:0 16px;}

/* titleWrap */
#contents .titleWrap { margin-bottom: 24px; font-family: 'SUIT', sans-serif; padding:0 16px;}
#contents .titleWrap h3 { margin-bottom: 4px; color: #191919; font-size: 24px; font-weight: 600; font-family: 'Montserrat', 'SUIT', sans-serif; letter-spacing: -0.48px; line-height: 1.3; }
#contents .titleWrap .sub { color: #7a7a7a; font-size: 14px; font-weight: 500; letter-spacing: -0.208px; }
header#header .headerWrap,
header#header .cateHeader { background-color: rgba(255, 255, 255, 0.4); }

/* prdList */
#contents section.prdSwiper { padding-left: 0; box-sizing: border-box; overflow: hidden; }
#contents section.prdSwiper .titleWrap,
#contents section.prdSwiper .swiper-container { padding: 0 16px; box-sizing: border-box; }
#contents .icom-cont { margin-top: 24px; }
#contents .tabBtn > ul { display: flex; align-items: center; justify-content: center; gap: 10px; }
#contents .tabBtn a { font-size: 18px; }
#contents .tabContents .cont { height: 0; position: relative; top: 0; left: 0; opacity: 0; z-index: -1; }
#contents .tabContents .cont.active { height: auto; opacity: 1; z-index: 1; }
#contents .moreBtn { display: block; width: 100%; height: 40px; margin: 24px auto 0; border-radius: 8px; border: 1.5px solid #ddd; box-sizing: border-box; background-color: #fff; color: #616161; font-size: 14px; font-family: 'SUIT', sans-serif; font-weight: 700; letter-spacing: -0.07px; text-align: center; line-height: 38px; }
#contents .tabContents .moreBtn { width: calc(100% - 32px); }

/***** 메인 탑 배너 *****/
#contents section.topBanner { margin-bottom: 16px; padding: 0; }
#contents section.topBanner .swiper-pagination .swiper-pagination-bullet { display: inline-block; width: 35px; height: 2px; margin: 0; background-color: rgba(0, 0, 0, 0.2); }
#contents section.topBanner .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--black); }

/***** 카테고리 배너 *****/
#contents section.cateBanner { display: grid; padding:0; padding-left: 16px; gap: 8px 0; overflow: hidden; overflow-x: auto; scrollbar-width: none; }
.cateBanner::-webkit-scrollbar { display: none; }
.cateBanner .wrap { display: flex; flex-direction: column; gap: 8px; }
.cateBanner .wrap ul { display: flex; align-items: center; width: fit-content; padding-right: 16px; gap: 8px; box-sizing: border-box; }
.cateBanner .wrap ul li { width: fit-content; height: 40px; border: 1px solid #ddd; border-radius: 100px; box-sizing: border-box; background-color: #fff; text-wrap: nowrap; }
.cateBanner .wrap ul li.on { border: 1.5px solid #ff67b6; }
.cateBanner .wrap ul li a { display: flex; align-items: center; justify-content: center; width: fit-content; padding: 0 8px; gap: 0 4px; box-sizing: border-box; text-align: center; line-height: 38px; }
.cateBanner .wrap ul li span { display: block; color: #1f1f1f; font-weight: 400; font-family: 'SUIT', sans-serif; letter-spacing: -1px; text-align: center; }
.cateBanner .wrap ul li span.imgWrap { width: 28px; border: 1px solid #eee; border-radius: 50%; box-sizing: border-box; overflow: hidden; }

/***** 중간 배너 *****/
#contents section.middleBanner { margin-bottom: 80px; padding-left: 0; }
#contents section.middleBanner.bannerSwiper { margin-bottom: 64px; padding-bottom: 0; }
#contents section.middleBanner.bannerSwiper .swiper-container { padding: 0 16px; }
.middleBanner.bannerSwiper .swiper-slide { border-radius: 10px; overflow: hidden; }

/***** 롤링 상품 진열 *****/
#contents .prdSwiper .prdBox { flex-wrap: initial; height: fit-content; gap: 0; }
#contents .prdSwiper .swiper-pagination { display: block; position: relative; top: auto; bottom: 0; }
#contents .prdSwiper .swiper-pagination-progressbar { height: 3px; background-color: #d1d1d1; }
#contents .prdSwiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #ff67b6; }
#contents .product-progress-swiper .prdBox { flex-wrap: initial; height: fit-content; gap: 0; }
#contents .product-progress-swiper .swiper-pagination { display: block; position: relative; top: auto; bottom: 0; margin-top:20px;}
#contents .product-progress-swiper .swiper-pagination-progressbar { height: 3px; background-color: #d1d1d1; }
#contents .product-progress-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #ff67b6; }
#contents .specialPrd .swiper-pagination { display: block; position: relative; top: auto; bottom: 0;}
#contents .specialPrd .swiper-pagination-progressbar { height: 3px; background-color: #d1d1d1; }
#contents .specialPrd .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #ff67b6; }


/* 눈여겨 본 상품 */
#contents .prdSwiper.recentList .list_shoppingInfo { margin-top: 8px; }
#contents .prdSwiper.recentList .list_shoppingInfo .item-icon { display: none; }
/* HOT NEW */
#contents .tabContents .prdBox { counter-reset: number; }
#contents .tabContents .thumb::before { content: counter(number); counter-increment: number; }
/* 기획전 */
#contents .specialPrd .cont { display: grid; gap: 32px 0; }
#contents .specialPrd .swiper-container { width: 100%; padding-right: 0; }
#contents .specialPrd li.swiper-slide { width: 174px; }
#contents .specialPrd li.swiper-slide.banner { width: 260px; }
#contents .specialPrd li.swiper-slide:last-of-type { margin-right: 16px !important; }
#contents .specialPrd .pagingWrap { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; gap: 0 24px; }
#contents .specialPrd .pagingWrap .moreBtn { width: 80px; margin-top: 0; padding: 0; flex-shrink:0; padding-right: 10px; border-radius: 10px; font-size: 12px; background: url('https://styleonme0.img15.kr/snap/icon/icon_right.svg') no-repeat center right; background-position-x: 58px; }
#contents .specialPrd .pagingWrap .swiper-pagination-progressbar { width: 100%; }
#container .specialPrd  .prdBox > li p.icon{display:none;}
/* BEST OF PANTS(TIMESALE) */
#contents .prdSwiper.timeSale { margin-bottom: 96px; padding-top: 32px; padding-bottom: 32px; background-color: #f4f4f4; }
#contents .prdSwiper.timeSale .contentWrap { padding-right: 0; }
#contents .prdSwiper.timeSale .list_shoppingInfo { gap: 10px 0; }
/* ACC */
#contents .product-progress-swiper .prdBox { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(1, 1fr); grid-auto-flow: column; }
#contents .product-progress-swiper .swiper-slide figure { gap: 0 8px; }
#contents .product-progress-swiper .swiper-slide .thumb { width: 87.5px; height: fit-content; }
#contents .product-progress-swiper .swiper-slide .infoWrap { width: calc(100% - 95.5px); }
#contents .product-progress-swiper .swiper-slide .infoWrap .list_shoppingInfo { margin-top: 0; padding-right: 4px; gap: 4.5px 0; box-sizing: border-box; }
#contents .product-progress-swiper .swiper-slide .infoWrap .num { width: 24px; height: 24px; border-radius: 10px; background-color: #1f1f1f; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -1px; text-align: center; line-height: 24px; }
#contents .product-progress-swiper .swiper-slide .infoWrap .icon { display: none; }
#contents .product-progress-swiper .swiper-pagination { width: calc(100% - 16px); margin-top: 24px; } 

/***** 탭 상품 진열 *****/
#contents .prdTab .titleWrap { margin-bottom: 0; }
#contents .prdTab .item-cont { margin-top: 0; }
#contents .tabBtn { margin: 10px auto 24px; }
#contents .tabBtn li { width: fit-content; }
#contents .tabBtn li a { display: block; width: fit-content; min-width: 48px; height: 28px; padding: 0 8px; border: 1px solid #B7B7B7; border-radius: 76px; box-sizing: border-box; transition: all 0.4s ease-out; background-color: #fff; color: #7a7a7a; font-size: 12px; font-weight: 500; letter-spacing: -0.75px; text-align: center; line-height: 26px; }
#contents .tabBtn li.active a { border: 1px solid #FF67B6; color: #FF67B6; }
/* best of best */
#contents .best_type .prdBox > li:nth-child(9n) { width: 100%; }
/* BASIC css end */