@charset "UTF-8";
/* 中文 */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

main { display: block; }

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

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

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

a { background-color: transparent; }

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

b, strong { font-weight: bolder; }

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

small { font-size: 80%; }

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

sub { bottom: -.25em; }

sup { top: -.5em; }

img { border-style: none; }

button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }

button, input { overflow: visible; }

button, select { text-transform: none; }

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

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

fieldset { padding: .35em .75em .625em; }

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

progress { vertical-align: baseline; }

textarea { overflow: auto; }

[type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; 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; outline-offset: -2px; }

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

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

details { display: block; }

summary { display: list-item; }

template { display: none; }

[hidden] { display: none; }

* { padding: 0; margin: 0; font-family: "PingFangTC-Regular", "Heiti TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body { -ms-touch-action: manipulation; touch-action: manipulation; }

@supports (-webkit-touch-callout: none) { body { /* The hack for Safari */ height: -webkit-fill-available; } }

a { display: inline-block; }

a:focus-visible { outline: none; }

a[href] { cursor: pointer; }

.cur-p { cursor: pointer; }

[hidden] { display: none !important; }

.d-hide, .d-hidden, .d-none, .hide, .hidden { display: none !important; }

.v-hide { visibility: hidden; }

[data-open="true"] { opacity: 1; visibility: visible; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); -webkit-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; }

[data-open="false"] { opacity: 0; visibility: hidden; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); -webkit-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; }

.clearfix { overflow: hidden; }

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

button { background: none; border: none; color: inherit; font: inherit; outline: none; padding: 0; }

.text-ellipsis { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; }

body { background-color: #fff; position: relative; overflow: hidden; min-width: auto; }

@media screen and (max-width: 768px) { body { min-width: auto; } }

@-webkit-keyframes zoomIn { 0% { visibility: visible; }
  100% { visibility: visible;
    -webkit-transform: scale(1.04) translateY(-2%);
            transform: scale(1.04) translateY(-2%); } }

@keyframes zoomIn { 0% { visibility: visible; }
  100% { visibility: visible;
    -webkit-transform: scale(1.04) translateY(-2%);
            transform: scale(1.04) translateY(-2%); } }

#app { width: 100%; }

.video { width: 100%; height: 56.25vw; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.video-wrap { width: 100%; height: 100vh; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 1000; }

.header-wrap { width: 100%; height: 1080px; position: relative; overflow: hidden; }

.header-wrap .tns-controls { display: none; }

.header-slide { width: 1920px; height: 100%; overflow: hidden; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

.header-slide__pic { width: 100%; height: 1080px; background-position: center center; background-size: 100%; }

.header-slide__pic.tns-slide-active { -webkit-animation: zoomIn 5s 0.6s forwards !important; animation: zoomIn 5s 0.6s forwards !important; }

.header-slide__pic1 { background-image: url(../images/slide1.jpg); }

.header-slide__pic2 { background-image: url(../images/slide2.jpg); }

.header-slide__pic3 { background-image: url(../images/slide3.jpg); }

.header-slide__pic4 { background-image: url(../images/slide4.jpg); }

.header-logo { width: 153px; height: 69px; background-image: url("../images/logo.png"); background-size: cover; margin-top: 16px; margin-left: 16px; }

.header-container { width: 1200px; height: 100%; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

.header-btn-group { width: 100%; position: absolute; top: 847px; top: 38.38542vw; font-size: 0; text-align: center; }

.header-btn-group .btn-download { display: inline-block; width: 320px; height: 136px; background-image: url("../images/btn-download.png"); background-size: cover; }

.header-btn-group .btn-download:hover { background-position: -320px 0; }

.header-btn-group .btn-sign { display: inline-block; width: 320px; height: 136px; background-image: url("../images/btn-sign.png"); background-size: cover; margin-left: 7.29167vw; }

.header-btn-group .btn-sign:hover { background-position: -320px 0; }

.main-wrap { width: 100%; height: 1080px; position: relative; overflow: hidden; }

.main-container { width: 1200px; height: 100%; margin: 0 auto; position: relative; }

.main-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center top; background-size: cover; z-index: 0; opacity: 0; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

.main-story { width: 546px; height: 400px; position: absolute; top: 337px; right: 21px; padding: 66px 14px 66px 48px; z-index: 1; }

.main-story--0 { height: 568px; }

.main-story__content { width: 100%; height: 100%; overflow: hidden; color: #fff; font-size: 18px; position: relative; z-index: 2; }

.main-story__border { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 10px; left: -8px; z-index: 1; border: 3px solid transparent; border-right: none; }

.main-btn { width: 57px; height: 53px; display: inline-block; -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); position: relative; }

.main-btn-group { position: absolute; top: 776px; right: 21px; font-size: 0; z-index: 1; }

.main-btn[data-promotion="1"]:before { background-image: url("../images/btn-sec1.png"); }

.main-btn[data-promotion="2"]:before { background-image: url("../images/btn-sec2.png"); }

.main-btn[data-promotion="3"]:before { background-image: url("../images/btn-sec3.png"); }

.main-btn:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; -webkit-filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.2)); }

.main-btn:hover { -webkit-box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.25), inset 0px -4px 8px rgba(0, 0, 0, 0.25); box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.25), inset 0px -4px 8px rgba(0, 0, 0, 0.25); }

.main-btn.on { -webkit-box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.25), inset 0px -4px 8px rgba(0, 0, 0, 0.25); box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.25), inset 0px -4px 8px rgba(0, 0, 0, 0.25); }

.main-btn + .main-btn { margin-left: 16px; }

.main-left { width: 357px; height: 1080px; font-size: 0; position: absolute; top: 0; left: 50%; margin-left: -957px; z-index: 2; -webkit-transition: -webkit-transform 0.6s; transition: -webkit-transform 0.6s; -o-transition: transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; }

@media screen and (min-width: 768px) and (max-width: 1200px) { .main-left.on { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); }
  .main-left.on .main-left__toggle { background-position-x: -65px; } }

.main-left__toggle { position: absolute; top: 0; right: 0; width: 65px; height: 153px; background-image: url("../images/characterlist-btn.png"); background-size: cover; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); display: none !important; }

@media screen and (min-width: 768px) and (max-width: 1200px) { .main-left__toggle { display: block; } }

.main-left-box { width: 100%; height: 100%; overflow: hidden; -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3); box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3); }

.main-left .mCSB_inside > .mCSB_container { margin-right: 0; }

.main-left .mCSB_scrollTools { width: 4px; }

.main-left__btn { width: 357px; height: 75px; display: block; -webkit-box-sizing: content-box; box-sizing: content-box; border-bottom: 2px solid #ece9e1; background-size: cover; }

.main-left__btn:first-child { border-top: 2px solid #ece9e1; }

.main-right { width: 360px; height: 100%; font-size: 0; position: absolute; top: 0; right: 50%; margin-right: -960px; z-index: 2; -webkit-transition: -webkit-transform 0.6s; transition: -webkit-transform 0.6s; -o-transition: transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; -webkit-box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3); box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3); }

@media screen and (min-width: 768px) and (max-width: 1200px) { .main-right.on { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }
  .main-right.on .main-right__toggle { background-position-x: -65px; } }

.main-right__toggle { position: absolute; top: 0; left: 0; width: 65px; height: 153px; background-image: url("../images/rolelist-btn.png"); background-size: cover; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); display: none !important; }

@media screen and (min-width: 768px) and (max-width: 1200px) { .main-right__toggle { display: block; } }

.main-right-box { position: relative; width: 100%; height: 100%; }

.main-right__btn { width: 360px; position: absolute; left: 0; background-size: cover; }

.main-right__btn:before { content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; display: block; background-size: cover; }

.main-right__btn:hover:before { display: none; }

.main-right__btn.on:before { display: none; }

.main-right--3 .main-right__btn:nth-child(1) { height: 440px; top: 0; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 67.5%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 100% 67.5%, 0% 100%); }

.main-right--3 .main-right__btn:nth-child(1):before { background-image: url("../images/3-shadow-1.png"); }

.main-right--3 .main-right__btn:nth-child(2) { height: 529px; top: 285px; -webkit-clip-path: polygon(0% 29%, 100% 2.5%, 100% 73%, 0% 100%); clip-path: polygon(0% 29%, 100% 2.5%, 100% 73%, 0% 100%); }

.main-right--3 .main-right__btn:nth-child(2):before { background-image: url("../images/3-shadow-2.png"); }

.main-right--3 .main-right__btn:nth-child(3) { height: 424px; bottom: 0; -webkit-clip-path: polygon(0% 37%, 100% 3.5%, 100% 100%, 0% 100%); clip-path: polygon(0% 37%, 100% 3.5%, 100% 100%, 0% 100%); }

.main-right--3 .main-right__btn:nth-child(3):before { background-image: url("../images/3-shadow-3.png"); }

.main-right--4 .main-right__btn:nth-child(1) { height: 339px; top: 0; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 58%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 100% 58%, 0% 100%); }

.main-right--4 .main-right__btn:nth-child(1):before { background-image: url("../images/4-shadow-1.png"); }

.main-right--4 .main-right__btn:nth-child(2) { height: 425px; top: 185px; -webkit-clip-path: polygon(0% 36%, 100% 3%, 100% 67%, 0% 100%); clip-path: polygon(0% 36%, 100% 3%, 100% 67%, 0% 100%); }

.main-right--4 .main-right__btn:nth-child(2):before { background-image: url("../images/4-shadow-2.png"); }

.main-right--4 .main-right__btn:nth-child(3) { height: 425px; top: 456px; -webkit-clip-path: polygon(0% 36%, 100% 3%, 100% 67%, 0% 100%); clip-path: polygon(0% 36%, 100% 3%, 100% 67%, 0% 100%); }

.main-right--4 .main-right__btn:nth-child(3):before { background-image: url("../images/4-shadow-3.png"); }

.main-right--4 .main-right__btn:nth-child(4) { height: 359px; bottom: 0; -webkit-clip-path: polygon(0% 45%, 100% 5%, 100% 100%, 0% 100%); clip-path: polygon(0% 45%, 100% 5%, 100% 100%, 0% 100%); }

.main-right--4 .main-right__btn:nth-child(4):before { background-image: url("../images/4-shadow-4.png"); }

.header-wrap { width: 100%; height: 56.25vw; }

.header-slide { width: 100vw; }

.header-slide__pic { width: 100vw; height: 56.25vw; }

.header-logo { width: 7.96875vw; height: 3.59375vw; margin-top: 0.83333vw; margin-left: 0.83333vw; }

.header-container { width: 62.5vw; }

.header-btn-group .btn-download { width: 16.66667vw; height: 7.08333vw; }

.header-btn-group .btn-download:hover { background-position: -16.66667vw 0; }

.header-btn-group .btn-sign { width: 16.66667vw; height: 7.08333vw; }

.header-btn-group .btn-sign:hover { background-position: -16.66667vw 0; }

.main-wrap { width: 5.20833vw; height: 56.25vw; }

.main-container { width: 62.5vw; height: 100%; }

.main-story { width: 28.4375vw; height: 20.83333vw; top: 17.55208vw; right: 1.09375vw; padding: 3.4375vw 0.72917vw 3.4375vw 2.5vw; }

.main-story--0 { height: 29.58333vw; }

.main-story__content { width: 100%; height: 100%; font-size: 0.9375vw; }

.main-story__border { width: 100%; height: 100%; top: 0.52083vw; left: -0.41667vw; border: 0.15625vw solid transparent; }

.main-btn { width: 2.96875vw; height: 2.76042vw; -webkit-box-shadow: 0px 0.20833vw 0.3125vw rgba(0, 0, 0, 0.1); box-shadow: 0px 0.20833vw 0.3125vw rgba(0, 0, 0, 0.1); }

.main-btn-group { top: 40.41667vw; right: 1.09375vw; }

.main-btn:before { -webkit-filter: drop-shadow(0px 0.05208vw 0.15625vw rgba(0, 0, 0, 0.2)); filter: drop-shadow(0px 0.05208vw 0.15625vw rgba(0, 0, 0, 0.2)); }

.main-btn:hover { -webkit-box-shadow: inset 0px 0.20833vw 0.41667vw rgba(0, 0, 0, 0.25), inset 0px -0.20833vw 0.41667vw rgba(0, 0, 0, 0.25); box-shadow: inset 0px 0.20833vw 0.41667vw rgba(0, 0, 0, 0.25), inset 0px -0.20833vw 0.41667vw rgba(0, 0, 0, 0.25); }

.main-btn.on { -webkit-box-shadow: inset 0px 0.20833vw 0.41667vw rgba(0, 0, 0, 0.25), inset 0px -0.20833vw 0.41667vw rgba(0, 0, 0, 0.25); box-shadow: inset 0px 0.20833vw 0.41667vw rgba(0, 0, 0, 0.25), inset 0px -0.20833vw 0.41667vw rgba(0, 0, 0, 0.25); }

.main-btn + .main-btn { margin-left: 0.83333vw; }

.main-left { width: 18.59375vw; height: 56.25vw; margin-left: -49.84375vw; }

.main-left-box { -webkit-box-shadow: 0.10417vw 0 0.41667vw rgba(0, 0, 0, 0.3); box-shadow: 0.10417vw 0 0.41667vw rgba(0, 0, 0, 0.3); }

.main-left .mCSB_scrollTools { width: 0.20833vw; }

.main-left__btn { width: 18.59375vw; height: 3.90625vw; border-bottom: 0.10417vw solid #ece9e1; }

.main-left__btn:first-child { border-top: 0.10417vw solid #ece9e1; }

.main-right { width: 18.75vw; height: 100%; margin-right: -50vw; }

.main-right__btn { width: 18.75vw; }

.main-right--3 .main-right__btn:nth-child(1) { height: 22.91667vw; }

.main-right--3 .main-right__btn:nth-child(2) { height: 27.55208vw; top: 14.84375vw; }

.main-right--3 .main-right__btn:nth-child(3) { height: 22.08333vw; }

.main-right--4 .main-right__btn:nth-child(1) { height: 17.65625vw; }

.main-right--4 .main-right__btn:nth-child(2) { height: 22.13542vw; top: 9.63542vw; }

.main-right--4 .main-right__btn:nth-child(3) { height: 22.13542vw; top: 23.75vw; }

.main-right--4 .main-right__btn:nth-child(4) { height: 18.69792vw; }

.mCSB_inside > .mCSB_container { margin-right: 1.5625vw; }