body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
table{border-collapse:collapse;border-spacing:0}
audio,canvas,video{ display: inline-block;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul,li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
a{text-decoration:none; -webkit-tap-highlight-color:transparent;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
html{font-size: 13.33333333vw;}
body { background-color: #121212;}
img{border: 0; -webkit-touch-callout: none; font-size: 12px;}
html { -webkit-text-size-adjust: none; }

body,button,select,textarea,input {font-family:'OpenSans', 'PingFang SC','Microsoft YaHei','Hiragino Sans GB','WenQuanYi Micro Hei','Helvetica Neue', Arial, sans-serif;}

.spr{ -webkit-mask:url(//game.gtimg.cn/images/gp/cp/a20251225talesite/lite/spr.png); -webkit-mask-size:2.56rem 4.57rem;}
.spr.btn-clean{ width:0.62rem; height:0.62rem; -webkit-mask-position:1.54639% 99.24051%;}
.spr.btn-exchange{ width:0.5rem; height:0.5rem; -webkit-mask-position:95.14563% 0.7371%;}
.spr.btn-order{ width:0.62rem; height:0.62rem; -webkit-mask-position:34.53608% 99.24051%;}
.spr.btn-share{ width:0.5rem; height:0.5rem; -webkit-mask-position:69.41748% 92.87469%;}
.spr.i-arrow{ width:0.37rem; height:0.23rem; -webkit-mask-position:59.81735% 99.07834%;}
.spr.i-search{ width:0.49rem; height:0.49rem; -webkit-mask-position:94.2029% 92.64706%;}
.spr.icon-backcloth.on{ width:0.68rem; height:0.68rem; -webkit-mask-position:1.59574% 82.77635%;}
.spr.icon-backcloth{ width:0.68rem; height:0.68rem; -webkit-mask-position:46.2766% 61.18252%;}
.spr.icon-font{ width:0.68rem; height:0.68rem; -webkit-mask-position:83.51064% 61.18252%;}
.spr.icon-list{ width:0.68rem; height:0.68rem; -webkit-mask-position:38.82979% 82.77635%;}
.spr.icon-search{ width:0.68rem; height:0.68rem; -webkit-mask-position:76.06383% 79.17738%;}
.spr.logo{ width:1.91rem; height:0.65rem; -webkit-mask-position:4.61538% 0.76531%;}
.spr.share-pyq{ width:0.82rem; height:0.82rem; -webkit-mask-position:1.72414% 18.66667%;}
.spr.share-qq{ width:0.82rem; height:0.82rem; -webkit-mask-position:1.72414% 41.06667%;}
.spr.share-qt{ width:0.82rem; height:0.82rem; -webkit-mask-position:50% 18.66667%;}
.spr.share-tp{ width:0.82rem; height:0.82rem; -webkit-mask-position:98.27586% 18.66667%;}
.spr.share-wb{ width:0.82rem; height:0.82rem; -webkit-mask-position:1.72414% 63.46667%;}
.spr.share-wx{ width:0.82rem; height:0.82rem; -webkit-mask-position:50% 41.06667%;}
.spr.share-xhs{ width:0.82rem; height:0.82rem; -webkit-mask-position:98.27586% 41.06667%;}

.wrapper,.wrapper *{-webkit-box-sizing: border-box; box-sizing: border-box;}
.wrapper{padding: 1.38rem 0 1.8rem; position: relative; overflow: hidden; transition:opacity .1s .35s cubic-bezier(.215,.61,.355,1); opacity: 0;}
.wrapper.show{opacity: 1;}

.wrapper .nav{position: fixed; left: 0; width: 100%; top: 0; height: 1.38rem; background: #020202; z-index: 9;}
.wrapper .nav.hide-share .btn-share{display: none;}
.wrapper .nav.hide-share .btn-exchange{right: .5rem;}
.wrapper .nav .logo{position: absolute; left: .35rem; top: 50%; margin-top: -.316rem; background: #fff;}
.wrapper .nav .btn-exchange{position: absolute; right: 1.61rem; top: 50%; margin-top: -.25rem; background: #fff;}
.wrapper .nav .btn-share{position: absolute; right: .5rem; top: 50%; margin-top: -.25rem; background: #fff;}

.wrapper .foot{display:flex; display:-webkit-flex; align-items:center; justify-content:space-around; position: fixed; bottom: 0; left: 0; width: 100%; height: 1.8rem; background: #000; z-index: 20;}
.wrapper .foot li{flex: 1;}
.wrapper .foot li:nth-of-type(2){display: none;}
.wrapper .foot i{display: block; margin: 0 auto; background-color: #fff;}
.wrapper .foot span{display: block; color: rgba(255,255,255,.5); font-size: .33rem; line-height: .5rem; text-align: center;}
.wrapper .foot li.on i{background-color: #ffb900;}
.wrapper .foot li.on span{color: #ffb900;}

.wrapper .foot em{display: none; margin: 0 auto; background-color: #fff;}
.night .wrapper .foot em{display: block;}
.night .wrapper .foot i.icon-backcloth{display: none;}

.wrapper .listings-box{position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding-top: 3.22rem; background: #121212; z-index: 4; pointer-events: none; opacity: 0; transform: translateX(-200%);}
.wrapper .listings-box .title{position: absolute; width: 100%; top: 1.38rem; left: 0; height: 1.84rem; border-bottom: 2px solid #2b2b2b; font-weight: bold; color: #e0e0e0; font-size: .66rem; line-height: 1.82rem; padding-left: .38rem;}
.wrapper .listings-box .btn-order{background: #fff; position: absolute; right: .44rem; top: 50%; margin-top: -.31rem;}
.wrapper .listings-box .first-level{height: 100%; position: relative; padding: 0 .4rem 1.8rem; overflow-y: auto;}
.wrapper .listings-box li{color: #b2b2b2; font-size: .4rem;}
.wrapper .listings-box .first-level a{line-height: 1.46rem; height: 1.46rem; color: #b2b2b2; padding-left: .64rem; position: relative; width: 100%; display: block; border-bottom: 1px solid #414141;}
.wrapper .listings-box .first-level a.btn-second-switch{padding-left: 1.28rem;}
.wrapper .listings-box .first-level a.btn-third-switch{padding-left: 1.68rem;}
.wrapper .listings-box .first-level a.btn-fourth-switch{padding-left: 2.08rem;}
.wrapper .listings-box .first-level a.selected{color:#ffb900;}
.wrapper .listings-box .btn-level-switch .i-arrow{position: absolute; left: 0; top: 50%; margin-top: -.115rem; background: #b3b3b3; transition: var(--global-transition-time) ease-out transform;}
.wrapper .listings-box .btn-level-switch.show .i-arrow{transform: rotate(180deg);}
.wrapper .listings-box .second-level .i-arrow{left: .64rem;}
.wrapper .listings-box .third-level .i-arrow{left: 1.08rem;}
.wrapper .listings-box .second-level,.wrapper .listings-box .third-level{height: 0; overflow: hidden; position: relative; transition: 0s ease-out height;}
.wrapper .listings-box.show .second-level,.wrapper .listings-box.show .third-level,.wrapper .listings-box.show .fourth-level{height: 0; overflow: hidden; position: relative; transition: var(--global-transition-time) ease-out height;}

.wrapper .search-box{position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding-top: 3.01rem; padding-bottom: 1.8rem; background: #121212; z-index: 4; pointer-events: none; opacity: 0; transform: translateX(-200%);}
.wrapper .search-box .input-box{height: 1.63rem; position: absolute; left: 0; top: 1.38rem; border-bottom: 1px solid #282828; width: 100%; padding: 0 .4rem; display:flex; display:-webkit-flex; align-items:center; justify-content:space-between}
.wrapper .search-box .input{width: 9.47rem; height: .9rem; border-radius:.45rem; overflow: hidden; position: relative; background: #222222; padding:0  1.1rem;}
.wrapper .search-box .i-search{position: absolute; top: 50%; margin-top: -.245rem; background: #919191; left: .36rem;}
.wrapper .search-box input{background-color: transparent; outline: none; border-radius: 0; border: none; appearance:none; -webkit-appearance:none; color: #e0e0e0; font-size: .36rem; line-height: .9rem; display: block; width: 100%; height: 100%; overflow: hidden;}
.wrapper .search-box input::-webkit-input-placeholder{opacity: .5; color: #e0e0e0;}
.wrapper .search-box input::-webkit-search-cancel-button{display: none;}
.wrapper .search-box .btn-clean{position: absolute; right: .2rem; top: 50%; background: #919191; margin-top: -.31rem; display: none;}
.wrapper .search-box .btn-clean.show{display: block;}
.wrapper .search-box .btn-cancel{position: absolute; right: .4rem; color: #e0e0e0; font-size: .36rem; height: .9rem; line-height: .9rem;}
.wrapper .search-box .roll-box{padding-top: .5rem; overflow-y: auto; height: 100%; display: none;}
.wrapper .search-box .roll-box.show{display: block;}
.wrapper .search-box .roll-box dl{ width: 10.47rem; margin: 0 auto; padding-bottom: .84rem;}
.wrapper .search-box .roll-box dt{ color: #fff; font-size: .48rem; line-height: .7rem; margin-bottom: .25rem;}
.wrapper .search-box .roll-box dd{ background: #232425; color: #e8e8e8; line-height: .58rem; font-size: .36rem; margin-bottom: .38rem; padding: .29rem .4rem;}
.wrapper .search-box .roll-box dd:nth-last-of-type(1){margin-bottom: 0;}
.wrapper .search-box .roll-box span{ color: #ffb900;}
.wrapper .search-box .roll-box p{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;text-overflow: ellipsis; text-align: justify;}


.share-mask{position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); z-index: 98; pointer-events: none; opacity: 0;}
.share-mask.show{opacity: 1; pointer-events: all;}
.share-mask.show.out{opacity: 1; pointer-events: none;}
.share-mask .mask-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.share-mask .share-box{position:absolute;background:url(https://game.gtimg.cn/images/gp/pop_share/1.png) no-repeat right 0;top:0;right:.5rem;width:98%;height:100%;background-size:80%; pointer-events: none;}
.share-box ul{display: none;}


.font-box{position: fixed; z-index: 9; bottom: 1.8rem; width: 100%; left: 0; padding: 0 .7rem; display:flex; display:-webkit-flex; align-items:center; justify-content:space-between; height: 1.78rem; background: #020202; border-bottom: 1px solid #020202; pointer-events: none; opacity: 0;}
.font-box .title{ color: #fff; font-size: .4rem; line-height: .6rem;}
.font-box .font-main{ position: relative; width: 8.82rem; height: .9rem; border-radius:.45rem; overflow: hidden; background: #121212;}
.font-box .font-main span{position: absolute; width: .9rem; height: .9rem; line-height: .9rem; top: 0; text-align: center; color: #b2b2b2; font-size: .33rem;}
.font-box .font-main span:nth-of-type(1){left: 0;}
.font-box .font-main span:nth-of-type(2){right: 0;}
.font-box .progress{height: 100%; position: absolute; left: 0; top: 0; width: 50%; z-index: 99; pointer-events: none; background: #222;}
.font-box .progress i{position: absolute; right: -.45rem; top: 0; width: .9rem; height: .9rem; border-radius:.45rem; background: #fff; font-size: .33rem; color:#000; text-align: center; font-style: normal; line-height: .9rem;}

.font-box input[type=range]{-webkit-appearance:none;width:100%;height:100%;background:0 0;display:block;position:relative;z-index:98}
.font-box input[type=range]::-webkit-slider-runnable-track{border-radius:.45rem}
.font-box input[type=range]:focus{outline:0}
.font-box input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:.9rem;width:.9rem;background:0 0;border-radius:50%}

:root {
  --global-orange: #ffb900;
  --global-white: #fff;
  --global-grey: #b2b2b2;
  --global-black: #121212;
  --global-dark: #333;
  --global-bg-black: #121212;
  --global-bg-dark: #232425;
  --global-bg-white: #f8f8fa;
  --global-transition-time: .3s;
}

.heading{font-size: .90rem; color: var(--global-white); font-weight: bold; width: 9.75rem; margin: .7rem auto 0; transition: var(--global-transition-time) ease-out font-size, var(--global-transition-time) ease-out margin-top;}
.heading.page-heading,.night .heading.page-heading{color: var(--global-orange);}
.module{font-size: .72rem; color: var(--global-orange); position: relative; padding-left: .45rem; width: 9.75rem; margin: 1.5rem auto .5rem; font-weight: bold; transition: var(--global-transition-time) ease-out font-size, var(--global-transition-time) ease-out margin-top;}
.role-page .module.story,.role-page .module.no-story{margin-top: 0;}
.module:after{content: '';position: absolute; left: 0; width: .09rem; height: .72rem; top: 50%; margin-top: -.36rem; background: var(--global-orange); transition: var(--global-transition-time) ease-out height,var(--global-transition-time) ease-out margin-top;}
.module-not-after:after{display: none;}
.text{font-size: .6rem; color: var(--global-grey); width: 9.75rem; margin: 0 auto; transition: var(--global-transition-time) ease-out font-size;}
p.text b { text-decoration: line-through; font-weight: normal;}
.text.highlight{ color: var(--global-white);}
.pb5{padding-bottom: .5rem;}
.pt5{padding-top: .5rem;}
.fb{font-weight: bold;}
.adjunct{font-size: .48rem; width: 9.75rem; margin: 0 auto; transition: var(--global-transition-time) ease-out font-size;}

.story-box p{padding-bottom: .5rem;}
.story-box p:nth-last-of-type(1){padding-bottom: 0;}

.font-zoom6 .heading{font-size: 1.08rem; margin-top: .84rem;}
.font-zoom6 .module{font-size: .9rem; margin-top: 1.9375rem; padding-left: .5rem;}
.font-zoom6 .module:after{height: .9rem; margin-top: -.45rem;}
.font-zoom6 .text{font-size: .78rem}
.font-zoom6 .adjunct{font-size: .66rem}

.font-zoom5 .heading{font-size: 1.02rem; margin-top: .79rem;}
.font-zoom5 .module{font-size: .84rem; margin-top: 1.8rem; padding-left: .48rem;}
.font-zoom5 .module:after{height: .84rem; margin-top: -.42rem;}
.font-zoom5 .text{font-size: .72rem}
.font-zoom5 .adjunct{font-size: .6rem}

.font-zoom4 .heading{font-size: .96rem; margin-top: .74rem;}
.font-zoom4 .module{font-size: .78rem; margin-top: 1.68rem; padding-left: .46rem;}
.font-zoom4 .module:after{height: .76rem; margin-top: -.38rem;}
.font-zoom4 .text{font-size: .66rem}
.font-zoom4 .adjunct{font-size: .54rem}

.font-zoom3 .heading{font-size: .9rem;}
.font-zoom3 .module{font-size: .72rem}
.font-zoom3 .text{font-size: .6rem}
.font-zoom3 .adjunct{font-size: .48rem}

.font-zoom2 .heading{font-size: .84rem; margin-top: .65rem;}
.font-zoom2 .module{font-size: .66rem; margin-top: 1.42rem;}
.font-zoom2 .module:after{height: .66rem; margin-top: -.33rem;}
.font-zoom2 .text{font-size: .54rem}
.font-zoom2 .adjunct{font-size: .42rem}

.font-zoom1 .heading{font-size: .78rem; margin-top: .6rem;}
.font-zoom1 .module{font-size: .6rem; margin-top: 1.29rem;}
.font-zoom1 .module:after{height: .62rem; margin-top: -.31rem;}
.font-zoom1 .text{font-size: .48rem}
.font-zoom1 .adjunct{font-size: .36rem}

.font-zoom0 .heading{font-size: .72rem; margin-top: .56rem;}
.font-zoom0 .module{font-size: .54rem; margin-top: 1.1625rem;}
.font-zoom0 .module:after{height: .56rem; margin-top: -.28rem;}
.font-zoom0 .text{font-size: .42rem}
.font-zoom0 .adjunct{font-size: .3rem}

.night .wrapper .nav,.night .wrapper .foot,.night .wrapper .search-box .roll-box dd,.night .font-box{background: var(--global-white);}
.night .wrapper .nav .logo,.night .wrapper .nav .btn-exchange,.night .wrapper .nav .btn-share,.night .wrapper .listings-box .btn-order{background: #222;}
body.night,.night .wrapper .search-box,.night .wrapper .listings-box .title,.night .wrapper .listings-box,.night .font-box .font-main{background: #f2f2f2;}
.night .heading,.night .text,.night .wrapper .search-box input,.night .wrapper .search-box .roll-box dt,.night .wrapper .listings-box .first-level a,.night .font-box .title,.night .font-box .font-main span{ color: #222;}
.night .wrapper .foot i,.night .wrapper .foot em,.night .wrapper .search-box .i-search,.night .wrapper .search-box .btn-clean{background: #4c4c4c;}
.night .wrapper .foot span,.night .wrapper .search-box .btn-cancel{color: #4c4c4c;}
.night .share-box .icon{background: var(--global-white);}
.night .share-box a{color: #000;}
.night .wrapper .search-box .input,.night .font-box .progress{background: #e6e6e6;}
.night .wrapper .search-box input::-webkit-input-placeholder{opacity: 1; color: #b3b3b3;}
.night .wrapper .search-box .roll-box p,.night .wrapper .listings-box .title{color: #222;}
.night .wrapper .search-box .input-box,.night .wrapper .listings-box .title,.night .wrapper .listings-box .first-level a,.night .font-box{border-color: #e6e6e6;}
.night .wrapper .listings-box .btn-level-switch .i-arrow{ background: #b3b3b3;}
.night .m-projectprocess p:after{background: #808080;}
.night .wrapper .listings-box .first-level a.selected{color:#ffb900;}

.hask{width: 100%; height: 1px;}
.page{position: relative; line-height: 1.75; text-align: justify; padding-bottom: 1rem;}
.page#timePageBox{padding-bottom: 2.5rem;}
.img-cover{width: 9.75rem; margin: .7rem auto;}

.img-cover-map{height: 11.25rem;}
.img-cover-timeline {height: 4.78rem;}
.img-cover-role{height: 6.33rem;}
.img-cover-story{height: 6.33rem;}
.img-cover img{width: 100%; height:100%; object-fit: cover; display: block; opacity: 0; transition: .1s ease-out opacity;}
.img-cover img.lazyloaded{opacity: 1;}
.m-projectprocess { padding-left: .5rem;}
.m-projectprocess p{display: block; position: relative;}
.m-projectprocess p:nth-last-of-type(1){padding-bottom: 0;}
.m-projectprocess p:after{content: ''; width: .18rem; height: .18rem; border-radius:50%; background: var(--global-white); left: -.4rem; position: absolute; top: .435rem; transition: var(--global-transition-time) ease-out top;}
.font-zoom6 .m-projectprocess p:after{top: .5925rem;}
.font-zoom5 .m-projectprocess p:after{top: .54rem;}
.font-zoom4 .m-projectprocess p:after{top: .4875rem;}
.font-zoom2 .m-projectprocess p:after{top: .3825rem;}
.font-zoom1 .m-projectprocess p:after{top: .33rem;}
.font-zoom0 .m-projectprocess p:after{top: .2725rem;}
.story-list em{display: block; padding-bottom: 1.5rem;}

.timeline-cover{height: 4.78rem;}
.timeline-info-list{ margin-top: .8rem;}
.timeline-info-list .text{width: 100%;}
.timeline-info-list .text.highlight{color: #ffb900;}
.timeline-info-list li{position: relative; padding: 0 .8rem .64rem 1.86rem;}
.timeline-info-list li:nth-last-of-type(1){padding-bottom: 0;}
.timeline-info-list li:after{content: ''; position: absolute; left: 1rem; top: 1rem; bottom: 0; width: .06rem; -webkit-mask:url(//game.gtimg.cn/images/gp/cp/a20251225talesite/lite/timeline-line.png); background: #fff; -webkit-mask-repeat:repeat-y; -webkit-mask-size: .06rem .18rem; transition: var(--global-transition-time) ease-out top,var(--global-transition-time) ease-out bottom;}
.night .timeline-info-list li:after{background: #000;}
.timeline-info-list .img-box{height: .6rem; width: .6rem; position: absolute; left: .75rem; top: .225rem; transition: var(--global-transition-time) ease-out top;}
.font-zoom6 .timeline-info-list .img-box{top: .3825rem;}
.font-zoom5 .timeline-info-list .img-box{top: .33rem;}
.font-zoom4 .timeline-info-list .img-box{top: .2775rem;}
.font-zoom2 .timeline-info-list .img-box{top: .1725rem;}
.font-zoom1 .timeline-info-list .img-box{top: .12rem;}
.font-zoom0 .timeline-info-list .img-box{top: .0675rem;}

.font-zoom6 .timeline-info-list li:after{top: 1.14rem; bottom: -.14rem;}
.font-zoom5 .timeline-info-list li:after{top: 1.1rem; bottom: -.14rem;}
.font-zoom4 .timeline-info-list li:after{top: 1.1rem; bottom: -.14rem;}
.font-zoom2 .timeline-info-list li:after{top: .98rem;}
.font-zoom1 .timeline-info-list li:after{top: .94rem;}
.font-zoom0 .timeline-info-list li:after{top: .86rem;}

.timeline-info-list .img-box img{width: 100%; height: 100%; object-fit: contain;  object-position: 50% 50%; display: block;}

.page-story .img-cover{height: 6.33rem;}


.role-xz.none { height: 0; overflow: hidden; padding-top: 1.55rem;}


.wrapper .listings-box.show,.wrapper .search-box.show{animation: bounceInleft .3s 0s ease-in-out both; pointer-events: all;}
.wrapper .listings-box.show.out,.wrapper .search-box.show.out{animation: bounceOutleft .3s 0s ease-in-out both; pointer-events: none;}

.wrapper .font-box.show,.wrapper .share-mask.show .share-box{animation: bounceInbot .3s 0s ease-in-out both;}
.wrapper .font-box.show{ pointer-events: all;}
.wrapper .font-box.show.out,.wrapper .share-mask.show.out .share-box{animation: bounceOutbot .3s 0s ease-in-out both; pointer-events: none;}


@keyframes bounceInbot {
	0% {opacity: 0;transform: translateY(1rem);}
	100% {transform: translateY(0);opacity: 1;}
}

@keyframes bounceOutbot {
	0% {opacity: 1;transform: translateY(0);}
	100% {transform: translateY(-1rem);opacity: 0;}
}


@keyframes bounceInleft {
	0% {opacity: 0;transform: translateX(-50%);}
	100% {transform: translateX(0);opacity: 1;}
}

@keyframes bounceOutleft {
	0% {opacity: 1;transform: translateX(0);}
	100% {transform: translateX(50%);opacity: 0;}
}


.role-page,.story-page,.map-page{padding-bottom: 2rem;}

.map-story-cover{width: 9.75rem; margin: .7rem auto; height: 5.9rem;}
.map-story-cover img,.map-story-cover-lite img{width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: .1s ease-out opacity;}
.map-story-cover img.lazyloaded,.map-story-cover-lite img.lazyloaded{opacity: 1;}
.story-list .module{margin-bottom: 0;}
.map-story-cover-lite{height: 5.11rem; margin-bottom: .5rem;}
.story-box .map-story-cover-lite:nth-last-of-type(1){margin-top: .5rem; margin-bottom: 0;}

.module.module-story{padding-left: 0; margin-top: .5rem;color: var(--global-grey);}
.night .module.module-story{ color: #222;}
.module.module-story:after{display: none;}