/* BASIC css start */
html {
  scroll-behavior: smooth;
}

#overlay_layer {
  display: none;
}

/* max-width 초기화 */
#layout_body {
  max-width: none !important;
}
.top-area {
  /*max-width: 1140px;*/
  margin: 0 auto;
}
.header__line-banner{
    margin: 0 auto;
}
.wrap {
  position: relative;
  width: 100%;
  min-width: 1140px;
}
.wrap * {
  font-family: YoonGothic !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
}
 
.wrap a{display:block; margin:0 auto;}

/*-------------------------------------*/

/*slider next,prev btn*/
.slideWrap .swiper-button-next, .slideWrap .swiper-button-prev, .swiper-button-next, .swiper-button-prev{width:42px; height:42px; top:50%;}
.slideWrap .swiper-button-next, .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY9_8-arrwR.png") no-repeat top center / contain; right:-60px;}
.slideWrap .swiper-button-prev, .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY9_8-arrwL.png") no-repeat top center / contain; left:-60px;}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after,
.swiper-button-next:after, .swiper-button-prev:after{display:none;}

/*slider pagination*/
.slideWrap{position:relative;}
.slideWrap .swiper-pagination, .swiper-pagination{width:100%; top:0px !important; left:0px !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet, .swiper-pagination .swiper-pagination-bullet{width:10px; height:10px; background:#fff; border:none; margin:0 10px !important; opacity:0.2 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, 
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important; background:#fff;}


/*-------------------------------------*/

/*target point*/
.posrel{position:relative;}
#tar1{position:absolute; top:-156px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-154px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-154px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-154px; left:0; display:block; width:100%; height:0;}

/*header*/
#header{text-align:center; display:flex; overflow:hidden; position:relative; justify-content:center; position:static; opacity:1; height:calc(146px*0.8); width:100%; background:#dfbba8;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative; margin:0;}
#header a.menu img {height:calc(146px*0.8);}
#header a.menu img:nth-child(2){position:absolute; top:0; left:0; opacity:0;}
#header a.menu.select img:nth-child(1){opacity:0;}
#header a.menu.select img:nth-child(2){opacity:1;}
#header a.menu:hover img:nth-child(2){opacity:1;}

/*-------------------------------------*/

.sizedown50{transform: scale(0.5); transform-origin: top left; width:200%; height:200%;}
.sizedown80{transform: scale(0.8); transform-origin: top left; width:125%; height:125%;}

/*intro*/
#intro{width:100%; height:calc(1215px*0.8); background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY10_1-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#intro .date{width:1800px; position:absolute; top:49px; left:calc(50% - 1800px/2); z-index:2;}
#intro .title{width:688px; position:absolute; top:130px; left:calc(50% - 688px/2); z-index:2;}
#intro .bgfront{width:100%; height:617px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY10_1-bg-front.png") no-repeat center top / cover; position:absolute; bottom:0; left:0; z-index:1;}
#intro .bunny{width:615px; position:absolute; top:511px; left:calc(50% - 615px/2); z-index:2;}

#intro .prd1{
    width:338px; position:absolute; top:448px; left:calc(50% - 338px/2 - 370px); 
    z-index:3; transform-origin: right bottom; transition:all .5s ease;
    animation:mainAni1 3s infinite ease-in-out; 
    z-index:2;
}
#intro .prd2{
    width:333px; position:absolute; top:448px; left:calc(50% - 333px/2 + 340px); 
    z-index:3; transform-origin: left bottom; transition:all .5s ease; transform:scale(0.7);
    animation:mainAni2 3s infinite ease-in-out;
    z-index:2;
}

@keyframes mainAni1{
    0%{transform:scale(1);}
    50%{transform:scale(0.7);}
    100%{transform:scale(1);}
}

@keyframes mainAni2{
    0%{transform:scale(0.7);}
    50%{transform:scale(1);}
    100%{transform:scale(0.7);}
}



#intro .subtitle{width:712px; position:absolute; top:1030px; left:calc(50% - 712px/2); z-index:2;}

#intro .leaf1{width:105px; position:absolute; top:663px; left:calc(50% - 105px/2 - 444px); z-index:2;}
#intro .leaf2{width:102px; position:absolute; top:653px; left:calc(50% - 102px/2 + 410px); z-index:2;}
#intro .leaf3{width:121px; position:absolute; top:905px; left:calc(50% - 121px/2 + 500px); z-index:2;} 

/*box2*/
#box2{width:100%; height:calc(1691px*0.8); background:#ffc03f; position:relative; overflow:hidden;}
#box2 .title{width:543px; position:absolute; top:151px; left:calc(50% - 543px/2);}
#box2 .gift{width:718px; position:absolute; top:435px; left:calc(50% - 718px/2);}
#box2 .leaf{width:126px; position:absolute; top:1126px; left:calc(50% - 126px/2 - 490px);}
#box2 .acorn{width:56px; position:absolute; top:696px; left:calc(50% - 56px/2 + 460px);}
#box2 .tree1{width:391px; position:absolute; bottom:-30px; left:calc(50% - 391px/2 - 660px);}
#box2 .tree2{width:392px; position:absolute; bottom:-12px; left:calc(50% - 392px/2 + 670px);}

/*box3*/
#box3{width:100%; height:calc(1840px*0.8); background:#f1d2a9; position:relative; overflow:hidden;}
#box3 .title{width:675px; position:absolute; top:150px; left:calc(50% - 675px/2);}
#box3 .cnt{width:754px; position:absolute; top:328px; left:calc(50% - 754px/2);}
#box3 a.prd{width:819px; height:395px; position:absolute; top:1306px; left:calc(50% - 819px/2); z-index:2;}
#box3 a.prd img{width:100%;}
#box3 .leaf1{width:83px; position:absolute; top:730px; left:calc(50% - 83px/2 + 400px);}
#box3 .leaf2{width:126px; position:absolute; top:1216px; left:calc(50% - 126px/2 - 420px);}

/*box4*/
#box4{width:100%; height:calc(1550px*0.8); background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY10_4-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box4 .title{width:717px; position:absolute; top:140px; left:calc(50% - 717px/2);}
#box4 .coupons{width:829px; position:absolute; top:408px; left:calc(50% - 829px/2);}
#box4 .bgfront{width:100%; height:676px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY10_4-bg-front.png") no-repeat center top / cover; position:absolute; bottom:0; left:0; z-index:2;}
#box4 a.btn{width:819px; height:121px; position:absolute; top:1061px; left:calc(50% - 819px/2); z-index:3;}
#box4 a.btn img{width:100%;}
#box4 .info{width:1058px; position:absolute; top:1272px; left:calc(50% - 1058px/2); z-index:3;}
#box4 .leaf1{width:92px; position:absolute; top:497px; left:calc(50% - 9px/2 - 340px); z-index:3;}
#box4 .leaf2{width:58px; position:absolute; top:433px; left:calc(50% - 58px/2 + 290px); z-index:3;}

/*box5*/
#box5{width:100%; height:calc(1629px*0.8); background:#f5d3a9; position:relative; overflow:hidden;}
#box5 .title{width:663px; position:absolute; top:150px; left:calc(50% - 663px/2);}
#box5 .cnt{width:736px; position:absolute; top:364px; left:calc(50% - 736px/2);}
#box5 a.prd{width:819px; height:395px; position:absolute; top:1095px; left:calc(50% - 819px/2); z-index:2;}
#box5 a.prd img{width:100%;}
#box5 .leaf1{width:125px; position:absolute; top:863px; left:calc(50% - 125px/2 - 560px);}
#box5 .leaf2{width:110px; position:absolute; top:569px; left:calc(50% - 110px/2 + 480px);}

/*box6*/
#box6{width:100%; height:calc(1338px*0.8); background:#e5b27d; position:relative; overflow:hidden;}
#box6 .title{width:542px; position:absolute; top:149px; left:calc(50% - 542px/2);}
#box6 ul{width:713px; height:62px; position:absolute; top:353px; left:calc(50% - 713px/2); display:flex; flex-wrap:wrap;}
#box6 ul > li{position:relative; margin:0 6px; cursor:pointer;}
#box6 ul > li img{width:auto; height:62px;}
#box6 ul > li img.on{position:absolute; top:0; left:0; opacity:0;}
#box6 ul > li.select img.on{opacity:1;}

#box6 .prds{display:none; width:718px; height:492px; position:absolute; top:479px; left:calc(50% - 718px/2);}
#box6 .prd1{display:block;}
#box6 .prds img{width:100%;}
#box6 .prds a{display:block; width:50%; height:100%; position:absolute; top:0; left:0;}
#box6 .prds a:nth-child(1){left:0; /*background:yellow; opacity:0.5;*/}
#box6 .prds a:nth-child(2){left:50%; /*background:green; opacity:0.5;*/}
#box6 a.btn{width:817px; height:121px; position:absolute; top:1077px; left:calc(50% - 817px/2);}
#box6 a.btn img{width:100%;}

/*box7*/
#box7{width:100%; height:auto; padding:120px 0; background:#343434; position:relative; overflow:hidden;}
#box7 img{width:calc(1084px*0.8);}


/* BASIC css end */