/* 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:-81px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-81px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-81px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-81px; 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:25%;}
#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:245px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY9_1-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#intro .title{width:245px; position:absolute; top:27px; left:calc(50% - 245px/2);}
#intro .rabbit{width:143px; position:absolute; bottom:0px; left:calc(50% - 143px/2 - 0px);}
#intro .rabbit .rabbitbody{width:100%;}
#intro .rabbit .leftarm{
    width:41px; height:22px; position:absolute; top:67px; left:0px;
    transform-origin: 80% 40%;
    transform: rotate(0deg);
    animation:leftArmMotion 7s ease-in-out infinite;
}

#intro .rabbit .leftarm .arm{width:100%;}
#intro .rabbit .leftarm .prd{width:60px; position:absolute; top:2px; left:-31px;}
#intro .rabbit .rightarm{
    width:24px; height:38px; position:absolute; top:42px; right:22px;
    transform-origin: 34% 79%;
    transform: rotate(5deg);
    animation:rightArmMotion 7s ease-in-out infinite;
}

#intro .rabbit .rightarm .arm{width:100%;}
#intro .rabbit .rightarm .prd{width:62px; position:absolute; top:-28px; right:-41px; animation:rightPrdMotion 7s ease-in-out infinite;}
#intro .txt1{width:54px; position:absolute; top:190px; left:calc(50% - 54px/2 - 110px); animation:txt1Motion 7s ease-in-out infinite;}
#intro .txt2{width:63px; position:absolute; top:191px; left:calc(50% - 63px/2 + 88px); animation:txt2Motion 7s ease-in-out infinite;}

/* 오른쪽 제품 3회 작아졌다 커지기 */
@keyframes rightPrdMotion {
    /* 1회 */
    0% {transform:scale(1);}
    4.76% {transform:scale(0.85);}
    9.52% {transform:scale(1);}
    /* 2회 */
    14.28% {transform:scale(0.85);}
    19.04% {transform:scale(1);}
    /* 3회 */
    23.8% {transform:scale(0.85);}
    28.57% {transform:scale(1);}
    /* 이후 유지 */
    100% {transform:scale(1);}
}

/* 오른팔 */
@keyframes rightArmMotion {
    /* 제품이 3번 움직이는 동안 대기 */
    0%,
    28.57% {transform:rotate(5deg);}
    /* 2~3초 : 팔 이동 */
    42.86% {transform:rotate(86deg);}
    /* 3초 유지 */
    85.71% {transform:rotate(86deg);}
    /* 원위치 */
    100% {transform:rotate(5deg);}
}

/* 왼팔 */
@keyframes leftArmMotion {
    /* 제품이 3번 움직이는 동안 대기 */
    0%,
    28.57% {transform:rotate(0deg);}
    /* 오른팔과 동시에 이동 */
    42.86% {transform:rotate(65deg);}
    /* 3초 유지 */
    85.71% {transform:rotate(65deg);}
    /* 원위치 */
    100% {transform:rotate(0deg);}
}

@keyframes txt2Motion {
    /* rightarm이 5deg로 있는 동안 */
    0%,
    28.57% {opacity:1;}
    /* rightarm 5deg → 86deg 이동할 때 fade out */
    42.86% {opacity:0;}
    /* rightarm이 86deg로 유지되는 동안 */
    85.71% {opacity:0;}
    /* rightarm 86deg → 5deg 복귀할 때 fade in */
    100% {opacity:1;}
}

@keyframes txt1Motion {
    /* leftarm이 0deg로 있는 동안 */
    0%,
    28.57% {opacity:0;}
    /* leftarm 0deg → 65deg 이동할 때 fade in */
    42.86% {opacity:1;}
    /* leftarm이 65deg로 유지되는 동안 */
    85.71% {opacity:1;}
    /* leftarm 65deg → 0deg 복귀할 때 fade out */
    100% {opacity:0;}
}


/*box2*/
#box2{width:100%; height:1214px; background:#fffced; position:relative; overflow:hidden;}
#box2 .title{width:175px; position:absolute; top:34px; left:calc(50% - 175px/2);}
#box2 .subtitle1{width:103px; position:absolute; top:70px; left:calc(50% - 103px/2);}
#box2 .cnts{width:131px; position:absolute;}

#box2 .cnt1{top:117px; left:calc(50% - 131px/2 - 73px);}
#box2 .cnt2{top:117px; left:calc(50% - 131px/2 + 73px);}
#box2 .cnt3{top:315px; left:calc(50% - 131px/2 - 73px);}
#box2 .cnt4{top:315px; left:calc(50% - 131px/2 + 73px);}

#box2 .subtitle2{width:68px; position:absolute; top:526px; left:calc(50% - 68px/2);}
#box2 .coupon{width:277px; position:absolute; top:573px; left:calc(50% - 277px/2);}
#box2 a.btn{width:342px; height:27px; position:absolute; top:676px; left:calc(50% - 342px/2);}
#box2 a.btn > img{width:100%;}

#box2 .info{width:105px; position:absolute; top:710px; left:calc(50% - 105px/2);}
#box2 .subtitle3{width:148px; position:absolute; top:742px; left:calc(50% - 148px/2);}
#box2 .prds{width:342px; height:123px; position:absolute; top:0; left:calc(50% - 342px/2);}
#box2 .prds > img{width:100%;}
#box2 .prd1{top:790px;}
#box2 .prd2{top:924px;}
#box2 .prd3{top:1057px;}

/*box3*/
#box3{width:100%; height:auto; padding:34px 0 36px; background:#ffffff; position:relative; overflow:hidden;}
#box3 .title{width:127px; margin-bottom:16px;}
#box3 ul.tabWrap{width:342px; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 auto 10px;}
#box3 ul.tabWrap > li{width:82px; position:relative; cursor:pointer;}
#box3 ul.tabWrap > li img{width:100%;}
#box3 ul.tabWrap > li img.on{position:absolute; top:0; left:0; opacity:0;}
#box3 ul.tabWrap > li.select img.on{opacity:1;}

#box3 .days{width:342px; position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 auto;}
#box3 .days a.prds{width:168px; height:213px; margin:0;}
#box3 .days a.prds img{width:100%;}

#box3 .day3 a.prd1,
#box3 .day3 a.prd2{margin-bottom:7px}
#box3 .day3 a.prd3{width:342px; height:123px;}
#box3 .day4 a.prd1{width:342px; height:123px;}

#box3 .day1{display:flex;}
#box3 .day2,
#box3 .day3,
#box3 .day4{display:none;}

/*box4*/
#box4{width:100%; height:811px; background:#fff6ee; position:relative; overflow:hidden;}
#box4 .title{width:179px; position:absolute; top:32px; left:calc(50% - 179px/2);}

#box4 ul.tabWrap{width:342px; display:flex; flex-wrap:wrap; justify-content:space-between; position:absolute; top:89px; left:calc(50% - 342px/2);}
#box4 ul.tabWrap > li{width:110px; cursor:pointer;}
#box4 ul.tabWrap > li img{width:100%;}
#box4 .subtitle{width:342px; position:absolute; top:151px; left:calc(50% - 342px/2);}
#box4 .txt{width:242px; position:absolute; top:199px; left:calc(50% - 242px/2);}
#box4 .cnt{width:369px; position:absolute; top:274px; left:calc(50% - 369px/2);}
#box4 .deco{width:48px; position:absolute; top:240px; left:0; display:none;}

/*box5*/
#box5{width:100%; height:1096px; background:#ffffff; position:relative; overflow:hidden;}
#box5 .title{width:253px; position:absolute; top:27px; left:calc(50% - 253px/2);}
#box5 .cnt{width:100%; position:absolute; top:79px; left:calc(50% - 390px/2);}

/*box6*/
#box6{width:100%; height:694px; background:#fff4e3; position:relative; overflow:hidden;}
#box6 .title{width:102px; position:absolute; top:27px; left:calc(50% - 102px/2);}
#box6 .cnt{width:390px; position:absolute; top:85px; left:calc(50% - 390px/2);}

/*box7*/
#box7{width:100%; height:993px; background:#ffffff; position:relative; overflow:hidden;}
#box7 .subtitle1{width:342px; position:absolute; top:34px; left:calc(50% - 342px/2);}
#box7 .cnt1{width:342px; position:absolute; top:73px; left:calc(50% - 342px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box7 .cnt1 a.prds{width:168px; height:213px; margin:0;}
#box7 .cnt1 a.prds > img{width:100%;}
#box7 .cnt1 a.prd1,
#box7 .cnt1 a.prd2{margin-bottom:7px;}
#box7 .subtitle2{width:342px; position:absolute; top:540px; left:calc(50% - 342px/2);}
#box7 .cnt2{width:342px; position:absolute; top:578px; left:calc(50% - 342px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box7 .cnt2 a.prds{width:168px; height:186px; margin:0; pointer-events:none;}
#box7 .cnt2 a.prd1,
#box7 .cnt2 a.prd2{margin-bottom:7px;}
#box7 .cnt2 a.prds > img{width:100%;}

/*box8*/
#box8{width:100%; height:490px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY9_8-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box8 .title{width:213px; position:absolute; top:35px; left:calc(50% - 213px/2);}
#box8 .slideWrap{width:342px; position:abosolute; top:93px; left:calc(50% - 342px/2);}
#box8 .slideWrap #box8Slider{}
#box8 .slideWrap #box8Slider .swiper-container{}
#box8 .slideWrap #box8Slider .swiper-container > ul{}
#box8 .slideWrap #box8Slider .swiper-container > ul > li{}
#box8 .slideWrap #box8Slider .swiper-container > ul > li a{width:100%; height:123px; position:absolute; top:0; left:0;}
#box8 .slideWrap #box8Slider .swiper-container > ul > li a:nth-child(1){background:rgba(120,180,210,0);}
#box8 .slideWrap #box8Slider .swiper-container > ul > li a:nth-child(2){background:rgba(80,210,225,0); top:130px;}
#box8 .slideWrap #box8Slider .swiper-container > ul > li img{width:100%;}

#box8 .slideWrap #box8Slider .swiper-pagination{top:263px !important;}
#box8 .slideWrap #box8Slider .swiper-button-prev{}
#box8 .slideWrap #box8Slider .swiper-button-next{}

#box8 .deco{width:77px; position:absolute; top:333px; left:calc(50% - 77px/2 - 152px); z-index:0;}

/*box9*/
#box9{width:100%; height:832px; background:#ffffff; position:relative; overflow:hidden;}
#box9 .title{width:210px; position:absolute; top:34px; left:calc(50% - 210px/2);}
#box9 ul.tabWrap{width:342px; position:absolute; top:89px; left:calc(50% - 342px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box9 ul.tabWrap > li{width:167px; position:relative; cursor:pointer;}
#box9 ul.tabWrap > li img{width:100%;}
#box9 ul.tabWrap > li img.on{position:absolute; top:0; left:0; opacity:0;}
#box9 ul.tabWrap > li.select img.on{opacity:1;}

#box9 .slideWrap{width:342px; position:absolute; top:127px; left:calc(50% - 342px/2);}
#box9 .slideWrap #box9Slider{}
#box9 .slideWrap #box9Slider .swiper-container{}
#box9 .slideWrap #box9Slider .swiper-container ul{}
#box9 .slideWrap #box9Slider .swiper-container ul > li{}
#box9 .slideWrap #box9Slider .swiper-container ul > li a{width:168px; height:213px; position:absolute; top:0; left:0;}
#box9 .slideWrap #box9Slider .swiper-container ul > li a:nth-child(1){background:rgba(210,80,100,0);}
#box9 .slideWrap #box9Slider .swiper-container ul > li a:nth-child(2){background:rgba(10,180,200,0); left:175px;}
#box9 .slideWrap #box9Slider .swiper-container ul > li a:nth-child(3){background:rgba(150,210,120,0); top:220px;}
#box9 .slideWrap #box9Slider .swiper-container ul > li a:nth-child(4){background:rgba(225,210,10,0); top:220px; left:175px;}
#box9 .slideWrap #box9Slider .swiper-container ul > li img{width:100%;}

#box9 .slideWrap #box9Slider .swiper-pagination{top:443px !important;}
#box9 .slideWrap #box9Slider .swiper-pagination .swiper-pagination-bullet{background:#fc581b; opacity:0.2;}

#box9 .slideWrap #box9Slider .swiper-button-prev,
#box9 .slideWrap #box9Slider .swiper-button-next{top:59vw;}

#box9 .slideWrap #box9Slider .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY9_9-arrwL.png") no-repeat center / cover;}
#box9 .slideWrap #box9Slider .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY9_9-arrwR.png") no-repeat center / cover;}

#box9 .btns{width:342px; height:27px; position:absolute; top:0; left:calc(50% - 342px/2);}
#box9 .btns img{width:100%;}
#box9 .btn1{top:595px;}
#box9 .btn2{top:633px;}
#box9 .btn3{top:670px;}








/* BASIC css end */