/* BASIC css start */
/* =========================================================
   메인 CSS (v26 : v25 + sec3_top 문구를 배너 아래로 이동)
   ========================================================= */

/* ---------- 공통 ---------- */
#contentWrap{width:1300px; margin:0 auto}
.sec_inner{width:auto; max-width:1300px; margin:0 auto; padding:0 40px; box-sizing:border-box;}
.section{margin-bottom:100px}
.section h2{text-align:center; font-size:30px; color:#000; font-weight:700; letter-spacing:-0.8px; margin-bottom:40px;}
.swiper-button-disabled{opacity:.3}
.swiper .swiper-pagination-bullet-active{background-color:#000;}

/* 상품 사진 확대 + 관심상품/장바구니 버튼 (마우스 올리면 표시) */
.item_list .thumb{overflow:hidden; position:relative}
.item_list .thumb img{transition:transform .4s}
.item_list .thumb:hover img{transform:scale(1.06)}
.item_list .thumb .prd-wish{opacity:0; transition:opacity .3s}
.item_list .thumb:hover .prd-wish{opacity:1}
.item_list .thumb .prd-wish a{display:flex; align-items:center; justify-content:center}
.item_list .thumb .prd-wish .fa{font-size:15px; color:#333}

/* 상품명 크기 */
#sec2 .info .prdname,
#sec4 .info .prdname,
#sec6 .info .prdname{font-size:14px; line-height:1.5;}

/* ---------- sec1 메인 배너 (풀와이드) ---------- */
#sec1{overflow:hidden; margin-top:40px; width:100vw; margin-left:calc(50% - 50vw);}
#sec1 .sec1_cont .swiper{padding-bottom:40px;}
#sec1 .sec1_cont .swiper ul{margin-left:calc((100% / 3) / 2);}
#sec1 .sec1_cont .swiper ul li{width:calc(100% / 3); padding:0 25px;}
#sec1 .sec1_cont .swiper ul li .ban_img a{display:block; width:100%; border-radius:25px; overflow:hidden;}
#sec1 .sec1_cont .swiper ul li .ban_img a img{width:100%;}
#sec1 .sec1_cont .swiper ul li .ban_txt{width:100%; padding:22px 0 10px;}
#sec1 .sec1_cont .swiper ul li .ban_txt p{text-align:center;}
#sec1 .sec1_cont .swiper ul li .ban_txt p.big{font-size:24px; color:#000; font-weight:600; letter-spacing:-0.5px; margin-bottom:8px;}
#sec1 .sec1_cont .swiper ul li .ban_txt p.small{color:#999; font-size:15px; font-weight:400;}
#sec1 .swiper .swiper-pagination{bottom:0;}

/* ---------- sec2 신상품 (1행 5개) ---------- */
#sec2 .sec2_cont > ul{display:grid !important; grid-template-columns:repeat(5, minmax(0, 1fr)) !important; gap:50px 25px !important; float:none !important;}
#sec2 .sec2_cont > ul > li.item_list,
#sec2 .sec2_cont > ul > li.w25p{width:auto !important; float:none !important; margin:0 !important; padding:0 !important;}
#sec2 .sec2_cont > ul.clear_fix::before,
#sec2 .sec2_cont > ul.clear_fix::after{display:none !important;}

/* ---------- sec3 배너 2단 ---------- */
#sec3 .sec_inner ul{display:flex; gap:30px;}
#sec3 .sec_inner ul li{flex-grow:1; width:50%;}
#sec3 .sec_inner ul li a{display:block; width:100%; border-radius:12px; overflow:hidden;}
#sec3 .sec_inner ul li a:hover>img{transform:scale(1.05);}
#sec3 .sec_inner ul li a img{width:100%; transition:transform .4s;}

/* ---------- sec4 추천상품 ---------- */
#sec4 .swiper{padding-bottom:80px}
#sec4 .swiper ul li.item_list{border:1px solid #eee; border-radius:10px; overflow:hidden}
#sec4 .swiper ul li .thumb>a{border-radius:0;}
#sec4 .swiper ul li .info{padding:20px}
#sec4 .swiper .swiper-pagination-progressbar{bottom:0; top:unset; height:2px; background-color:rgba(0,0,0,.09);}
#sec4 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color:#dc3737;}

/* ---------- sec5 트렌드 랭킹 (좌 배너 / 우 상품 3개 균형) ---------- */
#sec5 .sec_inner .sec5_cont{display:flex; gap:30px; align-items:stretch;}
#sec5 .sec_inner .sec5_cont>div{width:50%;}
#sec5 .sec_inner .sec5_cont .banner_img a{display:block; border-radius:12px; overflow:hidden; width:100%;}
#sec5 .sec_inner .sec5_cont .banner_img a img{width:100%; display:block;}
#sec5 .sec_inner .sec5_cont .item_cont ul{height:100%; display:flex; flex-direction:column; gap:20px;}
#sec5 .sec_inner .sec5_cont .item_cont ul li{display:flex; align-items:center; flex:1 1 0; min-height:0; height:auto; border-bottom:1px solid #eee; padding-bottom:20px;}
#sec5 .sec_inner .sec5_cont .item_cont ul li:last-child{border-bottom:none; padding-bottom:0;}
#sec5 .sec_inner .sec5_cont .item_cont ul li .thumb{height:100%; max-height:300px; aspect-ratio:1/1; width:auto; flex-shrink:0; border-radius:10px;}
#sec5 .sec_inner .sec5_cont .item_cont ul li .thumb a{display:block; width:100%; height:100%;}
#sec5 .sec_inner .sec5_cont .item_cont ul li .thumb a img{width:100%; height:100%; object-fit:cover;}
#sec5 .sec_inner .sec5_cont .item_cont ul li .info{padding-left:35px; display:flex; flex-direction:column; justify-content:center; flex-grow:1; max-width:none;}
#sec5 .sec_inner .sec5_cont .item_cont ul li .info .prdname{font-size:17px; line-height:1.5;}
#sec5 .sec_inner .sec5_cont .item_cont ul li .info .prdprice{border-top:none; margin-top:0}
#sec5 .sec_inner .sec5_cont .item_cont ul li .info .prdprice .percent{display:inline}

/* ---------- sec6 베스트 랭킹 ---------- */
#sec6 .sec_inner .sec6_cate{margin-bottom:45px;}
#sec6 .sec_inner .sec6_cate ul{display:flex; gap:25px; justify-content:center;}
#sec6 .sec_inner .sec6_cate ul li a{display:block; width:100%; text-align:center; color:#9a9a9a; font-size:16px; font-weight:500; letter-spacing:-.3px; transition:color .1s, border-color .3s; border-bottom:2px solid transparent; padding-bottom:10px}
#sec6 .sec_inner .sec6_cate ul li.on>a{color:#dc3737; border-color:#dc3737}
#sec6 .sec_inner .sec6_cate ul li a:hover{color:#dc3737;}
#sec6 .sec6_prd>div{display:none;}
#sec6 .sec6_prd>div.show{display:block;}
#sec6 .sec6_prd>div .swiper{padding-bottom:80px}
#sec6 .swiper .swiper-pagination-progressbar{bottom:0; top:unset; height:3px; background-color:rgba(0,0,0,.09);}
#sec6 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color:#333;}
#sec6 .sec6_prd .swiper .swiper-slide{margin-top:0 !important;}

/* ---------- sec7 와이드 배너 ---------- */
#sec7 a{display:block; width:100%;}
#sec7 a img{width:100%; display:block;}

/* ---------- sec8 특별한 추천 (3칸 균등) ---------- */
#sec8 .sec_inner .sec8_cont{display:flex; gap:40px;}
#sec8 .sec_inner .sec8_cont>div{flex:1 1 0; min-width:0; width:auto;}
#sec8 .sec_inner .sec8_cont>div>ul{width:100%; display:flex; flex-direction:column; gap:20px;}
#sec8 .sec_inner .sec8_cont>div>ul>li{display:flex; width:100%;}
#sec8 .sec_inner .sec8_cont>div>ul>li:first-child .thumb{width:100%; height:auto; aspect-ratio:1/1; border-radius:12px;}
#sec8 .sec_inner .sec8_cont>div>ul>li:first-child .info{display:none;}
#sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child){height:130px; align-items:center;}
#sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child) .thumb{width:130px; height:130px; flex-shrink:0; border-radius:8px;}
#sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child) .info{flex-grow:1; min-width:0; padding-left:20px; display:flex; flex-direction:column; justify-content:center;}
#sec8 .sec_inner .sec8_cont>div>ul>li .thumb a{display:block; width:100%; height:100%;}
#sec8 .sec_inner .sec8_cont>div>ul>li .thumb a img{width:100%; height:100%; object-fit:cover;}
#sec8 .sec_inner .sec8_cont>div>ul>li.item_list .info .prdprice{border-top:none; margin-top:0}
#sec8 .sec_inner .sec8_cont>div>ul>li.item_list .info .prdprice .percent{display:inline}

/* ---------- sec9 베스트 리뷰 ---------- */
#sec9{padding:60px 0 50px}
#sec9 .sec_inner{position:relative;}
#sec9 .sec9_review>div{width:100%;}
#sec9 .sec9_review>div>ul{width:100%;}
#sec9 .sec9_review>div>ul>li{flex-grow:1}
#sec9 .li_review .rv_main{width:100%; border-bottom:1px solid #e4e4e4;}
#sec9 .li_review .rv_main .thumb{width:100%;}
#sec9 .li_review .rv_main .thumb a{display:block; width:100%; height:100%;}
#sec9 .li_review .rv_main .thumb a img{width:100%; height:100%; object-fit:cover;}
#sec9 .li_review .rv_main .rv_main_cont{width:100%; padding:20px 0; max-width:280px}
#sec9 .li_review .rv_main .rv_main_cont .rv_info{margin-bottom:7px; color:#000; font-size:15px; font-weight:500;}
#sec9 .li_review .rv_main .rv_main_cont .rv_cont{font-size:14px; text-overflow:ellipsis; overflow:hidden; font-weight:400; color:#999; line-height:1.7;}
#sec9 .li_review .rv_mini{width:100%; display:flex; align-items:center; justify-content:left; gap:15px; margin-top:20px}
#sec9 .li_review .rv_mini ul{display:flex; flex-direction:column; gap:8px;}
#sec9 .li_review .rv_mini ul li{display:flex; align-items:center; font-size:13px; color:#000;}
#sec9 .li_review .rv_mini ul li span{display:flex; align-items:center; color:#000; font-size:16px; font-weight:500;}
#sec9 .li_review .rv_mini ul li span img{display:inline-block; margin-right:8px;}
#sec9 .swiper_btn_prev,#sec9 .swiper_btn_next{position:absolute; z-index:2; cursor:pointer; top:50%; transform:translateY(-50%);}
#sec9 .swiper_btn_prev{left:-10px}
#sec9 .swiper_btn_next{right:-10px}

/* ---------- v23 메인이미지 아이콘(뱃지) ----------
   메이크샵에서 설정한 노출 위치(상단/하단·왼쪽/오른쪽)를 그대로 따르고,
   썸네일 가장자리에서 10px 안쪽에 표시. 크기는 높이 기준(가로는 비율 유지)
   JS 실행 전·아이콘 없는 상품은 숨김 상태라 레이아웃에 영향 없음 */
#contentWrapper .item_list .thumb .fd-badge{display:none}
#contentWrapper .item_list .thumb .fd-badge.is-on{display:block; position:absolute; top:10px; left:10px; right:10px; bottom:10px; z-index:3; pointer-events:none; line-height:0}
#contentWrapper .item_list .thumb .fd-badge > span{display:block; line-height:0}
#contentWrapper .item_list .thumb .fd-badge img.fd-icon{display:block; position:static !important; width:auto !important; height:30px !important; max-width:none !important; object-fit:contain !important; transform:none !important; transition:none !important}
/* sec8 작은 썸네일(130px)은 여백·뱃지 작게 */
#contentWrapper #sec8 .sec8_cont>div>ul>li:not(:first-child) .thumb .fd-badge.is-on{top:6px; left:6px; right:6px; bottom:6px}
#contentWrapper #sec8 .sec8_cont>div>ul>li:not(:first-child) .thumb .fd-badge img.fd-icon{height:20px !important}

/* ---------- v24 sec3_top 신상품 위 배너 ----------
   sec3와 같은 톤(간격 30px · 모서리 12px · 마우스 올리면 확대)
   1개: 가운데 1칸 / 2개: 2칸 고정 / 3개 이상: 슬라이드 + 점 표시 */
#sec3_top .s3t-wrap{position:relative;}
#sec3_top .s3t-view{overflow:hidden;}
#sec3_top .s3t-track{display:flex; gap:30px; margin:0; padding:0; list-style:none; transition:transform .6s cubic-bezier(.25,.8,.25,1);}
#sec3_top .s3t-track li{flex:0 0 calc((100% - 30px) / 2); min-width:0; float:none; width:auto; margin:0;}
#sec3_top.s3t-count1 .s3t-track{justify-content:center;}
#sec3_top .s3t-track li a{display:block; width:100%; border:1px solid #eee; border-radius:12px; overflow:hidden; box-sizing:border-box;}
#sec3_top .s3t-track li a img{display:block; width:100%; height:auto; transition:transform .4s;}
#sec3_top .s3t-track li a:hover>img{transform:scale(1.05);}

/* 화살표: 배너 바깥 양옆, 마우스 올릴 때만 표시 (sec6 버튼과 같은 모양) */
#sec3_top .s3t-btn{display:none; position:absolute; top:50%; z-index:2; width:40px; height:40px; margin-top:-20px; border:1px solid #ddd; border-radius:50%; background:#fff; color:#111; font-size:18px; line-height:38px; text-align:center; cursor:pointer; opacity:0; transition:opacity .3s;}
#sec3_top .s3t-prev{left:-20px;}
#sec3_top .s3t-next{right:-20px;}
#sec3_top.is-slide .s3t-btn{display:block;}
#sec3_top.is-slide .s3t-wrap:hover .s3t-btn{opacity:1;}

/* 점 표시 (sec1과 같은 톤) */
#sec3_top .s3t-dots{display:none; justify-content:center; gap:8px; margin-top:20px;}
#sec3_top.is-slide .s3t-dots{display:flex;}
#sec3_top .s3t-dots span{width:8px; height:8px; border-radius:50%; background:#000; opacity:.2; cursor:pointer; transition:opacity .3s;}
#sec3_top .s3t-dots span.on{opacity:1;}

/* ---------- v25 sec3 배너 위 문구 (sec1 문구와 같은 톤) ---------- */
#sec3 .s3-txt{text-align:center; padding-bottom:18px;}
#sec3 .s3-txt p.big{font-size:24px; color:#000; font-weight:600; letter-spacing:-0.5px; margin-bottom:8px;}
#sec3 .s3-txt p.small{font-size:15px; color:#999; font-weight:400;}

/* ---------- v26 sec3_top 배너 아래 문구 (sec1과 같은 배치) ----------
   HTML은 문구가 위에 있어도, 화면에서는 배너 아래로 표시
   슬라이드 중 글이 덜 튀도록 크기를 한 단계 작게 */
#sec3_top .s3t-track li{display:flex; flex-direction:column-reverse;}
#sec3_top .s3-txt{text-align:center; padding:16px 0 0;}
#sec3_top .s3-txt p.big{font-size:18px; color:#000; font-weight:600; letter-spacing:-0.4px; margin-bottom:6px;}
#sec3_top .s3-txt p.small{font-size:14px; color:#999; font-weight:400;}


/* BASIC css end */