/* BASIC css start */ /* 섹션 공통 */ section{margin-bottom:90px} section .sec_inner{width: 1400px; margin: 0 auto;} section h2{text-align: center;margin-bottom: 30px;color: #333;font-family: 'Jost', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: 13px; } section h2 a{float: right;} #sec1{width: 100%;} #sec1 .swiper{} #sec1 .swiper ul{width: 100%;} #sec1 .swiper ul li{width: 100%;} #sec1 .swiper ul li a{display: block;width: 100%;} #sec1 .swiper ul li a img{width: 100%;} #sec1 .swiper-pagination{bottom: 60px;} #sec1 .swiper-pagination-bullet{width: 30px; height: 3px; border-radius: 0; background-color: #fff; } #sec1 .swiper{position:relative} #sec1 .swiper_btn_prev{position: absolute; top: 50%; left: 10%; z-index: 10; transform: translateY(-50%); cursor: pointer; } #sec1 .swiper_btn_next{position: absolute; top: 50%; right: 10%; z-index: 10; transform: translateY(-50%); cursor: pointer;} #sec2{} #sec2 .sec_inner{} #sec2 .sec_inner ul{display: flex; justify-content: space-between;} #sec2 .sec_inner ul li{position: relative; border-radius: 10px; overflow: hidden;} #sec2 .sec_inner ul li img{transition: filter .3s;filter: grayscale(.4); } #sec2 .sec_inner ul li a{font-family: 'Noto Sans KR', sans-serif;transition: opacity .3s, margin-top .25s, background-color .3s;background: rgba(255,255,255,0); opacity: .7; font-size: 15px; color: #fff; position: absolute; top: 45%; left: 50%; z-index: 1;border: 1px solid #fff; font-weight: 400; padding: 12px 27px; border-radius: 25px; display: inline-block; transform: translateX(-50%) translateY(-50%); margin-top: 15px;} #sec2 .sec_inner ul li a:hover{background-color: rgba(255,255,255,.2);} #sec2 .sec_inner ul li.hover{} #sec2 .sec_inner ul li.hover img{filter: grayscale(0); } #sec2 .sec_inner ul li.hover a{margin-top: 0; opacity: 1;} #sec3{} #sec3 .sec_inner{} #sec3 .sec_inner h2{} #sec3 .sec_inner h2 a{} #sec3 .sec_inner h2 a img{} #sec3 .sec_inner .sec3_prd{} #sec3 .sec_inner .sec3_prd>ul{width: 100%; display: flex; justify-content: space-between;} #sec4 .sec_inner .sec4_prd>ul{width: 100%; display: flex; justify-content: space-between;} #sec5{} #sec5 a{display: block; width: 100%;} #sec5 a img{width: 100%;} #sec6{} #sec6 .sec_inner{} #sec6 .sec_inner h2{} #sec6 .sec_inner .sec6_cate{margin: 30px 0 40px;} #sec6 .sec_inner .sec6_cate ul{display:flex;flex-wrap:wrap; justify-content:center } #sec6 .sec_inner .sec6_cate ul li{margin:0 20px} #sec6 .sec_inner .sec6_cate ul li a{font-family: 'Noto Sans KR', sans-serif; transition:border-color .3s; border-bottom:2px solid transparent; color:#bbbbbb; font-size: 15px; display: block;font-weight: 400;text-align:center; padding: 8px 0; transition:border-color .2s, color .2s;} #sec6 .sec_inner .sec6_cate ul li.on>a{ color: #000;border-color:#000;} #sec6 .sec_inner .sec6_prd{} #sec6 .sec_inner .sec6_prd>div{display:none;} #sec6 .sec_inner .sec6_prd>div.show{display: block;} #sec6 .sec_inner .sec6_prd>div>ul{width: 100%; display: flex; flex-wrap: wrap; } #sec6 .sec_inner .sec6_prd>div>ul>li{width: 335px; position: relative; height: 335px; margin-bottom: 20px; border-radius: 10px; overflow: hidden;} #sec6 .sec_inner .sec6_prd>div>ul>li .thumb{width: 100%; height: 100%;} #sec6 .sec_inner .sec6_prd>div>ul>li .thumb img{width: 100%;display: block; height: 100%; object-fit: cover;} #sec6 .sec_inner .sec6_prd>div>ul>li .info{display: none; transition: opacity .4s; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,.86);} #sec6 .sec_inner .sec6_prd>div>ul>li .info.show1{display: block;} #sec6 .sec_inner .sec6_prd>div>ul>li .info.show2{opacity: 1;} #sec6 .sec_inner .sec6_prd>div>ul>li .info.show2 .info_inner{margin-top: 0; opacity: 1;} #sec6 .sec_inner .sec6_prd>div>ul>li .info.show2 .prd_icon{opacity: 1;} #sec6 .sec_inner .sec6_prd>div>ul>li .info .info_inner{width: 230px; height: 200px; display: flex;opacity: 0; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin-top: 15px; transition: margin-top .3s, opacity .7s; } #sec6 .sec_inner .sec6_prd>div>ul>li .info .info_inner p{} #sec6 .sec_inner .sec6_prd>div>ul>li .info .prd_icon{position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%);opacity: 0; transition: opacity .5s;} #sec6 .sec_inner .sec6_prd>div>ul>li .info .prd_icon ul{display: flex; align-items: center;} #sec6 .sec_inner .sec6_prd>div>ul>li .info .prd_icon ul li{margin: 0 10px;} #sec6 .sec_inner .sec6_prd>div>ul>li .info .prd_icon ul li a{display: block;} #sec6 .sec_inner .sec6_prd>div>ul>li .info .prd_icon ul li a img{} #sec7 .sec_inner .rev_sec ul{display:flex;} #sec7 .sec_inner .rev_sec ul li .rv_thumb{width: 100%; height: 335px;} #sec7 .sec_inner .rev_sec ul li .rv_thumb a{display: block; width: 100%; height: 100%; border-radius:10px; overflow:hidden} #sec7 .sec_inner .rev_sec ul li .rv_thumb a img{width: 100%; object-fit: cover;} #sec7 .sec_inner .rev_sec ul li .rv_txt{height: 185px; padding: 30px; background-color:#fff} #sec7 .sec_inner .rev_sec ul li .rv_txt .prd_name{color: #222; 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} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_cont{} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_cont p{line-height:1.5;font-size: 12px; color: #999; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; letter-spacing: -.7px;text-align:center;} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_score{margin-top: 14px;text-align:center} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_score>span{} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_score .heart{} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_score .heart img{display: inline-block; transform: translateY(-2px); margin-right:4px} #sec7 .sec_inner .rev_sec ul li .rv_txt .rv_score .score{color: #242424; font-size: 17px; font-family: 'Jost', sans-serif; font-weight:500;} /* BASIC css end */