/* 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{height:1017px; background:#c3eedd; position:relative;}
#intro .top{width:100%; height:91px; border-bottom:1px solid #88d7c2; position:absolute; top:0; left:0;}
#intro .top .event{width:173px; position:absolute; top:34px; left:calc(50% - 173px/2 - 465px);}
#intro .top .logo{width:155px; position:absolute; top:34px; left:calc(50% - 155px/2);}
#intro .top .date{width:261px; position:absolute; top:34px; left:calc(50% - 261px/2 + 465px);}
#intro .tit{width:708px; position:absolute; top:323px; left:calc(50% - 708px/2 - 205px); z-index:3;}
#intro .prd{width:1142px; position:absolute; bottom:131px; left:calc(50% - 1142px/2 + 435px); z-index:2;}
#intro .bot{width:100%; height:134px; background:#b5e9d5; position:absolute; bottom:0; left:0; z-index:1;}

/*box2*/
#box2{height:1042px; background:#f5f5f5; position:relative;}
#box2 .ico{width:107px; position:absolute; top:98px; left:calc(50% - 107px/2); animation:ico 5s linear infinite;}
#box2 .tit{width:399px; position:absolute; top:248px; left:calc(50% - 399px/2);}
#box2 .cntWrap{width:1141px; height:494px; position:absolute; top:381px; left:calc(50% - 1141px/2);}
#box2 .cntWrap .cnt1{width:370px; position:absolute; top:0; left:0;}
#box2 .cntWrap .cnt2{width:756px; position:absolute; top:0; right:0;}
#box2 .info{width:442px; position:absolute; top:928px; left:calc(50% - 442px/2);}

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


/*box4*/
#box4{height:2505px; background:#fff; position:relative;}
#box4 .ico{width:342px; position:absolute; top:148px; left:calc(50% - 342px/2);}
#box4 .tit{width:653px; position:absolute; top:393px; left:calc(50% - 653px/2);}
#box4 .tags{width:1158px; position:absolute; top:529px; left:calc(50% - 1158px/2);}
#box4 .subtit{width:528px; position:absolute; top:693px; left:calc(50% - 528px/2);}
#box4 .vid{width:855px; position:absolute; top:971px; left:calc(50% - 855px/2); border-radius:15px;}
#box4 .cnt{width:1109px; position:absolute; top:1685px; left:calc(50% - 1109px/2);}

/*box5*/
#box5{height:1392px; background:#e7f3ee; position:relative;}
#box5 .tit{width:413px; position:absolute; top:148px; left:calc(50% - 413px/2);}
#box5 a{display:block; width:572px; height:890px;}
#box5 .prd1{position:absolute; top:363px; left:calc(50% - 572px/2 - 295px); transform:rotateY(90deg); transition:all 1s ease;}
#box5 .prd2{position:absolute; top:363px; left:calc(50% - 572px/2 + 295px); transform:rotateY(90deg); transition:all 1s ease;}
#box5 a img{width:100%;}

/*box6*/
#box6{height:1240px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_6-bg.jpg") no-repeat center / cover; position:relative; overflow:hidden;}
#box6 .tit{width:466px; position:absolute; top:149px; left:calc(50% - 466px/2);}
#box6 .cnt{width:1170px; height:824px; position:absolute; top:281px; left:calc(50% - 1170px/2);}
#box6 .cnt .imgs{width:514px; position:absolute; top:51px; left:calc(50% - 514px/2 - 275px); z-index:1;}
#box6 .cnt .gift{width:575px; position:absolute; top:49px; left:calc(50% - 575px/2 + 247px); z-index:2;}
#box6 .cnt .txt{width:1059px; position:absolute; top:483px; left:calc(50% - 1059px/2); z-index:1;}
#box6 .cnt .box{width:100%;}

/*box7*/
#box7{height:1573px; background:#e7f3ee; position:relative; overflow:hidden;}
#box7 .tit{width:649px; position:absolute; top:148px; left:calc(50% - 649px/2);}
#box7 .subtit1{width:698px; position:absolute; top:372px; left:calc(50% - 698px/2);}
#box7 .subtit2{width:577px; position:absolute; top:525px; left:calc(50% - 577px/2);}

#box7 .imgs{width:456px; position:absolute; top:654px; left:calc(50% - 456px/2); transform:scale(0.7); opacity:0; transition:all 2s ease;}
#box7 .tag1{width:239px; position:absolute; top:calc(734px + 50px); left:calc(50% - 239px/2 - 222px); opacity:0; transition:all 2s ease;}
#box7 .tag2{width:240px; position:absolute; top:calc(816px + 50px); left:calc(50% - 240px/2 + 188px); opacity:0; transition:all 2s ease;}


#box7 .info{width:773px; position:absolute; top:1179px; left:calc(50% - 773px/2);}
#box7 a.btn{display:block; width:1140px; height:100px; position:absolute; top:1323px; left:calc(50% - 1140px/2);}
#box7 a.btn img{width:100%;}

/*box8*/
#box8{height:2472px; background:#fff; position:relative; overflow:hidden;}
#box8 .tit{width:558px; position:absolute; top:149px; left:calc(50% - 558px/2);}
#box8 .deco{width:295px; position:absolute; top:148px; left:0}
#box8 ul{display:flex; flex-wrap:wrap; width:1165px; position:absolute; top:496px; left:calc(50% - 1165px/2);}
#box8 ul li{width:50%; position:relative; opacity:0; transition:all 2s ease;}
#box8 ul li:nth-child(1),#box8 ul li:nth-child(2){margin-top:calc(0px + 50px);}
#box8 ul li:nth-child(3),#box8 ul li:nth-child(4){margin-top:calc(172px + 50px);}
#box8 ul li .tag{width:100%; position:absolute; top:calc(-98px + 50px); left:0; opacity:0; transition:all 2s ease;}
#box8 ul li a.prd{display:block;}
#box8 ul li a.prd img{width:100%;}
#box8 a.btn{display:block; width:1140px; height:100px; position:absolute; top:2250px; left:calc(50% - 1140px/2);}
#box8 a.btn img{width:100%;}

/*box9*/
#box9{height:2955px; background:#f5f5f5; position:relative; overflow:hidden;}
#box9 .tit{width:688px; position:absolute; top:150px; left:calc(50% - 688px/2);}
#box9 .deco{width:299px; position:absolute; top:160px; right:0;}
#box9 .subtit1{width:751px; position:absolute; top:487px; left:calc(50% - 751px/2);}
#box9 .subtit2{width:705px; position:absolute; top:1641px; left:calc(50% - 751px/2);}
#box9 .slideWrap{width:1170px; height:908px;}
#box9 .slideWrapA{position:absolute; top:597px; left:calc(50% - 1170px/2);}
#box9 .slideWrapB{position:absolute; top:1747px; left:calc(50% - 1170px/2);}
#box9 .slideWrap .box{width:100%; position:absolute; top:106px; 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 .swiper-container{width:1148px;  height:800px; position:absolute; top:106px; left:calc(50% - 1148px/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:56px; height:56px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_9-arrwR.png") no-repeat center; background-size:cover; left:calc(50% - 56px / 2 + 660px); top: 50%; opacity:1;}
#box9 .slideWrap .swiper-button-prev{width:56px; height:56px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_9-arrwL.png") no-repeat center; background-size:cover; left:calc(50% - 56px / 2 - 660px); top: 50%; opacity:1;}
#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:1140px; height:100px; position:absolute; top:2706px; left:calc(50% - 1140px/2);}
#box9 a.btn img{width:100%;}

/*box10*/
#box10{height:1368px; background:#e7f3ee; position:relative; overflow:hidden;}
#box10 .tit{width:528px; position:absolute; top:149px; left:calc(50% - 528px/2);}
#box10 .slideWrap{width:100%; height:694px; position:absolute; top:393px; left:0; z-index:2;}
#box10 .slideWrap #box10SliderA{width:100%; position:absolute; top:0; left:0;}
#box10 .slideWrap #box10SliderA ul > li{width:1223px; margin-top:120px; 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:1223px; height:694px; position:absolute; top:0; left:calc(50% - 1223px/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:15px; height:23px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_10-arrwR.png") no-repeat center; background-size:cover; left:1110px; top:577px; opacity:1;}
#box10 .slideWrap #box10SliderB .swiper-button-prev{width:15px; height:23px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_10-arrwL.png") no-repeat center; background-size:cover; left:1054px; top:577px; opacity:1;}
#box10 .slideWrap #box10SliderB .swiper-button-prev::after{content:""; display:block; width:2px; height:22px; background:#d3d3d3; position:absolute; top:1px; left:35px;}

#box10 .slideWrap .box{width:1223px; position:absolute; bottom:0; left:calc(50% - 1223px/2);}
#box10 a.btn{display:block; width:1140px; height:100px; position:absolute; top:1119px; left:calc(50% - 1140px/2);}
#box10 a.btn img{width:100%;}

/*box11*/
#box11{height:1363px; background:#f8f8f8; position:relative; overflow:hidden;}
#box11 .tit{width:653px; position:absolute; top:145px; left:calc(50% - 653px/2);}
#box11 .slideWrap{width:100%; height:694px; position:absolute; top:389px; left:0; z-index:2;}
#box11 .slideWrap #box11SliderA{width:100%; position:absolute; top:0; left:0;}
#box11 .slideWrap #box11SliderA ul > li{width:1223px; margin-top:120px; 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:1223px; height:694px; position:absolute; top:0; left:calc(50% - 1223px/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:15px; height:23px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_11-arrwR.png") no-repeat center; background-size:cover; left:1110px; top:577px; opacity:1;}
#box11 .slideWrap #box11SliderB .swiper-button-prev{width:15px; height:23px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY8_11-arrwL.png") no-repeat center; background-size:cover; left:1054px; top:577px; opacity:1;}
#box11 .slideWrap #box11SliderB .swiper-button-prev::after{content:""; display:block; width:2px; height:22px; background:#d3d3d3; position:absolute; top:1px; left:35px;}

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

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




/* BASIC css end */