/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
*{font-family:'Noto Sans TC',sans-serif;}
html { font-family:'Noto Sans TC',sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }

progress { vertical-align: baseline; }

template, [hidden] { display: none; }

a { background-color: transparent; }

a:active, a:hover { outline-width: 0; }

abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }

dfn { font-style: italic; }

h1 { font-size: 2em; margin: 0.67em 0; }

mark { background-color: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

img { border-style: none; }

svg:not(:root) { overflow: hidden; }

code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

figure { margin: 1em 40px; }

hr { box-sizing: content-box; height: 0; overflow: visible; }

button, input, select, textarea { font: inherit; }

optgroup { font-weight: bold; }

button, input, select { overflow: visible; }

button, input, select, textarea { margin: 0; }

button, select { text-transform: none; }

button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; }

[disabled] { cursor: default; }

button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

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

button:-moz-focusring, input:-moz-focusring { outline: 1px dotted ButtonText; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }

textarea { overflow: auto; }

[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"] { -webkit-appearance: textfield; }

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* unit========================================= */
.navigation nav .wrap .ro_logo, .navigation nav .wrap .fb, .navigation nav .wrap .baha, .navigation .wrap .title_s, #homePage .topBox > .wrap h1 a, #homePage .topBox > .wrap h2, #homePage .topBox > .wrap h3, #homePage .topBox > .wrap span, #homePage .topBox .titleBox > a, #updatePage .topBox h1, #updatePage .crystal .titleBox .intro, #updatePage .crystal .box, #updatePage .crystal .exchange01, #updatePage .crystal .exchange02, #eventPage .topBox h1, #eventPage .content .event01, #eventPage .content .event02, #eventPage .content .event03, #eventPage .content .event04, #eventPage .content .event05, #eventPage .content .event06, #eggPage .topBox h1 { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: transparent; }

#tabMenu > a, .inner_tabMenu > a { display: inline-block; font-family:'Noto Sans TC',sans-serif; vertical-align: top; margin-right: -4px; *vertical-align: auto; *zoom: 1; *display: inline; }

nav .goTop { text-indent: 100%; white-space: nowrap; overflow: hidden; }

.tip_red{color:#B9100A;}

#homePage .topBox .ch, #homePage .topBox .ro_logo, #homePage .topBox .titleBox > a, .monsterList ol > li h6, #eventPage .content .btn01, #eventPage .content .btn02 { position: absolute; }

.navigation nav .wrap, .navigation nav .wrap > a, #tabMenu > a, .inner_tabMenu, .inner_tabMenu > a, .btn_01, #updatePage .content, .monsterList ol, .monsterList ol > li, #updatePage .crystal .titleBox p, #updatePage .crystal h5 span, .missionList, #eventPage .content .btn01, #eventPage .content .btn02, #eggPage .content, #eggPage .itemList li span { text-align: center; }

.wrap, #updatePage .topBox h1, #updatePage .crystal .titleBox .intro, #updatePage .crystal .box, #updatePage .crystal .exchange01, #updatePage .crystal .exchange02, #eventPage .topBox h1, #eventPage .content .event01, #eventPage .content .event02, #eventPage .content .event03, #eventPage .content .event04, #eventPage .content .event05, #eventPage .content .event06, #eventPage .content .noticeBox, #eggPage .topBox h1, #eggPage .newItem, #eggPage .itemList { margin-left: auto; margin-right: auto; }

#updatePage .content:after, #eggPage .content:after { content: ''; display: block; position: absolute; transition: all .3s; }

strong, .btn_01, .btn_02 { font-family:'Noto Sans TC',sans-serif; font-weight: bold; }

#updatePage .update04 p{width:90%;text-align:left;line-height:1.5;margin:0 auto; }

h1, h2, h3, h4, h5, h6 { font-family:'Noto Sans TC',sans-serif; }

.navigation nav .wrap .ro_logo, .navigation .wrap .title_s, .btn_01, #homePage .topBox, #updatePage .titleBox h3, #updatePage .topBox h1, #updatePage .dungeon .titleBox h3, #updatePage .crystal .titleBox .intro, #updatePage .crystal .box, #updatePage .crystal .exchange01, #updatePage .crystal .exchange02, #eventPage .topBox h1, #eventPage .content .btn01, #eventPage .content .btn02, #eventPage .content .event01, #eventPage .content .event02, #eventPage .content .event03, #eventPage .content .event04, #eventPage .content .event05, #eventPage .content .event06, #eggPage .topBox h1, #eggPage .titleBox h3 { background-repeat: no-repeat; background-size: 100% auto; }

.wrap { position: relative; clear: both; width: 100%; }
@media (min-width: 765px) { .wrap { width: 1280px; }#updatePage .update04 p{width:90%;text-align:center; } }

/* myReset========================================= */
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body {color: #92a5c3; min-width: 320px; line-height: 1; }
@media (min-width: 765px) { html, body { min-width: 1280px; font-size: 35px; } }

h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; line-height:1.1; color: white; }

h1 { font-size: 0.46875rem; }

h2 { font-size: 1.125rem; }

h3 { font-size: 0.9375rem; }

h4 { font-size: 0.75rem; }

h5 { font-size: 0.6rem;color:#830000; }

h6 { font-size: 0.8rem; font-weight:900; margin-top:0.9rem; margin-bottom:0.5rem; color:#830000; }

table tbody tr:hover{background-color:#fff;color:#830000;}

.white{color:#fff;}

p, li, span { padding: 0; font-size: 0.3125rem; color:#585858;}
@media (min-width: 765px) { p, li, span { font-size: 16px; line-height: 1.1; } h6 { font-size: 1.2rem;} }

p { margin: 10px 0; }

ul { padding: 0; margin: 0; list-style: none; }
ol{list-style:decimal;}

a { text-decoration: none; color: #c71f1f; outline: none; cursor: pointer; }

input, button, select, textarea, option { outline: none; border: none; border: 1px solid rgba(128, 128, 128, 0.5); color: #555; }

input[type="text"], input[type="email"], input[type="number"], input[type="file"], input[type="password"] { line-height: 2; font-size: 0.40625rem; margin-bottom: 0.3125rem; text-align: center; letter-spacing: 1px; width: 100%; }
@media (min-width: 765px) { input[type="text"], input[type="email"], input[type="number"], input[type="file"], input[type="password"] { font-size: 18px; margin-right: 20px; } }

input[type="file"] { line-height: 1; }

input:focus, select:focus, textarea:focus { color: #1b86da; border-color: rgba(27, 134, 218, 0.4); border-width: 2px; }

select { border: 1px solid rgba(128, 128, 128, 0.5); appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url("../img/arrow2.png") no-repeat scroll right center transparent; background-size: 0.83333rem auto; background-position: 98% center; padding-right: 20px; padding-left: 10px; }

select::-ms-expand { display: none; }

footer { background-color: #f7f7f7; height:200px;}

@media (min-width: 765px) { footer { height:120px; } }

.color01 { color: #c31919; }

.color02 { color: #0e4168; }

.text-center { text-align: center; }

.text-left { text-align: left; }

.text-right { text-align: right; }

.text-justify { text-align: justify; }

.container { margin-right: auto; margin-left: auto; }

@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
.container-fluid { margin-right: auto; margin-left: auto; }

.row { overflow: hidden; clear: both; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; }

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; }

.col-xs-12 { width: 100%; }

.col-xs-11 { width: 91.66666667%; }

.col-xs-10 { width: 83.33333333%; }

.col-xs-9 { width: 75%; }

.col-xs-8 { width: 66.66666667%; }

.col-xs-7 { width: 58.33333333%; }

.col-xs-6 { width: 50%; }

.col-xs-5 { width: 41.66666667%; }

.col-xs-4 { width: 33.33333333%; }

.col-xs-3 { width: 25%; }

.col-xs-2 { width: 16.66666667%; }

.col-xs-1 { width: 8.33333333%; }

@media (min-width: 768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; }
  .col-sm-12 { width: 100%; }
  .col-sm-11 { width: 91.66666667%; }
  .col-sm-10 { width: 83.33333333%; }
  .col-sm-9 { width: 75%; }
  .col-sm-8 { width: 66.66666667%; }
  .col-sm-7 { width: 58.33333333%; }
  .col-sm-6 { width: 50%; }
  .col-sm-5 { width: 41.66666667%; }
  .col-sm-4 { width: 33.33333333%; }
  .col-sm-3 { width: 25%; }
  .col-sm-2 { width: 16.66666667%; }
  .col-sm-1 { width: 8.33333333%; } }
@media (min-width: 992px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }
  .col-md-12 { width: 100%; }
  .col-md-11 { width: 91.66666667%; }
  .col-md-10 { width: 83.33333333%; }
  .col-md-9 { width: 75%; }
  .col-md-8 { width: 66.66666667%; }
  .col-md-7 { width: 58.33333333%; }
  .col-md-6 { width: 50%; }
  .col-md-5 { width: 41.66666667%; }
  .col-md-4 { width: 33.33333333%; }
  .col-md-3 { width: 25%; }
  .col-md-2 { width: 16.66666667%; }
  .col-md-1 { width: 8.33333333%; } }
@media (min-width: 1200px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; }
  .col-lg-12 { width: 100%; }
  .col-lg-11 { width: 91.66666667%; }
  .col-lg-10 { width: 83.33333333%; }
  .col-lg-9 { width: 75%; }
  .col-lg-8 { width: 66.66666667%; }
  .col-lg-7 { width: 58.33333333%; }
  .col-lg-6 { width: 50%; }
  .col-lg-5 { width: 41.66666667%; }
  .col-lg-4 { width: 33.33333333%; }
  .col-lg-3 { width: 25%; }
  .col-lg-2 { width: 16.66666667%; }
  .col-lg-1 { width: 8.33333333%; } }

.hide{display:none;}

#topBar { position: fixed; z-index: 9999999999; height: 35px; width: 100%; }

header { height: 64px; width: 100%; position: fixed; top: 0; left: 0; z-index: 99999; }

.hamburger { display: block; width:40px; height: 40px; cursor: pointer; position: absolute; top:1.7rem; right: 15px; user-select: none; z-index: 999999; transition: all .3s; }
.hamburger i, .hamburger i:before, .hamburger i:after { box-shadow: 1px 1px 0 rgba(254, 235, 181, 0.8) inset, 1px 1px 0 rgba(0, 0, 0, 0.5); bbackground-color:#ffba27; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjk0OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYmEyNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-linear-gradient(45deg, #f0b948, #ffba27); background-image: -webkit-linear-gradient(45deg, #f0b948, #ffba27); background-image: linear-gradient(45deg, #f0b948, #ffba27); position: absolute; width: 100%; height: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; transition: all .5s; left: 0; }
.hamburger i:before, .hamburger i:after { content: ''; }
.hamburger i { top: 50%; }
.hamburger i:before { top: -10px; }
.hamburger i:after { top: 10px; }
@media (min-width: 765px) { .hamburger { display: none; } }
.hamburger.on { top:1.8rem; right:2.2rem; }
.hamburger.on i { background-image: none; background-color: transparent; box-shadow: none; }
.hamburger.on i:before, .hamburger.on i:after { background-color: #ffba27; box-shadow: 1px 1px 0 rgba(254, 235, 181, 0.8) inset, 1px 1px 0 rgba(0, 0, 0, 0.5); background-color: #ffba27; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjk0OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYmEyNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-linear-gradient(45deg, #f0b948, #ffba27); background-image: -webkit-linear-gradient(45deg, #f0b948, #ffba27); background-image: linear-gradient(45deg, #f0b948, #ffba27); transform-origin: right; }
.hamburger.on i:before { transform: rotate(-45deg) translateY(-6px); -moz-transform: rotate(-45deg) translateY(-6px); -ms-transform: rotate(-45deg) translateY(-6px); -webkit-transform: rotate(-45deg) translateY(-6px); transform: rotate(-45deg) translateY(-6px); }
.hamburger.on i:after { transform: rotate(45deg) translateY(6px); -moz-transform: rotate(45deg) translateY(6px); -ms-transform: rotate(45deg) translateY(6px); -webkit-transform: rotate(45deg) translateY(6px); transform: rotate(45deg) translateY(6px); }

.outer{width:100%;height:1.5rem;position:fixed;top:0;left:0;z-index:999;font-size:16px;border-bottom:2px solid #fdebb3; text-align:center;background-color:rgba(37,9,7,0.9);}
.outer .download .ro{display:inline-block;position:absolute;width:1.3rem; height:1.2rem;left:0.3rem;top:0.1rem;background-size:100%; background-image: url(../img/ro_logo.png);background-repeat:no-repeat;background-position:center center;text-indent:-999px;overflow: hidden;}
.outer .download .title_s{display:inline-block;position:absolute;width:2.1rem;height:1.2rem;background-size:100%; background-image: url(../img/title_s.png);background-repeat:no-repeat;overflow:hidden;line-height:200px;top:0.28rem;left:1.8rem;}
.outer .game,.outer .signin,.outer .billing{display:inline-block;position:absolute; width:1.8rem; text-align:center;border-right:1px solid #F7F580;font-size:0.3rem;letter-spacing:2px;color:#F7F580;font-weight:500;top:0.6rem;}
.outer .signin{border:none;left:8rem;}.outer .game{left:4.2rem;}.outer .billing{left:6.1rem}

.navigation nav .wrap br{display:none;}
.navigation { opacity: 0; position: fixed; right: 0; transition: all .3s; background-color: rgba(0, 0, 0, 0.8); width:5.5rem; height: 110vh; }
.navigation nav { position: relative; padding-top: 2.29167rem; }
.navigation nav .wrap { padding-top:0.8rem;}
.navigation nav .wrap > a,.fb_eventLink { font-size:0.3rem;border-bottom:1px dashed rgba(225,225,225,0.5);padding-bottom:0.1rem;display: block; color: #fff; width:100%; line-height:0.75rem;margin-bottom:0.25rem; font-weight:bold; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
.navigation nav .wrap .fb_eventList{ width:100%;margin-bottom:0.1rem;}.navigation nav .wrap .fb_eventList li a{display:block;width:100%;height:0.8rem;line-height:0.8rem; font-size:0.4rem; color:rgba(225,225,225,0.7);text-align:center;}
#fbBox a:hover{color:rgba(225,225,225,1.0);}
.navigation nav .wrap > a.on { -webkit-filter: brightness(1.4); filter: brightness(1.4); }
.outer a:hover,.navigation nav .wrap > a:hover { -webkit-filter: brightness(1.2); filter: brightness(1.2); }
.navigation nav .wrap .ro_home,.navigation nav .wrap .billing,.navigation nav .wrap .fb, .navigation nav .wrap .baha {border:none;background-position: center; background-repeat: no-repeat; background-size: 100%; width: 0.83333rem;}
.navigation nav .wrap .ro_home{ display:none;background-image:url('../img/btn_home.png');}.navigation nav .wrap .billing{display:none;background-image:url('../img/btn_stored.png');}.navigation nav .wrap .fb { display:inline-block;background-image: url('../img/btn_fb.png '); margin-right: 0.10417rem;}.navigation nav .wrap .baha { display:inline-block;background-image: url('../img/btn_baha.png '); margin-right: 0; }
@media (min-width: 765px) {
  .wrap{height:90px;}
  .outer{width:1280px;height:0;top:37px;left:50%;margin-left:-640px;font-size:16px;position:absolute;border:none;}
  .outer .download .ro{width: 107px;top:50px;left:58px;height: 67px;}.outer .download .title_s{width:159px;height:64px;top:50px;left:260px;}
  .outer .game,.outer .signin{font-size:16px;font-weight:500;top:155px;width:80px;border:none;}.outer .game{left:25px;}.outer .signin{left:130px;}.outer .billing{display:none;}
  .navigation { position: fixed; top:37px;opacity:1; width: 100%; height:100px; background-color: rgba(0, 0, 0, 0.8); z-index:998;}
  .navigation nav {padding-top: 18px;background-color: transparent;position: relative;}.navigation nav .wrap br{display:block;}
  .navigation nav .wrap {width: 1280px;position: absolute;left: 50%;margin-left: -640px;box-sizing: border-box;padding-left: 435px;padding-top:4px;}#fbBox{display:inline-block; height:200px;}
  .navigation nav .wrap > a,.fb_eventLink {display: inline-block;font-size: 14px;color:rgba(255,255,255,0.70); width: 130px;height: 60px;overflow: hidden;z-index: 9999;line-height: 1.5em;font-weight: 600;border-right: 1px dashed  rgba(158,158,158,0.6);border-bottom:none;padding-top:5px;}.navigation nav .wrap > a.event{line-height:40px;}.navigation nav .wrap > a:hover,now{color:rgba(192,198,223,1.0);}.navigation nav .wrap .fb_eventLink{border-right:none;}
  .navigation nav .wrap .fb_eventList{ width:150px;background-color: rgba(0, 0, 0, 0.8);position:absolute;top:80px;right:0px;}.navigation nav .wrap .fb_eventList li a{display:block;height:40px;border-bottom:1px solid rgba(225,225,225,0.2);font-size:14px;line-height:40px;}
  .navigation nav .wrap .ro_home,.navigation nav .wrap .billing,.navigation nav .wrap .fb, .navigation nav .wrap .baha { width: 1.1rem;border:none;line-height:4rem;position:absolute;top:150px;}
  .navigation nav .wrap .billing{display:inline-block; left:25px;}.navigation nav .wrap .ro_home{display:inline-block;left:75px;}.navigation nav .wrap .baha{left:125px;}.navigation nav .wrap .fb{left:175px;}
}

.navigation.show { opacity: 1; }
.navigation.hide { opacity: 0; overflow: hidden; right: -6rem; }
.navigation .wrap { position: relative; }
.navigation .wrap .title_s { display: none; }
@media (min-width: 765px) { .navigation .wrap .title_s { display: block; width: 171px; height: 83px; background-image: url('../img/title_s.png '); margin-left: 12px; margin-bottom: 20px; }
  .navigation .wrap .title_s.on { background-color: transparent; } }

nav .goTop { position: fixed; right: 47px; bottom: 20px; background-image: url('../img/btn_pagetop.png '); width: 40px; height: 40px; background-size: 100% auto; }
@media (min-width: 765px) { nav .goTop { right: 25px; bottom: 30px; } }

@media (min-width: 765px) { #homePage .navigation { background-color: transparent; }
  #homePage .navigation nav { padding-top: 45px; padding-right: 23px; }
  #homePage .navigation nav > .wrap { text-align: right; }
  #homePage .navigation nav > .wrap .homepage, #homePage .navigation nav > .wrap .ro_logo, #homePage .navigation nav > .wrap .title_s, #homePage .navigation nav > .wrap .update, #homePage .navigation nav > .wrap .event, #homePage .navigation nav > .wrap .egg, #homePage .navigation nav > .wrap .signin, #homePage .navigation nav > .wrap .billing, #homePage .navigation nav > .wrap .signin_tutorial, #homePage .navigation nav > .wrap .billing_tutorial { display: none; } }
@media (min-width: 1250px) { #homePage { text-align: center; } }
#homePage nav .goTop { display: none; }


/* codeBox */
.codeBox { border-radius: 4px; border-right: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; box-shadow: 1px 1px 0 #d8d8d8 inset; background-color: #f9f9f9; margin-bottom: 0.3125rem; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.codeBox .img { border: none !important; display: block; width: 73px; height: 63px; background-image: url(http://upload.gnjoy.com.tw/uploads/2016/08/31/recaptcaha.jpg); position: absolute; top: 2px; right: 5px; z-index: 800; }
.codeBox .img > a { display: block; width: 37px; height: 20px; position: absolute; text-indent: 100%; overflow: hidden; font-size: 12px; }
.codeBox .img > a:hover { border-bottom: 1px rgba(128, 128, 128, 0.5) solid; }
.codeBox .img .terms { bottom: 0; right: 0; }
.codeBox .img .privacy { bottom: 0; left: 0; }
.codeBox > div { width: 180px; max-width: 100%; height: 66px; overflow: hidden; }
.codeBox .gc-reset { -webkit-transform: scale(0.89);transform: scale(0.89);-webkit-transform-origin: 0 0;transform-origin: 0 0; }
@media (min-width: 765px) { .codeBox { width: 200px; } }
.codeBox.thin { min-width: 215px; width: 100%; height: 40px; position: relative; overflow: hidden; }
.codeBox.thin .img { width: 87px; height: 40px; background-size: 55px auto; background-repeat: no-repeat; top: 2px; right: 5px; }
.codeBox.thin .img > a { display: block; width: 37px; height: 18px; position: absolute; left: 53px; top: 4px; text-indent: inherit; font-size: 12px; color: gray; -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); }
.codeBox.thin .img > a:nth-child(2) { width: 45px; top: 20px; left: 53px; }
.codeBox.thin .img .terms { bottom: 0; right: 0; }
.codeBox.thin .img .privacy { bottom: 0; left: 0; }
.codeBox.thin > div { height: 39px; }
.codeBox.thin > div:nth-child(2) { height: 38px; position: absolute; top: 1px; overflow: hidden; }
.codeBox.thin .gc-reset { position: absolute; left: 0; top: -13px; }

/* tabMenu */
#tabMenu { position: relative; z-index: 1; margin-bottom: 0;box-sizing:border-box;padding-left:0.63rem; }
@media (min-width: 765px) {#tabMenu { margin: 0 auto; width:1280px; padding-left:1px;background-size: auto;} }

#tabMenu > a { 
	vertical-align: bottom; height:1.5rem; line-height:1.5em;color: #c5d3d8;margin-right:-0.35rem; background-size: auto 1.5625rem; background-position: left top; font-family:'Noto Sans TC',sans-serif; border: 2px solid #343734;font-weight: bold; 
	background: #a5a5a5; /* Old browsers */background: -moz-linear-gradient(top, #a5a5a5 0%, #0e0e0e 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top, #a5a5a5 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, #a5a5a5 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a5a5a5', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */4}
#tabMenu > a:last-child { border-right: 1px solid black; }
#tabMenu > a.on {
	color: #ffeebb; text-shadow: -1px -1px 1px #cc342c,-1px -1px 1px #cc342c,1px 1px 1px #cc342c,-1px -1px 1px #cc342c;border:2px solid #981913;background: #ff8a7f; /* Old browsers */background: -moz-linear-gradient(top, #ff8a7f 0%, #cf0404 42%); /* FF3.6-15 */background: -webkit-linear-gradient(top, #ff8a7f 0%,#cf0404 42%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, #ff8a7f 0%,#cf0404 42%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8a7f', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */ }
@media (min-width: 765px) {
  #tabMenu > a {height:83px; font-weight:600;box-sizing:border-box;margin-right:-12px;}}
  #tabMenu > a:hover {
	border:2px solid #981913;color: #ffeebb;background: #ff8a7f; /* Old browsers */
	background: -moz-linear-gradient(top, #ff8a7f 0%, #cf0404 42%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ff8a7f 0%,#cf0404 42%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ff8a7f 0%,#cf0404 42%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8a7f', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */ } 
.inner_tabOuter{display: block; background-color:rgba(255,255,255,0.40);padding:30px 0 20px 0;}
.inner_tabMenu { position: relative; margin-bottom: 0.6rem; z-index: 1; }
@media (min-width: 765px) { .inner_tabMenu { margin-bottom: 40px; } }
.inner_tabMenu > a { vertical-align: bottom; width:2.4rem; font-size:0.28rem; padding-top: 0.20833rem; padding-bottom: 0.20833rem; color:#616161; margin-right: -2px; margin-left: 0; border: 4px solid #616161; }
.inner_tabMenu > a.on,.inner_tabMenu > a:hover { border-color:#610102;color:#fff;background-color:rgba(183,35,37,0.80) ; }
@media (min-width: 765px) { .inner_tabMenu > a { font-size:14px; width:130px; padding: 8px; line-height: 40px;} }

.wrap { padding: 0 0.41667rem; }
@media (min-width: 765px) { .wrap { padding: 0; } }

@media (min-width: 765px) { .sp { display: none; } }

.pc { display: none; }
@media (min-width: 765px) { .pc { display: block; } }

.btn_01 { color: white; font-size: 0.625rem; display: block; width: 5.97917rem; height: 1.77083rem; line-height: 1.77083rem; letter-spacing: 2px; background-image: url('../img/btn_01.png'); text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); user-select: none; }
@media (min-width: 765px) { .btn_01 { font-size: 24px; width: 287px; height: 85px; line-height: 80px; }
.btn_01:hover { -webkit-filter: brightness(1.1); filter: brightness(1.1); } }
.btn_02 { border: none; background-color: #eb3669; color: white; user-select: none; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; font-size: 0.5625rem; padding: 0.41667rem 0.83333rem; text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
.btn_02:hover { -webkit-filter: brightness(1.2); filter: brightness(1.2); }
@media (min-width: 765px) { .btn_02 { font-size: 24px; padding: 20px 50px; letter-spacing: 2px; } }

/*首頁*/
.downloadBox{ width:100%;z-index:100; position:fixed; top:0;left:0px;height:1.5rem; border-bottom:2px solid #fdebb3; text-align:center;background-color:rgba(37,9,7,0.9);}
.downloadBox h1{display:none;}
.downloadBox a{ display:inline-block; letter-spacing:0.06rem; font-size:0.4rem;text-align:center;color: #fdebb3;font-weight:500;border-right:1px solid #fdebb3;padding-right:0.5rem;}
.downloadBox a:nth-child(2){margin-left:0.6rem;}
.downloadBox a:last-child{display:inline-block;border-right:none;}
@media (min-width: 765px) {
	header .outer .download,.downloadBox{ width:241px;height:210px; border-bottom:none; background:url(../img/downloadBox.png) no-repeat left top;position:absolute;left:10px;top:-35px;}
  .downloadBox h1{display:block;}
  .downloadBox h1 a{width:106px;height:67px;background: url(../img/ro_logo.png) no-repeat center center;top:55px;left:59px;overflow: hidden;line-height:200px;}
	.downloadBox a{border:none;font-size:16px;display:inline-block; letter-spacing:2px;position:absolute;color:#F7F580;padding-right:0;} 
	.downloadBox a:nth-child(2){margin-left:0px;left:30px;bottom:38px;}.downloadBox a:nth-child(3){right:38px;bottom:38px;}
	.downloadBox a:last-child{display:none;}
}
#homePage *{transition:all 0.3s;}
#homePage { width: 100%;overflow:hidden;background-size:cover; background-color:#1a0000; background-repeat:no-repeat;background-attachment:fixed;background-position:top center;}
#homePage .topBox { position:relative;width:100%;height:15rem;overflow:hidden;border:1px #fff;margin:1.5rem auto 0 auto; background:url(../img/bg_sp.jpg) no-repeat top center;background-size:100%;}
#homePage .topBox > .wrap {width:100%;height: auto;position: absolute;left: 0;top:0;}
@media (min-width: 765px) {
	#homePage{height:880px;background-image:url(../img/bg.jpg);}
	#homePage .topBox { position:relative;width:1280px;height:870px; margin:35px auto 0 auto;background:url(../img/img_red.png) no-repeat top center;}
}

#homePage .topBox .titleBox h2,#homePage .topBox .titleBox h3{overflow:hidden;text-indent:-999;}
#homePage .topBox .titleBox h2{display:block;width:100%;height:2.45rem;background: url(../img/title_sp.png) no-repeat top center; background-size:100%;position:relative;margin:1.2rem auto 0 auto;}
#homePage .topBox .titleBox .boy,#homePage .topBox .titleBox .girl{position:absolute;background-repeat: no-repeat;}#homePage .topBox .titleBox .boy{z-index:1; top:3.39rem;left:1rem; width:5.8rem;height:9.8rem;background-size:100%; background-image:url(../img/boy.png);}#homePage .topBox .titleBox .girl{right:1.1rem;top:4.45rem;z-index:0; width:4.1rem;height:8.1rem;background-size:100%; background-image:url(../img/girl.png);}
@media (min-width: 765px) {
	#homePage .topBox .titleBox h2{width:670px;height:165px;position:relative;background: url(../img/title.png) no-repeat; background-position:-4px top;margin:37px auto 0px auto;}
  #homePage .topBox .titleBox .boy{z-index:1; top:180px;left:350px; width:396px;height:668px;}#homePage .topBox .titleBox .girl{right:356px;top:260px;z-index:0; width:282px;height:565px;}
}

#homePage .event_01,#homePage .event_02,#homePage .event_03,#homePage .event_04,#homePage .event_05,#homePage .event_06{display:block; position:absolute;z-index:10;width:2rem; height:2.99rem;background-repeat:no-repeat;background-size:100%;overflow:hidden;line-height:600;}
#homePage .event_01{top:3.6rem;left:-0.2rem;background-image:url(../img/btn/e_01.png);}#homePage .event_02{top:6.65rem;left:-0.2rem;background-image:url(../img/e_02.png);}#homePage .event_03{top:9.8rem;left:-0.2rem;background-image:url(../img/e_03.png);}#homePage .event_04{top:3.6rem;right:-0.2rem;background-image:url(../img/e_04.png);}#homePage .event_05{top:9.8rem;right:-0.2rem;background-image:url(../img/btn/e_06.png);}
.fb_event{width:3rem;height:2.8rem;border:2px solid #fdebb3; background-color:rgba(224,80,80,0.9);position:absolute;right:-1.5rem;top:9.9rem;overflow:hidden;z-index:5;padding-top:0.2rem;}
.fb_event li a{ display:block; width:100%;text-align:center; color:#fff;}.fb_event li{margin:0 auto;width:90%;height:1.2rem;line-height:1rem; border-bottom:1px solid #da6d6c}.fb_event li:last-child{border-bottom:none;}
.list_hover{right:1.75rem;}
.fb_event li a:hover{opacity:0.8;}
#homePage .event_06{top:6.65rem;right:-0.2rem;background-image:url(../img/btn/e_05.png);}

@media(min-width:765px){
	#homePage .event_01,#homePage .event_02,#homePage .event_03,#homePage .event_04,#homePage .event_05,#homePage .event_06{width:159px; height:239px;}
	#homePage .event_01{top:230px;left:192px;}#homePage .event_02{top:332px;left:20px;}#homePage .event_03{top:480px;left:192px;}#homePage .event_04{top:230px;right:192px;}#homePage .event_05{top:332px;right:20px;}#homePage .event_06{top:480px;right:192px;}
  .fb_event{width:142px;height:150px;border:none; background-color:transparent; background-image:url(../img/e_06_list.png);background-position:center bottom; right:29.5px;top:450px;z-index:0;}
  .fb_event li{margin:0 auto;width:90%;border-bottom:1px solid #da6d6c;height:55px;line-height:52px;}.fb_event li:last-child{border-bottom:none;}
  .list_hover{top:560px;}
}

#homePage .linkBtn{position:absolute;right:2.85rem; top:13.2rem;z-index:100;}
#homePage .linkBtn a{width:1.1rem;height:1.1rem;background-repeat:no-repeat;background-size:100%;overflow:hidden;line-height:200px;display:inline-block;margin-right:3px;}
#homePage a:hover{ -webkit-filter: brightness(1.2); filter: brightness(1.2);}
#homePage .linkBtn a.billing{ display:none; background-image: url(../img/btn_stored.png)}#homePage .linkBtn a.btnHome{background-image: url(../img/btn_home.png)}#homePage .linkBtn a.baha{background-image: url(../img/btn_baha.png)} #homePage .linkBtn a.fb{background-image: url(../img/btn_fb.png)}
@media (min-width: 765px) {#homePage .linkBtn{right:20px;top:20px;}#homePage .linkBtn a{width:45px;height:45px;}#homePage .linkBtn a.billing{display:inline-block;}}

.tt h1,.tt h2{background-repeat:no-repeat;background-position:center top;background-size:100%; overflow:hidden;text-indent:-9999px;}
.textBox {display: block; width:7.44rem; font-weight:500; margin:0.3rem 0 0.3rem -0.14rem; border:0.05rem solid #c3c3c3;background-color:rgba(251,251,251,0.8); -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;box-sizing:border-box;padding:0.45rem;overflow:hidden;line-height:1.5;}
.textBox ul li{width:100%; font-size:0.32rem;margin-bottom:0.5rem;word-wrap:break-word;}
.textBox ol{width:7.44rem; margin:0.15rem auto 0.5rem -0.9rem;}.textBox ol li{width: 90%; list-style:decimal;margin-left:0.4rem;margin-bottom:0.04rem;}
.textBox ul li b{display:inline-block;border-radius:0.8rem;background-color: rgba(255,224,225,1.00);padding:0.1rem 0.3rem; margin-right:0.2rem;margin-bottom:0.1rem;}
.imgScrp{display:block;width:100%;text-align: center;font-size:0.3rem;}
@media (min-width: 765px){
	.textBox{width:94%;padding:30px;margin:40px auto;border:4px solid #c3c3c3;}
	.textBox ul li b{margin-bottom:10px;margin-right:15px;padding:0.2rem 15px; }
	.textBox> ul >li{width:100%;margin-bottom:20px;}
	.textBox ol{width:100%;margin:0px 0px 10px -30px;}.textBox ol >li{width:100%;margin-bottom:10px;line-height:1.5;margin-left:25px;}
	.textBox ul li,.textBox span{font-size:20px;}
	.imgScrp{font-size:16px;margin-bottom:-10px;}
}
.titleBox h3{color:#ffcfcc;}
.noticeBox{font-weight:bold;box-sizing:border-box; width:8.9rem;margin-left:-0.78rem;margin-bottom:-0.008rem;padding:0.5rem 0.1rem;background-color: rgba(255,255,255,0.8);}
.noticeBox span{display: block;width:7.33rem;margin-left:0.8rem;text-indent:-0.45rem;font-size:0.32rem;line-height:1.5em;}
.noticeBox span::before{content:"";display:inline-block;width:0.3rem;height:0.35rem;vertical-align:top;margin-right:8px;background-image:url(../img/icon_notice.png);background-size:100%;background-repeat:no-repeat;background-position: center bottom;}
.noticeBox ol{margin-top:0.3rem;margin-left:0.13rem; margin-bottom:0.3rem;}.noticeBox ol li{width:92%;margin-bottom:0.1rem;line-height:1.5;}
@media (min-width: 765px){
  .noticeBox{width:110%;}
  .noticeBox span{width:686px;font-size:14px;text-indent:-24px;padding-left:40px;}
  .noticeBox span::before{width:16px;height:18px;}
  .noticeBox ol{margin-top:8px;margin-left:20px;margin-bottom:10px;}.noticeBox ol li{width:660px;font-size:14px;}
}

/*server*/
#serverPage,#updatePage,#eventPage{ width: 100%; padding-top:2.5rem;overflow:hidden;background-size:200%;background-image:url(../img/bg.jpg); background-repeat:repeat-y;background-position:center top;}
#serverPage{line-height: 1.5;}
#serverPage .topBox,#updatePage .topBox{width:100%;margin:0 auto;}
#serverPage .topBox .tt h1{width:8.7rem;height:3rem; margin:0 auto; background-image:url(../img/server_01.png);}
#serverPage .topBox .tt #tabMenu{margin-top:-1.4rem;}
#serverPage .topBox .tt #tabMenu a{width:3rem;font-size:0.3rem;padding-top:0.22rem;font-weight:medium;}
#serverPage .titleBox{width:8.77rem;margin-top:-0.05rem; margin-left:0.63rem;margin-bottom:1rem;background:url(../img/tet_box.jpg) repeat;border:2px solid #696969;}
#serverPage .eventTitle,#eventPage .eventTitle{width:100%;background-image: url(../img/title_bg.jpg);background-repeat:repeat-y;background-size:100%;padding-top:1.6rem;padding-bottom:0.7rem;}
#serverPage .eventTitle .pic img{width:1.5rem;height: auto; vertical-align:bottom;float:left;margin-top:-1.15rem;margin-left:0.8rem;}#serverPage h3{font-size:0.33rem;font-weight:400;margin-top:-1rem;margin-left:2.6rem;margin-bottom:0.2rem;}#serverPage h4{font-size:0.456rem;font-weight:900;margin-left:2.6rem;}
#serverPage .bounsBox ul li{width:100%;height:0px;text-indent:-200%;overflow:hidden;}
#serverPage .bounsBox img{width:105%;height:auto;margin-left:-0.1rem;margin-bottom:0.5rem;}
@media (min-width: 765px){
  #serverPage,#updatePage,#eventPage{padding-top:160px;background-attachment:fixed;background-repeat:no-repeat;background-size:cover;}
  #serverPage .topBox{width:1280px;margin:0 auto;}
  #serverPage .topBox .tt h1{width:652px;height:260px; margin:0 auto; background-image:url(../img/server_01.png);}
  #serverPage .topBox .tt #tabMenu{width:762px;margin-top:-100px;}
  #serverPage .topBox .tt #tabMenu a{width:256px;font-size:22px;line-height:1.5em;padding-top:5px;}
  #serverPage .titleBox{width:758px;margin-top:-10px; margin-left:auto;margin-right: auto; margin-bottom:50px;}
  #serverPage .eventTitle{padding-top:70px;padding-bottom:55px;}
  #serverPage .eventTitle .pic img{width: inherit;margin-top: -1rem;margin-left: 104.8px;}#serverPage h3{font-size: 22px;margin-top: -16px;margin-left: 248px}#serverPage h4{font-size:36px;margin-left: 246px;}
  #serverPage .bounsBox img{width:initial; margin-left:10px; margin-bottom:80px;}
}

#serverPage .titleBox .sub{box-sizing:border-box;padding:0.5rem 0.8rem 0 0.8rem;overflow:hidden;}


/*updatePage*/
#updatePage .topBox .tt h1{width:8.7rem;height:3rem; margin:0 auto; background-image:url(../img/update_01.png);background-size:100%;}
#updatePage .topBox .tt #tabMenu{margin-top:0rem;margin-left:0.098rem;}
#updatePage .topBox .tt #tabMenu a{width:1.8rem;height:1.5rem;font-size:0.24rem;padding:0.3rem 0.3rem;margin-right:-0.28rem;}
#updatePage .topBox .tt #tabMenu a:nth-child(3),#updatePage .topBox .tt #tabMenu a:nth-child(4),#updatePage .topBox .tt #tabMenu a:nth-child(5){padding-top:0.5rem;}

@media (min-width: 765px){
  #updatePage .topBox{width:1280px;margin:0 auto;}
  #updatePage .topBox .tt h1{width:610px;height:223px;}
  #updatePage .topBox .tt #tabMenu{width:780px;margin:-1px auto 0 auto;padding-left:6px;}
  #updatePage .topBox .tt #tabMenu a{width:20%;height:81px;line-height:75px;text-align:center; font-size:16px; letter-spacing:2px; padding:0px 0px;font-weight:medium;}
  #updatePage .topBox .tt #tabMenu a br{display:none;}
  #updatePage .topBox .tt #tabMenu a:nth-child(3),#updatePage .topBox .tt #tabMenu a:nth-child(4),#updatePage .topBox .tt #tabMenu a:nth-child(5){padding-top:0rem;}
}

#updatePage .titleBox{width:8.7rem;margin-top:-0.05rem; margin-left:0.75rem;margin-bottom:1rem;background:url(../img/tet_box.jpg) repeat;border:2px solid #696969;overflow:hidden;padding-top:0rem;}
@media (min-width: 765px){#updatePage .titleBox{width:766px;margin-top:-0.05rem; margin-left:auto;margin-right:auto;margin-bottom:1rem;overflow:hidden;padding-top:0px;}}

.invation{width:8rem;height:4.3rem; overflow:hidden;text-indent:-99rem;background-image:url(../img/card.png);background-size:100%;margin:0.8rem auto;}
@media (min-width: 765px){.invation{width:532px;height:285px;margin:80px auto;}}

#updatePage h6{margin-top:0;}#updatePage .textBox{margin:0 auto;text-align:center;}
#updatePage .textBox h6{width:7.5rem;font-size:0.4rem;font-weight:400; line-height:1rem;margin-left:-0.5rem;margin-top:-0.5rem; background-color:#830000;color:#fff;}
#updatePage .textBox p{font-size:0.5rem;margin:0.8rem auto 0.4rem auto;font-weight:600;text-decoration-line: underline;}
#updatePage .textBox>img{width:90%;margin-top:0.4rem;}#updatePage span{display:block;margin-top:0.1rem;margin-bottom:0.4rem;}
#updatePage .gameImg{width:88%;margin-top:0.4rem;} #updatePage .deco{width:3rem;}#updatePage .deco.up{margin-top:1rem;margin-bottom:0.44rem;}#updatePage .deco.bottom{margin-top:0.44rem;margin-bottom:1rem;}
@media (min-width: 765px){
	#updatePage .textBox{width:84%;}#updatePage .textBox h6{width:635px;height:50px;font-size:20px;line-height:50px;margin-left:-30px;margin-top:-30px;}#updatePage .textBox p{font-size:30px;}#updatePage .textBox >img{width:390px;}#updatePage .gameImg{width:initial;margin-top:30px;}
	#updatePage .deco{width:155px;}#updatePage .deco.up{margin-top:50px;margin-bottom:40px;}#updatePage .deco.bottom{margin-top:40px;margin-bottom:60px;}
}


.form{width:8rem;font-size:0.02rem;margin:2rem auto 1rem auto;}
.form li{display: inline-block;float:left;height:1.8rem;line-height:1.5;font-size:0.4rem; font-weight:500;border-bottom:1px solid #fff;padding:0.2rem;}
.form li:nth-child(odd){width:39%;margin-left:2px;background-color:#434b57;color:white;border-right:1px solid #fff;}
.form li:nth-child(odd),.form li:nth-child(2){box-sizing:border-box;padding-top:0.6rem;}.form li:nth-child(4){padding-top:0.33rem;}
.form li:nth-child(even){width:59%;background-color:#d1d1d1;color:#434b57;}.form li:nth-last-child(1),.form li:nth-child(3){border-bottom:none;}
.story{width:6rem;line-height:1.7em;font-weight:500;margin:0.33rem auto;}.storyBox{width:7.7rem; margin:0.2rem auto 0.6rem auto; line-height:1.5em;box-sizing:border-box;padding:0.4rem;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;background-color:#d1d1d1;font-weight:600;font-size:0.3rem;}

@media (min-width: 765px){
	.form{width:90%;margin:40px auto;}.form li{height:50px;line-height:50px;padding:0;}
  .form li:nth-child(odd),.form li:nth-child(2),.form li:nth-child(4){padding-top:0;}
  .story{width:80%;margin:0 auto 20px auto;}.storyBox{width:640px; margin:6px auto 30px auto;font-size:14px;}
}
.item_img,.item_info,.card_img{display:block;}
.item_img{width:1.5rem;height:1.5rem;padding-top:0.4rem;}.card_img{width:6em;margin-top:0.5rem;}
.item_img img{width:100%;}.item_info{ width:5rem; margin-top:-2.4rem;margin-top:-1.2rem; margin-left:2rem;padding-left:0.3rem;border-left: 1px dashed;}.item_info li{text-align:left;margin-top:-0.4rem;}.item_info li:first-child{font-size:0.5rem;font-weight:700;}
@media (min-width: 765px){
  .item_img{width:103px;}.card_img{width:150px;margin:20px auto;}
	.item_img img{margin-left:42px;margin-top:20px;}
	.item_info{width:360px;margin-top:-30px;margin-left: 200px;border-left: 1px dashed #c3c3c3;padding-left:40px;}
	.item_info li{text-align:left;margin-top:-5px;}	.item_info li:first-child{font-size:28px;}
}
#updatePage .update03 .inner_tabMenu >a {width:3rem;}
#updatePage .textBox h5{width:130%;background-color:#434b57;color:#fff;font-size:0.25rem;line-height:1.8;padding:0.5rem;margin-left:-1rem;margin-top:-0.5rem;margin-bottom:0.5rem;font-weight:500;letter-spacing:0.01rem;}
#updatePage .update04 .textBox{margin:0 auto 1rem auto;}
#updatePage .update04 .textBox .item_img{width:1.2rem;margin-left:0.1rem;margin-top:-0.4rem;}
#updatePage .update04 .textBox .item_img span{width:5em;margin-left:-0.2rem; }
#updatePage .update04 .textBox .item_info{margin-top:-1.2rem;margin-left:1.6rem; padding-left:0.6rem; width:4.6rem;text-indent:-0.3rem;line-height:1.5;}
#updatePage .update04 .textBox .item_info > li{margin-bottom:0.45rem;text-align: justify; word-break:break-all;word-wrap:break-word;text-align:justify;}
#updatePage .update04 .textBox .item_info li:first-child{color:#590001;font-size:0.45rem;font-weight:800;}
#updatePage .update04 .textBox .noticeBox{text-align:left;padding-left:0.45rem;margin-bottom:-0.5rem;}
#updatePage .update04 .textBox .noticeBox ol{margin-left:-0.48rem;margin-top:-0.2rem;}
@media(min-width:765px){
  #updatePage .update03 .inner_tabMenu >a {width:150px;}
	#updatePage .textBox h5{width:640px;font-size:16px;line-height:1.8;margin-left:-30px;margin-top:-30px;margin-bottom:20px;}
	#updatePage .update04 .textBox .item_img{width:104px;margin-left:0px;margin-top:0px;}
  #updatePage .update04 .textBox .item_img span br{display:none;}
	#updatePage .update04 .textBox .item_img span{width:200px;}
  #updatePage .update04 .textBox .item_info{min-height:200px; padding-left:60px;padding-top:18px;padding-bottom:10px; width:350px;text-indent:-0.4em;margin-left:200px;margin-top:-50px; line-height:1.5;}
	#updatePage .update04 .textBox .item_info li{font-size:14px;}
	#updatePage .update04 .textBox .item_info li:first-child{font-size:24px;}
	#updatePage .update04 .textBox .noticeBox{text-align:left;padding-left:0.56rem;margin-top:20px; margin-bottom:-30px;}
	#updatePage .update04 .textBox .noticeBox ol{margin-left:20px;margin-top:0rem;}
}
#updatePage .textBox table {font-size:0.33rem;color:#666;}
#updatePage .textBox table thead{background-color:#666;color:#fff;}
#updatePage .textBox table.table_01 tbody tr td:last-child{text-align:left;padding:0.2rem 0.3rem;}
@media(min-width:765px){
  #updatePage .textBox table {font-size:0.4rem;word-break:keep-all;}
}
#updatePage .storyBox .inner_tabMenu{ margin-top:0.2rem; margin-left:0.2rem;}
#updatePage .storyBox .inner_tabMenu a{margin-right:0.2rem;}
#updatePage .storyBox .inner_tabMenu a:last-child{margin-top:0.2rem;}
#updatePage .storyBox .inner_tabBox img{width:100%;}
#updatePage .textBox .gameImg{width:105%;margin-left:-0.15rem;}
@media(min-width:765px){
  #updatePage .storyBox .inner_tabMenu a{line-height:1.5;}
  #updatePage .storyBox .inner_tabBox img{width:initial;}
  #updatePage .textBox .gameImg{width:99%;margin-left:auto; }
}

/*eventPage*/
#eventPage .topBox .tt h1{width:7.5rem;height:4.5rem; margin:-0.4rem auto 0 auto; background-image:url(../img/event_01.png);background-size:100%;}
#eventPage .topBox .tt #tabMenu{margin-top:0rem;margin-left:-0.08rem;}
#eventPage .topBox .tt #tabMenu a{width:3rem;font-size:0.28rem;padding:0.25rem 0.3rem;margin-right:-0.28rem;margin-top:-0.1rem;}

@media (min-width: 765px){
  #eventPage .topBox{width:1280px;margin:0 auto;}
  #eventPage .topBox .tt h1{width:405px;height:230px;margin-top:0px;}
  #eventPage .topBox .tt #tabMenu{width:1020px;margin:-1px auto 0 auto;padding-left:6px;}
  #eventPage .topBox .tt #tabMenu a{width:170px;height:81px;font-size:16px; letter-spacing:2px; padding:12px 0px 10px 0; }
}
#eventPage .titleBox{width:8.86rem;margin-top:-0.05rem; margin-left:0.54rem;margin-bottom:1rem;background:url(../img/tet_box.jpg) repeat;border:2px solid #696969;overflow:hidden;padding-top:0.5rem;}#eventPage .textBox{margin:0.5rem auto;}
@media (min-width: 765px){#eventPage .titleBox{width:1010px;margin-top:-0.05rem; margin-left:auto;margin-right:auto;margin-bottom:1rem;overflow:hidden;padding-top:80px;}}

#eventPage .eventTitle{height:2.7rem;margin-top:-0.5rem;text-align:center;}
#eventPage .eventTitle h3{font-size:0.33rem;font-weight:400;margin-bottom:0.2rem;margin-top:-0.9rem;}#eventPage .eventTitle h4{font-size:0.5rem;font-weight:900;}
#eventPage .hotEvent01 .eventTitle h3{margin-left:-2.8rem;}#eventPage .hotEvent02 .eventTitle h3{margin-left:-3.2rem;}#eventPage .hotEvent03 .eventTitle h3{margin-left:-2.8rem;}
#eventPage .hotEvent04 .eventTitle h3{margin-left:-4.4rem;}#eventPage .hotEvent05 .eventTitle h3{margin-left:-6.1rem;}#eventPage .hotEvent06 .eventTitle h3{margin-left:-1.8rem;}

@media (min-width: 765px){
	#eventPage .eventTitle{height:4rem;margin-top:-2.5rem;margin-bottom:40px;}
	#eventPage .eventTitle h3{font-size:0.5rem;font-weight:400;margin-bottom:0.2rem;margin-top:-0.4rem;margin-left:-12em;}#eventPage .eventTitle h4{font-size:1rem;font-weight:900;}
	#eventPage .hotEvent01 .eventTitle h3{margin-left:-200px;}#eventPage .hotEvent02 .eventTitle h3{margin-left:-240px;}#eventPage .hotEvent03 .eventTitle h3{margin-left:-210px;}
	#eventPage .hotEvent04 .eventTitle h3{margin-left:-330px;}#eventPage .hotEvent05 .eventTitle h3{margin-left:-450px;}#eventPage .hotEvent06 .eventTitle h3{margin-left:-150px;}
}
#eventPage .titleBox .textBox{margin:1rem auto;}
@media (min-width: 765px){#eventPage .titleBox .textBox{width:85%;margin:80px auto;padding:55px 80px;}}

#eventPage .titleBox .textBox ol li{width:6rem;margin-bottom:0.15rem;}
#eventPage .titleBox .textBox ol>li>img,#eventPage .titleBox .textBox p img{width:6.8rem;}
#eventPage .titleBox .textBox ol>li>img{margin-left:-0.74rem;margin-top:0.4rem}
#eventPage .titleBox .textBox p img:first-child{display:none;}
#eventPage .titleBox .textBox p img:last-child{margin-left:-0.18rem;margin-top:-0.7rem;}
#eventPage .titleBox .textBox .imgScrp{margin-left:-0.1rem;}
#eventPage .titleBox .textBox .imgScrp img{width:80%;border:1px solid #000;}
@media (min-width: 765px){
#eventPage .titleBox .textBox ol li{width:100%;margin-bottom:0.4rem;}
#eventPage .titleBox .textBox p img{width:initial;margin:0 auto;}
#eventPage .titleBox .textBox p img:first-child{display:block;}
#eventPage .titleBox .textBox p img:last-child{display:none;}
#eventPage .titleBox .textBox ol>li>img{width:initial;margin-right:20px;margin-top:20px;}
#eventPage .titleBox .textBox .imgScrp img{width:initial;}
}
.bounsTable{display:block;width:0;height:0;overflow:hidden;}
#eventPage .hotEvent03 .ch{display:none;}#eventPage .hotEvent03 .textBox ul:first-child{border-bottom:1px dashed;margin-bottom:0.4rem;}
@media (min-width:768px){
  #eventPage .hotEvent03 .ch{display:block;width:180px;margin-top:-460px;margin-left:20px;}
  #eventPage .hotEvent03 .textBox ul{margin-left:260px;}#eventPage .hotEvent03 .textBox ul:first-child{padding-top:10px;margin-bottom:40px;border-bottom:1px dashed;}
}
#eventPage .npc{padding:0.5rem 0.6rem; text-align: center;background-color:#fff;border:4px solid #D4D4D4;border-radius:0.5rem;margin-left:1.6rem;}
#eventPage .npc{width:4.5rem;height:4.5rem; text-align: center;background-color:#fff;border:4px solid #D4D4D4;border-radius:0.5rem;margin-left:1rem;margin-bottom:1rem;}
@media (min-width:768px){
	#eventPage .npc{width:150px;height:180px;float:right;display:inline-block;margin-top:-210px;margin-right:8px;}
}

.vv{width:6.8rem;background-color:#B9100A;color:#fff;padding:0.3rem;margin-top:0.4rem;margin-left:-0.6rem; text-align:center; border-radius:0.5rem 0.5rem 0 0;}
.vip{position:relative;}
@media (min-width:768px){
.vv{width: 680px;}.vv br{display:none;}
}

.addImg{width:95%;height:auto;margin-top:0.5rem;}.addImg:nth-child(3){margin-bottom:0.5rem;}
@media (min-width:768px){
  .addImg{width:275px;margin-top:0.5rem;margin-left:-20px; display:block;}.addImg:nth-child(3){margin-bottom:40px;margin-left:270px;margin-top:-175px;}
}