/* BASIC css start */ /* 섹션 공통 */ section{margin-bottom: 70px;} .sec_inner{margin:0 auto} section h2{text-align: center;font-family: 'Lora', serif; color: #454545; font-size: 22px; font-weight: 500; margin-bottom: 15px;} section p.tit{ text-align: center;font-family: 'Noto Sans KR', sans-serif; font-size: 13px; color: #aaa; margin-bottom: 30px; font-weight: 400;} /* sec1 */ #sec1{position: relative; margin-bottom:0px !important;} #sec1 .swiper{} #sec1 .swiper ul{width: 100%;} #sec1 .swiper ul li{width: 100%;} #sec1 .swiper ul li a{display: block; width: 100%; position: relative;} #sec1 .swiper ul li a img{width: 100%; } #sec1 .swiper ul li a ul.text_cont{position: absolute; top:55%; left: 0%;transition: left .5s, opacity .6s; transform:translate(0%,0%)} #sec1 .swiper ul li a ul.text_cont.white>*{color:#fff;} #sec1 .swiper ul li a ul.text_cont li{position: relative; opacity: 0;font-family: 'Noto Sans KR', sans-serif; color: #000; line-height: 1.1; text-align: ; top:50px;} #sec1 .swiper ul li a ul.text_cont li:nth-child(1){ font-size: 34px; font-weight: 400; transition: opacity 1s, top .5s; font-family: 'Butler', serif; text-align:center; } #sec1 .swiper ul li a ul.text_cont li:nth-child(2){ font-size: 14px; font-weight: 300; margin-top: 20px; transition: opacity 1.5s, top .8s; font-family: 'Pretendard', sans-serif; text-align:center;} #sec1 .swiper ul li a ul.text_cont li:nth-child(3){ font-size: 14px; font-weight: 300; margin-top: 5px; margin-bottom: 30px; transition: opacity 2s, top 1s; line-height:1.6 ; font-family: 'Pretendard', sans-serif; text-align:center;} #sec1 .swiper ul li a ul.text_cont li:nth-child(4){ font-size: 13px; transition: opacity 2s, top 1.2s; line-height:1.6; font-family: 'Butler', serif; width: 25%; border: solid 1px; line-height: 28px; padding-top: 2px; text-align:center; margin:0 auto; } #sec1 .swiper ul li a ul.text_cont.show li{opacity:1; top:0} #sec1 .swiper_btn_prev{ position:absolute; left:5% !important; top:50%; transform:translateY(-50%); z-index:4; cursor:pointer} #sec1 .swiper_btn_next{position:absolute; right:5% !important; top:50%; transform:translateY(-50%);z-index:4; cursor:pointer} #sec1 .swiper_btn_prev img{transform:scale(.66); transform-origin:left center} #sec1 .swiper_btn_next img{transform:scale(.66); transform-origin:right center} #sec1 .swiper-pagination{transform:translateY(-10px)} #sec1 .swiper-pagination-bullet{background-color:#fff !important; margin:0 6px;} #sec1 .swiper-pagination-bullet-active{background-color:#fff !important;} /* 협찬2 */ #spon2{ margin-bottom:0px !important; } #spon2 .sec_inner{padding:55px 0; } #spon2 .sec_inner h2{font-family: 'Noto Serif KR', serif; font-size: 20px; } #spon2 .sec_inner img{width: 100%; } /* sec2 */ #sec2{padding-bottom:70px; border-bottom:0px solid #eee; margin-bottom:0px !important; } #sec2 .sec_inner{} #sec2 .sec_inner h2{ } #sec2 .sec_inner .sec2_cont{position: relative;} #sec2 .sec_inner .sec2_cont .swiper{} #sec2 .sec_inner .sec2_cont .swiper{} #sec2 .sec_inner .sec2_cont .swiper ul{ } #sec2 .sec_inner .sec2_cont .swiper ul li{width: 70% !important; } #sec2 .sec_inner .sec2_cont .swiper ul li a{display: block; position: relative; width: 100%;} #sec2 .sec_inner .sec2_cont .swiper ul li a img{width: 100%; object-fit: cover;} #sec2 .sec_inner .sec2_cont .swiper ul li a .info{z-index: 10; position: absolute;background-color: rgba(255, 255, 255, 0.74); width: 90%; left: 50%; bottom: 5%; transform: translateX(-50%); padding: 20px;} #sec2 .sec_inner .sec2_cont .swiper ul li a .info .prdprice{margin-bottom:0 !important} /* menu */ #menu{ background-color:#f4f4f4;} #menu .sec_inner{padding:55px 0; } #menu .sec_inner h2{ } #menu .sec_inner .menu_cont{position: relative;} #menu .sec_inner .menu_cont .swiper{} #menu .sec_inner .menu_cont .swiper{} #menu .sec_inner .menu_cont .swiper ul{ } #menu .sec_inner .menu_cont .swiper ul li{ } #menu .sec_inner .menu_cont .swiper ul li a{} #menu .sec_inner .menu_cont .swiper ul li a img{} /* 연결페이지02 */ .link_connect{ padding: 0 10px; } .link_connect ul { *zoom:1; font-size: 0; } .link_connect ul li { display: inline-block; width: calc(100% / 3); margin: 0 0 12px; text-align: center;} .link_connect ul li a{ color: #000; font-size: .8rem; font-family: 'Noto Sans KR', sans-serif;} .link_connect ul li a img{display: block; width: 90%; padding-bottom: 15px; margin: 0 auto;} /* sec3 */ #sec3{background-color:#fafafa} #sec3 .sec_inner{padding:55px 0 0} #sec3 h2{ } #sec3 p.tit{margin-bottom: 15px !important;} #sec3 .countdown{font-family: 'Lora', serif;} #sec3 .sec3_prd{position: relative !important; } #sec3 .swiper{ margin:0 auto; padding:0 10%} #sec3 .sec3_prd ul{ } #sec3 .sec3_prd ul li{padding-top:10px; background-color:#fafafa} #sec3 .sec3_prd ul li .sec2_prd_info{} #sec3 .sec3_prd ul li #count{position: absolute;top: 0; width:max-content; left: 50%; transform:translateX(-50%); color:#c3b099; padding:7px 0; text-align:center} #sec3 .sec3_prd ul li #count strong{font-family: 'Lora', serif;font-size: 18px; font-weight: 400; letter-spacing:4px;margin:0 4px} #sec3 .sec3_prd ul li:first-child #count{display:block} #sec3 .sec3_prd ul li .tumb{position: relative;} #sec3 .sec3_prd ul li .tumb span.percent_icon{position: absolute; top: 15px; left: 15px; display:inline-block; width:50px; height:50px; border-radius:50%; background-color:#b7a797; color:#fff; text-align:center; line-height:50px; font-family: 'Red Hat Display', sans-serif; font-size:15px; font-weight:600 } #sec3 .swiper-horizontal>.swiper-scrollbar{width: 100% !important; left: 0 !important; bottom:0 !important; height:4px !important;background: rgba(0,0,0,.04) !important;} #sec3 .swiper-scrollbar-drag{background: #b7a797;} /* sec4 */ #sec4{} #sec4 h2{ } #sec4 .sec4_prd{} #sec4 .sec4_prd .swiper{} #sec4 .sec4_prd .swiper ul{} #sec4 .sec4_prd .swiper ul li{width: 100%;} #sec4 .sec4_prd .swiper ul li>a{display:block; position: relative; width: 100%; } #sec4 .sec4_prd .swiper ul li>a img{width:100%} #sec4 .sec4_prd .swiper ul li .txt_cont{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 10;text-align: center; opacity: 0; transition: opacity 2.6s;} #sec4 .sec4_prd .swiper ul li .txt_cont.show{opacity: 1; } #sec4 .sec4_prd .swiper ul li .txt_cont>*{text-align: center;font-family: 'Noto Sans KR', sans-serif; color: #222; line-height:1.3; } #sec4 .sec4_prd .swiper ul li .txt_cont h3{ font-size: 26px; font-weight: 500; margin-bottom: 7px; } #sec4 .sec4_prd .swiper ul li .txt_cont p{font-size: 13.5px; font-weight: 500; margin-bottom: 5px;} #sec4 .sec4_prd .swiper ul li .txt_cont a{display: inline-block; border: 1px solid #000; height: 33px; width: 80px; line-height: 27px; text-align: center; font-weight: 600;font-size: 12px; transition: background-color .3s;} #sec4 .sec4_prd .swiper ul li .txt_cont a:hover{background-color: rgba(255,255,255,.3);} #sec4 .sec4_prd .swiper ul li .txt_cont.white>*{color: #fff;} #sec4 .sec4_prd .swiper ul li .txt_cont.white>a{border-color: #fff;} #sec4 .swiper_btn_prev{ position:absolute; left:5% !important; top:50%; transform:translateY(-50%); z-index:4; cursor:pointer} #sec4 .swiper_btn_next{position:absolute; right:5% !important; top:50%; transform:translateY(-50%);z-index:4; cursor:pointer} #sec4 .swiper_btn_prev img{transform:scale(.66); transform-origin:left center} #sec4 .swiper_btn_next img{transform:scale(.66); transform-origin:right center} /* 중간배너*/ #mid_banner{width: 100%; } .mid_ban li {} .mid_ban li img{width:100%;} .mb{margin-bottom: 10px;} /* sec5 테마 */ #sec5{width: 100%; margin-bottom:30px !important;} #sec5 img{width: 100%;} #sec5 .sec5_ban img{width: 100%; padding-bottom:20px;} #sec5 .sec_inner{position:relative } #sec5 h3{text-align:left !important; padding: 0 5% ; margin-bottom: 15px; font-family: 'Noto Serif KR', serif; color: #7d6253; font-size: 25px; font-weight: 500; line-height: 1.3;} #sec5 p.tit2{text-align:left !important; padding:0 5%; margin-bottom: 30px; font-family: 'Pretendard', sans-serif; line-height: 1.4; color: #b2a18d; font-size: 13px; font-weight: 500;} #sec5 .sec5_prd{width: 100%; position: relative;} #sec5 .sec5_prd iframe{} #sec5 .sec5_prd .prd_sec{height: 100%; padding:3%} #sec5 .sec5_prd .prd_sec ul{height: 100%; width:100%; } #sec5 .sec5_prd .prd_sec ul>li{width: 100% !important;border:0px solid #ebebeb;display:flex; height:auto !important } #sec5 .sec5_prd .prd_sec ul>li:first-child{margin-bottom:15px} #sec5 .sec5_prd .prd_sec ul>li .tumb{float: left; width:30%;} #sec5 .sec5_prd .prd_sec ul>li .tumb a{display: block;width: 100%; } #sec5 .sec5_prd .prd_sec ul>li .tumb a img{width: 100%; height: 100%; object-fit: cover;} #sec5 .sec5_prd .prd_sec ul>li .info{float: left;width: 65%; background-color: #fff;display:flex; justify-content:center; flex-direction:column; padding:10px 15px!important } #sec5 .sec5_prd .prd_sec ul>li .info p{margin-bottom:0 !important} #sec5 .sec5_prd .prd_sec ul>li .info .prdname{border-bottom:1px solid #ebebeb; font-size:14px; padding-bottom:8px; margin-bottom:8px !important } #sec5 .sec5_prd .prd_sec ul>li .info .prdetc{font-size:13px} #sec5 .sec5_prd .prd_sec ul>li .info .prdprice{margin-top:16px} #sec5 .sec5_prd .prd_sec ul>li .info .prdprice span{font-size:15px} #sec5 .sec5_prd .prd_sec ul>li .info .prdprice .price{font-size:14px} #sec5 .sec5_prd .prd_sec ul>li .info .prdprice strike{font-size:13px} #sec5 .swiper-horizontal>.swiper-pagination-bullets, #sec5 .swiper-pagination-bullets.swiper-pagination-horizontal, #sec5 .swiper-pagination-custom, #sec5 .swiper-pagination-fraction{bottom:-25px !important} #sec5 .swiper-pagination-bullet{background-color:#eee !important; opacity:.8 !important } #sec5 .swiper-pagination-bullet-active{background-color:#e4e1dd !important; opacity:1 !important} /* 협찬*/ #spon{width: 100%;} #spon .spon_ban img{width: 100%; padding-bottom:20px;} #spon .sec_inner{position:relative } #spon .sec_inner h2{font-family: 'Pretendard', sans-serif; font-size: 20px; color:#111111; } #spon h3{text-align:left !important; padding: 0 5% ; margin-bottom: 15px; font-family: 'Noto Serif KR', serif; color: #7d6253; font-size: 25px; font-weight: 500; line-height: 1.3;} #spon p.tit2{text-align:left !important; padding:0 5%; margin-bottom: 30px; font-family: 'Pretendard', sans-serif; line-height: 1.4; color: #b2a18d; font-size: 13px; font-weight: 500;} #spon .spon_prd{width: 100%; position: relative;} #spon .spon_prd iframe{} #spon .spon_prd .prd_sec{height: 100%; padding:3%} #spon .spon_prd .prd_sec ul{height: 100%; width:100%; } #spon .spon_prd .prd_sec ul>li{width: 100% !important;border:0px solid #ebebeb;display:flex; height:auto !important } #spon .spon_prd .prd_sec ul>li:first-child{margin-bottom:15px} #spon .spon_prd .prd_sec ul>li .tumb{float: left; width:30%;} #spon .spon_prd .prd_sec ul>li .tumb a{display: block;width: 100%; } #spon .spon_prd .prd_sec ul>li .tumb a img{width: 100%; height: 100%; object-fit: cover;} #spon .spon_prd .prd_sec ul>li .info{float: left;width: 65%; background-color: #fff;display:flex; justify-content:center; flex-direction:column; padding:10px 15px!important } #spon .spon_prd .prd_sec ul>li .info p{margin-bottom:0 !important} #spon .spon_prd .prd_sec ul>li .info .prdname{border-bottom:1px solid #ebebeb; font-size:14px; padding-bottom:8px; margin-bottom:8px !important } #spon .spon_prd .prd_sec ul>li .info .prdetc{font-size:13px} #spon .spon_prd .prd_sec ul>li .info .prdprice{margin-top:16px} #spon .spon_prd .prd_sec ul>li .info .prdprice span{font-size:15px} #spon .spon_prd .prd_sec ul>li .info .prdprice .price{font-size:14px} #spon .spon_prd .prd_sec ul>li .info .prdprice strike{font-size:13px} #spon .swiper-horizontal>.swiper-pagination-bullets, #spon .swiper-pagination-bullets.swiper-pagination-horizontal, #spon .swiper-pagination-custom, #spon .swiper-pagination-fraction{bottom:-25px !important} #spon .swiper-pagination-bullet{background-color:#eee !important; opacity:.8 !important } #spon .swiper-pagination-bullet-active{background-color:#e4e1dd !important; opacity:1 !important} /* sec6 */ #sec6{border-top:1px solid #eee; border-bottom:1px solid #eee; padding-top: 50px } #sec6 .sec_inner{ } #sec6 .sec_inner h2{} #sec6 .sec_inner .sec6_cate{} #sec6 .sec_inner .sec6_cate ul{display:flex; margin-left:15px} #sec6 .sec_inner .sec6_cate ul li{display: inline-block; width:auto !important; border:1px solid #f0f0f0; border-bottom:1px solid #cccccc} #sec6 .sec_inner .sec6_cate ul li:not(:last-child){border-right:none} #sec6 .sec_inner .sec6_cate ul li.on{border-top:1px solid #222 !important; border-right:1px solid #222 !important; border-left:1px solid #222 !important; border-bottom:none !important } #sec6 .sec_inner .sec6_cate ul li a{display:block; width:100%; text-align:center; font-family: 'Noto Sans KR', sans-serif; color:#666; font-size: 14px; font-weight: 400; letter-spacing: -.3px;transition: color .4s, border-color .3s, font-weight .3s; display:inline-block; padding: 12px 35px;} #sec6 .sec_inner .sec6_cate ul li.on>a{ color: #000 !important; } #sec6 .sec6_prd{} #sec6 .sec6_prd>div{display: none; position:relative;padding-top: 40px;} #sec6 .sec6_prd>div ul{display:flex; flex-wrap:wrap} #sec6 .sec6_prd>div.show{display: block;} /* sec7 */ #sec7{background-color:#fafafa} #sec7 .sec_inner{padding:70px 0 30px} #sec7 .sec_inner h2{ } #sec7 .sec_inner .rev_sec{position:relative; } #sec7 .sec_inner .rev_sec .swiper{padding-bottom: 70px;} #sec7 .sec_inner .rev_sec .swiper ul{width: 100%; margin-left:5%} #sec7 .sec_inner .rev_sec .swiper ul li{ width:50%; } #sec7 .sec_inner .rev_sec .swiper ul li .rv_thumb{width: 100%; height:100%;} #sec7 .sec_inner .rev_sec .swiper ul li .rv_thumb a{display: block; width: 100%; height: 100%;} #sec7 .sec_inner .rev_sec .swiper ul li .rv_thumb a img{width: 100%; height: 100%; object-fit: cover;} #sec7 .sec_inner .rev_sec .swiper ul li .rv_txt{height: 32%; padding: 20px; background-color:#fff} #sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .prd_name{color: #242424; font-size: 16px;font-family: 'Noto Sans KR', sans-serif; font-weight: 500; padding-bottom: 10px; letter-spacing: -.7px; } #sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_cont{} #sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_cont p{line-height:1.5;font-size: 13px; color: #999999; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; letter-spacing: -.7px;} #sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score{margin-top: 10px;} #sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score>span{} #sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .heart{} #sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .heart img{display: inline-block; transform:scale(.66); transform-origin:left center} #sec7 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .score{color: #242424; font-size: 13px; font-family: 'Red Hat Display', sans-serif; font-weight: 700;} #sec7 .swiper-pagination{bottom:25px !important} #sec7 .swiper-pagination-bullet{background-color:#eee !important; opacity:.8 !important } #sec7 .swiper-pagination-bullet-active{background-color:#e4e1dd !important; opacity:1 !important} /* sec8 */ #sec8{} #sec8 .sec_inner{} #sec8 .sec_inner h2{margin-bottom: 40px !important;} #sec8 .sec_inner .sec8_cont{width:100%; margin:0 auto} /* BASIC css end */