/* BASIC css start */
#overlay_layer {
  display: none;
}

#layout_header{
  z-index:9999;
}

button img {
  display: block;
}

.wrap {
  position: relative;
  width: 100%;
  overflow:hidden;
  /*margin-top:54px;*/
}
.wrap * {
  font-family: YoonGothic !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
    background:transparent;
}

.wrap a{display:block; margin:0 auto;}

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

/*slider next,prev btn*/
.slideWrap .swiper-button-next, .slideWrap .swiper-button-prev{width:15px; height:15px; top:36vw; z-index:9;}
.slideWrap .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY9_8-arrwR.png") no-repeat top center / cover; right:-21px;}
.slideWrap .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY9_8-arrwL.png") no-repeat top center / cover; left:-21px;}
.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{width:100%; bottom:-30px !important; left:0px !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet{width:4px; height:4px; background:#fff; border:none; margin:0 6px !important; opacity:0.2 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important; background:#fff;}

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

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

/*header*/
#header{text-align:center; display:flex; flex-wrap:wrap; overflow:hidden; position:relative; justify-content:center; opacity:1; /*height:27px;*/ height:auto; width:100%; background:#222222; border:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#header.fixed{position:fixed; top:54px; left:0; z-index:9999;}
#header a.menu{position:relative; margin:0px; /*height:27px;*/ width:50%;}
#header a.menu img {/*height:27px;*/ width:100%;}
#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;}

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

.wrap .opacs{opacity:0; transition:all 2s ease;}

/*intro*/
#intro{width:100%; height:592px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY10_1-bg-m.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#intro .date{width:318px; position:absolute; top:18px; left:calc(50% - 318px/2);}
#intro .title{width:313px; position:absolute; top:59px; left:calc(50% - 313px/2);}
#intro .bgfront{width:100%; position:absolute; bottom:0; left:0; z-index:1;}
#intro .bunny{width:280px; position:absolute; top:273px; left:calc(50% - 280px/2); z-index:2;}

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

@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:324px; position:absolute; top:525px; left:calc(50% - 324px/2); z-index:2;}
#intro .leaf1{width:48px; position:absolute; top:326px; left:calc(50% - 48px/2 - 150px); z-index:2;}
#intro .leaf2{width:46px; position:absolute; top:327px; left:calc(50% - 46px/2 + 150px); z-index:2;}
#intro .leaf3{width:55px; position:absolute; top:425px; left:calc(50% - 55px/2 + 170px); z-index:2;} 

/*box2*/
#box2{width:100%; height:769px; background:#ffc03f; position:relative; overflow:hidden;}
#box2 .title{width:287px; position:absolute; top:56px; left:calc(50% - 287px/2);}
#box2 .gift{width:326px; position:absolute; top:198px; left:calc(50% - 326px/2); z-index:2;}
#box2 .leaf{width:57px; position:absolute; top:580px; left:calc(50% - 57px/2 - 157px); z-index:3;}
#box2 .acorn{width:25px; position:absolute; top:425px; left:calc(50% - 25px/2 + 160px); z-index:3;}
#box2 .tree1{width:78px; position:absolute; bottom:-12px; left:calc(50% - 78px/2 - 125px);}
#box2 .tree2{width:178px; position:absolute; bottom:-20px; left:calc(50% - 178px/2 + 123px);}

/*box3*/
#box3{width:100%; height:841px; background:#f1d2a9; position:relative; overflow:hidden;}
#box3 .title{width:307px; position:absolute; top:68px; left:calc(50% - 307px/2);}
#box3 .cnt{width:316px; position:absolute; top:183px; left:calc(50% - 316px/2);}
#box3 a.prd{width:327px; height:180px; position:absolute; top:598px; left:calc(50% - 327px/2); z-index:2;}
#box3 a.prd img{width:100%;}
#box3 .leaf2{width:57px; position:absolute; top:552px; left:calc(50% - 57px/2 - 156px);}

/*box4*/
#box4{width:100%; height:760px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY10_4-bg-m.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box4 .title{width:299px; position:absolute; top:64px; left:calc(50% - 299px/2);}
#box4 .coupons{width:355px; position:absolute; top:55px; left:calc(50% - 355px/2);}
#box4 .bgfront{width:100%; height:365px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY10_4-bg-front-m.png") no-repeat center top / cover; position:absolute; bottom:0; left:0; z-index:2;}
#box4 a.btn{width:327px; height:55px; position:absolute; top:482px; left:calc(50% - 327px/2); z-index:3; background:transparent;}
#box4 a.btn img{width:100%;}
#box4 .info{width:279px; position:absolute; top:578px; left:calc(50% - 279px/2); z-index:3;}
#box4 .leaf1{width:42px; position:absolute; top:226px; left:calc(50% - 42px/2 - 140px); z-index:3;}
#box4 .leaf2{width:26px; position:absolute; top:197px; left:calc(50% - 26px/2 + 130px); z-index:3;}

/*box5*/
#box5{width:100%; height:740px; background:#f5d3a9; position:relative; overflow:hidden;}
#box5 .title{width:301px; position:absolute; top:68px; left:calc(50% - 301px/2);}
#box5 .cnt{width:335px; position:absolute; top:167px; left:calc(50% - 335px/2);}
#box5 a.prd{width:327px; height:180px; position:absolute; top:498px; left:calc(50% - 327px/2); z-index:2;}
#box5 a.prd img{width:100%;}
#box5 .leaf1{width:56px; position:absolute; top:348px; left:calc(50% - 56px/2 + 137px);}
#box5 .leaf2{width:49px; position:absolute; top:240px; left:calc(50% - 49px/2 - 143px);}

/*box6*/
#box6{width:100%; height:608px; background:#e5b27d; position:relative; overflow:hidden;}
#box6 .title{width:246px; position:absolute; top:67px; left:calc(50% - 246px/2);}
#box6 ul{width:307px; height:28px; position:absolute; top:182px; left:calc(50% - 307px/2); display:flex; flex-wrap:wrap;}
#box6 ul > li{position:relative; margin:0 1px; cursor:pointer;}
#box6 ul > li img{width:auto; height:28px;}
#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:326px; height:224px; position:absolute; top:239px; left:calc(50% - 326px/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:327px; height:55px; position:absolute; top:489px; left:calc(50% - 327px/2); background:transparent;}
#box6 a.btn img{width:100%;}

/*box7*/
#box7{width:100%; height:auto; padding:70px 0; background:#343434; position:relative; overflow:hidden;}
#box7 img{width:259px;}





/* BASIC css end */