/* BASIC css start */
@font-face {
    font-family: 'Dongle-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108_2@1.0/Dongle-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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: "Pretendard Variable","Pretendard",sans-serif !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
}

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

/*slider next,prev btn*/
.slideWrap .swiper-button-next, .slideWrap .swiper-button-prev{width:68px; height:79px; 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:-70px !important; left:0px !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet{width:20px; height:20px; border-radius:50%; background:no-repeat; border:1px solid #222;  margin:0 7px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#222;}

.wrap{background:#ffab24;}
.wrap .roll{position:absolute; top:800px; left:-150px; z-index:9990;}

.topWrap{width:100%; height:930px; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/quiz/paper-top.png") no-repeat center bottom / cover; position:relative;}
.topWrap .tit{padding-top:123px;}
.topWrap .flower{position:absolute; bottom:42px; left:170px;}

#box1Slider{width:1600px; height:630px;}
#box1Slider ul.swiper-wrapper{height:auto !important; margin-top:96px;}
#box1Slider ul.swiper-wrapper > li{position:relative; cursor:pointer;}
#box1Slider ul.swiper-wrapper > li img{width:100%;}
#box1Slider ul.swiper-wrapper > li img.on{position:absolute; top:0; left:0; opacity:0;}
#box1Slider ul.swiper-wrapper > li.on img.on{opacity:1;}
#box1Slider ul.swiper-wrapper > li input{position:absolute; bottom:24px; left:110px; width:140px; height:46px; border:none; background:transparent; font-size:45px; color:#6d4300; font-family: Sandoll KwangsooTwo !important; font-weight:600;}
#box1Slider ul.swiper-wrapper > li p{position:absolute; top:0; left:0; opacity:0;}

.botWrap{width:100%; height:952px; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/quiz/paper-bot.png") no-repeat center top / cover;}
.botWrap .infos{padding-top:250px;}
.botWrap .btn{margin-top:84px;}

.wrap .infoPop{width:700px; height:500px; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/quiz/popup-1.png") no-repeat center top / cover; position:absolute; top:850px; left:calc(50% - 700px/2); z-index:9999; display:none;}
.wrap .infoPop input{font-size:72px; color:#000; font-weight:bold; border:none; background:transparent; font-family:'Dongle-Regular' !important; font-weight:400;}
.wrap .infoPop input::placeholder{color:#000;}

.wrap .infoPop input#quizname{width:calc(50% - 28px); height: 130px; position:absolute; bottom:11px; left:17px;}
.wrap .infoPop input#quiznum{width:calc(50% - 45px); height: 130px; position:absolute; bottom:11px; left:calc(50% + 20px);}
.wrap .infoPop p.arrw{position:absolute; top:40px; right:20px; width:80px; height:80px; background:rgba(123,45,11,0); cursor:pointer;}

.wrap .blanket{width:100%; height:100%; background:rgba(0,0,0,0.6); position:fixed; top:0; left:0; z-index:9998; display:none;}







/* BASIC css end */