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

/*target point*/
.posrel{position:relative;}
#tar1{position:absolute; top:-199px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-199px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-199px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-199px; 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:104px; width:100%; background:#101418;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative;}
#header a.menu img {height:104px;}
#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;}

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

/*intro*/
#intro{width:100%; height:1040px; overflow:hidden; background:#f7f8f8;}
#intro .slideWrap{width:100%; height:100%;}
#intro .slideWrap #box1Slider{width:100%; height:100%;}
#intro .slideWrap #box1Slider > ul > li{display:flex; flex-wrap:wrap; opacity:0 !important;}
#intro .slideWrap #box1Slider > ul > li.swiper-slide-active{opacity:1 !important;}
#intro .slideWrap #box1Slider > ul > li .left{width:calc(100% - 800px); height:100%; position:relative;}
#intro .slideWrap #box1Slider > ul > li .right{width:800px; height:100%; position:relative;}

#intro .slideWrap #box1Slider > ul > li .left .inn{position:absolute; top:229px; left:128px;}
#intro .slideWrap #box1Slider > ul > li .left .date{width:456px; position:absolute; top:0px; left:0px;}
#intro .slideWrap #box1Slider > ul > li .left .tit{width:985px; position:absolute; top:57px; left:-3px;}
#intro .slideWrap #box1Slider > ul > li .left .subtit{width:607px; position:absolute; top:181px; left:0px;}
#intro .slideWrap #box1Slider > ul > li .left .cnt1{width:324px; position:absolute; top:350px; left:-3px;}
#intro .slideWrap #box1Slider > ul > li .left .cnt2{width:324px; position:absolute; top:350px; left:347px;}
#intro .slideWrap #box1Slider > ul > li .left .cnt3{width:324px; position:absolute; top:350px; left:697px;}

#intro .slideWrap #box1Slider > ul > li .right .txt{position:absolute; bottom:69px; right:60px;}
#intro .slideWrap #box1Slider > ul > li:nth-child(1) .right{background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY9_1-slide1-img.png") no-repeat center / cover;}
#intro .slideWrap #box1Slider > ul > li:nth-child(2) .right{background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY9_1-slide2-img.png") no-repeat center / cover;}
#intro .slideWrap #box1Slider > ul > li:nth-child(3) .right{background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY9_1-slide3-img.png") no-repeat center / cover;}
#intro .slideWrap #box1Slider > ul > li:nth-child(4) .right{background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY9_1-slide4-img.png") no-repeat center / cover;}


@media only screen and (max-width:2000px) {
    #intro .slideWrap #box1Slider > ul > li .left .inn{transform:scale(0.8);}
}


/*box2*/
#box2{width:100%; height:1073px; background:#fff;}
#box2 .tit{width:641px; padding:160px 0 80px;}
#box2 .coup{width:1080px; margin:0 auto 80px;}
#box2 .btn{width:1080px; height:96px; display:block; margin:0 auto;}
#box2 .btn img{width:100%;}
#box2 .info{width:724px; margin-top:60px;}

/*box4*/
#box4{width:100%; height:4252px; background:#f7f8f8; position:relative;}
#box4 .tit1{width:330px; position:absolute; top:calc(160px + 50px); left:calc(50% - 330px/2); opacity:0; transition:all 1.5s ease;}
#box4 .cnt1{width:1162px; position:absolute; top:409px; left:calc(50% - 1162px/2);}
#box4 .tit2{width:598px; position:absolute; top:calc(1681px + 50px); left:calc(50% - 598px/2); opacity:0; transition:all 1.5s ease;}
#box4 .cnt2{width:1162px; position:absolute; top:1907px; left:calc(50% - 1162px/2);}
#box4 .tit3{width:565px; position:absolute; top:calc(2895px + 50px); left:calc(50% - 565px/2); opacity:0; transition:all 1.5s ease;}
#box4 .cnt3{width:1162px; position:absolute; top:3189px; left:calc(50% - 1162px/2);}
#box4 .info{width:523px; position:absolute; top:3909px; left:calc(50% - 523px/2);}

/*box5*/
#box5{width:100%; height:2245px; background:#bfe0dd; position:relative;}
#box5 .tit{width:687px; padding:160px 0 0;}
#box5 a{display:block; transform:rotateY(0deg); transition:all 1.5s ease;}
#box5 a:nth-child(2){width:572px; height:920px; position:absolute; top:320px; left:calc(50% - 572px/2 - 285px);}
#box5 a:nth-child(3){width:572px; height:920px; position:absolute; top:320px; left:calc(50% - 572px/2 + 285px);}
#box5 a:nth-child(4){width:1142px; height:810px; position:absolute; top:1286px; left:calc(50% - 1142px/2);}
#box5 a img{width:100%;}

/*box6*/
#box6{width:100%; height:1234px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY9_6-bg.jpg") no-repeat center / cover; position:relative;}
#box6 .tit{width:756px; padding:160px 0 79px;}
#box6 .txt{width:657px;}
#box6 .bubb{width:755px; position:absolute; top:673px; left:calc(50% - 755px/2); animation:bubble 3s ease-in-out infinite;}
#box6 .icon{width:132px; position:absolute; top:951px; left:calc(50% - 132px/2 + 450px);}

@keyframes bubble{
    0%{top:653px;}
    50%{top:673px;}
    100%{top:653px;}
}

/*box7*/
#box7{width:100%; height:2508px;}
#box7 .tit{width:740px; padding:160px 0 100px;}
#box7 a{width:1240px; height:440px; display:block; margin:0 auto 35px;}
#box7 a img{width:100%;}

/*box8*/
#box8{width:100%; height:1108px; background:#eaeaea; position:relative; overflow:hidden;}
#box8 .tit{width:546px; padding:160px 0 0;}
#box8 .deco1{width:143px; position:absolute; top:27px; left:28px; z-index:1;}
#box8 .deco2{width:178px; position:absolute; top:37px; right:29px; z-index:1;}
#box8 .slideWrap{width:calc(100% - 456px); height:590px; position:absolute; top:380px; left:456px; z-index:2;}
#box8 .slideWrap .swiper-container ul li a{display:block;}
#box8 .slideWrap .swiper-container ul li a img{width:100%;}
#box8 .slideWrap #box8SliderA ul li{width:auto; height:590px; opacity:0.5 !important; transition:all 1.5s ease;}
#box8 .slideWrap #box8SliderA ul li.swiper-slide-active{opacity:1 !important; transition:all 1.5s ease; margin: 0 245px 0 0 !important;}
#box8 .slideWrap #box8SliderA ul li a .prd{width:154px; position:absolute; bottom:0; left:calc(50% - 154px/2); z-index:2; transition:all 1.5s ease;}
#box8 .slideWrap #box8SliderA ul li.swiper-slide-active a .prd{width:488px; position:absolute; bottom:0; left:0; transition:all 1.5s ease;}
#box8 .slideWrap #box8SliderA ul li a .box{width:230px; position:absolute; bottom:0; left:calc(50% - 230px/2); z-index:1; transition:all 1.5s ease;}
#box8 .slideWrap #box8SliderA ul li.swiper-slide-active a .box{width:488px; position:absolute; bottom:0; left:0; z-index:1; transition:all 1.5s ease;}

#box8 .slideWrap #box8SliderB{width:533px; position:absolute; top:164px; left:520px;}
#box8 .slideWrap #box8SliderB ul li{opacity:0 !Important; transition:all 1.5s ease; position:absolute; top:0; left:0;}
#box8 .slideWrap #box8SliderB ul li.active{opacity:1 !important; transition:all 1.5s ease;}
#box8 .slideWrap #box8SliderB ul li img{width:100%;}
#box8 .slideWrap .swiper-button-prev{width:15px; height:23px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY9_8-arrwL.png") no-repeat center; background-size:cover; top:562px; left:389px;}
#box8 .slideWrap .swiper-button-next{width:15px; height:23px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY9_8-arrwR.png") no-repeat center; background-size:cover; top:562px; left:446px;}
#box8 .slideWrap .swiper-button-prev::after{content:""; display:block; width:2px; height:22px; background:#d3d3d3; position:absolute; top:1px; left:35px;}

/*box9*/
#box9{width:100%; height:1936px; background:#fff;}
#box9 .tit{width:411px; padding:160px 0 99px;}
#box9 ul{width:1155px; display:flex; flex-wrap:wrap; margin:0 auto;}
#box9 ul li{width:calc(33.3333% - 24px); margin:0 12px 49px;}
#box9 ul li a{display:block;}
#box9 ul li a img{width:100%;}

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











/* BASIC css end */