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

/*target point*/
.posrel{position:relative;}
#tar1{position:absolute; top:-150px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-150px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-150px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-150px; 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:#ffeb11;}
#header.fixed{position:fixed; top:54px; left:0; z-index:9999;}
#header a.menu{position:relative; width:50%;}
#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{height:473px; background:#c3eedd; position:relative;}
#intro .top{width:100%; height:auto; position:absolute; top:0; left:0;}
#intro .top .event{width:56px; position:absolute; top:17px; left:11px;}
#intro .top .logo{width:51px; position:absolute; top:17px; left:calc(50% - 51px/2);}
#intro .top .date{width:86px; position:absolute; top:17px; right:11px;}
#intro .tit{width:239px; position:absolute; top:70px; left:calc(50% - 239px/2); z-index:3;}
#intro .prd{width:440px; position:absolute; bottom:43px; left:calc(50% - 440px/2 - 2px); z-index:2;}
#intro .bot{width:100%; height:43px; background:#b5e9d5; position:absolute; bottom:0; left:0; z-index:1;}

/*box2*/
#box2{height:343px; background:#f5f5f5; position:relative;}
#box2 .ico{width:35px; position:absolute; top:33px; left:calc(50% - 35px/2); animation:ico 5s linear infinite;}
#box2 .tit{width:133px; position:absolute; top:83px; left:calc(50% - 133px/2);}
#box2 .cntWrap{width:345px; height:166px; position:absolute; top:128px; left:calc(50% - 345px/2);}
#box2 .cntWrap .cnt1{width:106px; position:absolute; top:0; left:0;}
#box2 .cntWrap .cnt2{width:232px; position:absolute; top:0; right:0;}
#box2 .info{width:179px; position:absolute; top:308px; left:calc(50% - 179px/2);}

@keyframes ico{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

/*box4*/
#box4{height:795px; background:#fff; position:relative;}
#box4 .ico{width:116px; position:absolute; top:49px; left:calc(50% - 116px/2);}
#box4 .tit{width:228px; position:absolute; top:125px; left:calc(50% - 228px/2);}
#box4 .tags{width:306px; position:absolute; top:165px; left:calc(50% - 306px/2);}
#box4 .subtit{width:205px; position:absolute; top:210px; left:calc(50% - 205px/2);}
#box4 .vid{width:278px; position:absolute; top:309px; left:calc(50% - 278px/2); border-radius:10px;}
#box4 .cnt{width:316px; position:absolute; top:540px; left:calc(50% - 316px/2);}

/*box5*/
#box5{height:434px; background:#e7f3ee; position:relative;}
#box5 .tit{width:129px; position:absolute; top:49px; left:calc(50% - 129px/2);}
#box5 a{display:block; width:172px; height:272px;}
#box5 .prd1{position:absolute; top:116px; left:calc(50% - 172px/2 - 87px); transform:rotateY(90deg); transition:all 1.5s ease;}
#box5 .prd2{position:absolute; top:116px; left:calc(50% - 172px/2 + 87px); transform:rotateY(90deg); transition:all 1.5s ease;}
#box5 a img{width:100%;}

/*box6*/
#box6{height:383px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_6-bg-m.jpg") no-repeat center / cover; position:relative; overflow:hidden;}
#box6 .tit{width:147px; position:absolute; top:49px; left:calc(50% - 147px/2);}
#box6 .cnt{width:349px; height:247px; position:absolute; top:90px; left:calc(50% - 349px/2);}
#box6 .cnt .imgs{width:155px; position:absolute; top:14px; left:calc(50% - 155px/2 - 82px); z-index:1;}
#box6 .cnt .gift{width:174px; position:absolute; top:14px; left:calc(50% - 174px/2 + 74px); z-index:2;}
#box6 .cnt .txt{width:319px; position:absolute; top:141px; left:calc(50% - 319px/2); z-index:1;}
#box6 .cnt .box{width:100%;}

/*box7*/
#box7{height:485px; background:#e7f3ee; position:relative; overflow:hidden;}
#box7 .tit{width:203px; position:absolute; top:48px; left:calc(50% - 203px/2);}
#box7 .subtit1{width:227px; position:absolute; top:113px; left:calc(50% - 227px/2);}
#box7 .subtit2{width:171px; position:absolute; top:162px; left:calc(50% - 171px/2);}
#box7 .imgs{width:124px; position:absolute; top:201px; left:calc(50% - 124px/2); transform:scale(0.7); opacity:0; transition:all 2s ease;}
#box7 .tag1{width:65px; position:absolute; top:calc(222px + 15px); left:calc(50% - 65px/2 - 62px); /*opacity:0;*/ transition:all 2s ease;}
#box7 .tag2{width:66px; position:absolute; top:calc(245px + 15px); left:calc(50% - 66px/2 + 52px); /*opacity:0;*/ transition:all 2s ease;}
#box7 .info{width:313px; position:absolute; top:348px; left:calc(50% - 313px/2);}
#box7 a.btn{display:block; width:308px; height:38px; position:absolute; top:397px; left:calc(50% - 308px/2);}
#box7 a.btn img{width:100%;}

/*box8*/
#box8{height:761px; background:#fff; position:relative; overflow:hidden;}
#box8 .tit{width:175px; position:absolute; top:49px; left:calc(50% - 175px/2);}
#box8 .deco{width:59px; position:absolute; top:25px; left:0}
#box8 ul{display:flex; flex-wrap:wrap; width:349px; position:absolute; top:124px; left:calc(50% - 349px/2);}
#box8 ul li{width:100%; position:relative;}
#box8 ul li:nth-child(2), #box8 ul li:nth-child(3),#box8 ul li:nth-child(4){margin-top:8px;}
#box8 ul li a.prd{display:block;}
#box8 ul li a.prd img{width:100%;}
#box8 a.btn{display:block; width:308px; height:38px; position:absolute; top:672px; left:calc(50% - 308px/2);}
#box8 a.btn img{width:100%;}

/*box9*/
#box9{height:919px; background:#f5f5f5; position:relative; overflow:hidden;}
#box9 .tit{width:216px; position:absolute; top:49px; left:calc(50% - 216px/2);}
#box9 .deco{width:59px; position:absolute; top:72px; right:0;}
#box9 .subtit1{width:244px; position:absolute; top:153px; left:calc(50% - 244px/2);}
#box9 .subtit2{width:229px; position:absolute; top:511px; left:calc(50% - 229px/2);}
#box9 .slideWrap{width:354px; height:277px;}
#box9 .slideWrapA{position:absolute; top:188px; left:calc(50% - 354px/2);}
#box9 .slideWrapB{position:absolute; top:544px; left:calc(50% - 354px/2);}
#box9 .slideWrap .box{width:100%; position:absolute; top:32px; left:0; z-index:1;}
#box9 .slideWrap .slideHead{width:100%; position:absolute; top:0; left:0; z-index:2;}
#box9 .slideWrap .slideHead a{display:block;width:50%; height:100%;}
#box9 .slideWrap .slideHead a:nth-child(1){position:absolute; top:0; left:0;}
#box9 .slideWrap .slideHead a:nth-child(2){position:absolute; top:0; left:50%;}
#box9 .slideWrap .slideHead img{width:100%;}
#box9 .slideWrap .swiper-container{width:354px; height:277px; position:absolute; top:32px; left:calc(50% - 354px/2); z-index:2;}
#box9 .slideWrap .swiper-container ul > li a{display:block;}
#box9 .slideWrap .swiper-container ul > li a img{width:100%;}
#box9 .slideWrap .swiper-button-next{width:20px; height:20px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_9-arrwR-m.png") no-repeat center; background-size:cover; left:calc(50% - 20px / 2 + 150px); top:203px; opacity:1; z-index:4;}
#box9 .slideWrap .swiper-button-prev{width:20px; height:20px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_9-arrwL-m.png") no-repeat center; background-size:cover; left:calc(50% - 20px / 2 - 150px); top:203px; opacity:1; z-index:4;}
#box9 .slideWrap .swiper-button-next.swiper-button-disabled,
#box9 .slideWrap .swiper-button-prev.swiper-button-disabled{opacity:0.5;}
#box9 a.btn{display:block; width:308px; height:38px; position:absolute; top:832px; left:calc(50% - 308px/2);}
#box9 a.btn img{width:100%;}

#box9 .slideWrap .navbg{position:absolute; top:160px; width:60px; height:110px; z-index:3;}
#box9 .slideWrap .navbg.navbg-prev{left:0;}
#box9 .slideWrap .navbg.navbg-next{right:0;}

/*box10*/
#box10{height:408px; background:#e7f3ee; position:relative; overflow:hidden;}
#box10 .tit{width:166px; position:absolute; top:51px; left:calc(50% - 166px/2);}

#box10 .slideWrap{width:100%; height:192px; position:absolute; top:126px; left:0; z-index:2;}

#box10 .slideWrap #box10SliderA{width:100%; position:absolute; top:0; left:0; z-index:2;}
#box10 .slideWrap #box10SliderA ul > li{margin-top:20px; transition:all 1.5s ease; -webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease;}
#box10 .slideWrap #box10SliderA ul > li a img{width:90%; opacity:0.5; transition:all 1.5s ease; -webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease;}
#box10 .slideWrap #box10SliderA ul > li.swiper-slide-active{margin-top:0px; transition:all 1.5s ease; -webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease;}
#box10 .slideWrap #box10SliderA ul > li.swiper-slide-active a img{width:100%; opacity:1; transition:all 1.5s ease; -webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease;}

#box10 .slideWrap #box10SliderB{width:340px; position:absolute; top:0; left:calc(50% - 340px/2); z-index:2;}
#box10 .slideWrap #box10SliderB ul > li a img{width:100%; opacity:0; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#box10 .slideWrap #box10SliderB ul > li.swiper-slide-active a img{opacity:1; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

#box10 .slideWrap #box10SliderB .swiper-button-next{width:7px; height:11px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_10-arrwR.png") no-repeat center; background-size:cover; left:304px; top:168px; opacity:1; z-index:3;}
#box10 .slideWrap #box10SliderB .swiper-button-prev{width:7px; height:11px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_10-arrwL.png") no-repeat center; background-size:cover; left:270px; top:168px; opacity:1; z-index:3;}
#box10 .slideWrap #box10SliderB .swiper-button-prev::after{content:""; display:block; width:2px; height:12px; background:#d3d3d3; position:absolute; top:0px; left:20px;}

#box10 .slideWrap #box10SliderB .navbg{position:absolute; top:124px; right:0; width:100px; height:58px; z-index:2;}

#box10 .slideWrap .box{width:340px; position:absolute; bottom:0; left:calc(50% - 340px/2); z-index:1;}
#box10 a.btn{display:block; width:308px; height:38px; position:absolute; top:321px; left:calc(50% - 308px/2);}
#box10 a.btn img{width:100%;}

/*box11*/
#box11{height:405px; background:#f8f8f8; position:relative; overflow:hidden;}
#box11 .tit{width:205px; position:absolute; top:48px; left:calc(50% - 205px/2);}

#box11 .slideWrap{width:100%; height:192px; position:absolute; top:122px; left:0; z-index:2;}

#box11 .slideWrap #box11SliderA{width:100%; position:absolute; top:0; left:0; z-index:2;}
#box11 .slideWrap #box11SliderA ul > li{margin-top:20px; transition:all 1.5s ease; -webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease;}
#box11 .slideWrap #box11SliderA ul > li a img{width:90%; opacity:0.5; transition:all 1.5s ease; -webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease;}
#box11 .slideWrap #box11SliderA ul > li.swiper-slide-active{margin-top:0px; transition:all 1.5s ease; -webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease;}
#box11 .slideWrap #box11SliderA ul > li.swiper-slide-active a img{width:100%; opacity:1; transition:all 1.5s ease; -webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease;}

#box11 .slideWrap #box11SliderB{width:340px; position:absolute; top:0; left:calc(50% - 340px/2); z-index:2;}
#box11 .slideWrap #box11SliderB ul > li a img{width:100%; opacity:0; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#box11 .slideWrap #box11SliderB ul > li.swiper-slide-active a img{opacity:1; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

#box11 .slideWrap #box11SliderB .swiper-button-next{width:7px; height:11px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_11-arrwR.png") no-repeat center; background-size:cover; left:304px; top:168px; opacity:1; z-index:3;}
#box11 .slideWrap #box11SliderB .swiper-button-prev{width:7px; height:11px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_11-arrwL.png") no-repeat center; background-size:cover; left:270px; top:168px; opacity:1; z-index:3;}
#box11 .slideWrap #box11SliderB .swiper-button-prev::after{content:""; display:block; width:2px; height:12px; background:#d3d3d3; position:absolute; top:0px; left:20px;}

#box11 .slideWrap #box11SliderB .navbg{position:absolute; top:122px; right:0; width:100px; height:58px; z-index:2;}

#box11 .slideWrap .box{width:340px; position:absolute; bottom:0; left:calc(50% - 340px/2);}
#box11 a.btn{display:block; width:308px; height:38px; position:absolute; top:317px; left:calc(50% - 308px/2);}
#box11 a.btn img{width:100%;}

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


/* BASIC css end */