/* BASIC css start */
html {
  scroll-behavior: smooth;
}

#overlay_layer {
  display: none;
}

/* max-width 초기화 */
#layout_body {
  max-width: none !important;
}
.top-area {
  /*max-width: 1140px;*/
  margin: 0 auto;
}
.header__line-banner{
    margin: 0 auto;
}
.wrap {
  position: relative;
  width: 100%;
  min-width: 1140px;
}
.wrap * {
  font-family: YoonGothic !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
}

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

/*slider next,prev btn*/
.slideWrap .swiper-button-next, .slideWrap .swiper-button-prev{width:48px; height:73px; top:49%;}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after{display:none;}

/*slider pagination*/
.slideWrap{position:relative;}
.slideWrap .swiper-pagination{width:100%; bottom:-75px !important; left:0px !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet{width:24px; height:24px; border-radius:50%; background:#fff; border:1px solid #966c6c; margin:0 7px !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-bottom:80px;}

/*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: 80px; 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:80px;}
#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;}

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

/*logo tag spin animation*/
.tagWrap{position:relative;}
.tagWrap .logotxt{position:absolute; top:0; left:calc(50% - 124px/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:91px; border-bottom:1px solid rgba(255,255,255,0.3); z-index:10;}
#intro .top .imgs{width:100%; height:100%; position:relative;}
#intro .top .imgs .month{width:140px; position:absolute; top:39px; left:calc(50% - 140px/2 - 600px);}
#intro .top .imgs .logo{width:155px; position:absolute; top:35px; left:calc(50% - 155px/2);}
#intro .top .imgs .date{width:145px; position:absolute; top:39px; left:calc(50% - 145px/2 + 600px);}
#intro .top .imgs.imgbk{display:none;}

#intro .slideWrap .swiper-container ul > li{width:100%; height:1021px; position:relative;}
#intro .slideWrap .swiper-container ul > li:nth-child(1){background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY6_1-slide1.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.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.jpg") no-repeat center / cover;}
#intro .slideWrap .swiper-container ul > li .txtWrap{display:flex; flex-wrap:wrap; justify-content:left; width:771px; position:absolute; top:331px; left:calc(50% - 771px/2 - 11vw);}
#intro .slideWrap .swiper-container ul > li .txtWrap > a{display:block; width:100%; margin-top:93px;}
#intro .slideWrap .swiper-container ul > li .txtWrap img{margin:0;}

#intro .slideWrap #box1Slider .pag_box1Slider{width:771px; bottom:165px !important; left:calc(50% - 771px/2 - 11vw) !important; display:flex; flex-wrap:wrap; justify-content:left; padding-left:10px;}
#intro .slideWrap #box1Slider .pag_box1Slider .swiper-pagination-bullet{background:transparent; width:27px; height:27px; border:1px solid transparent; margin: 0 11px 0 0 !important; position:relative;}
#intro .slideWrap #box1Slider .pag_box1Slider .swiper-pagination-bullet::after{content:""; display:block; width:8px; height:8px; background:#fff; position:absolute; top:calc(50% - 8px/2); left:calc(50% - 8px/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:8px; height:8px; background:#000; position:absolute; top:calc(50% - 8px/2); left:calc(50% - 8px/2); border-radius:50%;}
#intro .slideWrap #box1Slider .pag_box1Slider .swiper-pagination-bullet.swiper-pagination-bullet-active.bk{border:1px solid #000;}

/*box3*/
#box3{height:1497px; background:#f4f4f8; position:relative; padding:150px 0 155px; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box3 .tit{width:693px; margin:53px auto 49px;}

#box3 .slideWrap{width:100%; position:absolute; top:537px; left:calc(50% - 622px/2); z-index:10;}
#box3 .slideWrap #box3SliderA {width:100%;}
#box3 .slideWrap #box3SliderA ul > li{width:622px !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:11px;}
#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:50px; position:relative;}
#box3 .slideWrap #box3SliderB ul > li{width:622px !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 .box3Btns{width:622px; position:absolute; top:470px; left:0;}
#box3 .slideWrap .box3Btns .swiper-button-next{width:15px; height:23px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY6_3-arrwR.png") no-repeat center; background-size:cover; left:760px; top:0; opacity:1;}
#box3 .slideWrap .box3Btns .swiper-button-prev{width:15px; height:23px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY6_3-arrwL.png") no-repeat center; background-size:cover; left:710px; top:0; opacity:1;}
#box3 .slideWrap .box3Btns .swiper-button-prev::after{content:""; display:block; width:2px; height:22px; background:#d3d3d3; position:absolute; top:0; left:31.5px;}
#box3 .txtbox{position:absolute; top:790px; left:calc(50% - 1058px/2 + 50px); z-index:9;}

/*box3 roll*/
#rolling{width:270px; height:100%; position:absolute; top:0; left:0;}
#rolling .roll{width:270px; 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:1491px; background:#fff; position:relative; padding:150px 0 200px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box4 .tit{width:528px; margin:53px auto 79px;}

#box4 .slideWrap{width:100%; position:relative;}
#box4 .slideWrap #box4SliderA {width:732px; position:absolute; top:0; left:calc(50% - 732px/2); z-index:10;}
#box4 .slideWrap #box4SliderA ul > li{width:732px; height:732px; 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:170px; left:0;}
#box4 .slideWrap #box4SliderB ul{transition: all 2s linear; -webkit-transition: all 2s linear; -moz-transition: all 2s linear;}
#box4 .slideWrap #box4SliderB ul > li{width:410px;}
#box4 .slideWrap #box4SliderB ul > li img{width:100%; opacity:1;}

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

/*box5*/
#box5{height:2334px; background:#e9efff; position:relative; overflow:hidden; padding:150px 0 203px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box5 .tit{width:521px; margin:53px auto 98px;}

#box5 .coupBox{width:559px; margin:0 auto; position:relative;}
#box5 .coupBox .tag{width:224px; position:absolute; bottom:44px; right:-80px;}

#box5 .coupWrap{width:1188px; margin:45px auto 73px; display:flex; flex-wrap:wrap; justify-content:center;}
#box5 .coupWrap img{margin:0 23px; width:calc(33.3333% - 46px);}
#box5 .coupWrap img:nth-child(4){margin-top:39px;}
#box5 .coupWrap img:nth-child(5){margin-top:39px;}

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

#box5 .coupLink{width:1140px; margin:74px auto 0; padding:82px 0 0; border-top:1px solid #fff;}
#box5 .coupLink .subtit{width:445px; margin:0 0 28px;}
#box5 .coupLink ul{display:flex; flex-wrap:wrap; margin:0 -16px;}
#box5 .coupLink ul > li{width:calc(25% - 32px); margin:0 16px;}
#box5 .coupLink ul > li a img{width:100%; }

#box5 .deco1{width:54px; position:absolute; top:1071px; left:calc(50% - 54px/2 - 530px); animation:deco1 3s ease-in-out infinite;}
#box5 .deco2{width:22px; position:absolute; top:930px; left:calc(50% - 22px/2 - 450px); animation:deco2 3s ease-in-out infinite;}
#box5 .deco3{width:38px; position:absolute; top:1004px; left:calc(50% - 38px/2 - 390px); animation:deco3 3s ease-in-out infinite;}
#box5 .deco4{width:77px; position:absolute; top:612px; left:calc(50% - 77px/2 + 380px); animation:deco4 3s ease-in-out infinite;}
#box5 .deco5{width:58px; position:absolute; top:736px; left:calc(50% - 58px/2 + 490px); animation:deco5 3s ease-in-out infinite;}
#box5 .deco6{width:29px; position:absolute; top:611px; left:calc(50% - 29px/2 + 560px); animation:deco6 3s ease-in-out infinite;}

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

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

@keyframes deco3{
    0%{top:calc(1004px - 50px);}
    50%{top:1004px;}
    100%{top:calc(1004px - 50px);}
}
@keyframes deco4{
    0%{top:calc(612px - 20px);}
    50%{top:612px;}
    100%{top:calc(612px - 20px);}
}
@keyframes deco5{
    0%{top:calc(736px - 30px);}
    50%{top:736px;}
    100%{top:calc(736px - 30px);}
}
@keyframes deco6{
    0%{top:calc(611px - 60px);}
    50%{top:611px;}
    100%{top:calc(611px - 60px);}
}


/*box6*/
#box6{height:1506px; background:#23507d; position:relative; overflow:hidden; padding:150px 0 180px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box6 .tit{margin:53px auto 87px;}
#box6 .cntWrap{width:1140px; margin:0 auto;}
#box6 .cntWrap a{display:flex; flex-wrap:wrap;}
#box6 .cntWrap a .img1{width:710px; transform:rotateY(90deg); transition:all 1s ease;}
#box6 .cntWrap a .img2{width:425px; transform:rotateY(90deg); transition:all 1s ease;}
#box6 .cntWrap a .imgs.flip{transform:rotateY(0deg); transition:all 1s ease;}
#box6 .cntWrap a .txt{margin-top:58px;}

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

/*caution*/
#caution{background:#000;}
#caution img{margin:auto; padding:160px 0;}


/* BASIC css end */