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

#layout_header{
  z-index:9999;
}

button img {
  display: block;
}

.wrap {
  position: relative;
  width: 100%;
  overflow-x:hidden;
}
.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:16px; height:24px; 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:10vw;}

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

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


/*logo tag spin animation*/
.tagWrap{position:relative; width:46px; margin:0 auto;}
.tagWrap img{width:100%;}
.tagWrap .logotxt{position:absolute; top:0; left:calc(50% - 46px/2); animation:spin 5s linear infinite;}

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

/*intro*/
#intro .top{position:absolute; top:0; left:0; width:100%; height:0px; z-index:10;}
#intro .top .imgs{width:100%; height:100%; position:relative;}
#intro .top .imgs .month{width:65px; position:absolute; top:16px; left:20px;}
#intro .top .imgs .logo{width:70px; position:absolute; top:15px; left:calc(50% - 70px/2);}
#intro .top .imgs .date{width:66px; position:absolute; top:16px; right:20px;}
#intro .top .imgs.imgbk{display:none;}

#intro .slideWrap .swiper-container ul > li{width:100%; height:396px; position:relative;}
#intro .slideWrap .swiper-container ul > li:nth-child(1){background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY6_1-slide1-m.jpg") no-repeat center / cover;}
#intro .slideWrap .swiper-container ul > li:nth-child(2){background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY6_1-slide2-m.jpg") no-repeat center / cover;}
#intro .slideWrap .swiper-container ul > li:nth-child(3){background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY6_1-slide3-m.jpg") no-repeat center / cover;}

#intro .slideWrap .swiper-container ul > li .txtWrap{display:flex; flex-wrap:wrap; justify-content:left; width:100%; position:absolute; top:68px; left:0;}
#intro .slideWrap .swiper-container ul > li .txtWrap > a{display:block; width:100%; margin-top:10px;}
#intro .slideWrap .swiper-container ul > li .txtWrap > a > img{width:82px;}

#intro .slideWrap .swiper-container ul > li:nth-child(1) .txtWrap > img{width:211px;}
#intro .slideWrap .swiper-container ul > li:nth-child(2) .txtWrap > img{width:273px;}
#intro .slideWrap .swiper-container ul > li:nth-child(3) .txtWrap > img{width:273px;}

#intro .slideWrap #box1Slider .pag_box1Slider{width:100%; bottom:20px !important; left:0 !important; display:flex; flex-wrap:wrap; justify-content:center;}
#intro .slideWrap #box1Slider .pag_box1Slider .swiper-pagination-bullet{background:transparent; width:12px; height:12px; border:1px solid transparent; margin: 0 2px !important; position:relative;}
#intro .slideWrap #box1Slider .pag_box1Slider .swiper-pagination-bullet::after{content:""; display:block; width:3px; height:3px; background:#fff; position:absolute; top:calc(50% - 3px/2); left:calc(50% - 3px/2); border-radius:50%;}
#intro .slideWrap #box1Slider .pag_box1Slider .swiper-pagination-bullet.swiper-pagination-bullet-active{border:1px solid #fff;}

/*on slide change*/
#intro .top.bk{border-bottom:1px solid #a8a1a3;}
#intro .slideWrap #box1Slider .pag_box1Slider .swiper-pagination-bullet.bk::after{content:""; display:block; width:3px; height:3px; background:#000; position:absolute; top:calc(50% - 3px/2); left:calc(50% - 3px/2); border-radius:50%;}
#intro .slideWrap #box1Slider .pag_box1Slider .swiper-pagination-bullet.swiper-pagination-bullet-active.bk{border:1px solid #000;}


/*box3*/
#box3{height:535px; background:#f4f4f8; position:relative; padding:49px 0 65px; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box3 .tit{width:228px; margin:17px auto 16px;}

#box3 .slideWrap{width:100%; position:absolute; top:182px; left:calc(50% - 244px/2); z-index:10;}
#box3 .slideWrap #box3SliderA {width:100%;}
#box3 .slideWrap #box3SliderA ul > li{width:244px !important; position:relative;}
#box3 .slideWrap #box3SliderA ul > li a span.blnk{display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5); border-radius:3px;}
#box3 .slideWrap #box3SliderA ul > li a img{width:100%;}
#box3 .slideWrap #box3SliderA ul > li a img.img{opacity:0.5;}
#box3 .slideWrap #box3SliderA ul > li.swiper-slide-active a img{opacity:1; transition:opacity 1s ease;}
#box3 .slideWrap #box3SliderA ul > li.swiper-slide-active a span.blnk{background:rgba(255,255,255,0);}

#box3 .slideWrap #box3SliderB{margin-top:17px; position:relative;}
#box3 .slideWrap #box3SliderB ul > li{width:234px !important; position:absolute; top:0; left:0;}
#box3 .slideWrap #box3SliderB ul > li a{opacity:0; transition:opacity 1s ease; display:none;}
#box3 .slideWrap #box3SliderB ul > li.on a{opacity:1; transition:opacity 1s ease; display:block;}
#box3 .slideWrap #box3SliderB ul > li a img{width:100%;}

#box3 .slideWrap .box3Btns{width:244px; position:absolute; top:196px; left:0;}
#box3 .slideWrap .box3Btns .swiper-button-next{width:7px; height:11px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY6_3-arrwR.png") no-repeat center; background-size:cover; left:280px; top:0; opacity:1;}
#box3 .slideWrap .box3Btns .swiper-button-prev{width:7px; height:11px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY6_3-arrwL.png") no-repeat center; background-size:cover; left:250px; top:0; opacity:1;}
#box3 .slideWrap .box3Btns .swiper-button-prev::after{content:""; display:block; width:1px; height:11px; background:#d3d3d3; position:absolute; top:0; left:18px;}

#box3 .txtbox{width:360px; position:absolute; top:295px; left:calc(50% - 360px/2 + 15px); z-index:9;}

/*box3 roll*/
#rolling{width:74px; height:100%; position:absolute; top:0; left:0;}
#rolling .roll{width:74px; height:100%; position:absolute; bottom:0; left:0; background-image:url(http://skinfood.img15.kr/data/content/skinfoodday/BY6_3-marquee3.png); background-repeat:repeat-y; background-position:0 0; background-size:100%; animation:move1 70s infinite linear;}

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

/*box4*/
#box4{height:520px; background:#fff; position:relative; padding:49px 0 0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box4 .tit{width:173px; margin:17px auto 26px;}

#box4 .slideWrap{width:100%; position:relative;}
#box4 .slideWrap #box4SliderA {width:261px; position:absolute; top:0; left:calc(50% - 261px/2); z-index:10;}
#box4 .slideWrap #box4SliderA ul > li{width:261px; height:261px; display:flex;}
#box4 .slideWrap #box4SliderA ul > li a{display:block; margin:auto;}
#box4 .slideWrap #box4SliderA ul > li a img{width:100%; opacity:1;}

#box4 .slideWrap #box4SliderB {width:100%; position:absolute; top:53px; left:0;}
#box4 .slideWrap #box4SliderB ul{transition-timing-function : linear;}
#box4 .slideWrap #box4SliderB ul > li{width:155px;}
#box4 .slideWrap #box4SliderB ul > li img{width:100%; opacity:1;}

#box4 .slideWrap .swiper-button-next{width:24px; height:24px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY6_4-arrwR.png") no-repeat center; background-size:cover; left:calc(50% - 24px / 2 + 104px); top: 35px; opacity:1; z-index:10;}
#box4 .slideWrap .swiper-button-prev{width:24px; height:24px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY6_4-arrwL.png") no-repeat center; background-size:cover; left:calc(50% - 24px / 2 + 74px); top: 35px; opacity:1; z-index:10;}

/*box5*/
#box5{height:830px; background:#e9efff; position:relative; overflow:hidden; padding:49px 0 0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box5 .tit{width:171px; margin:17px auto 32px;}

#box5 .coupBox{width:224px; margin:0 auto; position:relative;}
#box5 .coupBox img{width:100%;}
#box5 .coupBox .tag{width:73px; position:absolute; bottom:14px; right:-20px;}

#box5 .coupWrap{width:100%; margin:10px auto 25px; display:flex; flex-wrap:wrap; justify-content:center; padding:0 12px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box5 .coupWrap img{margin:0 2px; width:calc(33.3333% - 4px);}
#box5 .coupWrap img:nth-child(4){margin-top:12px;}
#box5 .coupWrap img:nth-child(5){margin-top:12px;}

#box5 .info{width:346px; margin:0 auto;}

#box5 .coupLink{width:calc(100% - 24px); margin:25px auto 0; padding:26px 0 0; border-top:1px solid #fff;}
#box5 .coupLink .subtit{width:146px; margin:0 0 10px;}
#box5 .coupLink ul{display:flex; flex-wrap:wrap; margin:0 -2px;}
#box5 .coupLink ul > li{width:calc(25% - 4px); margin:0 2px;}
#box5 .coupLink ul > li a img{width:100%;}

#box5 .deco1{width:18px; position:absolute; top:372px; left:calc(50% - 18px/2 - 180px); animation:deco1 3s ease-in-out infinite;}
#box5 .deco2{width:7px; position:absolute; top:326px; left:calc(50% - 7px/2 - 154px); animation:deco2 3s ease-in-out infinite;}
#box5 .deco3{width:12px; position:absolute; top:350px; left:calc(50% - 12px/2 - 130px); animation:deco3 3s ease-in-out infinite;}
#box5 .deco4{width:25px; position:absolute; top:211px; left:calc(50% - 25px/2 + 144px); animation:deco4 3s ease-in-out infinite;}
#box5 .deco5{width:20px; position:absolute; top:252px; left:calc(50% - 20px/2 + 180px); animation:deco5 3s ease-in-out infinite;}
#box5 .deco6{width:10px; position:absolute; top:211px; left:calc(50% - 10px/2 + 210px); animation:deco6 3s ease-in-out infinite;}

@keyframes deco1{
    0%{top:calc(372px - 10px);}
    50%{top:372px;}
    100%{top:calc(372px - 10px);}
}

@keyframes deco2{
    0%{top:calc(326px - 30px);}
    50%{top:326px;}
    100%{top:calc(326px - 30px);}
}

@keyframes deco3{
    0%{top:calc(350px - 20px);}
    50%{top:350px;}
    100%{top:calc(350px - 20px);}
}
@keyframes deco4{
    0%{top:calc(211px - 5px);}
    50%{top:211px;}
    100%{top:calc(211px - 5px);}
}
@keyframes deco5{
    0%{top:calc(252px - 10px);}
    50%{top:252px;}
    100%{top:calc(252px - 10px);}
}
@keyframes deco6{
    0%{top:calc(211px - 25px);}
    50%{top:211px;}
    100%{top:calc(211px - 25px);}
}


/*box6*/
#box6{height:512px; background:#23507d; position:relative; overflow:hidden; padding:49px 0 0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box6 .tit{width:276px; margin:17px auto 32px;}
#box6 .cntWrap{width:calc(100% - 24px); margin:0 auto;}
#box6 .cntWrap a{display:flex; flex-wrap:wrap;}
#box6 .cntWrap a .img1{width:63%; transform:rotateY(90deg); transition:all 1s ease;}
#box6 .cntWrap a .img2{width:35%; transform:rotateY(90deg); transition:all 1s ease;}
#box6 .cntWrap a .imgs.flip{transform:rotateY(0deg); transition:all 1s ease;}
#box6 .cntWrap a .txt{width:calc(100% - 2%); margin-top:18px;}

/*box7*/
#box7{background:#12101c; width:100%; height:60px; display:flex;}
#box7 a{display:block; margin:auto;}
#box7 a img{width:150px;}

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


/* BASIC css end */