/* BASIC css start */ /* section */ .section{margin-bottom: 60px;} .sec_inner{padding:0 5%} .section h2{color: #565656;font-family: 'Nanum Myeongjo', serif; font-size: 22px; text-align: center; font-weight: 600;margin-bottom: 20px; line-height:1.3} .section p.sub{color: #99978e;font-family: 'Nanum Myeongjo', serif; font-size: 12px; font-weight: 600;text-align: center;} .item_more{position:relative; display:flex; align-items:center; justify-content:center; margin-top:30px} .item_more a{display:inline-block; background-color:#fff; font-size:12px;letter-spacing:2px; font-weight:500; color:#c6baac;font-family: 'Noto Serif KR', serif; padding:10px 20px; } .item_more::after{content: ""; display: block;z-index:-1; width: 270px; height: 1px; background-color: #eee; position: absolute ; top: 50%; left: 50%; transform: translate(-50%,-50%);} /* --- [기본 레이아웃 유지] --- */ #sec1 { margin-bottom: 0; } #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%; } /* --- [화살표 버튼 스타일 수정] --- */ /* 1. 버튼 컨테이너 초기화 및 클릭 영역 설정 */ #sec1 :is(.swiper-button-next, .swiper-button-prev) { color: transparent; /* 기존 텍스트 숨김 */ font-size: 0; /* 기존 텍스트 숨김 */ background: none; /* 배경 제거 */ width: 80px; /* 너비 확대 */ height: 120px; /* 높이 확대 */ margin-top: -60px; /* 수직 중앙 정렬 보정 (높이의 절반) */ opacity: 0.6; /* 평소엔 약간 투명하게 */ transition: all 0.3s; } /* 마우스 올렸을 때 진하게 */ #sec1 :is(.swiper-button-next, .swiper-button-prev):hover { opacity: 1; transform: scale(1.1); /* 살짝 커지는 효과 (선택사항) */ } /* 위치 조정 */ #sec1 .swiper-button-next { right: 2%; } #sec1 .swiper-button-prev { left: 2%; } /* 2. 기존 스타일(대시 'ㅡ' 모양) 제거 */ #sec1 .swiper .swiper-button-prev::before, #sec1 .swiper .swiper-button-next::after, #sec1 .swiper .swiper-button-prev::after { content: none !important; display: none !important; } /* 3. 새롭고 얇은 꺽쇠 화살표 생성 */ #sec1 :is(.swiper-button-next, .swiper-button-prev)::after { font-family: sans-serif; /* 깔끔한 고딕 계열 폰트 */ font-weight: 100; /* ★핵심: 가장 얇은 두께 설정 */ font-size: 100px; /* ★핵심: 아주 큰 사이즈 설정 */ color: #fff; /* 흰색 */ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1; /* 라인 높이 초기화 */ } /* 왼쪽 화살표 문자 지정 */ #sec1 .swiper-button-prev::after { content: "〈"; /* 또는 "<" */ } /* 오른쪽 화살표 문자 지정 */ #sec1 .swiper-button-next::after { content: "〉"; /* 또는 ">" */ } /* --- [페이지네이션 (기존 유지)] --- */ #sec1 .swiper-pagination { color: #95745f; font-family: 'Overpass', sans-serif; font-size: 14px; font-weight: 800; } #sec1 .swiper .swiper-pagination-bullet {} #sec1 .swiper .swiper-pagination-bullet-active { background-color: #95745f; width: 15px; border-radius: 10px; } #sec1 .pagination_container { display: flex; align-items: center; justify-content: center; gap: 10px; position: absolute; bottom: 30px; z-index: 10; left: 50%; transform: translateX(-50%); } #sec1 .swiper-horizontal>.swiper-pagination-bullets, #sec1 .swiper-pagination-bullets.swiper-pagination-horizontal, #sec1 .swiper-pagination-custom, #sec1 .swiper-pagination-fraction { width: auto; position: unset; display: flex; } /* 1. 블랙 오버레이 (이미지 위를 덮음) */ .swiper-slide a::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); /* 검은색 투명도 40% (조절 가능) */ z-index: 1; /* 이미지보다 위에 */ transition: background 0.3s; } /* 마우스 오버 시 오버레이를 조금 더 진하게 (선택사항) */ .swiper-slide:hover a::after { background: rgba(0, 0, 0, 0.6); } /* 2. 중앙 텍스트 컨테이너 */ .dm_slide_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; /* 오버레이보다 위에 */ text-align: center; width: 100%; padding: 0 20px; box-sizing: border-box; } /* 텍스트 스타일 (나눔명조) */ .dm_slide_text h2 { font-family: 'Nanum Myeongjo', serif; color: #e9dc73; font-size:22px; /* 첫 번째 줄 폰트 크기 */ font-weight: 700; margin: 0 0 15px 0; letter-spacing: 2px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* 가독성을 위한 그림자 */ } .dm_slide_text p { font-family: 'Nanum Myeongjo', serif; color: #fff; font-size: 15px; /* 두 번째 줄 폰트 크기 */ font-weight: 400; margin: 0; opacity: 0.9; letter-spacing: 1px; } /* 반응형 (모바일) */ @media (max-width: 768px) { .dm_slide_text h2 { font-size: 20px; } .dm_slide_text p { font-size: 12px; } } /* sec2 */ #sec2{} #sec2 .sec_inner{padding:0} #sec2 .sec_inner h2{margin-bottom:15px} #sec2 .sec_inner p.sub{} #sec2 .sec_inner .sec2_cont{margin-top: 25px; padding-left:5%} #sec2 .sec_inner .sec2_cont ul{} #sec2 .sec_inner .sec2_cont ul li{width:63%} #sec2 .sec_inner .sec2_cont ul li .promo_img{width:100%} #sec2 .sec_inner .sec2_cont ul li .promo_img a{display: block; } #sec2 .sec_inner .sec2_cont ul li .promo_img a>img{display: block;width:100%} #sec2 .sec_inner .sec2_cont ul li .txt_wrap{padding: 20px 0;} #sec2 .sec_inner .sec2_cont ul li .txt_wrap p{text-align: center;} #sec2 .sec_inner .sec2_cont ul li .txt_wrap p.big{color: #5e5043;font-family: 'Nanum Myeongjo', serif; font-size: 17px; font-weight: 800; margin-bottom:13px; } #sec2 .sec_inner .sec2_cont ul li .txt_wrap p.small{color: #565656;font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 500;line-height: 1.4} /* sec3 */ #sec3{} #sec3 .sec_inner{padding:0} #sec3 .sec_inner h2{} #sec3 .sec_inner .sec3_cont{} #sec3 .sec_inner .sec3_cont ul{display: flex; flex-wrap:wrap; gap:4px 1%; } #sec3 .sec_inner .sec3_cont ul li{} #sec3 .sec_inner .sec3_cont ul li:nth-child(1){width:49.5%} #sec3 .sec_inner .sec3_cont ul li:nth-child(2){width:49.5%} #sec3 .sec_inner .sec3_cont ul li:nth-child(3){width:100% } #sec3 .sec_inner .sec3_cont ul li:nth-child(4){width:49.5%} #sec3 .sec_inner .sec3_cont ul li:nth-child(5){width:49.5%} #sec3 .sec_inner .sec3_cont ul li a{display: block;position: relative; width: 100%;height: 100%; overflow: hidden;} #sec3 .sec_inner .sec3_cont ul li a img{width: 100%;height: 100%; object-fit: cover; transition: all .3s;} /* sec5 */ #sec5 .swiper-button-next{right:5% ; width:auto; height:auto} #sec5{position:relative;} #sec5 .swiper{} #sec5 .swiper>ul.swiper-wrapper{} #sec5 .swiper>ul.swiper-wrapper>li.swiper-slide{background-color:#fff; } #sec5 li.swiper-slide .sec5_cont{} #sec5 li.swiper-slide .sec5_cont .sec5_ban{} #sec5 li.swiper-slide .sec5_cont .sec5_ban a{display: block; width: 100%; border-radius: 0 65px 0 0; overflow: hidden;} #sec5 li.swiper-slide .sec5_cont .sec5_ban a img{width: 100%;} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap{display: flex; flex-direction: column; padding:0 5%} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap .sec5_contTop{display: flex; flex-direction: column; gap: 20px;margin-top:20px ;border-bottom: 1px solid #f6f3f1; padding-bottom: 20px;} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap .sec5_contTop h3{font-family: 'Noto Serif KR', serif; color: #7d6253; font-size: 25px; font-weight: 500;line-height: 1.3;} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap .sec5_contTop p.sec5sub{font-family: 'Pretendard', sans-serif;line-height: 1.4; color: #b2a18d; font-size: 13px; font-weight: 500;} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap ul{display:flex; flex-direction:column; align-items:center; gap:25px 0} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap ul li{display:flex; gap:20px} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap ul li .thumb{width:20%; height:100%} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap ul li .thumb a{height:100%; } #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap ul li .thumb a img{height:100%; object-fit:cover; } #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap ul li .info{flex-grow:1; padding:0; display:flex; flex-direction:column;justify-content:space-between;} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap ul li .info .prdname{font-size:16px} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap ul li .info .prdetc{font-size:14px} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap ul li.item_list .info .prdprice{border:none; margin:0} #sec5 li.swiper-slide .sec5_cont .sec5_itemWrap ul li.item_list .info .prdprice .percent{} #sec5 p.line{width:90%; margin:0 auto 25px; height:1px; background-color:#f6f3f1} #sec5 .swiper_btn_wrap{cursor:pointer; border: 1px solid #e9e9e9; display: flex; align-items: center; gap: 5px; padding: 8px 30px; border-radius: 25px; justify-content: center; width: max-content; margin: 0 auto;} #sec5 .swiper_btn_wrap .swiper_btn_next{display: flex; align-items: center; justify-content: center; gap: 5px;} #sec5 .swiper_btn_wrap .swiper_btn_next span{display: flex; align-items: center ; justify-content: center;} #sec5 .swiper_btn_wrap .swiper_btn_next span img{transform: scale(.66); transform-origin:center center;} #sec5 .swiper_btn_wrap .swiper_btn_next p{font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 500; color: #161616; } #sec5 .swiper_btn_wrap .swiper-pagination{position:unset; width:auto; margin-top:1px} /* sec6 */ #sec6{} #sec6 h2{} #sec6 .sec6_cate{ margin-bottom:15px;} #sec6 .sec6_cate ul{ } #sec6 .sec6_cate ul li{display: inline-block; width:auto !important; margin:0 5px} #sec6 .sec6_cate ul li.on{ } #sec6 .sec6_cate ul li a{display:block; padding:8px; width:100%; text-align:center; font-family: 'Pretendard', sans-serif; color:#979797; font-size: 16px; font-weight:500; letter-spacing: -.3px;transition: all .3s; position:relative; display:block;} #sec6 .sec6_cate ul li.on>a{ color:#95745f !important;} #sec6 .sec6_cate ul li a::after{display:block; content:""; position:absolute; top:12px ;opacity:0; transition:all .3s; left:50%; transform:translateX(-50%) ; width:5px ; height:5px; border-radius:50%; background-color:#95745f; } #sec6 .sec6_cate ul li.on a::after{opacity:1; top:0px} #sec6 .sec6_prd{} #sec6 .sec6_prd>div .swiper{padding-bottom:100px} #sec6 .sec6_prd>div{display: none;} #sec6 .sec6_prd>div ul{} #sec6 .sec6_prd>div.show{display: block;} #sec7{} #sec7 .sec7_cont{} #sec7 .sec7_cont>div{} #sec7 .sec7_cont .sec7_left{display: flex;background-color: #f3f2ee; flex-direction:column; padding:45px 5% 35px; } #sec7 .sec7_cont .sec7_left .text_wrap{} #sec7 .sec7_cont .sec7_left .text_wrap p{} #sec7 .sec7_cont .sec7_left .text_wrap p.sec7_main{margin-bottom: 14px; color: #565656; font-size: 26px; font-weight: 500; font-family: 'Nanum Myeongjo', serif;} #sec7 .sec7_cont .sec7_left .text_wrap p.sec7_sub{margin-bottom: 25px; color: #757575; font-size: 15px; font-weight: 600; font-family: 'Nanum Myeongjo', serif;} #sec7 .sec7_cont .sec7_left .text_wrap p.sec7_cont{margin-bottom: 30px; font-family: 'Pretendard', sans-serif;font-weight: 500;line-height: 1.6; color: #565656; font-size: 12px;} #sec7 .sec7_cont .sec7_left .text_wrap a.moreview{background-color: #dfd7ce;transition: all .3s; font-family: 'Nanum Myeongjo', serif;color: #998d80; font-size: 10px; font-weight: 600; letter-spacing: 1px; display: inline-block; padding: 8px 25px; border-radius:7px;} #sec7 .sec7_cont .sec7_right{} #sec7 .sec7_cont .sec7_right a{display: block; width: 100%;} #sec7 .sec7_cont .sec7_right a img{width: 100%;} /* sec8 */ #sec8{} #sec8 .sec_inner{padding:0;} #sec8 h2{margin-bottom:5px} #sec8 .sec8_review{position:relative;} #sec8 .sec8_review>div.swiper{width: 100%; padding-left:5%} #sec8 .sec8_review>div.swiper>ul{width: 100%; } #sec8 .sec8_review>div.swiper>ul>li{width:63%;display:flex;overflow:hidden; flex-direction:column; height:auto; border:1px solid #f6f3f1;border-radius:9px;box-shadow: 0 0 15px #e3dad459; margin-bottom:20px;margin-top:20px } #sec8 .li_review .rv_main{ width: 100%; } #sec8 .li_review .rv_main .thumb{width:100%;overflow:hidden;} #sec8 .li_review .rv_main .thumb a{display: block; width: 100%;} #sec8 .li_review .rv_main .thumb a img{width: 100%; object-fit: cover;} #sec8 .li_review .rv_main .rv_main_cont{margin:15px 15px 0 15px; border-bottom:1px solid #f6f3f1; padding-bottom:10px;} #sec8 .li_review .rv_main .rv_main_cont .rv_cont{font-size: 13px; font-family: 'Noto Sans KR', sans-serif; text-overflow: ellipsis; overflow: hidden; font-weight:500; color:#000; line-height:1.4; margin-bottom:15px} #sec8 .li_review .rv_main .rv_main_cont .rv_info{display:flex; align-items:center; justify-content:space-between;} #sec8 .li_review .rv_main .rv_main_cont .rv_info span{color:#727272} #sec8 .li_review .rv_main .rv_main_cont .rv_info span.date{} #sec8 .li_review .rv_main .rv_main_cont .rv_info span.rv_user{} #sec8 .li_review .rv_mini{flex-grow:1; width: 100%; display: flex; align-items: center; justify-content: left; gap:15px;padding:15px } #sec8 .li_review .rv_mini .mini_thumb{width: 50px; height: 50px; border-radius: 50%; display: inline-block; border: 1px solid #f2f2f2; overflow: hidden;} #sec8 .li_review .rv_mini .mini_thumb a{display: block;width: 100%; height: 100%;} #sec8 .li_review .rv_mini .mini_thumb a img{width: 100%; height: 100%; object-fit: cover;} #sec8 .li_review .rv_mini ul { display:flex; flex-direction:column; gap:8px;} #sec8 .li_review .rv_mini ul li {font-family: 'Noto Sans KR', sans-serif;font-size: 13px; color: #000;} #sec8 .li_review .rv_mini ul li:nth-child(2){display:flex; align-items:center ; gap:10px; } #sec8 .li_review .rv_mini ul li span {font-family: 'Pretendard', sans-serif; margin-right:5px;display:flex; align-items:center; color:#95745f; font-size:12.5px; font-weight:500 } #sec8 .li_review .rv_mini ul li span:nth-child(2) img{margin-top:-1px} #sec8 .li_review .rv_mini ul li span img{display:inline-block; margin-right:1px; transform:scale(.7); transform-origin:center center;} #sec9{background-color: #f7f5f4; padding: 35px 0; margin-bottom:0} #sec9 .sec_inner{} #sec9 .sec_inner h2{margin-bottom:10px; } #sec9 .sec_inner p.sec9_sub{font-family: 'Nanum Myeongjo', serif; color: #cec2bb; font-size: 13px; font-weight: 600; text-align: center; margin: 0 0 25px; } #sec9 .sec_inner .insta{} #footer{margin-top:0 !important;} /* BASIC css end */