/* BASIC css start */
#overlay_layer {
  display: none;
}

#layout_header{
  z-index:9999;
}

button img {
  display: block;
}

.wrap {
  position: relative;
  width: 100%;
  overflow:hidden;
  /*margin-top:54px;*/
}
.wrap * {
  font-family: YoonGothic !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
    background:transparent;
}

.wrap a{display:block; margin:0 auto;}

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

/*slider next,prev btn*/
.slideWrap .swiper-button-next, .slideWrap .swiper-button-prev{width:22px; height:26px; top:52%; z-index:9;}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after{display:none;}

/*slider pagination*/
.slideWrap{position:relative;}
/*.slideWrap .swiper-pagination{width:100%; bottom:-30px !important; left:0px !important; z-index:9;}
.slideWrap .swiper-pagination .swiper-pagination-bullet{width:8px; height:8px; border-radius:50%; background:#fff; border:1px solid #966c6c; margin:0 2px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#966c6c; opacity:1 !important;}*/

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

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

/*header*/
#header{text-align:center; display:flex; flex-wrap:wrap; overflow:hidden; position:relative; justify-content:center; opacity:1; width:100%; background:#fff;}
#header.fixed{position:fixed; top:54px; left:0; z-index:9999;}
#header a.menu{position:relative; width:50%;}
#header a.menu img {width:100%;}
#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;}

#header::before{content:""; display:block; width:100%; height:1px; background:#fff; position:absolute; top:calc(50% - 1px/2); left:0; z-index:2; opacity:0.3;}
#header::after{content:""; display:block; width:1px; height:100%; background:#fff; position:absolute; top:0; left:calc(50% - 1px/2); z-index:2; opacity:0.3;}

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

.wrap .opacs{opacity:0; transition:all 2s ease;}

/*intro*/
#intro{width:100%; height:1323px; overflow:hidden; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY3_1-bg-m.jpg") no-repeat top center / cover; position:relative;}

#intro .dday{width:180px; position:absolute; top:0; left:calc(50% - 180px/2 - 125px);}
#intro .date{width:160px; position:absolute; top:0; left:calc(50% - 160px/2 + 135px);}
#intro .logo{width:220px; position:absolute; top:30px; left:calc(50% - 220px/2);}
#intro .title{width:302px; position:absolute; top:135px; left:calc(50% - 302px/2);}

#intro .hole{width:230px; position:absolute; top:633px; left:calc(50% - 230px/2); z-index:2;}
#intro .light{width:365px; position:absolute; top:431px; left:calc(50% - 365px/2 - 2px); z-index:1; opacity:1;}

#intro .cards{width:140px; height:175px; position:absolute; transition: transform 1s ease, opacity 1s ease; z-index:5;}
#intro .cards img{display:none; width:100%;}
#intro .cards img:nth-child(1){display:block;}
#intro .cards img.on{display:block;}

/* 기본 숨김 */
#intro .cardodd,#intro .cardeven,#intro .cardlast {display: none;}
#intro .cardodd{top:465px; left:calc(50% - 140px/2 - 50px); z-index:3;}
#intro .cardeven{top:396px; left:calc(50% - 140px/2 + 62px); z-index:4;}
#intro .cardlast{top:427px; left:calc(50% - 140px/2); z-index:3;}

/* 시작점 */
#intro .cardodd.is-start{transform: translate(30px, 30px) rotate(9deg);}
#intro .cardeven.is-start{transform: translate(-30px, 30px) rotate(-9deg);}
#intro .cardlast.is-start{transform: translate(0px, 30px) 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:717px; height:637px; background:transparent; position:absolute; top:749px; left:calc(50% - 717px/2 + 32px); z-index:1;}
#box2 .cnt{width:100%;}
#box2 a.btn1{width:123px; height:35px; position:absolute; top:210px; left:calc(50% - 123px/2 - 84px);}
#box2 a.btn2{width:133px; height:35px; position:absolute; top:358px; left:calc(50% - 133px/2 + 85px);}
#box2 a > img{width:100%;}

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

#box3 .coups{width:122px; z-index:3; opacity:1; transition:all 1s ease;}
#box3 .coup1{position:absolute; top:calc(196px + 30px); left:calc(50% - 122px/2 - 112px);}
#box3 .coup2{position:absolute; top:calc(196px + 30px); left:calc(50% - 122px/2);}
#box3 .coup3{position:absolute; top:calc(196px + 30px); left:calc(50% - 122px/2 + 112px);}

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

#box3 .lights{width:118px; z-index:1; opacity:1;}
#box3 .light1{position:absolute; top:278px; left:calc(50% - 118px/2 - 112px - 1px);}
#box3 .light2{position:absolute; top:278px; left:calc(50% - 118px/2 - 1px);}
#box3 .light3{position:absolute; top:278px; left:calc(50% - 118px/2 + 112px - 1px);}

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

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

/*box4*/
#box4{width:100%; height:643px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY3_4-bg-m.jpg") no-repeat center / cover; position:relative;}
#box4 .title{width:249px; position:absolute; top:95px; left:calc(50% - 249px/2);}
#box4 a.prd{width:336px; height:335px; position:absolute; top:200px; left:calc(50% - 336px/2);}
#box4 a > img{width:100%;}

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

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

#box6 .slideWrap{width:348px; height:348px; position:absolute; top:180px; left:calc(50% - 348px/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:200px !important; left:0px !important;}
#box6 .slideWrap .swiper-pagination .swiper-pagination-bullet{width:7px; height:7px; border-radius:4px; background:#f4f4f4; opacity:1; margin:0 2px;}
#box6 .slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#dde6cb; opacity:1;}

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

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

#box7 .slideWrap{width:348px; height:348px; position:absolute; top:179px; left:calc(50% - 348px/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:200px !important; left:0px !important;}
#box7 .slideWrap .swiper-pagination .swiper-pagination-bullet{width:7px; height:7px; border-radius:4px; background:#eef2e1; opacity:1; margin:0 2px;}
#box7 .slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#a3bc93; opacity:1;}

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

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

#box8 .title{width:214px; padding:88px 0 43px;}
#box8 a.cnt1{width:348px; height:336px; margin-bottom:43px;}
#box8 a.cnt2{width:348px; height:339px; margin-bottom:43px;}
#box8 a.cnt3{width:348px; height:339px;}
#box8 a > img{width:100%;}

/*box9*/
#box9{width:100%; height:1670px; background:#def3b8; position:relative;}
#box9 .title{width:230px; padding:88px 0 43px;}

#box9 a.cnts{width:348px; height:348px;}

#box9 a.cnt1{margin-bottom:58px;}
#box9 a.cnt2{margin-bottom:34px;}
#box9 a.cnt3{margin-bottom:33px;}

#box9 a.btns{width:354px; height:44px;}
#box9 a.btn1{margin-bottom:6px;}
#box9 a.btn2{margin-bottom:44px;}
#box9 a.btn3{margin-bottom:6px;}

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

/*caution*/
#caution{background:#414141;}
#caution img{width:80%; margin:auto; padding:52px 0;}


/* BASIC css end */