/* 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:43px; height:50px; top:50%;}
.slideWrap .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwR.png") no-repeat top center / cover; right:-43px;}
.slideWrap .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwL.png") no-repeat top center / cover; left:-43px;}
.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:-106px !important; left:0px !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet{width:22px; height:22px; background:#ffca88; border:none; margin:0 23px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important; background:#ff8d00;}


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

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

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

.wrap.sizedown50{
    transform: scale(0.5);
    transform-origin: top left;
    width: 200%;
}

.wrap.sizedown625{
    transform: scale(0.625);
    transform-origin: top left;
    width: 160%;
}

.wrap.sizedown70{
    transform: scale(0.75);
    transform-origin: top left;
    width: 133%;
}

.sizedown{transform: scale(0.5); transform-origin: top left; width: 200%;}

/*header*/
#header{text-align:center; display:flex; overflow:hidden; position:relative; justify-content:center; position:static; opacity:1; height:60px; width:100%; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_menuRail.png") no-repeat center / cover;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative; margin:0;}
#header a.menu img {height:60px;}
#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 a.menu:hover img:nth-child(2){opacity:1;}

/*light Animation*/
.wrap .lightAni{opacity: 0; transition: opacity 0.6s ease;}
.wrap .lightAni.on{opacity: 1;}

/*intro*/
#intro{width:100%; height:694px; overflow:hidden; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_1-bg.jpg") no-repeat center bottom / cover;}
#intro .logo{width:97px; position:absolute; top:65px; left:calc(50% - 97px/2); z-index:2;}
#intro .subtitle{width:300px; position:absolute; top:125px; left:calc(50% - 300px/2); z-index:2;}
#intro .title{width:457px; position:absolute; top:168px; left:calc(50% - 457px/2); z-index:2;}
#intro .date{width:356px; position:absolute; top:257px; left:calc(50% - 356px/2); z-index:2;}
#intro .light{width:934px; position:absolute; top:96px; left:calc(50% - 934px/2); z-index:1;}
#intro .pinlight{width:286px; position:absolute; top:81px; left:calc(50% - 286px/2); z-index:1;}

#intro .slideWrap{width:100%; position:absolute; bottom:90px; left:0; z-index:3;}
#intro .slideWrap #box1Slider{}
#intro .slideWrap #box1Slider .swiper-container{width: 100%; overflow: hidden;}
#intro .slideWrap #box1Slider .swiper-container > ul{display: flex; align-items: center;}
#intro .slideWrap #box1Slider .swiper-container > ul li{width:auto !important; position:relative; flex-shrink: 0;}

#intro .slideWrap #box1Slider .swiper-container > ul li img{width:auto; height:215px; display:block;}
#intro .slideWrap #box1Slider .swiper-container > ul li img.off{position:absolute; top:0; left:0; opacity:1; transition: opacity 1.5s ease; flex-shrink: 0;}
#intro .slideWrap #box1Slider .swiper-container > ul li.swiper-slide-active img.off{opacity:0;}

#intro .rail{width:100%; height:93px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_1-rail.png") no-repeat center / cover; position:absolute; bottom:0; left:0; z-index:1;}

/*box2*/
#box2{width:100%; height:2356px; overflow:hidden; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_2-bg.jpg") no-repeat center top / cover;}
#box2 .title{width:683px; position:absolute; top:250px; left:calc(50% - 683px/2);}
#box2 .txt1{width:636px; position:absolute; top:601px; left:calc(50% - 636px/2);}

#box2 a.coupon1{display:block; width:690px; height:300px; position:absolute; top:705px; left:calc(50% - 690px/2);}
#box2 a.coupon2{display:block; width:690px; height:300px; position:absolute; top:1344px; left:calc(50% - 690px/2);}
#box2 a > img{width:100%;}

#box2 .info1{width:484px; position:absolute; top:1037px; left:calc(50% - 484px/2);}
#box2 .txt2{width:632px; position:absolute; top:1187px; left:calc(50% - 632px/2);}
#box2 .info2{width:632px; position:absolute; top:1676px; left:calc(50% - 632px/2);}
#box2 .txt3{width:625px; position:absolute; top:1847px; left:calc(50% - 625px/2);}
#box2 .card3{width:693px; position:absolute; top:1981px; left:calc(50% - 693px/2);}
#box2 .info3{width:478px; position:absolute; top:2523px; left:calc(50% - 478px/2);}
#box2 .txt4{width:522px; position:absolute; top:2671px; left:calc(50% - 522px/2);}
#box2 .card4-1{width:686px; position:absolute; top:2804px; left:calc(50% - 686px/2);}
#box2 .card4-2{width:686px; position:absolute; top:3204px; left:calc(50% - 686px/2);}
#box2 .card4-3{width:686px; position:absolute; top:3604px; left:calc(50% - 686px/2);}
#box2 .card4-4{width:686px; position:absolute; top:4004px; left:calc(50% - 686px/2);}
#box2 .info4{width:544px; position:absolute; top:4413px; left:calc(50% - 544px/2);}

#box2 .lights{width:961px; position:absolute; top:0px; left:calc(50% - 961px/2); pointer-events:none; opacity:0; transition:opacity .4s ease;}
#box2 .light1{top:475px;}
#box2 .light2{top:1066px;}
#box2 .light3{top:1758px;}
#box2 .light4{top:2564px;}

/*box3*/
#box3{width:100%; height:1731px; overflow:hidden; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-bg.jpg") no-repeat center top / cover;}
#box3 .title{width:561px; position:absolute; top:242px; left:calc(50% - 561px/2);}
#box3 .cnt{width:693px; position:absolute; top:470px; left:calc(50% - 693px/2);}

#box3 .lights{width:1227px; position:absolute; top:0; left:calc(50% - 1227px/2); pointer-events:none;}
#box3 .light1{top:109px;}
#box3 .light2{top:1347px;}

#box3 ul.tabWrap{width:697px; display:flex; flex-wrap:wrap; position:absolute; top:1104px; left:calc(50% - 697px/2); justify-content:space-between;}
#box3 ul.tabWrap > li{position:relative; width:calc(50% - 4px); cursor:pointer;}
#box3 ul.tabWrap > li:nth-child(1),
#box3 ul.tabWrap > li:nth-child(2){margin-bottom:7px;}
#box3 ul.tabWrap > li img{width:100%;}
#box3 ul.tabWrap > li img.on{position:absolute; top:0; left:0; opacity:0;}
#box3 ul.tabWrap > li.select img.on{opacity:1;}

#box3 .slideWrap{width:1146px; position:absolute; top:1480px; left:calc(50% - 1146px/2);}
#box3 .slideWrap .subtitle{margin-bottom:89px;}

#box3 .slideWrap #box3Slider1,
#box3 .slideWrap #box3Slider2,
#box3 .slideWrap #box3Slider3,
#box3 .slideWrap #box3Slider4{width:1146px; position:absolute; top:0; left:0; z-index:1; opacity:0; pointer-events:none;}

#box3 .slideWrap #box3Slider1.select,
#box3 .slideWrap #box3Slider2.select,
#box3 .slideWrap #box3Slider3.select,
#box3 .slideWrap #box3Slider4.select{z-index:10; opacity:1; pointer-events:auto;}

#box3 .slideWrap #box3Slider1 .subtitle{width:763px;}
#box3 .slideWrap #box3Slider2 .subtitle{width:411px;}
#box3 .slideWrap #box3Slider3 .subtitle{width:606px;}
#box3 .slideWrap #box3Slider4 .subtitle{width:690px;}

#box3 .slideWrap .swiper-container{width:1146px;}
#box3 .slideWrap .swiper-container > ul{}
#box3 .slideWrap .swiper-container > ul li{}
#box3 .slideWrap .swiper-container > ul li a{display:block;}
#box3 .slideWrap .swiper-container > ul li a img{width:100%;}

#box3 .slideWrap .swiper-button-next, 
#box3 .slideWrap .swiper-button-prev{top:57%;}
#box3 .slideWrap .swiper-button-next{right:-82px;}
#box3 .slideWrap .swiper-button-prev{left:-82px;}

#box3 a.btns{display:block; width:1154px; height:125px; position:absolute; top:2687px; left:calc(50% - 1154px/2);}
#box3 a.btns img{width:100%;}
#box3 a.btn1{top:2687px;}
#box3 a.btn2{top:2825px;}
#box3 a.btn3{top:2960px;}
#box3 a.btn4{top:3097px;}

/*box4*/
#box4{width:100%; height:3271px; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_4-bg.jpg") no-repeat center top / cover;}
#box4 .title{width:816px; position:absolute; top:260px; left:calc(50% - 816px/2);}
#box4 .light{width:1221px; position:absolute; top:119px; left:calc(50% - 1221px/2);}

#box4 a.prds{display:block; width:562px; height:1052px; position:absolute; top:0; left:calc(50% - 562px/2);}
#box4 a.prds img{width:100%;}

#box4 a.prd1{top:629px; left:calc(50% - 562px/2 - 292px);}
#box4 a.prd2{top:629px; left:calc(50% - 562px/2 + 292px);}

#box4 a.prd3{top:1751px; left:calc(50% - 562px/2 - 292px);}
#box4 a.prd4{top:1751px; left:calc(50% - 562px/2 + 292px);}

#box4 a.prd5{top:2874px; left:calc(50% - 562px/2 - 292px);}
#box4 a.prd6{top:2874px; left:calc(50% - 562px/2 + 292px);}

#box4 a.prd7{top:4100px; left:calc(50% - 562px/2 - 292px);}
#box4 a.prd8{top:4100px; left:calc(50% - 562px/2 + 292px);}

#box4 a.prd9{top:5077px; left:calc(50% - 562px/2 - 292px);}

#box4 .subtitle{width:1073px; position:absolute; top:4000px; left:calc(50% - 1073px/2);}
#box4 a.btn{1159px; height:129px; position:absolute; top:6156px; left:calc(50% - 1159px/2);}
#box4 a.btn img{width:100%;}

/*box5*/
#box5{width:100%; height:1862px; background:#feef72; overflow:hidden; position:relative;}

#box5 .title{width:634px; position:absolute; top:266px; left:calc(50% - 634px/2);}
#box5 .light{width:1221px; position:absolute; top:131px; left:calc(50% - 1221px/2);}

#box5 .prds{display:block; width:562px; height:952px; position:absolute; top:0; left:calc(50% - 562px/2);}
#box5 .prds > img{width:100%;}
#box5 .prds > img.blanket{position:absolute; top:0; left:0; opacity:0.4;}
#box5 .prds.open > img.blanket{position:absolute; top:0; left:0; opacity:0;}

#box5 .prd1{top:523px; left:calc(50% - 562px/2 - 296px);}
#box5 .prd2{top:523px; left:calc(50% - 562px/2 + 296px);}
#box5 .prd3{top:1506px; left:calc(50% - 562px/2 - 296px);}
#box5 .prd4{top:1506px; left:calc(50% - 562px/2 + 296px);}
#box5 .prd5{top:2492px; left:calc(50% - 562px/2 - 296px);}
#box5 .prd6{top:2492px; left:calc(50% - 562px/2 + 296px);}

/*box6*/
#box6{width:100%; height:1916px; background:#ffd607; overflow:hidden; position:relative;}
#box6 .title{width:693px; position:absolute; top:265px; left:calc(50% - 693px/2);}
#box6 .light{width:1221px; position:absolute; top:134px; left:calc(50% - 1221px/2);}

#box6 .subtitle{width:652px; margin-bottom:55px;}

#box6 #box6Slider1{width:1151px; position:absolute; top:507px; left:calc(50% - 1151px/2);}
#box6 #box6Slider2{width:1151px; position:absolute; top:1301px; left:calc(50% - 1151px/2);}
#box6 #box6Slider3{width:1151px; position:absolute; top:2083px; left:calc(50% - 1151px/2);}
#box6 #box6Slider4{width:1151px; position:absolute; top:2875px; left:calc(50% - 1151px/2);}

#box6 .swiper-container{}
#box6 .swiper-container ul{}
#box6 .swiper-container ul > li{}
#box6 .swiper-container ul > li a{display:block;}
#box6 .swiper-container ul > li a img{width:100%;}

#box6 .swiper-button-next, #box6 .swiper-button-prev{width:43px; height:50px; top:66%;}
#box6 .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwR.png") no-repeat top center / cover; right:-75px;}
#box6 .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwL.png") no-repeat top center / cover; left:-75px;}
#box6 .swiper-button-next:after, #box6 .swiper-button-prev:after{display:none;}

/*box7*/

#box7{width:100%; height:2345px; background:#fef7e4; overflow:hidden; position:relative;}
#box7 .title{width:685px; position:absolute; top:276px; left:calc(50% - 685px/2);}
#box7 .cnt{width:693px; position:absolute; top:504px; left:calc(50% - 693px/2);}
#box7 .light{width:1221px; position:absolute; top:149px; left:calc(50% - 1221px/2);}

#box7 .subtitle{width:652px; margin-bottom:81px;}

#box7 #box7Slider1{width:1151px; position:absolute; top:1087px; left:calc(50% - 1151px/2);}
#box7 #box7Slider2{width:1151px; position:absolute; top:1890px; left:calc(50% - 1151px/2);}
#box7 #box7Slider3{width:1151px; position:absolute; top:2682px; left:calc(50% - 1151px/2);}
#box7 #box7Slider4{width:1151px; position:absolute; top:3496px; left:calc(50% - 1151px/2);}

#box7 .swiper-container{}
#box7 .swiper-container ul{}
#box7 .swiper-container ul > li{}
#box7 .swiper-container ul > li a{display:block;}
#box7 .swiper-container ul > li a img{width:100%;}

#box7 .swiper-button-next, #box7 .swiper-button-prev{width:43px; height:50px; top:66%;}
#box7 .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwR.png") no-repeat top center / cover; right:-75px;}
#box7 .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwL.png") no-repeat top center / cover; left:-75px;}
#box7 .swiper-button-next:after, #box7 .swiper-button-prev:after{display:none;}

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

/*box8*/
#box8{width:100%; height:896px; overflow:hidden; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_8-bgn.jpg") no-repeat center bottom / cover;}
#box8 .title{width:648px; position:absolute; top:261px; left:calc(50% - 648px/2);}
#box8 .light{width:1221px; position:absolute; top:100px; left:calc(50% - 1221px/2);}

#box8 #box8Slider{width:1146px; position:absolute; top:422px; left:calc(50% - 1146px/2);}
#box8 #box8Slider .swiper-container{}
#box8 #box8Slider .swiper-container > ul{}
#box8 #box8Slider .swiper-container > ul li{}
#box8 #box8Slider .swiper-container > ul li a{display:block;}
#box8 #box8Slider .swiper-container > ul li a img{width:100%;}

#box8 .swiper-button-next, #box8 .swiper-button-prev{width:43px; height:50px; top:50%;}
#box8 .swiper-button-next{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwR.png") no-repeat top center / cover; right:-75px;}
#box8 .swiper-button-prev{background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_3-arrwL.png") no-repeat top center / cover; left:-75px;}
#box8 .swiper-button-next:after, #box8 .swiper-button-prev:after{display:none;}

#box8 a.btn{width:1154px; height:125px; position:absolute; top:1463px; left:calc(50% - 1154px/2);}
#box8 a.btn > img{width:100%;}

/*box9*/
#box9{width:100%; padding-bottom:128px; height:auto; position:relative; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY6_9-bg.jpg") no-repeat center top / cover;}

#box9 .title{width:448px; padding:140px 0 42px;}

#box9 .lights{width:611px; position:absolute; top:0px; left:calc(50% - 611px/2); pointer-events:none;}
#box9 .light1{top:76px;}
#box9 .light2{top:511px;}

#box9 #box9SliderCnt{width:347px; margin:0 auto 83px;}
#box9 #box9SliderCnt .swiper-container > ul > li{opacity:0 !important;}
#box9 #box9SliderCnt .swiper-container > ul > li.swiper-slide-active{opacity:1 !important;}
#box9 #box9SliderCnt .swiper-container > ul > li img{width:100%;}

#box9 #box9SliderCnt .swiper-pagination{width:347px; margin-top:9px;}
#box9 #box9SliderCnt .swiper-pagination .swiper-pagination-bullet{width:7px; height:7px; background:#7d6605; opacity:0.5; margin:0 4px;}
#box9 #box9SliderCnt .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1;}

#box9 .cnts{width:573px; margin:0 auto;}
#box9 .cnts ul{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
#box9 .cnts ul > li{width:calc(50% - 6px); margin-bottom:13px;}
#box9 .cnts ul > li a{display:block;}
#box9 .cnts ul > li a img{width:100%;}

#box9 .cnts .subtitle{margin:0 auto 45px;}
#box9 .cnt1 .subtitle{width:216px;}
#box9 .cnt2 .subtitle{width:273px;}

#box9 a.btn{width:577px; height:63px; margin-top:32px; background:transparent;}
#box9 a.btn img{width:100%;}


/* BASIC css end */