/* 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:76px; height:88px; top:44%;}
.slideWrap .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY4_arrwR.png") no-repeat top center / cover; right:-133px;}
.slideWrap .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY4_arrwL.png") no-repeat top center / cover; left:-133px;}
.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:37px; height:37px; background:#fff; border:3px solid #000; margin:0 28px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important; background:#ff6eae;}


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

/*target point*/
.posrel{position:relative;}
#tar1{position:absolute; top:-228px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-228px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-228px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-228px; 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:127px; width:100%; background:#fff4ce; border:3px solid #000;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative; margin:0;}
#header a.menu img {height:127px;}
#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:2108px; overflow:hidden; position:relative;}

#intro .date{width:203px; position:absolute; top:58px; right:200px; z-index:10;}
#intro .title{width:845px; position:absolute; top:337px; left:calc(50% - 845px/2); z-index:10;}
#intro .coupons{width:766px; position:absolute; top:844px; left:calc(50% - 766px/2); z-index:10; opacity:0; animation:fadeIn 1.5s forwards ease-in-out; animation-delay:5.5s;}

@keyframes fadeIn{
    0%{transform:scale(0.5); opacity:0;}
    80%{transform:scale(1.2); opacity:1;}
    100%{transform:scale(1); opacity:1;}
}

#intro .types{width:100%; height:100%; position:absolute; top:0; left:0;}
#intro .typeA{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY4_1-typeA-bg-bottom.jpg") no-repeat top center / cover; z-index:2; animation:fadeOut 3s forwards ease-in-out; animation-delay:2.5s;}
#intro .typeB{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY4_1-typeB-bg-sky.jpg") no-repeat top center / cover; z-index:1; display:none;}

#intro .typeA .flower1{width:1701px; position:absolute; top:-340px; left:-53vw;}
#intro .typeA .flower2{width:1206px; position:absolute; bottom:200px; right:-33vw;}

#intro .typeB .blossom{width:644px; position:absolute; top:0; left:0; z-index:10;}
#intro .typeB .blossom2{width:377px; position:absolute; bottom:50%; right:0; z-index:10;}

#intro .typeA .doorframe{width:352px; position:absolute; top:864px; left:calc(50% - 352px/2); z-index:10;}
#intro .typeB .doorframe{width:365px; position:absolute; top:863px; left:calc(50% - 365px/2); z-index:10;}

#intro .typeA .doorinner{width:272px; position:absolute; top:904px; left:calc(50% - 272px/2); display:none; z-index:10;}
#intro .typeB .doorplate{width:178px; position:absolute; top:834px; left:calc(50% - 178px/2 - 220px); z-index:10;}

#intro .typeA .scene{perspective:2200px; width:100%; height:652px; position:absolute; top:903px; left:0; z-index:11;}
#intro .typeA .scene .door{width:274px; height:652px; margin:0 auto; transform-style:preserve-3d; transform-origin:left center; transition:transform 1.5s ease; cursor:pointer;}
#intro .typeA .scene .door .front{position:absolute; inset:0; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY4_1-typeA-door-plate.png") no-repeat center / cover; transform:translateZ(10px);}
#intro .typeA .scene .door .back{position:absolute; inset:0; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY4_1-typeA-door-plate2.png") no-repeat center / cover; transform:rotateY(180deg) translateZ(10px);}
#intro .typeA .scene .door .side{position:absolute; top:0; left:274px; height:652px;
  background:#b6636e;
  transform-origin:left center;
  transform: rotateY(90deg) translateZ(0px) translateX(-10px);
  width:20px;/*두께*/
}
#intro .typeA .scene .door.open{transform: rotateY(-117deg);}

#intro .typeA .bgtop{width:100%; position:absolute; bottom:0; left:calc(50% - 100%/2);}
#intro .typeB .bgtop{width:100%; position:absolute; bottom:0; left:calc(50% - 100%/2);}

@keyframes fadeOut{
    0%{opacity:1;}
    100%{opacity:0;}
}


/*box2*/
#box2{width:100%; height:2363px; background:#8ac09c; position:relative;}
#box2 .title{width:1024px; position:absolute; top:9px; left:calc(50% - 1024px/2);}

#box2 .slideWrap{width:560px; height:710px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY4_2-cnt1.png") no-repeat top center / cover;}
#box2 .slideWrap #box2Slider{width:554px; margin:0 auto;}
#box2 .slideWrap #box2Slider .swiper-container ul li a img{width:100%;}

#box2 .prds{width:560px; height:710px; position:absolute; z-index:2;}
#box2 .prds img{width:100%;}
#box2 .prd1{top:650px; left:calc(50% - 560px/2 - 312px);}
#box2 .prd2{top:650px; left:calc(50% - 560px/2 + 312px);}
#box2 .prd3{top:1429px; left:calc(50% - 560px/2 - 312px);}
#box2 .prd4{top:1429px; left:calc(50% - 560px/2 + 312px);}

/*box3*/
#box3{width:100%; height:1596px; background:#f9f7fb; position:relative;}
#box3 .title{width:906px; position:absolute; top:227px; left:calc(50% - 906px/2);}
#box3 .cnt{width:1290px; position:absolute; top:514px; left:calc(50% - 1290px/2);}
#box3 a.btn{width:1170px; height:132px; position:absolute; top:1132px; left:calc(50% - 1170px/2);}
#box3 a.btn > img{width:100%;}
#box3 .info{width:728px; position:absolute; top:1339px; left:calc(50% - 728px/2);}

/*box4*/
#box4{width:100%; height:1520px; background:#fff; position:relative;}
#box4 .title{width:817px; position:absolute; top:231px; left:calc(50% - 817px/2);}
#box4 .cnt{width:1170px; position:absolute; top:561px; left:calc(50% - 1170px/2);}
#box4 a.btn{width:1170px; height:132px; position:absolute; top:1166px; left:calc(50% - 1170px/2);}
#box4 a.btn > img{width:100%;}

/*box5*/
#box5{width:100%; height:2596px; background:#fff4e3; position:relative;}
#box5 .title{width:960px; position:absolute; top:237px; left:calc(50% - 960px/2);}
#box5 .cnt{width:1187px; position:absolute; top:551px; left:calc(50% - 1187px/2);}
#box5 a.btn{width:1170px; height:132px; position:absolute; top:2199px; left:calc(50% - 1170px/2);}
#box5 a.btn > img{width:100%;}

/*box6*/
#box6{width:100%; height:1282px; background:#c279a2; position:relative;}
#box6 .title{width:982px; position:absolute; top:237px; left:calc(50% - 982px/2);}
#box6 .cnt{width:1170px; position:absolute; top:557px; left:calc(50% - 1170px/2);}


/*box8*/
#box8{width:100%; height:2080px; background:#fed0e3; position:relative;}
#box8.d1{background:#fed0e3;}
#box8.d2{background:#ffc2dd;}
#box8.d3{background:#ffb3d5;}
#box8.d4{background:#ffa1cb;}

#box8 .titles{display:none;}
#box8 .titles.on{display:block;}

#box8 .title1{width:618px; position:absolute; top:201px; left:calc(50% - 618px/2);}
#box8 .title2{width:707px; position:absolute; top:201px; left:calc(50% - 707px/2);}
#box8 .title3{width:737px; position:absolute; top:201px; left:calc(50% - 737px/2);}
#box8 .title4{width:586px; position:absolute; top:201px; left:calc(50% - 586px/2);}

#box8 ul.tabHead{width:1004px; position:absolute; top:424px; left:calc(50% - 1004px/2); display:flex; flex-wrap:wrap; justify-content:space-between;}
#box8 ul.tabHead > li{width:230px; height:171px;cursor:pointer; position:relative;}
#box8 ul.tabHead > li img{width:100%;}
#box8 ul.tabHead > li img:nth-child(2){position:absolute; top:0; left:0;}
#box8 ul.tabHead > li.on img:nth-child(2){opacity:0;}

#box8 .days{width:1168px; height:1046px; position:absolute; top:713px; left:calc(50% - 1168px/2); opacity:0; z-index:1;}

#box8 .day1{width:1175px; position:absolute; top:713px; left:calc(50% - 1175px/2);}
#box8 .day1 img{width:100%;}
#box8 .day1 a:nth-child(1){width:100%; height:461px; position:absolute; top:0; left:0;}
#box8 .day1 a:nth-child(2){width:100%; height:461px; position:absolute; bottom:0; left:0;}

#box8 .days .swiper-button-next, 
#box8 .days .swiper-button-prev{width:76px; height:88px; top:44%;}
#box8 .days .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY4_arrwR2.png") no-repeat top center / cover; right:-133px;}
#box8 .days .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY4_arrwL2.png") no-repeat top center / cover; left:-133px;}

#box8 .days .swiper-pagination{width:100%; bottom:-175px !important; left:0px !important;}
#box8 .days .swiper-pagination .swiper-pagination-bullet{width:37px; height:37px; background:#fff; border:3px solid #000; margin:0 28px !important; opacity:1 !important;}
#box8 .days .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important; background:#ff6eae;}

#box8 .day1.on{opacity:1; z-index:10;}
#box8 .day2.on{opacity:1; z-index:10;}
#box8 .day3.on{opacity:1; z-index:10;}
#box8 .day4.on{opacity:1; z-index:10;}


/*box9*/
#box9{width:100%; height:2520px; background:#fff4ce; position:relative;}
#box9 .title{width:711px; position:absolute; top:232px; left:calc(50% - 711px/2);}
#box9 .cnt{width:1170px; position:absolute; top:561px; left:calc(50% - 1170px/2);}

#box9 .slideWrap{width:1168px; height:1046px; position:absolute; top:1165px; left:calc(50% - 1168px/2);}
#box9 .slideWrap #box9Slider .swiper-container ul li a{display:block; width:calc(50% - 15px); height:1046px; position:absolute; top:0;}
#box9 .slideWrap #box9Slider .swiper-container ul li a:nth-child(1){background:rgba(240,210,180,0); left:0;}
#box9 .slideWrap #box9Slider .swiper-container ul li a:nth-child(2){background:rgba(210,245,190,0);right:0;}
#box9 .slideWrap #box9Slider .swiper-container ul li img{width:100%;}

#box9 .slideWrap .pag_box9Slider{display:none;}

/*box10*/
#box10{width:100%; height:3904px; background:#feb4d5; position:relative;}
#box10 .title{width:773px; position:absolute; top:363px; left:calc(50% - 773px/2);}
#box10 .cnt1{width:1315px; position:absolute; top:638px; left:calc(50% - 1315px/2);}
#box10 .cnt2{width:1170px; position:absolute; top:1500px; left:calc(50% - 1170px/2);}
#box10 .subtitle{width:773px; position:absolute; top:2215px; left:calc(50% - 773px/2);}

#box10 .slideWrap{width:1168px; height:1046px; position:absolute; top:2402px; left:calc(50% - 1168px/2);}
#box10 .slideWrap #box10Slider .swiper-container ul li a{display:block; width:calc(50% - 15px); height:986px; position:absolute; top:0;}
#box10 .slideWrap #box10Slider .swiper-container ul li a:nth-child(1){background:rgba(240,210,180,0); left:0;}
#box10 .slideWrap #box10Slider .swiper-container ul li a:nth-child(2){background:rgba(210,245,190,0);right:0;}
#box10 .slideWrap #box10Slider .swiper-container ul li img{width:100%;}

#box10 .slideWrap .pag_box10Slider{display:none;}

#box10 a.btn{width:1170px; height:132px; position:absolute; top:3491px; left:calc(50% - 1170px/2);}
#box10 a.btn img{width:100%;}

/*box11*/
#box11{width:100%; height:4637px; background:#f9f7fb; position:relative;}
#box11 .title{width:1213px; padding:263px 0 101px;}
#box11 .cnt{width:1170px; padding:0 0 130px;}

#box11 .head1{width:1175px; margin:0 auto;}
#box11 .head2{width:1175px; margin:152px auto 0;}

#box11 a.prds{width:1175px; height:461px; margin:0 auto 35px;}
#box11 a.prds img{width:100%;}

#box11 .logo{width:265px; margin:93px auto 0;}


/* BASIC css end */