/* BASIC css start */
#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;
}

.btns{display:block; margin-top:79px;}

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

/*slider next,prev btn*/
.slideWrap .swiper-container .swiper-button-next, .slideWrap .swiper-container .swiper-button-prev{width:47px; height:89px; top:48.5%;}
.slideWrap .swiper-container .swiper-button-next{background:url("/design/skinfood/event/DY3_6-arrwR.png") no-repeat center; background-size:cover; right:calc(50% - 540px);}
.slideWrap .swiper-container .swiper-button-prev{background:url("/design/skinfood/event/DY3_6-arrwL.png") no-repeat center; background-size:cover; left:calc(50% - 550px);}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after{display:none;}

/*slider pagination*/
.swiper-container{overflow:visible !important;}
.swiper-container .swiper-pagination{bottom:-40px !important; left:-4px !important;}
.swiper-container .swiper-pagination .swiper-pagination-bullet{width:13px; height:13px; border-radius:50%; background:#f0d021; margin:0 8px !important; opacity:1 !important;}
.swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#fff;}

/*4 items slider*/
.slideWrap .grid4-slider ul li{position:relative;}
.slideWrap .grid4-slider ul li a{display:block; width:452px; height:48%;}
.slideWrap .grid4-slider ul li a:nth-child(2){position:absolute; top:0; left:calc(50% - 470px); background:red; opacity:0;}
.slideWrap .grid4-slider ul li a:nth-child(3){position:absolute; top:0; right:calc(50% - 472px); background:blue; opacity:0;}
.slideWrap .grid4-slider ul li a:nth-child(4){position:absolute; bottom:5px; left:calc(50% - 470px); background:green; opacity:0;}
.slideWrap .grid4-slider ul li a:nth-child(5){position:absolute; bottom:5px; right:calc(50% - 472px); background:orange; opacity:0;}

/*2 items slider*/
.slideWrap .grid2-slider ul li{position:relative;}
.slideWrap .grid2-slider ul li a{display:block; width:452px; height:100%;}
.slideWrap .grid2-slider ul li a:nth-child(2){position:absolute; top:0; left:calc(50% - 470px); background:red; opacity:0;}
.slideWrap .grid2-slider ul li a:nth-child(3){position:absolute; top:0; right:calc(50% - 472px); background:blue; opacity:0;}

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


/*intro*/
#intro{background:#fff8be; height:1312px; position:relative;}
#intro .tit{position:absolute; top:168px; left:calc(50% - 922px/2); z-index:2;}
#intro .logo{position:absolute; right:22.75%; top:31px; z-index:2;}
#intro .top{position:absolute; top:0; left:calc(50% - 2000px/2); z-index:1;}
#intro .botwrap{width:100%; position:absolute; bottom:0; left:0;}
#intro .botwrap .bot{width:2000px; position:absolute; bottom:0; left:calc(50% - 2000px/2); z-index:1;}
#intro .botwrap .gif{position:absolute; bottom:111px; left:calc(50% - 974px/2); z-index:2;}

@media (min-width: 2000px) {
  #intro .top{width:100%; left:0;}
  #intro .botwrap .bot{width:100%; left:0;}
}

/*rollban*/
#rollban{background:#ffa200; width:100%; height:120px; position:relative;}
#rollban .inn{width:100%; height:50px; position:absolute; bottom:32px; left:0; background-image:url(/design/skinfood/event/DY3_2-roll.png); background-repeat:repeat-x; background-position:0 0; background-size:auto 100%; animation:move1 70s infinite linear;}

@keyframes move1{
    0%{background-position:0 0;}
    100%{background-position:-6089px 0;}
}

/*box1*/
#box1{background:#fff8be; height:2090px;}
#box1 .tit{padding:168px 0 43px;}
#box1 .cntwrap{position:relative; height:1003px;}
#box1 .cntwrap img{position:absolute; bottom:0; left:0;}
#box1 .cntwrap .cou1{bottom:750px; left:calc(50% - 412px/2 - 340px); z-index:1;}
#box1 .cntwrap .cou2{bottom:654px; left:calc(50% - 427px/2 + 20px); z-index:2;}
#box1 .cntwrap .cou3{bottom:351px; left:calc(50% - 544px/2 + 280px); z-index:3;}
#box1 .cntwrap .cou4{bottom:193px; left:calc(50% - 532px/2 - 130px); z-index:4;}
#box1 .cntwrap .subtxt{bottom:922px; left:calc(50% - 495px/2 + 220px); z-index:4;}
#box1 .cntwrap .env{bottom:0; left:calc(50% - 635px/2); z-index:1;}
#box1 .cntwrap .deco{bottom:-74px; left:calc(50% - 238px/2 + 330px); z-index:2;}
#box1 .txt{padding:66px 0 0;}

/*box2*/
#box2{background:#b7cf57; height:1472px;}
#box2 .cnt{padding-top:168px;}

/*box3*/
#box3{background:#fff; height:1603px; position:relative;}
#box3:after{content:""; display:block; width:100%; height:397px; background:#ffee92; position:absolute; bottom:0; left:0;}
#box3 .tit{padding-top:168px;}
#box3 .countdown{text-align:center; padding:72px 0 97px;}
#box3 .countdown p{display:inline-block;}
#box3 .countdown p.hours:after{content:"HOURS"; display:block; text-align:center; width:100%; font-size:27px; color:#ff8a00; padding-top:22px;}
#box3 .countdown p.mins:after{content:"MINUTES"; display:block; text-align:center; width:100%; font-size:27px; color:#ff8a00; padding-top:22px;}
#box3 .countdown p.secs:after{content:"SECONDS"; display:block; text-align:center; width:100%; font-size:27px; color:#ff8a00; padding-top:22px;}
#box3 .countdown p.dash:after{content:"."; display:block; text-align:center; width:100%; font-size:27px; color:#ff8a00; opacity:0; padding-top:22px;}
#box3 .countdown p span{display:inline-block; color:#fff; font-weight:bold; font-size:90px; padding:15px 0; position:relative;}
#box3 .countdown p.hours span:after,
#box3 .countdown p.mins span:after,
#box3 .countdown p.secs span:after{content:""; display:block; width:100%; height:80px; background:rgba(255,255,255,0.3); position:absolute; left:0; top:0; border-top-left-radius:45px; border-top-right-radius:45px;}
#box3 .countdown p.dash{margin:0 24px;}
#box3 .countdown p.hours span, 
#box3 .countdown p.mins span, 
#box3 .countdown p.secs span{background:#ff8a00; width:110px; border-radius:45px; margin:0 8px;}
#box3 .countdown p.dash span{margin:0 10px; color:#ff8a00;}
#box3 .slideWrap{position:relative;}
#box3 .slideWrap .soldout{position:absolute; top:0; left:calc(50% - 693px/2); z-index:10; display:none;}
#box3 .btns{position:absolute; bottom:167px; left:calc(50% - 1004px/2); z-index:2;}

/*box4*/
#box4{background:#f58b4c; height:2200px;}
#box4 .titwrap{width:504px; margin:0 auto; position:relative;}
#box4 .titwrap .tit{padding:168px 0 68px;}
#box4 .titwrap .deco{position:absolute; bottom:40px; right:-320px;}
#box4 .btns{margin-top:69px;}

/*box5*/
#box5{background:#b7cf57; height:1980px;}
#box5 .titwrap{width:504px; margin:0 auto; position:relative;}
#box5 .titwrap .tit{padding:168px 0 68px;}
#box5 .titwrap .deco{position:absolute; bottom:32px; right:-270px;}
#box5 .btns{margin:69px auto 93px;}

/*box6*/
#box6{background:#cb8e5b;}

/*caution*/
#caution{background:#523b28; padding:0;}




/* BASIC css end */