@charset "utf-8";


/* 메인 전체 스타일 */
#content .inr{margin:0 auto; max-width:1600px; width:96%;}
#content > div[class^="area_"]{margin-top:180px;}
#content h2.tit{margin-bottom:45px; font-size:60px; font-weight:500; color:#21201e; font-family:'Cormorant Infant', serif;}
p{font-size:18px; font-weight:300; line-height:1.8;}


/* main_visual */
.area_visual{position:relative; width:100%; height:100vh;}
.area_visual .swiper{height:100%;}
.area_visual .swiper-slide{width:100% !important; height:100%; overflow:hidden; background:transparent;}
.area_visual .swiper-slide .bg{position:absolute; bottom:0; right:0; width:100%; height:100%; }
.area_visual .swiper-slide-next .bg{transform:scale(0.2); transform-origin:bottom right;}
.area_visual .swiper-slide-prev .bg{transform:scale(1);}
.area_visual .swiper-slide-active .bg{transform:scale(1); transform-origin:bottom right; transition:1s;}
.area_visual .swiper-slide .bg-next{position:absolute; bottom:80px; right:80px; width:100%; height:100%; transform:scale(0.2); transform-origin:bottom right; transition:1s;}
.area_visual .swiper-slide-next .bg-next{transform:scale(0);}
.area_visual .swiper-slide-prev .bg-next{transform:scale(0);}
.area_visual .swiper-slide-active .bg-next{transform:scale(0.2);}
.area_visual .swiper-button-next{top:0; height:100%; width:100%; margin-top:0; right:0;}
.area_visual .swiper-button-next:after{display:none;}

.area_visual .swiper-slide .box{opacity:0; position:absolute; left:8%; top:200px; transform:translateY(50%); z-index:1; transition:2s ease; transition-delay:0.3s;}
.area_visual .swiper-slide-active .box{opacity:1; transform:translateY(0);}
.area_visual .swiper-slide .box h3{color:#fff; font-size:35px; font-weight:500; font-family:'Cormorant Infant', serif;}
.area_visual .swiper-slide .box h2{margin:0 0 50px; color:#fff; font-size:100px; font-weight:500; font-family:'Cormorant Infant', serif;}
.area_visual .swiper-slide .box h4{margin-bottom:30px; color:#fff; font-size:30px; font-weight:500; font-family:'Cormorant Infant', serif;}
.area_visual .swiper-slide .box p{color:#fff;}
.area_visual .btn_more{right:-180px; bottom:0px;}

.area_visual .control{position:absolute; bottom:100px; 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:16px; font-weight:500; font-family:'Cormorant Infant', serif; opacity:0.4; margin:0 !important;}
.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:9s;}

.area_visual .swiper-slide .bg.mo,
.area_visual .swiper-slide .bg-next.mo{display:none;}


/* 텍스트 원형버튼 */
.btn_more{display:block; position:absolute; width:175px; height:175px;}
.btn_more span{display:block; position:relative; width:100%; height:100%; animation:spin 25s linear infinite; transition:0.5s ease; z-index:1;}
.btn_more span:hover{opacity:0.5;}
.btn_more span img{width:100%;}
.btn_more > img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60px;}
@keyframes spin{
    100%{transform:rotate(360deg);}
}


/* 텍스트 원형버튼 */
#content .swiper-button-prev img{transform:rotate(180deg);}
#content .swiper-button-next:after, 
#content .swiper-button-prev:after{display:none;}
#content .swiper-button-next, 
#content .swiper-button-prev{display:block; position:relative; top:auto; right:auto !important; left:auto !important; width:auto; height:auto; margin-top:0;}
#content .swiper-pagination{display:none;}
#content .swiper-pagination-bullet-active{background:#21201e;}


/* 베스트상품 */
.area_best{position:relative; overflow:hidden;}
.area_best .swiper{overflow:visible;}
.area_best *[data-shop-list="default"]{flex-wrap:nowrap !important;}
.area_best *[data-shop-list="default"] > li{margin-bottom:0 !important;}
.area_best .control{display:flex; position:absolute; right:0; top:-90px;}
.area_best .swiper-button-prev{margin-right:30px;}


/* 회사소개 */
.area_about{position:relative; width:100%; background:url(../images/main/img_about_bg.jpg)no-repeat center/cover;}
.area_about .box{padding:120px 2%; text-align:center;}
.area_about .box h2{margin-bottom:40px; color:#fff; font-weight:500; font-size:40px; font-family:'Cormorant Infant', serif;}
.area_about .box p{color:#fff;}
.area_about .box .btn_about{display:block; margin-top:90px; color:#fff; font-size:18px; font-family:'Cormorant Infant', serif; font-weight:500; transition:0.3s ease;}
.area_about .box .btn_about:hover{opacity:0.6;}
.area_about .box .btn_about i{display:inline-block; margin:8px 0 0 20px; width:40px; vertical-align:middle;}
.area_about .box .btn_about i img{width:100%;}


/* 룩북 */
.area_look{position:relative;}
.area_look .txt_box{position:absolute; left:0; top:5px; z-index:1; width:100%;}
.area_look h2{margin-bottom:10px; font-size:120px; font-family:'Cormorant Infant', serif; color:#21201e; font-weight:500;}
.area_look p{width:28%;}
.area_look .img_box{display:flex; justify-content:space-between;}
.area_look .img_box .img01{align-self:flex-end; margin-top:500px; padding-right:30px; width:28%;}
.area_look .img_box .img01 img{border-bottom-right-radius:200px;}
.area_look .img_box .img02{position:relative; width:38%;}
.area_look .img_box .img02 img{border-top-right-radius:310px; border-top-left-radius:310px;}
.area_look .img_box .img02 .btn_more{right:-95px; top:calc(100% / 1 - 188px);}
.area_look .img_box .img03{align-self:center; margin-top:-30px; width:28%;}
.area_look .img_box .img03 img{border-top-left-radius:200px;}
.area_look .img_box .img > img{width:100%;}
.area_look .img_box_mo{display:none;}


/* 이벤트 */
.area_event{display:flex;}
.area_event .box{position:relative; padding:80px; background-repeat:no-repeat; background-size:cover; background-position:center; width:15%; height:840px; cursor:pointer; transition:all 1s ease;}
.area_event .box.active{width:75%; cursor:auto; transition:all 1s ease;}
.area_event .box .cover{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.area_event .box.active .cover{background:rgba(0,0,0,0);}
.area_event .box > span{display:block; position:absolute; top:50%; left:50%; font-size:40px; color:#fff; font-family:'Cormorant Infant', serif; transform-origin:center; transform:translate(-50%,-50%) rotate(90deg);}
.area_event .box.active > span{display:none;}
.area_event .box .txt_box{position:relative; opacity:0; visibility:hidden; color:#fff; width:100%; height:100%;}
.area_event .box.active .txt_box{opacity:1; visibility:visible; transition:3s;}
.area_event .box .txt_box > span{display:block; margin-bottom:20px; font-size:25px; opacity:0.6; font-family:'Cormorant Infant', serif;}
.area_event .box .txt_box h2{font-size:50px; font-weight:500; font-family:'Cormorant Infant', serif;}
.area_event .box .txt_box h3{font-size:22px; font-weight:400; opacity:0.8;}
.area_event .box .txt_box p{margin-top:45px; opacity:0.8;}
.area_event .box .btn_more{right:0; bottom:0;}


/* md_pick */
.area_md h2{text-align:center;}
.area_md .btn_wrap .tab_btn{display:flex; justify-content:center; margin-bottom:60px;}
.area_md .btn_wrap .tab_btn li+li{margin-left:80px;}
.area_md .btn_wrap .tab_btn li a{display:block; position:relative; font-size:18px; color:#21201e; opacity:0.5; transition:0.3s ease; cursor:pointer; font-family:'Cormorant Infant', serif;}
.area_md .btn_wrap .tab_btn li a:after{content:''; display:block; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:0; height:1px; background:#21201e; transition:0.3s ease;}
.area_md .btn_wrap .tab_btn li.active a{opacity:1; font-weight:600;}
.area_md .btn_wrap .tab_btn li.active a:after{width:100%;}
.area_md .tab_cont > div{display:flex;}
.area_md .tab_cont .img_box{width:45%;}
.area_md .tab_cont .img_box img{width:100%; height:100%; object-fit:cover;}
.area_md .tab_cont .pr_wrap{position:relative; padding:80px 100px; width:55%; background:#e6e0d8;}
.area_md .tab_cont .pr_wrap h3{margin-bottom:50px; font-weight:600; font-family:'Cormorant Infant', serif; color:#21201e; font-size:25px; text-align:center;}
.area_md *[data-shop-list="default"]{flex-wrap:nowrap !important;}
.area_md *[data-shop-list="default"] > li{margin-bottom:0 !important;}
.area_md .control{display:flex; justify-content:space-between; position:absolute; top:10px; left:0; width:100%;}


/* insta */
.area_insta{text-align:center;}
.area_insta > a{display:inline-block; margin:10px 0 70px; font-family:'Cormorant Infant', serif; font-weight:500; font-size:18px; color:#21201e; transition:0.3s ease;}
.area_insta > a:hover{opacity:0.6;}
.area_insta > a img{margin-right:15px; width:24px;}
.area_insta ul{display:flex;}
.area_insta ul li{width:calc(100% / 4);}
.area_insta ul li a{width:100%;}
.area_insta ul li a img{width:100%;}



@media screen and (max-width:1600px){
    .area_visual .swiper-slide .box{left:2%}
    
    .area_event .box{padding:50px;}
    
    .area_md .tab_cont .pr_wrap{padding:50px;}
    .area_md .tab_cont .img_box{width:40%;}
    .area_md .tab_cont .pr_wrap{width:60%;}
}

@media screen and (max-width:1024px){
    p{font-size:15px;}
    .btn_more{width:150px; height:150px;}
    #content > div[class^="area_"]{margin-top:100px;}
    #content h2.tit{font-size:35px; margin-bottom:30px;}
    #content .swiper-button-prev img,
    #content .swiper-button-next img{width:45px;}
    
    .area_visual .swiper-slide .box{top:16%;}
    .area_visual .swiper-slide .box h3{font-size:24px;}
    .area_visual .swiper-slide .box h2{margin-bottom:35px; font-size:60px;}
    .area_visual .swiper-slide .box h4{margin-bottom:15px; font-size:20px;}
    .area_visual .btn_more{position:relative; right:auto; bottom:auto; margin-top:50px;}
    .area_visual .control{left:2%; bottom:50px;}
    .area_visual .swiper-slide .bg-next{right:2%; bottom:50px;}
    .area_visual .swiper-slide .bg.mo,
    .area_visual .swiper-slide .bg-next.mo{display:block;}
    .area_visual .swiper-slide .bg.pc,
    .area_visual .swiper-slide .bg-next.pc{display:none;}
    
    .area_best .control{top:-64px;}
    
    .area_about .box{padding:80px 2%;}
    .area_about .box h2{margin-bottom:25px; font-size:30px;}
    .area_about .box .btn_about{margin-top:50px; font-size:16px;}
    .area_about .box .btn_about i{margin:8px 0 0 14px; width:35px;}
    
    .area_look .txt_box{position:relative; top:0; text-align:center;}
    .area_look h2{font-size:70px;}
    .area_look p{width:100%;}
    .area_look p > br:last-child{display:none;}
    .area_look .img_box_pc{display:block; margin-top:50px;}
    .area_look .img_box_pc .img01,
    .area_look .img_box_pc .img03{display:none;}
    .area_look .img_box_pc .img02{margin:auto; width:64%;}
    .area_look .img_box .img02 .btn_more{right:-74px; top:auto; bottom:-99px;}
    .area_look .img_box_mo{display:flex; margin-top:65px;}
    .area_look .img_box_mo .img01{margin-top:0; padding-right:0; width:53%;}
    .area_look .img_box_mo .img03{margin-top:0; width:40%;}
    
    .area_event .box{height:560px; padding:50px 30px;}
    .area_event .box .txt_box > span{margin-bottom:12px; font-size:18px;}
    .area_event .box .txt_box h2{margin-bottom:3px; font-size:30px;}
    .area_event .box .txt_box h3{font-size:17px;}
    .area_event .box .txt_box p{margin-top:34px;}
    .area_event .box > span{font-size:30px;}
    
    .area_md .btn_wrap .tab_btn{margin-bottom:40px;}
    .area_md .btn_wrap .tab_btn li+li{margin-left:50px;}
    .area_md .btn_wrap .tab_btn li a{font-size:16px;}
    .area_md .tab_cont > div{flex-direction:column-reverse;}
    .area_md .tab_cont .img_box{width:100%;}
    .area_md .tab_cont .pr_wrap{padding:50px 30px; width:100%;}
    .area_md .tab_cont .pr_wrap h3{margin-bottom:30px; font-size:18px;}
    .area_md .control{top:7px;}
    
    .area_insta > a{margin:5px 0 50px; font-size:16px;}
    .area_insta > a img{margin-right:10px; margin-top:1px; width:20px;}
    .area_insta ul{flex-wrap:wrap;}
    .area_insta ul li{width:calc(100% / 2);}
}


@media screen and (max-width:767px){
    p{font-size:14px;}
    .btn_more{width:100px; height:100px;}
    .btn_more > img{width:30px;}
    #content > div[class^="area_"]{margin-top:80px;}
    #content h2.tit{margin-bottom:15px; font-size:30px;}
    #content .swiper-button-prev img, 
    #content .swiper-button-next img{width:30px;}
    
    .area_visual .swiper-slide .box h3{font-size:18px;}
    .area_visual .swiper-slide .box h2{margin-bottom:25px; font-size:40px;}
    .area_visual .swiper-slide .box h4{margin-bottom:10px; font-size:16px;}
    .area_visual .btn_more{margin-top:30px;}
    .area_visual .control{width:200px;}
    
    .area_best .control{top:-38px;}
    .area_best .swiper-button-prev{margin-right:20px;}
    
    .area_about .box{padding:60px 2%;}
    .area_about .box h2{margin-bottom:15px; font-size:20px;}
    .area_about .box .btn_about{margin-top:25px; font-size:14px;}
    .area_about .box .btn_about i{margin:8px 0 0 8px; width:30px;}
    
    .area_look h2{font-size:40px;}
    .area_look .img_box_pc{margin-top:35px;}
    .area_look .img_box_pc .img02{width:70%;}
    .area_look .img_box .img02 .btn_more{bottom:-68px; right:-38px;}
    .area_look .img_box .img03 img{border-top-left-radius:100px;}
    .area_look .img_box .img01 img{border-bottom-right-radius:100px;}
    
    .area_event{flex-direction:column;}
    .area_event .box{padding:30px 2%; width:100% !important; height:70px;}
    .area_event .box.active{height:400px;}
    .area_event .box > span{font-size:20px; transform:translate(-50%,-50%) rotate(0);}
    .area_event .box .txt_box > span{margin-bottom:10px; font-size:15px;}
    .area_event .box .txt_box h2{font-size:24px;}
    .area_event .box .txt_box h3{font-size:15px;}
    .area_event .box .txt_box p{margin-top:25px;}
    
    .area_md .btn_wrap .tab_btn{margin-bottom:25px;}
    .area_md .btn_wrap .tab_btn li+li{margin-left:20px;}
    .area_md .btn_wrap .tab_btn li a{font-size:14px;}
    .area_md .tab_cont .pr_wrap h3{margin-bottom:20px; font-size:16px;}
    .area_md .control{top:8px;}
    .area_md .tab_cont .pr_wrap{padding:30px 2%;}
    
    .area_insta > a{margin-bottom:30px; font-size:15px;}
}



@media screen and (max-width:580px){
    .area_visual .swiper-slide .box p > br{display:none;}
    .area_look p > br{display:none;}
    .area_event .box .txt_box p > br{display:none;}
}