@charset "utf-8";

/*reset*/
html, body { padding:0; margin:0; }
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,video,object,input,textarea,p,tbody,tfoot,thead,th,td,colgroup,caption,article,section,aside,footer,header,div { margin:0; padding:0; font-style:normal;}
table { border-spacing:0; border-collapse:collapse; }
select,input,label,button { display:inline-block; vertical-align:middle; margin:0; letter-spacing:-0.08em; }
h1,h2,h3,h4,h5,h6 { font-size:1em; }
ol,ul ,li { list-style:none; }
img, fieldset{border:0 none;}
img{ margin:0; padding:0; display:inline-block; vertical-align:middle; zoom:1; *display:inline;
    image-rendering: -webkit-optimize-contrast;/* chrome 이미지 해상도 개선*/
    transform: translateZ(0);/* chrome 이미지 해상도 개선*/
    backface-visibility: hidden;/* chrome 이미지 해상도 개선*/
}
a{ outline:none; display:inline-block; vertical-align:middle; zoom:1; *display:inline; cursor:pointer; margin:0; }
* { -webkit-text-size-adjust:none; }

/*layout*/
html, body{ height:100%; padding:0; margin:0; color:#575757; }
body{ display:none; width:100%; position:relative; line-height:1.6em; letter-spacing:-0.04em; -webkit-font-smoothing: antialiased; text-decoration: inherit;
    font-family: 'Noto Sans JP', sans-serif; font-size:14px; background:#fff}
section, header, footer{ position:relative; width:100%; height:auto; }

.clearfix {clear: both}
.clearfix:after,.clearfix:before {content: " ";display: table}
.clearfix:after {clear: both}

.pull-right {float: right}
.pull-left {float: left}
.mb-show{display:none;}
.accessibility{ position:absolute; left:-9999px; height:0; font-size:0; line-height:0; }
.sections{ position:relative; width:100%; }
/* .sections .wrap{ width:1024px; margin:0 auto; position:relative; top:0; } */
.sections .wrap{ margin:0 auto; position:relative; top:0; }

body{ background:#ffeac8; }
#mobile{ background:#fff; display:none; overflow:hidden; }
#pc{ background:#fff; display:none; overflow:hidden; }
#wrapper{ position:relative; width:100%; height:auto; overflow:hidden }

#header{ position:fixed; width:100%; height:68px; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bg_header.png); z-index:50; top:0; }
#header .wrap{ width:1068px; margin:0 auto; position:relative; height:68px; }
#header h1{ float:left; height:68px; width:17.4%; overflow:hidden; position:relative; }
#header h1 span{ display:block; width:100%; height:68px; overflow:hidden; position:relative; }
#header h1 span img{ position:absolute; left:50%; margin-left:-52px; top:9px; }
#header .nav{ float:left; width:68.6%; height:68px; }
#header .nav li{ float:left; width:20%; height:68px; }
#header .nav li a{ display:block; width:100%; height:68px; overflow:hidden; position:relative; }
#header .nav li a span{ position:absolute; left:50%; margin-left:-85px; top:0; }
#header .nav li a img{ display:block; }
#header .nav li.on, #header .nav li:hover{ background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bg_nav.gif) no-repeat left top;}
#header .nav li.on a, #header .nav li:hover a{ background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bg_nav_r.gif) no-repeat right top;}
#header .nav li.on img, #header .nav li:hover img{margin-top:-68px}
#header .btn_share{ float:right; width:14%; display:block; height:68px; position:relative; }
#btn_shares{ display:none; position:absolute; width:198px; height:112px; bottom:-112px; background:#fff; z-index:1; left:86%; }

#topbar{ width:100%; background:#ff5864; position:relative; height:86px; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bg_topbar.png) repeat-x top}
#topbar .wrap{ width:800px; position:absolute; left:50%; margin-left:-479px; top:0; height:86px; background:url(/static/resources_ja/web/topbar.png) no-repeat left top; display:block }
#topbar.jp .wrap{ width:910px; position:absolute; left:50%; margin-left:-479px; top:0; height:86px; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/topbar.png) no-repeat left top; display:block }
#topbar .wrap .btn{ display:block; width:100%; top:0; bottom:0; left:0; right:0; height:100%; }
#topbar .wrap .btn img{ float:right; display:block; padding:21px 0; }
#topbar .wrap .tail{ position:absolute; width:26px; height:23px; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bu_topbar_up.png) no-repeat top; top:-23px; left:1098px; }
#topbar .wrap .tail.down{ background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bu_topbar_down.png) no-repeat top; top:0; }

#topbar .btn_google{position:absolute;right:175px;top:0;height:51px;padding:17px 0}
#topbar .btn_apple{position:absolute;right:0;top:0;height:51px;padding:17px 0}

/* ja */
#topbar.ja .wrap{ width:800px; position:absolute; left:50%; margin-left:-479px; top:0; height:86px; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/pre-topbar.png) no-repeat -77px top; display:block }
#topbar.ja .btn_google{position:absolute;right:150px;top:6px;height:51px;padding:17px 0}
#topbar.ja .btn_apple{position:absolute;right:0;top:6px;height:51px;padding:17px 0}


#sidenav{ position:fixed; right:12px; z-index:50; width:105px; top:50%; margin-top:-158px; }
#sidenav a{ display:block; width:100%; text-align:center; }
#sidenav ul{ padding:15px 0 10px; width:20px; margin:0 auto; }
#sidenav ul li{ display:block; padding:10px 0; }
#sidenav ul li a{ display:block; width:100%; height:20px; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/sidenav_btn.png) no-repeat center top; } 

#sidenav ul li a:hover, #sidenav ul li.on a{ background-position:center bottom; }
#sidenav .btn_forum{margin-bottom:12px;}
#sidenav .btn_mov{margin-bottom:12px;}
#sidenav .btn_support{margin-bottom:12px;}
#sidenav .btn_twitter{margin-bottom:12px;}
#sidenav .btn_forum{margin-top: 34px; margin-bottom:12px; position:relative;}
#sidenav .btn_forum .icon_new{ position: absolute; top: -22px; padding: 0 4px; width:66px; left: 14px; height: 24px; border-radius: 4px; background: #ab0401; text-align: center; color: #fff; font-size: 12px; font-weight: 600; }
#btn_mforum{position:absolute; width:8%; right:2.5%; bottom:450%;}
#btn_mmov{position:absolute; width:8%; right:2.5%; bottom:350%;}
#btn_msupport{position:absolute; width:8%; right:2.5%; bottom:250%;}
#btn_mtop{position:absolute; width:8%; right:2.5%; bottom:150%;}
.btn_mtop img{ display:block; width:100%; height:auto; }
.btn_mtop .icon_new { position: absolute; top: -15px; padding: 0 4px; left: -18px; line-height: 16px; border-radius: 4px; background: #ab0401; text-align: center; color: #fff; font-size: 0.6rem; font-weight: 600; width: 150%; }



#main{ position:fixed; top:0; }
#video-bg{ position:absolute; right:0; bottom:0; width:auto; min-width:100%; height:auto; min-height:100%; z-index:0; background:#000 url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bg_main.jpg) no-repeat center top; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bg_main.jpg',sizingMethod='scale'); 
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bg_main.jpg', sizingMethod='scale'); }
#video-obj{ position:absolute; background:#000 }
#main .dotbg{ position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bg_dot.png); z-index:0 }
#main .wrap{ height:100%; z-index:1 }

/* JP PRE-REGISTER */
#wrapper.ja{padding-top:0 !important; }
#main.ja .wrap_box{ position: relative; width:100%; height:auto; padding-top: 68px; padding-bottom: 30px; top:inherit;
/*    background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/pre-bg.jpg) no-repeat;
    background-size: 100% 100%;*/
}
#main.ja{
    position: relative;
    top: inherit;
    height: auto !important;
    background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/pre-bg.jpg) no-repeat;
    background-size: 100% 100%;
    z-index:0;
}
/* PRE - MAIN 배경 */
#main.ja .bg-right{
    position:absolute;
    z-index:-1;
    display: inline-block;
    right: -5vw;  bottom:0; height:100%;
    width: auto;
}
#main.ja .bg-bottom{
    position:absolute;
    z-index:0;
    display: inline-block;
    left:0;  bottom:0; width:80%;
    height: auto;
}
#main.ja .bg-right .bg-right-cat{position:absolute;right:0;bottom:0;height: 85%;}
#main.ja .bg-right .bg-right-triangle{position:absolute;right:0;bottom:0;height: 80%;}

.ja .bg-bottom .bg-bottom-right{display: none;}
#main.ja .bg-bottom .bg-bottom-triangle{position:absolute; left:50%; margin-left: -15vw; bottom:0;width: 45vw;}
#main.ja .bg-bottom .bg-bottom-sky{position:absolute;left:0;bottom:0;width: 75vw;}
#main.ja .bg-bottom .pinkbean{position:absolute;left:0;bottom:0;width: 22vw;}

/* PRE - TOP */
.ja .pre-top {position:relative; width:/*89.30%*/80%; margin:0 auto;text-align:center;}
.ja .pre-top img {width: 100%;}
.ja .tit-pre {
    position: absolute;
    height: 28%;
    width: 100%;
    left: 0;
    top: 33%;
    background: url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/bg-pre-title.png) center top no-repeat;
    background-size: 50% 100%;
    color: #fffca2;
    z-index: 1;
    vertical-align: top;
    line-height: 4.5vw;
    font-size: 2.5vw;
    letter-spacing: -0.1vw;
    text-align: center;
}
#main.ja .pre-desc{margin-top:1.5rem;letter-spacing: -1px;font-size: 2.25vw; color: #fff; font-weight: bold; }
#main.ja .pre-date{margin-top:1.5rem;letter-spacing: -1px;font-family: 'M PLUS 1p', sans-serif;font-size: 22px; color: #bb99d2;}

/* PRE - Gauge */
.ja .gauge{position:relative; width: 60%; margin: 5rem auto 0.25rem;}
.ja .now-score {display: inline-block; position: absolute;top: -3rem;margin-left: 0;font-weight:bold; font-size: 1.35vw;text-align: right; color: #9A6BFF; font-family: 'M PLUS 1p', sans-serif; }


.ja .gauge:before{content: ''; position:absolute;
    display: inline-block;
    left:0 ;top:0; width:100%; height: 3px;
    background: rgba(81, 79, 255, 0.5);
}
.ja .bar.step:after{
    content: '' ;
    position:absolute;
    display: inline-block;
    right: -0.5rem;
    top: -1.5rem;
    width:100%;
    height: 1.1875rem;
    background: url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/current.png) right top no-repeat;
    background-size: 1rem auto;
    animation: aniSpin 3s 0s infinite both;-webkit-animation: aniSpin 3s 0s infinite both
}

@keyframes aniSpin {
    0%{
        transform: translateY(0);
        opacity:1;
    }

    50%{
        transform: translateY(-5px);
        opacity:1;
    }

    65%{
        transform: translateY(-5px);
        opacity:1;
    }
    90%{
        transform: translateY(0);
        opacity:1;
    }
}


.ja .bar.step{position:absolute; display:inline-block;
    height:3px; left:-5px ;top:0; width: calc(100% + 10px) ;background-image:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/gauge_bar.gif);
}

/* PRE - gauge - dots */
.ja .dots{position:absolute; width:100%; top: -8px; left:0; clear:both;}
.ja .dot-list{float:left; width:23.5%; margin-left:2%; text-align:left; vertical-align:middle; font-family: 'M PLUS 1p', sans-serif; font-weight: 700; color:#fefefe;}
.ja .dot-list:first-child{margin-left:0;}
.ja .dot-list:last-child{margin-left:0;width:0;}
.ja .dot{display: inline-block; margin-bottom:2px;width:10px; height: 10px; margin-left:-5px;  border-radius: 50%; background:#fff;}
.ja .dot-list:last-child {text-align:right;}
.ja .dot-list .percentage{margin-left: -5px; font-size: 1rem;}
.ja .dot-list:last-child .percentage{margin-left: -3rem;}

/* PRE - items */
.ja .items{ clear: both; width: 60%; margin:9rem auto 0;}
.ja .items .step{float:left;width:18.4%; margin-left: 2%; text-align:center; color:#fff; padding-top:0.75rem; }
.ja .items .step:first-child{margin-left: 0;}
.ja .items dt {padding-top:0.75rem; padding-bottom:0.75rem; text-align:center; /*font-size: 1.125rem; */font-size: 1vw; font-weight: normal; letter-spacing: 0;color:#fff;
background:rgba(13,16,27,0.65); border-bottom: 8px solid rgba(13,16,27,0.65); }


.ja .items .step:nth-of-type(5) dt{background:rgba(157,3,0,0.65);border-bottom: 8px solid rgba(13,16,27,0.45);}

.ja .items dd {position:relative; width:100% ;height: 7vw; margin-top:0.5rem; background:rgba(255,255,255,0.15);}
.ja .items dd .item-img{position:absolute; top: 50%; left: 50%; width: 40%;
    transform: translate(-50%, -50%);
}
.items dd .back-light{position:absolute; top: 50%; left: 50%;transform: translate(-44%, -37%); width: 100%; }

.ja .items > .step{position:relative;}
.ja .items > .step.complete:after{
    content: '';
    text-align: center;
    line-height: 13vw;
    font-size: 1.5vw;
    color: #fff;
    position: absolute;
    left: -18px;
    top: 43%;
    background: url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/complete.png) left top no-repeat;
    background-size: 45% auto;
    width: 100%;
    height: 100%;
}

.ja .items .step:nth-of-type(2) dd .item-img{width:35%;}
.ja .items .step:nth-of-type(4) dd .item-img{width:35%;}
.ja .items .step:nth-of-type(5) dd .item-img{width:55%; transform: translate(-50%, -52%);}

.ja .items .step:nth-of-type(2) dd .back-light{position:absolute; top: 50%; left: 50%;transform: translate(-44%, -37%); width: 100%; }
.ja .items .step:nth-of-type(4) dd .back-light{position:absolute; top: 50%; left: 50%;transform: translate(-44%, -37%); width: 100%; }
.ja .items .step:nth-of-type(5) dd .back-light{position:absolute; top: 50%; left: 50%;transform: translate(-65%, -87%); width: 81%; }
.ja .items .step em{display: block;font-style:normal;text-align:center; width:100%;margin-bottom:0.5rem;}
.ja .blit{box-sizing: border-box; display: inline-block; margin-right: 0.5rem; vertical-align:middle; text-align:center;
    width:2.5vw; height: 1.5vw;line-height: 1.5vw;  font-family: 'M PLUS 1p', sans-serif;
    letter-spacing: 0; font-size:0.9vw; font-weight: 300; color:#ffd5d5;}
.ja .blit.red{ background:#ab0401;}
.ja .blit.blue{ background:#414ef2;}
.ja .items .step:nth-of-type(5) em .blit.blue{ background:#ab0401;}
.ja .num{ display: inline-block;vertical-align:middle;font-size:1.35vw;text-align:center; font-family: 'M PLUS 1p', sans-serif;}
.ja .num + span{display:inline-block; vertical-align:middle;font-size:1.2vw; font-family: 'M PLUS 1p', sans-serif; }


/* PRE - twitter */
#main.ja .twitter-area{
    position:relative;
    clear:both;
    display:block;
    width:100%;
    text-align:center;
    padding-bottom: 30px;
    margin-bottom: 2vw;
    padding-top: 4vw;
}
#main.ja .twitter-area .twitter-desc{margin-top:3rem; margin-bottom:2rem;font-size: 2.25vw; letter-spacing:-1px;color:#fff; text-align: center;font-style: normal;}
#main.ja .twitter-area .twitter-cont{
    position:relative;
    display: inline-block;
    width:50%;
    height:14vw;
    margin:0 auto;
    font-style: normal;
}
.ja .twitter-area .twitter-wrap{position:relative;width:50%;text-align:left;padding-top:40px;}
#main.ja .twitter-area .blit-chr{position:relative;width:50%;height:100%;}
#main.ja .blit-chr .beam{
    position:absolute;
    height:100%;
    bottom:0;
    left: 50%;
    transform: translate(-50%, 0%);
}

#main.ja .blit-chr .beam2{
    position:absolute;
    height:100%;
    bottom:0;
    left: 50%;
    transform: translate(-50%, 0%);
}

#main.ja .blit-chr .chr{
    position:absolute;
    height:100%;
    bottom:0;
    left: 50%;
    transform: translate(-50%, 0%);

}
#main.ja .blit-chr .tag-prod{
    position:absolute;
    height:100%;
    left: 50%;
    top: 50%;
    transform: translate(-43%, -61%);
}

/***************************/

.flex-twitter {
    justify-content: flex-start;
    align-items: flex-start;
    background: none;
    width: 97px;
    height: .18em;
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    position: absolute;
    z-index: 9999;
    left: 0;
    top: 0;
 }
/*!* 弹跳 *!*/
.wrap .wrap_box .item:hover .a-bounce{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}
.wrap .wrap_box .item:hover .a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce;}
/*!* 弹跳 *!*/
@-webkit-keyframes bounce{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
    40%{-webkit-transform:translateY(-30px);}
    60%{-webkit-transform:translateY(-15px);}
}
@-moz-keyframes bounce{
    0%,20%,50%,80%,100%{-moz-transform:translateY(0);}
    40%{-moz-transform:translateY(-30px);}
    60%{-moz-transform:translateY(-15px);}
}
@-ms-keyframes bounce{
    0%,20%,50%,80%,100%{-ms-transform:translateY(0);}
    40%{-ms-transform:translateY(-30px);}
    60%{-ms-transform:translateY(-15px);}
}
@keyframes bounce{
    0%,20%,50%,80%,100%{transform:translateY(0);}
    40%{transform:translateY(-30px);}
    60%{transform:translateY(-15px);}
}
/*!* 淡入-从左 *!*/
.a-fadeinL { -webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards; }
.a-fadeinL { -webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL; }
@-webkit-keyframes fadeinL{
    0%{opacity:0;-webkit-transform:translateX(-100px);}
    100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinL{
    0%{opacity:0;-moz-transform:translateX(-100px);}
    100%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinL{
    0%{opacity:0;-ms-transform:translateX(-100px);}
    100%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinL{
    0%{opacity:0;transform:translateX(-100px);}
    100%{opacity:1;transform:translateX(0);}
}


/***************************/


#main h1{ position:absolute; top:264px; text-align:center; width:100%; }
#main .movies{ position:absolute; top:100%; margin-top:-195px; left:50%; width:520px; margin-left:-260px; }
#main .movies li{ float:left; padding:0 25px; display:block; width:210px; height:119px; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bg_mainmov.gif) no-repeat center top; }

#wrapper{padding-top:100%;}
#section1{ background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bg_sect1.jpg) repeat center top; height:1001px; }
#section1 .wrap{ width:100%; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/bg_sect1.png) no-repeat center top; height:1001px; position:relative; }
#section1 .snsbtns{ position:absolute; left:50%; margin-left:40px; top:777px; }
#section1 .snsbtns a{ display:block; float:left; }
#section1 .snsbtns a img{ display:block; }

#section1 .applys{ position:relative; width:708px; margin:0 auto; top:235px; left:0; }
#section1 .applys .select{ width:118px; height:34px; display:block; float:left; background:#fff; border:none; outline:none; line-height:34px; font-size:20px; color:#171717; margin:0 6px 0 0; padding:0 0 0 5px; }
#section1 .applys input{ width:118px; height:34px; display:block; float:left; background:#fff; border:none; outline:none; line-height:34px; font-size:20px; color:#171717; margin:0 6px 0 0; padding:0 0 0 5px; }
#section1 .applys .numfield{ float:left; padding:0 0 0 12px }
#section1 .applys a{ float:right; display:block; position:relative; top:-2px; }
#section1 .agrfrms{ clear:both; padding-top:20px; height:27px }
#section1 .agrfrms .agrset{ float:left; padding-right:20px; height:18px; padding:5px 20px 0 0; }
#section1 .agrfrms .agrset input{ float:left; height:18px; line-height:18px; padding:0; margin:0; width:18px; }
#section1 .agrfrms .agrset label{ display:block; padding:0 0 0 6px; margin:0; float:left; line-height:16px; }
#section1 .noteBtn{ position:absolute; bottom:32px; width:500px; height:60px; left:50%; margin-left:-250px; }


#characters{ position:relative; overflow:hidden; height:1080px; width:100%; background:#fff; }
#charactersWrap{ position:relative; width:300%; }
#characters_center{ width:33.33%; position:absolute; left:0; height:1080px; }
#characters_center .wrap{position:absolute; width:895px; height:1080px; left:50%; top:0; margin-left:-448px; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/char_title.png) no-repeat center; }
#characters_center .leftbg{ width:50%; height:1080px; position:absolute; background:#8f0101; left:0; overflow:hidden; }
#characters_center .rightbg{ width:50%; height:1080px; position:absolute; background:#2c1841; right:0; overflow:hidden; }
#characters_center .leftbg img{ display:block; position:absolute; right:-1136px }
#characters_center .rightbg img{ display:block; position:absolute; left:-798px }
#characters_center .btn_char_l{ position:absolute; top:112px; right:50%; margin-right:-95px; }
#characters_center .btn_char_r{ position:absolute; top:195px; left:50%; margin-left:80px; }
#characters_center .btn_char_l img, #characters_center .btn_char_r img{ display:block; position:relative; }

#characters_left{ width:33.33%; position:absolute; left:-33.33%; height:1080px; background:#fff; }
#characters_left .bg{ position:absolute; right:0; width:28.5%; height:1080px; background:#8f0101 url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/char_bg_l.gif) no-repeat left top; }
#characters_right{ width:33.33%; position:absolute; left:33.33%; height:1080px; background:#fff; }
#characters_right .bg{ position:absolute; width:28.5%; height:1080px; background:#2c1841 url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/char_bg_r.gif) no-repeat right top; }
.characters{ position:absolute; width:100%; height:100%; left:0; right:0; top:0; bottom:0; }
.characters .imgs{ width:1812px; height:787px; position:absolute; left:50%; top:50%; margin-left:-906px; }
#characters_left .slider{ position:absolute; width:46px; height:80px; top:50%; margin-top:-40px; left:50%; }
#characters_right .slider{ position:absolute; width:46px; height:80px; top:50%; margin-top:-40px; left:50%; }

.characters_pager{ position:absolute; left:50%; height:14px; width:90px; margin-left:-45px; top:970px; }
.characters_pager a{ display:block; float:left; width:14px; height:14px; padding:0 8px; position:relative; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/char_indicator.png) no-repeat center top; }
.characters_pager a:hover, .characters_pager a.on{ background-position:center bottom; }
.btn_story{ position:absolute; width:280px; margin-left:-140px; left:50%; top:858px; }

#storydim{ display:none; position:fixed; z-index:100; background:#000; top:0; bottom:0; left:0; right:0; }
.storypop{ display:none; position:absolute; top:0; bottom:0; left:0; right:0; background:#000; overflow:hidden; z-index:100; }
.storypop img{ width:1920px; height:1080px; position:absolute; top:0; left:50%; margin-left:-960px; }
.storypop .btn_quit{ position:absolute; right:0; top:0; z-index:20; }
.storypop .btn_quit img{ position:relative; width:76px; height:76px; display:block; left:0; margin:0; }

#charactersWrap .btngroup{ position:absolute; top:50%; left:50%; z-index:0; }
#charactersWrap .btn_char{ position:absolute; display:block; z-index:10; }
#charactersWrap .btn_char img{ display:block; width:100%; height:auto; }
#charactersWrap .btn_char{ width:8%; }
#characters_left .char1{ top:42.5%; left:50%; }
#characters_left .char2{ top:69%; left:75%; }
#characters_left .char3{ top:50%; left:62%; }
#characters_left .char4{ top:39%; left:15%; }
#characters_left .char5{ top:49%; left:30%; }
#characters_right .char1{ top:40%; left:52%; }
#characters_right .char2{ top:80%; left:18%; }
#characters_right .char3{ top:42.5%; left:30%; }
#characters_right .char4{ top:49%; left:79%; }
#characters_right .char5{ top:50.4%; left:65%; }

#characterdim{ display:none; position:fixed; background:#ffffff; top:0; bottom:0; left:0; right:0; z-index:50; }
.charpop{ display:none; position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:100; width:100%; height:100%; }
.charpop .slide_prev{ position:absolute; top:50%; display:block; margin-top:-40px; left:25px; z-index:15; }
.charpop .slide_next{ position:absolute; top:50%; display:block; margin-top:-40px; right:25px; z-index:15; }
.charpop .btn_quit{ position:absolute; right:0; top:0; z-index:20; }
.charpop .sliders{ position:relative; width:100% !important; height:100% !important; }
.charpop .sliders .charimg{ position:absolute; height:auto; width:1370px; left:50%; top:50%; margin-left:-685px; }
.charpop .pager{  }

.charpop .index1{background:#dd3427}
.charpop .index2{background:#ffda47}
.charpop .index3{background:#e1eb46}
.charpop .index4{background:#ff9f22}
.charpop .index5{background:#ff4956}
.charpop .index6{background:#701fc5}
.charpop .index7{background:#497b37}
.charpop .index8{background:#9000eb}
.charpop .index9{background:#1d72ff}
.charpop .index10{background:#3be6ff}

.sections .title{ padding-top:115px; height:265px; text-align:center; }

#section2{ height:1080px; background:#fff }
.blocks{ width:100%; height:700px; position:relative; }
.blocks ul{ width:100%; height:350px; }
.blocks ul li{ float:left; position:relative; height:350px; }
.blocks ul li a{ display:block; width:100%; height:350px; overflow:hidden; position:relative; }
.blocks ul li .txt{ display:block; position:relative; height:350px; width:100%; }
.blocks .top li{ width:33.3%; }
.blocks .top .center{ width:33.4%; }
.blocks .top a{position:relative;}
.blocks .top .wrapper{ display:block; position:absolute; left:0; right:0; top:0; bottom:0; overflow:hidden; }
.blocks .top .wrapper .bg{ position:absolute; left:50%; margin-left:-320px; width:640px; height:auto; }
.blocks .top .wrapper .bgon{ position:absolute; left:50%; margin-left:-320px; width:640px; height:auto; opacity:0; }
.blocks .top .txt{ position:absolute; bottom:40%; left:50%; }
.blocks .top .txt img{ display:block; width:200%; height:auto; }
/*.blocks .top a:hover .bg img{ display:none; }
.blocks .top a:hover .bg .bgon{ display:block; }*/
.sections .title img {
    position: absolute;
    top: 115px;
    left: 50%;
    margin-left: -960px;
 }
.blocks .top a:hover .txt img{ margin-left:-100%; }
.blocks .bottom li{ width:25%; }
.blocks .bottom li div{ display:block; width:100%; height:350px; overflow:hidden; position:relative; }
.blocks .bottom li.color1{ background:#56a3d9; }
.blocks .bottom li.color2{ background:#59d9d0; }
.blocks .bottom li.color3{ background:#d9bd00; }
.blocks .bottom li.color4{ background:#a7cc23; }
.blocks .bottom li.color4{ background:#a7cc23; }
.blocks .bottom .txt img{ display:block; width:480px; height:auto; position:absolute; top:50%; margin-top:-175px; left:50%; margin-left:-240px }

#section3{ height:1080px; background:#fff }
.blocks .wrapper{ display:block; width:100%; position:relative; height:100%; overflow:hidden; }
.blocks .wrapper a{ display:block; width:100%; height:100%; position:absolute; left:0; right:0; top:0; bottom:0 }
.blocks .wrapper .txt{ display:block; width:331px; height:67px; position:absolute; left:50%; top:50%; margin-top:-34px; margin-left:-165px; overflow:hidden; }
.blocks .wrapper .txt img{ display:block; width:100%; height:auto; }
.blocks .wrapper:hover .txt img{ margin-top:-67px; }
.blocks .left{ width:42.92%; float:left; position:relative; height:700px; }
.blocks .left:after{ content:""; display:block; position:absolute; right:0; width:1px; top:0; bottom:0; height:100%; background:#fff; }
.blocks .left li{ width:100%; height:350px; position:relative; }
.blocks .left li:after{ content:""; display:block; position:absolute; top:0; height:1px; left:0; right:0; width:100%; background:#fff; }
.blocks .left li:first-child:after{ display:none; }
.blocks .left li .bg{ position:absolute; left:50%; margin-left:-411px; width:823px; }
.blocks .left li .bgon{ opacity:0; position:absolute; left:50%; margin-left:-421px; width:823px; }
.blocks .left .wrapper:hover .bgon{ display:block;}

.blocks .right{ width:57.08%; float:left; }
.blocks .right li{ height:233px; width:100%; position:relative; }
.blocks .right li .bg{ position:absolute; left:50%; margin-left:-548px; width:1096px; }
.blocks .right li .bgon{ opacity:0; position:absolute; left:50%; margin-left:-548px; width:1096px; }
.blocks .right li .wrapper{ position:relative; }
.blocks .right .wrapper:hover .bgon{ display:block; }
.blocks .right li .wrapper:after{ content:""; display:block; position:absolute; bottom:0; height:1px; left:0; right:0; width:100%; background:#fff; }
.blocks .right li .btn1{ width:50%; left:0; right:50%; }
.blocks .right li .btn2{ width:50%; left:50%; right:0; }
.blocks .right li.tile2{ height:234px; }
.blocks .right li.tile2 .wrapper{ width:50%; float:left; }
.blocks .right li.tile2 .wrapper:after{ left:0; right:auto; top:0; bottom:0; height:100%; width:1px; }
.blocks .right li.tile2 .wrapper:first-child:after{ display:none; }
.blocks .right li.tile2 .bg{ margin-left:-274px; width:549px; }
.blocks .right li.tile2 .bgon{ margin-left:-274px; width:549px; }

.dungeonPop{ display:none; position:absolute; width:100%; height:100%; top:0; bottom:0; left:0; right:0; background:#171717; z-index:100; }
.dun_slider{ position:relative; width:100% !important; height:100% !important; }
.dungeons{ position:relative; width:100% !important; height:100% !important; }
.dungeons img{ width:1128px; position:absolute; left:50%; margin-left:-564px; top:28px; }
.dungeons .btn{ position:absolute;left:50%;top:145px;margin-left:-564px;z-index:5;}
.dungeons .btn.ja{ position:absolute;left:50%; margin-left: -502px;
    display: inline-block;
    width:152px;
    height: 35px;
    left: 50%;
    top: 140px;
    position: absolute;
    z-index:5;}
#dungeons3 .btn, #dungeons5 .btn{ margin-left:-432px }
#dungeons3 .btn.ja, #dungeons5 .btn.ja{    width: 152px;margin-left: -350px;
   }
.dungeons .btn img{ width:132px; height:35px; position:relative; left:auto; margin:0; top:auto;}
.dungeons .btn.ja img{ width:152px; height:35px; position:relative; left:auto; margin:0; top:auto;}
#dun_prev{ position:absolute; left:3.5%; top:50%; margin-top:-40px; z-index:20; }
#dun_next{ position:absolute; right:3.5%; top:50%; margin-top:-40px; z-index:20; }
.dungeonPop .btn_quit{ position:absolute; right:0; top:0; z-index:20; }
#dun_navs{ position:absolute; z-index:-1; width:0; height:0; overflow:hidden; }
#dun_nav{ position:absolute; top:958px; left:50%; width:780px; margin-left:-390px; z-index:20; }
#dun_nav a{ display:block; position:relative; float:left; padding:0 3px; background-repeat:no-repeat; background-position:center bottom; }
.dun1nav{ background-image:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/slidenav1.png?1); }
.dun2nav{ background-image:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/slidenav2.png?1); }
.dun3nav{ background-image:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/slidenav3.png?1); }
.dun4nav{ background-image:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/slidenav4.png?1); }
.dun5nav{ background-image:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/slidenav5.png?1); }
.dun6nav{ background-image:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/slidenav6.png?1); }
#dun_nav a.on{ background-position:center top; }
#dun_nav a .btmbox{ position:absolute; bottom:0; left:3px; width:124px; height:14px; }
#dun_nav a:hover .btmbox{ background:#474747; }
#dun_nav a.on .btmbox{ background:#008f8f; }

#footer{ z-index:1;  position:relative;padding-top:2rem;width:100%;text-align:center;  background:#fff;}
#footer .terms {display: inline-block; position:absolute; z-index:1;top: 2.5rem;left: 50%;margin-left: -160px;width: 320px;}
#footer .terms a{display: inline-block; padding:0 1rem; font-weight: bold;font-size: 0.875rem;text-decoration: none;color:#000000; transition: all 0.2s;}
#footer .terms a:nth-of-type(2){ color:#ff5864;}
#footer .terms a:hover{color: #c57078}
#footer img.img-copyright{ z-index:0;  display:block; margin:0.5rem auto 0; width:1024px; cursor:pointer; }

#dim{ display:none; background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/dim.png); position:fixed; width:100%; height:100%; top:0; bottom:0; left:0; right:0; z-index:100; }

#moviePop{ display:none; position:fixed; width:60%; height:auto; top:50%; left:50%; z-index:110; border:1px solid #fff; background:#000; }
#moviePop .bg{ display:block; height:auto; width:100%; }
#moviePop .movwrap{ position:absolute; top:0; bottom:0; left:0; right:0; }
#moviePop iframe{ position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; }
#moviePop .btn_quit{ position:absolute; top:-1px; right:-10%; z-index:120; width:10%; height:auto; }
#moviePop .btn_quit img{ display:block; width:100%; height:auto; }
#moviePop #movie-obj{ position:absolute; width:100%; height:100%; top:0; bottom:0; left:0; right:0; z-index:0; }

.alertPop{ display:none; position:fixed; top:50%; left:50%; width:675px; margin-left:-337px; height:227px; margin-top:-113px; z-index:110; }
.alertPop .btn{ position:absolute; width:190px; height:45px; top:160px; left:50%; margin-left:-95px; }
.alertPop .txt{ display:block; width:100%; height:auto; }
#alert_detailnote{ height:533px; margin-top:-266px; }
#alert_detailnote .btn{ top:466px; }
#alert_preparing{ width:433px; margin-left:-216px; height:187px; margin-top:-93px; }
#alert_preparing .btn{ top:123px; }

.alertPop.mob{ top:40%; left:10%; width:80%; margin-left:0; height:auto; margin-top:0; }
.alertPop.mob .btn{ position:absolute; width:30%; height:auto; top:70%; left:35%; margin-left:0; }
.alertPop.mob .btn img{ display:block; width:100%; height:auto; }
#alert_detailnote.mob{ width:90%; left:5%; margin-top:0; margin-left:0; height:auto; top:27% }
#alert_detailnote.mob .btn{ top:87.5%; width:28.5%; left:35.8% }
#alert_preparing.mob{ width:60%; margin-left:0; height:auto; margin-top:0; left:20% }
#alert_preparing.mob .btn{ width:46%; left:27%; top:65% }

#nexon_crossevt{ position:fixed; top:50%; left:50%; width:740px; height:auto; margin-left:-370px; margin-top:-370px; z-index:110; }
#nexon_crossevt .quit{ position:absolute; right:2%; top:2%; width:9.1%; display:block; }
#nexon_crossevt .btn{ position:absolute; top:86.2%; width:52.98%; left:23.51%; display:block; height:auto; margin:0 }
#nexon_crossevt.mob{ width:90%; left:5%; margin:0; top:12% }
#nexon_crossevt img{ display:block; height:auto; width:100%; }


body.mobile{ width:100%; height:auto; }
body.mobile #pc{ display:none; }
body.mobile #mobile{ display:block; }

#mobile .bgimg{ display:block; width:100%; height:auto; }

#mobile .mwrap{ position:absolute; top:0; bottom:0; left:0; right:0; }
#mobile .overimg{ display:none; position:absolute; left:0; top:0; bottom:0; right:0; }
#mobile .actimg{ display:none; position:absolute; left:0; top:0; bottom:0; right:0; }
#mobile .mcontainer{ position:relative; width:100%; height:auto; }

#mheader{ display:block; width:100%; position:fixed; bottom:0; left:0; right:0; z-index:100; }
#mheader .blank{ display:block; float:left; width:8.88%; }
#mheader .sharbtns{ display:block; width:8.88%; position:absolute; right:0; bottom:0; z-index:1; }
#mnav{ float:left; width:82.24%; margin-top: 0.85rem;}
#mnav li{ float:left; width:20%; }
#mnav li a{ display:block; position:relative; }
#mnav li a img{ display:block; width:100%; }
#mnav li a .overimg{ display:none; position:absolute; left:0; top:0; bottom:0; right:0; }
#mnav li a.on .overimg{ display:block; }
#mheader .sharbtns img{ display:block; width:100%; }
.snslinks{ display:none; position:absolute; width:333%; bottom:100%; right:0; }
.snslinks li{ display:block; width:100%; }
.snslinks li a, .snslinks li img{ display:block; width:100%; height:auto; }

#btn_mforum{position:absolute; width:8%; right:2.5%; bottom:450%;}
#btn_mmov{position:absolute; width:8%; right:2.5%; bottom:350%;}
#btn_msupport{position:absolute; width:8%; right:2.5%; bottom:250%;}
#btn_mtop{position:absolute; width:8%; right:2.5%; bottom:150%;}
.btn_mtop img{ display:block; width:100%; height:auto; }



#m_main{ position:relative; width:100%; height:auto; background:#fbfbfb; }
#m_main.ja {
    position: relative;
    top: inherit;
    height: auto !important;
    background: url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/pre-bg.jpg) no-repeat;
    background-size: 100% 100%;
    z-index: 0; width:100%; height:auto;}


#m_main .playbtn{ position:absolute; top:50%; left:39%; display:block; width:25%; height:auto; }
#m_main .playbtn img{ display:block; height:auto; width:100%; }
/*
#m_main .googleBtn{ display:block; width:31%; position:absolute; top:-24%; left:18%}
#m_main .appleBtn{ display:block; width:31%; position:absolute; top:-24%; left:51% }
*/

#m_main .downloadBtn{ display:none; width:62%; position:absolute; top:-24%; left:19% }
#m_main .googleBtn img, #m_main .appleBtn img, #m_main .downloadBtn img{display:block; width:100%; height:auto; }
#m_main .mcontainer{ height:100%; }

#m_sect1{ position:relative; }
#m_sect1 .bgvisual{ position:absolute; width:100%; bottom:0; }
.msnsBtns{ position:absolute; width:42%; left:29%; top:86.5%; }
.msnsBtns a{ display:block; float:left; width:33%; }
.msnsBtns a img{ display:block; width:100%; height:auto; }
.m_noteBtn{ position:absolute; bottom:5%; width:84%; height:auto; left:7% }
.m_noteBtn img{ display:block; width:100%; height:auto; }
.mfrmwrap{position:absolute; top:13.8%; width:100%; height:24%; }
#m_sect1 .mfrmwrap .applys{ position:absolute; width:87%; left:6.5%; top:0; height:100%; z-index:5 }
#m_sect1 .applys .ostype{ width:33%; position:absolute; top:1%; left:0; }
#m_sect1 .applys .ostype:after{ content:""; clear:both; height:0; display:block; }
#m_sect1 .applys .ostype .labels{ float:left; position:relative; }
#m_sect1 .applys .ostype .labels.os1{ width:60%; }
#m_sect1 .applys .ostype .labels.os2{ width:40%; }
#m_sect1 .applys .ostype .labels img{ display:block; width:100%; height:auto; }
#m_sect1 .applys .ostype .labels input{ position:absolute; right:-0.2em; width:1em; height:1em; font-size:1em; margin-top:-.4em; top:50%; line-height:1em; z-index:1; }
#m_sect1 .applys .numfield{ width:100%; position:absolute; top:17.5%; left:0; }
#m_sect1 .applys .numfield:after{ content:""; clear:both; height:0; display:block; }
#m_sect1 .applys .numfield .frmset:first-child{ margin-left:0; }
#m_sect1 .applys .numfield .frmset{ float:left; width:32.3%; margin-left:1.2%; position:relative; }
#m_sect1 .applys .numfield .frmset select, #m_sect1 .applys .numfield .frmset input{ text-align:center; font-size:1.2em; line-height:1.2em; border:none; outline:none; width:100%; padding:0; margin:0; background:#fff; position:absolute; top:0; bottom:0; left:0; right:0; }
#m_sect1 .applys .btn_reserv{ display:block; width:100%; position:absolute; height:auto; top:43.5%; left:0; }
#m_sect1 .applys .btn_reserv img{ display:block; width:99.4%; height:auto; }
#m_sect1 .applys .agrfrms{ position:absolute; top:68.5%; left:0; right:0; width:100%; }
#m_sect1 .applys .agrset{ float:left; width:47%; position:relative; }
#m_sect1 .applys .agrset label, #m_sect1 .applys .agrset label img{ display:block; width:100%; height:auto; }
#m_sect1 .applys .agrset input{ position:absolute; left:0; top:0; font-size:1em; line-height:1em; width:1em; height:1em; border:none; outline:none; padding:0; margin:0; top:50%; margin-top:-0.45em; }
#m_sect1 .applys .agrset a{ display:block; width:45%; }
#m_sect1 .applys .agrset a img{ width:100%; height:auto; display:block; }




#m_characters{ position:relative !important; }
#m_characters .mwrap{ overflow:hidden; }
#m_char_left{ position:absolute; left:-100%; top:0; width:100%; bottom:0; }
#m_char_center{ position:absolute; left:0; top:0; width:100%; bottom:0;  }
#m_char_right{ position:absolute; left:100%; top:0; width:100%; bottom:0;  }
#m_characters .slidebtns{ position:absolute; width:100%; top:45%; }
#m_characters .slidebtns a{ position:absolute; top:0; width:8.89%; display:block; z-index:2; }
#m_characters .slidebtns a img{ display:block; height:auto; width:100% }
#m_characters .slidebtns a.left{ left:0; }
#m_characters .slidebtns a.right{ right:0; }

#m_characters .m_pager{ position:absolute; bottom:2.5%; width:20%; left:40%; z-index:10; }
#m_characters .m_pager a{ display:block; float:left; width:33.3%; height:auto; position:relative; }
#m_characters .m_pager img{ display:block; width:100%; }
#m_characters .m_pager a .actbox{ display:none; position:absolute; top:0; left:0; width:100%; right:0; }
#m_characters .m_pager a:hover .actbox, #m_characters .m_pager a.on .actbox{ display:block; }
#m_characters .charbtns a{ float:left; display:block; width:50%; }
#m_characters .charbtns a img{ display:block; width:100%; height:auto; }
#m_char_left .charbtns{ position:absolute; top:63.1%; width:95.4%; left:2.3%; }
#m_char_right .charbtns{ position:absolute; top:82.6%; width:95.4%; left:2.3%; }

.mcharpop{ position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; z-index:10; width:100%; height:100%; }
.mcharpop.swiper-container{position:absolute; z-index:20;}
.swiper-wrapper{position:relative;left:0;top:0;height:100%;}
.mcharpop .mslide_prev{ position:absolute; top:45%; display:block; left:1%; z-index:15; width:12%; background:none; }
.mcharpop .mslide_next{ position:absolute; top:45%; display:block; right:1%; z-index:15; width:12%; background:none; }
.mcharpop .mslide_prev img, .mcharpop .mslide_next img{ width:100%; display:block; height:auto; }
.mcharpop .btn_quit{ position:absolute; right:0; top:0; z-index:100; width:8%; }
.mcharpop .btn_quit img{ width:100%; height:auto; display:block; }
.mcharpop .msliders{ position:relative; width:auto; height:100%; float:left;}
.mcharpop .msliders.index1, .mcharpop .msliders.index6{ display:block; }
.mcharpop .msliders .mcharimg{ position:absolute; width:100%; height:auto; left:0; right:0; top:0; bottom:0; }

.endbtn{ position:absolute; position:absolute; top:45.4%; display:block; z-index:15; width:18.5%; }
.endbtn img{ display:block; width:100%; height:auto; }
.endbtn.lord{ left:2.5%; }
.endbtn.world{ right:2.5%; }
.swiper-button-disabled{ display:none !important; }

.mstorypop{ display:none; position:absolute; top:0; bottom:0; left:0; right:0; background:#000; overflow:hidden; z-index:10; width:100%; height:100%; }
.mstorypop img{ position:relative; width:100%; height:auto; }
.mstorypop .btn_quit{ position:absolute; right:0; top:0; z-index:20; width:8%; }
.mstorypop .btn_quit img{ width:100%; height:auto; display:block; }


#m_sect2{ position:relative; }
#m_sect2 .movbtns{ position:relative; width:100%; display:block; height:auto; }
#m_sect2 .movbtns img{ display:block; width:100%; height:auto; }
#m_sect2 .movbtns:hover .overimg{ display:block; }

#m_sect3{ position:relative; background:#171717; }
#m_dun_navs{ position:absolute; height:0; width:100%; top:0; overflow:hidden }
#m_dun_nav{ position:absolute; bottom:5.1%; width:94.6%; left:2.8%; z-index:10; }
#m_dun_nav a{ float:left; width:16.66%; position:relative; display:block; }
#m_dun_nav a img{ display:block; width:100%; height:auto; }
#m_dun_nav a:hover .overimg{ display:block; }
#m_dun_nav a.on .actimg{ display:block; }

#m_dun_prev{ position:absolute; top:45%; width:8.89%; left:0; height:auto; z-index:20; background:none; }
#m_dun_prev img{ display:block; width:100%; height:auto; }
#m_dun_next{ position:absolute; top:45%; width:8.89%; right:0; height:auto; z-index:20; background:none; }
#m_dun_next img{ display:block; width:100%; height:auto; }

#m_dun_slider.swiper-container{ position:absolute; }
#m_dun_slider .m_dungeons{ position:relative; float:left; }

.m_dungeons .btn{ position:absolute;top:15.5%;left:8%;width:16%;display:block; }
.m_dungeons .btn img{ display:block; width:100%; height:auto; }
#m_dungeons3 .btn, #m_dungeons5 .btn{ left:24%;}


/* language select btn */
.language-wrap {position: absolute; top:2px; right:12px; text-align:center;z-index:50;}
.btn-language {display: inline-block; width: 58px; height: 54px; text-decoration: none; margin: 0.95rem 1rem 0 0; text-indent: -9999px; font-size: 0px; border: 1px solid transparent; background-color:rgba(255,255,255,0.2)}
.btn-language.ko {
    background: url(https://file.valofe.com/Valofe_file/web/vfun/images/common/lang/btn_ko.png) center no-repeat;
    background-size: contain;
}
.btn-language.en {
    background: url(https://file.valofe.com/Valofe_file/web/vfun/images/common/lang/btn_en.png) center no-repeat;
    background-size: contain;
}

.fadeInFromTop{animation: fadeInFromTop 0s 2s ease-in forwards}
.fadeInRight{animation: fadeInRight  0s 1.5s ease-in forwards}
.fadeInLeft{animation: fadeInLeft  0s 1.75s ease-in forwards}
.fadeInBottom{animation: fadeInBottom  0s 3s ease-in forwards}

@keyframes fadeInFromTop{
    0%{margin-top:-5vw;opacity:0;}
    100%{margin-top:0;opacity:1;}
}
@keyframes fadeInRight{
    0%{right:-5vw; opacity:0;}
    100%{right:0; opacity:1;}
}

@keyframes fadeInLeft{
    0%{left:-5vw; opacity:0;}
    100%{left:0; opacity:1;}
}

@keyframes fadeInBottom{
    0%{transform: translateY(3vw);opacity:0;}
    100%{transform: translateY(0); opacity:1;}
}

/* PRE - twitter */
#m_main.ja .twitter-area{
    position:relative;
    clear:both;
    display:block;
    width:100%;
    padding-bottom:11vw;
    text-align:center;
}
#m_main.ja .twitter-area .twitter-desc{margin-top:3rem; margin-bottom:1rem;font-size: 2.25vw; letter-spacing:-1px;color:#fff; text-align: center;}
#m_main.ja .twitter-area .twitter-cont{
    position:relative;
    display: inline-block;
    width:80%;
    /*height:14vw;*/
    height:auto;
    margin: 6vw auto 0;
    padding-bottom:5vw;
}
.ja .twitter-area .twitter-wrap{position:relative;width:50%;text-align:left;padding-top: 29px;margin-top: 20px;}
#m_main.ja .twitter-area .blit-chr{position:relative;width:50%;height:18vw}
#m_main.ja .blit-chr .beam{
    position: absolute;
    height: 150%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 30%);
}

#m_main.ja .blit-chr .beam2{
    position: absolute;
    height: 150%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 30%);
}

#m_main.ja .blit-chr .chr{
    position: absolute;
    height: 150%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 30%);

}
#m_main.ja .blit-chr .tag-prod{
    position:absolute;
    height:150%;
    left: 50%;
    top: 50%;
    transform: translate(-43%, -61%);
}

@media screen and (max-width :1536px) {
    #main.ja .bg-right {height: 88%;}
}
@media screen and (max-width :1280px) {

    #topbar.ja .wrap {
        width: 779px;
        margin-left: -479px;
        height: 63px;
        background: url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/pre-topbar.png) no-repeat -77px -11px;
        display: block;
    }
    #topbar.ja {
        position: relative;
        height: 60px;
    }

    .ja .btn-language {
        display: inline-block;
        width: 37px;
        height: 35px;
        text-decoration: none;
        margin: 12px 1rem 0 0;
    }

    #topbar.ja .btn_google {
        right: 200px;
        top: -6px;
    }

    #topbar.ja .btn_apple {
        right: 68px;
        top: -6px;
    }

    #main.ja .bg-right {
        height: 76%;
    }

    #main.ja .twitter-area {
        padding-bottom: 40px;
        margin-bottom: 3vw;
        padding-top: 4vw;
    }

    #topbar .btn_google {;
        top: 7px;
    }

    #topbar .btn_apple {
        right: 42px;
        top: 7px;
    }


    .ja .gauge {
        width: 90%;
        margin: 2.5rem auto 0
    }

    .ja .items {
        width: 90%;
        margin: 9vw auto 0;
    }

    .ja .dots {
        top: -4px;
    }

    .ja .dot-list {
        line-height: 1;
    }

    .ja .items dd {
        height: 12vw;
    }
}
@media screen and (max-width :1102px) {
    #main.ja .bg-right {height: 50%;}
}
@media screen and (max-width :1024px) {
    html,
    body,
    select,
    input {
        font-size: 20px;
    }
    /* 모바일 사전예약 */

    /* JP PRE-REGISTER */
   .ja{
        position: relative;
        top: inherit;
        height: auto !important;
        background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/pre-bg.jpg) no-repeat;
        background-size: 100% 100%;
        z-index:0;
    }
   .ja .btm{ position:relative;/* height:50%:*/
        top: inherit; bottom: inherit;
        left: inherit; right:inherit; width:100%; height: auto; padding-top: 0px; padding-bottom: 30px;

    }
    #mobile.ja .bgimg{ /*height: 49vw; */}
   .ja .btm{  position:relative;height:auto; }
   .ja .mwrap{ text-align:center;}
   .ja .m-pre-top{ position:absolute;top:0;left: 15%; width:70%;}
   .ja .googleBtn{ z-index: 50; display:inline-block; width:20%; margin-top:26vw; position:relative; /*top:5%; left: 18%;*/top:0;  margin-right: 10px; left:inherit}
   .ja .appleBtn{ z-index: 50; display:inline-block; width:20%;  margin-top:26vw; position:relative; /*top:5%; left:51%*/top:0; left:inherit;}

    /*#m_main.ja .m_wrap_box{ position: relative; width:100%; height:auto; padding-top: 68px; padding-bottom: 30px; top:inherit;*/
   .ja .wrap_box{ position: relative; width:100%; height:auto; padding-top: 38vw; padding-bottom: 30px; top:inherit;
        /*    background:url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/pre-bg.jpg) no-repeat;
            background-size: 100% 100%;*/
    }

    /* PRE - MAIN 배경 */

   .ja .bg-right{
        position:absolute;
        z-index:-1;
        display: inline-block;
        right:0;  bottom:0; height:100%;
        width: auto;
    }

   .ja .bg-bottom{
        position:absolute;
        z-index:0;
        display: inline-block;
        left:0;  bottom:0; width:80%;
        height: auto;
    }
    .ja .bg-right .bg-right-cat{position:absolute;right:0;bottom:0;height: 85%;}
   .ja .bg-right .bg-right-triangle{position:absolute;right:0;bottom:0;height: 80%;}

   .ja .bg-bottom .bg-bottom-triangle{position:absolute; left:50%; margin-left: -15vw; bottom:0;width: 45vw;}
   .ja .bg-bottom .bg-bottom-sky{position:absolute;left:0;bottom:0;width: 75vw;}
   .ja .bg-bottom .pinkbean{position:absolute;left:0;bottom:0;width: 27vw;}

    /* PRE - TOP */
   .ja .pre-top {position:relative; width:/*89.30%*/80%; margin:0 auto;text-align:center;}
   .ja .pre-top img {width: 100%;}
   .ja .tit-pre {
        position: absolute;
        height: 28%;
        width: 100%;
        left: 0;
        top: 33%;
        background: url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/bg-pre-title.png) center top no-repeat;
        background-size: 50% 100%;
        color: #fffca2;
        z-index: 1;
        vertical-align: top;
        line-height: 4.5vw;
        font-size: 2.5vw;
        letter-spacing: -0.1vw;
        text-align: center;
    }
   .ja .pre-desc{margin-top:1.5rem;letter-spacing: -1px;font-size: 2.25vw; color: #fff; font-weight: bold; }
   .ja .pre-date{margin-top:1.5rem;letter-spacing: -1px;font-family: 'M PLUS 1p', sans-serif;font-size: 22px; color: #bb99d2;}

    /* PRE - Gauge */
   .ja .gauge{position:relative; width: 90%; margin: 4rem auto 0.25rem;}
   .ja .gauge:before{content: ''; position:absolute;
        display: inline-block;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: #514fff;
    }
/************************************************************/
    .language-wrap {
        top: 32px;
        right: 2.5%;
    }

    .btn-language {
        width: 42px;
        height: 37px
    }

    .m_wrap_box {
        background: url(/static/resources_ja/web/wrap_box_bg.jpg) no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 2470px;
        min-width: 100%;
    }

    .m_wrap_box .m_wrap_title {
        position: absolute;
        top: -17px;
        left: 0;
        width: 80%;
        right: 0;
        margin: auto;
        z-index: 10;
    }

    .m_wrap_box .m_wrap_bg {
        font-size: 13.3333vw;
        position: absolute;
        background: url(/static/resources_ja/web/wrap_bg.png) no-repeat;
        background-size: 100% 100%;
        width: 92%;
        border-radius: 8px;
        height: 2350px;
        top: 54px;
        left: 0;
        right: 0;
        margin: auto;
    }

    .m_wrap_box .m_wrap_text1 {
        position: absolute;
        width: 90%;
        top: 6%;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 10;
    }

    .m_wrap_box .m_wrap_text2 {
        display: block;
        width: 96%;
        margin: 0 auto;
    }

    .m_wrap_box .m_wrap_text01 {
        position: absolute;
        top: 10%;
        width: 80%;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 10;
    }

    .m_wrap_box .m_items {
        position: absolute;
        top: 14%;
        left: 0;
        right: 0;
        margin: auto;
    }

    .m_wrap_box .m_item {
        width: 70%;
        margin: 0 auto;
        margin-bottom: 10px;
        height: 228px;
        border-radius: 8px;
        overflow: hidden;
        text-align: center;
        position: relative;
    }

    .m_wrap_box .m_item .m_item-title {
        height: 54px;
        line-height: 60px;
        background: rgba(0, 0, 0, .2);
    }

    .m_wrap_box .m_item .m_item-title img {
        border: 0;
    }

    .m_wrap_box .m_item .m_item-img {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
    }

    .m_wrap_box .m_item .m_item-text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30px;
        margin: auto;
    }
    .m_wrap_box .m_items02 {
        position: relative;
        left: 0;
        width: 100%;
        top: 65%;
        font-size: 13.33333vw;
    }
    .m_wrap_box .m_items02_bg {
        font-size: 13.33333vw;
        display: block;
        position: relative;
        margin: 2% auto;
        width: 92%;
        height: 2.4em;
        background: url(/static/resources_ja/web/items02_bg1.png) no-repeat;
        background-size: 100% 100%;
    }

    .m_wrap_box .m_items02_bg .bg_gift {
        display: block;
        border: 0;
        width: 32%;
        height: 2.1em;
        cursor: pointer;
        position: absolute;
        left: 20%;
        top: 0.2em;
    }

    .m_wrap_box .m_items02_bg .bg_r {
        display: block;
        border: 0;
        width: 32%;
        height: 100%;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
    }

    .m_wrap_box .twitter-timeline {
        max-width: unset !important;
        min-width: unset !important;
        min-height: unset !important;
        width: 92% !important;
        height: 300px !important;
        display: block !important;
        margin: 0 auto;
    }

    .m_wrap_box .flex-twitter {
/*        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        width: 92%;
        height: 45px;
        border-radius: 0 0 4px 4px;
        cursor: pointer;
        position: absolute;
        z-index: 9;
        left: 4%;
        bottom: 0;*/
        justify-content: flex-start;
        align-items: flex-start;
        background: #fff;
        width: 97px;
        height: .18em;
        border-radius: 0 0 4px 4px;
        cursor: pointer;
        position: absolute;
        z-index: 9999;
        left: 0;
        top: 27px;
    }

    .m_wrap_figure {
        position: absolute;
        left: 12%;
        top: 22%;
    }
    /* PRE- JP */
    #m_main.ja .bg-right{height: 46%;}
    #m_main.ja .bg-right .bg-right-triangle{display: none;}
    #m_main.ja .wrap_box{padding-top:35vw ;padding-bottom:0;}
    .ja .pre-top{width:90%;}
    .ja .tit-pre{
        top: /*7vw*/0;
        height: 11vw;
        background: url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/bg-pre-title.png) center top no-repeat;
        background-size: 62% 100%;
        line-height: 9.5vw;
        font-size: 4.25vw;
    }

    .ja .pre-desc {
        margin-top: 0.5rem;
        font-size: 4.25vw;
        line-height: 1.4;
        padding-top: 13vw;
    }

    .ja .pre-date { margin-top: 1vw;font-size: 2.5vw; }

    .ja .now-score {font-size: 2.35vw;}
    .ja .dots {top: -10px;}

    .ja .items {width: 90%;margin: 12vw auto 0;}
    .ja .items dt {font-size: 1.5vw;line-height: 1.45;}
    .ja .items dd {position:relative; width:100% ;height:12vw}
    .ja .items dd .item-img{position:absolute; top: 50%; left: 50%; width: 40%;
        transform: translate(-50%, -50%);}
    .ja .items .step:nth-of-type(2) dd .item-img{width:35%;}
    .ja .items .step:nth-of-type(4) dd .item-img{width:40%;}
    .ja .items .step:nth-of-type(5) dd .item-img{width:55%; transform: translate(-50%, -52%);}

    .ja .items > .step.complete:after{
        left: -18px;
        top: 48%;
    }

    #m_main.ja .twitter-area {margin-top: 4vw;}
    #m_main.ja .twitter-area .twitter-desc{
        margin-top: 0.5rem;
        font-size: 3.25vw;
        line-height: 1.4;
    }
}

@media screen and (max-width :840px) {
    #m_main.ja .twitter-area .blit-chr {margin-top: 4vw;}
    #m_main.ja .blit-chr .beam{
        position: absolute;
        height: 150%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
    }

    #m_main.ja .blit-chr .beam2{
        position: absolute;
        height: 150%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
    }

    #m_main.ja .blit-chr .chr{
        position: absolute;
        height: 150%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);

    }
    #m_main.ja .blit-chr .tag-prod{
        position:absolute;
        height:150%;
        left: 50%;
        top: 50%;
        transform: translate(-43%, -41%);
    }

}
@media screen and (max-width :800px) {
    .ja .items .step.complete:after{
        content: '';
        text-align: center;
        line-height: 13vw;
        font-size: 1.5vw;
        color: #fff;
        position: absolute;
        left: -27px;
        top: 47%;
        background: url(https://file.valofe.com/Valofe_file/web/fwtr/images/resources_ja/web/new_pre/complete.png) left top no-repeat;
        background-size: 45% auto;
        width: 100%;
        height: 100%;
    }
    .ja .pre-desc {font-size: 1.25rem; letter-spacing:0;}
    .ja .pre-date {font-size: 1rem; letter-spacing:0;}
    .ja .now-score { font-size: 1rem;}

    .ja .items {margin: 17vw auto 12vw;}
    .ja .items .step {width: 32%; margin-left:2%}
    .ja .items .step:nth-of-type(4){margin-left:17.5%;margin-top: 5vw;}
    .ja .items .step:nth-of-type(5){margin-top: 5vw;}
    .ja .items dt {font-size: 2vw; line-height: 1.6;}
    .ja .items dd {height: 18vw;}

    .ja .blit {width:3rem; height: 1.5rem;line-height: 1.5rem; font-size: 0.75rem; font-weight: bold;}
    .ja .dots {top: -0.4rem;}
    .ja .num, .ja .num + span {font-size: 1rem;}
    .ja .items dt {font-size: 0.875rem;}
    .ja .dot-list .percentage{ font-weight: 300; font-size: .875rem;}

    #m_main.ja .twitter-area .blit-chr {
        margin-top: -1vw;
    }
}
@media screen and (max-width :768px) {

    .ja .googleBtn {width: 26%; min-width:108px;}
    .ja .appleBtn {width: 26%; min-width:108px;}


    #m_main.ja .wrap_box{padding-bottom:0;}
    #m_main.ja .twitter-area{background: #2d357f; padding-top: 4vw; padding-bottom: 10vw;}

    .ja .bg-right {bottom: 33vw;}
    .ja .bg-bottom {z-index:1;width:100%;}
    .ja .bg-bottom .bg-bottom-right{display:inline-block;position:absolute; right:0; bottom:0;width: 28vw;}
    .ja .btm{padding-bottom:0;}

    #m_main.ja .twitter-area .twitter-cont{width: 90%;z-index:2;}

    .ja .twitter-area .twitter-wrap {margin-top:0;}

    #m_main.ja .blit-chr .beam{
        position: absolute;
        height: 170%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
    }

    #m_main.ja .blit-chr .beam2{
        position: absolute;
        height: 170%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
    }

    #m_main.ja .blit-chr .chr{
        position: absolute;
        height: 170%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);

    }
    #m_main.ja .blit-chr .tag-prod{
        position:absolute;
        height: 170%;
        left: 50%;
        top: 50%;
        transform: translate(-43%, -41%);
    }
    .ja .bg-bottom .pinkbean{display:none;}

}
@media screen and (max-width :700px) {
    #m_main.ja .twitter-area{padding-bottom:5vw;}
    .ja .bg-right {bottom: 40vw;}
}
@media screen and (max-width :640px) {
    html,
    body,
    select,
    input {
        font-size: 16px;
    }

    .m_wrap_box {
        height: 2075px;
    }

    .m_wrap_box .m_wrap_bg {
        height: 2000px;
    } 

    .m_wrap_box .m_wrap_text1 {
        top: 4%;
    }

    .m_wrap_box .m_items {
        top: 10%;
    }


    .m_wrap_box .m_wrap_text01 {
        top: 7%;
    }

    .m_wrap_box .m_items02 {
        top: 70%;
    }
    .m_wrap_box .twitter-timeline { top: 86.3%; height: 300px !important; }

    .m_wrap_box .m_items02_bg .flex-twitter {
        height: 2.1em;
        top: 15.4em;
    }
}

@media screen and (max-width :567px) {
    .ja .bg-right {bottom: 57vw;}
    #m_main.ja .twitter-area {padding-top: 6vw;}
    #m_main.ja .twitter-area .twitter-cont {width: 100%;}
    #m_main.ja .twitter-area .twitter-desc {font-size: 4.25vw; line-height: 1.7;}
    .mb-show{display:block;}
    #m_main.ja .twitter-area .blit-chr {width: 41%;margin-top: 5%;}
    .ja .twitter-area .twitter-wrap {width: 58%;}
    #m_main.ja .blit-chr .beam{
        position: absolute;
        height: 200%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
    }

    #m_main.ja .blit-chr .beam2{
        position: absolute;
        height: 200%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
    }
    #m_main.ja .blit-chr .chr{
        position: absolute;
        height: 200%;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
    }
    #m_main.ja .blit-chr .tag-prod{
        position:absolute;
        height: 200%;
        left: 50%;
        top: 50%;
        transform: translate(-43%, -41%);
    }

    .ja .items dd {height: 25vw;}

    .ja .items dd .item-img {width: 35%;}
    .ja .items .step:nth-of-type(4) dd .item-img {width: 35%;}
    .ja .items .step:nth-of-type(5) dd .item-img {width: 50%;transform: translate(-50%, -44%);}
    .items dd .back-light {transform: translate(-44%, -40%);}
    .ja .items .step:nth-of-type(5) dd .back-light {transform: translate(-65%, -75%);}
    .ja .items .step {width: 49%;margin-left: 2%;}
    .ja .items .step:nth-of-type(3) {margin-left:0;margin-top: 5vw;}
    .ja .items .step:nth-of-type(4) {margin-left:2%; }
    .ja .items .step:nth-of-type(5) {margin-left:0%;width: 49%;}
    #m_main.ja .bg-right {height: 38%;}

}
@media screen and (max-width :480px) {

    html,
    body,
    select,
    input {font-size: 14px;}
    .m_wrap_box {
        height: 1932px;
    }

    .m_wrap_box .m_wrap_bg {
        height: 1842px;
    }

    .m_wrap_box .m_wrap_text01 {
        top: 5%;
    }

    .m_wrap_box .m_items {
        top: 7%;
    }
    .m_wrap_box .m_wrap_text1 {
        top: 3%;
    }

    .m_wrap_box .m_items02 {
        top: 72%;
    }

    .m_wrap_box .m_items02_bg .twitter-timeline {
        height: 300px !important;
    }

    .m_wrap_box .m_items02_bg .flex-twitter {
        top: 11em;
        height: 4em;
    }

    .language-wrap {top: 3px;right: 8px;}
    .ja .btn-language {margin: 12px 0rem 0 0;}


    .ja .pre-top {width: 96%;}
    .ja .gauge {margin: 4rem auto 0.25rem;}
    .ja .items {margin: 24vw auto 11vw;
/*
    .ja .items .step:nth-of-type(4) {
        width: 37%;
        margin-left: 11.5%;
        margin-top: 5vw;
    }
    .ja .items .step:nth-of-type(5) { width: 37%; }
    .ja .items .step.complete:after {left: -8px;}
    #m_main.ja .wrap_box { padding-top: 39vw; }*/
}

@media screen and (max-width: 400px) {
    html,body,select,input {font-size: 12px;}
}
@media screen and (max-width: 385px) {
    .ja .bg-right {bottom: 64vw;}
    #m_main.ja .twitter-area .blit-chr {display: none;}
    #m_main.ja .twitter-area .twitter-wrap {width: 100%; text-align:center;}
    .flex-twitter {
        justify-content: center;
        align-items: center;
        background: none;
        width: 97px;
        height: .18em;
        border-radius: 0 0 4px 4px;
        cursor: pointer;
        position: absolute;
        z-index: 9999;
        left: 50%;
        top: 0;
        margin-left: -50px;
    }
}