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

#layout_header{
  z-index:9999;
}

button img {
  display: block;
}

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

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

/*slider next,prev btn*/
.slideWrap .swiper-button-next, .slideWrap .swiper-button-prev{width:22px; height:26px; top:52%; z-index:9;}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after{display:none;}

/*slider pagination*/
.slideWrap{position:relative;}
.slideWrap .swiper-pagination{width:100%; bottom:-30px !important; left:0px !important; z-index:9;}
.slideWrap .swiper-pagination .swiper-pagination-bullet{width:8px; height:8px; border-radius:50%; background:#fff; border:1px solid #966c6c; margin:0 2px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#966c6c; opacity:1 !important;}

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

/*on header fixed*/
#intro.fixed{margin-top:9vw;}

/*target point*/
.posrel{position:relative;}
#tar1{position:absolute; top:-86px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-86px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-86px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-86px; left:0; display:block; width:100%; height:0;}

/*header*/
#header{text-align:center; display:flex; flex-wrap:wrap; overflow:hidden; position:relative; justify-content:center; position:static; opacity:1; width:100%; background:#000;}
#header.fixed{position:fixed; top:54px; left:0; z-index:9999;}
#header a.menu{position:relative; width:33.3333%;}
#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(1){opacity:0;}
#header a.menu.select img:nth-child(2){opacity:1;}

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

.wrap .opacs{opacity:0; transition:all 2s ease;}

/*intro*/
#intro{width:100%; height:293px; overflow:hidden; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY10_1-bg.jpg") no-repeat center / cover; position:relative;}

#intro .date{width:96px; position:absolute; top:7px; right:7px;}
#intro .bubble{width:133px; position:absolute; top:38px; left:calc(50% - 133px/2); animation: bubble 2s ease-in-out infinite;}

@keyframes bubble{
    0%{top:30px}
    50%{top:38px;}
    100%{top:30px;}
}

#intro .tit{width:203px; position:absolute; top:80px; left:calc(50% - 203px/2);}

#intro .rotateWrap{width:1110px; height:1110px; position:absolute; top:-220px; left:calc(50% - 1110px/2); transform:scale(0.33);}
#intro .rotateWrap .rotateAnchor{
    animation: rotateAnchor 15s ease-in-out infinite;
    width:1110px; height:1110px; transform:rotate(0deg); position:absolute; top:0; left:0;
    /*background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY10_1-prdGuide.jpg") no-repeat center / cover;*/
}
#intro .rotateWrap .rotateAnchor img:nth-child(1){width:314px; position:absolute; top:0; left:calc(50% - 314px/2); z-index:8;}
#intro .rotateWrap .rotateAnchor img:nth-child(2){width:324px; position:absolute; top:134px; left:126px; transform:rotate(-45deg); z-index:7;}
#intro .rotateWrap .rotateAnchor img:nth-child(3){width:204px; position:absolute; top:372px; left:82px; transform:rotate(-90deg); z-index:6;}
#intro .rotateWrap .rotateAnchor img:nth-child(4){width:202px; position:absolute; top:630px; left:200px; transform:rotate(-135deg); z-index:5;}
#intro .rotateWrap .rotateAnchor img:nth-child(5){width:210px; position:absolute; top:742px; left:440px; transform:rotate(-180deg); z-index:4;}
#intro .rotateWrap .rotateAnchor img:nth-child(6){width:272px; position:absolute; top:670px; left:690px; transform:rotate(-225deg); z-index:3;}
#intro .rotateWrap .rotateAnchor img:nth-child(7){width:318px; position:absolute; top:415px; left:795px; transform:rotate(-270deg); z-index:2;}
#intro .rotateWrap .rotateAnchor img:nth-child(8){width:274px; position:absolute; top:108px; left:720px; transform:rotate(-315deg); z-index:1;}


@keyframes rotateAnchor{
    0%{transform:rotate(0deg);}
    12.5%{transform:rotate(-45deg);}
    25%{transform:rotate(-90deg);}
    37.5%{transform:rotate(-135deg);}
    50%{transform:rotate(-180deg);}
    62.5%{transform:rotate(-225deg);}
    75%{transform:rotate(-270deg);}
    87.5%{transform:rotate(-315deg);}
    100%{transform:rotate(-360deg);}
}


/*box2*/
#box2{width:100%; height:293px; background:#f9f9f9; position:relative;}
#box2 .tit{width:168px; position:absolute; top:49px; left:calc(50% - 168px/2);}
#box2 a.coups{width:83px; height:87px;}
#box2 a.coups > img{display:block; width:100%;}
#box2 a.coup1{position:absolute; top:89px; left:calc(50% - 83px/2 - 90px);}
#box2 a.coup2{position:absolute; top:89px; left:calc(50% - 83px/2);}
#box2 a.coup3{position:absolute; top:89px; left:calc(50% - 83px/2 + 90px);}
#box2 a.btn{width:360px; height:34px; position:absolute; top:195px; left:calc(50% - 360px/2);}
#box2 a.btn > img{display:block; width:100%;}
#box2 .info{width:133px; position:absolute; top:237px; left:calc(50% - 133px/2);}

/*box4*/
#box4{width:100%; height:588px; background:#f08700; position:relative;}
#box4 .tit{width:222px; position:absolute; top:49px; left:calc(50% - 222px/2);}
#box4 .tag{width:110px; position:absolute; top:142px; left:calc(50% - 110px/2);}

#box4 .slideWrap{width:198px; height:226px; position:absolute; top:185px; left:calc(50% - 198px/2); position:relative;}
#box4 .slideWrap::after{content:""; display:block; width:198px; height:226px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY10_4-box.png") no-repeat center / cover; position:absolute; top:0; left:0;}
#box4 .slideWrap #box4Slider{width:198px; height:226px;}
#box4 .slideWrap #box4Slider ul > li{}
#box4 .slideWrap #box4Slider ul > li img{width:100%;}

#box4 .subtitle{width:191px; position:absolute; top:426px; left:calc(50% - 191px/2);}
#box4 a.btn{width:360px; height:34px; position:absolute; top:491px; left:calc(50% - 360px/2);}
#box4 a.btn > img{width:100%;}
#box4 .info{width:184px; position:absolute; top:533px; left:calc(50% - 184px/2);}

/*box5*/
#box5{width:100%; height:1196px; background:#f5f5f5; position:relative;}
#box5 .tit{width:160px; position:absolute; top:54px; left:calc(50% - 160px/2);}

#box5 a.cnts{width:373px; height:266px; display:block;}
#box5 a.cnts > img{display:block; width:100%;}
#box5 a.cnt1{position:absolute; top:147px; left:calc(50% - 373px/2);}
#box5 a.cnt2{position:absolute; top:435px; left:calc(50% - 373px/2);}
#box5 a.cnt3{position:absolute; top:723px; left:calc(50% - 373px/2);}

#box5 .info{width:216px; position:absolute; top:1002px; left:calc(50% - 216px/2);}
#box5 a.btn{width:360px; height:34px;}
#box5 a.btn > img{display:block; width:100%;}
#box5 a.btn1{position:absolute; top:1064px; left:calc(50% - 360px/2);}
#box5 a.btn2{position:absolute; top:1113px; left:calc(50% - 360px/2);}

/*box6*/
#box6{width:100%; height:auto; background:#fff; position:relative; padding:0 0 50px;}
#box6 .tit{width:231px; padding:46px 0 0;}

#box6 ul.tabHead{width:375px; height:40px; margin:39px auto 25px; display:flex; flex-wrap:wrap;}
#box6 ul.tabHead > li{width:25%; position:relative; cursor:poiter;}
#box6 ul.tabHead > li > img{display:block; opacity:0.5; width:100%;}
#box6 ul.tabHead > li.on::after{content:""; display:block; width:100%; height:3px; background:#000; position:absolute; bottom:0; left:0;}
#box6 ul.tabHead > li.on > img{opacity:1;}

#box6 .dayWrap{width:385px; margin:0 auto;}

#box6 .dayWrap .daytit{width:auto; height:17px; display:block; margin:0 auto 15px;}
#box6 .dayWrap a.btn{width:360px; height:34px; margin:25px auto 0; display:block;}
#box6 .dayWrap a.btn > img{display:block; width:100%;}

#box6 .dayWrap ul.prdWrap{display:flex; flex-wrap:wrap;}
#box6 .dayWrap ul.prdWrap > li{width:33.3333%; margin:0 0 10px;}
#box6 .dayWrap ul.prdWrap > li > a img{display:block; width:calc(100% - 10px);}

#box6 .day1{}
#box6 .day2, #box6 .day3, #box6 .day4{display:none;}



/*caution*/
#caution{background:#000;}
#caution img{width:80%; margin:auto; padding:52px 0;}


/* BASIC css end */