@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

/* CSS Reset
-------------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
strong,
small,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
input,
button,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure,
figcaption {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

img,
fieldset,
button {
    border: 0;
	cursor:pointer;
}

img {
    vertical-align: top;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body,
input,
button,
textarea,
select,
table,
kbd {
    font-family: 'Noto Sans JP', sans-serif;
}

ol,
ul {
    list-style: none;
}

a {
    text-decoration: none;
    cursor: pointer;
}

a,
button,
label,
h1,
h2,
h3,
h4 {
    text-indent: -99999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
}

button,
label {
    cursor: pointer;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
legend {
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    visibility: hidden;
}

input[type="checkbox"] {
    display: none;
}

input[type="submit"] {
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    border: none;
}

i,
em {
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
b,
strong {
    font-weight: normal;
}

/* Styles
-------------------------------------------------------------- */
body,
html {
    /*background: #000;*/
    overflow-y: auto;
}

button {
    outline: 0;
    border: none;
    background: 0 0
}

a,
button,
input,
label {
    outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

input[type=checkbox],
input[type=radio] {
    display: none
}

input[type=tel],
input[type=text] {
    border: 0;
    background: 0 0
}

input,
textarea {
    vertical-align: top
}

textarea {
    resize: none;
    border: 0;
    font-size: 9px;
    color: #745200;
    padding: 3px;
    outline: 0;
    box-sizing: border-box
}

a,
button,
h1,
h3,
h4,
p {
    background-size: cover;
    text-indent: -99999px;
    text-align: center;
    margin: 0 auto;
    background-repeat: no-repeat
}

a {
    display: inline-block
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 14.6vw;
    z-index: 1000;
	background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bg-top.png);
	background-repeat:no-repeat;
	background-size:100% auto;
}

header h1 {
    width: 23vw;
    height: 9.5vw;
    margin-top: 2.2vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/logo.png);
	background-size:100% auto;
}

header h1 a {
	display:block;
    width: 100%;
    height: 100%;
}

header p a {
	display:block;
	position:absolute;
	top:4.3vw;
	height:5vw;
	background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/top-sns.png);
	background-size:auto 90%;
	text-indent: 0;
}

header p a:first-child {
    left:5vw;
	width:7vw;
	background-position:1vw center;
}

header p a:last-child {
    left:13.8vw;
	width:8vw;
	background-position:right center;
}

header p.down-list {
    position: absolute;
    top: 4vw;
    right: 5vw;
    width: 16vw;
    height: 6.5vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/down-list.png);
    background-size: 100% auto;
    text-indent: 0;
}

header p.down-list a {
	width:6vw;
	height:100%;
	top:0;
    background-image: none !important;
}

header p.down-list a.btn-app {
	left:0;
}

header p.down-list a.btn-and {
	left:auto;
	right:0;
}
header a.btn-coupon {
    position:absolute;
    top:4.7vw;
    right:15vw;
    width:8vw;
    height:5vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-coupon.png);
    background-size: 100% auto;
}
header button.btn-menu {
    position: absolute;
    top: 4.7vw;
    right: 5vw;
    z-index: 9;
    width: 6vw;
    height: 4vw;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer
}

header button.btn-menu i {
    display: block;
    position: absolute;
    width: 2.8vw;
    height: 0.8vw;
    background: #fff;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out
}

header button.btn-menu i:nth-child(even) {
    left: 2.8vw
}

header button.btn-menu i:nth-child(odd) {
    left: 0
}

header button.btn-menu i:nth-child(1),
header button.btn-menu i:nth-child(2) {
    top: 0
}

header button.btn-menu i:nth-child(3),
header button.btn-menu i:nth-child(4) {
    top: 1.8vw
}

header button.btn-menu i:nth-child(5),
header button.btn-menu i:nth-child(6) {
    top: 3.6vw
}

header button.btn-menu.open i:nth-child(1),
header button.btn-menu.open i:nth-child(6) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

header button.btn-menu.open i:nth-child(2),
header button.btn-menu.open i:nth-child(5) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

header button.btn-menu.open i:nth-child(1) {
    left: 0.6vw;
    top: 0.8vw
}

header button.btn-menu.open i:nth-child(2) {
    left: calc(50% - 0.6vw);
    top: 0.8vw
}

header button.btn-menu.open i:nth-child(3) {
    left: -50%;
    opacity: 0
}

header button.btn-menu.open i:nth-child(4) {
    left: 100%;
    opacity: 0
}

header button.btn-menu.open i:nth-child(5) {
    left: 0.8vw;
    top: 2.4vw
}

header button.btn-menu.open i:nth-child(6) {
    left: calc(50% - 0.6vw);
    top: 2.4vw
}

nav {
    display: none;
    opacity: 0;
    position: fixed;
    width: 100%;
    height: calc(100% - 13.8vw);
    top: 13.8vw;
    left: 0;
    z-index: 9999;
    background-color: #000;
    transition: opacity .3s;
    overflow-y: auto;
}

nav.open {
    opacity: 1
}

nav .inner {
	position:relative;
	padding-top:7.5vw;
	padding-bottom:45vw;
}

nav ul.menu {
    width: 90%;
    margin: 0 auto;
}

nav ul.menu li {
    height: 10vw;
    margin-bottom: 6vw;
    box-sizing: border-box;
}

nav ul.menu li button, nav ul.menu li > a {
    text-indent: 0;
    width: 100%;
    text-align: center;
}

nav ul.menu li button span, nav ul.menu li > a span {
    display: inline-block;
    width: 51.7%;
    height: 10vw;
    overflow: hidden;
}

nav ul.menu li button i, nav ul.menu li > a i {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/menu.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    text-indent: -99999px;
}

nav ul.menu li button.on i {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/menu_on.png);
}

nav ul.menu li.m1 button i {
    background-position: center 2vw;
}

nav ul.menu li.m2 button i {
    background-position: center -14vw;
}

nav ul.menu li.m3 button i {
    background-position: center -30vw;
}

nav ul.menu li.m4 button i {
    background-position: center -46vw;
}

nav ul.menu li a {
    text-indent: 0;
}

nav ul.menu li a i {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/menu.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    text-indent: -99999px;
}

nav ul.menu li a.on i {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/menu_on.png);
}

nav ul.menu li.m1 a i {
    background-position: center 2vw;
}

nav ul.menu li.m2 a i {
    background-position: center -14vw;
}

nav ul.menu li.m3 a i {
    background-position: center -30vw;
}

nav ul.menu li.m4 a i {
    background-position: center -46vw;
}

nav ul.sns-list {
    width: 44%;
    height: 6.6vw;
    margin: 0 auto 10vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/menu-sns02.png);
	background-repeat:no-repeat;
    background-size: 100% auto;
}

nav ul.sns-list li a {
    text-indent: 0;
    width: 100%;
    height: 100%;
}

nav ul.sns-list li {
    width: 10vw;
    height: 6.6vw;
    float: left;
}

nav ul.sns-list li.btn-twitter {margin-right:6vw;}
nav ul.sns-list li.btn-youtube {margin-right:6vw;}

nav ul.sns-list li.btn-line {float:right;}

nav p {
    width: 100%;
    /* height: 10vw; */
    margin: 0 auto;
    text-indent: 0;
}

nav p a {
    display: inline-block;
    width: 49%;
    height: 100%;
    box-sizing: border-box;
}

nav .menu-regi-box {
	position:fixed;
	left:0;
	bottom:0;
    width: 100%;
    height: 38vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bg-menu.png);
	background-position:center bottom;
    background-size: 100% auto;
    background-repeat: no-repeat; 
}

.bottom {
    position: fixed;
    bottom: -13vw;
    left: 0;
    width: 100%;
    height: 32vw;
    z-index: 999;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bg-bottom-btn_B156EB6F.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.bottom.open {
    bottom: 0;
}

.bottom .btn-go-top {
    position: absolute;
    top: -6vw;
    right: 4vw;
    width: 10vw;
    height: 10vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-go-top.png);
}

.bottom.open .btn-regi-hide {
    background-position: 0 0;
}

.bottom .btn-regi-hide {
    position: absolute;
    top: 11vw;
    right: 3vw;
    width: 6.5vw;
    height: 6.5vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-regi-show.png);
    background-position: 0 bottom;
	background-size:100% auto;
}

.bottom .btn-regi-box {
    width: 100%;
    height: 100%;
	font-size:0px;
	line-height:0px;
	zoom:1;
    text-align: center;
}

.btn-regi-box a {
	display:inline-block;
    width: 16%;
    height: 11vw;
	margin:20vw 1.6% 0;
	background-size:100% auto;
	background-repeat:no-repeat;
}

.btn-regi-box a.btn-go-reg {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-sns-1_new.png) !important;
}

.btn-regi-box a.btn-twitter-regi {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-sns-2_new.png) !important;
}

.btn-regi-box a.btn-line-regi {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-sns-3_new.png) !important;
}

.btn-regi-box a.btn-ios {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-sns-4_2_new.png) !important;
}

.btn-regi-box a.btn-google {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-sns-5_new.png) !important;
}

.menu-regi-box {
	font-size:0px;
	line-height:0px;
	zoom:1;
    text-align: center;
}

.menu-regi-box a {
	display:inline-block;
    width: 16%;
    height: 11vw;
	margin:21vw 1.6% 0;
	background-size:100% auto;
	background-repeat:no-repeat;
}

.menu-regi-box a.btn-go-reg {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-sns-1_new.png) !important;
}

.menu-regi-box a.btn-twitter-regi {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-sns-2_new.png) !important;
}

.menu-regi-box a.btn-line-regi {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-sns-3_new.png) !important;
}

.menu-regi-box a.btn-ios {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-sns-4_new.png) !important;
}

.menu-regi-box a.btn-google {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-sns-5_new.png) !important;
}

#content {
    padding-top: 14vw;
}

body.on,
html.on {
    overflow: hidden !important
}

.blind {
    width: 1px !important;
    height: 1px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: -1000% !important;
    overflow: hidden !important;
}
.section,
.section-1 {
    position: relative;
    height: 100%;
    overflow: hidden;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.section .inner,
.section-1 .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    min-width: 300px;
    transform: translateY(-50%) translateX(-50%);
    text-align: center;
}


#section0 {
    height: 143vw;
    margin-top:-0.8vw;
    background-color: #000;
    background-image: url(https://lwi.nexon.com/m_traha_jp/common/main/mobile_main_bg.jpg);
}

#section1 {
    height: 177.6vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bg-main2.jpg);
}

#section2 {
    height: 193vw;
    background-image: url(https://lwi.nexon.com/m_traha_jp/common/main/bg-news.jpg);
}

#section3 {
    height: 106vw;
    margin-top: -2px;
    /* background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bg-world.jpg); */
}

#section4 {
    height: 104vw;
    margin-top: -2px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bg-characters.jpg);
}

#section5 {
    /*height: 216vw;*/
    background-color: #ebebeb;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bg-gallery.jpg);
}

#section0 .inner {
    min-width:auto;
    height: 100%;
    text-align: center;
}
#section0 .btn_mov {
    width: 20.6vw;
    height: 16%;
    margin-top:67.6%;
}

#section0 .inner h2 {
	width:90%;
    height: 62vw;
    margin: 0px auto;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/tit-main.png);
	background-size:100% auto;
}

.main #section0 .inner p {
    /* width: 80%; */
    /* background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-down.png); */
    background-size: 100% auto;
    text-indent: 0;
    margin-top:40vw;
}

.main #section0 .inner p a, .down a, nav .inner p a{
    height: 11.2vw;
    background-repeat: no-repeat;
}
.main #section0 .inner p a.btn-ios, .down a.btn-ios, nav .inner p a.btn-ios {
    width: 33.6vw;
    margin-right:1vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-app.png);
}
.main #section0 .inner p a.btn-google, .down a.btn-google, nav .inner p a.btn-google {
    width: 37.5vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-google.png);
}

#section1 .inner {
	width:98%;
	min-width:auto;
}

#section1 .inner .gift {
    height: 160vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/img-gift_v1.png);
    background-size: auto;
    background-size: 100% auto;
    background-position: center 58.4vw;
    background-repeat: no-repeat;
}

#section1 .inner .gift a {
    position: absolute;
    bottom: 2vw;
    left: 50%;
    margin-left: -35%;
    width: 70%;
    height: 20vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-regi_v1.png);
	background-size:100% auto;
}

#section2 .inner {
	width:94%;
	min-width:auto;
}

#section2 .inner h3 {
    width: 19%;
    height: 5vw;
	margin-top: 6vw;
    margin-bottom: 4vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/tit-news.png);
	background-size:100% auto;
}

#section2 .inner .noticeContainer {
    width: 95%;
    margin: 0 auto 7vw;
}

#section2 .inner .noticeContainer a {
    text-indent: 0;
	font-weight:300;
    font-size: 3.6vw;
    color: #444;
}

#section2 .inner .noticeContainer dl {
	height:58vw;
}

#section2 .inner .noticeContainer dl dt {
    display: none;
}

#section2 .inner .noticeContainer dl dd {
    padding: 1.2vw 0;
    border-bottom: 1px solid #cdcdcd;
}

#section2 .inner .noticeContainer dl dd:last-child {
    border: 0;
}

#section2 .inner .noticeContainer dl dd span {
    display: inline-block;
    text-align: left;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

#section2 .inner .noticeContainer dl dd span.title {
    width: 75%;
}

#section2 .inner .noticeContainer dl dd a {
    text-indent: 0;
    max-width: 93%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #535353;
}

#section2 .inner .noticeContainer dl dd span.title img {
    display:inline-block;
	margin-top:4px;
	height:3.6vw;
	margin-left:1vw;
}

#section2 .inner .noticeContainer dl dd span.date {
    width: 25%;
    font-size: 2vw;
    text-align: right;
    color: #999999;
}

#section2 .inner .noticeContainer a.btn-go-notice {
    border: 1px solid #a5a5a5;
    width: 100%;
    height: 10vw;
    line-height: 10vw;
    margin-top: 4vw;
    text-indent: 0;
    font-size: 4vw;
    color: #988d80;
}

#section2 .inner .twitterContainer {
 height: 75vw;
 max-width: 100% !important;
 overflow:hidden;
    padding: 10px 10px 20px 10px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bg-twitter.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

#section2 .inner .twitterContainer iframe {
 width: calc(100% - 20px) !important;
 min-width: calc(100% - 20px) !important;
 max-width: calc(100% - 20px) !important;
    height: 71.6vw !important;
}

#section2 .inner .twitterContainer .timeline-Widget {
 max-width: 100% !important;
}

#section2 .inner .twitterContainer .twitter-timeline {
 width: 100vw !important;
 height: 70vw !important;
}

#section3 ul {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

#section3 ul li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
    display: none;
}

#section3 ul li.active {
    display: block;
}

#section3 ul li.world1 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/world1.jpg);
}

#section3 ul li.world2 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/world2.jpg);
}

#section3 ul li.world3 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/world3.jpg);
}

#section3 ul li.world4 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/world4.jpg);
}

#section3 .inner {
	min-width:auto;
    height: 87vw;
    z-index: 99;
}

#section3 .inner h3 {
    width: 47%;
    height: 6vw;
	margin-top:5vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/tit-world.png);
	background-size:100% auto;
}

#section3 .inner a {
    position: absolute;
    bottom: 0;
    left: 0.5%;
    border: 1px solid #fff;
    width: 99%;
    height: 10vw;
    line-height: 10vw;
    text-indent: 0;
    font-size: 4vw;
    color: #fff;
}

#section4 .inner {
    height: 80vw;
}

#section4 ul {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

#section4 ul li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
    display: none;
}

#section4 ul li.active {
    display: block;
}

#section4 ul li.char1 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/char1.png);
}

#section4 ul li.char2 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/char2.png);
}

#section4 ul li.char3 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/char3.png);
}

#section4 ul li.char4 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/char4.png);
}

#section4 ul li.char5 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/char5.png);
}

#section4 ul li.char6 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/char6.png);
}

#section4 ul li.char7 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/char7_46E57547.png);
}


#section4 .inner {
	min-width:auto;
	height:88vw;
    z-index: 99;
}

#section4 .inner h3 {
    width: 52%;
    height: 6vw;
	margin-top:5vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/tit-characters.png);
	background-size:100% auto;
}

#section4 .inner a {
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid #fff;
    width: 100%;
    height: 10vw;
    line-height: 10vw;
    text-indent: 0;
    font-size: 4vw;
    color: #fff;
}

#section5 .inner {
	position:relative;
	padding-top:13vw;
	padding-bottom:12vw;
	top:0;
	left:0;
	/*top:13vw;
	left:0;*/
	width:100%;
	min-width:auto;
    transform: none;
}

#section5 .inner h3 {
    width: 36%;
    height: 5vw;
	margin-bottom:7vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/tit-gallery.png);
	background-size:100% auto;
}

#section5 .inner .gallery-container {
    position: relative;
    height: 98.8vw;
}

#section5 .inner .gallery-container .swiper-slide {
    width: 90%;
}

#section5 .inner .gallery-container .swiper-slide img {
    width: 100%;
    height: auto;
}

#section5 .inner .gallery-container .gallery-swiper {
}

#section5 .inner .gallery-container .gallery-swiper a {
    text-indent: 0;
    display: inline-block;
}

#section5 .inner .gallery-container .gallery-swiper a i {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -29px;
    margin-top: -32px;
    width: 59px;
    height: 64px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-play2.png);
    background-size: contain;
}

#section5 .inner .gallery-container .gallery-swiper .swiper-slide:last-child a i {
    display: none;
}

#section5 .inner .gallery-container a.more-gallery {
    position: absolute;
    bottom: 0;
    left: 5%;
    border: 1px solid #fff;
    width: 90%;
    height: 10vw;
    line-height: 10vw;
    text-indent: 0;
    font-size: 4vw;
    color: #fff;
}

#section5 .inner .emulater {
    position:relative;
    width: 90vw;
    height: 56vw;
    margin:24vw auto 12vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-emul01.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#section5 .inner .emulater a.btn-emul {
    position:absolute;
    top:12vw;
    left:0;
    width:27vw;
    height:27vw;

}
#section5 .inner .down {
    width:90vw;
    padding:8vw 0;
    margin:0 auto;
    border-top:6px double #d0d0d0;
    border-bottom:6px double #d0d0d0;
}

#section5 .playOption {
	padding-bottom:12vw;
}

#section5 .playOption .update423 {
	position:relative;
	width:92%;
	margin:0 auto 12vw;
	padding-bottom:3px;
	border-bottom:1px solid #d0d0d0;
}

#section5 .playOption .update423 h4 {
	display:block;
	text-indent:0;
	font-size:6vw;
	color:#9c7550;
	text-align:center;
}

#section5 .playOption .update423 a {
	display:block;
	position:absolute;
	left:4%;
	top:15vw;
	z-index:2;
	width:20vw;
	height:20vw;
	background-size:100% auto;
	background-image: url('https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn_bluestacks.png');
	background-repeat:no-repeat;
}

#section5 .playOption .update423 ul {
	position:relative;
	padding:5vw 3vw 12vw 30vw;
	font-size:2.8vw;
	border-bottom:1px solid #d0d0d0;
}

#section5 .playOption .update423 ul li {
	position:relative;
	padding-left:2vw;
	color:#777;
}

#section5 .playOption .update423 ul li:before {
	content:'';
	position:absolute;
	top:1.8vw;
	left:0;
	display:block;
	width:0.7vw;
	height:0.7vw;
	background-color:#777;
}

#section5 .playOption ul.optList {
	display:table;
	width:92%;
	margin:0 auto;
}

#section5 .playOption ul.optList li {
	display:table-row;
	font-size:2.8vw;
	color:#777;
}

#section5 .playOption ul.optList li strong {
	display:table-cell;
	vertical-align:top;
	width:25%;
	text-align:center;
	font-weight:600;
	padding:0.8vw 0;
}

#section5 .playOption ul.optList li span {
	display:table-cell;
	vertical-align:top;
	width:75%;
	font-weight:300;
	padding:0.8vw 0;
}

#section5 footer {
	position:relative;
	left:5%;
	bottom:auto;
	/* padding-bottom:20vw; */
}

footer {
    position: absolute;
    bottom: 16vw;
    left: 5%;
    width: 90%;
    height: 40vw;
    border-top: 3px solid #d0d0d0;
    padding-top: 3px;
}

footer p.footer-link {
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    height: 12vw;
	font-size:0px;
	line-height:0px;
	zoom:1;
    line-height: 12vw;
    text-indent: 0;
}

footer p.footer-link a {
	display:inline-block;
    text-indent: 0;
    color: #929292;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/footer-line.jpg);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: auto 3.2vw;
    padding: 0 3%;
    font-size: 2.8vw;
}

footer p.footer-link a:last-child {
    background: none;
}

footer p.txt-copyright {
    width: 100%;
    height: 25vw;
    margin: 0 auto;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-footer3.png);
	background-position:center bottom;
	background-size:96% auto;
}

/* sub-world */
#content.sub-world {
	padding-top:0 !important;
}

.sub-world #section0 {
	padding-top:13.8vw;
	height: calc(100% - 13.8vw);
    background: none;
}

.sub-world #section0 .inner {
	position:relative;
	width: 100%;
	height: calc(100% - 13.8vw);
	min-height: 100%;
	overflow-x:hidden;
	overflow-y:auto;
	top:auto;
	left:auto;
	transform:none;
}

.sub-world #section0 .inner .swiper-container {
	height: 100%;
	background-color:#000;
}
/* 20200228 조하늘 월드 더보기 버튼 클릭 시 컨텐츠 스크롤 안 되는 문제 수정 */
.sub-world #section0 .inner .swiper-container.active {
	height: auto !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}

.sub-world #section0.menu-open {
    background: none;
}

.sub-world #section0.menu-open .inner {
	overflow:hidden;
}
.sub-world #section0 .inner:after {
	position:absolute;
	display:block;
	content:'';
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#1a1b1c;
	transform: translateX(-100%);
	transition: all 400ms ease;
	z-index:10;
}
.sub-world #section0.menu-open .inner:after {
	transform: translateX(0);
	-webkit-overflow-scrolling: touch;
}

/* 20200228 조하늘 월드 상단 메뉴 어색한 부분 전체 수정 */
.sub-world #section0 .inner button.btn-menu-world {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 23vw;
	z-index: 99;
	transition: all 400ms ease;
}

.sub-world #section0 .inner button.btn-menu-world.active {
    background-color: #1a1b1c;
}

.sub-world #section0 .inner button.btn-menu-world span {
    position: absolute;
    top: 10vw;
    left: 50%;
    width: 44vw;
    height: 4vw;
    margin-left: -22vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-menu-world-1.png);
	background-repeat:no-repeat;
    background-size: 100% auto;
    z-index: 99;
}

.sub-world #section0 .inner button.btn-menu-world.white span {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-menu-world-2.png);
}

.sub-world #section0 .inner button.btn-menu-world.active span {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-menu-world-3.png);
}

.sub-world #section0 .inner .menu-world-box {
    position: absolute;
    top: 23vw;
    left: 0;
	width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
    z-index: -1;
	transform: translateX(-100%);
	transition: all 600ms ease;
	-webkit-overflow-scrolling: touch;
}

.sub-world #section0 .inner .menu-world-box.active {
	transform: translateX(0);
	overflow-y: auto;
	z-index: 99;
}

.sub-world #section0 .inner ul.menu-world {
	display: block;
	width: 0;
	opacity: 0;
	z-index: 9;
	transition: opacity 500ms 50ms ease, width 600ms 50ms ease;
	background: #1a1b1c;
}

.sub-world #section0 .inner .menu-world-box.active  ul.menu-world {
	opacity: 1;
	width: 100%;
}

.sub-world #section0 .inner ul.menu-world li {
    height: 35.5vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/menu-world.png);
    background-size: 200vw auto;
}

.sub-world #section0 .inner ul.menu-world li.mw2 {
    background-position: 0 -35.5vw;
}

.sub-world #section0 .inner ul.menu-world li.mw3 {
    background-position: 0 -71vw;
}

.sub-world #section0 .inner ul.menu-world li.mw4 {
    background-position: 0 -106.5vw;
}

.sub-world #section0 .inner ul.menu-world li.mw5 {
    background-position: 0 -142vw;
}

.sub-world #section0 .inner ul.menu-world li.mw6 {
    background-position: 0 -177.5vw;
}


.sub-world #section0 .inner ul.menu-world li button {
    width: 100%;
    height: 100%;
}

.sub-world #section0 .inner ul.menu-world li button:hover,
.sub-world #section0 .inner ul.menu-world li button.active {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/menu-world.png);
    background-position-x: -100vw;
    background-size: 200vw auto;
}

.sub-world #section0 .inner ul.menu-world li.mw2 button:hover,
.sub-world #section0 .inner ul.menu-world li.mw2 button.active {
    background-position-y: -35.5vw;
}

.sub-world #section0 .inner ul.menu-world li.mw3 button:hover,
.sub-world #section0 .inner ul.menu-world li.mw3 button.active {
    background-position-y: -71vw;
}

.sub-world #section0 .inner ul.menu-world li.mw4 button:hover,
.sub-world #section0 .inner ul.menu-world li.mw4 button.active {
    background-position-y: -106.5vw;
}

.sub-world #section0 .inner ul.menu-world li.mw5 button:hover,
.sub-world #section0 .inner ul.menu-world li.mw5 button.active {
    background-position-y: -142vw;
}

.sub-world #section0 .inner ul.menu-world li.mw6 button:hover,
.sub-world #section0 .inner ul.menu-world li.mw6 button.active {
    background-position-y: -177.5vw;
}

/* 20200228 조하늘 월드 스와이핑 안내 스크린 수정 */
.sub-world #section0 .inner .cover-swiper.open {
    display: block;
}

.sub-world #section0 .inner .cover-swiper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.7);
}

.sub-world #section0 .inner .cover-swiper i {
    text-indent: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 202px;
    height: 123px;
    margin-top: -61.5px;
    margin-left: -101px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/img-swipe.png);
    background-size: contain;
}
/* 20200228 조하늘 월드 스와이핑 안내 스크린 수정 */

.sub-world #section0 .inner .swiper-slide {
    position: relative;
    overflow: hidden;
}

/* 20200228 조하늘 월드 반응형 깨짐 전체 수정 */
.sub-world #section0 .inner .swiper-slide p {
    position: absolute;
    top: 45.5vh;
    left: 0;
    width: 100%;
    height: 100%;
}

.sub-world #section0 .inner .swiper-slide.active p {
    z-index: 99;
    top: 0;
    text-indent: 0;
}

.sub-world #section0 .inner .swiper-slide p span {
	display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 100%;
	margin-top: 50px;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.sub-world #section0 .inner .swiper-slide p button.btn-close-world {
	opacity: 0;
	transition: opacity 300ms 400ms ease;
}

.sub-world #section0 .inner .swiper-slide.active p button.btn-close-world {
    position: absolute;
    top: 17px;
    right: 4.8vw;
    width: 6vw;
    height: 6vw;
	background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-close.png);
	background-size: 100% auto;
	opacity: 1;
}
/* 20200228 조하늘 월드 반응형 깨짐 전체 수정 */

.sub-world #section0 .inner .swiper-slide.world1 p span {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-sub-world1.png);
}

.sub-world #section0 .inner .swiper-slide.world2 p span {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-sub-world2.png);
}

.sub-world #section0 .inner .swiper-slide.world3 p span {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-sub-world3.png);
}

.sub-world #section0 .inner .swiper-slide.world4 p span {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-sub-world4_new.png);
}

.sub-world #section0 .inner .swiper-slide.world5 p span {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-sub-world5.png);
}

.sub-world #section0 .inner .swiper-slide.world6 p span {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-sub-world6.png);
}


/* 20200228 조하늘 월드 배경깨짐, 더보기 팝업 레이어 수정 */
.sub-world #section0 .inner .world-swiper .swiper-slide.world1,
.sub-world #section0 .inner .swiper-slide.world1.active p {
	background-color: #2b4c6c;
}

.sub-world #section0 .inner .swiper-slide.world1 .box-more {
    background-color: #1a3249;
    opacity: 0.9;
}

.sub-world #section0 .inner .world-swiper .swiper-slide.world2,
.sub-world #section0 .inner .swiper-slide.world2.active p {
	background-color: #19140e;
}

.sub-world #section0 .inner .swiper-slide.world2 .box-more {
    background-color: #000000;
}

.sub-world #section0 .inner .world-swiper .swiper-slide.world3,
.sub-world #section0 .inner .swiper-slide.world3.active p {
	background-color: #303234;
}

.sub-world #section0 .inner .swiper-slide.world3 .box-more {
    background-color: #161718;
}

.sub-world #section0 .inner .world-swiper .swiper-slide.world4,
.sub-world #section0 .inner .swiper-slide.world4.active p {
	background-color: #292b2d;
}

.sub-world #section0 .inner .swiper-slide.world4 .box-more {
    background-color: #161718;
}

.sub-world #section0 .inner .world-swiper .swiper-slide.world5,
.sub-world #section0 .inner .swiper-slide.world5.active p {
	background-color: #242b25;
}

.sub-world #section0 .inner .swiper-slide.world5 .box-more {
    background-color: #171b17;
}

.sub-world #section0 .inner .world-swiper .swiper-slide.world6,
.sub-world #section0 .inner .swiper-slide.world6.active p {
	background-color: #2b2424;
}

.sub-world #section0 .inner .swiper-slide.world6 .box-more {
    background-color: #1e1717;
}
/* 20200228 조하늘 월드 배경깨짐, 더보기 팝업 레이어 수정 */

.sub-world #section0 .inner .swiper-slide img {
    width: 100%;
}


.sub-world #section0 .inner .world-swiper .swiper-slide > img {
	z-index: -1;
	transition: all 500ms ease;
	transform: scale(1.25) translateY(-30px);
}


.sub-world #section0 .inner .world-swiper .swiper-slide.swiper-slide-active > img {
	opacity: 1;
	transition:all 700ms ease;
	transform: scale(1) translateY(0);
}

/* 20200228 조하늘 월드 스와이핑 iOS 깜빡임 버그 수정 */
.sub-world #section0 .inner .world-swiper .swiper-slide.swiper-slide-active.active > img {
	transform: scale(1.25) translateY(-125px);
	opacity: 0 !important;
}


.sub-world #section0 .inner .swiper-slide .box-more {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
	height: 11vw;
	padding-bottom:5px;
	background-color:#000;
	opacity:0.8;
}
/*
.sub-world #section0 .inner .swiper-slide.world1 .box-more {
    background-image: linear-gradient(transparent, #000, #000);
}

.sub-world #section0 .inner .swiper-slide.world2 .box-more {
    background-image: linear-gradient(transparent, #000, #000);
}

.sub-world #section0 .inner .swiper-slide.world3 .box-more {
    background-image: linear-gradient(transparent, #000, #000);
}

.sub-world #section0 .inner .swiper-slide.world4 .box-more {
    background-image: linear-gradient(transparent, #000, #000);
}

.sub-world #section0 .inner .swiper-slide.world5 .box-more {
    background-image: linear-gradient(transparent, #000, #000);
}

.sub-world #section0 .inner .swiper-slide.world6 .box-more {
    background-image: linear-gradient(transparent, #000, #000);
}
*/
.sub-world #section0 .inner .swiper-slide .box-more button {
    position: absolute;
    bottom: calc(4vw + 3px);
    left: 20px;
    width: 19vw;
	height: 3.5vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-more-world.png);
	background-size:100% auto;
}

.sub-world footer {
    display: none;
}

.sub-world #section0 .inner .world-swiper .swiper-slide {
    height: auto;
}

.sub-world #section0 .inner .world-swiper .swiper-slide .img-group {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: -1;
	transition: all 700ms ease;
	transform: scale(1.25) translateY(-30px);
}

.sub-world #section0 .inner .world-swiper .swiper-slide .img-group img {
    position: absolute;
    top: 0;
    left: 0;
	opacity: 0;
}

.sub-world #section0 .inner .world-swiper .swiper-slide.swiper-slide-active .img-group {
	z-index:0;
	transition: all 500ms ease;
	transform: scale(1) translateY(0);
}

.sub-world #section0 .inner .world-swiper .swiper-slide.swiper-slide-active .img-group img {
	opacity: 1;
	animation-play-state:running !important;
}

/* 20200228 조하늘 월드 스와이핑 iOS 깜빡임 버그 수정 */
.sub-world #section0 .inner .world-swiper .swiper-slide.swiper-slide-active.active .img-group {
	transform: scale(1.25) translateY(-125px);
	opacity: 0 !important;
}

.sub-world #section0 .inner .world-swiper .swiper-slide.swiper-slide-active.active .img-group img {
	animation-play-state:paused !important;
}

.sub-world #section0 .inner .world-swiper .swiper-slide .img-group img:nth-child(1) {
    animation: showImage1 5s infinite paused;
}

.sub-world #section0 .inner .world-swiper .swiper-slide .img-group img:nth-child(2) {
    animation: showImage2 5s infinite paused;
}

.sub-world #section0 .inner .world-swiper .swiper-slide .img-group img:nth-child(3) {
    animation: showImage3 5s infinite paused;
}

.sub-world #section0 .inner .world-swiper .swiper-slide .img-group img:nth-child(4) {
    animation: showImage4 5s infinite paused;
}

/* 20200228 조하늘 월드 스와이핑 이미지 3장일 때 페이드-인아웃 버그 수정 */
.sub-world #section0 .inner .world-swiper .swiper-slide.world4 .img-group img:nth-child(1) {
    animation: showImage2_1 4s infinite paused;
}

.sub-world #section0 .inner .world-swiper .swiper-slide.world4 .img-group img:nth-child(2) {
    animation: showImage2_2 4s infinite paused;
}

.sub-world #section0 .inner .world-swiper .swiper-slide.world4 .img-group img:nth-child(3) {
    animation: showImage2_3 4s infinite paused;
}

/* 20200228 조하늘 월드 스와이핑 플레이 버튼 깜빡임 버그 수정 */
.sub-world #section0 .inner .world-swiper .swiper-slide .btn-play {
	position: absolute;
	opacity:0;
    top: 49vw;
    left: 50%;
    margin-left: -32px;
    width: 65px;
    height: 65px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-play3.png);
	z-index: 5;
	transition: opacity 500ms ease 200ms, transform ease 700ms;
	transform: scale(0.7) translateY(5px)
}

.sub-world #section0 .inner .world-swiper .swiper-slide-active .btn-play {
	opacity:1;
	transform: scale(1) translateY(0)
}

/* 20200228 조하늘 월드 설명 어색한 부분 모션 수정 */
.sub-world #section0 .inner .world-swiper .swiper-slide p.txt {
	opacity: 0;
	z-index: 6;
	transition: all 600ms ease;
	transform: translateY(100px)
}

.sub-world #section0 .inner .world-swiper .swiper-slide-active p.txt {
	opacity: 1;
	transform: translateY(0)
}

.sub-world #section0 .inner .world-swiper .swiper-slide-active.active p.txt {
	transition:background 300ms ease-in-out, top 400ms ease-in-out;
	z-index:99;
}

.sub-world #section0 .inner .world-swiper .swiper-slide .box-more {
	z-index: 100;
	transition: all 550ms cubic-bezier(0.68, -0.5, 0.265, 1.55);
}

.sub-world #section0 .inner .world-swiper .swiper-slide.active .box-more {
	transform: translateY(100%)
}

.sub-world .pop-explore {
    overflow-y: hidden;
}

.sub-world .pop-explore .btn-close {
    left: 10px;
    right: 10px;
    top: 20vw;
    z-index: 100;
}

.sub-world .vr-box {
    position: absolute;
    left: 0;
    top: 35vw;
    width: 100%;
    height: 40%;
}

.sub-world .vr-box>p {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: 100;
    width: 81px;
    height: 81px;
    margin-left: -40px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/pc/indicator-swiper.png);
    text-indent: -9999px;
    animation: disappear 1s forwards;
    animation-delay: 2s;
}

.sub-world #vr {
    width: 100%;
    height: 100%;
}

.sub-world #vr .pnlm-panorama-info {
    left: 46px;
    top: 14px;
    width: 80px;
    height: 80px;
    font-size: 10px;
    background-size: 100% auto;
}

.sub-world #vr .pnlm-panorama-info .pnlm-title-box {
    font-size: 10px;
}

.sub-world .pop-explore .pano-nav {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 10;
    width: auto;
    padding: 0 10px 2px;
    margin-left: -90px;
    background: rgba(0, 0, 0, .2);
    border-radius: 12px;
    box-sizing: border-box;
}

.sub-world .pop-explore .pano-nav button {
    width: 10px;
    height: 10px;
    margin-right: 15px;
    background-color: #5d5d5d;
    border-radius: 10px;
    vertical-align: middle;
}

.sub-world .pop-explore .pano-nav button:last-child {
    margin-right: 0;
}

.sub-world .pop-explore .pano-nav button.active {
    background-color: #fff;
}

.btn-panorama {
    position: absolute;
    top: 0px;
    right: 20px;
    width: 31vw;
    height: 7.2vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-panorama.png);
    z-index: 9;
}

.btn-close {
    overflow: hidden;
    position: absolute;
    right: 0;
    top: -40px;
    width: 45px;
    height: 40px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha.nexon.com/brand/images/m/btn-close.png);
    background-size: 100% auto;
    text-indent: -9999px;
}

/* 20200228 조하늘 더보기 팝업 버튼 위치 어색한 문제 수정 */
.sub-world #section0 .inner .swiper-slide p .btn-panorama {
    top: 48px;
    transition: top 350ms ease;
}

.sub-world #section0 .inner .swiper-slide.active p .btn-panorama {
    top: 50px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-panorama.png);
}

.btn-screenshot1 {
    position: absolute;
    top: 80vw;
    left: 5vw;
    width: 165px;
    height: 27px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-screenshot2.png);
    z-index: 99;
}

.btn-screenshot2 {
    position: absolute;
    top: 130vw;
    left: 5vw;
    width: 165px;
    height: 27px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-screenshot1.png);
    z-index: 99;
}

@keyframes showImage1 {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes showImage2 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes showImage3 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes showImage4 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* 20200228 조하늘 월드 스와이핑 이미지 3장일 때 페이드-인아웃 버그 수정 */
@keyframes showImage2_1 {
    0% {
        opacity: 1;
    }

    33% {
        opacity: 0;
    }

    66% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes showImage2_2 {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 1;
    }

    66% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes showImage2_3 {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 0;
    }

    66% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* sub-characters */
.sub-characters {
    background-color: #232529;
}

.sub-characters #section0 {
    height: 100%;
    min-height: 200vw;
    /* margin-bottom: 120px; */
    background: none;
}

.sub-characters #section0 .inner {
    width: 100%;
    position: static;
    transform: translate(0);
}

.sub-characters #section0 .inner h2 {
    position: absolute;
    top: 2vw;
    left: 50%;
    margin-left: -23%;
    width: 46%;
    height: 25px;
    margin-top: 12vw;
    z-index: 9;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/tit-sub-characters.png);
}

.sub-characters #section0 .inner .swiper-container {
    min-height: 200vw;
}

.sub-characters #section0 .inner .swiper-slide img {
    width: 100%;
}

/* 20200228 조하늘 캐릭터 화면 어색한 부분 모션 수정 */
.sub-characters #section0 .inner .swiper-slide > img {
	opacity: 0;
	transition: all 900ms ease;
	transform: scale(1.25) translateX(20px) translateY(-30px);
}

.sub-characters #section0 .inner .swiper-slide.swiper-slide-active > img {
	opacity: 1;
	transform: scale(1) translateX(0) translateY(0);
}

.sub-characters #section0 .inner .swiper-slide button.btn-play {
    position: absolute;
    top: 60vw;
    right: 9vw;
    width: 12vw;
    height: 12vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-play2.png);
}

/* 20200228 조하늘 월드 설명 어색한 부분 모션 수정 */
.sub-characters #section0 .inner .swiper-slide i {
    position: absolute;
    top: 30vw;
    left: 16vw;
    width: 70vw;
	height: 70vw;
	opacity: 0;
    /* margin-left: -35vw; */
	background-size: contain;
	transition: opacity 700ms ease;
}
.sub-characters #section0 .inner .swiper-slide i.on {
	opacity: 1;
	animation: rotate 3s linear infinite;
}

.sub-characters #section0 .inner .swiper-slide.char1 i {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bar-char1.png);
}

.sub-characters #section0 .inner .swiper-slide.char2 i {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bar-char2.png);
}

.sub-characters #section0 .inner .swiper-slide.char3 i {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bar-char3.png);
}

.sub-characters #section0 .inner .swiper-slide.char4 i {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bar-char4.png);
}

.sub-characters #section0 .inner .swiper-slide.char5 i {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bar-char5.png);
}

.sub-characters #section0 .inner .swiper-slide.char6 i {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bar-char6.png);
}

.sub-characters #section0 .inner .swiper-slide.char7 i {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bar-char7.png);
}

.sub-characters #section0 .inner .swiper-pagination {
    left: 50%;
    top: 130vw;
	font-size:0;
	line-height:0;
	zoom:1;
    margin-left: -45%;
    width: 83%;
    padding-left: 7%;
    text-align: left;
}

.sub-characters #section0 .inner .swiper-pagination span {
	display:inline-block;
    width: 25%;
    height: 20vw;
    background-size: 100% auto;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_1.png);
    border-radius: 0;
    border: 0;
    margin: 0 -1%;
    padding: 0;
    outline: none;
	background-repeat:no-repeat;
	background-position: 0 0;
	background-color: transparent;
	opacity: 0;
	transform: translateY(20px);
	transition: all 400ms ease;
}

.sub-characters #section0 .inner .swiper-pagination span.on {
	opacity: 1;
	transform: translateY(0);
}

.sub-characters #section0 .inner .swiper-pagination span.char1 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_2.png);
}

.sub-characters #section0 .inner .swiper-pagination span.char2 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_3.png);
}

.sub-characters #section0 .inner .swiper-pagination span.char3 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_4.png);
}

.sub-characters #section0 .inner .swiper-pagination span.char4 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_5.png);
}

.sub-characters #section0 .inner .swiper-pagination span.char5 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_6.png);
}

.sub-characters #section0 .inner .swiper-pagination span.char6 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_7_46E57547.png);
}

.sub-characters #section0 .inner .swiper-pagination span.swiper-pagination-bullet-active {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_on_1.png);
}

.sub-characters #section0 .inner .swiper-pagination span.swiper-pagination-bullet-active.char1 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_on_2.png);
}

.sub-characters #section0 .inner .swiper-pagination span.swiper-pagination-bullet-active.char2 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_on_3.png);
}

.sub-characters #section0 .inner .swiper-pagination span.swiper-pagination-bullet-active.char3 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_on_4.png);
}

.sub-characters #section0 .inner .swiper-pagination span.swiper-pagination-bullet-active.char4 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_on_5.png);
}

.sub-characters #section0 .inner .swiper-pagination span.swiper-pagination-bullet-active.char5 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_on_6.png);
}

.sub-characters #section0 .inner .swiper-pagination span.swiper-pagination-bullet-active.char6 {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/nav-char_on_7_46E57547.png);
}

.sub-characters footer {
    position: static;
    margin: 0 auto;
    border-color: #45484e;
}

.sub-characters footer p.footer-link {
    border-color: #45484e;
}

.sub-characters footer p.footer-link a {
    color: #989a9e;
}

.sub-characters footer p.txt-copyright {
    background-size: 95% auto;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-footer4.png);
}

/* sub-characters */
.sub-gallery {
    background-color: #fff;
}

.sub-gallery #section0 {
    height: 100%;
    /* min-height: 190vw; */
    /* margin-bottom: 120px; */
    background: none;
}

.sub-gallery #section0 .inner {
    width: 100%;
    position: static;
    transform: translate(0);
}

.sub-gallery #section0 .inner {
    width: 100%;
}

.sub-gallery #section0 .inner h2 {
    width: 100%;
    height: 12vw;
    z-index: 9;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/tit-sub-gallery.png);
	background-position:center center;
    background-size: 20% auto;
    border-bottom: 2px solid #c9c9c9;
}

.sub-gallery #section0 .inner ul.gallery-box {
    overflow: hidden;
}

.sub-gallery #section0 .inner ul.gallery-box li {
    position: relative;
    width: 49.5vw;
    float: left;
    text-align: left;
}

.sub-gallery #section0 .inner ul.gallery-box li:nth-child(2n) {
    float: right;
}

.sub-gallery #section0 .inner ul.gallery-box li a {
    text-indent: 0;
}

.sub-gallery #section0 .inner ul.gallery-box li.play i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65px;
    height: 65px;
    margin-top: -52px;
    margin-left: -32px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-play3.png);
    background-size: 65px;
    background-repeat: no-repeat;
}

.sub-gallery #section0 .inner ul.gallery-box li img {
    width: 100%;
}

.sub-gallery #section0 .inner ul.gallery-box li span {
    display: inline-block;
    text-align: left;
    padding: 10px;
    font-size: 13px;
    height: 56px;
    box-sizing: border-box;
    letter-spacing: -1px;
}

.sub-gallery footer {
    position: static;
    margin: 0 auto;
	padding-top:0px;
    width: 100%;
    border-color: #45484e;
    background-color: #292a2d;
	border-top:none !important;
}

.sub-gallery footer p.footer-link {
	border-top:none;
    border-color: #45484e;
}

.sub-gallery footer p.footer-link a {
    color: #989a9e;
}

.sub-gallery footer p.txt-copyright {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-footer4.png);
    background-size: 86% auto;
}


/* sub-regi */

.sub-regi {
	background-color: #25262a;
}

.sub-regi #section0 {
    min-height: 378vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/bg-sub-regi_v2.jpg);
    background-color: #25262a;
}

.sub-regi #section0 .inner {
    width: 100%;
    position: static;
    transform: translateX(0) translateY(0);
    margin-top: 134vw;
}

.sub-regi #section0 .inner .regi-box {
	width:90%;
	margin:0 auto;
}

.sub-regi #section0 .inner h2 {
    background: none;
    height: 0;
    width: 0;
}


.sub-regi #section0 .inner ul.check-os {
    padding-top: 11vw;
    padding-bottom: 3vw;
    width: 50vw;
    margin: 0 auto;
    overflow: hidden;
}

.sub-regi #section0 .inner ul.check-os li {
    float: left;
}

.sub-regi #section0 .inner ul.check-os li:last-child {
    float: right;
}

.sub-regi #section0 .inner ul.check-os li label {
    display: inline-block;
	background-size: auto 4vw;
    background-position: 7vw 0;
    text-indent: 0;
    text-align: left;
}

.sub-regi #section0 .inner ul.check-os li label span {
    display: inline-block;
    text-indent: -99999px;
}

.sub-regi #section0 .inner ul.check-os li input+label i {
    display: inline-block;
    width: 5vw;
    height: 5vw;
    margin-top: -2px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/checkbox.png);
    background-size: 5vw auto;
}

.sub-regi #section0 .inner ul.check-os li input:checked+label i {
    background-position: 0 100%
}

.sub-regi #section0 .inner ul.check-os li input#ios+label {
    width: 17vw;
    height: 5vw;
    margin-right: 4vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-ios.png)
}

.sub-regi #section0 .inner ul.check-os li input#and+label {
    width: 27vw;
    height: 5vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-and.png)
}


.sub-regi #section0 .inner input[type=email] {
    width: 70vw;
    height: 12vw;
    border: 0;
    color: #000;
    padding-left: 10vw;
    padding-right: 10vw;
	padding-bottom:3vw;
    margin-bottom: 3vw;
    font-size: 4vw;
	text-align:center;
    background: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/input.png) 0 100% no-repeat;
    background-size: 100% auto;
}

* {
    -webkit-text-size-adjust: none;
}

.sub-regi #section0 .inner input[type=email].inp-bg-on {
    background-position: 0px -0.3vw;
}

.sub-regi #section0 .inner ul.check-agree {
    width: 88vw;
    height: 16vw;
    margin: 0 auto;
}

.sub-regi #section0 .inner ul.check-agree li {
    position: relative;
    text-align: left;
    margin-bottom: 16px;
}

.sub-regi #section0 .inner ul.check-agree li label {
    display: inline-block;
    text-indent: 0;
}

.sub-regi #section0 .inner ul.check-agree li label span {
    display: inline-block;
    text-indent: -99999px;
}

.sub-regi #section0 .inner ul.check-agree li input+label i {
    display: inline-block;
    width: 5vw;
    height: 5vw;
    margin-top: -3px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/checkbox.png);
    background-size: 5vw auto;
}

.sub-regi #section0 .inner ul.check-agree li input:checked+label i {
    background-position: 0 100%
}

.sub-regi #section0 .inner ul.check-agree li input#agree1+label {
    width: 100%;
    height: 13vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/agree1_v1.png);
	background-size:94% auto;
    background-position: 5vw 1vw;
}

.sub-regi #section0 .inner ul.check-agree li input#agree2+label {
    width: 100%;
    height: 6vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/agree2.png);
	background-size:74% auto;
    background-position: 7vw 0.8vw;
}

.sub-regi #section0 .inner ul.check-agree li a {
    position: absolute;
    width: 65px;
    height: 20px;
}

.sub-regi #section0 .inner ul.check-agree li a.link-tos {
    top: 0;
    left: 5vw;
}

.sub-regi #section0 .inner ul.check-agree li a.link-pp {
    top: 0;
    left: 28vw;
    width: 130px;
}

.sub-regi #section0 .inner .btn-regi {
    width: 35vw;
    height: 13vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-regi2.png);
	background-size:100% auto;
}

.sub-regi #section0 .inner .caution {
    position: absolute;
    width: 90vw;
    top: 217vw;
    left: 5vw;
}

.sub-regi #section0 .inner button {
    display: inline-block;
}

.sub-regi #section0 .inner .btn-caution2 {
    width: 45vw;
    height: 6vw;
    margin-right: 3vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-caution1.png);
    background-size: contain;
}

.sub-regi #section0 .inner .btn-caution1 {
    width: 35vw;
    height: 6vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-caution2.png);
    background-size: contain;
}

.sub-regi footer {
    position: static;
    margin: 0 auto;
    left: 5%;
    width: 90%;
    border-color: #45484e;
    background-color: #25262a;
}

.sub-regi footer p.footer-link {
	border-top:1px solid #45484e;
    border-color: #45484e;
}

.sub-regi footer p.footer-link a {
    color: #989a9e;
}

.sub-regi footer p.txt-copyright {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt-footer2.png);
}

/* sub-news */
.sub-news #section0 {
    height: auto;
    min-height: 850px;
    background: #f2f2f2;
}

.sub-news #section0 .inner {
    width: 100%;
    transform: translateY(0) translateX(-50%);
    top: 0;
}

.sub-news #section0 .inner h4 {
    height: 0;
}

.sub-news #section0 .inner .board-list dl {
    margin-bottom: 30px;
}

.sub-news #section0 .inner .board-list dt {
    display: none;
}

.sub-news #section0 .inner .board-list dd {
    border-bottom: 1px solid #c9c9c9;
}

.sub-news #section0 .inner .board-list dd span {
    display: inline-block;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
    vertical-align: top;
}

.sub-news #section0 .inner .board-list dd span a {
    display: inline-block;
    text-indent: 0;
    color: #535353;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.sub-news #section0 .inner .board-list dd span.title {
    width: 70%;
    text-align: left;
}

.sub-news #section0 .inner .board-list dd span.title img {
	display: inline-block;
    vertical-align: middle;
    height: 4vw;
    margin-left: 1vw;
    margin-top: -2vw;
}

.sub-news #section0 .inner .board-list dd span.date {
    width: 25%;
    font-size: 12px;
    color: #737373;
    padding: 13px 10px 10px 0;
    text-align: right;
}

.sub-news #section0 .inner .board-list dd span a strong {
    color: red;
}

.sub-news #section0 h3 {
    background: #fff;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #c9c9c9;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/tit-sub-news_v1.png);
    background-size: 111px auto;
    background-repeat: no-repeat;
    background-position: center center;
}

.sub-news #section0 .inner .board-paging {
    margin-bottom: 30px;
    height: 30px;
    text-align: center;
}

.sub-news #section0 .inner .board-paging>button {
	display:inline-block;
	vertical-align:middle;
    width: 10px;
    height: 15px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-paging.png);
    background-size: auto 30px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.sub-news #section0 .inner .board-paging>button.next {
    background-position: 100% 0;
}

.sub-news #section0 .inner .board-paging>button:hover {
    background-position: 0 100%;
}

.sub-news #section0 .inner .board-paging>button.next:hover {
    background-position: 100% 100%;
}

.sub-news #section0 .inner .board-paging p {
    display: inline-block;
    text-indent: 0;
}

.sub-news #section0 .inner .board-paging p button {
    text-indent: 0;
    padding: 0 5px;
    margin: 0 5px;
    color: #999999;
}

.sub-news #section0 .inner .board-paging p button.active {
    color: #535353;
    font-weight: bold;
}

.result0 {
    padding: 10px;
    text-align: center;
}

.sub-news #section0 .inner .search-box {
    width: 320px;
    height: 50px;
    margin: 0 auto;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/input-search.png);
    background-position: 0 100%;
    background-size: 320px auto;
}

.sub-news #section0 .inner .search-box input {
    height: 25px;
    padding: 10px 0 10px 10px;

}

.sub-news #section0 .inner .search-box input::placeholder {
    color: #d3d3d3;
}

.sub-news #section0 .inner .search-box button.btn-search {
    width: 50px;
    height: 45px;
}

.sub-news #section0 .inner .btn-box {
    display: none;
}

.sub-news footer {
    left: 5%;
    width: 90%;
    border-color: #45484e;
    background: #292a2d;
}

.sub-news.details #section0 .inner .board-details dl dt {
    padding: 10px;
    border-bottom: 1px solid #c9c9c9;
}

.sub-news.details #section0 .inner .board-details dl dt span {
    display: block;
    text-align: left;
}

.sub-news.details #section0 .inner .board-details dl dt span.title {
    font-size: 17px;
}

.sub-news.details #section0 .inner .board-details dl dt span.date {
    font-size: 12px;
}

.sub-news.details #section0 .inner .board-details dl dd {
    background: #fff;
    min-height: 450px;
    border-bottom: 1px solid #c9c9c9;
}

.sub-news.details #section0 .inner .board-details .btn-list {
    width: 122px;
    height: 51px;
    margin-top: 33px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-list.png);
}

/* popup */

.pop {
    display: none;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 26, 25, 1);
    z-index: 999;
    transition: opacity 0.3s;
}

.pop.pop-open {
    opacity: 1;
    display: block;
    cursor: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/pc/pop-close.cur), pointer;
}
.pop.pop-banner.pop-open {
    cursor: default;
}

.pop.pop-open.pop-explore {
    cursor: hand;
}


#content.sub-world .pop .pop-inner {
    position: absolute;
    top: 50%;
    left: 50%;
}


.pop .pop-inner:hover {
    cursor: default;
}

.pop .pop-inner .pop-contents {
    width: 100%;
    height: 100%;
}

.pop-char .pop-inner {
    position: absolute;
    top: 50%;
    left: 50%;
}

.pop-char .pop-inner {
    width: 80vw;
    height: 100vw;
    max-height: 700px;
    margin-left: -40vw;
    transform: translateY(-50%);
    background-color: transparent;
}

.pop-char .pop-inner .btn-close {
	position:fixed;
    top: 10px;
    right: 10vw;
}

.pop-world-video .pop-inner {
    width: 80vw;
    height: 100vw;
    max-height: 350px;
    margin-left: -40vw;
    transform: translateY(-50%);
    background-color: transparent;
}

.pop-world-video .pop-inner .btn-close {
    top: -40px;
    right: -9px;
    background-image:url(https://nxm-mt.akamaized.net/Contents/traha.nexon.com/brand/images/m/btn-close.png);
}

.pop-inner .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 43px;
    height: 43px;
    z-index: 9;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-close2.png);
}

.pop-char .pop-inner .pop-contents video {
    width: 100%;
    height: 100%;
}

.pop-char .pop-inner .pop-contents ul {
    position: relative;
    width: 100%;
    height: 100%;
}

.pop-char .pop-inner .pop-contents ul li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.pop-char .pop-inner .pop-contents ul li.active {
    display: block;
}

.pop-gallery .pop-inner,
.pop-youtube .pop-inner,
.pop-screenshot1 .pop-inner,
.pop-screenshot2 .pop-inner {
    width: 90vw;
    height: 51vw;
    margin-left: -45vw;
    margin-top: -25vw;
    background-color: #000;
}

.pop-gallery .pop-inner {
	position:fixed;
	left:50%;
	top:50%;
}

.pop-gallery .pop-inner .pop-contents ul li {
    display: none;
}

.pop-gallery .pop-inner .pop-contents ul li.active {
    display: block;
}

.pop-gallery .pop-inner .pop-contents ul li img {
    width: 100%;
    height: auto;
    background-color: #000;
}

.pop-alert .close-area {
    position: absolute;
    top: 19vw;
    right: 5vw;
	z-index:9;
    width: 6vw;
    height: 6vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/close_pop.png);
	background-repeat:no-repeat;
	background-size:100% auto;
}

.pop-alert .pop-inner {
    width: 100%;
    height: 100%;
	box-sizing:border-box;
    padding: 16vw 5vw 10vw 5vw;
    text-align: center;
}

.pop-alert .pop-inner:hover {
    cursor: default;
}

.pop-alert .pop-inner p {
    /* padding: 100px 60px 40px 60px; */
    font-size: 16px;
    text-align: left;
    color: #656565;
}


.pop-alert p.tit {
    text-indent: 0;
    margin-bottom: 15px;
	padding-bottom:5px;
    font-size: 14px;
	text-align:left;
	line-height:40px;
	color:#b9b4b2;
    border-bottom: 6px double #3c3937;
}

.pop-alert .pop-inner .pop-txt-box {
    text-align: left;
    padding-right: 15px;
	color:#848080;
}

.pop-alert .pop-inner .pop-txt-box p {
	color:#b9b4b2;
	font-weight: 700;
	text-indent:0;
	font-size:12px;
	padding-bottom:12px;
}

.pop-alert .pop-inner dl dt,
.pop-alert .pop-inner dl dd {
    text-align: left;
    font-size: 11px;
}


.pop-alert .pop-inner dl dt {
    display: block;
	color:#b9b4b2;
    font-weight: 700;
    margin: 7px 0px;
}

.pop-alert .pop-inner dl dd {
    margin-left: 6px;
}

.pop-alert .pop-inner i {
	display:none;
    position: absolute;
    top: 19vw;
    right: 5vw;
	z-index:9;
    width: 6vw;
    height: 6vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/close_pop.png);
	background-repeat:no-repeat;
	background-size:100% auto;
}

.pop-alert .scrollbar-track-y {
    width: 4px;
    background-color: rgba(0, 0, 0, 0.1);
}

.pop-alert .scrollbar-thumb {
    width: 4px;
}

.pop-screenshot1 .swiper-slide img,
.pop-screenshot2 .swiper-slide img {
    width: 100%;
    height: auto;
}

.swiper-button-next {
    width: 14px;
    height: 28px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-next2.png);
    background-size: 14px 28px;
    margin-top:-7px;
}

.swiper-button-prev {
    width: 14px;
    height: 28px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-prev2.png);
    background-size: 14px 28px;
    margin-top:-7px;
}
.pop-banner .btn-close {
    width:42px;
    height:42px;
    top:0;
    right:0;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn_banner_close.png);
}
.pop-banner .posi-close {
    position:absolute;
    width:90vw;
    max-width:530px;
    height:42px;
    transform:translateX(-50%);
    top:17vw;
    left:50%;
}
.pop-banner .pop-inner {
    position:absolute;
    top:0;
    left:50%;
    margin-left:-281px;
    width:562px;
    height:675px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/banner_collabo3.png);
    background-size: contain;
}
.pop-banner .pop-inner a {
    position:absolute;
    top:442px;
    left:50%;
    margin-left:-100px;
    width:200px;
    height:50px;
}
.pop-banner .pop-inner p {
    position:absolute;
    left:50%;
    bottom:108px;
    margin-left:-100px;
    width:200px;
    height:20px;
    text-indent: 0;
}
.pop-banner .pop-inner p input {
    vertical-align: top;
    margin-top:2px;
    margin-right:6px;
    display:inline-block;
}
.pop-banner .pop-inner p label {
    display:inline-block;
    width: 143px;
    height: 15px;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt_notoday.png);
    background-size: contain;
    text-indent: -99999px;
}


.pop-movie {
    width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgba(0, 0, 0, 0.90);
}

.pop-movie .btn-close {
    width:10vw;
    height:10vw;
    top:0;
    right:0;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn-close3.png);
}
.pop-movie .posi-close {
    position:absolute;
    width:90vw;
    height:10vw;
    transform:translateX(-50%);
    top:-15vw;
    left:50%;
}
.pop-movie .pop-inner {
    position:absolute;
    top:35vw;
    left:0;
    width:100%;
}
.pop-movie .player {
    width: 100vw;
    height: 53vw;
    margin:0 auto;
    background-color: #000;
}
.pop-movie .player iframe {
    width: 100%;
    height: 100%;
}
.pop-movie .msg {
    height: 21vw;
    margin:0 5vw;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt2_mov_0924_B156EB6F.png);
    background-size: contain;
}
.pop-movie .btns {text-align: center;}
.pop-movie .btns a {
    max-width: 491px;
    width: 43vw;
    height: 8.6vw;
    margin:0 1px;
    text-indent: -9999px;
    overflow: hidden;
}
.pop-movie .btns .btn_line {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn_line.png);
    background-size: contain;
}
.pop-movie .btns .btn_go {
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/btn_go.png);
    background-size: contain;
}
.pop-movie .today_chk {
    position: relative;
    width: 42vw;
    height: 6vw;
    display: block;
    text-indent: 0;
    margin-top:4vw;
}

.pop-movie .today_chk input {
    width: 3.6vw;
    height: 3.6vw;
    display: inline-block;
    background-color: #fff;
    margin-right:2px;
    vertical-align: top;
    border:0;
}
.pop-movie .today_chk label {
    display:inline-block;
    width: 35vw;
    height: 7vw;
    background-image: url(https://nxm-mt.akamaized.net/Contents/traha-jp.nexon.com/launch/images/mobile/txt_notoday2.png);
    background-size: contain;
    text-indent: -9999px;
}

@media (min-width:460px) {
    .emul-inner a {
        float: left;
    }

    .emul-inner p {
        float: left;
    }

    .pop-alert p.tit {
        font-size: 24px;
        margin-bottom: 50px;
    }

    .pop-alert .pop-inner dl dt,
    .pop-alert .pop-inner dl dd {
        font-size: 14px;
    }
}

@media (min-width:600px) {
    .bottom {
        background-position: 0 0;
    }

}
@media (max-height:600px) {
    .pop.pop-banner {
        position:absolute;
        overflow-x:hidden !important;
    }
}


@keyframes rotate {
    to {
        transform: rotate(0)
    }

    from {
        transform: rotate(-360deg)
    }
}


@keyframes disappear {
    0% {opacity:1;}
    to {opacity:0;}
}