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

button img {
  display: block;
}

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

.header{z-index:9999 !important;}

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

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


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

/*on header fixed*/
#box2.fixed{margin-top:14vw;}

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

.AnnLog{position:absolute !important; top:0; left:0; opacity:0; margin:0; padding:0;}

/*intro*/
.intro{width:100%; height:437px; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/1-bg-back-m.jpg") no-repeat center top / cover;}
.intro.fixed{margin-bottom:57px;}
.intro .date{width:96px; position:absolute; top:34px; right:15px; z-index:10;}
.intro .logo{width:109px; position:absolute; top:34px; left:15px; z-index:10;}
.intro .opac{width:400px; position:absolute; top:13px; left:calc(50% - 400px/2); opacity:0.5; animation:opac 1s infinite linear; z-index:8;}
.intro .bgtop{width:100%; position:absolute; top:0; left:0; z-index:9;}

@keyframes opac{
    0%{opacity:0.5;}
    50%{opacity:0.2;}
    100%{opacity:0.5;}
}

.intro .titWrap{position:relative; width:400px; height:277px; position:absolute; top:96px; left:calc(50% - 400px/2); background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/1-titbg.png") no-repeat center / cover;}
.intro .titWrap .star1{width:77px; position:absolute; top:117px; left:calc(50% - 77px/2 - 107px);}
.intro .titWrap .star2{width:16px; position:absolute; top:135px; right:calc(50% - 16px/2 - 112px);}

.intro .titWrap .tit1{width:70px; position:absolute; top:40px; left:calc(50% - 70px/2);}
.intro .titWrap .tit2{width:40px; position:absolute; top:80px; left:calc(50% - 40px/2 - 41px); transform:scale(0); animation:titAni 0.5s forwards ease-in-out; animation-delay:0s;}
.intro .titWrap .tit3{width:40px; position:absolute; top:66px; left:calc(50% - 40px/2 - 8px); transform:scale(0); animation:titAni 0.5s forwards ease-in-out; animation-delay:0.2s;}
.intro .titWrap .tit4{width:58px; position:absolute; top:74px; left:calc(50% - 58px/2 + 36px); transform:scale(0); animation:titAni 0.5s forwards ease-in-out; animation-delay:0.4s;}
.intro .titWrap .tit5{width:216px; position:absolute; top:130px; left:calc(50% - 216px/2); transform:scale(0); animation:titAni 0.5s forwards ease-in-out; animation-delay:0.7s;}
.intro .titWrap .tit6{width:124px; position:absolute; top:210px; left:calc(50% - 124px/2);}

@keyframes titAni{
    0%{transform:scale(0);}
    100%{transform:scale(1);}
}

.intro .titWrap .blink1{width:30px; position:absolute; top:53px; left:calc(50% - 30px/2 - 18px); opacity:0; animation:blinks 1s forwards ease-in-out; animation-delay:1.3s;}
.intro .titWrap .blink2{width:30px; position:absolute; top:128px; left:calc(50% - 30px/2 - 72px); opacity:0; animation:blinks 1s forwards ease-in-out; animation-delay:1.3s;}
.intro .titWrap .blink3{width:30px; position:absolute; top:141px; left:calc(50% - 30px/2 + 7px); opacity:0; animation:blinks 1s forwards ease-in-out; animation-delay:1.3s;}
.intro .titWrap .blink4{width:30px; position:absolute; top:136px; left:calc(50% - 30px/2 + 100px); opacity:0; animation:blinks 1s forwards ease-in-out; animation-delay:1.3s;}

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

.intro .titWrap .deco1{width:118px; position:absolute; top:-6px; left:2px;}
.intro .titWrap .deco2{width:67px; position:absolute; bottom:-10px; left:15px;}
.intro .titWrap .deco3{width:108px; position:absolute; bottom:-40px; right:10px;}


/*header*/
#header{text-align:center; width:100%; height:60px; display:flex; flex-wrap:wrap; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/menu-bg-m.png") no-repeat center / cover; justify-content:center; overflow:hidden; position:relative;}
#header.fixed{position:fixed; top:0; left:0; z-index:9999;}
#header a{display:block; width:65px; height:36px; margin:auto 5px; position:relative;}
#header a img{height:36px;}
#header a img:nth-child(2){position:absolute; top:0; left:0; opacity:0;}
#header a.select img:nth-child(1){opacity:0;}
#header a.select img:nth-child(2){opacity:1;}

/*add cnt*/
.addWrap{position:relative; width:100%; height:427px; padding:54px 0 0; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/5-bg.jpg") no-repeat center / cover; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; display:none;}
.addWrap .img{width:370px; margin:0 auto;}
.addWrap .txt{width:350px; position:absolute; top:310px; left:calc(50% - 350px/2 - 0px);}


/*cntWrap*/
.cntWrap{position:relative; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/2-bg-m.jpg") no-repeat center / cover;}
.cntWrap .blanket{width:100%; height:100%; background:rgba(0,0,0,0.6); position:absolute; top:0; left:0; z-index:9990; display:none;}

.cntWrap .box1{position:relative; height:764px;}
.cntWrap .box1 .papWrap{position:absolute; top:121px; left:0; width:100%; height:520px; z-index:99;}

@media (min-width:400px) {
    .cntWrap .box1 .papWrap{transform:scale(1.07); left:14px;}
}

.cntWrap .box1 .papWrap ul.paphead{position:absolute; top:-22px; left:246px; display:flex; flex-wrap:nowrap; z-index:10;}
.cntWrap .box1 .papWrap ul.paphead > li{width:50px; height:27px; cursor:pointer; margin:0 2px;}
.cntWrap .box1 .papWrap ul.paphead > li:nth-child(1){background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/2-btn1-off-m.png") no-repeat center / cover;}
.cntWrap .box1 .papWrap ul.paphead > li:nth-child(2){background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/2-btn2-off-m.png") no-repeat center / cover;}
.cntWrap .box1 .papWrap ul.paphead > li:nth-child(1).on{background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/2-btn1-on-m.png") no-repeat center / cover;}
.cntWrap .box1 .papWrap ul.paphead > li:nth-child(2).on{background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/2-btn2-on-m.png") no-repeat center / cover;}

.cntWrap .box1 .papWrap .paper{width:372px; position:absolute; top:0px; left:0; z-index:2;}

.cntWrap .box1 .papWrap .cnt1 .swipeBlanket{position:absolute; top:4px; left:0; width:100%; height:510px; z-index:12; background:rgba(123,220,23,0);}
.cntWrap .box1 .papWrap .cnt1 .title{width:293px; position:absolute; top:35px; left:43px; z-index:10; pointer-events:none;}
.cntWrap .box1 .papWrap .cnt1 .bubb{width:157px; position:absolute; top:169px; left:199px; z-index:11; pointer-events:none;}

.cntWrap .box1 .papWrap .cnt1 .swiper-container ul > li img{width:100%;}
.cntWrap .box1 .papWrap .cnt1 #box1Slider{width:162px; position:absolute; top:172px; left:42px; z-index:10; transform:rotate(-3deg); pointer-events:none;}
.cntWrap .box1 .papWrap .cnt1 #box2Slider{width:150px; position:absolute; top:260px; left:190px; z-index:10; pointer-events:none;}
.cntWrap .box1 .papWrap .cnt1 .deco{width:310px; position:absolute; top:304px; left:35px; z-index:5; pointer-events:none;}
.cntWrap .box1 .papWrap .cnt1 .btn{width:254px; position:absolute; top:436px; left:67px; z-index:13; cursor:pointer;}

.cntWrap .box1 .papWrap .cnt2{display:none;}
.cntWrap .box1 .papWrap .cnt2 .title{width:184px; position:absolute; top:30px; left:60px; z-index:10;}
.cntWrap .box1 .papWrap .cnt2 .sticker1{width:64px; position:absolute; top:20px; left:283px; z-index:11;}
.cntWrap .box1 .papWrap .cnt2 .sticker2{width:62px; position:absolute; top:145px; left:282px; z-index:11;}
.cntWrap .box1 .papWrap .cnt2 .date{width:128px; position:absolute; top:90px; left:200px; z-index:10;}

.cntWrap .box1 .papWrap .cnt2 a.quiz{width:144px; position:absolute; top:86px; left:55px; z-index:10;}
.cntWrap .box1 .papWrap .cnt2 a.quiz img{width:100%;}
.cntWrap .box1 .papWrap .cnt2 a.postcard{width:149px; position:absolute; top:173px; left:200px; z-index:10;}
.cntWrap .box1 .papWrap .cnt2 a.postcard img{width:100%;}

.cntWrap .box1 .papWrap .cnt2 .rings{width:34px; position:absolute; top:50px; left:13px; z-index:10;}
.cntWrap .box1 .papWrap .cnt2 .deco{width:144px; position:absolute; top:50px; left:210px; z-index:5;}

.cntWrap .box1 .papWrap .cnt2 .boardList{width:362px; height:196px; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/2-boardbg-m.png") no-repeat center / cover; position:absolute; top:314px; left:-4px; z-index:10;}
.cntWrap .box1 .papWrap .cnt2 .boardList .dashboard{position:absolute; top:30px; left:92px; width:250px; background:rgba(123,100,222,0.1);}
.cntWrap .box1 .papWrap .cnt2 .boardList .dashboard li{height:30px; line-height:2; position:relative; display:flex; justify-content:center;}

.cntWrap .box1 .papWrap .cnt2 .boardList .dashboard li:nth-child(1){position:absolute; top:0; left:0;}
.cntWrap .box1 .papWrap .cnt2 .boardList .dashboard li:nth-child(2){position:absolute; top:40px; left:0;}
.cntWrap .box1 .papWrap .cnt2 .boardList .dashboard li:nth-child(1)::after{content:""; display:block; width:21px; height:29px; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/1-ico1.png") no-repeat center / cover; position:absolute; top:-2px; left:-44px;}
.cntWrap .box1 .papWrap .cnt2 .boardList .dashboard li:nth-child(2)::after{content:""; display:block; width:21px; height:29px; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/1-ico2.png") no-repeat center / cover; position:absolute; top:0px; left:-44px;}

.cntWrap .box1 .papWrap .cnt2 .boardList .dashboard li p{font-size:11px; color:#000; line-height:1.2; display:block; margin:auto;}

.cntWrap .box1 .papWrap .cnt2 .boardList .inputs{width:259px; position:absolute; bottom:49px; left:80px;}
.cntWrap .box1 .papWrap .cnt2 .boardList .inputs::after{content:""; display:block; width:35px; height:22px; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/1-ico3.png") no-repeat center / cover; position:absolute; top:8px; left:-38px;}
.cntWrap .box1 .papWrap .cnt2 .boardList .inputs .input{width:100%;}
.cntWrap .box1 .papWrap .cnt2 .boardList .inputs input{border:none; padding:0 5px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; position:absolute; top:10px; left:10px; width:180px; height:20px; font-size:11px; color:#000; background:transparent; border-radius:20px;}
.cntWrap .box1 .papWrap .cnt2 .boardList .inputs input::placeholder{color:#000;}
.cntWrap .box1 .papWrap .cnt2 .boardList .inputs button{width:56px; position:absolute; bottom:7px; right:7px; background:none;}
.cntWrap .box1 .papWrap .cnt2 .boardList .inputs button img{width:100%;}

.cntWrap .box1 .papWrap .cnt2 .boardList .infos{position:absolute; bottom:20px; left:42px;}
.cntWrap .box1 .papWrap .cnt2 .boardList .infos > img{width:233px;}
.cntWrap .box1 .papWrap .cnt2 .boardList .infos a{position:absolute; bottom:0px; right:-63px; cursor:pointer; transform:rotate(-2deg);}
.cntWrap .box1 .papWrap .cnt2 .boardList .infos a > img{width:58px;}

.cntWrap .box1 .papWrap .cnt2 .boardList .letter{position:absolute; bottom:125px; left:calc(50% - 32px/2 + 145px); width:32px;}
.cntWrap .box1 .papWrap .cnt2 .boardList .mailbox{position:absolute; bottom:82px; left:calc(50% - 40px/2 + 160px); width:40px; transform:rotate(0deg); animation:mailbox 1s infinite ease-in-out;}

@keyframes mailbox{
    0%{transform:rotate(0deg);}
    50%{transform:rotate(5deg);}
    100%{transform:rotate(0deg);}
}

.cntWrap .box1 .mp3{position:absolute; bottom:20px; left:-10px; z-index:1; width:240px}
.cntWrap .box1 .pencil1{width:42px; position:absolute; top:-4px; left:132px; z-index:98; transform:rotate(73deg);}
.cntWrap .box1 .pencil2{position:absolute; z-index:99; width:120px; bottom:-1px; right:-13px;}
.cntWrap .box1 .tape{position:absolute; top:24px; left:20px; width:90px;}
.cntWrap .box1 .paperbk{position:absolute; top:94px; right:-50px; width:438px; z-index:97;}

@media (min-width:400px) {
    .cntWrap .box1 .mp3{bottom:12px; left:2px; width:250px;}
    .cntWrap .box1 .pencil1{top:-24px; left:142px;}
    .cntWrap .box1 .pencil2{bottom:-15px; right:-41px;}
    .cntWrap .box1 .tape{top:11px; left:10px; width:84px;}
    .cntWrap .box1 .paperbk{top:80px; width:458px; z-index:97;}
}

.cntWrap .box1 .papWrap .cntpag{display:flex; position:absolute; top:540px; left:0; width:100%; justify-content:center;}
.cntWrap .box1 .papWrap .cntpag > li{width:7px; height:7px; border:0.5px solid #000; background:#fff; cursor:pointer; border-radius:5px; margin:0 3px;}
.cntWrap .box1 .papWrap .cntpag > li.on{background:#fa3c98;}

@media (min-width:400px) {
    .cntWrap .box1 .papWrap .cntpag{left:-10px;}
}

.cntWrap .box1 .boardPop{display:none; width:380px; height:272px; padding:27px 24px 30px; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/2-popbg.png") no-repeat center / cover; position:absolute; left:calc(50% - 380px/2); top:240px; margin:auto; z-index:9998; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.cntWrap .box1 .boardPop .tit{width:77px; margin-bottom:5px;}
.cntWrap .box1 .boardPop .clsbtn{position:absolute; top:28px; right:14px; cursor:pointer; width:20px;}
.cntWrap .box1 .boardPop .cnts{width:100%; height:156px; overflow-y:scroll;}
.cntWrap .box1 .boardPop .cnts > li{border-bottom:1px solid #c4c4c4; padding:8px 5px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; display:none;}
.cntWrap .box1 .boardPop .cnts > li span{display:block; font-size:14px; font-weight:bold; color:#6f6f6f; letter-spacing:-0.3px;}
.cntWrap .box1 .boardPop .cnts > li span b{margin-left:6px; color:#ff78b1; font-weight:bold; letter-spacing:-0.3px;}
.cntWrap .box1 .boardPop .cnts > li p{font-size:12px; color:#6f6f6f; font-weight:600; hyphens:none; word-break:keep-all; letter-spacing:-0.3px;}

.cntWrap .box1 .boardPop .pag{display:flex; flex-wrap:wrap; justify-content:center; margin-top:15px;}
.cntWrap .box1 .boardPop .pag > ul{display:flex; flex-wrap:wrap; padding:0 15px;}
.cntWrap .box1 .boardPop .pag > ul > li{font-size:14px; padding:0 13px; font-weight:600; color:#c4c4c4; line-height:17px; cursor:pointer; display:none;}
.cntWrap .box1 .boardPop .pag > ul > li.on{color:#ff78b1;}
.cntWrap .box1 .boardPop .pag a.prev{width:17px; height:17px; display:block; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/2-poppagL.png") no-repeat center / cover; text-indent:-9999px;}
.cntWrap .box1 .boardPop .pag a.next{width:17px; height:17px; display:block; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/2-poppagR.png") no-repeat center / cover; text-indent:-9999px;}

.cntWrap .box2{height:49px; position:relative;}
.cntWrap .box2 #rolling{width:110%; height:17px; position:absolute; left:calc(50% - 110%/2); box-shadow: 0px 4px 5px rgba(0,0,0,0.1);}

.cntWrap .box2 #rolling.rolling1{background:#ff8096; position:absolute; top:0px; transform:rotate(4deg); z-index:1;}
.cntWrap .box2 #rolling.rolling2{background:#508938; position:absolute; top:9px; transform:rotate(-5deg);}
.cntWrap .box2 #rolling .roll{width:100%; height:11px; position:absolute; bottom:4px; left:0; background-image:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/roll.png"); background-repeat:repeat-x; background-position:0 0; background-size:auto 100%;}

.cntWrap .box2 #rolling.rolling1 .roll{animation:move1 100s infinite linear;}
.cntWrap .box2 #rolling.rolling2 .roll{animation:move2 100s infinite linear;}

@keyframes move1{
    0%{background-position:0 0;}
    100%{background-position:8740px 0;}
}
@keyframes move2{
    0%{background-position:0 0;}
    100%{background-position:-8740px 0;}
}

.cntWrap .box3{position:relative; width:100%; height:460px;}
.cntWrap .box3 .cass{position:absolute; top:-38px; right:-32px; width:116px;}
.cntWrap .box3 .bubb{position:absolute; top:40px; left:calc(50% - 86px/2 - 120px); width:86px;}

.cntWrap .box3 .innWrap{width:384px; height:275px; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/3-paper.png") no-repeat center / cover; position:absolute; top:80px; left:calc(50% - 384px/2);}
.cntWrap .box3 .bg{position:absolute; top:72px; left:50px; cursor:pointer; width:244px;}
.cntWrap .box3 .cnt{position:absolute; top:84px; left:73px; pointer-events:none; width:180px;}
.cntWrap .box3 .cnt img{width:100%;}

.cntWrap .box3 .crayon1{position:absolute; top:61px; right:calc(50% - 100px/2 + 58px); width:100px; z-index:2; animation: crayon1 2.3s linear forwards; display:none;}
.cntWrap .box3 .crayon2{position:absolute; bottom:-56px; left:calc(50% - 40px/2 - 118px); width:40px;}

@keyframes crayon1{
    0%{top:61px; right:calc(50% - 100px/2 + 58px);}
    20%{top:52px;}
    40%{top:56px;}
    60%{top:48px;}
    80%{top:52px;}
    100%{top:48px; right:calc(50% - 100px/2 - 185px);}
}

.cntWrap .box3 .deco{position:absolute; bottom:48px; left:48px; width:40px;}
.cntWrap .box3 .doodle{position:absolute; top:29px; left:32px; width:297px;}
.cntWrap .box3 .flower{position:absolute; bottom:-34px; right:18px; width:52px;}
.cntWrap .box3 .mileage{position:absolute; bottom:40px; right:25px; width:115px;}
.cntWrap .box3 .title{position:absolute; top:22px; left:81px; width:209px; display:none;}

.cntWrap .box3 .logPop{display:none; width:380px; height:272px; background:url("http://skinfood.img15.kr/data/content/20thAnniversary/main/3-logpop.png") no-repeat center / cover; position:absolute; top:90px; left:calc(50% - 380px/2); z-index:9999;}
.cntWrap .box3 .logPop a{position:absolute; bottom:5px; width:50%; height:74px; display:block; text-indent:-9999px; cursor:pointer;}
.cntWrap .box3 .logPop a:nth-child(1){left:0; background:rgba(123,54,86,0);}
.cntWrap .box3 .logPop a:nth-child(2){right:0; background:rgba(23,154,86,0);}

.ban4{width:100%;}
.ban6{width:100%;}






/* BASIC css end */