/* 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:80px; /*height:40px;*/ width:100%; background:#222222;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative; margin:0;}
#header a.menu img {height:80px; /*height:40px;*/}
#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;}

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

.sizedown{transform: scale(0.5); transform-origin: top left; width: 200%;}

/*intro*/
#intro{width:100%; height:716px; /*height:358px;*/ 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:716px; position:absolute; top:80px; left:calc(50% - 716px/2);}
#intro .rabbit{width:417px; position:absolute; bottom:4px; left:calc(50% - 417px/2 - 12px);}
#intro .rabbit .rabbitbody{width:100%;}
#intro .rabbit .leftarm{
    width:121px; height:65px; position:absolute; top:195px; 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:174px; position:absolute; top:7px; left:-91px;}
#intro .rabbit .rightarm{
    width:69px; height:112px; position:absolute; top:123px; right:65px;
    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:180px; position:absolute; top:-83px; right:-121px; animation:rightPrdMotion 7s ease-in-out infinite;}
#intro .txt1{width:157px; position:absolute; top:556px; left:calc(50% - 157px/2 - 321px); animation:txt1Motion 7s ease-in-out infinite;}
#intro .txt2{width:183px; position:absolute; top:558px; left:calc(50% - 183px/2 + 257px); 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:3547px; /*height:1773px;*/ background:#fffced; position:relative; overflow:hidden;}
#box2 .title{width:511px; position:absolute; top:100px; left:calc(50% - 511px/2);}
#box2 .subtitle1{width:302px; position:absolute; top:205px; left:calc(50% - 302px/2);}
#box2 .cnts{width:384px; position:absolute;}
#box2 .cnt1{top:343px; left:calc(50% - 343px/2 - 213px);}
#box2 .cnt2{top:343px; left:calc(50% - 343px/2 + 213px);}
#box2 .cnt3{top:919px; left:calc(50% - 343px/2 - 213px);}
#box2 .cnt4{top:919px; left:calc(50% - 343px/2 + 213px);}
#box2 .subtitle2{width:199px; position:absolute; top:1536px; left:calc(50% - 199px/2);}
#box2 .coupon{width:810px; position:absolute; top:1674px; left:calc(50% - 810px/2);}
#box2 a.btn{width:1000px; height:80px; position:absolute; top:1974px; left:calc(50% - 1000px/2);}
#box2 a.btn > img{width:100%;}
#box2 .info{width:308px; position:absolute; top:2073px; left:calc(50% - 308px/2);}
#box2 .subtitle3{width:433px; position:absolute; top:2168px; left:calc(50% - 433px/2);}
#box2 .prds{width:1000px; height:360px; position:absolute; top:0; left:calc(50% - 1000px/2);}
#box2 .prds > img{width:100%;}
#box2 .prd1{top:2307px;}
#box2 .prd2{top:2697px;}
#box2 .prd3{top:3087px;}

/*box3*/
#box3{width:100%; height:auto; padding:100px 0 104px; background:#ffffff; position:relative; overflow:hidden;}
#box3 .title{width:372px; margin-bottom:48px;}
#box3 ul.tabWrap{width:1000px; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 auto 30px;}
#box3 ul.tabWrap > li{width:240px; 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:1000px; position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 auto;}
#box3 .days a.prds{width:490px; height:623px; margin:0;}
#box3 .days a.prds img{width:100%;}

#box3 .day3 a.prd1,
#box3 .day3 a.prd2{margin-bottom:20px}
#box3 .day3 a.prd3{width:1000px; height:360px;}
#box3 .day4 a.prd1{width:1000px; height:360px;}

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

/*box4*/
#box4{width:100%; height:2368px; /*height:1184px;*/ background:#fff6ee; position:relative; overflow:hidden;}
#box4 .title{width:524px; position:absolute; top:94px; left:calc(50% - 524px/2);}
#box4 ul.tabWrap{width:1000px; display:flex; flex-wrap:wrap; justify-content:space-between; position:absolute; top:261px; left:calc(50% - 1000px/2);}
#box4 ul.tabWrap > li{width:320px; cursor:pointer;}
#box4 ul.tabWrap > li img{width:100%;}
#box4 .subtitle{width:1000px; position:absolute; top:441px; left:calc(50% - 1000px/2);}
#box4 .txt{width:707px; position:absolute; top:581px; left:calc(50% - 707px/2);}
#box4 .cnt{width:1077px; position:absolute; top:800px; left:calc(50% - 1077px/2);}
#box4 .deco{width:140px; position:absolute; top:702px; left:0;}

/*box5*/
#box5{width:100%; height:3200px; /*height:1600px;*/ background:#ffffff; position:relative; overflow:hidden;}
#box5 .title{width:739px; position:absolute; top:80px; left:calc(50% - 739px/2);}
#box5 .cnt{width:1140px; position:absolute; top:232px; left:calc(50% - 1140px/2);}

/*box6*/
#box6{width:100%; height:2026px; /*height:1013px;*/ background:#fff4e3; position:relative; overflow:hidden;}
#box6 .title{width:298px; position:absolute; top:79px; left:calc(50% - 298px/2);}
#box6 .cnt{width:1140px; position:absolute; top:249px; left:calc(50% - 1140px/2);}

/*box7*/
#box7{width:100%; height:2900px; /*height:1450px;*/ background:#ffffff; position:relative; overflow:hidden;}
#box7 .subtitle1{width:1000px; position:absolute; top:100px; left:calc(50% - 1000px/2);}
#box7 .cnt1{width:1000px; position:absolute; top:212px; left:calc(50% - 1000px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box7 .cnt1 a.prds{width:490px; height:623px; margin:0;}
#box7 .cnt1 a.prds > img{width:100%;}
#box7 .cnt1 a.prd1,
#box7 .cnt1 a.prd2{margin-bottom:20px;}
#box7 .subtitle2{width:1000px; position:absolute; top:1578px; left:calc(50% - 1000px/2);}
#box7 .cnt2{width:1000px; position:absolute; top:1688px; left:calc(50% - 1000px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box7 .cnt2 a.prds{width:490px; height:542px; margin:0; pointer-events:none;}
#box7 .cnt2 a.prd1,
#box7 .cnt2 a.prd2{margin-bottom:20px;}
#box7 .cnt2 a.prds > img{width:100%;}

/*box8*/
#box8{width:100%; height:1432px; /*height:716px;*/ 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:622px; position:absolute; top:102px; left:calc(50% - 622px/2);}
#box8 .slideWrap{width:1000px; position:abosolute; top:273px; left:calc(50% - 1000px/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:358px; 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:381px;}
#box8 .slideWrap #box8Slider .swiper-container > ul > li img{width:100%;}

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

#box8 .deco{width:224px; position:absolute; top:971px; left:calc(50% - 224px/2 - 560px); z-index:2;}

/*box9*/
#box9{width:100%; height:2137px; /*height:1068px;*/ background:#ffffff; position:relative; overflow:hidden;}
#box9 .title{width:612px; position:absolute; top:100px; left:calc(50% - 612px/2);}

#box9 ul.tabWrap{width:1000px; position:absolute; top:261px; left:calc(50% - 1000px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box9 ul.tabWrap > li{width:489px; 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:1000px; position:absolute; top:371px; left:calc(50% - 1000px/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:490px; height:623px; 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:510px;}
#box9 .slideWrap #box9Slider .swiper-container ul > li a:nth-child(3){background:rgba(150,210,120,0); top:643px;}
#box9 .slideWrap #box9Slider .swiper-container ul > li a:nth-child(4){background:rgba(225,210,10,0); top:643px; left:510px;}
#box9 .slideWrap #box9Slider .swiper-container ul > li img{width:100%;}

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


#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:1000px; height:80px; position:absolute; top:0; left:calc(50% - 1000px/2);}
#box9 .btns img{width:100%;}
#box9 .btn1{top:1737px;}
#box9 .btn2{top:1847px;}
#box9 .btn3{top:1957px;}





/* BASIC css end */