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

button img {
  display: block;
}

.wrap {
  position: relative;
  width: 100%;
}
.wrap * {
  font-family: YoonGothic !important;
}
.wrap img {
    max-width: none;
}

.btns{display:block; width:46.93%; margin:5vw auto 0;}
.btns img{width:100%;}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after{display:none;}

.tesst{position:fixed; bottom:100px; left:0; font-size:10px; color:rgba(0,0,0,1); display:none;}

.posrel{position:relative;}
#ty01{position:absolute; top:calc(-13vw - 53px); left:0;}
#ty02{position:absolute; top:calc(-12vw - 53px); left:0;}
#ty03{position:absolute; top:calc(-12vw - 53px); left:0;}
#ty04{position:absolute; top:calc(-12vw - 53px); left:0;}

/*intro*/
#intro{background:#a32f2f; height:calc(80vw + 260px); position:relative; overflow-x:hidden;}

#intro img{display:block; margin:0 auto; width:90%; padding-left:5vw;}
#intro .botwrap{width:100%; position:absolute; bottom:0; left:0;}
#intro .botwrap img.bot{width:750px; position:absolute; bottom:0; left:calc(50% - 750px/2); padding-left:0;}
#intro .botwrap img.twink{width:60px; position:absolute; bottom:130px; left:calc(50% - 60px/2); padding-left:0; z-index:2;}

#intro .countdown{text-align:center; padding:4.2vw 0;}

#intro .countdown p{display:inline-block;}
#intro .countdown p.hours:after{content:"HOURS"; display:block; text-align:center; width:100%; font-size:12px; color:#fff; padding-top:6px;}
#intro .countdown p.mins:after{content:"MINUTES"; display:block; text-align:center; width:100%; font-size:12px; color:#fff; padding-top:6px;}
#intro .countdown p.secs:after{content:"SECONDS"; display:block; text-align:center; width:100%; font-size:12px; color:#fff; padding-top:6px;}
#intro .countdown p.dash:after{content:"."; display:block; text-align:center; width:100%; font-size:12px; color:#fff; opacity:0; padding-top:6px;}

#intro .countdown p span{display:inline-block; color:#fff; font-weight:bold; font-size:7.5vw; padding:1vw 0;}
#intro .countdown p.hours span, #intro .countdown p.mins span, #intro .countdown p.secs span{background:rgba(255, 250, 231, 0.24); width:8.2vw; border-radius:3.5vw; margin:0px;}
#intro .countdown p.dash span{margin:0 5px;}

/*header*/
#header{text-align:center; display:flex; background:#f9ee91; padding:10px 0; width:100%; height:53px; justify-content:center; position:static; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#header.fixed{position:fixed; top:50px; left:0; z-index:9999;}
#header a.menu{position:relative; border-right:1px solid #b77047; width:25%;}
#header a.menu:nth-last-child(1){border-right:none;}
#header a.menu img{width:100%;}
#header a.menu img:nth-child(2){position:absolute; top:0; left:0; opacity:0;}
#header a.menu.select img:nth-child(2){opacity:1;}

/*benefit*/
#benefit{background:#fff8ec; padding:12vw 0 11vw;}
#benefit.fixed{padding:26.1vw 0 11vw;}
#benefit img{padding-bottom:16px; display:block; margin:0 auto; opacity:0;}
#benefit img:nth-child(1){width:71.2%;}
#benefit img:nth-child(2){width:89.86%;}

/*coupon*/
#coupon{background:#e6ba85; padding:13vw 0 12vw;}
#coupon a img{width:66%; display:block; margin:0 auto;}


/*rolling banner*/
#rolling{background:#37755a; width:100%; height:45px; position:relative;}
#rolling .inn{width:100%; height:20px; position:absolute; bottom:12px; left:0; background-image:url(/design/skinfood/event/TY12_news.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;}
}

/*new*/
#new{background:#fff8ec; padding:12vw 0;}
#new > img{width:99%; display:block; margin:0 auto;}
#new .prd{display:flex; flex-wrap: wrap; width:90%; margin:-12px auto 0;}
#new .prd a{width:50%;}
#new .prd a:nth-child(1), #new .prd a:nth-child(2){margin-bottom:20px;}
#new .prd a img{width:88%; display:block; margin:0 auto;}

/*only*/
#only{background:#f2d9b8; padding:12vw 0;}
#only > img{width:99%; display:block; margin:0 auto;}
#only .slideWrap{width:96.53%; margin:-12px auto 0;}
#only .slideWrap .swiper-button-next, .slideWrap .swiper-button-prev{width:18px; height:34px; top:51%;}
#only .slideWrap .swiper-button-next{background:url("/design/skinfood/event/TY12_arrwR.png") no-repeat center; background-size:cover;}
#only .slideWrap .swiper-button-prev{background:url("/design/skinfood/event/TY12_arrwL.png") no-repeat center; background-size:cover;}
#only .slideWrap .only-slider ul li{position:relative;}
#only .slideWrap .only-slider ul li a{width:50%; height:100%;}
#only .slideWrap .only-slider ul li a:nth-child(2){position:absolute; top:0; left:0;}
#only .slideWrap .only-slider ul li a:nth-child(3){position:absolute; top:0; right:0;}
#only .slideWrap .only-slider ul li img{width:100%;}

/*lucky*/
#lucky{background:#a32f2f; padding:12vw 0;}
#lucky > img{width:84.66%; display:block; margin:0 auto;}
#lucky .inn{display:block; width:84.66%; height:69vw; margin:0 auto 12px; position:relative;}
#lucky .inn img.ele-tit{width:88.5%; position:absolute; top:0; right:13px; z-index:2;}
#lucky .inn img.ele-tag{width:14.64%; position:absolute; bottom:2px; right:13px; z-index:2;}
#lucky .inn img.ele-box{width:77.79%; position:absolute; bottom:0; right:42px; z-index:1;}

/*more*/
#more{background:#fff8ec; padding:12vw 0;}
#more > img{width:99%; display:block; margin:0 auto;}
#more .prd{display:flex; flex-wrap: wrap; width:90%; margin:-32px auto 0;}
#more .prd a{width:50%;}
#more .prd a:nth-child(1), #more .prd a:nth-child(2){margin-bottom:20px;}
#more .prd a img{width:88%; display:block; margin:0 auto;}


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

/* BASIC css end */