/* BASIC css start */
#overlay_layer {
  display: none;
}

button img {
  display: block;
}

.wrap {
  position: relative;
  width: 100%;
  overflow:hidden;
}
.wrap * {
  font-family: YoonGothic !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
}

.btns{display:block; width:344px; margin:6.1vw auto 0;}
.btns img{width:100%; background:none;}

.test{position:fixed; top:100px; left:20px; z-index:999;}

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

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

/*slider pagination*/
.swiper-container{overflow:visible !important;}
.swiper-container .swiper-pagination{bottom:-16px !important; left:0px !important;}
.swiper-container .swiper-pagination .swiper-pagination-bullet{width:6px; height:6px; border-radius:50%; background:#f0d021; margin:0 3px !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:155px; height:48.5%;}
.slideWrap .grid4-slider ul li a:nth-child(2){position:absolute; top:0; left:calc(50% - 161px); background:red; opacity:0;}
.slideWrap .grid4-slider ul li a:nth-child(3){position:absolute; top:0; right:calc(50% - 162px); background:blue; opacity:0;}
.slideWrap .grid4-slider ul li a:nth-child(4){position:absolute; bottom:0px; left:calc(50% - 161px); background:green; opacity:0;}
.slideWrap .grid4-slider ul li a:nth-child(5){position:absolute; bottom:0px; right:calc(50% - 162px); background:orange; opacity:0;}

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

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


/*intro*/
#intro{background:#fff8be; height:448px; position:relative;}
#intro .tit{width:340px; position:absolute; top:54px; left:calc(50% - 340px/2); z-index:2;}
#intro .logo{width:54px; position:absolute; right:1.8vw; top:9px; z-index:2;}
#intro .top{width:100%; position:absolute; top:0; left:0; z-index:1;}
#intro .botwrap{width:100%; position:absolute; bottom:0; left:0;}
#intro .botwrap .bot{width:100%; position:absolute; bottom:0; left:0; z-index:1;}
#intro .botwrap .gif{width:334px; position:absolute; bottom:36px; left:calc(50% - 334px/2 + 10px); z-index:2;}

/*rolling banner*/
#rollban{background:#ffa200; width:100%; height:40px; position:relative;}
#rollban .inn{width:100%; height:16px; position:absolute; bottom:11px; 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 170s infinite linear;}

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

/*box1*/
#box1{background:#fff8be; height:715px;}
#box1 .tit{width:186px; padding:54px 0 16px;}
#box1 .cntwrap{position:relative; height:343px;}
#box1 .cntwrap img{position:absolute; bottom:0; left:0;}

#box1 .cntwrap .cou1{width:142px; bottom:256px; left:calc(50% - 142px/2 - 90px); z-index:1; opacity:0;}
#box1 .cntwrap .cou2{width:146px; bottom:222px; left:calc(50% - 146px/2 + 26px); z-index:2; opacity:0;}
#box1 .cntwrap .cou3{width:186px; bottom:119px; left:calc(50% - 186px/2 + 90px); z-index:3; opacity:0;}
#box1 .cntwrap .cou4{width:182px; bottom:66px; left:calc(50% - 182px/2 - 51px); z-index:4; opacity:0;}

#box1 .cntwrap .subtxt{width:184px; bottom:314px; left:calc(50% - 184px/2 + 74px); z-index:4;}
#box1 .cntwrap .env{width:215px; bottom:0; left:calc(50% - 215px/2); z-index:1;}
#box1 .cntwrap .deco{width:82px; bottom:-25px; left:calc(50% - 82px/2 + 112px); z-index:2;}
#box1 .txt{width:294px; padding:22px 0 0;}

/*box2*/
#box2{background:#b7cf57; height:503px;}
#box2 .tit{width:228px; padding:54px 0 17px;}
#box2 .cnt{width:372px;}

/*box3*/
#box3{background:#fff; height:547px; position:relative;}
#box3:after{content:""; display:block; width:100%; height:137px; background:#ffee92; position:absolute; bottom:0; left:0;}
#box3 .tit{width:191px; padding-top:57px;}

#box3 .countdown{text-align:center; padding:25px 0 30px;}
#box3 .countdown p{display:inline-block;}
#box3 .countdown p.hours:after{content:"HOURS"; display:block; text-align:center; width:100%; font-size:10px; color:#ff8a00; padding-top:6px;}
#box3 .countdown p.mins:after{content:"MINUTES"; display:block; text-align:center; width:100%; font-size:10px; color:#ff8a00; padding-top:6px;}
#box3 .countdown p.secs:after{content:"SECONDS"; display:block; text-align:center; width:100%; font-size:10px; color:#ff8a00; padding-top:6px;}
#box3 .countdown p.dash:after{content:"."; display:block; text-align:center; width:100%; font-size:10px; color:#ff8a00; opacity:0; padding-top:6px;}
#box3 .countdown p span{display:inline-block; color:#fff; font-weight:bold; font-size:7.5vw; padding:1vw 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:25px; background:rgba(255,255,255,0.3); position:absolute; left:0; top:0; border-top-left-radius:15px; border-top-right-radius:15px;}
#box3 .countdown p.dash{margin:0;}
#box3 .countdown p.hours span, 
#box3 .countdown p.mins span, 
#box3 .countdown p.secs span{background:#ff8a00; width:37px; border-radius:15px; margin:0 1px;}
#box3 .countdown p.dash span{margin:0 6px; color:#ff8a00;}
#box3 .slideWrap{position:relative;}
#box3 .slideWrap .soldout{width:250px; position:absolute; top:0; left:calc(50% - 250px/2); z-index:2; display:none;}
#box3 .btns{width:345px; position:absolute; bottom:52px; left:calc(50% - 345px/2); z-index:2;}

#box3 #box3Slider ul li a img{width:309px;}

/*box4*/
#box4{background:#f58b4c; height:751px;}
#box4 .titwrap{width:190px; margin:0 auto; position:relative;}
#box4 .titwrap .tit{width:191px; padding:55px 0 21px;}
#box4 .titwrap .deco{width:133px; position:absolute; bottom:13px; right:-98px;}
#box4 .btns{margin-top:22px;}

#box4 #box4Slider ul li img{width:323px;}

/*box5*/
#box5{background:#b7cf57; height:676px;}
#box5 .titwrap{width:191px; margin:0 auto; position:relative;}
#box5 .titwrap .tit{width:191px; padding:55px 0 22px;}
#box5 .titwrap .deco{width:94px; position:absolute; bottom:13px; right:-80px;}
#box5 .btns{margin:23px auto 31px;}

#box5 #box5Slider ul li img{width:323px;}
#box5 .banns{width:364px;}

/*box6*/
#box6{background:#cb8e5b;}
#box6 a img{width:100%;}

/*caution*/
#caution{background:#32211a; padding:0;}
#caution img{width:100%; display:block; margin:0 auto;}

/* BASIC css end */