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;}
img{border: 0; -webkit-touch-callout: none;}
body{background: #121113;}

.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box;}
.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}
.swiper-invisible-blank-slide{visibility:hidden}
.swiper-container-vertical>.swiper-wrapper {-webkit-box-orient: vertical;-moz-box-orient: vertical;-ms-flex-direction: column;-webkit-flex-direction: column;flex-direction: column;}

.wrapper img{display: block;}
.wrapper .btn-comm{text-align: center; color: #222; font-size: .5rem; line-height: 1.18rem; font-weight: bold;}


.wrapper{overflow: hidden; position: relative; padding-top: 0; font-size: 12px;}

.spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/m/spr.png); background-repeat:no-repeat; background-size:4.96rem 2.56rem;}
.spr.arrowhead{ width:0.24rem; height:0.4rem; background-position:73.51695% 56.94444%;}
.spr.btn-comm{ width:4.9rem; height:1.18rem; background-position:50% 2.17391%;}
.spr.btn-next1{ width:0.82rem; height:0.42rem; background-position:63.52657% 57.47664%;}
.spr.btn-next2{ width:0.42rem; height:0.42rem; background-position:57.92952% 98.59813%;}
.spr.btn-prev1{ width:0.82rem; height:0.42rem; background-position:63.52657% 78.03738%;}
.spr.btn-prev2{ width:0.42rem; height:0.42rem; background-position:67.62115% 98.59813%;}
.spr.btn-top{ width:1.3rem; height:1.3rem; background-position:0.81967% 97.61905%;}
.spr.icon1{ width:0.62rem; height:0.62rem; background-position:31.10599% 63.40206%;}
.spr.icon2{ width:0.62rem; height:0.62rem; background-position:31.10599% 96.39175%;}
.spr.icon3{ width:0.62rem; height:0.62rem; background-position:45.85253% 63.40206%;}
.spr.icon4{ width:0.62rem; height:0.62rem; background-position:45.85253% 96.39175%;}


.page1{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/m/bg1.jpg) no-repeat; background-size: 100% 100%; height: 19.14rem; padding-top: 1.4rem; position: relative; overflow: hidden;}
.page1 .hask{width: 100%; height: 1px;}
.page1 .wrapper-page1{position: relative; width: 100%; height: 100%;}
.page1 .wrapper-page1 .bg{ width: 100%;}
.page1 .wrapper-page1 .swiper-slide{padding-top: 1.9rem;}
.page1 .role{position: absolute; bottom: -2px; height: auto; left: 50%;}
.page1 .role1{width: 100%; left: 0;}
.page1 .role2{width: 100%; left: 0;}
.page1 .role3{width: 7.26rem; margin-left: -3.4rem;}
.page1 .role4{width: 100%; left: 0;}
.page1 .role5{width: 100%; left: 0;}
.page1 .txt-box{width: 100%; left: 0; position: absolute; top: 8.7rem; text-align: center; color: #fff;}
.page1 .txt-box-double{top: 7.3rem;}
.page1 .txt-box h3{font-size: 1.08rem; line-height: 1.4rem; font-weight: bold; height: 1.75rem;}
.page1 .txt-box h3.fz9{font-size: .9rem;}
.page1 .txt-box-double h3{height: 3.15rem;}
.page1 .txt-box h4{font-size: .4rem; line-height: .72rem; width: 9.91rem; height: 3.58rem; margin: 0 auto;}
.page1 .function-box{font-size: 0; text-align: center; height: .42rem; position: absolute; width: 100%; left: 0; top: 17.98rem; z-index: 4;}
.page1 .function-box a,.page1 .function-box .swiper-pagination{display: inline-block; vertical-align: top;}
.page1 .function-box .swiper-pagination{margin: 0 .44rem; height: .42rem; padding:.07rem 0;}
.page1 .swiper-pagination span{width: .28rem; height: .28rem; border: 1px solid #fff; margin: 0 .22rem; display: inline-block; vertical-align: top;}
.page1 .swiper-pagination span.swiper-pagination-bullet-active{background: #fff; box-shadow: 0 0 .09rem rgba(255,255,255,1);}
.page1 .btn-list{position: absolute; left: 50%; margin-left: -2.45rem; top: 14.78rem; z-index: 4; width: 4.9rem; height: 1.18rem;}
.page1 .btn-list a{display: none;}
.page1 .btn-list a.on{display: block;}


.page2{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/m/bg2.jpg) no-repeat; background-size: 100% 100%; height: 19.84rem; position: relative; overflow: hidden; z-index: 2;}

.tit-black{height: 1.3rem; line-height: 1.3rem; width: 100%; background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/m/tit-black.png) 50% 50% no-repeat; background-size: 7.84rem .15rem; color: #fff; font-size: .68rem; text-align: center; font-weight: bold;}
.tit{height: 1.3rem; line-height: 1.3rem; width: 100%; background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/m/tit.png) 50% 50% no-repeat; background-size: 7.84rem .15rem; color: #fff; font-size: .68rem; text-align: center; font-weight: bold;}

.page2 .tit-black{position: absolute; left: 0; top: 1.44rem; z-index: 3;}

.page2 .wrapper-page2{width: 100%; height: 100%;}
.page2 .wrapper-page2 .swiper-slide{padding-top: 10.36rem; overflow: hidden;}

.page2 .role-name-eng{ width: 100%; position: absolute; left: 0; top: 5.02rem;}
.page2 .role-img{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover;}
.page2 .txt-box{width: 9.9rem; margin: 0 auto; position: relative; z-index: 4;}
.page2 .role-name{display: block; margin: 0 auto; height: 1.2rem;}
.page2 .txt-box p{font-size: .4rem; text-align: center; line-height: .72rem; color: #fff; margin-top: .54rem; height: 2.04rem;}

.page2 .btn-list{position: absolute; left: 50%; margin-left: -2.45rem; top: 14.1rem; z-index: 4; width: 4.9rem; height: 1.18rem;}
.page2 .btn-list a{display: none;}
.page2 .btn-list a.on{display: block;}

.page2 .function-box{font-size: 0; text-align: center; height: 1.5rem; position: absolute; width: 100%; left: 0; top: 16.58rem; z-index: 9;}
.page2 .function-box a,.page2 .function-box .nav-wrapper2{display: inline-block; vertical-align: top;}
.page2 .function-box a{margin-top: .54rem;}
.page2 .function-box .nav-wrapper2{width: 8rem; height: 1.5rem; overflow: hidden;}
.page2 .function-box .swiper-slide{width:2rem; height: 2rem;}
.page2 .function-box .swiper-slide .tx-box{width: 1.5rem; height: 1.5rem; margin: 0 auto; position: relative;}
.page2 .function-box .swiper-slide img{position: absolute; left: 0; top: 0; transition: .3s ease opacity; width: 100%;}
.page2 .function-box .on .default,.page2 .function-box .hover{opacity:0;}
.page2 .function-box .on .hover{ opacity: 1;}



.page3{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/m/v7-p3-bg.jpg) no-repeat; background-size: 100% 100%; height: 16.56rem; position: relative; padding-top: 1.46rem; font-size: 0; text-align: center; margin-top: -1px; z-index: 3;}
.page3 .h-box{display: inline-block; vertical-align: top; color: #fff; margin-top: 5.9rem; height: 2.46rem;}
.page3 h5{font-size: .5rem; line-height: .6rem; height: .6rem; position: relative;}
.page3 h5:after,.page3 h5:before{content: ''; height: 1px; width: 1.2rem; position: absolute; top: 50%; margin-top: -.005rem; background: #fff;}
.page3 h5:after{left: 0;}
.page3 h5:before{right: 0;}
.page3 h6{font-size: 1rem; font-weight: bold; line-height: 1.5rem;}
.page3 p{font-size: .4rem; line-height: .72rem; color: #fff; height: 2.45rem;}
.page3 .btn-comm{display: block; margin: 0 auto;}


.page4{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/m/bg4.jpg) no-repeat; background-size: 100% 100%; height: 22.8rem; position: relative; padding-top: 1.44rem; color: #fff;}
.page4 .wrapper-page3{padding-top: .87rem; height: 15.26rem; overflow: hidden;}
.page4 .wrapper-page3 .img-box{width: 9.87rem; height: 5.94rem; margin: 0 auto 1.12rem;}
.page4 .wrapper-page3 .img-box img{width: 100%; height: 100%; object-fit: cover;}
.page4 .txt-box{font-size: 0; text-align: center;width: 9.87rem; margin: 0 auto;}
.page4 .logo-box{display: inline-block; vertical-align: top; padding-left: 1.88rem; position: relative; height: 100%; height: 1.64rem; line-height: 1.64rem; font-size: .8rem; font-weight: bold;margin-bottom: .66rem;}
.page4 .logo-box img{height: 100%; position: absolute; left: 0; top: 0;}
.page4 .wrapper-page3 .dec{width: 9.87rem; text-align: justify; font-size: .4rem; line-height: .72rem; opacity: .8; height: 2.52rem;}
.page4 .wrapper-page3 .btn-comm{display: block; margin: 0 auto;}

.page4 .tab-btnbo{width: 100%;}
.page4 .tab-btnbox li{ width: 2.4rem; color: #fff;}
.page4 .tab-btnbox li.swiper-slide-active .img-box{transform: scale(1.2222);}
.page4 .tab-btnbox .img-box{height: 1.8rem; background: #222; width: 1.8rem; margin: 0 auto; padding: .4rem;}
.page4 .tab-btnbox .img-box img{width: 100%; opacity: .4;}
.page4 .tab-btnbox li.swiper-slide-active .img-box img{opacity: 1;}
.page4 .tab-btnbox li p{font-size: .28rem; line-height: .8rem; opacity: .4; text-align: center;}
.page4 .tab-btnbox li.swiper-slide-active p{font-size: .4rem; opacity: 1; padding-top: .27rem; width: 140%; margin-left: -20%;}
.page4 .tab-btnbox li.swiper-slide-active .list-blue{background: #609bde;}
.page4 .tab-btnbox li.swiper-slide-active .list-red{background: #730e0e;}
.page4 .tab-btnbox li.swiper-slide-active .list-grey{background: #959595;}
.page4 .tab-btnbox li.swiper-slide-active .list-purple{background: #a56cf2;}
.page4 .tab-btnbox li.swiper-slide-active .list-yellow{background: #ff9e3b;}
.page4 .tab-btnbox li.swiper-slide-active .list-deep-purple{background: #a100c9;}


.page5{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/m/bg5.jpg) no-repeat; background-size: 100% 100%; height: 29.3rem; position: relative; padding-top: 1.12rem; color: #fff;}
.page5 ul{width: 9.87rem; margin: .9rem auto 0; color: #fff;}
.page5 li{position: relative; margin-bottom: .6rem; height: 5.12rem;}
.page5 li .btn-understand{position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 6;}
.page5 li .btn-understand i{position: absolute; bottom: .6rem; right: .48rem; z-index: 7;}
.page5 img{width: 100%; display: block;}
.page5 li .txt-box{padding: 0 .5rem; width: 100%; position: absolute; left: 0; bottom: .45rem;}
.page5 li .name{font-weight: bold; font-size: .68rem; line-height: .74rem; padding-top: 2.12rem; margin-bottom: .38rem; position: relative; z-index: 2;}
.page5 li:nth-of-type(1){height: 10.24rem;}
.page5 li:nth-of-type(1) .name{padding-top: 3.84rem;}
.page5 li:nth-last-of-type(1){margin-bottom: 0;}
.page5 .des{font-size: .38rem; line-height: .72rem; opacity: .5; position: relative; z-index: 2; text-align: justify;}
.page5 .btn-more-world{display: block; margin: 1.18rem auto 0;}

.page6{position: relative; padding: .65rem .7rem .86rem; background: #0b0b0f;}
.page6:after{content: ''; position: absolute; left: .7rem; right: .7rem; bottom: 0; height: .02rem; background: #23232b;}
.page6 p{font-size: .42rem; line-height: .62rem; height: .62rem; color: #e1e1e1;}
.page6 .icon-box{height: .6rem; font-size: 0; text-align: left; position: absolute; left: 3.08rem; top: .65rem;}
.page6 .icon-box a{display: inline-block; vertical-align: top; width: .62rem; height: .62rem; margin-right: .62rem;}
.page6 .icon-box i{display: block;}

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

@keyframes bounceInright{
	0% {opacity: 0;transform: translateX(2rem);}
	100% {transform: translateX(0);opacity: 1;}
}

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

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

@keyframes scale {
    0%{transform: scale(1.5);opacity: 0;}
    80%{transform: scale(0.9);opacity: 1;}
    100%{transform: scale(1);opacity: 1;}
}

.page1 .wrapper-page1 .bg,.page1 .wrapper-page1 .role,.page1 .wrapper-page1 .txt-box,.page1 .function-box,.page2 .role-img,.page2 .txt-box,.page2 .function-box,.page3 .h-box,.page3 p,.page3 .btn-comm,.page4 .wrapper-page3 .img-box,.page4 .wrapper-page3 .txt-box,.page4 .tab-btnbox,
.page5 li,.page5 .btn-more-world,.page1 .btn-list,.page2 .btn-list{opacity: 0;}

.page1.swiper-slide-ani .wrapper-page1 .bg{animation: bounceInbot .4s .2s ease-out both;}
.page1.swiper-slide-ani .wrapper-page1 .role{animation: bounceInbot .4s .4s ease-out both;}
.page1.swiper-slide-ani .wrapper-page1 .txt-box{animation: bounceInbot .4s .4s ease-out both;}
.page1.swiper-slide-ani .btn-list{animation: bounceInbot .4s .6s ease-out both;}
.page1.swiper-slide-ani .function-box{animation: bounceInbot .4s .8s ease-out both;}


.page2.swiper-slide-ani .role-img{animation: bounceInbot .4s .2s ease-out both;}
.page2.swiper-slide-ani .txt-box{animation: bounceInbot .4s .4s ease-out both;}
.page2.swiper-slide-ani .btn-list{animation: bounceInbot .4s .6s ease-out both;}
.page2.swiper-slide-ani .function-box{animation: bounceInbot .4s .8s ease-out both;}


.page3.swiper-slide-ani .h-box{animation: bounceInbot .4s .2s ease-out both;}
.page3.swiper-slide-ani p{animation: bounceInbot .4s .4s ease-out both;}
.page3.swiper-slide-ani .btn-comm{animation: bounceInbot .4s .6s ease-out both;}


.page4.swiper-slide-ani .wrapper-page3 .img-box{animation: bounceInbot .4s .2s ease-out both;}
.page4.swiper-slide-ani .wrapper-page3 .txt-box{animation: bounceInbot .4s .4s ease-out both;}
.page4.swiper-slide-ani .tab-btnbox{animation: bounceInbot .4s .6s ease-out both;}

.page5.swiper-slide-ani li:nth-of-type(1){animation: bounceInbot .4s .2s ease-out both;}
.page5.swiper-slide-ani li:nth-of-type(2){animation: bounceInbot .4s .4s ease-out both;}
.page5.swiper-slide-ani li:nth-of-type(3){animation: bounceInbot .4s .6s ease-out both;}
.page5.swiper-slide-ani .btn-more-world{animation: bounceInbot .4s .8s ease-out both;}

.gp-loadingbox{display: block;}


/*2023年10月26日 17:21:42 V4版本 新增新闻板块*/
.page7{height: 16.85rem; background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/m/v4-bg1.jpg) no-repeat; background-size: 100% 100%; padding-top: 1.46rem;}
.page7 .swiper-container{margin-top: .89rem; height: 11.4rem;}
.page7 li a{width: 9.87rem; height: 2.25rem; background: #222; display: block; margin: 0 auto .6rem; position: relative; padding-left: 4rem;}
.page7 .img-box{width: 4rem; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
.page7 .img-box img{width: 100%; height: 100%; object-fit: cover;}
.page7 .label{width: .98rem; height: .48rem; background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/m/v4-label.png) no-repeat; background-size: 100% 100%; color: #000; text-align: center; line-height: .48rem; position: absolute; left: 0; bottom: 0; font-size: .3rem; padding-right: .12rem;}
.page7 .txt-box{height: 100%; width: 5.07rem; margin: 0 auto; display:flex; display:-webkit-flex; align-items:center; justify-content:center; font-size: .4rem; line-height: .7rem; color: #feffff;}
.page7 .function-box{font-size: 0; text-align: center; height: .42rem; margin-top: .17rem;}
.page7 .function-box a,.page7 .function-box .swiper-pagination{display: inline-block; vertical-align: top;}
.page7 .function-box .swiper-pagination{margin: 0 .44rem; height: .42rem; padding:.07rem 0;}
.page7 .swiper-pagination span{width: .28rem; height: .28rem; border: 1px solid #fff; margin: 0 .22rem; display: inline-block; vertical-align: top;}
.page7 .swiper-pagination span.swiper-pagination-bullet-active{background: #fff; box-shadow: 0 0 .09rem rgba(255,255,255,1);}


.page7 .tit-black,.page7 .swiper-container,.page7 .function-box{opacity: 0;}
.page7.swiper-slide-ani .tit-black{animation: bounceInbot .4s .2s ease-out both;}
.page7.swiper-slide-ani .swiper-container{animation: bounceInbot .4s .4s ease-out both;}
.page7.swiper-slide-ani .function-box{animation: bounceInbot .4s .6s ease-out both;}