/* 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:68px; height:79px; 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:155px;}

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

/*header*/
#header{text-align:center; display:flex; background-color:#6e8ddd; background-size:cover; overflow:hidden; position:relative; justify-content:center; position:static; opacity:1; height: 156px; width:100%;}
#header.fixed{position:fixed; top:0; left:0; z-index:9999;}
#header a.menu{position:relative;}
#header a.menu img {height:156px;}
#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:1530px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY1_1-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}

#intro .topL{width:87px; position:absolute; top:20px; left:20px;}
#intro .topM{width:453px;position:absolute; top:-1px; left:calc(50% - 453px/2);}
#intro .topR{width:87px; position:absolute; top:20px; right:20px;}

#intro .titWrap{width:883px; height:942px; position:absolute; top:207px; left:calc(50% - 883px/2); position:relative;}
#intro .titWrap .moon{width:883px; position:absolute; top:0; left:0;}

#intro .titWrap .cloud1{width:381px; position:absolute; top:378px; left:-310px;}
#intro .titWrap .cloud2{width:580px; position:absolute; top:170px; left:650px;}

#intro .titWrap .snake{width:334px; position:absolute; top:210px; left:-20px;}

#intro .titWrap .twink1{width:58px; position:absolute; top:0; left:0;}
#intro .titWrap .twink2{width:58px; position:absolute; top:0; left:0;}

#intro .titWrap .tit1{width:187px; position:absolute; top:365px; left:-38px; animation:titAni 2s ease-in-out infinite;}
#intro .titWrap .tit2{width:181px; position:absolute; top:375px; left:139px; animation:titAni 2s ease-in-out infinite; animation-delay:0.1s;}
#intro .titWrap .tit3{width:203px; position:absolute; top:345px; left:348px; animation:titAni 2s ease-in-out infinite; animation-delay:0.2s;}
#intro .titWrap .tit4{width:178px; position:absolute; top:375px; left:586px; animation:titAni 2s ease-in-out infinite; animation-delay:0.3s;}
#intro .titWrap .tit5{width:178px; position:absolute; top:375px; left:745px; animation:titAni 2s ease-in-out infinite; animation-delay:0.4s;}

@keyframes titAni{
    0%{transform:translate3d(0,0px,0);}
    10%{transform:translate3d(0,-25px,0);}
    20%{transform:translate3d(0,0px,0);}
    100%{transform:translate3d(0,0px,0);}
}


#intro .titWrap .prd1{width:269px; position:absolute; top:676px; left:-50px; animation:prdAni 2s ease-in-out infinite;}
#intro .titWrap .prd2{width:175px; position:absolute; top:710px; left:370px; animation:prdAni2 2s ease-in-out infinite;}
#intro .titWrap .prd3{width:250px; position:absolute; top:710px; left:700px; animation:prdAni 2s ease-in-out infinite;}

@keyframes prdAni{
    0%{transform:translate3d(0,0px,0);}
    50%{transform:translate3d(0,35px,0);}
    100%{transform:translate3d(0,0px,0);}
}
@keyframes prdAni2{
    0%{transform:translate3d(0,35px,0);}
    50%{transform:translate3d(0,0px,0);}
    100%{transform:translate3d(0,35px,0);}
}

#intro .starL{width:18px; position:absolute; top:0; left:0;}
#intro .starL1{position:absolute; top:82px; left:calc(50% - 18px/2 - 350px); animation:starL 2s ease-in-out infinite;}
#intro .starL2{position:absolute; top:321px; left:calc(50% - 18px/2 + 340px); animation:starL 2.3s ease-in-out infinite;}
#intro .starL3{position:absolute; top:427px; left:calc(50% - 18px/2 + 700px); animation:starL 2s ease-in-out infinite;}
#intro .starL4{position:absolute; top:789px; left:calc(50% - 18px/2 - 500px); animation:starL 2.3s ease-in-out infinite;}
#intro .starL5{position:absolute; top:1001px; left:calc(50% - 18px/2 + 750px); animation:starL 2.3s ease-in-out infinite;}
#intro .starL6{position:absolute; top:1127px; left:calc(50% - 18px/2 - 790px); animation:starL 2s ease-in-out infinite;}
#intro .starL7{position:absolute; top:1229px; left:calc(50% - 18px/2 + 270px); animation:starL 2.3s ease-in-out infinite;}

#intro .starS{width:14px; position:absolute; top:0; left:0;}
#intro .starS1{position:absolute; top:66px; left:calc(50% - 14px/2 + 600px); opacity:0.1; animation:starS 2.6s ease-in-out infinite;}
#intro .starS2{position:absolute; top:343px; left:calc(50% - 14px/2 - 680px); opacity:0.1; animation:starS 2.6s ease-in-out infinite;}
#intro .starS3{position:absolute; top:573px; left:calc(50% - 14px/2 + 550px); opacity:0.1; animation:starS 2.6s ease-in-out infinite;}
#intro .starS4{position:absolute; top:1066px; left:calc(50% - 14px/2 - 200px); opacity:0.1; animation:starS 2.6s ease-in-out infinite;}

@keyframes starL{
    0%{opacity:1;}
    50%{opacity:0.1;}
    100%{opacity:1;}
}

@keyframes starS{
    0%{opacity:0.1;}
    50%{opacity:1;}
    100%{opacity:0.1;}
}


#intro .botbg{width:1780px; position:absolute; bottom:-1px; left:calc(50% - 1780px/2 + 30px);}
#intro .botdec1{width:328px; position:absolute; bottom:-6px; left:calc(50% - 328px/2 - 534px);}
#intro .botdec2{width:410px; position:absolute; bottom:0; left:calc(50% - 410px/2 + 528px);}

/*box3*/
#box3{height:1841px; background:url(http://skinfood.img15.kr/data/content/skinfoodday/BY1_3-bg.jpg) no-repeat center center / cover; position:relative;}

#box3 .tit{width:503px; padding:160px 0 79px;}
#box3 .tree{position:absolute; top:336px; right:-1px;}

#box3 .cntWrap{margin:0 auto 100px; position:relative; width:950px; height:1019px;}
#box3 .cntWrap .bag{width:530px; position:absolute; top:300px; right:25px; transform-origin:50% 100%; animation:bag 2s ease-in-out infinite;}

@keyframes bag{
    0%{transform:rotate(-4.5deg);}
    50%{transform:rotate(2.5deg);}
    100%{transform:rotate(-4.5deg);}
}


#box3 .cntWrap .tag{width:206px; position:absolute; top:0; right:30px;}

#box3 .btnWrap{width:991px; position:relative; margin:0 auto;}
#box3 .btnWrap .bird{width:129px; position:absolute; top:-67px; left:-16px;}
#box3 .btnWrap .btn{width:100%;}

/*box4*/
#box4{height:3727px; background:url(http://skinfood.img15.kr/data/content/skinfoodday/BY1_4-bg.jpg) no-repeat center bottom / cover; position:relative;}

#box4 .tit{width:582px; padding:160px 0 118px;}
#box4 .cntWrap{margin:0 auto 79px; width:1118px; height:821px; position:relative;}
#box4 .cntWrap .present{width:246px; position:absolute; bottom:-70px; right:-80px;}
#box4 a{display:block; width:991px; height:120px; margin:80px auto 180px;}
#box4 a .btn{width:100%;}

#box4 .slideWrap{position:relative; height:1557px;}
#box4 .slideWrap .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY1_4-arrwR.png") no-repeat center; background-size:cover; right:calc(50% - 33px / 2 - 547px); top: 49%; opacity:1;}
#box4 .slideWrap .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY1_4-arrwL.png") no-repeat center; background-size:cover; left:calc(50% - 33px / 2 - 546px); top: 49%; opacity:1;}
#box4 .slideWrap #box4Slider {width:996px; height:100%;}
#box4 .slideWrap #box4Slider ul li {position:relative; width:996px; margin:0 auto;}
#box4 .slideWrap #box4Slider ul li img{width:100%;}

#box4 .slideWrap #box4Slider ul li a{display:block; width:50%; height:660px; position:absolute; top:0; left:0; margin:0;}
#box4 .slideWrap #box4Slider ul li a:nth-child(2){top:0; left:0;}
#box4 .slideWrap #box4Slider ul li a:nth-child(3){top:0; left:50%;}
#box4 .slideWrap #box4Slider ul li a:nth-child(4){top:670px; left:0;}
#box4 .slideWrap #box4Slider ul li a:nth-child(5){top:670px; left:50%;}
       
/*box5*/
#box5{height:3135px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY1_5-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}
#box5 .tit{width:404px; padding:160px 0 153px;}

#box5 .cntWrap{margin:0 auto 63px; width:1215px; height:663px; position:relative;}
#box5 .cntWrap .letter{width:520px; position:absolute; top:-10px; left:calc(50% - 520px/2); z-index:2;}
#box5 .cntWrap .deco{width:1215px; position:absolute; top:0; left:10px; z-index:1;}

#box5 .coupWrap{margin:0 auto 95px; width:1080px; height:687px; position:relative;}
#box5 .coupWrap .coup1{width:474px; position:absolute; top:94px; left:calc(50% - 474px/2 - 302px); z-index:1; opacity:0;}
#box5 .coupWrap .coup2{width:356px; position:absolute; top:0; left:calc(50% - 356px/2); z-index:2; opacity:0;}
#box5 .coupWrap .coup3{width:474px; position:absolute; top:94px; left:calc(50% - 474px/2 + 302px); z-index:3; opacity:0;}

#box5 .coupWrap .coup1.ani,
#box5 .coupWrap .coup2.ani,
#box5 .coupWrap .coup3.ani{opacity:1; transition:all 2s ease; -webkit-transition:all 2s ease; -moz-transition:all 2s ease;}

#box5 .car{width:537px; position:absolute; bottom:572px; left:calc(50% - 537px/2); z-index:2;}
#box5 .txt{width:337px; position:absolute; bottom:380px; left:calc(50% - 337px/2); z-index:2;}
#box5 .bgtop{width:100%; height:579px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY1_5-bg-top.jpg") no-repeat center top / cover; position:absolute; bottom:0; left:0;}

#box5 .btn{width:991px; position:absolute; bottom:159px; left:calc(50% - 991px/2); z-index:2;}


/*box6*/
#box6{height:2167px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY1_6-bg.jpg") no-repeat center bottom / cover; position:relative; overflow:hidden;}

#box6 .tit{width:428px; padding:160px 0 119px;}
#box6 .twink1{position:absolute; top:219px; left:calc(50% - 64px/2 - 390px);}
#box6 .twink2{position:absolute; top:328px; left:calc(50% - 78px/2 + 320px);}

#box6 a{width:994px; height:486px; display:block; margin:0 auto 35px;}
#box6 a img{width:100%;}

#box6 .deco{width:198px; position:absolute; bottom:0; left:calc(50% - 198px/2 + 660px);}


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


/* BASIC css end */