/* 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:14px; height:15px; top:29vw; z-index:9;}
.slideWrap .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwR.png") no-repeat top center / cover; right:-18px;}
.slideWrap .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_arrwL.png") no-repeat top center / cover; left:-18px;}
.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:8px; height:8px; background:#ffca88; border:none; margin:0 3px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important; background:#ff8d00;}

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

/*target point*/
.posrel{position:relative;}
#tar1{position:absolute; top:-89px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-89px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-89px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-89px; 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:35px; width:100%; background:#34beff; 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:0 2px; height:35px;}
#header a.menu img {height:35px;}
#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:360px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY8_1-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#intro .bubble{width:90px; position:absolute; top:35px; left:calc(50% - 90px/2); z-index:2;}
#intro .title1{width:155px; position:absolute; top:64px; left:calc(50% - 155px/2); z-index:3; animation: fadeOut 2s ease 3s forwards;}
#intro .title2{width:155px; position:absolute; top:64px; left:calc(50% - 155px/2); z-index:2; opacity:0; animation: fadeIn 2s ease 3s infinite;}

#intro .info{width:154px; position:absolute; top:154px; left:calc(50% - 154px/2); z-index:2;}
#intro .prd{width:275px; position:absolute; top:195px; left:calc(50% - 275px/2); z-index:2; animation: swing 0.7s ease-in-out infinite alternate;}
#intro .deco{width:388px; position:absolute; top:21px; left:calc(50% - 388px/2); z-index:1;}

@keyframes swing {
    0% {transform: translateX(-3px) rotate(-0.5deg);}
    100% {transform: translateX(3px) rotate(0.5deg);}
}

@keyframes fadeIn {
    0% {opacity: 0.5;}
    50% {opacity: 1;}
    100% {opacity: 0.5;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

/*box2*/
#box2{width:100%; height:550px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY8_2-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box2 .title{width:122px; position:absolute; top:41px; left:calc(50% - 122px/2);}
#box2 .subtitle1{width:105px; position:absolute; top:67px; left:calc(50% - 105px/2);}
#box2 .coupon{width:234px; position:absolute; top:112px; left:calc(50% - 234px/2);}
#box2 .cntWrap{width:237px; height:196px; position:absolute; top:249px; left:calc(50% - 237px/2);}
#box2 .cntWrap .tag{width:78px; position:absolute; top:-16px; right:-33px;}
#box2 .cntWrap .cnt{width:100%;}
#box2 a.btns{width:252px; height:40px; position:absolute; top:0; left:calc(50% - 252px/2);}
#box2 a.btns img{width:100%;}
#box2 a.btn1{top:172px;}
#box2 a.btn2{top:457px;}
#box2 .info{width:123px; position:absolute; top:500px; left:calc(50% - 123px/2);}

/*box3*/
#box3{width:100%; height:233px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY8_3-bg.jpg") no-repeat center / cover; position:relative; overflow:hidden;}
#box3 .title{width:88px; position:absolute; top:45px; left:calc(50% - 88px/2); z-index:2;}
#box3 .bag{width:78px; position:absolute; top:83px; left:calc(50% - 78px/2); z-index:2; animation: zoomInOut 2s ease-in-out infinite;}
#box3 .info{width:88px; position:absolute; top:177px; left:calc(50% - 88px/2); z-index:2;}
#box3 .cnt{width:234px; position:absolute; top:10px; left:calc(50% - 234px/2); z-index:1;}

@keyframes zoomInOut {
    0% {transform:scale(1);}
    50% {transform:scale(1.05);}
    100% {transform:scale(1);}
}

/*box4*/
#box4{width:100%; height:430px; background:#ffed9e; position:relative; overflow:hidden;}
#box4 .title{width:116px; position:absolute; top:32px; left:calc(50% - 116px/2);}
#box4 .cntWraps{}
#box4 .cntWrap1{width:251px; height:196px; position:absolute; top:64px; left:calc(50% - 251px/2);}
#box4 .cntWrap2{width:225px; height:128px; position:absolute; top:266px; left:calc(50% - 225px/2);}
#box4 .cntWraps .prd{width:100%;}
#box4 .cntWrap1 .tag{width:78px; position:absolute; top:-6px; right:-26px;}
#box4 .cntWrap2 .tag{width:78px; position:absolute; top:-14px; right:-35px;}
#box4 .cntWrap1 a{background:rgba(200,100,80,0); width:224px; height:169px; position:absolute; top:14px; left:14px;}

/*box5*/
#box5{width:100%; height:533px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY8_5-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box5 .title{width:196px; position:absolute; top:47px; left:calc(50% - 196px/2);}

#box5 ul.tabWrap{width:211px; height:65px; position:absolute; top:86px; left:calc(50% - 211px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box5 ul.tabWrap li{position:relative; width:103px; cursor:pointer;}
#box5 ul.tabWrap li:nth-child(1), 
#box5 ul.tabWrap li:nth-child(2){margin-bottom:4px;}
#box5 ul.tabWrap li img{width:100%; position:absolute; top:0; left:0;}
#box5 ul.tabWrap li .on{opacity:0;}
#box5 ul.tabWrap li.now .on{opacity:1;}
#box5 .cntWrap{width:365px; height:290px; position:absolute; top:186px; left:calc(50% - 365px/2);}

#box5 .cntWrap .day1 .title{width:143px; position:absolute; top:0; left:calc(50% - 143px/2);}
#box5 .cntWrap .day2 .title{width:177px; position:absolute; top:0; left:calc(50% - 177px/2);}
#box5 .cntWrap .day3 .title{width:217px; position:absolute; top:0; left:calc(50% - 217px/2);}
#box5 .cntWrap .day4 .title{width:168px; position:absolute; top:0; left:calc(50% - 168px/2);}
#box5 .cntWrap .days .prds{width:118px; height:188px; position:absolute; top:56px; left:0;}
#box5 .cntWrap .days .prds img{width:100%;}
#box5 .cntWrap .days .prd1{left:calc(50% - 118px/2 - 123px);}
#box5 .cntWrap .days .prd2{left:calc(50% - 118px/2);}
#box5 .cntWrap .days .prd3{left:calc(50% - 118px/2 + 123px);}
#box5 .cntWrap .days a.btns{width:365px; height:30px; position:absolute; bottom:0; left:0;}
#box5 .cntWrap .days a.btns img{width:100%;}
#box5 .cntWrap .days{display:none;}
#box5 .cntWrap .day1{display:block;}


/*box6*/
#box6{width:100%; height:486px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY8_6-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box6 .title{width:168px; position:absolute; top:69px; left:calc(50% - 168px/2);}
#box6 .slideWrap{width:363px; height:276px; position:absolute; top:106px; left:calc(50% - 363px/2);}
#box6 .slideWrap #box6Slider{}
#box6 .slideWrap #box6Slider .swiper-container{}
#box6 .slideWrap #box6Slider .swiper-container ul li img{width:100%;}
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(1) a{width:179px; height:188px; position:absolute; top:87px;}
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(1) a:nth-child(1){background:rgba(200,100,80,0); left:0;}
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(1) a:nth-child(2){background:rgba(100,200,80,0); right:0;}
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(2) a,
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(3) a{width:118px; height:188px; position:absolute; top:87px;}
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(2) a:nth-child(1),
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(3) a:nth-child(1){background:rgba(200,100,80,0); left:0;}
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(2) a:nth-child(2),
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(3) a:nth-child(2){background:rgba(100,200,80,0); left:calc(50% - 118px/2);}
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(2) a:nth-child(3),
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(3) a:nth-child(3){background:rgba(80,100,200,0); right:0;}
#box6 a.btn{width:364px; height:29px; position:absolute; top:399px; left:calc(50% - 364px/2); display:none;}
#box6 a.btn img{width:100%;}
#box6 .slideWrap .swiper-button-next, 
#box6 .slideWrap .swiper-button-prev{top:50vw;}
#box6 .slideWrap .swiper-button-prev{left:-18px;}
#box6 .slideWrap .swiper-button-next{right:-18px;}


/*box7*/
#box7{width:100%; height:383px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY8_7-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box7 .title{width:125px; position:absolute; top:57px; left:calc(50% - 125px/2);}
#box7 .slideWrap{width:363px; height:188px; position:absolute; top:97px; left:calc(50% - 363px/2);}
#box7 .slideWrap #box7Slider{}
#box7 .slideWrap #box7Slider .swiper-container{}
#box7 .slideWrap #box7Slider .swiper-container ul li img{width:100%;}
#box7 .slideWrap #box7Slider .swiper-container ul li a{width:118px; height:188px; position:absolute; top:0;}
#box7 .slideWrap #box7Slider .swiper-container ul li a:nth-child(1){background:rgba(200,100,80,0); left:0;}
#box7 .slideWrap #box7Slider .swiper-container ul li a:nth-child(2){background:rgba(100,200,80,0); left:calc(50% - 118px/2);}
#box7 .slideWrap #box7Slider .swiper-container ul li a:nth-child(3){background:rgba(80,100,200,0); right:0;}
#box7 a.btn{width:364px; height:29px; position:absolute; top:302px; left:calc(50% - 364px/2);}
#box7 a.btn img{width:100%;}


/*box8*/
#box8{width:100%; height:770px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY8_8-bgn.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}

#box8 .title{width:193px; position:absolute; top:49px; left:calc(50% - 193px/2);}
#box8 ul.tagWrap{width:175px; height:30px; position:absolute; top:88px; left:calc(50% - 175px/2);}
#box8 ul.tagWrap li{position:absolute; top:0; left:0; opacity:0;}
#box8 ul.tagWrap li:nth-child(1){opacity:1;}
#box8 ul.tagWrap li img{width:100%;}

#box8 .subtitle{width:206px; position:absolute; top:132px; left:calc(50% - 206px/2);}

#box8 .slideWrap{width:363px; height:188px; position:absolute; top:194px; left:calc(50% - 363px/2);}
#box8 .slideWrap #box8Slider{}
#box8 .slideWrap #box8Slider .swiper-container{}
#box8 .slideWrap #box8Slider .swiper-container ul li{}
#box8 .slideWrap #box8Slider .swiper-container ul li a{width:118px; height:188px; position:absolute; top:0;}
#box8 .slideWrap #box8Slider .swiper-container ul li a:nth-child(1){background:rgba(200,100,80,0); left:0;}
#box8 .slideWrap #box8Slider .swiper-container ul li a:nth-child(2){background:rgba(100,200,80,0); left:calc(50% - 118px/2);}
#box8 .slideWrap #box8Slider .swiper-container ul li a:nth-child(3){background:rgba(80,100,200,0); right:0;}
#box8 .slideWrap #box8Slider .swiper-container ul li img{width:100%;}

#box8 .slideWrap .swiper-pagination{top:-18px !important;}
#box8 .slideWrap .swiper-pagination .swiper-pagination-bullet{width:5px; height:5px; background:#faac8c;}
#box8 .slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#d77261;}

#box8 a.btns{width:365px; height:30px; position:absolute; left:calc(50% - 365px/2);}
#box8 a.btns img{width:100%;}
#box8 a.btn1{top:398px;}
#box8 a.btn2{top:435px;}

/* BASIC css end */