@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&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);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,.7);width:0;height:0}
::-webkit-scrollbar-track{background:rgba(255,255,255,.7)}
::-webkit-scrollbar-corner{background:rgba(255,255,255,.7)}
::-webkit-scrollbar-thumb{background-clip:padding-box;background:rgba(0,0,0,.1)}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3)}

html,
body{position:relative;overflow:hidden;width:100%;height:100vh}
body img{display:block;width:100%;height:auto;object-fit:contain;image-rendering:-webkit-optimize-contrast;backface-visibility:hidden}
#app{position:relative;margin:0 auto;max-width:100vh;overflow:auto;width:100%;height:100%;scroll-snap-type:y proximity;opacity:0;background:url(../img/common_bg.jpg) repeat center;background-size:10rem auto;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:constant(safe-area-inset-top);padding-bottom:constant(safe-area-inset-bottom);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}


.fit-y{-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:constant(safe-area-inset-top);padding-bottom:constant(safe-area-inset-bottom);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.min-y{height:auto;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:constant(safe-area-inset-top);padding-bottom:constant(safe-area-inset-bottom);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.scene{scroll-snap-align:start;position:relative;width:100%;margin:0 auto;overflow:hidden;height:100vh;}
.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%;pointer-events:none}
.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:100vh;width:calc(100vh - constant(safe-area-inset-top) - constant(safe-area-inset-bottom));width:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:100vh;height:calc(100vh - constant(safe-area-inset-top) - constant(safe-area-inset-bottom));height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
.bg-video > video{display:inline-block;width:auto;min-width:100vw;height:auto;min-height:100vh}


.contents{scroll-snap-align:end;position:relative;width:100%;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 span,
.contents > .aligner a{pointer-events:auto}

.scene.min-y .contents{text-align:center;display:block;min-height:auto;height:auto;-webkit-box-sizing:border-box;box-sizing:border-box}


.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:.12rem;line-height:.17rem;letter-spacing:.06em}
.page-title .title{display:block;color:#241818;font-weight:700;font-size:.44rem;line-height:.5rem;padding:.06rem 0 .18rem}
.page-title .description{display:block;font-weight:500;color:#4d4d4d;font-size:.205rem;line-height:.323rem}


.market-btn{display:inline-block;position:relative;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:.32rem;font-size:.17rem;line-height:.21rem;font-weight:500}
.market-btn > span:before{content:"";display:block;position:absolute;width:.2rem;height:.2rem;left:0;top:50%;margin-top:-.1rem;background-repeat:no-repeat;background-size:contain;background-position:0 center}
.market-btn > span:after{content:"";display:block;position:absolute;width:.2rem;height:.22rem;left:0;top:50%;margin-top:-.11rem;background-repeat:no-repeat;background-size:contain;background-position:0 center}
.market-btn.kakao span{color:#241818}
.market-btn.kakao:before{content:"";display:block;position:absolute;pointer-events:none;left:-.09rem;top:-.06rem;bottom:-.09rem;right:-.09rem;background:url(../img/m_bt_preregister_kko.png) no-repeat center;background-size:contain}
.market-btn.kakao span:before{background-image:url(../img/bt_ic_kko.png)}
.market-btn.talkch{background:#484b56}
.market-btn.talkch span{color:#fff;font-size:.16rem;line-height:.21rem}
.market-btn.talkch span:before{background-image:url(../img/bt_ic_talkch.png)}
.market-btn.store span{padding-left:.5rem;color:#241818}
.market-btn.store:before{content:"";display:block;position:absolute;pointer-events:none;left:-.09rem;top:-.06rem;bottom:-.09rem;right:-.09rem;background:url(../img/main_bt_preregister.png) no-repeat center;background-size:contain}
.market-btn.store span:before{top:45%;background-image:url(../img/bt_ic_appstore.png)}
.market-btn.store span:after{left:.2rem;background-image:url(../img/bt_ic_googleplay.png)}

.market-btn:before,
.market-btn:after{object-fit:contain;image-rendering:-webkit-optimize-contrast;backface-visibility:hidden}


#app.nav-open{overflow:hidden}
#navWrapper{opacity:0;pointer-events:none;z-index:15;position:fixed;left:50%;top:0;width:100vw;height:100%;overflow:hidden;max-width:100vh;background:url(../img/m_dim.png) no-repeat center;background-size:cover;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);overflow:hidden;transition:opacity .25s ease-in-out;min-height:-webkit-fill-available}
#app.nav-open #navWrapper{overflow:hidden;opacity:1;pointer-events:auto}
#app.type-min.nav-open #navWrapper{overflow-y:auto}

#header{position:fixed;top:0;top:constant(safe-area-inset-top);top:env(safe-area-inset-top);left:50%;width:100%;max-width:100vh;height:1.28rem;z-index:10;background:url(../img/gnb_bg.png) repeat-x center top;background-size:auto 100%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);pointer-events:auto}
#header .bi{z-index:1;position:absolute;width:1.5rem;padding:.17rem .13rem 0;left:0;top:0;opacity:1;pointer-events:auto;transition:opacity .2s ease-out}
#header.main .bi{opacity:0;pointer-events:none;}

#header .ui-btn{display:block;width:auto;position:absolute;top:0;right:0;z-index:10;padding:.35rem .3rem}
#header .ui-btn img{display:block;width:.26rem;height:auto}


#navigation{position:absolute;top:0;right:-4.26rem;width:4.26rem;bottom:0;background:url(../img/m_nav_bg.jpg) no-repeat center top;background-size:cover;height:100%;transition:right .25s ease-in-out;z-index:20;min-height:-webkit-fill-available}
.nav-open #navigation{right:0}

#navigation .nav-head{padding:.88rem 0 0;position:relative;text-align:center}
#navigation .nav-head .bi{width:2.33rem;margin:0 auto .29rem;display:block}
#navigation .ui-btn{display:block;width:auto;position:absolute;top:0;right:0;z-index:10;padding:.35rem .3rem}
#header .ui-btn img{display:block;width:.26rem;height:auto}
#navigation .decoline{display:block;width:calc(100% - .7rem);height:.18rem;background:url(../img/m_nav_symbol.png) no-repeat center;background-size:.18rem auto;margin:0 auto;position:relative}
#navigation .decoline:before,
#navigation .decoline:after{content:"";display:block;position:absolute;background:#BDDFB2;height:1px;top:50%;width:calc(50% - .2rem)}
#navigation .decoline:before{left:0}
#navigation .decoline:after{right:0}
#navigation .banners{position:absolute;bottom:0;width:100%}
#navigation .links{padding:.43rem .3rem 2.28rem;text-align:left;display:block}
#navigation .links .menu{display:block;padding:.175rem 0}
#navigation .links .menu .txt{position:relative;padding:0 .05rem 0;display:inline-block;font-size:.31rem;line-height:.4rem;color:#4D4D4D;font-weight:500}
#navigation .menu .txt:before{content:"";display:block;position:absolute;top:100%;left:50%;width:0;height:.03rem;background:#5EBF3E;-webkit-transition:all .15s linear;transition:all .15s linear}
#navigation .menu.selected .txt:before{left:0;width:100%}
#navigation .depth2{pointer-events:none;opacity:0;transform:translateY(-100%);transition:all .2s ease-out;padding-top:.22rem;display:block}
#navigation .depth2 .menu{display:block;font-size:.245rem;line-height:.3rem;color:#8d8d8d;font-weight:500;padding:.04rem 0}
#navigation .depth2 .menu.selected{color:#5ebf3e}
#navigation .depth1.selected .depth2{pointer-events:auto;transform:translateY(0);opacity:1}

#navigation .util{position:absolute;left:0;width:100%;text-align:center;bottom:2.45rem;height:.52rem}
#navigation .util .link-btn{display:inline-block;margin:0 .13rem;width:.52rem;height:.52rem}

#navigation .banners{position:absolute;left:0;width:100%;text-align:center;bottom:.44rem;height:auto}
#navigation .banners .decoline{margin-bottom:.15rem}
#navigation .banners .btn-channel{pointer-events:auto;cursor:pointer;z-index:10;width:1.64rem;display:inline-block;height:1.5rem;margin:0 .088rem}
/*
#kakaotalkChannelButton{background-image:url(../img/channel_kakaotalk.png)}
#youtubeChannelButton{background-image:url(../img/channel_youtube.png)}
*/

#footer{position:fixed;bottom:0;width:100%;text-align:center;left:0;z-index:10}
.copyright{position:absolute;bottom:.075rem;left:50%;margin-left:-1.42rem;width:2.84rem;margin-bottom:constant(safe-area-inset-bottom, 0);margin-bottom:env(safe-area-inset-bottom, 0)}

#layers{pointer-events:none;opacity:0;position:fixed;left:0;top:0;width:100%;height:0;overflow:hidden;z-index:105;-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:absolute;top:0;width:100vw;max-width:100vh;left:50%;height:100%;background:rgba(0,0,0,.73);-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}
#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%;right:0;margin-bottom:.22rem;width:.44rem;height:auto}

#app.popup-view{overflow:hidden}
#app.popup-view #layers{height:100vh;overflow:auto;pointer-events:auto;opacity:1}
#app.popup-view #dim{pointer-events:auto;opacity:1}
#layers .layer.visible{display:block}
#videoPlay .player{display:block;width:5.3rem;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:5.3rem;width:auto;height:auto;display:inline-block;max-height:calc(100vh - 1rem)}

#layers #shareDialog{width:5.2rem;height:auto;border:.04rem solid #5ebf3e;background:url(../img/common_bg.jpg) repeat center}
.share-title{text-align:center;display:block;font-size:.325rem;font-weight:600;color:#241818;line-height:.39rem;padding:.28rem 0 .15rem}
.share-title strong{display:block;color:#5ebf3e;font-weight:inherit;font-size:inherit}
.share-body{padding:0 .2rem .2rem;position:relative}
.share-body .icons{font-size:0;line-height:0;position:absolute;border-radius:.43rem;height:.86rem;width:4.2rem;left:50%;margin-left:-2.1rem;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:.86rem;height:auto;margin:0 auto}
.share-body .icons .btn:active{-moz-transform:scale(.94);-webkit-transform:scale(.94);transform:scale(.94)}
#layers #shareDialog .bt-close{right:auto;top:auto;margin:0;left:100%;margin-left:-.2rem;bottom:100%;margin-bottom:-.2rem}
.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}


#mainScene .bg-visual.btm{background:url(../img/m_main_bg_btm.png) no-repeat center bottom;background-position:center bottom;background-size:100% auto}
#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:.36rem;letter-spacing:-.03em;line-height:.43rem;margin-top:-.18rem;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:4.2rem;margin-top:-.08rem}
.main-video-play{display:block;margin-top:-.11rem;text-align:center} 
.main-video-play .btn{display:inline-block;vertical-align:middle;width:1.34rem;padding:0 .22rem}
.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:.17rem;line-height:.2rem;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:.44rem;margin-bottom:.44rem;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)}


#mainScene .banners{position:absolute;left:0;width:100%;text-align:center;bottom:.3rem;margin-bottom:constant(safe-area-inset-bottom, 0);margin-bottom:env(safe-area-inset-bottom, 0);height:auto}
#mainScene .banners .btn-channel{pointer-events:auto;cursor:pointer;z-index:10;width:1.4rem;display:inline-block;height:auto;vertical-align:bottom;margin:0 .065rem}
.main-button{display:block;text-align:center;white-space:nowrap}
.main-button .market-btn{padding-top:.21rem;padding-bottom:.21rem}
.notice{position:absolute;left:.02rem;width:1.5rem;max-width:25%;bottom:.02rem}

#mainScene .banners{bottom:.4rem}
#mainScene .banners .btn-channel{vertical-align:top}
#mainScene #mejiroHouseParty{width:1.493rem}

/* button 2+ */
.main-button .market-btn{width:2.44rem;padding-top:.22rem;padding-bottom:.2rem;margin:0 .07rem}
.main-button .market-btn:before{left:-.1rem;top:-.06rem;bottom:-.13rem;right:-.09rem}
.main-button .market-btn.store:before{background-image:url(../img/main_bt_preregister.png)}
.main-button .market-btn span{font-size:.2rem;font-weight:700;padding-left:.36rem;line-height:.24rem}
.main-button .market-btn span:before{width:.24rem;height:.24rem;margin-top:-.12rem}
.main-button .market-btn.store span{padding-left:.6rem}
.main-button .market-btn.store span:after{height:.24rem;margin-top:-.125rem;left:.28rem}
/* //button 2+ */

.main-release-txt{display:block;margin:0 auto;width:3.2rem;padding-top:.32rem;padding-bottom:.21rem}

.download-btn{display:inline-block;position:relative;vertical-align:middle}
.download-btn:active{-moz-transform:scale(.97);-webkit-transform:scale(.97);transform:scale(.97)}
.download-btn + .download-btn{margin-left:.07rem}
.download-btn.ios{width:calc(2.28rem * 0.82)}
.download-btn.google{width:calc(2.39rem * 0.82)}
.download-btn.windows{width:calc(2.35rem * 0.82)}
.download-btn img{width:100%;height:auto;display:block}

#preregisterScene{height:auto;min-height:100vh}
#preregisterScene:before{content:"";display:block;position:absolute;left:0;width:100%;top:0;height:100%;background:url(../img/m_preregister_bg_top.png) no-repeat center top;background-size:100% auto}
#preregisterScene .page-title{padding-bottom:.3rem}
#preregisterScene .contents{padding-top:1.6rem;padding-bottom:1.45rem}
#preregisterScene .inner-contents{position:relative;width:5.3rem;margin:0 auto}
#preregisterScene .inner-contents:after{content:"";display:block;height:0;clear:both}

.eventbox{display:block;position:relative;width:2.56rem;height:2.32rem}
.eventbox:before{content:"";display:block;position:absolute;left:-.11rem;top:-.06rem;right:-.12rem;bottom:-.14rem;background-repeat:no-repeat;background-size:100% auto;background-position:center top;pointer-events:none}

.eventbox.attainment{width:100%;height:4.54rem;margin-bottom:.12rem}
.eventbox.attainment:before{background-image:url(../img/m_preregister_box_top.png)}
.eventbox.kakao{float:left}
.eventbox.kakao:before{background-image:url(../img/m_preregister_box_bl.png)}
.eventbox.talk-channel{float:right}
.eventbox.talk-channel:before{background-image:url(../img/m_preregister_box_br.png)}

.box-header{display:block;margin:0 auto;text-align:center;position:relative;color:#fff;font-size:.175rem;line-height:.19rem;letter-spacing:-.04em;font-weight:500;text-shadow:0 .01rem .03rem rgba(21,77,74,.53);padding:.12rem 0 .09rem}
.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;width:.21rem;height:.21rem;margin-top:-.105rem}
.box-header:before{left:0;background-image:url(../img/tit_ic_horseshoe_l.png)}
.box-header:after{right:0;background-image:url(../img/tit_ic_horseshoe_r.png)}

.kakao .box-header{width:2.02rem}
.talk-channel .box-header{width:1.62rem}
.attainment .box-header{width:2.34rem;position:relative;padding:0;top:.12rem}
.attainment .box-header:before{left:0;width:100%;margin:0;height:.38rem;top:0;border-radius:.19rem;mix-blend-mode:multiply;background:#1999b5;box-shadow:inset 0 .01rem .01rem rgba(0,0,0,.35)}
.attainment .box-header:after{display:none;}
.attainment .box-header > span{position:relative;display:block;margin:0 auto;font-size:.21rem;border-radius:.19rem;line-height:.25rem;padding:.07rem 0 .06rem;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:.18rem;height:.18rem;margin-top:-.09rem}
.attainment .box-header > span:before{left:.08rem;background-image:url(../img/tit_ic_star_l.png)}
.attainment .box-header > span:after{right:.08rem;background-image:url(../img/tit_ic_star_r.png)}

.evt-items{display:block;position:relative;z-index:1;text-align:center;padding-top:.08rem}
.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:.15rem;line-height:.19rem;font-weight:500;color:#4d4d4d;padding:.05rem 0 .04rem;letter-spacing:-.02em;white-space:nowrap}
#preregisterScene .kakao .evt-items li img{width:.75rem}
#preregisterScene .talk-channel .evt-items img{width:.75rem}

.attainment .evt-items{margin-top:.24rem;padding-top:.32rem}
.attainment .evt-items li{position:relative;margin:.09rem .02rem 0;width:1.2rem;height:1.2rem;box-sizing:border-box;font-size:0;line-height:0}
.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:.54rem;height:.54rem;left:50%;margin-left:-.27rem;top:-.12rem;background:url(../img/preregister_evt_clearmark.png) no-repeat center top;background-size:contain;z-index:1}
.attainment .box-footer{padding-top:.25rem}
.attainment .box-footer .tbox{font-weight:600;letter-spacing:-.03em;font-size:.205rem;line-height:.25rem;color:#fff;text-shadow:0 .01rem .03rem rgba(21,77,74,.53);width:3.85rem;padding:.1rem 0;border-radius:.23rem;background:#1d738f;margin:0 auto;display:block}

.box-footer{display:block;text-align:center;position:relative;z-index:1}
.box-footer .market-btn.kakao{width:2.1rem;height:.21rem;padding-top:.14rem;padding-bottom:.13rem}
.box-footer .market-btn.talkch{width:1.98rem;height:.21rem;padding-top:.14rem;padding-bottom:.13rem;border-radius:.24rem}

.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:.05rem .03rem 0;width:.96rem;height:.96rem}
.attainment .evt-items.page2 li.clear:before{width:.44rem;height:.44rem;margin-left:-.22rem;top:-.1rem}
.attainment .evt-items.page2 + .box-footer{padding-top:.07rem}


#introductionScene{scroll-snap-align:none;background:#fff url(../img/m_introduction_bg.jpg) no-repeat center top;background-size:contain;height:auto}
#introductionScene .contents{padding-bottom:.72rem}

.introduction-title{display:block;padding-top:.36rem}
.introduction-title .page-name{display:block;font-family:'Lemon Milk';font-weight:300;color:#5EBF3E;font-size:.13rem;line-height:.17rem;letter-spacing:.06em;padding-bottom:.04rem}
.introduction-title .title{display:block;color:#1A1A1A;font-weight:700;font-size:.44rem;line-height:.55rem;padding:.03rem 0 0}

#introductionScene .box-title{display:inline-block;color:#4D4D4D;font-weight:700;font-size:.25rem;line-height:.38rem;position:relative;border-radius:.225rem;border:.03rem solid #5EBF3E;padding:.01rem .2rem 0 .41rem;margin-top:.41rem}
#introductionScene .box-title:before{content:"";display:block;position:absolute;left:.16rem;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:.2rem;font-weight:400;line-height:.32rem;padding-top:.15rem;letter-spacing:-.01em;padding-bottom:0}


#characterScene{scroll-snap-align:none;height:auto}
#characterScene:after{position:absolute;content:"";display:block;top:-2rem;left:50%;margin-left:-2.6rem;width:5.2rem;height:5.2rem;
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{position:relative;z-index:1;padding-top:1.64rem;padding-bottom:1.36rem}
#characterScene .page-title{padding-bottom:.32rem}
.profile-list{position:relative;width:calc(5.8rem + 2px);margin:0 auto;text-align:left;vertical-align:top;padding:0 0 1rem}
.profile-list li{width:1.82rem;padding:0 0 .18rem .11rem;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:active{-moz-transform:scale(.96);-webkit-transform:scale(.96);transform:scale(.96)}


#app.detail-view #biButton{opacity:0;pointer-events:none}
#app.detail-view #header{z-index:99}
#app.detail-view.nav-open #navWrapper{z-index:100}
#app.detail-view.nav-open #navCloseButton{z-index:101}
.pop-page{pointer-events:none;opacity:0;position:absolute;top:-100vh;width:100%;max-width:100vh;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);height:100vh;overflow:hidden;z-index:90;-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;z-index:10;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}


#header .btn-back{display:none;position:absolute;left:0;top:0;padding:.4rem;z-index:100}
#app.detail-view .btn-back{display:block}
.btn-back span{display:inline-block;font-weight:500;font-size:.28rem;line-height:.28rem;color:#fff;position:relative;padding:0;padding-left:.35rem}
.btn-back span:before{content:"";display:block;position:absolute;left:0;width:.25rem;height:.25rem;top:50%;margin-top:-.125rem;background:url(../img/m_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{padding-bottom:0}
#characterDetailView .contents{pointer-events:none;max-width:100vh;padding-bottom:1rem;width:100%;position:relative;margin:0 auto;display:block;height:auto;background:url(../img/characterview_bg_btm.png) no-repeat center bottom;background-size:100% auto;min-height:calc(100% - 1rem)}
.character-visual{display:block;padding:0 .4rem;overflow:visible;overflow-x:hidden;position:relative;height:10.8rem}
#characterDetailView.visible .contents{pointer-events:auto}

.character-viewer{pointer-events:none;width:7.52rem;max-width:108%;left:50%;height:9.52rem;position:absolute;top:0;transform:translate3d(-50%, 0, 0);background:url(../img/m_characterview_bg.jpg) no-repeat left top;background-size:contain}
.character-viewer .swiper-slide img{display:block;position:absolute;bottom:.5rem;left:50%;transform:translate3d(-50%, 10%, 0);max-width:none;width:80%;height:auto;opacity:0;transition:transform .4s, opacity .2s .05s}
.character-viewer .swiper-slide.swiper-slide-active img{transform:translate3d(-50%, 0, 0);opacity:1}

.select-costume{z-index:10;position:absolute;left:0;width:100%;text-align:center;bottom:.12rem;height:auto;text-align:center}
.select-costume li{vertical-align:top;position:relative;display:inline-block;margin:0 .17rem;padding:0}
.select-costume .btn{cursor:pointer;text-align:center;display:block;box-sizing:border-box;width:1.04rem;height:1.04rem;position:relative;border-radius:100%}
.select-costume .btn img{display:block;position:absolute;left:50%;margin-left:-.52rem;width:1.04rem;top:50%;margin-top:-.22rem;height:auto}
.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.2)}


.character-info{display:block;max-width:6.4rem;margin:0 auto;height:auto;overflow:visible;position:relative;padding-bottom:2.3rem}
.character-info .thumbnails{position:absolute;display:block;width:4.72rem;left:50%;margin-left:-2.36rem;bottom:.64rem;pointer-events:auto}
.character-info .thumbnails .swiper-slide{box-sizing:border-box;padding:.15rem .11rem}
.character-info .thumbnails .btn{cursor:pointer;display:block;overflow:hidden;border:.04rem solid #fff;border-radius:.18rem;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:.22rem;height:.08rem;background:url(../img/arr_select.png) no-repeat center top;background-size:contain;top:0;left:50%;margin-left:-.11rem}
.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:.32rem;height:.32rem;position:absolute;top:.7rem;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 .details{display:block;text-align:center}
.character-info .details .swiper-slide{box-sizing:border-box}
.character-info p{word-wrap:break-word;word-break:keep-all}

.character-header{position:relative;display:block;padding:.4rem 0 .55rem}
.character-header p{display:block}
.character-header .eng-name{font-size:.31rem;font-weight:400;letter-spacing:.05em;line-height:.46rem;padding-bottom:.05rem}
.character-header .name{color:#191919;font-size:.84rem;font-weight:700;line-height:1rem;padding:.1rem 0}
.character-header .cv{display:inline-block;color:#191919;font-size:.31rem;font-weight:700;line-height:.4rem;position:relative;padding-left:.4rem;vertical-align:top}
.character-header .cv:before{content:"";display:block;width:.22rem;height:.22rem;position:absolute;left:0;top:50%;margin-top:-.115rem;background:url(../img/characterview_star.png) no-repeat center;background-size:contain}

.character-header .cv button{width:.36rem;height:.36rem;display:inline-block;vertical-align:top;position:relative;margin-left:.16rem;margin-top:.01rem}
.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 1rem;text-align:center;max-width:calc(100vw - .8rem);margin:0 auto}
#downloadButtons .btn{overflow:hidden;position:relative;margin:0 auto;display:block;width:5.14rem;height:.83rem;border-radius:.14rem;background:#69c10c;max-width:100%}
#downloadButtons .btn + .btn{margin-top:.25rem}
#downloadButtons .btn span{color:#fff;font-size:.34rem;line-height:.48rem;font-weight:700;display:inline-block;padding-top:.18rem}
#downloadButtons .btn:active{-moz-transform:scale(.98);-webkit-transform:scale(.98);transform:scale(.98)}


.character-profile{display:block;position:relative;max-width:calc(100vw - .8rem);margin:0 auto}
.character-profile:before,
.character-profile:after{content:"";display:block;position:absolute;left:0;width:100%;height:.03rem;background:#bfbfbf}
.character-profile:before{top:0}
.character-profile:after{top:100%}
.character-profile > p:first-child{padding-top:.55rem}
.character-profile > p:last-child{padding-bottom:.55rem}
.character-profile > p{display:flex;text-align:left;font-size:.28rem;line-height:.44rem;color:#723710}
.character-profile > p > span{display:inline-block}
.character-profile > p > .status{width:1.64rem;display:flex;flex:none}
.character-profile > p > .status em{display:inline-block;padding-right:.16rem;vertical-align:top;flex:none;width:auto}
.character-profile > p > .val{padding-left:.12rem}
.character-profile > p > .status:after{content:"";display:inline-block;flex:1;height:.44rem;background:url(../img/characterview_dotline.png) repeat-x left center;background-size:auto .04rem}


.character-body{display:block;padding:.55rem 0;height:auto}
.words{display:block;text-align:center;color:#4d4d4d;padding-bottom:.45rem}
.words span{position:relative;display:inline-block;padding:0;font-size:.35rem;line-height:.47rem;font-weight:400;color:inherit;letter-spacing:-.03em}
/*
.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:.22rem;color:#4d4d4d;font-weight:400;line-height:.34rem;padding:0;display:block;margin:0;letter-spacing:-.03em}
.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;padding-bottom:.6rem}
.character-footer .btn{overflow:hidden;position:relative;display:block;width:5.14rem;height:.84rem;border-radius:.42rem;background-repeat:no-repeat;background-size:cover;background-position:center;margin:0 auto}
.character-footer .btn:before{content:"";display:block;width:.34rem;height:.34rem;top:50%;margin-top:-.175rem;position:absolute;background:url(../img/bt_ic_play.png) no-repeat center;background-size:100% auto;right:.22rem}
.character-footer .btn span{color:#fff;font-size:.34rem;line-height:.44rem;font-weight:700;text-shadow:0 .02rem .02rem rgba(100,99,118,.72);display:inline-block;padding-top:.2rem}
.character-footer .btn:active{-moz-transform:scale(.94);-webkit-transform:scale(.94);transform:scale(.94)}


#galleryScene{scroll-snap-align:none;overflow:auto;height:auto}
#galleryScene .contents{padding-top:1.64rem;padding-bottom:2.8rem}
#galleryScene .visual:before,
#galleryScene .visual:after{content:"";display:block;position:absolute;background-repeat:no-repeat;background-size:100% auto}
#galleryScene .visual:before{right:0;top:0;width:4.1rem;height:3rem;background-image:url(../img/m_gallery_bg_top.png);}
#galleryScene .visual:after{left:0;bottom:0;width:4.2rem;height:3.3rem;background-image:url(../img/m_gallery_bg_btm.png);}
#gallerScene .page-title{padding-top:1.5rem}
.gallery-list{padding-top:.22rem;display:block;margin:0 auto;width:5.3rem;position:relative}
.gallery-list li{display:block;padding:.15rem 0 .14rem;height:auto}
.gallery-list .view{cursor:pointer;display:block;width:100%;height:auto;border-radius:.2rem;overflow:hidden;position:relative}
.gallery-list .view.blank{cursor:default;opacity:0;pointer-events:none}
.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: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:.88rem;height:.88rem;left:50%;top:50%;margin-left:-.44rem;margin-top:-.44rem;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: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)}


#twinklewebScene{scroll-snap-align:none;min-height:100vh;height:auto;overflow-y:visible}
#twinklewebScene .page-title{padding-top:1rem;padding-bottom:.2rem}
#twinklewebScene .inner-contents{pointer-events:auto}
.magazine-viewer{display:block;margin:0 auto;width:5.4rem;height:3.15rem;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}


.magazine-viewer .swiper-container{position:absolute;left:.15rem;top:.12rem;width:5.06rem;z-index:1}
.magazine-viewer .swiper-slide span{border:.01rem solid #9e947b}

.magazine-list{position:relative;padding:.24rem 0 .36rem;width:4.74rem;margin:0 auto;display:block}
.magazine-list .swiper-slide{cursor:pointer;box-sizing:border-box;padding:0 .05rem}
.magazine-list .swiper-slide.selected{pointer-events:none}
.magazine-list .arr{cursor:pointer;width:.26rem;height:.26rem;position:absolute;top:50%;margin-top:-.13rem}
.magazine-list .arr.swiper-button-disabled{pointer-events:none;opacity:.3}
.magazine-list .arr.prev{right:100%;margin-right:.07rem}
.magazine-list .arr.next{left:100%;margin-left:.07rem}


.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:.03rem solid #585a40}
.magazine-list .swiper-slide span:after{background:url(../img/bt_zoom.png) no-repeat center;background-size:.32rem 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}
.magazine-list .swiper-slide.selected span:before{background:url(../img/twinkleweb_dim.png) repeat center;width:100%;height:100%;z-index:1}

.policy-buttons{display:block;padding-bottom:1rem}
.policy-buttons > .btn{display:block;margin:0 auto .14rem;width:2.87rem;height:.32rem;text-align:center;padding:.17rem 0;background:url(../img/bt_create_guide.png) no-repeat center;background-size:100% auto}
.policy-buttons > .btn > span{position:relative;display:inline-block;font-size:.29rem;line-height:.32rem;color:#fff;text-shadow:0 .01rem .03rem rgba(21,77,74,.53);font-weight:700}


@media (prefers-color-scheme: dark) {
	#app{background-color:#fff}
	.bg{background-color:#fff}
	.scene{background-color:#fff}
  .page-title .page-name{color:#5ebf3e}
	.page-title .title{color:#241818}
  .page-title .description{color:#4d4d4d}
	.market-btn.kakao span{color:#241818}
	.market-btn.talkch{background:#484b56}
	.market-btn.store span{color:#241818}
	#navigation .decoline:before,
	#navigation .decoline:after{background:#BDDFB2}
	#navigation .links .menu .txt{color:#4D4D4D}
	#navigation .menu .txt:before{background:#5EBF3E}
	#navigation .depth2 .menu{color:#8d8d8d}
	#navigation .depth2 .menu.selected{color:#5ebf3e}
	#videoPlay .player{background:#000}
	
	#layers #shareDialog{border-color:#5ebf3e}
	.share-title{color:#241818}
	.share-title strong{color:#5ebf3e}

	.main-video-play .txt{color:rgba(255,255,255,.68);text-shadow:0 0 .05rem rgba(178,231,255,.8)}
	#mainScene .coming-soon{color:#fff;text-shadow:0 0 .09rem rgba(178,231,255,.9)}
	
	.box-header{color:#fff;text-shadow:0 .01rem .03rem rgba(21,77,74,.53)}
	.attainment .box-header:before{background:#1999b5;box-shadow:inset 0 .01rem .01rem rgba(0,0,0,.35)}
	.attainment .box-header > span{box-shadow:0 .01rem .01rem rgba(255,255,255,.61)}
	.evt-items .name{color:#4d4d4d}
	.attainment .box-footer .tbox{color:#fff;text-shadow:0 .01rem .03rem rgba(21,77,74,.53);background:#1d738f}

	#introductionScene{background-color:#fff}	
	.introduction-title .page-name{color:#5EBF3E}
	.introduction-title .title{color:#1A1A1A}
	#introductionScene .box-title{color:#4D4D4D;border-color:#5EBF3E}
	#introductionScene .description{color:#4D4D4D}

	#characterScene:after{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%)}

	.pop-page{background:#fff}
	.btn-back span{color:#fff}
		
	.select-costume .btn{color:#4d4d4d;border-color:#4d4d4d}
	.select-costume .btn.sel{color:#fff}
		
	.character-info .thumbnails .btn{border-color:#fff}
	.character-info .thumbnails .selected .btn{border-color:#4d4d4d}
	.character-header:before{background:#bfbfbf}
	.character-header .name{color:#191919}
	.character-header .cv{color:#191919}

	
	.words{color:#4d4d4d}
	.character-body .description{color:#4d4d4d}
	.character-footer .btn span{color:#fff;text-shadow:0 .02rem .02rem rgba(100,99,118,.72)}

	.magazine-viewer .swiper-slide span{border-color:#9e947b}
	.magazine-list .swiper-slide span:before{border-color:#585a40}

	.btn-create-guide > span{color:#fff}

}