@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap');
@font-face{
	font-family:'Lemon Milk';font-weight:300;font-style:normal;
	src:local(※),
	url('../font/LEMONMILK-Light.woff') format('woff'),
	url('../font/LEMONMILK-Light.woff2') format('woff2');
}
@font-face{
	font-family:'Lemon Milk';font-weight:400;font-style:normal;
	src:local(※),
	url('../font/LEMONMILK-Regular.woff') format('woff'),
	url('../font/LEMONMILK-Regular.woff2') format('woff2');
}
@font-face{
	font-family:'Lemon Milk';font-weight:500;font-style:normal;
	src:local(※),
	url('../font/LEMONMILK-Medium.woff') format('woff'),
	url('../font/LEMONMILK-Medium.woff2') format('woff2');
}

/* reset */
:root{color-scheme:only light}
* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:"IBM Plex Sans KR",sans-serif;font-weight:400}
html,body{width:100%;height:100%;font-size:0;line-height:0;margin:0;padding:0}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,
table,th,td,form,
fieldset,legend,select,button,input,textarea,
figure,figcaption{margin:0;padding:0;font-size:0;font-weight:inherit;font-style:inherit;color:inherit;line-height:0}
fieldset,li,img{border:0;vertical-align:baseline}
ul,ol{list-style:none}
input,button{-webkit-appearance:none;-moz-appearance:none;appearance:none}
address,caption,cite,code,dfn,em,var,
h1,h2,h3,h4,h5,h6,caption,strong{font-style:normal;font-weight:normal}
button{box-shadow:none;outline:0;border:0 none;background:transparent;cursor:pointer}
button:active,button:focus{outline:none;box-shadow:none;border:0 none;background-color:transparent;cursor:pointer}
button::-moz-focus-inner{padding:0}
a,a:focus,a:active,a:hover{outline:none;box-shadow:none;color:inherit;text-decoration:none;cursor:pointer}
hr{display:none}
legend{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:1px;line-height:100px;white-space:nowrap}
::-ms-clear{display:none}
::-ms-reveal{display:none}

::-webkit-scrollbar{background:rgba(255,255,255,.5);width:5px;height:5px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.5)}
::-webkit-scrollbar-corner{background:rgba(255,255,255,.5)}
::-webkit-scrollbar-thumb{background-clip:padding-box;background:rgba(0,0,0,.3)}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5)}

body{overflow:hidden}
#app{position:relative;margin:0 auto;overflow:auto;width:100%;height:100vh}
#app img{max-width:100%;height:auto;object-fit:contain;image-rendering:-webkit-optimize-contrast;backface-visibility:hidden}
.scene{position:relative;height:100vh;width:100%;min-width:15rem;min-height:10.8rem;overflow:hidden}
.wrap{margin:0 auto;position:relative}

.bg{display:block;position:absolute;pointer-events:none;left:0;z-index:0;overflow:hidden;width:100%;height:100%}
.bg-visual{display:block;position:absolute;left:0;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:center}
.bg-overlay{display:block;position:absolute;width:100%;height:100%;left:0;top:0}
.bg-video{display:block;position:absolute;width:calc(100vh*(16/9));height:100vh;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:0}
.bg-video > video{display:block;width:100%;height:100%;z-index:0}


.contents{position:relative;width:100%;min-width:12.8rem;height:100%;display:table;margin:0 auto}
.contents > .aligner{display:table-cell;text-align:center;vertical-align:middle;pointer-events:none}
.contents > .aligner p,
.contents > .aligner h2,
.contents > .aligner h3,
.contents > .aligner h4,
.contents > .aligner span,
.contents > .aligner a{pointer-events:auto}

.market-btn{display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:contain}
.market-btn:active{-moz-transform:scale(.97);-webkit-transform:scale(.97);transform:scale(.97)}
.market-btn > span{display:inline-block;vertical-align:middle;position:relative;padding-left:.44rem;font-size:.25rem;line-height:.3rem;font-weight:700}
.market-btn > span:before{content:"";display:block;position:absolute;width:.28rem;height:.28rem;left:0;top:50%;margin-top:-.145rem;background-repeat:no-repeat;background-size:contain;background-position:0 center}
.market-btn > span:after{content:"";display:block;position:absolute;width:.28rem;height:.31rem;left:0;top:50%;margin-top:-.17rem;background-repeat:no-repeat;background-size:contain;background-position:0 center}
.market-btn.kakao span{color:#241818}
.market-btn.kakao span:before{background-image:url(../img/bt_ic_kko.png)}
.market-btn.talkch{background:#484b56}
.market-btn.talkch span{font-weight:500;color:#fff;font-size:.233rem;line-height:.28rem}
.market-btn.talkch span:before{background-image:url(../img/bt_ic_talkch.png)}
.market-btn.store span{padding-left:.76rem;color:#241818}
.market-btn.store span:before{top:45%;background-image:url(../img/bt_ic_appstore.png)}
.market-btn.store span:after{left:.35rem;background-image:url(../img/bt_ic_googleplay.png)}
.main-release-txt{display:block;width:3.48rem;margin:0 auto;padding-top:.54rem;padding-bottom:.18rem}

.download-btn{display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:contain}
.download-btn:active{-moz-transform:scale(.97);-webkit-transform:scale(.97);transform:scale(.97)}
.download-btn + .download-btn{margin-left:.4rem}
.download-btn.ios{width:2.45rem}
.download-btn.google{width:2.57rem}
.download-btn.windows{width:2.52rem}

.inner-contents{display:block;height:auto;position:relative}
.page-title{display:block;text-align:center}
.page-title .page-name{display:block;font-family:'Lemon Milk';font-weight:300;color:#5ebf3e;font-size:.16rem;line-height:.21rem;letter-spacing:.06em}
.page-title .title{display:block;color:#241818;font-weight:700;font-size:.45rem;line-height:.52rem;padding:.18rem 0 .12rem}
.page-title .description{display:block;font-weight:500;color:#4d4d4d;font-size:.22rem;line-height:.28rem}

.scene .page-title{position:relative;opacity:0;top:.3rem;transition:all .3s ease-out}
.scene.in .page-title{opacity:1;top:0;transition:opacity .3s .15s ease-out,top .4s .15s ease-out}



#header{position:fixed;top:0;left:0;width:100%;min-width:15rem;height:1.5rem;z-index:10;background:url(../img/gnb_bg.png) repeat-x center bottom / auto 100%;opacity:0}
.init #header{opacity:1}
#header .bi{z-index:1;position:absolute;width:1.78rem;padding:.2rem .15rem .1rem;left:0;top:0;opacity:1;pointer-events:auto;cursor:pointer;transition:opacity .2s ease-out}
#header.main .bi{pointer-events:none;opacity:0}
#header .links{position:absolute;left:0;width:100%;top:50%;margin-top:-.175rem;height:.35rem;text-align:center}
#header .links .menu{cursor:pointer;position:relative;display:inline-block;vertical-align:middle;padding:0 .4rem}
#header .menu .txt{font-weight:500;color:#fff;font-size:.23rem;line-height:.31rem;padding:.02rem .025rem;display:inline-block;position:relative;white-space:nowrap}
#header .menu .txt:before{content:"";display:block;position:absolute;top:100%;left:50%;width:0;height:.02rem;background:#fff;-webkit-transition:all .15s linear;transition:all .15s linear}
#header .menu:hover .txt:before,
#header .menu.selected .txt:before{left:0;width:100%}

#header .depth2{opacity:0;position:absolute;left:100%;margin-left:-.23rem;top:50%;margin-top:-.13rem;-webkit-transition:all .2s;transition:all .2s;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);white-space:nowrap}
#header .depth2:before{content:"";display:block;top:50%;margin-top:-.03rem;height:.04rem;width:.1rem;position:absolute;right:100%;background:url(../img/nav_tail.png) no-repeat center;background-size:100% auto}
#header .depth2 .menu{display:inline-block;width:.92rem;text-align:center;vertical-align:middle;color:#fff;font-size:.16rem;line-height:.2rem;padding:.02rem 0 .03rem;position:relative;border:.0223rem solid #fff;font-weight:500}
#header .depth2 .menu + .menu{border-left:0 none}
#header .depth2 .menu:hover,
#header .depth2 .menu.selected{background:#fff;color:#3f464a}
#header .menu:hover .depth2,
#header .menu.selected .depth2{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}

.util{position:absolute;left:50%;margin-left:4.8rem;top:.48rem;white-space:nowrap}
.util .link-btn{display:inline-block;vertical-align:top;width:.56rem}
.util .link-btn:active{-moz-transform:scale(.91);-webkit-transform:scale(.91);transform:scale(.91)}

#footer{position:fixed;bottom:0;width:100%;text-align:right}
.copyright{position:absolute;z-index:10;bottom:.02rem;right:.2rem;width:3.24rem}
.copyright img{max-width:100%;height:auto;display:inline-block}

#layers{pointer-events:none;opacity:0;position:absolute;top:0;width:100%;height:0;overflow:hidden;z-index:99;-webkit-box-sizing:border-box;box-sizing:border-box;padding:1rem 0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out}
#layers #dim{opacity:0;pointer-events:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.73);-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out}
#layers .layer{display:none;position:absolute;width:auto;height:auto;left:50%;top:50%;webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
#layers .layer .bt-close{position:absolute;bottom:100%;margin-bottom:-.09rem;left:100%;width:.48rem;height:auto}
#layers .layer .bt-close:active{-moz-transform:scale(.91);-webkit-transform:scale(.91);transform:scale(.91)}

#app.popup-view.ie{overflow:hidden}
#app.popup-view.ie #layers{overflow:hidden}
#app.popup-view #layers{height:100vh;position:fixed;overflow:auto;opacity:1}
#app.popup-view #dim{pointer-events:auto;opacity:1}
#layers .layer.visible{pointer-events:auto;display:block}
#videoPlay .player{margin:0 auto;display:block;width:11.42rem;max-width:calc(100vw - 1rem);height:0;padding-top:56.25%;overflow:hidden;background:#000;position:relative}
#videoPlay .player iframe{position:absolute;left:0;top:0;width:100%;height:100%}

#layers #largePic{max-width:calc(100vw - 1rem);width:auto;display:inline-block;max-height:calc(100vh - 1rem)}

#layers #shareDialog{width:5.6rem;height:6.86rem;border:.03rem solid #5ebf3e;background:url(../img/common_bg.jpg) repeat center}
.share-title{text-align:center;display:block;font-size:.35rem;font-weight:600;color:#241818;line-height:.42rem;padding:.28rem 0 .18rem}
.share-title strong{display:block;color:#5ebf3e;font-weight:inherit;font-size:inherit}
.share-body{padding:0 .28rem .28rem;position:relative}
.share-body .icons{font-size:0;line-height:0;position:absolute;border-radius:.46rem;height:.92rem;width:4.5rem;left:50%;margin-left:-2.25rem;bottom:.45rem;background:rgba(0,0,0,.67)}
.share-body .icons li{position:relative;vertical-align:top;display:inline-block;width:25%}
.share-body .icons .btn{display:block;width:.92rem;height:auto;margin:0 auto}
.share-body .icons .btn:active{-moz-transform:scale(.94);-webkit-transform:scale(.94);transform:scale(.94)}
#shareDialog .bt-close{margin-left:-.25rem;margin-bottom:-.25rem}
.share-body .icons .tbox{width:100%;font-size:1px;line-height:1px;text-align:left;opacity:0;pointer-events:none;position:absolute;left:0;top:0;display:block}

#layers #marketDialog{padding:.07rem;background:#68c4dc;border-radius:.12rem;box-shadow:inset 0 1px 1px rgba(127,238,255,.35)}
.market-dg-body{width:7.5rem;height:4.6rem;border-radius:.14rem;background:url(../img/market_dg_bg.jpg) no-repeat center;background-size:cover;box-shadow:.06rem .08rem .13rem rgba(100,99,118,.34);moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border:.01rem solid rgba(255,255,255,.35)}
.market-dg-body .title{display:block;text-align:center;font-size:.36rem;line-height:.46rem;letter-spacing:-.03em;color:#4d4d4d;font-weight:700;padding-top:1.1rem;padding-bottom:.74rem}
.market-button{display:block;text-align:center}
.market-button .market-btn{background:#484b56;width:3.09rem;padding:.17rem 0;margin:0 .09rem;border-radius:.34rem}
.market-button .market-btn > span{color:#fff;font-size:.25rem;line-height:.32rem;font-weight:400;padding-left:.32rem;text-shadow:-1px 0 1px rgba(0,0,0,.65)}
.market-button .market-btn > span:before{width:.22rem;height:.32rem}
.market-button .market-btn.appstore span:before{background-image:url(../img/bt_ic_dg_appstore.png)}
.market-button .market-btn.playstore span:before{background-image:url(../img/bt_ic_dg_googleplay.png)}



#mainScene .bg-visual.btm{background:url(../img/main_bg_btm.png) no-repeat center bottom;background-position:center bottom;background-size:100% auto}
#mainScene .contents{z-index:1}
#mainScene .contents > .aligner{padding-top:1rem}
#mainScene .bg-overlay{background-image:url(../img/dim_pattern.png);background-repeat:repeat;background-position:center}
.main-title{display:block;color:#fff;font-weight:700;font-size:.35rem;letter-spacing:-.03em;line-height:.53rem;margin-top:.04rem;padding-bottom:.02rem;text-shadow:0 0 .06rem rgba(178,231,255,.8)}
.main-title > span{display:inline-block;margin-left:-.2rem;margin-right:-.2rem;font-weight:inherit}
.main-logo{display:inline-block;width:6.41rem;margin-top:-.44rem}
.main-video-play{display:block;margin-top:-.25rem;vertical-align:middle;text-align:center} 
.main-video-play .btn{display:inline-block;vertical-align:middle;width:1.34rem;padding:0 .22rem}
.main-video-play .btn:active{-moz-transform:scale(.96);-webkit-transform:scale(.96);transform:scale(.96)}
.main-video-play .txt{display:inline-block;vertical-align:middle;font-family:'Lemon Milk';font-weight:300;color:rgba(255,255,255,.68);font-size:.13rem;line-height:.17rem;text-shadow:0 0 .05rem rgba(178,231,255,.8);padding-bottom:.08rem}
.main-video-play .txt.play{margin-right:-.22rem;letter-spacing:.22rem}
.main-video-play .txt.video{margin-right:-.15rem;letter-spacing:.15rem}
#mainScene .coming-soon{display:block;margin-top:.48rem;font-family:'Lemon Milk';font-weight:500;color:#fff;font-size:.26rem;letter-spacing:.04rem;line-height:.35rem;text-shadow:0 0 .09rem rgba(178,231,255,.9);padding-left:.26rem}
.main-button{display:block;text-align:center;padding-top:0}
.main-button .market-btn{padding-top:.27rem;padding-bottom:.3rem}
.main-button .market-btn.kakao{background-image:url(../img/main_bt_preregister_kko.png);width:3.42rem;height:.31rem}
.main-button .market-btn.store{background-image:url(../img/main_bt_preregister.png);width:3.42rem;height:.31rem}


#mainScene .banners{z-index:1;position:absolute;right:.3rem;height:auto;width:1.5rem;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
#mainScene .banners .btn-channel{pointer-events:auto;cursor:pointer;z-index:10;width:100%;display:block;height:1.36rem;margin:.06rem 0;background-size:100% auto;background-repeat:no-repeat;background-position:0 0}

#mainScene .banners .btn-channel:hover{
  -webkit-animation:banner-hover .15s steps(2, end) forwards;
  animation:banner-hover .15s steps(2, end) forwards
}
#kakaotalkChannelBanner{background-image:url(../img/channel_kakaotalk.png)}
#youtubeChannelBanner{background-image:url(../img/channel_youtube.png)}
#officialCafeBanner{background-image:url(../img/official_cafe.png)}

#mainScene  #mejiroHouseParty{width:1.6rem;height:1.52rem}
#mainScene  #mejiroHouseParty:hover{-webkit-animation:none;animation:none}
#mejiroHouseParty{background-image:url(../img/mejiro_house_party.png)}

@-webkit-keyframes banner-hover{
	to{
		background-position:0 100%
	}
}
@keyframes banner-hover{
	to{
		background-position:0 100%
	}
}


#preregisterScene{}
#preregisterScene .bg{background:url(../img/common_bg.jpg) repeat center;background-size:100% auto;min-height:12rem}
#preregisterScene .bg-stadium{position:absolute;width:100%;top:0;height:75.2%;background:url(../img/preregister_bg_top.png) no-repeat center bottom;background-size:cover}
#preregisterScene .bg:after{position:absolute;content:"";display:block;top:-9.5rem;left:50%;margin-left:-7.5rem;width:15rem;height:15rem;
background: -moz-radial-gradient(circle, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 70%);
background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 70%);
background: radial-gradient(circle, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 70%)}
#preregisterScene .visual-img{position:absolute;top:50%}
#preregisterScene .visual-img img{width:100%;position:absolute;top:0;height:auto;object-fit:contain}
#preregisterScene .visual-img.lf{right:50%;margin-right:3.58rem;width:4.7rem;margin-top:-3.12rem}
#preregisterScene .visual-img.rb{left:50%;margin-left:5.4rem;width:3.8rem;margin-top:-3.65rem}
#preregisterScene .visual-img.rf{left:50%;margin-left:4.29rem;width:5.12rem;margin-top:-3.33rem}

#preregisterScene .inner-contents{height:6.49rem;top:.32rem;width:11.45rem;margin:0 auto}
.eventbox{position:absolute}
.eventbox:before{content:"";display:block;position:absolute;left:-.08rem;top:-.04rem;right:-.13rem;bottom:-.19rem;background-repeat:no-repeat;background-size:contain;background-position:center;pointer-events:none}

.eventbox.kakao{left:0;top:0;width:3.8rem;height:3.44rem}
.eventbox.kakao:before{background-image:url(../img/preregister_box_lt.png)}
.eventbox.talk-channel{left:0;bottom:0;width:3.8rem;height:2.95rem}
.eventbox.talk-channel:before{background-image:url(../img/preregister_box_lb.png)}
.eventbox.attainment{right:0;top:0;width:7.55rem;height:6.49rem}
.eventbox.attainment:before{background-image:url(../img/preregister_box_r.png)}

.box-header{display:block;margin:0 auto;text-align:center;position:relative;color:#fff;font-size:.258rem;line-height:.284rem;letter-spacing:-.04em;font-weight:600;text-shadow:0 .01rem .03rem rgba(21,77,74,.53)}
.box-header span{font-weight:inherit}
.box-header:before,
.box-header:after{content:"";display:block;position:absolute;top:50%;background-size:contain;background-repeat:no-repeat;background-position:center}
.kakao .box-header{width:3rem;padding:.18rem 0 .12rem}
.kakao .box-header:before,
.kakao .box-header:after{width:.3rem;height:.3rem;margin-top:-.15rem}
.kakao .box-header:before{left:0;background-image:url(../img/tit_ic_horseshoe_l.png)}
.kakao .box-header:after{right:0;background-image:url(../img/tit_ic_horseshoe_r.png)}
.talk-channel .box-header{padding:.14rem 0 .1rem}
.attainment .box-header{margin:.16rem auto .17rem;width:3.3rem;position:relative;}
.attainment .box-header:before{left:0;width:100%;height:.55rem;top:0;border-radius:.28rem;mix-blend-mode:multiply;background:#1999b5;box-shadow:inset 0 .01rem .01rem rgba(0,0,0,.35)}
.attainment .box-header > span{position:relative;display:block;margin:0 auto;font-size:.3rem;border-radius:.28rem;line-height:.36rem;padding:.1rem 0 .09rem;z-index:1;box-shadow:0 .01rem .01rem rgba(255,255,255,.61)}
.attainment .box-header > span:before,
.attainment .box-header > span:after{content:"";display:block;position:absolute;top:50%;background-size:contain;background-repeat:no-repeat;background-position:center;width:.24rem;height:.24rem;margin-top:-.12rem}
.attainment .box-header > span:before{left:.12rem;background-image:url(../img/tit_ic_star_l.png)}
.attainment .box-header > span:after{right:.12rem;background-image:url(../img/tit_ic_star_r.png)}

.evt-items{display:block;position:relative;z-index:1;text-align:center;vertical-align:top}
.evt-items li{display:inline-block}
.evt-items li img{display:block;margin:0 auto}
.evt-items .name{display:block;text-align:center;font-size:.22rem;vertical-align:bottom;line-height:.28rem;font-weight:500;color:#4d4d4d;padding:.04rem 0 .08rem;letter-spacing:-.02em}
.kakao .evt-items{padding-top:.14rem}
.kakao .evt-items li img{width:1.1rem}
.talk-channel .evt-items{padding-top:.1rem}
.talk-channel .evt-items img{width:1.05rem}

.attainment .evt-items{padding-top:.48rem}
.attainment .evt-items li{margin:.1rem .03rem 0;width:1.57rem;height:1.57rem;position:relative;box-sizing:border-box;font-size:0;line-height:0}
.attainment .evt-items li img{width:100% auto}
.attainment .evt-items .name{font-size:0;line-height:0}
.evt-items .goal{position:absolute;left:0;top:0}
.attainment .evt-items li.clear:before{content:"";display:block;position:absolute;width:.7rem;height:.7rem;left:50%;margin-left:-.35rem;top:-.15rem;background:url(../img/preregister_evt_clearmark.png) no-repeat center top;background-size:contain;z-index:1}
.attainment .box-footer{padding-top:.52rem}
.attainment .box-footer .tbox{font-weight:600;letter-spacing:-.03em;font-size:.28rem;line-height:.35rem;color:#fff;text-shadow:0 .01rem .03rem rgba(21,77,74,.53);width:5.5rem;padding:.15rem 0;border-radius:.33rem;background:#1d738f;margin:0 auto;display:block}


.evt-items li.lv2{display:none}
.attainment .evt-items.page2{padding-top:.1rem}
.attainment .evt-items.page2 li.lv2{display:inline-block}
.attainment .evt-items.page2 li{margin:.07rem .03rem 0;width:1.37rem;height:1.37rem}
.attainment .evt-items.page2 li.clear:before{width:.62rem;height:.62rem;margin-left:-.31rem;top:-.14rem}
.attainment .evt-items.page2 + .box-footer{padding-top:.15rem}

.box-footer{display:block;text-align:center;position:relative;z-index:1}
.box-footer .market-btn.kakao{background-image:url(../img/preregister_bt_preregister_kko.png);width:3.16rem;height:.31rem;padding-top:.22rem;padding-bottom:.21rem}
.box-footer .market-btn.talkch{width:2.94rem;height:.28rem;padding-top:.19rem;padding-bottom:.18rem;border-radius:.33rem}

#preregisterScene .visual-img img{opacity:0;transition:all .2s .2s ease-out}
#preregisterScene.in .visual-img img{opacity:1}
#preregisterScene .lf img{right:-20%}
#preregisterScene .rb img{left:-25%}
#preregisterScene .rf img{left:-20%}
#preregisterScene.in .visual-img.lf img{right:0;transition:all .25s .4s ease-out}
#preregisterScene.in .visual-img.rb img{left:0;transition:all .25s .5s ease-out}
#preregisterScene.in .visual-img.rf img{left:0;transition:all .25s .4s ease-out}

#preregisterScene .eventbox{transform:translateY(.2rem);opacity:0;transition:all .2s .2s ease-out}
#preregisterScene.in .eventbox{transform:translateY(0);opacity:1;transition:all .25s .4s ease-out}


#introductionScene{}
#introductionScene .inner-contents{margin:0 auto;width:12.8rem;max-width:calc(100% - 6.4rem);padding-top:2.68rem;padding-bottom:.68rem;}
#introductionScene .bg-runner{position:absolute;width:50%;min-width:6.4rem;right:50%;max-width:89vh;top:0;height:100%;background:url(../img/introduction_bg.jpg) no-repeat left top;background-size:6.5rem auto}
#introductionScene .bg .visual-img{position:absolute;right:0;width:62.5%;max-width:120vh;top:0;height:100%;background:url(../img/introduction_bg1.png) no-repeat left center;background-size:cover}
#introductionScene .bg .visual-img img{width:auto;min-width:100%;position:absolute;left:0;top:0;height:auto;object-fit:cover;min-height:10.8rem}
#introductionScene .contents{pointer-events:auto;z-index:1;display:block;pointer-events:auto;overflow:hidden;overflow-y:auto;position:relative;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-overflow-style:none;scrollbar-width:none}
#introductionScene .contents::-webkit-scrollbar{display:none}
#introductionScene:after{content:"";display:block;position:absolute;width:50%;left:0;bottom:0;height:8%;
background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 35%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 35%, rgba(255,255,255,0) 100%);
background: linear-gradient(0deg, rgba(255,255,255,1) 35%, rgba(255,255,255,0) 100%);
}

.introduction-title{display:block;padding-bottom:.3rem}
.introduction-title .page-name{display:block;font-family:'Lemon Milk';font-weight:300;color:#5EBF3E;font-size:.16rem;line-height:.21rem;letter-spacing:.06em;padding-bottom:.04rem}
.introduction-title .title{display:block;color:#1A1A1A;font-weight:700;font-size:.54rem;line-height:.68rem;padding:.2rem 0}

#introductionScene .box-title{display:inline-block;color:#4D4D4D;font-weight:700;font-size:.2rem;line-height:.31rem;position:relative;border-radius:.22rem;border:.03rem solid #5EBF3E;padding:.01rem .2rem 0 .37rem}
#introductionScene .box-title:before{content:"";display:block;position:absolute;left:.15rem;width:.15rem;height:.15rem;top:50%;margin-top:-.075rem;background:url(../img/titlebox_star.png) no-repeat center;background-size:.15rem auto}
#introductionScene .description{position:relative;display:block;color:#4D4D4D;font-size:.18rem;font-weight:400;line-height:.31rem;padding-bottom:.6rem;padding-top:.2rem;letter-spacing:-.01em}


#introductionScene .introduction-title{position:relative;opacity:0;top:.3rem;transition:all .3s ease-out}
#introductionScene.in .introduction-title{opacity:1;top:0;transition:opacity .3s .15s ease-out,top .4s .15s ease-out}
#introductionScene .box-title{position:relative;opacity:0;top:.3rem;transition:all .3s ease-out}
#introductionScene.in .box-title{opacity:1;top:0;transition:opacity .4s .25s ease-out,top .35s .3s ease-out}
#introductionScene .description{position:relative;opacity:0;top:.3rem;transition:all .3s ease-out}
#introductionScene.in .description{opacity:1;top:0;transition:opacity .4s .25s ease-out,top .45s .3s ease-out}



#characterScene{background:url(../img/common_bg.jpg) repeat center;background-size:100% auto}
#characterScene .bg:after{position:absolute;content:"";display:block;top:-9.5rem;left:50%;margin-left:-7.5rem;width:15rem;height:15rem;
background:-moz-radial-gradient(circle, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 70%);
background:-webkit-radial-gradient(circle, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 70%);
background:radial-gradient(circle, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 70%)}
#characterScene .contents{display:block;pointer-events:auto;overflow:hidden;overflow-y:auto;margin:0 auto;position:relative;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-overflow-style:none;scrollbar-width:none}
#characterScene .contents::-webkit-scrollbar{display:none}
/*
#characterScene:after{content:"";display:block;position:absolute;width:100%;left:0;bottom:0;height:7%;
background: -moz-linear-gradient(0deg, rgba(255,255,255,.9) 25%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(0deg, rgba(255,255,255,.9) 25%, rgba(255,255,255,0) 100%);
background: linear-gradient(0deg, rgba(255,255,255,.9) 25%, rgba(255,255,255,0) 100%);
}
*/
#characterScene .inner-contents{display:block;padding-top:1.8rem;padding-bottom:2.6rem;height:auto}
#characterScene .page-title{padding-bottom:.32rem}
.profile-list{position:relative;width:calc(11.52rem + 2px);margin:0 auto;text-align:left;vertical-align:top;padding:0 0 .64rem}
.profile-list li{width:1.8rem;padding-left:.12rem;padding-bottom:.08rem;display:inline-block;position:relative}
.profile-list .view{cursor:pointer;pointer-events:auto;display:block;-moz-transition:all .2s cubic-bezier(0.175,0.65,0.32,1);-webkit-transition:all .2s cubic-bezier(0.175,0.65,0.32,1);transition:all .2s cubic-bezier(0.175,0.65,0.32,1)}
.profile-list .view:hover,
.profile-list .view:active{-moz-transform:scale(.96);-webkit-transform:scale(.96);transform:scale(.96)}
#app .profile-list .view img{backface-visibility:hidden;image-rendering:-webkit-optimize-contrast}

#characterScene .profile-list{opacity:0;top:.3rem;transition:all .3s ease-out}
#characterScene.in .profile-list{opacity:1;top:0;transition:opacity .3s .25s ease-out,top .4s .25s ease-out}

#app.detail-view.ie{overflow:hidden}
#app.detail-view.ie #layers{overflow:hidden}
.pop-page{pointer-events:none;opacity:0;position:absolute;top:-100%;width:100%;height:100vh;overflow:hidden;z-index:99;-webkit-box-sizing:border-box;box-sizing:border-box;padding:1rem 0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;background:#fff}
#app.detail-view .pop-page{position:fixed;overflow:auto;opacity:1}
.pop-page.visible{pointer-events:auto;top:0;display:block;overflow-y:auto}
.pop-page.visible .contents::-webkit-scrollbar{display:none}

#characterDetailView{padding:0}
#characterDetailView .bg{left:0;min-width:15rem;height:100%;top:0}
#characterDetailView .bg:before{content:"";display:block;background:url(../img/characterview_bg.jpg) no-repeat center top;background-size:100% auto;position:absolute;right:50%;width:6rem;height:10rem;top:0}
#characterDetailView .bg:after{content:"";display:block;position:absolute;bottom:0;width:100%;left:0;height:100%;background:url(../img/characterview_bg_btm.png) no-repeat center bottom;background-size:100% auto}
#characterDetailView .contents{overflow:hidden;overflow-y:visible;padding-top:1rem;padding-bottom:1rem;height:calc(100% - 2rem)}
#characterDetailView .pop-page-header{z-index:10;position:absolute;width:100%;margin:0 auto;max-width:15rem;top:-.65rem;left:50%;-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
#characterDetailView .btn-back{position:absolute;left:0;top:0}
.btn-back span{display:inline-block;font-weight:500;font-size:.236rem;line-height:.32rem;color:#6ac10e;position:relative;padding:0 .08rem;padding-left:.28rem;white-space:nowrap}
.btn-back span:before{content:"";display:block;position:absolute;left:0;;width:.2rem;height:.2rem;top:50%;margin-top:-.1rem;background:url(../img/bt_back.png) no-repeat center;background-size:100% auto}
.btn-back:active{-moz-transform:scale(.92);-webkit-transform:scale(.92);transform:scale(.92)}

#characterDetailView .inner-contents{width:12.8rem;position:relative;margin:1rem auto;}
#characterDetailView .inner-contents:after{content:"";display:block;height:0;clear:both}
.character-visual{display:block;float:left;height:7.5rem;width:50%;overflow:visible;position:relative}
.character-info{display:block;float:right;height:7.5rem;overflow:visible;width:50%;position:relative;z-index:1}

.select-costume{z-index:10;position:absolute;left:.7rem;-moz-transform:translate(0, -50%);-webkit-transform:translate(0, -50%);transform:translate(0, -50%);top:50%;height:auto}
.select-costume li{position:relative;padding:.12rem 0}

/*
.select-costume .btn{cursor:pointer;text-align:center;display:block;box-sizing:border-box;color:#4d4d4d;border:.025rem solid #4d4d4d;font-weight:700;text-align:center;font-size:.178rem;line-height:.2rem;width:.72rem;height:.72rem;position:relative;padding:.24rem 0 0;border-radius:100% .08rem 100% 100%}
.select-costume li .btn small{font-size:70%;line-height:1.13em;display:inline-block;margin-top:-.25em;letter-spacing:-.05em;font-weight:700}
.select-costume .btn.sel{position:absolute;top:.08rem;left:0;width:100%;opacity:0;transition:opacity .2s;color:#fff}
.select-costume li.selected .btn.sel{opacity:1}
*/
.select-costume .btn{cursor:pointer;text-align:center;display:block;box-sizing:border-box;color:#4d4d4d;width:.72rem;height:.72rem;position:relative;border-radius:100%;transition:transform .15s ease-out}
.select-costume .btn:hover,
.select-costume .btn:active{transform:scale(.93)}
#app .select-costume .btn img{display:block;position:absolute;left:50%;margin-left:-.36rem;width:.72rem;top:50%;margin-top:-.15rem;height:auto;backface-visibility:hidden;image-rendering:-webkit-optimize-contrast}
.select-costume .btn:after{content:"";display:block;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:100%;border:.04rem solid #46f63b;opacity:0;box-sizing:border-box;transform:scale(0);transition:opacity .15s ease-out}
.select-costume li.selected .btn:after{opacity:1;transform:scale(1.25)}



.character-viewer{pointer-events:none;width:6rem;height:9.6rem;position:absolute;top:50%;margin-top:-5.04rem;right:-.5rem;overflow:hidden}
.character-viewer .swiper-slide img{display:block;position:absolute;top:0;left:.5rem;width:100%;height:auto;opacity:0;transition:left .4s, all .2s .05s}
.character-viewer .swiper-slide.swiper-slide-active img{left:0;opacity:1}

.character-info .thumbnails{position:relative;display:block;width:4.95rem;margin:0 auto;pointer-events:auto;padding-bottom:.2rem;left:-.18rem;margin-top:-.8rem}
.character-info .thumbnails .swiper-slide{box-sizing:border-box;padding:.1rem .07rem 0}
.character-info .thumbnails .btn{cursor:pointer;display:block;overflow:hidden;border:.025rem solid #fff;border-radius:.1rem;transition:all .15s;height:0;padding-top:100%;background-repeat:no-repeat;background-position:center;background-size:cover}
.character-info .thumbnails .swiper-slide:before{content:"";display:block;opacity:0;position:absolute;width:.12rem;height:.05rem;background:url(../img/arr_select.png) no-repeat center top;background-size:100% auto;top:.01rem;left:50%;margin-left:-.06rem}
.character-info .thumbnails li:hover .btn,
.character-info .thumbnails .selected .btn{border-color:#4d4d4d}
.character-info .thumbnails .swiper-slide.selected:before{opacity:1;
-webkit-animation:ani_move_arr .8s .3s linear infinite;
-moz-animation:ani_move_arr .8s .3s linear infinite;
animation:ani_move_arr .8s .3s linear infinite
}

.character-info .arr{cursor:pointer;width:.23rem;height:.23rem;position:absolute;top:.42rem;opacity:.75}
.character-info .arr.swiper-button-disabled{pointer-events:none;opacity:.25}
.character-info .arr.prev{right:100%;margin-right:.12rem}
.character-info .arr.next{left:100%;margin-left:.12rem}
.character-info .arr:active{-moz-transform:scale(.92);-webkit-transform:scale(.92);transform:scale(.92)}

.character-info .details{display:block;width:7.5rem}
.character-info .details .swiper-slide{box-sizing:border-box;padding:0 .6rem}
.character-info .details .swiper-slide,
.character-info .details .swiper-slide *{pointer-events:none}
.character-info .details .swiper-slide.swiper-slide-active,
.character-info .details .swiper-slide.swiper-slide-active *{pointer-events:auto}

.character-header{position:relative;display:block;width:4.9rem;text-align:left;padding-bottom:.25rem}
.character-header p{display:block}
.character-header .eng-name{font-size:.2rem;font-weight:500;letter-spacing:.05em;line-height:.3rem}
.character-header .name{color:#191919;font-size:.54rem;font-weight:700;line-height:.6rem;padding:.1rem 0}
.character-header .cv{color:#191919;font-size:.2rem;font-weight:700;line-height:.24rem;position:relative;display:inline-block;padding-left:.3rem;vertical-align:baseline}
.character-header .cv:before{content:"";display:block;width:.15rem;height:.15rem;position:absolute;left:.05rem;top:50%;margin-top:-.07rem;background:url(../img/characterview_star.png) no-repeat center;background-size:contain}

.character-header .cv button{width:.25rem;height:.25rem;display:block;position:absolute;vertical-align:top;left:100%;margin-left:.13rem;top:50%;margin-top:-.12rem}
.character-header .cv button:before{content:"";display:block;width:100%;top:0;height:100%;left:0;position:absolute;background:url(../img/ic_sound.png) no-repeat center;background-size:contain;z-index:1}
.character-header .cv button.playing:before{background-image:url(../img/ic_pause.png)}

#characterVoice{position:absolute;right:100%;bottom:100%}
#downloadButtons{padding:0 0 1.5rem;text-align:center}
#downloadButtons .btn{overflow:hidden;position:relative;display:inline-block;vertical-align:top;width:3.32rem;height:.54rem;border-radius:.08rem;background:#69c10c}
#downloadButtons .btn + .btn{margin-left:.4rem}
#downloadButtons .btn span{color:#fff;font-size:.22rem;line-height:.31rem;font-weight:700;display:inline-block;padding-top:.12rem}
#downloadButtons .btn:active{-moz-transform:scale(.98);-webkit-transform:scale(.98);transform:scale(.98)}


.character-profile{display:block;width:4.9rem;position:relative}
.character-profile:before,
.character-profile:after{content:"";display:block;position:absolute;left:0;width:100%;height:2px;background:#bfbfbf}
.character-profile:before{top:0}
.character-profile:after{top:100%}
.character-profile > p:first-child{padding-top:.26rem}
.character-profile > p:last-child{padding-bottom:.24rem}
.character-profile > p{display:flex;text-align:left;font-size:.18rem;line-height:.29rem;color:#723710}
.character-profile > p > span{display:inline-block}
.character-profile > p > .status{width:1.16rem;display:flex;flex:none}
.character-profile > p > .status em{display:inline-block;padding-right:.15rem;vertical-align:top;flex:none;width:auto}
.character-profile > p > .val{padding-left:.1rem}
.character-profile > p > .status:after{content:"";display:inline-block;flex:1;height:.29rem;background:url(../img/characterview_dotline.png) repeat-x left center;background-size:auto .04rem}

.character-body{display:block;padding:.24rem 0 .2rem;min-height:2.5rem;height:auto}
.words{display:block;text-align:left;color:#4d4d4d;padding-bottom:.12rem}
.words span{position:relative;display:inline-block;padding:0;font-size:.24rem;line-height:.31rem;font-weight:500;color:inherit}
/*
.words span{padding:0 .12rem}
.words span:after,
.words span:before{display:inline-block;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}
.words span:before{content:"“";text-indent:-.12rem}
.words span:after{content:"”";}
*/

.character-body .description{font-size:.18rem;color:#4d4d4d;text-align:left;font-weight:400;line-height:.29rem;padding:0;display:block;margin:0;letter-spacing:-.02em}
.character-body p font{display:inline-block;vertical-align:top}
.character-body p font.st{margin-left:-.4em;margin-right:.05em}
.character-body p font.ed{margin-right:-.4em;margin-left:.05em}

.character-footer{display:block}
.character-footer .btn{overflow:hidden;position:relative;display:block;width:3.32rem;height:.54rem;border-radius:.27rem;background-repeat:no-repeat;background-size:cover;background-position:center}
.character-footer .btn:before{content:"";display:block;width:.24rem;height:.24rem;top:50%;margin-top:-.12rem;position:absolute;background:url(../img/bt_ic_play.png) no-repeat center;background-size:100% auto;right:.13rem}
.character-footer .btn span{color:#fff;font-size:.22rem;line-height:.31rem;font-weight:700;text-shadow:0 .01rem .01rem rgba(100,99,118,.72);display:inline-block;padding-top:.12rem}
.character-footer .btn:active{-moz-transform:scale(.94);-webkit-transform:scale(.94);transform:scale(.94)}

#galleryScene{background:url(../img/common_bg.jpg) repeat center;background-size:100% auto}
#galleryScene:before{position:absolute;content:"";display:block;top:-9.5rem;left:50%;margin-left:-7.5rem;width:15rem;height:15rem;
background:-moz-radial-gradient(circle, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 70%);
background:-webkit-radial-gradient(circle, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 70%);
background:radial-gradient(circle, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 70%)}
#galleryScene .bg:before,
#galleryScene .bg:after{content:"";display:block;position:absolute;background-repeat:no-repeat;background-size:100% auto}
#galleryScene .bg:before{right:0;top:0;width:6.2rem;height:3.6rem;background-image:url(../img/gallery_bg_top.png);}
#galleryScene .bg:after{left:0;bottom:0;width:6.9rem;height:4.75rem;background-image:url(../img/gallery_bg_btm.png);}
#gallerScene .page-title{padding-top:1.5rem}
.gallery-list{padding-top:.1rem;display:block;margin:0 auto;width:11.55rem;vertical-align:top;position:relative}
.gallery-list li{display:inline-block;vertical-align:top;padding:.06rem;height:auto}
.gallery-list .view{cursor:pointer;display:block;width:3.73rem;height:auto;border-radius:.12rem;overflow:hidden;position:relative}
.gallery-list .view.blank{cursor:default}
.gallery-list .thumb{position:absolute;width:100.4%;height:100.4%;top:-.2%;left:-.2%;background-repeat:no-repeat;background-size:cover;background-position:center;-moz-transition:all .4s;-webkit-transition:all .4s;transition:all .4s}
.gallery-list .view:hover .thumb,
.gallery-list .view:active .thumb{-moz-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1)}
.gallery-list .view:before{content:"";display:block;position:absolute;z-index:2;width:.6rem;height:.6rem;left:50%;top:50%;margin-left:-.3rem;margin-top:-.3rem;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url(../img/bt_zoom.png)}
.gallery-list .view.vid:before{background-image:url(../img/bt_play.png)}
.gallery-list .view.blank:before{content:"Coming Soon";left:0;width:100%;text-align:center;color:#fff;opacity:.59;font-size:.3rem;font-weight:400;background:none;line-height:.4rem;margin-left:0;margin-top:-.2rem;top:50%}
.gallery-list .view:active:before{-moz-transform:scale(.92);-webkit-transform:scale(.92);transform:scale(.92)}
.gallery-list .view.blank:active:before{-moz-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}

#galleryScene .gallery-list{opacity:0;top:.3rem;transition:all .3s ease-out}
#galleryScene.in .gallery-list{opacity:1;top:0;transition:opacity .3s .25s ease-out,top .4s .25s ease-out}


#twinklewebScene{background:url(../img/common_bg.jpg) repeat center;background-size:100% auto}
#twinklewebScene .page-title{padding-top:1rem;padding-bottom:.08rem}
#twinklewebScene .inner-contents{pointer-events:auto}
.magazine-viewer{display:block;margin:0 auto;width:9.87rem;height:5.77rem;background:url(../img/twinkleweb_bg.png) no-repeat center;background-size:contain;position:relative;z-index:1}
#twinklewebScene .swiper-slide span{display:block;position:relative;height:auto}

#twinklewebScene .inner-contents{opacity:0;top:.3rem;transition:all .3s ease-out}
#twinklewebScene.in .inner-contents{opacity:1;top:0;transition:opacity .3s .25s ease-out,top .4s .25s ease-out}

.magazine-viewer .swiper-container{position:absolute;left:.28rem;top:.24rem;width:9.26rem;z-index:1}
.magazine-viewer .swiper-slide span{border:.025rem solid #9e947b}

.magazine-list{position:relative;width:9.87rem;margin:0 auto;display:block}
.magazine-list .swiper-slide{cursor:pointer;box-sizing:border-box;padding:0 .12rem}
.magazine-list .swiper-slide.selected{pointer-events:none}
.magazine-list .arr{cursor:pointer;width:.32rem;height:.32rem;position:absolute;top:50%;margin-top:-.16rem}
.magazine-list .arr.swiper-button-disabled{pointer-events:none;opacity:.3}
.magazine-list .arr.prev{right:100%;margin-right:.08rem}
.magazine-list .arr.next{left:100%;margin-left:.08rem}


.magazine-list .swiper-slide span:before,
.magazine-list .swiper-slide span:after{content:"";display:block;position:absolute;left:0;top:0;right:0;bottom:0}
.magazine-list .swiper-slide span:before{border:.025rem solid #585a40}
.magazine-list .swiper-slide.selected span:before{background:url(../img/twinkleweb_dim.png) center}
.magazine-list .swiper-slide span:after{background:url(../img/bt_zoom.png) no-repeat center;background-size:.6rem auto;transition:opacity .15s}
.magazine-list .swiper-slide:active span:after{-moz-transform:scale(.92);-webkit-transform:scale(.92);transform:scale(.92)}
.magazine-list .swiper-slide.selected span:after{opacity:0;transition:opacity .15s .1s}



/* ani_move_arr */
@-webkit-keyframes ani_move_arr{
	10% {-webkit-transform:translateY(0)}
	45% {-webkit-transform:translateY(40%)}
	55% {-webkit-transform:translateY(40%)}
	90% {-webkit-transform:translateY(0)}
}
@-moz-keyframes ani_move_arr{
	10%{-moz-transform:translateY(0)}
	45%{-moz-transform:translateY(40%)}
	55%{-moz-transform:translateY(40%)}
	90%{-moz-transform:translateY(0)}
}
@keyframes ani_move_arr{
	10%{transform:translateY(0)}
	45%{transform:translateY(40%)}
	55%{transform:translateY(40%)}
	90%{transform:translateY(0)}
}