/* 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;
}
 
.wrap a{display:block; margin:0 auto;}

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

/*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,
.swiper-button-next:after, .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; background:#fff; margin:0 7px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important;}
*/

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

/*target point*/
.posrel{position:relative;}
#tar1{position:absolute; top:-200px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-200px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-200px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-200px; 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:#f1fad6;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative; margin:0;}
#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:4696px; overflow:hidden; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY3_1-bg.jpg") no-repeat top center / cover; position:relative;}

#intro .dday{width:671px; position:absolute; top:0; left:calc(50% - 671px/2 - 520px);}
#intro .date{width:597px; position:absolute; top:0; left:calc(50% - 597px/2 + 550px);}
#intro .logo{width:779px; position:absolute; top:113px; left:calc(50% - 779px/2);}
#intro .title{width:1059px; position:absolute; top:474px; left:calc(50% - 1059px/2);}

#intro .hole{width:806px; position:absolute; top:2215px; left:calc(50% - 806px/2); z-index:2;}
#intro .light{width:1274px; position:absolute; top:1512px; left:calc(50% - 1274px/2 - 10px); z-index:1; opacity:0;}

#intro .cards{width:491px; height:612px; position:absolute; transition: transform 1s ease, opacity 1s ease; z-index:5;}
#intro .cards img{display:none;}
#intro .cards img.on{display:block;}

/* 기본 숨김 */
#intro .cardodd,#intro .cardeven,#intro .cardlast {display: none;}
#intro .cardodd{top:1625px; left:calc(50% - 491px/2 - 180px); z-index:3;}
#intro .cardeven{top:1387px; left:calc(50% - 491px/2 + 210px); z-index:4;}
#intro .cardlast{top:1495px; left:calc(50% - 491px/2); z-index:3;}

/* 시작점 */
#intro .cardodd.is-start{transform: translate(110px, 110px) rotate(9deg);}
#intro .cardeven.is-start{transform: translate(-110px, 110px) rotate(-9deg);}
#intro .cardlast.is-start{transform: translate(0px, 110px) rotate(-19deg);}

/* 끝점 */
#intro .cardodd.is-end{transform: translate(0px, 0px) rotate(-19deg);}
#intro .cardeven.is-end{transform: translate(0px, 0px) rotate(19deg);}
#intro .cardlast.is-end{transform: translate(0px, 0px) rotate(0deg);}

/*box2*/
#box2{width:2649px; height:2355px; background:transparent; position:absolute; top:2623px; left:calc(50% - 2649px/2); z-index:1;}
#box2 .cnt{width:100%;}
#box2 a.btn1{width:432px; height:121px; position:absolute; top:780px; left:calc(50% - 432px/2 - 320px);}
#box2 a.btn2{width:466px; height:121px; position:absolute; top:1320px; left:calc(50% - 466px/2 + 300px);}
#box2 a > img{width:100%;}

/*box3*/
#box3{width:100%; height:1815px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY3_3-bg.jpg") no-repeat center / cover; position:relative;}
#box3 .title{width:827px; position:absolute; top:427px; left:calc(50% - 827px/2);}

#box3 .coups{width:428px; z-index:3; opacity:0; transition:all 1s ease;}
#box3 .coup1{position:absolute; top:calc(690px + 80px); left:calc(50% - 428px/2 - 400px);}
#box3 .coup2{position:absolute; top:calc(690px + 80px); left:calc(50% - 428px/2);}
#box3 .coup3{position:absolute; top:calc(690px + 80px); left:calc(50% - 428px/2 + 400px);}

#box3 .holes{width:261px; z-index:2;}
#box3 .hole1{position:absolute; top:1203px; left:calc(50% - 261px/2 - 400px);}
#box3 .hole2{position:absolute; top:1203px; left:calc(50% - 261px/2);}
#box3 .hole3{position:absolute; top:1203px; left:calc(50% - 261px/2 + 400px);}

#box3 .lights{width:412px; z-index:1; opacity:0;}
#box3 .light1{position:absolute; top:976px; left:calc(50% - 412px/2 - 400px - 3px);}
#box3 .light2{position:absolute; top:976px; left:calc(50% - 412px/2 - 3px);}
#box3 .light3{position:absolute; top:976px; left:calc(50% - 412px/2 + 400px - 3px);}

#box3 a.btn{width:1125px; height:110px; position:absolute; top:1363px; left:calc(50% - 1125px/2);}
#box3 a > img{width:100%;}

#box3 .info{width:729px; position:absolute; top:1546px; left:calc(50% - 729px/2);}

/*box4*/
#box4{width:100%; height:2250px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY3_4-bg.jpg") no-repeat center / cover; position:relative;}
#box4 .title{width:871px; position:absolute; top:332px; left:calc(50% - 871px/2);}
#box4 a.prd{width:1245px; height:1242px; position:absolute; top:700px; left:calc(50% - 1245px/2);}
#box4 a > img{width:100%;}

/*box6*/
#box6{width:100%; height:2383px; background:#fdfdfd; position:relative;}

#box6 .title{width:729px; position:absolute; top:313px; left:calc(50% - 729px/2);}

#box6 .slideWrap{width:1217px; height:1217px; position:absolute; top:631px; left:calc(50% - 1217px/2);}
#box6 .slideWrap #box6Slider{width:100%; height:100%;}
#box6 .slideWrap #box6Slider .swiper-container .swiper-wrapper > li a{display:block;}
#box6 .slideWrap #box6Slider .swiper-container .swiper-wrapper > li a img{width:100%;}

#box6 .slideWrap .swiper-pagination{width:100%; top:711px !important; left:0px !important;}
#box6 .slideWrap .swiper-pagination .swiper-pagination-bullet{width:25px; height:25px; border-radius:13px; background:#f4f4f4; opacity:1; margin:0 6px;}
#box6 .slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#dde6cb; opacity:1;}

#box6 a.btn{width:1222px; height:110px; position:absolute; top:1961px; left:calc(50% - 1222px/2);}
#box6 a.btn > img{width:100%;}

/*box7*/
#box7{width:100%; height:2384px; background:#f1fad6; position:relative;}
#box7 .title{width:1005px; position:absolute; top:309px; left:calc(50% - 1005px/2);}

#box7 .slideWrap{width:1217px; height:1217px; position:absolute; top:628px; left:calc(50% - 1217px/2);}
#box7 .slideWrap #box7Slider{width:100%; height:100%;}
#box7 .slideWrap #box7Slider .swiper-container .swiper-wrapper > li a{display:block;}
#box7 .slideWrap #box7Slider .swiper-container .swiper-wrapper > li a img{width:100%;}

#box7 .slideWrap .swiper-pagination{width:100%; top:711px !important; left:0px !important;}
#box7 .slideWrap .swiper-pagination .swiper-pagination-bullet{width:25px; height:25px; border-radius:13px; background:#eef2e1; opacity:1; margin:0 6px;}
#box7 .slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#a3bc93; opacity:1;}

#box7 a.btn{width:1220px; height:110px; position:absolute; top:1955px; left:calc(50% - 1220px/2);}
#box7 a.btn > img{width:100%;}

/*box8*/
#box8{width:100%; height:4789px; background:#3c5c18; position:relative;}

#box8 .title{width:750px; padding:310px 0 151px;}
#box8 a.cnt1{width:1217px; height:1175px; margin-bottom:150px;}
#box8 a.cnt2{width:1217px; height:1186px; margin-bottom:150px;}
#box8 a.cnt3{width:1217px; height:1186px;}
#box8 a > img{width:100%;}

/*box9*/
#box9{width:100%; height:5844px; background:#def3b8; position:relative;}
#box9 .title{width:804px; padding:313px 0 151px;}

#box9 a.cnts{width:1217px; height:1217px;}
#box9 a.cnt1{margin-bottom:203px;}
#box9 a.cnt2{margin-bottom:170px;}
#box9 a.cnt3{margin-bottom:168px;}

#box9 a.btns{width:1241px; height:121px;}
#box9 a.btn1{margin-bottom:30px;}
#box9 a.btn2{margin-bottom:154px;}
#box9 a.btn3{margin-bottom:30px;}

#box9 a > img{width:100%;}

/*caution*/
#caution{background:#414141;}
#caution img{margin:auto; padding:175px 0;}

/* BASIC css end */