/* 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;}

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

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

/*intro*/
#intro{width:100%; height:248px; overflow-y:hidden; background:#000; position:relative;}
#intro .date{width:87px; position:absolute; top:7px; right:7px;}
#intro .bubble{width:137px; position:absolute; top:36px; left:calc(50% - 137px/2); animation: bubble 2s ease-in-out infinite;}

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

#intro .tit{width:227px; position:absolute; top:76px; left:calc(50% - 227px/2);}
#intro .deco1{width:115px; position:absolute; top:147px; left:calc(50% - 115px/2 - 125px); z-index:10;}
#intro .deco2{width:115px; position:absolute; top:147px; left:calc(50% - 115px/2 + 125px); z-index:10;}

#intro .slideWrap{width:336px; height:99px; background:rgba(0,255,0,0); position:absolute; top:144px; left:calc(50% - 336px/2);}
#intro .slideWrap #box1Slider ul li{height:99px; display:flex; justify-content:center;}
#intro .slideWrap #box1Slider ul li img{width:56px; margin:auto; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#intro .slideWrap #box1Slider ul li.swiper-slide-active img{width:112px; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

/*roll*/
#rolling{background:#000; width:100%; height:32px; position:relative;}
#rolling .roll{width:100%; height:9px; position:absolute; bottom:12px; left:0; background-image:url(http://skinfood.img15.kr/data/content/skinfoodday/BY11_2-roll.png); background-repeat:repeat-x; background-position:0 0; background-size:auto 100%; animation:move1 120s infinite linear;}

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

/*box3*/
#box3{width:100%; height:318px; background:#f9f9f9; position:relative;}
#box3 .tit{width:193px; position:absolute; top:48px; left:calc(50% - 193px/2);}
#box3 a.coups{width:88px; height:93px;}
#box3 a.coups img{width:100%;}

#box3 a.coup1{position:absolute; top:95px; left:calc(50% - 88px/2 - 98px);}
#box3 a.coup2{position:absolute; top:95px; left:calc(50% - 88px/2);}
#box3 a.coup3{position:absolute; top:95px; left:calc(50% - 88px/2 + 98px);}

#box3 a.btn{width:352px; height:35px; position:absolute; top:207px; left:calc(50% - 352px/2);}
#box3 a.btn img{width:100%;}
#box3 .info{width:167px; position:absolute; top:253px; left:calc(50% - 167px/2);}

/*header*/
#header{text-align:center; display:flex; overflow:hidden; position:relative; justify-content:center; position:static; opacity:1; height:33px; width:100%; background:#000;}
#header.fixed{position:fixed; top:54px; left:0; z-index:9999;}
#header a.menu{position:relative; height:33px; display:flex; flex-wrap:wrap; background:#000; padding:0 9px;}
#header a.menu img{display:block; margin:auto; height:9px;}
#header a.menu:nth-child(2) img{height:8px;}
#header a.menu img:nth-child(2){position:absolute; top:12px; left:9px; opacity:0;}
#header a.menu:nth-child(2) img:nth-child(2){position:absolute; top:13px; left:9px; opacity:0;}
#header a.menu.select img:nth-child(1){opacity:0;}
#header a.menu.select img:nth-child(2){opacity:1;}

/*box5*/
#box5{width:100%; height:1088px; background:#fff831; position:relative;}
#box5 .subtit{width:93px; position:absolute; top:48px; left:calc(50% - 93px/2);}
#box5 .tit{width:255px; position:absolute; top:70px; left:calc(50% - 255px/2);}
#box5 a.cnts{width:356px; height:272px;}
#box5 a.cnts img{width:100%;}
#box5 a.cnt1{position:absolute; top:117px; left:calc(50% - 356px/2);}
#box5 a.cnt2{position:absolute; top:413px; left:calc(50% - 356px/2);}
#box5 a.cnt3{position:absolute; top:708px; left:calc(50% - 356px/2);}
#box5 a.btn{width:352px; height:35px; position:absolute; top:1005px; left:calc(50% - 352px/2); background:transparent;}
#box5 a.btn img{width:100%;}

/*box6*/
#box6{width:100%; height:1122px; background:#1e1e1e; position:relative;}
#box6 .subtit{width:93px; position:absolute; top:48px; left:calc(50% - 93px/2);}
#box6 .tit{width:245px; position:absolute; top:72px; left:calc(50% - 245px/2);}
#box6 .tag{width:126px; position:absolute; top:105px; left:calc(50% - 126px/2);}
#box6 a.cnts{width:356px; height:272px;}
#box6 a.cnts img{width:100%;}
#box6 a.cnt1{position:absolute; top:150px; left:calc(50% - 356px/2);}
#box6 a.cnt2{position:absolute; top:446px; left:calc(50% - 356px/2);}
#box6 a.cnt3{position:absolute; top:742px; left:calc(50% - 356px/2);}
#box6 a.btn{width:352px; height:35px; position:absolute; top:1039px; left:calc(50% - 352px/2); background:transparent;}
#box6 a.btn img{width:100%;}

/*box7*/
#box7{width:100%; height:1108px; background:#f5f5f5; position:relative;}
#box7 .subtit{width:93px; position:absolute; top:55px; left:calc(50% - 93px/2);}
#box7 .tit{width:146px; position:absolute; top:77px; left:calc(50% - 146px/2);}
#box7 a.cnts img{width:100%;}
#box7 a.cnt1{width:356px; height:272px; position:absolute; top:125px; left:calc(50% - 356px/2);}
#box7 a.cnt2, #box7 a.cnt3, #box7 a.cnt4, #box7 a.cnt5{width:178px; height:282px;}
#box7 a.cnt2{position:absolute; top:420px; left:calc(50% - 178px/2 - 90px);}
#box7 a.cnt3{position:absolute; top:420px; left:calc(50% - 178px/2 + 90px);}
#box7 a.cnt4{position:absolute; top:722px; left:calc(50% - 178px/2 - 90px);}
#box7 a.cnt5{position:absolute; top:722px; left:calc(50% - 178px/2 + 90px);}
#box7 a.btn{width:352px; height:35px; position:absolute; top:1025px; left:calc(50% - 352px/2); background:transparent;}
#box7 a.btn img{width:100%;}

/*box8*/
#box8{width:100%; height:1094px; background:#222222; position:relative;}
#box8 .subtit{width:93px; position:absolute; top:48px; left:calc(50% - 93px/2);}
#box8 .tit{width:166px; position:absolute; top:70px; left:calc(50% - 166px/2);}
#box8 a.cnts{width:360px; height:288px; position:relative;}
#box8 a.cnts img{width:100%;}
#box8 a.cnts .gif{width:162px; position:absolute; top:37px; left:calc(50% - 162px/2 - 87px); z-index:1;}
#box8 a.cnts .plus{width:24px; position:absolute; top:83px; left:calc(50% - 24px/2); z-index:2;}
#box8 a.cnt1{position:absolute; top:118px; left:calc(50% - 360px/2);}
#box8 a.cnt2{position:absolute; top:428px; left:calc(50% - 360px/2);}
#box8 a.cnt3{position:absolute; top:712px; left:calc(50% - 360px/2);}
#box8 a.btn{width:352px; height:35px; position:absolute; top:1011px; left:calc(50% - 352px/2); background:transparent;}
#box8 a.btn img{width:100%;}

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


/* BASIC css end */