@charset "utf-8";
#footer{margin-top:150px !important}
#content{width:100%;}
#content .inr{padding:0 80px;}
#content > div[class^="area_"]{margin-top:150px;}
#content .tit i{display:block; font-size:18px; color:#111;}
#content .tit h2{margin-bottom:30px; font-size:70px; font-weight:400; color:var(--primary); font-family:'Marcellus', serif; font-weight:normal;}

#content .swiper-button-next{right:0;}
#content .swiper-button-prev{left:0;}
#content .swiper-button-next,
#content .swiper-button-prev{margin-top:0; transform:translateY(-50%); width:80px; height:80px; border:1px solid var(--primary); transition:0.3s ease; background:var(--primary); opacity:0;}
#content .pr_list:hover .swiper-button-next,
#content .pr_list:hover .swiper-button-prev{opacity:1;}
#content .swiper-button-next.swiper-button-disabled, 
#content .swiper-button-prev.swiper-button-disabled{background:transparent; opacity:0 !important;}
#content .swiper-button-next:after,
#content .swiper-button-prev:after{content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:0; width:15px; height:28px; transition:0.3s ease;}
#content .swiper-button-next:after{background:url(../images/common/arrow_next_l_w.svg)no-repeat center/contain; margin-left:3px;}
#content .swiper-button-prev:after{background:url(../images/common/arrow_prev_l_w.svg)no-repeat center/contain; margin-left:-3px;}
#content .swiper-button-next.swiper-button-disabled:after{background:url(../images/common/arrow_next_l_c.svg)no-repeat center/contain;}
#content .swiper-button-prev.swiper-button-disabled:after{background:url(../images/common/arrow_prev_l_c.svg)no-repeat center/contain;}
#content .swiper-pagination{}

.btn_more{display:block; position:relative; margin-top:80px; padding:0 20px; width:300px; height:60px; font-size:20px; line-height:60px; transition:0.8s ease;}
.btn_more:before{content:''; display:block; position:absolute; top:0; left:0; width:0%; height:100%; transition:0.5s ease; z-index:-1;} 
.btn_more i{display:block; position:absolute; top:50%; right:20px; transform:translateY(-50%); width:17px; height:13px; transition:0.8s ease;}
.btn_more i.arrow02{opacity:0;}
.btn_more i img{width:100%;}
.btn_more_w{border:1px solid #fff; color:#fff !important;}
.btn_more_w:before{background:#fff;}
.btn_more_c{border:1px solid var(--primary); color:var(--primary) !important;}
.btn_more_c:before{background:var(--primary);}
@media (hover: hover) {
    .btn_more:hover:before{width:100%;}
    .btn_more:hover i.arrow01{opacity:0;}
    .btn_more:hover i.arrow02{opacity:1;}
    .btn_more_w:hover{color:var(--primary) !important;}
    .btn_more_c:hover{color:#fff !important;}
}


/* 메인비주얼 */
.area_visual{position:relative; width:100%; margin:0 auto; background:#fff; height:85vh; }
.area_visual .swiper{height:100%; padding-bottom:80px;}
.area_visual .swiper li{position:relative; height:100%;}
.area_visual .swiper .bg{position:relative; width:100%; height:100%;}
.area_visual .swiper .txt{position:absolute; opacity:0; margin-top:100px; top:50%; left:8%; transform:translateY(-50%); z-index:10; transition:1s ease;}
.area_visual .swiper-slide-active .txt{opacity:1; margin-top:0;}
.area_visual .swiper .txt h3{font-size:35px; color:var(--primary); font-family:'Marcellus', serif; font-weight:normal;}
.area_visual .swiper .txt h2{font-size:50px; color:#fff; font-weight:normal;}
.area_visual .swiper .txt p{margin-top:20px; font-size:20px; color:#fff; opacity:0.9; line-height:1.6;}
.area_visual .swiper .img{display:block; position:absolute; width:600px; right:-20%; bottom:-80px; transition:1.2s ease; opacity:0;}
.area_visual .swiper .img img{width:100%;}
.area_visual .swiper-slide-active .img{right:0; opacity:1;}
.area_visual .control{position:absolute; bottom:130px; left:8%; width:300px;}
.area_visual .swiper-pagination{position:relative; margin:0 0 15px -5px; bottom:auto !important; left:auto !important; text-align:left;}
.area_visual .swiper-pagination-bullet{width:20px; height:auto; border-radius:0; text-align:center; color:#fff; background:none; font-size:18px; font-weight:500; opacity:0.4; margin:0 !important; font-family:'Marcellus', serif;}
.area_visual .swiper-pagination-bullet+.swiper-pagination-bullet{margin-left:20px !important;}
.area_visual .swiper-pagination-bullet-active{background:none; opacity:1;}
.area_visual .swiper-progress-bar{position:relative; width:100%; display:block; z-index:1; height:2px;}
.area_visual .swiper-progress-bar .slide_progress-bar{display:block; position:relative; height:2px; background:rgba(255,255,255,0.3); width:auto; clear:both; opacity:0;}
.area_visual .swiper-progress-bar .slide_progress-bar:after{position:absolute; top:0; left:0; background:#fff; height:100%; width:0; content:""; transition:0.1s width linear;}
.area_visual .swiper-progress-bar.active .slide_progress-bar{opacity:1;}
.area_visual .swiper-progress-bar.animate .slide_progress-bar:after{transition:width linear; transition-delay:unset; width:100%; transition-duration:6s;}


/* 메인 공통 리스트 */
.main_list .pr_list{position:relative;}
.main_list .swiper{width:100%; padding:0 80px;}
.main_list *[data-shop-list="default"] > li > .box{padding:0 !important}
.main_list *[data-shop-list="default"] > li .img{padding-top:85%;}
.main_list .swiper-pagination-progressbar{position:relative; margin:60px auto 0; height:2px; background:#ddd;}
.main_list .swiper-pagination-progressbar-fill{background:var(--primary);}


/* 베스트상품 */
.area_best{position:relative; display:flex; justify-content:space-between; }
.area_best .txt_obj{display:block; position:absolute; bottom:-65px; left:80px; color:#f4f3ec; font-size:14vw; font-family:'Marcellus', serif; line-height:initial;}
.area_best .tit{margin-left:80px; width:320px;}
.area_best .btn_more.mo{display:none;}
.area_best .pr_list{position:relative; padding:120px 0 100px; width:calc(100% - 600px);}
.area_best .pr_list:before{content:''; display:block; position:absolute; top:0; right:0; width:69%; height:100%; background:#f7f6f1;}
.area_best .swiper{display:flex; position:relative; width:100%;}
.area_best .swiper-slide{display:flex; flex-direction:row-reverse; justify-content:center; align-items:center; position:relative; opacity:0 !important; transition:0.4s; width:100%;}
.area_best .swiper-slide-active{opacity:1 !important;}
.area_best *[data-shop-list="default"]{margin-left:0;}
.area_best *[data-shop-list="default"] > li{float:none; padding:0; margin-bottom:0;}

.area_best .txt_box{width:600px;}
.area_best .txt_top{margin-bottom:40px;}
.area_best .txt_top h4{margin-bottom:10px; font-size:18px; color:var(--primary); letter-spacing:3px; font-family:'Marcellus', serif; font-weight:normal;}
.area_best .txt_top h2{margin-bottom:5px; font-size:25px; color:#111; font-weight:normal;}
.area_best .txt_top h6{font-size:16px; color:var(--primary); opacity:0.6 ; font-weight:normal;}
.area_best .txt_top .price{display:block; margin-top:15px; color:#333;}
.area_best .txt_top .price i{font-size:20px;}
.area_best .txt_top .price i:before{font-size:20px;}
.area_best .txt_bottom p{font-size:18px; color:#444;}

.area_best .swiper-slide .txt_top > *,
.area_best .swiper-slide .txt_bottom > *{transform:translateY(-30px); opacity:0; transition-duration:0.8s;}
.area_best .swiper-slide-active .txt_top > *,
.area_best .swiper-slide-active .txt_bottom > *{transform:none; opacity:1;}
.area_best .swiper-slide-active .txt_box .txt_top h6{opacity:0.6;}
.area_best .img_box{display:block; margin-right:120px; position:relative; flex-shrink:0; height:700px; width:400px;}
.area_best .img_box .pr-img{position:absolute; bottom:0; left:50%; transform:scale(1) translateX(-50%);}
.area_best .swiper-slide .pr-img{transition-duration:0.8s; transform:scale(0.6) translateX(-50%); opacity:0;}
.area_best .swiper-slide-active .pr-img{opacity:1; transform:scale(1) translateX(-50%);}
.area_best .img_box .pr-bg{width:100%; height:580px; object-fit:cover; border-radius:200px;}
.area_best .swiper-slide .pr-bg{transition-duration:0.6s; opacity:0; object-position:70%;}
.area_best .swiper-slide-active .pr-bg{opacity:1; transform:none; object-position:50%;}

.area_best .swiper-pagination{display:none;}


/* 피부타입별 상품 */
.area_skin{pointer-events:none;}
.area_skin .top{display:flex; flex-direction:row-reverse; justify-content:space-between;}
.area_skin .top .tit{padding:0 140px; width:900px;}
.area_skin .top .tit p{font-size:16px; color:#444;}
.area_skin .top .img{width:calc(100% - 900px);}
.area_skin .top .img img{width:100%;}
.area_skin .top .btn_more{pointer-events:auto;}
.area_skin .list_wrap{margin-top:-187px; padding-bottom:100px; background:#f7f6f1; overflow:hidden; pointer-events:auto;}
.area_skin .btn_wrap{display:flex; justify-content:flex-end;}
.area_skin .tab_btn{display:flex; padding:80px 0; width:900px; justify-content:center;}
.area_skin .tab_btn li+li{margin-left:70px;}
.area_skin .tab_btn li a{display:block; position:relative; cursor:pointer; color:#b8b8b8; font-size:20px;}
.area_skin .tab_btn li a:before{content:''; display:block; position:absolute; top:50%; left:-35px; width:4px; height:4px; background:#b8b8b8; border-radius:50%; transform:translateY(-50%);}
.area_skin .tab_btn li:first-child a:before{display:none}
.area_skin .tab_btn li.active a{color:var(--primary); font-weight:600;}
.area_skin .btn_more_c{background:#fff;}
@media (hover: hover) {
    .area_skin .btn_more_c:hover{background:none;}
}


/* 인기카테고리 */
.area_popular .box{display:block; position:relative; background:#f4f2ea; transition:0.5s ease;}
.area_popular .box:before{content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:0; background:var(--primary); transition:0.5s ease; z-index:1;}
.area_popular .box:hover:before{height:100%;}
.area_popular .box h3{position:absolute; padding:30px 40px; top:0; left:0; width:100%; font-size:25px; color:#111; font-weight:normal; transition:0.5s ease; z-index:3;}
.area_popular .box01 h3{padding:40px 50px; font-size:30px;}
.area_popular .box:hover h3{color:#fff;}
.area_popular .box .bg{position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; overflow:hidden;}
.area_popular .box .bg img{position:absolute; width:100%; height:100%; object-fit:contain; transition:0.5s ease;}
.area_popular .box .bg .bg01{opacity:1; object-position:center bottom;}
.area_popular .box .bg .bg02{opacity:0; object-position:right bottom;}
.area_popular .box:hover .bg .bg01{opacity:0;}
.area_popular .box:hover .bg .bg02{opacity:1;}
.area_popular .cont{display:flex; width:100%;}
.area_popular .cont01{justify-content:space-between;}
.area_popular .cont01 .box01{width:calc(100% / 2 - 80px);}
.area_popular .group{display:flex; padding-right:80px; width:50%; flex-direction:column;}
.area_popular .group .top{display:flex; justify-content:space-between; width:100%;}
.area_popular .group .top .box{padding-top:55%; width:calc(100% / 2 - 25px);}
.area_popular .tit{margin-top:80px;}
.area_popular .tit h2{margin-bottom:0;}
.area_popular .cont02{padding:0 80px; margin-top:80px; justify-content:space-between; width:100%;}
.area_popular .cont02 .box04{padding-top:30%; width:calc(45% - 80px);}
.area_popular .cont02 .box05{width:55%;}





@media screen and (max-width:1920px){
    .area_best .pr_list{width:calc(100% - 500px);}
    .area_best .txt_box{width:500px;}
    .area_best .img_box{margin-right:100px;}
    
    .main_list *[data-shop-list="default"] > li .img{padding-top:90%;}
    
    .area_skin .top .tit{padding:0 80px; width:760px;}
    .area_skin .top .img{width:calc(100% - 760px)}
    .area_skin .btn_wrap{margin-bottom:80px;}
}

@media screen and (max-width:1720px){
    .area_best .img_box{margin-right:80px;}
    .area_best .txt_box{width:400px;}
}

@media screen and (max-width:1600px){
    #content .inr{padding:0 2%;}
    #content .tit i{font-size:17px;}
    #content .tit h2{font-size:50px;}
    
    #content .swiper-button-next,
    #content .swiper-button-prev{display:none;}
    
    .btn_more{margin-top:60px; padding:0 15px; font-size:18px; width:260px; height:55px; line-height:55px;}
    .btn_more i{right:15px;}
    
    .area_visual .swiper .txt,
    .area_visual .control{left:5%;}
    .area_visual .swiper .txt h3{font-size:27px;}
    .area_visual .swiper .txt h2{font-size:40px;}
    .area_visual .swiper .txt p{font-size:18px;}
    .area_visual .swiper .img{width:500px;}
    
    .area_best{align-items:center;}
    .area_best .tit{margin-left:2%; width:280px;}
    .area_best .pr_list{padding:100px 2% 80px 0; width:calc(100% - 360px);}
    .area_best .pr_list:before{width:713px;}
    .area_best .swiper-slide{justify-content:end;}
    .area_best .txt_obj{display:none;}
    .area_best .swiper-pagination{display:block; left:auto; right:337px; bottom:75px; width:auto;}
    .area_best .swiper-pagination-bullet{background:#ccc; opacity:1;}
    .area_best .swiper-pagination-bullet-active{background:var(--primary);}
    .area_best .txt_top h2{font-size:22px;}
    .area_best .txt_top h4{font-size:16px;}
    .area_best .txt_top h6{font-size:15px;}
    .area_best .txt_top .price i,
    .area_best .txt_top .price i:before{font-size:18px;}
    
    .main_list .swiper{padding:0 2%;}
    .main_list .swiper-pagination-progressbar{margin-top:40px;}
    
    .area_skin .top .tit{padding:0 60px; width:500px;}
    .area_skin .top .tit p > br{display:none;}
    .area_skin .top .img{width:calc(100% - 500px);}
    .area_skin .list_wrap{margin-top:-147px;}
    .area_skin .tab_btn{padding:60px 0; width:500px;}
    .area_skin .tab_btn li+li{margin-left:50px;}
    .area_skin .tab_btn li a{font-size:18px;}
    .area_skin .tab_btn li a:before{left:-26px;}
    
    .area_popular .cont01 .box01{width:calc(100% / 2 - 60px);}
    .area_popular .group{padding-right:2%;}
    .area_popular .group .top .box{width:calc(100% / 2 - 15px);}
    .area_popular .tit{margin-top:60px;}
    .area_popular .box h3{padding:20px 30px !important; font-size:22px !important;}
    .area_popular .cont02{margin-top:60px; padding:0 2%;}
    .area_popular .cont02 .box04{width:calc(44% - 30px); padding-top:32%;}
    .area_popular .cont02 .box05{width:56%;}
}


@media screen and (max-width:1280px){
    .area_best{padding:150px 0 130px; background:#f7f6f1; flex-direction:column;}
    .area_best .tit{margin-left:0; width:auto; text-align:center;}
    .area_best .btn_more.pc{display:none;}
    .area_best .btn_more.mo{display:block; position:relative; z-index:1;}
    .area_best .pr_list{margin-top:40px; padding:0; width:1000px;}
    .area_best .pr_list:before{display:none;}
    .area_best .swiper-slide{justify-content:center;}
    .area_best .swiper-pagination{right:400px;}
    
    .area_skin .top .img{height:580px;}
    .area_skin .top .img img{height:580px; object-fit:cover;}
}

@media screen and (max-width:1024px){
    #content > div[class^="area_"]{margin-top:100px;}
    #content .tit i{font-size:15px;}
    #content .tit h2{margin-bottom:25px; font-size:35px;}
    
    .btn_more{margin-top:45px; padding:0 12px; font-size:16px; width:220px; height:46px; line-height:46px;}
    
    .area_visual{height:90vh;}
    .area_visual .swiper{padding-bottom:60px;}
    .area_visual .swiper .txt{top:calc(15% + 70px); transform:none;}
    .area_visual .swiper .txt h3{font-size:20px;}
    .area_visual .swiper .txt h2{font-size:30px;}
    .area_visual .swiper .txt p{margin-top:12px; font-size:16px;}
    .area_visual .swiper .img{bottom:-60px; width:380px;}
    .area_visual .control{bottom:100px; width:200px;}
    .area_visual .swiper-pagination{margin-bottom:10px;}
    .area_visual .swiper-pagination-bullet{width:18px; font-size:15px;}
    .area_visual .swiper-pagination-bullet+.swiper-pagination-bullet{margin-left:15px !important;}
    
    .area_best{padding:100px 0 80px;}
    .area_best .swiper{padding-bottom:50px;}
    .area_best .pr_list{margin-top:15px; width:96%;}
    .area_best .swiper-slide{flex-direction:column-reverse;}
    .area_best .img_box{margin-right:0; width:320px; height:540px;}
    .area_best .img_box .pr-bg{height:450px;}
    .area_best .img_box .pr-img{width:500px;}
    .area_best .txt_box{margin-top:20px; width:100%;}
    .area_best .txt_top{margin-bottom:20px; text-align:center;}
    .area_best .txt_top h4{margin-bottom:5px; font-size:15px;}
    .area_best .txt_top h2{font-size:18px;}
    .area_best .txt_top h6{font-size:14px;}
    .area_best .txt_top .price i, .area_best .txt_top .price i:before{font-size:15px;}
    .area_best .txt_bottom p{font-size:15px; text-align:center;}
    .area_best *[data-shop-list="default"] .pr_info{margin:10px auto 0; max-width:600px; width:100%;}
    .area_best .swiper-pagination {right:auto; bottom:0; left:50%; transform:translateX(-50%);}
    
    .area_skin{pointer-events:auto;}
    .area_skin .top{flex-direction:column-reverse;}
    .area_skin .top .tit{margin-top:40px; padding:0 2%; width:100%;}
    .area_skin .top .tit p{font-size:15px;}
    .area_skin .top .tit p > br{display:block;}
    .area_skin .top .btn_more{position:relative;z-index:10;}
    .area_skin .top .img{height:auto; width:90%;}
    .area_skin .top .img img{height:auto;}
    .area_skin .list_wrap{margin-top:-24px;}
    .area_skin .btn_wrap{margin-bottom:0;}
    .area_skin .tab_btn{width:100%; padding:100px 0 30px;}
    .area_skin .tab_btn li+li{margin-left:40px;}
    .area_skin .tab_btn li a{font-size:16px;}
    .area_skin .tab_btn li a:before{left:-23px;}
    
    .area_popular .cont01{flex-direction:column-reverse;}
    .area_popular .box h3{padding:20px !important; font-size:18px !important;}
    .area_popular .cont01 .box01{margin-top:20px; padding-top:58%; width:98%;}
    .area_popular .group{flex-direction:column-reverse;}
    .area_popular .tit{margin-top:0;}
    .area_popular .group{width:100%; padding:0 2%;}
    .area_popular .group .top{margin-top:10px;}
    .area_popular .group .top .box{width:calc(100% / 2 - 10px);}
    .area_popular .cont02{margin-top:20px;}
    .area_popular .cont02 .box04{width:calc(46% - 20px);}
    .area_popular .cont02 .box05{width:54%;}
    
    #footer{margin-top:100px !important;}
}



@media screen and (max-width:767px){
    #content > div[class^="area_"]{margin-top:70px;}
    #content .tit i{font-size:14px;}
    #content .tit h2{font-size:30px;}
    
    .btn_more{margin-top:35px; padding:0 10px; font-size:15px; height:42px; line-height:42px; width:185px;}
    .btn_more i{right:10px; width:15px; height:11px;}
    
    .area_visual .swiper .txt{top:calc(15% + 50px); left:2%;}
    .area_visual .swiper .txt h3{font-size:17px;}
    .area_visual .swiper .txt h2{font-size:22px;}
    .area_visual .swiper .txt p{margin-top:10px; font-size:14px;}
    .area_visual .swiper .img{width:300px;}
    .area_visual .control{left:2%;}
    
    .area_best{padding:70px 0;}
    .area_best .swiper{padding-bottom:38px;}
    .area_best .pr_list{margin-top:0;}
    .area_best .img_box{width:270px; height:460px;}
    .area_best .img_box .pr-bg{height:390px;}
    .area_best .img_box .pr-img{width:400px;}
    .area_best .txt_box{margin-top:10px;}
    .area_best .txt_top h4{font-size:14px;}
    .area_best .txt_top h2{font-size:16px;}
    .area_best .txt_top h6{font-size:13px;}
    .area_best .txt_top .price{margin-top:10px;}
    .area_best .txt_top .price i, .area_best .txt_top .price i:before{font-size:14px;}
    .area_best .txt_top{margin-bottom:15px;}
    .area_best .txt_bottom p{font-size:14px;}
    .area_best *[data-shop-list="default"] .pr_info{margin-top:8px;}
    
    .main_list .swiper-pagination-progressbar{margin-top:30px;}
    
    .area_skin .top .tit p > br{display:none;}
    .area_skin .list_wrap{margin-top:-22px; padding-bottom:70px;}
    .area_skin .tab_btn{padding:60px 0 20px;}
    .area_skin .tab_btn li+li{margin-left:28px;}
    .area_skin .tab_btn li a{font-size:15px;}
    .area_skin .tab_btn li a:before{left:-17px;}
    
    .area_popular .group .top{margin-top:0;}
    .area_popular .group .top .box{width:calc(100% / 2 - 5px);}
    .area_popular .box h3{padding:15px !important; font-size:16px !important;}
    .area_popular .cont02 .box04{padding-top:38%; width:calc(46% - 10px);}
    
    #footer{margin-top:70px !important;}
}

@media screen and (max-width:540px){
    .area_visual{height:94vh;}
    .area_visual .swiper{padding-bottom:40px;}
    .area_visual .control{width:150px; bottom:70px;}
    .area_visual .swiper-pagination-bullet{font-size:14px;}
    .area_visual .swiper-pagination-bullet+.swiper-pagination-bullet{margin-left:10px !important;}
    .area_visual .swiper .img{width:200px; bottom:-40px;}
}

@media screen and (max-width:420px){
    .area_best .img_box{width:245px; height:380px;}
    .area_best .img_box .pr-bg{height:320px;}
    .area_best .img_box .pr-img{width:330px;}
}