html,body,.wrapper,.page-box{width: 100%; height: 100%; position: relative;}
html,body { min-width: 1440px; max-width: 3840px; overflow-x: auto; margin: 0 auto;}
.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;-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;}
.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;}


@font-face {
 	font-family:AgencyFB;
 	src: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/font/AGENCYR.TTF);
}

.wrapper,.wrapper *{box-sizing: border-box;}
.wrapper{font-size: 12px; background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/comm-bg.jpg) 50% 50% no-repeat; background-size: cover;}

.spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/spr.png); background-repeat:no-repeat; background-size:10.24rem 1.86rem;}
.spr.btn-comm1.hover{ width:3.38rem; height:0.82rem; background-position:0.43732% 2.88462%;}
.spr.btn-comm1{ width:3.38rem; height:0.82rem; background-position:0.43732% 83.65385%;}
.spr.btn-comm2.hover{ width:3.38rem; height:0.82rem; background-position:50% 2.88462%;}
.spr.btn-comm2{ width:3.38rem; height:0.82rem; background-position:99.56268% 2.88462%;}
.spr.btn-comm5.hover{ width:1.77rem; height:0.6rem; background-position:40.49587% 69.04762%;}
.spr.btn-comm5{ width:1.77rem; height:0.6rem; background-position:61.62928% 69.04762%;}
.spr.btn-more.hover{ width:2.55rem; height:0.36rem; background-position:95.57867% 58%;}
.spr.btn-more{ width:2.55rem; height:0.36rem; background-position:95.57867% 83.33333%;}
.swiper-button-disabled .spr.btn-next,.swiper-button-disabled .spr.btn-next.hover{ width:0.44rem; height:0.16rem; background-position:36.32653% 87.64706%;}
.spr.btn-next:hover{ width:0.44rem; height:0.16rem; background-position:36.32653% 98.23529%;}
.spr.btn-next{ width:0.44rem; height:0.16rem; background-position:41.02041% 87.64706%;}
.swiper-button-disabled .spr.btn-prev,.swiper-button-disabled .spr.btn-prev.hover{ width:0.44rem; height:0.16rem; background-position:41.02041% 98.23529%;}
.spr.btn-prev.hover{ width:0.44rem; height:0.16rem; background-position:45.71429% 87.64706%;}
.spr.btn-prev{ width:0.44rem; height:0.16rem; background-position:45.71429% 98.23529%;}
.spr.mouse{ width:0.32rem; height:0.47rem; background-position:70.66532% 62.58993%;}
.isblack .spr.mouse{ width:0.32rem; height:0.47rem; background-position:70.66532% 97.84173%;}
.spr.triangle{ width:0.11rem; height:0.2rem; background-position:33.85982% 89.75904%;}

.page-box>.swiper-wrapper{ transition-timing-function: cubic-bezier(1,0,.2,1);}

.page1{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/p1-bg.jpg) 50% 50% no-repeat; background-size: cover; overflow: hidden;}
.wrapper-page1{width: 100%; height: 100%;}
.wrapper-page1 .main{width: 23.26rem; height: 9.9rem; -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/p1-mask.png); -webkit-mask-size: 100% 100%; position: absolute; right: 0; top: 50%; margin-top: -4.88rem;}
.wrapper-page1 .main-img{z-index: 2;}
.wrapper-page1 .main-txt{z-index: 5;}
.wrapper-page1 .bg{width: 100%; height: 100%;}
.wrapper-page1 .role{position: absolute; left: 4rem; bottom: 0; z-index: 3; object-fit: contain; object-position: 0 100%;}
.wrapper-page1 .role6{height: 94.6296%; width: 38.75%; left: 2rem;}
.wrapper-page1 .role7{height: 97.2685%; width: 77.23958%; left: 0;}
.wrapper-page1 .role8{height: 94.12%; width: 47.63%; left: .3rem;}
.wrapper-page1 .swiper-slide{overflow: hidden;}
.wrapper-page1 .txt-box{position: absolute; left: 0; top: 0; z-index: 2; padding-left: 10.4rem; width: 22.2rem; text-align: justify; padding-top: 2.34rem; color: #fff;}
.wrapper-page1 .txt{height: 3.3rem;}
.wrapper-page1 h3{font-size: 1rem; line-height: 1.24rem; font-weight: bold; padding-top: 1.24rem;}
.wrapper-page1 .txt-box-double h3{padding-top: 0;}
.wrapper-page1 h4{font-size: .24rem; margin-top: .24rem; line-height: .46rem; opacity: .8; width: 8.4rem; text-align: justify;}
.wrapper-page1 .btn-goto{display: block; color: #222; font-size: .28rem; text-align: center; line-height: .82rem; margin-top: .7rem; width: 3.38rem; height: .82rem;}

.btn-comm-hover{position: relative;}
.btn-comm-hover span{position: relative; z-index: 2;}
.btn-comm-hover i,.btn-comm-hover em{position: absolute; left: 0; top: 0;  transition: .3s ease-out opacity; z-index: 1;}
.btn-comm-hover em,.btn-comm-hover:hover i{opacity: 0;}
.btn-comm-hover:hover em{opacity: 1;}


.nav-wrapper1{position: absolute; width: 12.18rem; height: 1.74rem; right: .92rem; top: 50%; margin-top: 3.88rem; z-index: 8;}
.nav-wrapper1.little{font-size: 0; text-align: center;}
.nav-wrapper1 .swiper-container{width: 100%; height: 100%; position: relative; overflow: hidden;}
.nav-wrapper1 .swiper-slide{width: 4.06rem; height: 1.74rem;}
.nav-wrapper1.little .swiper-wrapper{display: block;}
.nav-wrapper1.little .swiper-slide{display: inline-block; vertical-align: top; *zoom:1; *display: inline;}
.nav-wrapper1 .btn-slide{ position: absolute; top: 50%; margin-top: -.07rem; width: .44rem; height: .16rem;}
.nav-wrapper1.little .btn-slide{display: none;}
.nav-wrapper1 .btn-slide-prev{left: -.54rem;}
.nav-wrapper1 .btn-slide-next{right: -.54rem;}
.nav-wrapper1 .btn-comm-hover.swiper-button-disabled{cursor: default;}
.nav-wrapper1 .box{margin: 0 auto; width: 3.5rem; height: 100%; background: #000; position: relative; cursor: pointer; -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/p1-little-mask.png); -webkit-mask-size: 100% 100%;}
.nav-wrapper1 .box:after,.nav-wrapper1 .box:before{content: ''; position: absolute; left: 0; bottom: 0; width: 100%;}
.nav-wrapper1 .box:before{background: #111112; height: 100%; z-index: 2; opacity: .6;}
.nav-wrapper1 .box img{width: 100%; opacity: .5;}
.nav-wrapper1 .box:after{height: .05rem; background: #fff; opacity: .3; z-index: 4; display: none;}
.nav-wrapper1 .box .bar{position: absolute; left: 0; bottom: 0; height: .05rem; background: #fff; z-index: 5;  opacity: 0;}
.nav-wrapper1 .name{width: 90%; position: absolute; left: .2rem; color: #fff; line-height: .35rem; font-size: .22rem; bottom: .14rem; z-index: 3; opacity: .4; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.nav-wrapper1 .box img,.nav-wrapper1 .name,.nav-wrapper1 .box:before{transition: .3s ease opacity;}
.nav-wrapper1 .box:hover img,.nav-wrapper1 .box:hover .name,.nav-wrapper1 .on .box img,.nav-wrapper1 .on .box .name,.nav-wrapper1 .on .box .bar{opacity: 1;}
.nav-wrapper1 .box:hover:before,.nav-wrapper1 .on .box:before{opacity: 0;}
.nav-wrapper1 .on .box:after{display: block;}
.nav-wrapper1 .on .box .bar{width: 100%; animation: pg-ani 8s ease-in reverse both;}
@keyframes pg-ani {100% {width: 0%;}}



.page2 ul{width: 22.08rem; height: 10.04rem; position: absolute; left: 50%; top: 50%; margin-top: -5rem; margin-left: -10.47rem;}
.page2 li{width: 6.31rem; height: 4.73rem; -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/p2-mask2.png); -webkit-mask-size: 100% 100%; position: absolute; overflow: hidden; padding-left: .38rem; padding-top: 2.22rem;}
.page2 li img{width: 100%; position: absolute; left: 0; top: 0;}
.page2 li p{position: relative; z-index: 2;}
.page2 li:nth-of-type(1){left: 0; top: 0; width: 15.18rem; height: 100%; -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/p2-mask1.png); -webkit-mask-size: 100% 100%; padding-left: .7rem; padding-top: 6.52rem;}
.page2 li:nth-of-type(2){ right: 0; top: 0;}
.page2 li:nth-of-type(3){ right: 0; bottom: 0;}

.page2 li .p2-detail{position: absolute; bottom: .35rem;}
.page2 li .english{font-family:AgencyFB; font-size: 0; height: .4rem; opacity: 0; visibility: hidden;}
.page2 li .name{font-size: .38rem; line-height: .58rem; color: #fff; font-weight: bold; letter-spacing: .06rem;}
.page2 li .des{font-size: .22rem; line-height: .38rem; color: #fff; opacity: .5; width: 3.14rem; text-align: justify; margin-top: .1rem;}
.page2 li .btn-understand{position: absolute; right: .3rem; bottom: .35rem; color: #222; font-size: .24rem; text-align: center; line-height: .6rem; z-index: 3; width: 1.77rem; height: .6rem;}
.page2 li:nth-of-type(1) .p2-detail{bottom: .68rem;}
.page2 li:nth-of-type(1) .english{line-height: 1rem; height: 1.08rem;}
.page2 li:nth-of-type(1) .name{font-size: .58rem; line-height: .62rem;}
.page2 li:nth-of-type(1) .des{width: 8.24rem; font-size: .24rem; line-height: .4rem; margin-top: .42rem;}
.page2 li:nth-of-type(1) .btn-understand{font-size: .28rem; line-height: .82rem; right: .68rem; bottom: .68rem; width: 3.38rem; height: .82rem;}
.page2 .btn-more-world{position: absolute; left: 50%; top: 50%; margin-left: 9.08rem; margin-top: 5.4rem; color: #fff; font-size: .26rem; text-align: center; padding-right: .18rem; width: 2.55rem; height: .36rem;}
.page2 .btn-more-world:hover{color: #ffb900; transition: .3s ease-out color;}

.page3{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v7-p3-bg.jpg) 50% 50% no-repeat; background-size: cover;}
.page3 .txt-box{width: 14rem; position: absolute; left: 50%; margin-left: -7rem; height: 6.6rem; top: 50%; margin-top: .54rem; font-size: 0; text-align: center; color: #fff;}
.page3 h5{font-size: .38rem; line-height: .5rem; position: relative;} 
.page3 h5:before,.page3 h5:after{content:'' ; position: absolute; top: 50%; margin-top: -.01rem; width: 2.36rem; height: 1px; background: #fff;}
.page3 h5:before{left: 0;}
.page3 h5:after{right: 0;}
.page3 h6{font-size: 1.68rem; line-height: 2.08rem; font-weight: bold; text-align: justify;}
.page3 .h-box{display: inline-block; vertical-align: top;}
.page3 .txt-box p{font-size: .28rem; line-height: .4rem; margin-top: .27rem;}
.page3 .txt-box a{display: block; margin: .52rem auto 0; font-size: .28rem; color: #222; line-height: .82rem; width: 3.38rem; height: .82rem;}
.page3 .mask{position: absolute; left: 0; top: 0; height: 100%;}

.page4 ul{width: 100%; height: 100%;}
.page4 li{float: left; width: 14.0625%; position: relative; height: 100%; overflow: hidden; cursor: pointer;}
.page4 li .role,.page4 li .role-mask{width: 100%; height: 100%; display: block; position: relative; z-index: 4;}
.page4 li.on .role,.page4 li.on .role-mask{display: none;}
.page4 i.role-mask{position: absolute; left: 0; top: 0;}
.page4 li.role3{width: 21.484375%;}
.page4 li.on{width: 50.390625%; cursor: default;}
.page4 li.role3.on{width: 57.8125%;}
.page4 .txt-box{height: 4.08rem; width: 7rem; position: absolute; left: 50%; bottom: 0; margin-left: -5.5rem; z-index: 6;}
.page4 .role3 .txt-box{margin-left: -4.66rem;}
.page4 .txt-box p{font-size: .28rem; line-height: .42rem; text-align: justify; color: #fff; height: 1.74rem;}
.page4 .txt-box a{display: block; color: #fff; font-size: .28rem; line-height: .8rem; text-align: center; width: 3.36rem; height: .8rem; transition: .3s ease-out color;}
.page4 .txt-box a:hover{ color: #222;}
.page4 .txt-box a img{width: 100%; transition: .3s ease-out opacity; position: absolute; left: 0; top: 0;}
.page4 .txt-box .btn-hover,.page4 .txt-box a:hover .btn-default{opacity: 0;}
.page4 .txt-box a:hover .btn-hover{ opacity: 1;}

.page4 .role-box{position: absolute; left:0; top: 0; width: 0%; height: 100%; z-index: 8; overflow: hidden; transition: .3s ease-out all; opacity: 0;}
.page4 .bg-box{position: absolute; left: 50%; top: 0; height: 100%;}
.page4 li.on .role-box{width: 100%; opacity: 1;}
.page4 .role1 .role{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v7-p2-role1.jpg) 50% 50% no-repeat; background-size: cover;}
.page4 .role1 .role-mask{background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v7-p2-role1.hover.jpg) -9999px -9999px no-repeat; background-size: cover;}
.page4 .role1 .bg-box{background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v7-p2-big-role1.jpg) 50% 50% no-repeat; background-size: cover;}
.page4 .role2 .role{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v7-p2-role2.jpg) 50% 50% no-repeat; background-size: cover;}
.page4 .role2 .role-mask{background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v7-p2-role2.hover.jpg) -9999px -9999px no-repeat; background-size: cover;}
.page4 .role2 .bg-box{background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v7-p2-big-role2.jpg) 50% 50% no-repeat; background-size: cover;}
.page4 .role3 .role{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v10-p2-role1.jpg) 50% 50% no-repeat; background-size: cover;}
.page4 .role3 .role-mask{background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v10-p2-role1.hover.jpg) -9999px -9999px no-repeat; background-size: cover;}
.page4 .role3 .bg-box{background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v10-p2-big-role1.jpg) 50% 50% no-repeat; background-size: cover;}
.page4 .role4 .role{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v10-p2-role2.jpg) 50% 50% no-repeat; background-size: cover;}
.page4 .role4 .role-mask{background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v10-p2-role2.hover.jpg) -9999px -9999px no-repeat; background-size: cover;}
.page4 .role4 .bg-box{background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v10-p2-big-role2.jpg) 50% 50% no-repeat; background-size: cover;}

.page4 .role1:hover .role-mask,.page4 .role2:hover .role-mask,.page4 .role3:hover .role-mask,.page4 .role4:hover .role-mask{background-position: 50% 50%;}

.page4 .role-img{position: absolute; bottom: 0; right: 0; z-index: 2;}
.page4 .role-name{position: absolute; top: 4.9rem; height: 1.2rem; left: 50%; z-index: 3; margin-left: -5.43rem;}
.page4 .role-name-eng{position: absolute; top: 2.8rem; height: 3.65rem; left: 50%; margin-left: -5.4rem; z-index: 1;}
.page4 .role1 .role-img{width: 12.9rem;}
.page4 .role3 .role-name{ margin-left: -4.57rem;}
.page4 .role3 .role-name-eng{ margin-left: -4.55rem;}
.page4 .mask{position: absolute; left: 50%; bottom: 0; z-index: 3;}

.page4 .role2 .role-img{width: 11.93rem;}
.page4 .role3 .role-img{width: 14.82rem;}
.page4 .role4 .role-img{width: 12.9rem;}


.page5 .tab-divbox{width: 21.6rem; position: absolute; left: 50%; margin-left: -10.46rem; top: 50%; margin-top: -4.88rem;}
.page5 .tab-main{display: none;}
.page5 .tab-main.on{display: block;}
.page5 .tab-divbox .img-box{float: left; width: 14.8rem; height: 8.27rem; -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/p5-mask.png); -webkit-mask-size: 100% 100%;}
.page5 .tab-main .img-box img{width: 100%;}
.page5 .txt-box{width: 6rem; float: right; margin-top: .24rem; color: #fff;}
.page5 .txt-box .logo{display: block; margin: 0 auto; width: 2.5rem;}
.page5 .txt-box .name{ font-size: .72rem; line-height: .9rem; text-align: center; margin-top: .14rem; font-weight: bold;}
.page5 .txt-box .dec{font-size: .26rem; line-height: .46rem; text-align: justify; margin-top: .48rem; height: 2.46rem;}
.page5 .txt-box a{display: block; margin: 0 auto; font-size: .28rem; color: #222; line-height: .82rem; text-align: center; width: 3.38rem; height: .82rem; pointer-events: none;}
.page5 .txt-box a{pointer-events:all}

.page5 .tab-btnbox{width: 100%; left: 0; position: absolute; font-size: 0; text-align: center; top: 50%; height: 1.7rem; margin-top: 4rem;}
.page5 .tab-btnbox ul{display: inline-block; vertical-align: top;}
.page5 .tab-btnbox li,.page5 .tab-btnbox a{ width: 2.1rem; margin: 0 .1rem; display: inline-block; vertical-align: top; cursor: pointer;}
.page5 .tab-btnbox .img-box{height: 1rem; background: #222; transition: .3s ease all; padding-top: .1rem;}
.page5 .tab-btnbox li.on .list-blue,.page5 .tab-btnbox .list-blue:hover{background: #609bde;}
.page5 .tab-btnbox li.on .list-red,.page5 .tab-btnbox .list-red:hover{background: #730e0e;}
.page5 .tab-btnbox li.on .list-grey,.page5 .tab-btnbox .list-grey:hover{background: #959595;}
.page5 .tab-btnbox li.on .list-purple,.page5 .tab-btnbox .list-purple:hover{background: #a56cf2;}
.page5 .tab-btnbox li.on .list-yellow,.page5 .tab-btnbox .list-yellow:hover{background: #ff9e3b;}
.page5 .tab-btnbox li.on .list-deep-purple,.page5 .tab-btnbox .list-deep-purple:hover{background: #a100c9;}
.page5 .tab-btnbox img{opacity: .4; width: .8rem; margin: 0 auto;}
.page5 .tab-btnbox li.on img,.page5 .tab-btnbox li:hover img{opacity: 1;}
.page5 .tab-btnbox p{color: rgba(255,255,255,.4); font-size: .24rem; line-height: .3rem; margin-top: .16rem; transition: .3s ease all;}
.page5 .tab-btnbox a{background: #222; height: 1rem; color: rgba(255,255,255,.5); transition: .3s ease all;}
.page5 .tab-btnbox a span{display: inline-block; vertical-align: top; padding-right: .23rem; font-size: .24rem; line-height: 1rem; position: relative;}
.page5 .tab-btnbox a i{position: absolute; right: 0; top: 50%; margin-top: -.1rem;}
.page5 .tab-btnbox li.on .img-box,.page5 .tab-btnbox li:hover .img-box{opacity: 1;}
.page5 .tab-btnbox li.on p{color: rgba(255,255,255,1); font-weight: bold;}
.page5 .tab-btnbox li:hover p{color: rgba(255,255,255,1);}
.page5 .tab-btnbox li:hover .img-box{transform: scale(1.1);}
.page5 .tab-btnbox li.on .img-box,.page5 .tab-btnbox li.on:hover .img-box{transform: scale(1);}
.page5 .tab-btnbox a:hover{color: rgba(255,255,255,1); background: #333;}

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

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

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

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

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


.page1.swiper-slide-ani .wrapper-page1 .swiper-slide-ani .main{animation: bounceInright .4s .2s ease-out;}
.page1.swiper-slide-ani .wrapper-page1 .swiper-slide-ani .txt-box{animation: bounceInright .4s .4s ease-out both;}
.page1.swiper-slide-ani .wrapper-page1 .swiper-slide-ani .role{animation: bounceInleft .4s .6s ease-out both;}
.page1.swiper-slide-ani .nav-wrapper1{animation: bounceInbot .4s .6s ease-out both;}

.page2.swiper-slide-ani li:nth-of-type(1){animation: bounceInleft .4s 1s ease-out both;}
.page2.swiper-slide-ani li:nth-of-type(2){animation: bounceInright .4s 1.1s ease-out both;}
.page2.swiper-slide-ani li:nth-of-type(3){animation: bounceInright .4s 1.2s ease-out both;}
.page2.swiper-slide-ani .btn-more-world{animation: bounceInbot .4s 1.3s ease-out both;}

.page3.swiper-slide-ani .txt-box h5{animation: bounceInbot .4s .6s ease-out both;}
.page3.swiper-slide-ani .txt-box h6{animation: bounceInbot .4s .8s ease-out both;}
.page3.swiper-slide-ani .txt-box p{animation: bounceInbot .4s 1s ease-out both;}
.page3.swiper-slide-ani .txt-box a{animation: bounceInbot .4s 1.2s ease-out both;}

.page4.swiper-slide-ani .on .txt-box p{animation: bounceInbot .4s .6s ease-out both;}
.page4.swiper-slide-ani .on .txt-box a{animation: bounceInbot .4s .8s ease-out both;}

.page5.swiper-slide-ani .tab-main.first .tab-divbox .img-box{animation: bounceInleft .4s 1s ease-out both;}
.page5.swiper-slide-ani .tab-main.first .tab-divbox .txt-box{animation: bounceInright .4s 1s ease-out both;}
.page5.swiper-slide-ani .tab-divbox .img-box{animation: bounceInleft .4s .1s ease-out both;}
.page5.swiper-slide-ani .tab-divbox .txt-box{animation: bounceInright .4s .1s ease-out both;}
.page5.swiper-slide-ani .tab-btnbox{animation: bounceInbot .4s 1s ease-out both;}



@-webkit-keyframes move{50%{-webkit-transform:translate3d(0,-.1rem,0)}}
@keyframes move{50%{transform:translate3d(0,-.1rem,0)}}


.nav-bar{position: absolute; left: 0; top: 0; z-index: 9;}
.isblack .nav-bar{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/comm/state2_xbg.png) 0 0 repeat-x; background-size: .1rem 1.2rem;}
 

/*左侧导航*/
.side-bar{height: 6.84rem; position: absolute; left: 0; top: 50%; margin-top: -3.42rem; z-index: 9; width: 2.2rem;}
.side-bar ul{position: relative; width: 100%; height: 100%; overflow: hidden; padding-top: .92rem;}
.side-bar ul::before{content: '';width: .06rem;height: 6.84rem;background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/comm/line_icon2.png) no-repeat; position: absolute; left: .74rem; top: 50%; margin-top: -3.42rem; background-size: 100% 100%;}
.side-bar li{cursor: pointer;text-align: center; font-size: 0; height: 1.17rem;}
.side-bar li span{display: inline-block; vertical-align: top; color: rgba(34,34,34,.5); height: .3rem; line-height: .3rem; transition: .3s ease color;}
.side-bar li .num{width: .38rem; font-family:AgencyFB; font-size: .22rem;}
.side-bar li .txt{width: 1.04rem; font-size: .2rem;}
.side-bar li .rectangle{width: .08rem; position: relative;}
.side-bar li .rectangle:after{content: ''; width: .08rem; height: .08rem; position: absolute;left: 50%;top: 50%; margin-top: -.04rem; margin-left: -.04rem; display: none;}
.side-bar li.on .rectangle:after,.side-bar li:hover .rectangle:after{display: block; background-color: #222;}
.side-bar li.on span,.side-bar li:hover span{color: rgba(34,34,34,1);}


.isblack .side-bar ul::before{background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/comm/line_icon1.png) no-repeat; background-size: 100% 100%;}
.isblack .side-bar li.on .rectangle:after,.isblack .side-bar li:hover .rectangle:after{background-color: #fff;}
.isblack .side-bar li span{color: rgba(255,255,255,.5);}
.isblack .side-bar li.on span,.isblack .side-bar li:hover span{color: rgba(255,255,255,1);}


.gp-loadingbox{display: block;}
.gp-loadingbox *{box-sizing: border-box;}

/*渠道按钮*/
.footer-btn-box{position: absolute; bottom: .44rem; left: .6rem; z-index: 9; display: none;}



/*版权信息按钮*/
.btn-copy{right: .6rem; position: absolute; bottom: .44rem; z-index: 9; padding-right: .36rem; font-size: .2rem; line-height: .54rem; color: #363636; transition: .3s ease color; height: .54rem;}
.btn-copy i,.btn-copy em{position: absolute; right: 0; top: .155rem; left: auto;}
.btn-copy:hover{color: #222;}
.isblack .btn-copy{color: #b3b3b3;}
.isblack .btn-copy:hover{color: #fff;}
.isblack .correct.btn-copy{color: #363636;}
.isblack .correct.btn-copy:hover{color: #222;}

/*底部*/
.copygirht_details{position: absolute; left: 0; bottom: 0; z-index: 99; width: 100%; transform: translateY(230px);}
.copygirht_details.show{transform: translateY(0);}



.mouse-scroll {
	width: .24rem;
	height: .12rem;
	position: absolute;
	left: 50%;
	margin-left: -.12rem;
	bottom: 1rem;
	z-index: 9;
	opacity: .6;
}
.mouse-scroll.on{
	display: block;
}

.scroll-arrows
{
  display: block;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: .02rem solid #000;
  border-bottom: .02rem solid #000;
  margin: 0 0 .03rem .04rem;
  width: .16rem;
  height: .16rem;
}


.unu
{
  margin-top: .01rem;
}

.unu, .doi, .trei
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
  
}

.unu
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}

.doi
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .2s;
  animation-direction: alternate;
  
  margin-top: -.06rem;
}

.trei
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .3s;
  animation-direction: alternate;
  
  
  margin-top: -.06rem;
}

.sam-mouse {
  height: .42rem;
  width: .24rem;
  border-radius: .14rem;
  transform: none;
  border: .02rem solid #000;
  top: 1.7rem;
}


.wheel {
  display: block;
  margin: .05rem auto;
  background: #000;
  position: relative;
  
  height: .04rem;
  width: .04rem;
  border: .02rem solid #000;
  -webkit-border-radius: .08rem;
          border-radius: .08rem;
}

.isblack .scroll-arrows{border-right: .02rem solid #fff; border-bottom: .02rem solid #fff;}
.isblack .sam-mouse{border: .02rem solid #fff;}
.isblack .wheel{background: #fff; border: .02rem solid #fff;}

.wheel {
  -webkit-animation: mouse-wheel 0.6s linear infinite;
  -moz-animation: mouse-wheel 0.6s linear infinite;
  animation: mouse-wheel 0.6s linear infinite;
}

@-webkit-keyframes mouse-wheel{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-moz-keyframes mouse-wheel {
  50%{top:.04rem}
}
@-o-keyframes mouse-wheel {

    50%{top:.04rem}
}
@keyframes mouse-wheel {

   50%{top:.04rem}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}


/*2023年10月25日 16:39:30 V4版本 新增新闻板块*/
.news-box{width: 4.48rem; height: 8.71rem; background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v4-bg1.png) no-repeat; background-size: 100% 100%; position: absolute; right: 0; top: 50%; margin-top: -4.355rem; z-index: 6; padding-left: .77rem; padding-top: .28rem; transform: translateX(4.05rem); transition:.3s ease-out transform;}
.news-box.show{transform: translateX(0);}
.news-box .btn-expand{position: absolute; width: .44rem; height: .87rem; left: 0; top: 0; display:flex; display:-webkit-flex; align-items:center; justify-content:center; box-shadow: 0 0 1px rgba(255,255,255,.5); transition:.3s ease-out box-shadow;}
.news-box .btn-expand:hover{box-shadow: 0 0 1px rgba(255,255,255,1);}
.news-box.show .btn-expand{box-shadow: 0 0 1px rgba(255,255,255,0);}
.news-box .btn-expand i{width: .08rem; height: .18rem; -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v4-triangle.png); -webkit-mask-size: 100% 100%; display: block;background: #fdfdfc; transition: .3s ease-out background,.3s ease-out transform;}
.news-box.show .btn-expand i{transform: rotate(180deg);}
.news-box .btn-expand:hover i{background: #ffb800;}
.news-box .news-tit{font-size: .24rem; color: #fff; line-height: .36rem; height: .55rem;}
.news-box .news-listbox{height: 7.54rem; overflow-y: auto; width: 3.62rem;}
.news-box .news-listbox::-webkit-scrollbar {width:.06rem;height:.06rem;}
.news-box .news-listbox::-webkit-scrollbar-track-piece {background:transparent; border-radius:.03rem;}
.news-box .news-listbox::-webkit-scrollbar-thumb {background:rgba(255,255,255,.2); border-radius:.03rem;}

.news-box .news-listbox a{height: .85rem; padding: .02rem 0; display: block; margin-bottom: .27rem; position: relative; padding-left: 1px;}
.news-box .img-box{width: 1.43rem; height: .81rem; position: relative; display: block; box-shadow: 0 0 1px rgba(255,255,255,.5); transition:.3s ease-out box-shadow;}
.news-box .news-listbox a:hover .img-box{box-shadow: 0 0 1px rgba(255,255,255,1);}
.news-box .img-box img{width: 100%; height: 100%; object-fit: cover;}
.news-box .img-box .label{position: absolute; left: -.01rem; bottom: -.01rem; width: .6rem; height: .27rem; background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v4-label.png) no-repeat; background-size: 100% 100%; color: #222; font-size: .18rem; line-height: .27rem; text-align: center; padding-right: .06rem;}
.news-box .txt-box{height: 100%; display:flex; display:-webkit-flex; align-items:center; justify-content:left; width: 1.82rem; position: absolute; top: 0; left: 1.62rem; font-size: .2rem; line-height: .2667rem; color: rgba(254,255,255,.4); text-align: justify; transition: .3s ease-out color;}
.news-box .news-listbox a:hover .txt-box{color:rgba(254,255,255,1);}
.news-box .txt-box:after{content: ''; background: #5a5556; opacity: .3; height: 1px; width: 100%; position: absolute; left: 0; bottom: -.135rem;}
.news-box .news-listbox a:nth-last-of-type(1){margin-bottom: 0;}
.news-box .news-listbox a:nth-last-of-type(1) .txt-box:after{display: none;}