/* 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:48px; height:73px; 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;}

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

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

/*공통*/
.titWrap{display:block; width:984px; margin:0 auto;}
.titWrap img{margin:0;}

/*on header fixed*/
#intro.fixed{margin-bottom:116px;}

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

#tarCookie{position:absolute; top:-96px; left:0; display:block; width:100%; height:0;}
#home1,#home2,#home3{position:absolute; top:-96px; left:0; display:block; width:100%; height:0;}

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

/*인트로*/
#promo-intro{width:100%; height:100vh; background:#181818; display:flex; flex-wrap:wrap; position:fixed; top:0; left:0; z-index:9999; overflow:hidden; display:none;}
#promo-intro .toptit{width:152px; position:absolute; top:28px; left:calc(50% - 152px/2 - 482px);}
#promo-intro .toplogo{width:152px; position:absolute; top:28px; left:calc(50% - 155px/2);}
#promo-intro .topdate{width:246px; position:absolute; top:28px; left:calc(50% - 246px/2 + 440px);}
#promo-intro .slideWrap{width:850px; height:430px; overflow:hidden; position:absolute; top:calc(50% - 430px/2 + 3vh); left:calc(50% - 850px/2);}
#promo-intro .slideWrap .slides{width:100%; position:absolute; top:0; left:0;}

#promo-intro.aniEnd{top:-100vh; transition:all 1s ease;}
#promo-intro .slideWrap .slides.aniEnd{top:-430px; transition:all 0.5s ease;}

/*메인*/
#promo-main.fixed{margin-top:80px;}
#promo-main #mainWrap1{width:100%; height:1020px; background:url("http://skinfood.img15.kr/data/content/promotion/250728/main-bg.jpg") no-repeat center top / cover; position:relative;}
#promo-main #mainWrap1 .toptit{width:152px; position:absolute; top:28px; left:calc(50% - 152px/2 - 482px);}
#promo-main #mainWrap1 .toplogo{width:152px; position:absolute; top:28px; left:calc(50% - 155px/2);}
#promo-main #mainWrap1 .topdate{width:246px; position:absolute; top:28px; left:calc(50% - 246px/2 + 440px);}
#promo-main #mainWrap1 .tit{width:613px; position:absolute; top:282px; left:calc(50% - 613px/2 - 250px);}
#promo-main #mainWrap1 a.btn{width:230px; height:61px; display:block; position:absolute; top:730px; left:calc(50% - 230px/2 - 437px);}
#promo-main #mainWrap1 a.btn img{display:block; width:100%;}
#promo-main #mainWrap1 #promoMainSlider{width:795px; position:absolute; bottom:0; left:calc(50% - 795px/2 + 352px);}

#promo-main #mainWrap2{width:100%; height:1316px; background:#f5f5f5;}
#promo-main #mainWrap2 .tit{width:500px; margin:0 auto; padding:151px 0 83px;}
#promo-main #mainWrap2 > ul{width:1140px; display:block; margin:0 auto; display:flex; flex-wrap:wrap;}
#promo-main #mainWrap2 > ul > li{width:33.3333%;}
#promo-main #mainWrap2 > ul > li a img{display:block; margin:0 auto; width:calc(100% - 15px);}
#promo-main #mainWrap2 .info{width:813px; margin:55px auto 0;}

/*메뉴*/
#promo-menu{text-align:center; display:flex; overflow:hidden; position:relative; justify-content:center; position:static; opacity:1; height:80px; width:100%; background:#000000;}
#promo-menu.fixed{position:fixed; top:97px; left:0; z-index:9999;}
#promo-menu a.menu{position:relative;}
#promo-menu a.menu img {height:80px;}
#promo-menu a.menu img:nth-child(2){position:absolute; top:0; left:0; opacity:0;}
#promo-menu a.menu.select img:nth-child(1){opacity:0;}
#promo-menu a.menu.select img:nth-child(2){opacity:1;}


#promo-wrap2, #promo-wrap3{display:none;}

/*선런칭*/
#promo-wrap1 #sunWrap1{width:100%; height:1475px; background:url("http://skinfood.img15.kr/data/content/promotion/250728/sun-1-bg.jpg") no-repeat center / cover; position:relative;}
#promo-wrap1 #sunWrap1 .tit{width:518px; padding:151px 0 66px;}
#promo-wrap1 #sunWrap1 .tags{width:704px; padding:0 0 38px;}
#promo-wrap1 #sunWrap1 .cnt{width:990px;}
#promo-wrap1 #sunWrap2{width:100%; height:1410px; background:#0d68a8; position:relative;}
#promo-wrap1 #sunWrap2 .prd1,
#promo-wrap1 #sunWrap2 .prd2{display:block; width:550px; height:934px;}
#promo-wrap1 #sunWrap2 .prd1 img,
#promo-wrap1 #sunWrap2 .prd2 img{width:100%;}
#promo-wrap1 #sunWrap2 .prd1{position:absolute; top:151px; left:calc(50% - 550px/2 - 294px); transform:rotateY(90deg); transition:all 1s ease;}
#promo-wrap1 #sunWrap2 .prd2{position:absolute; top:151px; left:calc(50% - 550px/2 + 294px); transform:rotateY(90deg); transition:all 1s ease;}
#promo-wrap1 #sunWrap2 .info{width:717px; position:absolute; top:1137px; left:calc(50% - 717px/2);}
#promo-wrap1 #sunWrap3{width:100%; height:2385px; background:#fff;}
#promo-wrap1 #sunWrap3 .tit{width:925px; padding:143px 0 102px;}
#promo-wrap1 #sunWrap3 .subtit{width:384px; padding:0 0 50px;}
#promo-wrap1 #sunWrap3 .cnt1{width:698px; padding:0 0 51px;}
#promo-wrap1 #sunWrap3 .cnt2{width:891px;}
#promo-wrap1 #sunWrap4{width:100%; height:1150px; background:#f8f7fc; position:relative;}
#promo-wrap1 #sunWrap4 .subtit{width:486px; position:absolute; top:151px; left:calc(50% - 486px/2);}
#promo-wrap1 #sunWrap4 .prd{width:489px; position:absolute; top:300px; left:calc(50% - 489px/2);}
#promo-wrap1 #sunWrap4 .p1{width:255px; position:absolute; top:308px; left:calc(50% - 255px/2 - 196px);}
#promo-wrap1 #sunWrap4 .p2{width:226px; position:absolute; top:440px; left:calc(50% - 226px/2 + 234px);}
#promo-wrap1 #sunWrap4 .t1{width:226px; position:absolute; top:498px; left:calc(50% - 226px/2 - 397px);}
#promo-wrap1 #sunWrap4 .t2{width:243px; position:absolute; top:596px; left:calc(50% - 243px/2 + 407px);}
#promo-wrap1 #sunWrap5{width:100%; height:1170px; background:#ff8419;}
#promo-wrap1 #sunWrap5 .subtit{width:570px; padding:149px 0 63px;}
#promo-wrap1 #sunWrap5 .cnt{width:920px;}
#promo-wrap1 #sunWrap5 .info{width:425px; padding:37px 0 70px;}
#promo-wrap1 #sunWrap5 a.btn{width:1140px; height:100px; display:block; margin:0 auto;}
#promo-wrap1 #sunWrap5 a.btn img{width:100%:}

/*도면소개*/
#promo-wrap2 #homeWrap1{width:100%; height:1778px; background:#fff;}
#promo-wrap2 #homeWrap1 .tit{width:523px; padding:180px 0 79px;}
#promo-wrap2 #homeWrap1 .cnt{width:1001px; height:1011px; margin:0 auto; position:relative;}
#promo-wrap2 #homeWrap1 .cnt img{width:100%;}
#promo-wrap2 #homeWrap1 .cnt a{width:50%; height:422px;}
#promo-wrap2 #homeWrap1 .cnt a:nth-child(2){position:absolute; top:165px; left:0; background:rgba(123,50,101,0);}
#promo-wrap2 #homeWrap1 .cnt a:nth-child(3){position:absolute; top:165px; left:50%; background:rgba(23,150,101,0);}
#promo-wrap2 #homeWrap1 .cnt a:nth-child(4){position:absolute; bottom:0; left:0; background:rgba(56,123,11,0);}
#promo-wrap2 #homeWrap1 .cnt a:nth-child(5){position:absolute; bottom:0; left:50%; background:rgba(100,89,51,0);}
#promo-wrap2 #homeWrap2{width:100%; height:891px; background:#fffaec; position:relative;}
#promo-wrap2 #homeWrap2 a{width:1140px; height:135px; position:absolute; top:0; left:calc(50% - 1140px/2);}
#promo-wrap2 #homeWrap2 a.cate1{top:180px;}
#promo-wrap2 #homeWrap2 a.cate2{top:312px;}
#promo-wrap2 #homeWrap2 a.cate3{top:444px;}
#promo-wrap2 #homeWrap2 a.cate4{top:576px;}
#promo-wrap2 #homeWrap3{width:100%; height:2870px; background:#fff;}
#promo-wrap2 #homeWrap3 .tit{width:622px; padding:180px 0 119px;}
#promo-wrap2 #homeWrap3 ul.prds{width:1130px; display:flex; flex-wrap:wrap; margin:0 auto;}
#promo-wrap2 #homeWrap3 ul.prds > li{width:33.3333%; margin-bottom:60px;}
#promo-wrap2 #homeWrap3 ul.prds > li img{width:calc(100% - 24px;);}
#promo-wrap2 #homeWrap3 .cnt{width:892px; padding:118px 0 120px;}
#promo-wrap2 #homeWrap4{width:100%; height:2382px; background:#fff;}
#promo-wrap2 #homeWrap4 .tit{width:798px; padding:180px 0 108px;}
#promo-wrap2 #homeWrap4 .cnt1,
#promo-wrap2 #homeWrap4 .cnt2{width:1080px; height:633px; display:block; margin:0 auto;}
#promo-wrap2 #homeWrap4 .cnt1 img,
#promo-wrap2 #homeWrap4 .cnt2 img{width:100%;}
#promo-wrap2 #homeWrap4 .info{width:473px; padding:40px 0 100px;}
#promo-wrap2 #homeWrap5{width:100%; height:3926px; background:#fff;}
#promo-wrap2 #homeWrap5 .tit{width:945px; padding:180px 0 119px;}
#promo-wrap2 #homeWrap5 .gift{width:100%; height:560px; background:#ffe9a7; display:flex; flex-wrap:wrap;}
#promo-wrap2 #homeWrap5 .gift img{width:1020px; display:block; margin:auto;}
#promo-wrap2 #homeWrap5 .subtit1{width:156px; padding:160px 0 59px;}
#promo-wrap2 #homeWrap5 ul.prds1{width:1130px; display:flex; flex-wrap:wrap; margin:0 auto;}
#promo-wrap2 #homeWrap5 ul.prds1 > li{width:33.3333%; margin-bottom:49px;}
#promo-wrap2 #homeWrap5 ul.prds1 > li img{width:calc(100% - 24px;);}
#promo-wrap2 #homeWrap5 .subtit2{width:200px; padding:111px 0 59px;}
#promo-wrap2 #homeWrap5 ul.prds2{width:871px; display:flex; flex-wrap:wrap; margin:0 auto 51px;}
#promo-wrap2 #homeWrap5 ul.prds2 > li{width:50%; margin-bottom:49px;}
#promo-wrap2 #homeWrap5 ul.prds2 > li img{width:calc(100% - 28px;);}
#promo-wrap2 a.btn{width:1000px; height:96px; display:block; margin:0 auto;}
#promo-wrap2 a.btn img{width:100%;}
#promo-wrap2 a.btn2{margin:30px auto 0;}

/*랜덤쿠폰*/
#promo-wrap3 .tit{width:624px; padding:180px 0 60px;}
#promo-wrap3 .scratchWrap{width:640px; height:350px; margin:0 auto; position:relative;}
#promo-wrap3 .scratchWrap .scratch-container {position: relative; width: 640px; height: 350px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
#promo-wrap3 .scratchWrap .scratch-container .result {position: absolute; width: 100%; height: 100%; background: url("http://skinfood.img15.kr/data/content/promotion/250728/event-back.png") center center / cover no-repeat; z-index: 0;}
#promo-wrap3 .scratchWrap .scratch-container .result a.result-link{display:block; width:100%; height:100%; text-indent:-9999px;}
#promo-wrap3 .scratchWrap .scratch-container canvas {position: absolute; top: 0; left: 0; z-index: 1; cursor: pointer;}
#promo-wrap3 .scratchWrap img.coin{width:119px; position:absolute; bottom:-60px; right:-66px; z-index:3; pointer-events:none;}
#promo-wrap3 .info{width:484px; padding:80px 0 200px;}
#promo-wrap3 ul.bans{width:100%; display:flex; flex-wrap:wrap;}
#promo-wrap3 ul.bans > li{width:33.3333%;}
#promo-wrap3 ul.bans > li a{display:block;}
#promo-wrap3 ul.bans > li a img{width:100%;}

/*footer*/
#promo-foot{background:#000; width:100%; padding:135px 0 164px;}
#promo-foot img{display:block; width:997px;}



/* BASIC css end */