/* 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:46px; height:51px; top:50%;}
.slideWrap .swiper-button-next, .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY7_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/CY7_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:20px; height:20px; background:#fff; border:none; margin:0 9px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, 
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important; background:#000;}


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

/*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:118px;*/ height:59px; width:100%; background:#34beff;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative; margin:0 16px;;}
#header a.menu img {/*height:118px;*/ height:59px;}
#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:1063px;*/ height:531px; 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:191px; position:absolute; top:128px; left:calc(50% - 191px/2); z-index:2;}
#intro .title1{width:336px; position:absolute; top:207px; left:calc(50% - 336px/2); z-index:3; animation: fadeOut 2s ease 3s forwards;}
#intro .title2{width:337px; position:absolute; top:207px; left:calc(50% - 337px/2); z-index:2; opacity:0; animation: fadeIn 2s ease 3s infinite;}
#intro .info{width:369px; position:absolute; top:400px; left:calc(50% - 369px/2); z-index:2;}
#intro .prd{width:921px; position:absolute; top:519px; left:calc(50% - 921px/2); z-index:2; animation: swing 0.7s ease-in-out infinite alternate;}
#intro .deco{width:1300px; position:absolute; top:72px; left:calc(50% - 1300px/2); z-index:1;}

@keyframes swing {
    0% {transform: translateX(-7px) rotate(-0.5deg);}
    100% {transform: translateX(7px) 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:1842px;*/ height:921px; 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:410px; position:absolute; top:136px; left:calc(50% - 410px/2);}
#box2 .subtitle1{width:351px; position:absolute; top:224px; left:calc(50% - 351px/2);}
#box2 .coupon{width:783px; position:absolute; top:375px; left:calc(50% - 783px/2);}
#box2 .cntWrap{width:793px; height:657px; position:absolute; top:836px; left:calc(50% - 793px/2);}
#box2 .cntWrap .tag{width:262px; position:absolute; top:-55px; right:-110px;}
#box2 .cntWrap .cnt{width:100%;}
#box2 a.btns{width:844px; height:133px; position:absolute; top:0; left:calc(50% - 844px/2);}
#box2 a.btns img{width:100%;}
#box2 a.btn1{top:575px;}
#box2 a.btn2{top:1532px;}
#box2 .info{width:414px; position:absolute; top:1676px; left:calc(50% - 414px/2);}

/*box3*/
#box3{width:100%; /*height:781px;*/ height:390px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY8_3-bg.jpg") no-repeat center / cover; position:relative; overflow:hidden;}
#box3 .title{width:295px; position:absolute; top:151px; left:calc(50% - 295px/2); z-index:2;}
#box3 .bag{width:262px; position:absolute; top:280px; left:calc(50% - 262px/2); z-index:2; animation: zoomInOut 2s ease-in-out infinite;}
#box3 .info{width:295px; position:absolute; top:592px; left:calc(50% - 295px/2); z-index:2;}
#box3 .cnt{width:784px; position:absolute; top:35px; left:calc(50% - 784px/2); z-index:1;}

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

/*box4*/
#box4{width:100%; /*height:1440px;*/ height:720px; background:#ffed9e; position:relative; overflow:hidden;}
#box4 .title{width:390px; position:absolute; top:106px; left:calc(50% - 390px/2);}
#box4 .cntWraps{}
#box4 .cntWrap1{width:842px; height:658px; position:absolute; top:214px; left:calc(50% - 842px/2);}
#box4 .cntWrap2{width:754px; height:429px; position:absolute; top:893px; left:calc(50% - 754px/2);}
#box4 .cntWraps .prd{width:100%;}
#box4 .cntWrap1 .tag{width:262px; position:absolute; top:-20px; right:-88px;}
#box4 .cntWrap2 .tag{width:262px; position:absolute; top:-46px; right:-118px;}
#box4 .cntWrap1 a{background:rgba(200,100,80,0); width:751px; height:567px; position:absolute; top:46px; left:46px;}

/*box5*/
#box5{width:100%; /*height:1786px;*/ height:893px; 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:656px; position:absolute; top:157px; left:calc(50% - 656px/2);}
#box5 ul.tabWrap{width:707px; height:217px; position:absolute; top:287px; left:calc(50% - 707px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box5 ul.tabWrap li{position:relative; width:346px; cursor:pointer;}
#box5 ul.tabWrap li:nth-child(1), 
#box5 ul.tabWrap li:nth-child(2){margin-bottom:15px;}
#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:1223px; height:972px; position:absolute; top:622px; left:calc(50% - 1223px/2);}
#box5 .cntWrap .day1 .title{width:478px; position:absolute; top:0; left:calc(50% - 478px/2);}
#box5 .cntWrap .day2 .title{width:592px; position:absolute; top:0; left:calc(50% - 592px/2);}
#box5 .cntWrap .day3 .title{width:727px; position:absolute; top:0; left:calc(50% - 727px/2);}
#box5 .cntWrap .day4 .title{width:562px; position:absolute; top:0; left:calc(50% - 562px/2);}
#box5 .cntWrap .days .prds{width:397px; height:630px; position:absolute; top:187px; left:0;}
#box5 .cntWrap .days .prds img{width:100%;}
#box5 .cntWrap .days .prd1{left:calc(50% - 397px/2 - 412px);}
#box5 .cntWrap .days .prd2{left:calc(50% - 397px/2);}
#box5 .cntWrap .days .prd3{left:calc(50% - 397px/2 + 412px);}
#box5 .cntWrap .days a.btns{width:1223px; height:101px; 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:1628px;*/ height:814px; 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:564px; position:absolute; top:232px; left:calc(50% - 564px/2);}
#box6 .slideWrap{width:1217px; height:925px; position:absolute; top:356px; left:calc(50% - 1217px/2);}
#box6 .slideWrap #box6Slider{}
#box6 .slideWrap #box6Slider .swiper-container{}
#box6 .slideWrap #box6Slider .swiper-container ul li img{}
#box6 .slideWrap #box6Slider .swiper-container ul li:nth-child(1) a{width:601px; height:630px; position:absolute; top:293px;}
#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:397px; height:630px; position:absolute; top:293px;}
#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% - 397px/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:1219px; height:97px; position:absolute; top:1337px; left:calc(50% - 1219px/2); display:none;}
#box6 a.btn img{width:100%;}
#box6 .slideWrap .swiper-button-next, 
#box6 .slideWrap .swiper-button-prev{top:65%;}
#box6 .slideWrap .swiper-button-prev{left:-60px;}
#box6 .slideWrap .swiper-button-next{right:-60px;}


/*box7*/
#box7{width:100%; /*height:1285px;*/ height:642px; 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:418px; position:absolute; top:191px; left:calc(50% - 418px/2);}
#box7 .slideWrap{width:1217px; height:630px; position:absolute; top:326px; left:calc(50% - 1217px/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:397px; height:630px; 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% - 397px/2);}
#box7 .slideWrap #box7Slider .swiper-container ul li a:nth-child(3){background:rgba(80,100,200,0); right:0;}
#box7 a.btn{width:1219px; height:97px; position:absolute; top:1012px; left:calc(50% - 1219px/2);}
#box7 a.btn img{width:100%;}


/*box8*/
#box8{width:100%; /*height:1847px;*/ height:923px; 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:648px; position:absolute; top:166px; left:calc(50% - 648px/2);}
#box8 ul.tagWrap{width:586px; height:101px; position:absolute; top:296px; left:calc(50% - 586px/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:692px; position:absolute; top:444px; left:calc(50% - 692px/2);}
#box8 .slideWrap{width:1217px; height:630px; position:absolute; top:651px; left:calc(50% - 1217px/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:397px; height:630px; 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% - 397px/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:-59px !important;}
#box8 .slideWrap .swiper-pagination .swiper-pagination-bullet{width:18px; height:18px; background:#faac8c;}
#box8 .slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#d77261;}
#box8 a.btns{width:1223px; height:101px; position:absolute; left:calc(50% - 1223px/2);}
#box8 a.btns img{width:100%;}
#box8 a.btn1{top:1335px;}
#box8 a.btn2{top:1458px;}



/* BASIC css end */