/* 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{width:92px; height:94px; top:50%;}
.slideWrap .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY5_arrwR.png") no-repeat top center / cover; right:-112px;}
.slideWrap .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY5_arrwL.png") no-repeat top center / cover; left:-112px;}
.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:-106px !important; left:0px !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet{width:22px; height:22px; background:#ffca88; border:none; margin:0 23px !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:-188px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-188px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-188px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-188px; 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:96px; width:100%; background:#ff8607;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative; margin:0;}
#header a.menu img {height:96px;}
#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;}


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

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

.wrap.sizedown625{
    transform: scale(0.625);
    transform-origin: top left;
    width: 160%;
}

.wrap.sizedown70{
    transform: scale(0.75);
    transform-origin: top left;
    width: 133%;
}

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

/*intro*/
#intro{width:100%; /*height:2328px;*/ height:1164px; overflow:hidden; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY5_1-video.gif") no-repeat center / cover;}
#intro .date{width:453px; position:absolute; top:247px; left:calc(50% - 453px/2);}
#intro .bubbOn{width:280px; position:absolute; top:445px; left:calc(50% - 280px/2 + 6px); z-index:2; opacity:0; animation: mainAni 6s linear infinite;}
#intro .bubbOff{width:375px; position:absolute; top:404px; left:calc(50% - 375px/2);}
#intro .title{width:599px; position:absolute; top:614px; left:calc(50% - 599px/2);}

@keyframes mainAni {
    /* 꺼짐 */
    0% {opacity: 0;}
    /* 깜빡 시작 */
    4% {opacity: 0.12;}
    7% {opacity: 0.02;}
    11% {opacity: 0.28;}
    15% {opacity: 0.08;}
    20% {opacity: 0.55;}
    25% {opacity: 0.2;}
    32% {opacity: 0.9;}
    36% {opacity: 0.55;}
    /* 팍 켜짐 */
    42% {opacity: 1;}
    /* 여기서부터 유지 */
    100% {opacity: 1;}
}


/*box2*/
#box2{width:100%; /*height:2985px;*/ height:1493px; background:#ffeea2; position:relative;}
#box2 .inner{width:100%; height:1676px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY5_2-bg.jpg") no-repeat center bottom / cover; position:relative;}

#box2 .inner .cnts{width:532px; position:absolute; top:0; left:0;}
#box2 .inner .cnts.on{z-index:2;}

#box2 .inner .cnt1{top:155px; left:calc(50% - 532px/2 - 292px);}
#box2 .inner .cnt2{top:155px; left:calc(50% - 532px/2 + 292px);}
#box2 .inner .cnt3{top:836px; left:calc(50% - 532px/2 - 292px);}
#box2 .inner .cnt4{top:836px; left:calc(50% - 532px/2 + 292px);}

#box2 .title{width:400px;  position:absolute; top:1941px; left:calc(50% - 400px/2);}
#box2 .coupon{width:1060px; position:absolute; top:2134px; left:calc(50% - 1060px/2);}
#box2 a.btn{width:889px; position:absolute; top:2566px; left:calc(50% - 889px/2);}
#box2 a.btn img{width:100%;}
#box2 .info{width:505px; position:absolute; top:2741px; left:calc(50% - 505px/2);}

#box2 .inner .cnts.on{opacity: 0; animation-duration: 7s; animation-timing-function: linear; animation-iteration-count: infinite;}
#box2 .inner .cnt1.on{animation-name: bulb1Loop;}
#box2 .inner .cnt2.on{animation-name: bulb2Loop;}
#box2 .inner .cnt3.on{animation-name: bulb3Loop;}
#box2 .inner .cnt4.on{animation-name: bulb4Loop;}

/* 1번 바로 시작 */
@keyframes bulb1Loop {
    0% { opacity: 0; }
    3% { opacity: 0.1; }
    6% { opacity: 0.02; }
    10% { opacity: 0.3; }
    15% { opacity: 0.1; }
    22% { opacity: 1; }
    88% { opacity: 1; }
    89% { opacity: 0; }
    100% { opacity: 0; }
}

/* 2번 0.7초 뒤 시작 */
@keyframes bulb2Loop {
    0% { opacity: 0; }
    10% { opacity: 0; }
    13% { opacity: 0.1; }
    16% { opacity: 0.02; }
    20% { opacity: 0.3; }
    25% { opacity: 0.1; }
    32% { opacity: 1; }
    88% { opacity: 1; }
    89% { opacity: 0; }
    100% { opacity: 0; }
}

/* 3번 1.4초 뒤 시작 */
@keyframes bulb3Loop {
    0% { opacity: 0; }
    20% { opacity: 0; }
    23% { opacity: 0.1; }
    26% { opacity: 0.02; }
    30% { opacity: 0.3; }
    35% { opacity: 0.1; }
    42% { opacity: 1; }
    88% { opacity: 1; }
    89% { opacity: 0; }
    100% { opacity: 0; }
}

/* 4번 2.1초 뒤 시작 */
@keyframes bulb4Loop {
    0% { opacity: 0; }
    30% { opacity: 0; }
    33% { opacity: 0.1; }
    36% { opacity: 0.02; }
    40% { opacity: 0.3; }
    45% { opacity: 0.1; }
    52% { opacity: 1; }
    88% { opacity: 1; }
    89% { opacity: 0; }
    100% { opacity: 0; }
}

/*box3*/
#box3{width:100%; /*height:883px;*/ height:442px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY5_3-bg.jpg") no-repeat center bottom / cover; position:relative;}
#box3 .subtitle{width:177px; position:absolute; top:247px; left:calc(50% - 177px/2);}
#box3 .title{width:523px; position:absolute; top:337px; left:calc(50% - 523px/2); animation: box3title 2s linear infinite; transition:all .5s ease;}

@keyframes box3title {
    0%{transform:scale(1);}
    50%{transform:scale(1.1);}
    100%{transform:scale(1);}
}

/*box5*/
#box5{width:100%; /*height:2620px;*/ height:1310px; background:#fffcb0; position:relative;}
#box5 .tabHead{width:1140px; position:absolute; top:141px; left:calc(50% - 1140px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box5 .tabHead li{width:268px; position:relative; cursor:pointer;}
#box5 .tabHead li img{width:100%;}
#box5 .tabHead li img:nth-child(1){position:absolute; top:0; left:0; opacity:0;}
#box5 .tabHead li.on img:nth-child(1){opacity:1;}
#box5 .tabHead li:hover img:nth-child(1){opacity:1;}

#box5 .dayWrap{width:100%; position:absolute; top:539px; left:0;}
#box5 .dayWrap .ban{width:1152px; position:absolute; top:0; left:calc(50% - 1152px/2);}
#box5 .dayWrap .slideWrap{width:1152px; position:absolute; top:452px; left:calc(50% - 1152px/2);}
#box5 .dayWrap .slideWrap .swiper-container ul li a{display:block;}
#box5 .dayWrap .slideWrap .swiper-container ul li a img{width:100%;}

#box5 .dayWrap .slideWrap .swiper-button-prev{}
#box5 .dayWrap .slideWrap .swiper-button-next{}
#box5 .dayWrap .slideWrap .swiper-pagination{ bottom:-90px !important}

#box5 .dayWrap a.btn{width:888px; position:absolute; top:1701px; left:calc(50% - 888px/2);}
#box5 .dayWrap a.btn img{width:100%;}

#box5 .dayWrap{z-index:-1; opacity:0;}
#box5 .dayWrap.now{z-index:2; opacity:1;}

/*box6*/
#box6{width:100%; /*height:2028px;*/ height:1014px; background:#ffedb0; position:relative;}
#box6 .title{width:484px; position:absolute; top:243px; left:calc(50% - 484px/2);}
#box6 .slideWrap{width:1152px; position:absolute; top:724px; left:calc(50% - 1152px/2);}
#box6 .slideWrap .swiper-container ul li a{display:block;}
#box6 .slideWrap .swiper-container ul li a img{width:100%;}

/*box7*/
#box7{width:100%; /*height:2489px;*/ height:1245px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY5_7-bg.jpg") no-repeat center bottom / cover; position:relative;}
#box7 .title{width:531px; position:absolute; top:239px; left:calc(50% - 531px/2);}
#box7 .slideWrap{width:1152px; position:absolute; top:717px; left:calc(50% - 1152px/2);}
#box7 .slideWrap .swiper-container ul li a{display:block;}
#box7 .slideWrap .swiper-container ul li a img{width:100%;}

#box7 a.btn{width:888px; position:absolute; top:2093px; left:calc(50% - 888px/2);}
#box7 a.btn img{width:100%;}


/*box8*/
#box8{width:100%; /*height:2689px;*/ height:1400px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY5_8-bg.jpg") no-repeat center bottom / cover; position:relative;}
#box8 .title{width:729px; position:absolute; top:258px; left:calc(50% - 729px/2);}
#box8 .bans{width:1152px;}

#box8 .ban1{position:absolute; top:709px; left:calc(50% - 1152px/2);}
#box8 .ban2{position:absolute; top:873px; left:calc(50% - 1152px/2);}

#box8 .slideWrap{width:1152px; position:absolute; top:1306px; left:calc(50% - 1152px/2);}
#box8 .slideWrap .swiper-container ul li a{display:block;}
#box8 .slideWrap .swiper-container ul li a img{width:100%;}

#box8 a.btn{width:888px; position:absolute; top:2470px; left:calc(50% - 888px/2);}
#box8 a.btn img{width:100%;}



/* BASIC css end */