/* BASIC css start */ footer#footer{margin-top:0} /* 섹션공통 */ section{} section .sec_inner{padding:0 5%} section h2{font-family: 'Jost', sans-serif; font-size: 21px; color: var(--main-font-color); text-align: center; margin-bottom: 50px; font-weight: 600;position:relative} section h2 a{display: inline-block;position: absolute; top: 50%; transform: translateY(-50%); right:5%;} section h2 a img{transform: scale(.66); transform-origin: right center;} /* sec1 */ #sec1{margin-bottom:65px} #sec1 .swiper{} #sec1 .swiper ul{} #sec1 .swiper ul li{} #sec1 .swiper ul li a{display: block;width: 100%;} #sec1 .swiper ul li a img{width: 100%;} #sec1 .swiper-pagination{bottom: 25px;} #sec1 .swiper-pagination-bullet{width: 30px; height: 0px; border-radius: 0; background-color: #fff; } /* sec2 */ /* sec2 상품 LI에 float 설정을 해제하고 flexbox에 맞춤 */ #sec2 .sec2_cont ul li.item_list3 { float: none !important; /* 기본 float 설정을 강제로 해제 */ margin-right: 0 !important; /* 기본 margin-right를 초기화 (flexbox 사용을 위해) */ } /* sec3 */ #sec3{} #sec3 a{display: block;width: 100%;} #sec3 a img{width: 100%;} /* sec4 */ #sec4{background-color:#fff} #sec4 .sec_inner{padding-top:60px} #sec4 .sec_inner h2{margin-bottom:40px !important} #sec4 .sec_inner .rev_sec{position:relative; width:75%; margin:0 auto } #sec4 .sec_inner .rev_sec .swiper{} #sec4 .sec_inner .rev_sec .swiper ul{width: 100%;} #sec4 .sec_inner .rev_sec .swiper ul li{ } #sec4 .sec_inner .rev_sec .swiper ul li .rv_thumb{width: 100%; } #sec4 .sec_inner .rev_sec .swiper ul li .rv_thumb a{display: block; width: 100%; height: 100%; border-radius:85px; overflow:hidden} #sec4 .sec_inner .rev_sec .swiper ul li .rv_thumb a img{width: 100%; object-fit: cover;height:100%} #sec4 .sec_inner .rev_sec .swiper ul li .rv_txt{height: 185px; padding: 24px; background-color:#fff} #sec4 .sec_inner .rev_sec .swiper ul li .rv_txt .prd_name{color: #847871; font-size: 15px;font-family: 'Noto Sans KR', sans-serif; font-weight: 500; padding-bottom: 15px; letter-spacing: -.7px;text-align:center ; border-bottom:1px solid #eceade; margin-bottom:15px} #sec4 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_cont{} #sec4 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_cont p{line-height:1.5;font-size: 13px; color: #bfb9b7; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; letter-spacing: -.7px;text-align:center;} #sec4 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score{margin-top: 14px;text-align:center} #sec4 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score>span{} #sec4 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .heart{} #sec4 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .heart img{display: inline-block; transform:scale(.66); transform-origin:top center} #sec4 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .score{color: #847871; font-size: 15px; font-family: 'Jost', sans-serif; font-weight: 600;} #sec4 .swiper_btn_prev{ position:absolute; left:-13% ; top:30%; transform:translateY(-50%); z-index:4; cursor:pointer} #sec4 .swiper_btn_prev img{transform:scale(.66); transform-origin:left center} #sec4 .swiper_btn_next{position:absolute; right:-13%; top:30%; transform:translateY(-50%);z-index:4; cursor:pointer} #sec4 .swiper_btn_next img{transform:scale(.66); transform-origin:right center} /* sec5 */ #sec5{display: flex;margin-bottom:65px} #sec5>div{width: 50%;} #sec5>div a{display: block; width: 100%;} #sec5>div a img{width: 100%;} /* sec6 */ #sec6{margin: 60px 0;} #sec6 .sec_inner{padding: 0 5%} #sec6 .sec6_cate{} #sec6 .sec6_cate ul{ width:95%; margin:0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px;} #sec6 .sec6_cate ul li{display: inline-block; } #sec6 .sec6_cate ul li a{padding: 6px 0px; font-family: 'Noto Sans KR', sans-serif;font-size: 11.5px;transition:all .3s;color:#d3d1c9; font-weight:400} #sec6 .sec6_cate ul li.on>a{border-bottom:1px solid #847871;color: #847871; } #sec6 .sec6_prd{width: 100%; margin-top: 40px;} #sec6 .sec6_prd ul{width: 100%;display: flex; flex-wrap: wrap;} #sec6 .sec6_prd{} #sec6 .sec6_prd .sec_inner>div{display: none;position:relative} #sec6 .sec6_prd .sec_inner>div.show{display: block;} #sec7{background-color:#20201f; padding:30px 0 0} #sec7 h2{margin-bottom:20px} /* ======================================================= */ /* ✅ sec2 모바일 85% 너비, 가운데 정렬, 1개씩 배치 (강제 적용) */ /* ======================================================= */ /* 1. 컨테이너 너비를 85%로 고정하고 가운데 정렬 */ /* 상품 리스트 전체를 감싸는 .sec2_cont에 적용됩니다. */ #sec2 .sec2_cont { width: 85% !important; /* 85% 너비 고정 */ margin: 0 auto !important; /* 가운데 정렬 고정 */ padding: 0 !important; } /* 2. 상품 목록 (UL)의 기본 설정을 해제하여 세로 나열 준비 */ #sec2 .sec2_cont ul { /* 기존 flexbox나 기타 설정 제거 및 block으로 강제하여 세로 나열 */ display: block !important; margin: 0 !important; padding: 0 !important; } /* 3. 개별 상품(LI) 너비를 100%로 고정하고 float 해제 */ /* 상품 1개가 전체 85% 너비의 100%를 차지하게 됩니다. */ #sec2 .sec2_cont ul li.item_list3 { width: 100% !important; /* 한 줄에 1개씩 배치 (100% 너비) */ float: none !important; /* CCS.txt의 float:left 강제 해제 */ clear: both !important; /* float 해제 후 혹시 모를 문제 방지 */ margin-right: 0 !important; /* 기존 오른쪽 마진 제거 */ margin-bottom: 25px !important; /* 상품 간 하단 여백 추가 */ } /* 상품 썸네일(이미지)이 LI의 100% 너비를 따라가도록 보장 */ #sec2 .sec2_cont ul li.item_list3 .thumb { width: 100% !important; } /* BASIC css end */