html,body,.wrapper,.page-box{width: 100%; height: 100%; position: relative;}
html,body { min-width: 1400px; 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;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;}


@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;}


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

.page1{ background: url(//game.gtimg.cn/images/gp/cp/a20230817role/p1-bg.jpg) 50% 50% no-repeat; background-size: cover; overflow: hidden;}

.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;}






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

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

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

@keyframes bounceIntop {
	0% {opacity: 0;transform: translateY(-2rem);}
	100% { opacity: 1; 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;}
}



@-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;}
.white .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: 5.67rem; position: absolute; left: 0; top: 50%; margin-top: -2.83rem; z-index: 9; width: 2.2rem;}
.side-bar ul{position: relative; width: 100%; height: 100%; overflow: hidden; padding-top: .93rem;display: flex;justify-content: center; flex-wrap:wrap;align-content:center;}
.side-bar ul::before{content: '';width: .02rem;height: 5.62rem;background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-info-navbar2.png) no-repeat; position: absolute; left: .76rem; top: 50%; margin-top: -2.81rem; background-size: 100% 100%;}
.side-bar li{cursor: pointer;text-align: center; font-size: 0; height: 1.14rem; position: relative;}
.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; margin-left: .38rem;}
.side-bar li .rectangle:after{content: ''; width: .08rem; height: .08rem; position: absolute;left: 50%;top: .1rem; margin-left: -.04rem; background-color: #7a5e14; transform: scale(.75);}
.side-bar li.on .rectangle:after,.side-bar li:hover .rectangle:after{ background-color: #222; transform: scale(1);}
.side-bar li.on span,.side-bar li:hover span{color: rgba(34,34,34,1); font-weight: bold;}
.side-bar li.side-bar-li2 { top: -.02rem;}
.side-bar li.side-bar-li3 { top: .03rem;}
.side-bar li.side-bar-li4 { top: .01rem;}
.side-style1 li:nth-child(1) { top: .06rem;}
.side-style1 li:nth-child(2) { top: .12rem;}
.side-style1 li:nth-child(3) { top: .03rem;}
.side-style2 li:nth-child(1) { top: .06rem;}
.side-style2 li:nth-child(2) { top: .12rem;}

.isblack .side-bar ul::before{background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-info-navbar1.png) no-repeat; background-size: 100% 100%;}
.isblack .side-bar li .rectangle:after{ background-color: #9fa0a0;}
.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); font-weight: bold;}

.white .side-bar ul::before{background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-info-navbar1.png) no-repeat; background-size: 100% 100%;}
.white .side-bar li .rectangle:after{ background-color: #9fa0a0;}
.white .side-bar li.on .rectangle:after,.isblack .side-bar li:hover .rectangle:after{background-color: #fff;}
.white .side-bar li span{color: rgba(255,255,255,.5);}
.white .side-bar li.on span,.isblack .side-bar li:hover span{color: rgba(255,255,255,1); font-weight: bold;}


/*渠道按钮*/
.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;
}


.scroll-arrows
{
  display: block;
  width: .05rem;
  height: .05rem;
  -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 {
  height: .05rem;
  width: .02rem;
  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; }
}

@keyframes fadeInDown1 {
    0% {
        opacity: 0;
        transform: translate3d(0,100px,0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}
@keyframes fadeIn1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes fadeOut1 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.fadeanim { animation: fadeInDown1 .4s .2s ease-out both;}
.fadeanim1 { animation-delay: 0s; animation-duration: .1s;}
.comm-scroll::-webkit-scrollbar {
  width: .1rem;
  height: .1rem; 
  background-color: transparent;
}
.comm-scroll::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.comm-scroll::-webkit-scrollbar-corner { 
  display: block; 
}
.comm-scroll::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #353535; 
  border-radius: 4px; 
}
/*弹窗*/
.pop_layer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.96); z-index: 99;}
.pop_comm { position: fixed !important; left: 50%; top: 50%; -webkit-transform:translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99;}
.comm_pop { display: none; position: relative; outline: none;}

.pop_close { position: absolute; right: -1.48rem; top: 0; z-index: 5; transition: all .3s; width: .54rem; height: .62rem;}
.pop_close em { position: absolute; left: 0; top: 0; z-index: 1; transition: .3s ease-in-out;}
.pop_close em.pop-close-icon { opacity: 1;}
.pop_close em.pop-close-icon.hover { opacity: 0;}
.pop_close:hover em.pop-close-icon { opacity: 0;}
.pop_close:hover em.pop-close-icon.hover { opacity: 1;}
/*角色详情*/
.role-info-spr { background-image: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-info-spr.png); background-repeat: no-repeat; background-size: 9.1rem 2.24rem; }

.role-info-spr.pop-close-icon.hover { width:0.54rem; height:0.62rem; background-position:60.3972% 87.65432%; }
.role-info-spr.pop-close-icon { width:0.54rem; height:0.62rem; background-position:67.87383% 87.65432%; }
.role-info-spr.role-info-em1 { width:0.15rem; height:0.22rem; background-position:25.92179% 94.05941%; }
.role-info-spr.role-info-em2 { width:0.15rem; height:0.23rem; background-position:20.3352% 94.52736%; }
.role-info-spr.role-info-em3 { width:0.15rem; height:0.22rem; background-position:28.71508% 94.05941%; }
.role-info-spr.role-info-em4 { width:0.15rem; height:0.23rem; background-position:23.12849% 94.52736%; }
.role-info-spr.role-info-line-black { width:8.9rem; height:0.11rem; background-position:50% 4.69484%; }
.role-info-spr.role-info-line-white { width:8.9rem; height:0.11rem; background-position:50% 14.55399%; }
.role-info-spr.role-info-line1 { width:1.58rem; height:0.03rem; background-position:42.55319% 75.11312%; }
.role-info-spr.role-info-line2 { width:1.58rem; height:0.03rem; background-position:90.42553% 23.52941%; }
.role-info-spr.role-info-next.hover { width:0.8rem; height:0.8rem; background-position:38.55422% 36.11111%; }
.role-info-spr.role-info-next { width:0.8rem; height:0.8rem; background-position:49.39759% 36.11111%; }
.role-info-spr.role-info-next.swiper-button-disabled { width:0.8rem; height:0.8rem; background-position:60.24096% 36.11111%; }
.role-info-spr.role-info-prev.hover { width:0.8rem; height:0.8rem; background-position:71.08434% 36.11111%; }
.role-info-spr.role-info-prev { width:0.8rem; height:0.8rem; background-position:81.92771% 45.13889%; }
.role-info-spr.role-info-prev.swiper-button-disabled { width:0.8rem; height:0.8rem; background-position:92.77108% 45.13889%; }
.role-info-spr.role-info-videobtn { width:1.62rem; height:1.62rem; background-position:1.3369% 83.87097%; }
.role-info-spr.role-info-videobtn1 { width:1.28rem; height:1.28rem; background-position:23.27366% 54.16667%; }
.role-info-spr.tit-left { width:1.87rem; height:0.14rem; background-position:39.00415% 90.47619%; }
.role-info-spr.tit-right { width:1.87rem; height:0.14rem; background-position:44.26003% 67.61905%; }


.role-info-main { width: 19.2rem; height: 10.8rem; position: absolute; top: 50%; left: 50%; margin: -5.4rem 0 0 -9.6rem; padding-left: 1.86rem;}
.role-info-slogan { width: 14rem; height: 3.06rem; padding-top: 1.82rem; margin-top: .4rem;}
.role-info-slogan p { color: #222222; font-size: .4rem; line-height: .71rem; width: auto; position: relative; display: inline-block; vertical-align: top; margin-left: -.24rem; padding: 0 .32rem; font-weight: bold;}
.role-info-slogan p em { position: absolute;}
.role-info-slogan.nopet { margin-bottom: -.6rem;}
.role-info-slogan.nopet .role-info-petphrase { display: none;}
.role-info-em1,.role-info-em3 { left: 0; top: 0;}
.role-info-em2,.role-info-em4 { right: 0; bottom: 0;}
.role-info-line { margin: .26rem 0 .38rem 0; width: 100%; height: .11rem;}
.role-info-text1 { width: 9.3rem; height: auto; overflow: hidden;}
.role-info-text1 li { float: left; line-height: .44rem; padding-left: .86rem; -webkit-box-sizing:border-box; box-sizing:border-box; position: relative; color: #222222; font-size: .28rem; font-weight: bold;}
.role-info-text1 li span { position: absolute; left: 0; top: 0; color: #956e15; font-size: .26rem; font-weight: normal;}
.role-info-text1 li.role-info-li1 { width: 100%;}
.role-info-text1 li.role-info-li2 { width: 2.9rem;}
.role-info-text1 li.role-info-li5 { width: 2.9rem; padding-left: 1.3rem;}
.role-info-text1 li.role-info-li3 { width: 2.03rem;}
.role-info-text1 li.role-info-li4 { width: 4.1rem; padding-left: 1.22rem;}
.role-info-text1 li.role-info-li6 { width: auto; padding-left: 1.28rem;}
.role-info-text2 { width: 9.1rem; height: auto; margin: .38rem auto .4rem 0; text-align: justify;}
.role-info-text2 p { width: 9.1rem; color: #654d1c; font-size: .21rem; line-height: .4rem; margin-bottom: .26rem;}
.role-info-text2.comm-scroll { width: 9.3rem; overflow-y: auto;}
.role-info-text2.comm-scroll p { width: 9rem;}
.role-info-read { width: 3.36rem; height: .8rem;}
.role-info-read,.role-info-space { width: 3.36rem; display: inline-block; vertical-align: top;}
.role-info-space { width: 3.36rem; display: none; margin-left: .32rem;}
.role-info-audio { width: .44rem; height: .44rem; position: absolute; top: .14rem; right: -.6rem; border-radius: 50%; transition: all .3s;}
.role-info-audio i { position: absolute; top: 50%; left: 50%; width: .26rem; height: .19rem; margin: -.1rem 0 0 -.13rem;}
.role-info-audio-i1 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-info-audio-1.png) no-repeat 0 0; background-size: 100% 100%; visibility: visible;}
.role-info-audio-i2 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-info-audio-2.png) no-repeat 0 0; background-size: 100% 100%; visibility: hidden;}
.role-info-audio.play .role-info-audio-i1 { visibility: hidden;}
.role-info-audio.play .role-info-audio-i2 { visibility: visible;}
.comm-white-btn { display: block; margin: 0 auto; width: 3.36rem; height: .8rem; position: relative;}
.comm-white-btn span { display: block; width: 100%; line-height: .8rem; color: #fff; font-size: .28rem; text-align: center; position: relative; z-index: 2; transition: .3s ease-out;}
.comm-white-btn em { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1;transition: .3s ease-out;}
.comm-white-btn em.comm-white-btnbg { opacity: 1; background: url(//game.gtimg.cn/images/gp/cp/a20230817role/btn-comm2.png) no-repeat 0 0; background-size: 100% 100%;}
.comm-white-btn em.comm-white-btnbg.hover { opacity: 0; background: url(//game.gtimg.cn/images/gp/cp/a20230817role/btn-comm2.hover.png) no-repeat 0 0; background-size: 100% 100%;}
.comm-white-btn:hover span { color: #222;}
.comm-white-btn:hover em.comm-white-btnbg { opacity: 0;}
.comm-white-btn:hover em.comm-white-btnbg.hover { opacity: 1;}

.role-info-btn1 { display: block; margin: 0 auto; width: 3.36rem; height: .8rem; position: relative;}
.role-info-btn1 span { display: block; width: 100%; line-height: .8rem; color: #3fd8e3; font-size: .28rem; text-align: center; position: relative; z-index: 2; transition: .3s ease-out;}
.role-info-btn1 em { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1;transition: .3s ease-out;}
.role-info-btn1 em.role-info-btn1bg { opacity: 1; background: url(//game.gtimg.cn/images/gp/cp/a20230817role/btn-ms.png) no-repeat 0 0; background-size: 100% 100%;}
.role-info-btn1 em.role-info-btn1bg.hover { opacity: 0; background: url(//game.gtimg.cn/images/gp/cp/a20230817role/btn-ms-hover.png) no-repeat 0 0; background-size: 100% 100%;}
.role-info-btn1:hover span { color: #232425;}
.role-info-btn1:hover em.role-info-btn1bg { opacity: 0;}
.role-info-btn1:hover em.role-info-btn1bg.hover { opacity: 1;}

.role-info-page2-cont { width: 100%; height: 100%;}
.role-info-page2 video { object-fit: cover; width: 100%; height: 100%;}
.role-info-page2-box { position: absolute; width: 12rem; top: 50%; left: 50%; margin: -.78rem 0 0 -6rem;}
.role-info-vbox { background: none !important;}
.role-info-videobtn { display: block; margin: 0 auto; opacity: .6; transition: all .3s;}
.role-info-videobtn:hover { opacity: 1;}
.role-info-page2-vpic { width: 100%; height: 1.82rem; margin: .59rem auto .38rem;}
.role-info-page2-vname { width: 100%;}
.role-info-page2-vname p { width: 100%; font-size: 0; text-align: center;}
.role-info-page2-vname em,.role-info-page2-vname span { display: inline-block; vertical-align: top;}
.role-info-page2-vname em { margin-top: .18rem;}
.role-info-page2-vname span { line-height: .42rem; color: #ffffff; font-size: .32rem; margin: 0 .5rem;}
.role-info-page2-ext { width: 100%; height: 100%; display: none;}
.role-info-page2-ext .role-info-main { width: 100%; margin-left: 0; left: 0; padding-left: 0;}
.ext-skill-left { float: left; margin: 2.92rem 0 0 4.66rem; width: 4.32rem; height: auto;}
.ext-skill-text { width: 100%; height: auto; margin-bottom: 1.44rem;}
.ext-skill-text h5 { color: #fff; font-size: .4rem; line-height: .62rem; letter-spacing: .1rem; font-weight: bold;}
.ext-skill-text p { color: #fff; opacity: .6; font-size: .24rem; line-height: .44rem; text-align: justify;}
.ext-skill-pro { width: 2.34rem; height: 2.7rem; margin-left: .44rem; position: relative;}
.ext-skill-pro img { display: block; width: 100%; height: 100%;}
.ext-skill-pro p { position: absolute; color: #fefefe; font-size: .2rem; line-height: .3rem;}
.ext-skill-pro p.p1 { left: -.46rem; top: .44rem; text-align: left;}
.ext-skill-pro p.p2 { width: 100%; left: 0; top: -.38rem; text-align: center;}
.ext-skill-pro p.p3 { right: -.46rem; top: .44rem; text-align: left;}
.ext-skill-pro p.p4 { right: -.46rem; top: 2rem; text-align: right;}
.ext-skill-pro p.p5 { width: 100%; left: 0; bottom: -.38rem; text-align: center;}
.ext-skill-pro p.p6 { left: -.46rem; top: 2rem; text-align: right;}
.ext-skill-right { float: right; margin-top: .28rem; width: 14.55rem; height: 11.98rem;}
.ext-skill-right ul { padding-left: 5.84rem; padding-top: 5.19rem;}
.ext-skill-right li { width: auto; display: inline-block; vertical-align: top; height: 1.41rem; position: relative; cursor: pointer; padding-left: 1.66rem; transition: all .3s;}
.ext-skill-li1 { margin-left: 1.72rem; margin-bottom: .9rem;}
.ext-skill-li2 { margin-left: 1.27rem; margin-bottom: .48rem;}
.sk4.ext-skill-right ul { padding-top: 4.59rem;}
.sk4 .ext-skill-li1 { margin-bottom: .34rem; position: relative; left: -.08rem;}
.sk4 .ext-skill-li2 { margin-bottom: .24rem; margin-left: 1.52rem;}
.sk4 .ext-skill-li3 { margin-left: .94rem;}
.sk4 .ext-skill-li4 { position: relative; left: -.16rem;}
.ext-skill-icon { position: absolute; top: 0; left: 0; width: 1.35rem; height: 1.35rem; border-radius: 50%; pointer-events: none;}
.ext-skill-icon img { display: block; width: 100%; height: 100%; border-radius: 50%;}
.ext-skill-icon:before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; transition: all .3s; border-radius: 50%;}
.ext-skill-info { height: 100%;}
.ext-skill-info h5 { font-weight: bold; padding-top: .5rem; line-height: .48rem; font-size: .28rem; opacity: .5; transition: all .3s;}
.ext-skill-info h6 { pointer-events: none; color: #fff; font-size: .21rem; line-height: .35rem; opacity: 0; transition: all .3s;}
.ext-skill-info p { pointer-events: none; color: #fff; margin-top: .06rem; font-size: .21rem; line-height: .34rem; opacity: 0; transition: all .3s; max-width: 3.82rem;}
.ext-skill-li3 .ext-skill-info p { max-width: 4.82rem;}
.ext-skill-right li:hover { padding-left: 1.75rem;}
.ext-skill-right li:hover .ext-skill-info h5 { padding-top: 0; opacity: 1; font-size: .32rem;}
.ext-skill-right li:hover .ext-skill-info h6 { opacity: .8;}
.ext-skill-right li:hover .ext-skill-info p { opacity: .5;}
.ext-skill-right li:hover .ext-skill-icon:before { transform: translate(-50%, -50%) scale(1.02);}

.role-21-skill-type .ext-skill-icon { background-color: #00353d;}
.role-21-skill-type .ext-skill-icon:before { border: 0.03rem solid #2b7391; box-shadow: 0 0 0 #2b7391;}
.role-21-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #1e9db6; box-shadow: 0 0 .5rem #1e9db6;}
.role-21-skill-type .ext-skill-info h5 { color: #17afba;}

.role-22-skill-type .ext-skill-icon { background-color: #28164d;}
.role-22-skill-type .ext-skill-icon:before { border: 0.03rem solid #5b4993; box-shadow: 0 0 0 #5b4993;}
.role-22-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #8169ff; box-shadow: 0 0 .5rem #8169ff;}
.role-22-skill-type .ext-skill-info h5 { color: #8169ff;}

.role-23-skill-type .ext-skill-icon { background-color: #18352b;}
.role-23-skill-type .ext-skill-icon:before { border: 0.03rem solid #377d67; box-shadow: 0 0 0 #377d67;}
.role-23-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #2fffd1; box-shadow: 0 0 .5rem #2fffd1;}
.role-23-skill-type .ext-skill-info h5 { color: #48d2c5;}

.role-24-skill-type .ext-skill-icon { background-color: #1f293c;}
.role-24-skill-type .ext-skill-icon:before { border: 0.03rem solid #2b92a7; box-shadow: 0 0 0 #2b92a7;}
.role-24-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #6ae6ff; box-shadow: 0 0 .5rem #6ae6ff;}
.role-24-skill-type .ext-skill-info h5 { color: #6ae6ff;}

.role-25-skill-type .ext-skill-icon { background-color: #352c0c;}
.role-25-skill-type .ext-skill-icon:before { border: 0.03rem solid #715d21; box-shadow: 0 0 0 #715d21;}
.role-25-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #cdb62f; box-shadow: 0 0 .5rem #cdb62f;}
.role-25-skill-type .ext-skill-info h5 { color: #ffe247;}

.role-26-skill-type .ext-skill-icon { background-color: #351611;}
.role-26-skill-type .ext-skill-icon:before { border: 0.03rem solid #87352e; box-shadow: 0 0 0 #87352e;}
.role-26-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #f98783; box-shadow: 0 0 .5rem #f98783;}
.role-26-skill-type .ext-skill-info h5 { color: #ff7474;}

.role-27-skill-type .ext-skill-icon { background-color: #440d0b;}
.role-27-skill-type .ext-skill-icon:before { border: 0.03rem solid #821c1b; box-shadow: 0 0 0 #821c1b;}
.role-27-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #ff2634; box-shadow: 0 0 .5rem #ff2634;}
.role-27-skill-type .ext-skill-info h5 { color: #ff2634;}

.role-28-skill-type .ext-skill-icon { background-color: #352c07;}
.role-28-skill-type .ext-skill-icon:before { border: 0.03rem solid #857219; box-shadow: 0 0 0 #857219;}
.role-28-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #f1db25; box-shadow: 0 0 .5rem #f1db25;}
.role-28-skill-type .ext-skill-info h5 { color: #fbf43c;}

.role-29-skill-type .ext-skill-icon { background-color: #330d29;}
.role-29-skill-type .ext-skill-icon:before { border: 0.03rem solid #7e2465; box-shadow: 0 0 0 #7e2465;}
.role-29-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #fa50b8; box-shadow: 0 0 .5rem #fa50b8;}
.role-29-skill-type .ext-skill-info h5 { color: #fa50b8;}

.role-37-skill-type .ext-skill-icon { background-color: #391e17;}
.role-37-skill-type .ext-skill-icon:before { border: 0.03rem solid #f387bd; box-shadow: 0 0 0 #f387bd;}
.role-37-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #d84b39; box-shadow: 0 0 .5rem #d84b39;}
.role-37-skill-type .ext-skill-info h5 { color: #d84b39;}

.role-38-skill-type .ext-skill-icon { background-color: #1a1a1b;}
.role-38-skill-type .ext-skill-icon:before { border: 0.03rem solid #ff69b4; box-shadow: 0 0 0 #ff69b4;}
.role-38-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #ff69b4; box-shadow: 0 0 .5rem #ff69b4;}
.role-38-skill-type .ext-skill-info h5 { color: #ff69b4;}

.role-39-skill-type .ext-skill-icon { background-color: #13171a;}
.role-39-skill-type .ext-skill-icon:before { border: 0.03rem solid #25bfd1; box-shadow: 0 0 0 #25bfd1;}
.role-39-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #00e4ff; box-shadow: 0 0 .5rem #00e4ff;}
.role-39-skill-type .ext-skill-info h5 { color: #00e4ff;}

.role-43-skill-type .ext-skill-icon { background-color: #110d0c;}
.role-43-skill-type .ext-skill-icon:before { border: 0.03rem solid #ca303e; box-shadow: 0 0 0 #ca303e;}
.role-43-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #de4a57; box-shadow: 0 0 .5rem #de4a57;}
.role-43-skill-type .ext-skill-info h5 { color: #de4a57;}

.role-44-skill-type .ext-skill-icon { background-color: #110d0c;}
.role-44-skill-type .ext-skill-icon:before { border: 0.03rem solid #00ffe2; box-shadow: 0 0 0 #00ffe2;}
.role-44-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #25cfbc; box-shadow: 0 0 .5rem #25cfbc;}
.role-44-skill-type .ext-skill-info h5 { color: #02ecd1;}

.role-46-skill-type .ext-skill-icon { background-color: #110d0c;}
.role-46-skill-type .ext-skill-icon:before { border: 0.03rem solid #9d332a; box-shadow: 0 0 0 #9d332a;}
.role-46-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #cc3226; box-shadow: 0 0 .5rem #cc3226;}
.role-46-skill-type .ext-skill-info h5 { color: #e42e20;}

.role-49-skill-type .ext-skill-icon { background-color: #110d0c;}
.role-49-skill-type .ext-skill-icon:before { border: 0.03rem solid #fe80fe; box-shadow: 0 0 0 #fe80fe;}
.role-49-skill-type .ext-skill-right li:hover .ext-skill-icon:before { border: .03rem solid #e774e7; box-shadow: 0 0 .5rem #e774e7;}
.role-49-skill-type .ext-skill-info h5 { color: #ec4de7;}

.role-info-page3 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-info-bg3.jpg) no-repeat center center; background-size: cover;}
.role-info-page3 .role-info-main { padding-left: 0;}
.role-info-page3-swiper { width: 18.64rem; margin: 0 auto; height: 10.86rem; overflow: hidden;}
.role-info-page3-swiper div.swiper-slide { width: 18.64rem; height: 10.86rem;}
.role-info-page3-swiper ul { width: 100%; font-size: 0; text-align: center; padding-top: .3rem;}
.role-info-page3-type1 ul { padding-top: 3.1rem;}
.role-info-page3-swiper li { float: left; width: 8.32rem; height: 4.68rem; margin: 0 .5rem .8rem; position: relative; cursor: pointer; overflow: hidden;}
.role-info-page3-swiper li img { display: block; width: 100%; height: 100%;}
.role-info-page3-pic { width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 1;}
.role-info-page3-swiper li:after { content: ""; position: absolute; z-index: 2; left: -2%; bottom: -.04rem; background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-info-layer1.png) no-repeat 0 0; background-size: 100% 100%; width: 104%; height: 1.54rem;}
.role-info-page3-pic img { display: block; position: relative; z-index: 1; width: 100%; height: auto; transition: all .5s;}
.role-info-page3-swiper li:hover .role-info-page3-pic img { transform: scale(1.1);}
.role-info-page3-swiper li .role-info-videobtn1 { position: absolute; z-index: 5; left: 50%; top: 50%; margin: -.64rem 0 0 -.64rem; opacity: .6; transition: all .3s;}
.role-info-page3-swiper li a.role-info-open { width: 100%; height: 100%; position: absolute; z-index: 5; left: 0; top: 0;}
.role-info-page3-swiper li:hover .role-info-videobtn1 { opacity: 1;}
.role-info-page3-swiper li p { position: absolute; z-index: 4; left: .2rem; bottom: .17rem; width: 7.5rem; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; color: #fff; font-size: .34rem; font-weight: bold; text-align: left;}
.role-info-page3-arrow { position: absolute; z-index: 9; width: 21.28rem; height: 0; left: 50%; top: 4.96rem; margin-left: -10.64rem;}
.role-info-page3-arrow a { display: block; position: relative; width: .8rem; height: .8rem;}
.role-info-page3-arrow a.swiper-button-disabled { pointer-events: none;}
.role-info-page3-arrow a em { opacity: 1; position: absolute; left: 0; top: 0; transition: all .3s;}
.role-info-page3-arrow a em.hover { opacity: 0;}
.role-info-page3-arrow a em.swiper-button-disabled { opacity: 0;}
.role-info-page3-arrow a:hover em { opacity: 0;}
.role-info-page3-arrow a:hover em.hover { opacity: 1;}
.role-info-page3-arrow a.swiper-button-disabled { display: none;}
.role-info-page3-arrow a.swiper-button-disabled em { opacity: 0;}
.role-info-page3-arrow a.swiper-button-disabled em.swiper-button-disabled { opacity: 1;;}
.role-info-prev { float: left;}
.role-info-next { float: right;}
.role-info-page3-video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;}
.role-info-page3-video video { object-fit: cover; width: 100%; height: 100%;}
.role-info-page3-box { position: absolute; width: 12rem; top: 50%; left: 50%; margin: -.78rem 0 0 -6rem;}
.role-info-page3-vpic { width: 100%; height: 1.82rem; margin: .59rem auto .38rem;}
.role-info-page3-vname { width: 100%;}
.role-info-page3-vname p { width: 100%; font-size: 0; text-align: center;}
.role-info-page3-vname em,.role-info-page2-vname span { display: inline-block; vertical-align: top;}
.role-info-page3-vname em { margin-top: .18rem;}
.role-info-page3-vname span { line-height: .42rem; color: #ffffff; font-size: .32rem; margin: 0 .5rem;}
.role-info-page3-ext { width: 100%; height: 100%; display: none;}
.role-info-page3-ext .role-info-main { width: 100%; left: 0; margin-left: 0; padding-left: 0;}
.role-info-page3-ext .comm-tit { margin-top: 1rem; margin-bottom: 1.7rem;}
.ext-story-swiper { width: 16.6rem; height: 5.46rem; margin: 0 auto;}
.ext-story-swiper li { float: left; width: 8.3rem; height: 5.46rem; cursor: pointer; position: relative;}
.ext-story-swiper li .pic-box { width: 7.9rem; height: 4.44rem; overflow: hidden; margin: 0 auto;}
.ext-story-swiper li p { margin: .34rem auto 0; line-height: .5rem; color: #fff; font-size: .32rem; width: 7.9rem; overflow: hidden; white-space:nowrap; text-overflow: ellipsis; text-align: left;}
.ext-story-swiper li img { display: block; width: 100%; height: 100%; transition: all .3s;}
.ext-story-swiper li:hover img { transform: scale(1.1);}
.ext-story-swiper li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.ext-story-swiper li a em { position: absolute; top: 50%; left: 50%; margin: -1.14rem 0 0 -.64rem; opacity: 0.6; transition: all .3s;}
.ext-story-swiper li a:hover em { opacity: 1;}
.swiper-scrollbar { width: 100%; position: relative; width: 20%; margin: .8rem auto 0;}
.swiper-scrollbar-drag { background-color: #353535; height: .1rem; border-radius: 0;}

.role-info-page4 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-info-bg4.jpg) no-repeat center center; background-size: cover;}
.role-info-page4 .comm-tit { margin-top: 1rem;}
.role-info-page4 .role-info-main { padding-left: 0;}
.comm-tit { width: 100%; font-size: 0; text-align: center; line-height: .82rem;}
.comm-tit em,.comm-tit span { display: inline-block; vertical-align: top;}
.comm-tit em { margin-top: .4rem;}
.comm-tit span { margin: 0 .34rem; color: #fff; font-size: .5rem; font-weight: bold;}
.role-roll { padding-top: 1.5rem; width: 24.22rem; margin-left: -2.51rem; height: auto; overflow: hidden;}
.role-roll ul { font-size: 0; text-align: center; transform: scale(.92);}
.role-roll li { display: inline-block; vertical-align: top; width: 4.04rem; height: 7.17rem; margin: 0 .48rem 1.48rem .32rem; position: relative; cursor: pointer;}
.role-info-page4 .role-roll li { margin: 0 .24rem 1.48rem;}
.role-roll li a { position: absolute; z-index: 6; left: 0; top: 0; width: 100%; height: 100%;}
.role-roll li img { display: block;}
.role-pic { position: absolute; right: 0; bottom: 0; z-index: 1; width: 100%; height: auto; transition: all .3s;}
.role-pic img { display: block; width: 100%; height: auto;}
.role-pic-hover { position: absolute; right: -.2rem; bottom: -.42rem; z-index: 2; width: 4.45rem; height: auto; opacity: 0; transform: scale(.9); transition: all .3s;}
.role-pic-hover img { display: block; width: 4.45rem; height: auto;}
.role-inform { position: absolute; z-index: 3; left: .38rem; top: 5.8rem; transition: all .3s; text-align: left; width: 3.5rem;}
.role-tips { position: absolute; left: 0; top: -.56rem; width: auto; line-height: .48rem; background-color: #ffb900; color: #000; font-size: .3rem; padding: 0 .14rem; font-weight: bold; transition: all .3s;}
.role-inform h5 { color: #fff; font-size: .5rem; font-weight: bold; line-height: .7rem; transition: all .3s;}
.role-inform p { color: #bcbdbd; font-size: .28rem; line-height: .38rem; transition: all .3s;}
.role-roll li:hover .role-tips { background-color: #111112; color: #ffb900;}
.role-roll li:hover .role-pic { opacity: 0;}
.role-roll li:hover .role-pic-hover { opacity: 1; transform: scale(1);}
.role-roll li:hover .role-inform { left: .24rem; top: 5.94rem;}
.role-roll li:hover .role-inform .role-tips {top: -.62rem; line-height: .58rem; font-size: .36rem; padding: 0 .17rem;}
.role-roll li:hover .role-inform h5 { color: #222222; font-size: .6rem; line-height: .8rem;}
.role-roll li:hover .role-inform p { color: #222222; font-size: .32rem; line-height: .46rem; font-weight: bold;}

.role-info-slogan,.role-info-line,.role-info-text1,.role-info-text2,.role-info-read,.ext-skill-left,.ext-skill-right,.role-info-page5 .role-info-main { opacity: 0;}

.swiper-slide-ani .role-info-slogan { animation: bounceInright .4s .2s ease-out both;}
.swiper-slide-ani .role-info-line { animation: bounceInright .4s .2s ease-out both;}
.swiper-slide-ani .role-info-text1 { animation: bounceInright .4s .4s ease-out both;}
.swiper-slide-ani .role-info-text2 { animation: bounceInright .4s .6s ease-out both;}
.swiper-slide-ani .role-info-read { animation: bounceInright .4s .8s ease-out both;}
.swiper-slide-ani .role-info-space { animation: bounceInright .4s .8s ease-out both;}
.swiper-slide-ani .role-info-page2-box .role-info-vbox {animation: bounceInbot .4s .8s ease-out both}
.swiper-slide-ani .role-info-page2-vpic {animation: bounceInbot .4s 1s ease-out both}
.swiper-slide-ani .role-info-page2-vname {animation: bounceInbot .4s 1.2s ease-out both}
.swiper-slide-ani .role-info-page3-swiper {animation: bounceInbot .4s .8s ease-out both}
.swiper-slide-ani.role-info-page4 .comm-tit {animation: bounceInbot .4s .8s ease-out both}
.swiper-slide-ani.role-info-page4 .role-roll {animation: bounceInbot .4s 1s ease-out both}

.swiper-slide-ani .role-info-page3-vbox {animation: bounceInbot .4s .8s ease-out both}
.swiper-slide-ani .role-info-page3-vpic {animation: bounceInbot .4s 1s ease-out both}
.swiper-slide-ani .role-info-page3-vname {animation: bounceInbot .4s 1.2s ease-out both}

.swiper-slide-ani .ext-skill-left { animation: bounceInright .4s .8s ease-out both;}
.swiper-slide-ani .ext-skill-right { animation: bounceInright .4s .8s ease-out both;}

.swiper-slide-ani .role-info-page3-ext .comm-tit { animation: bounceInbot .4s .8s ease-out both;}
.swiper-slide-ani .role-info-page3-ext .ext-story-swiper { animation: bounceInbot .4s 1s ease-out both;}

.swiper-slide-ani.role-info-page5 .role-info-main { animation: bounceInbot .4s .8s ease-out both;}

.pop-skill { width: 6.7rem; height: 6.7rem;}
.pop-skill-box { width: 100%; height: 100%;}
.pop-skill-box img { display: block; width: 100%; height: 100%; border: .04rem solid #fff; border-radius: 50%;}

/*视频弹窗*/
.pop_video { outline: none; position: relative; display: none; width: 10.8rem; height: 6.67rem; -webkit-transform: none; transform: none; margin: -3.33rem 0 0 -5.4rem;}
.pop_close { position: absolute; right: -1.48rem; top: 0; z-index: 5; transition: all .3s; width: .54rem; height: .62rem;}
.pop_close em { position: absolute; left: 0; top: 0; z-index: 1; transition: .3s ease-in-out;}
.pop_close em.pop-close-icon { opacity: 1;}
.pop_close em.pop-close-icon.hover { opacity: 0;}
.pop_close:hover em.pop-close-icon { opacity: 0;}
.pop_close:hover em.pop-close-icon.hover { opacity: 1;}
.pop_video_cont { width: 10.8rem; height: 6.67rem; text-align: center; clear: both; background: #000;}
#popVideoCon { width: 100%; height: 100%;}
#popVideoCon video { width: 100%; height: 100%;}

.pop-role { width: 100%; height: 100%; display: none; position: relative; outline: none; background-color: #111112;}
.pop-role .pop_close { right: 1rem; top: 16%;}
.pop-role-scroll { width: 100%; height: 100%; overflow-y: auto; padding-top: 2.2rem;}
.pop-role-scroll .comm-tit { width: 13.9rem; margin: 0 auto;}
.pop-role-scroll h5 { color: #fff; font-size: .3rem; line-height: .5rem; text-align: center; width: 11.9rem; margin: 0 auto;}
.pop-role-text { width: 11.9rem; margin: .66rem auto 0;}
.pop-role-text p { text-align: justify; color: #dededd; font-size: .26rem; line-height: .46rem; margin-bottom: .22rem; min-height: .2rem;}
.pop-role-text p b {font-weight: bold;}
.comm-scroll::-webkit-scrollbar {
  width: .1rem;
  height: .1rem; 
  background-color: transparent;
}
.comm-scroll::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.comm-scroll::-webkit-scrollbar-corner { 
  display: block; 
}
.comm-scroll::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #353535; 
  border-radius: 4px; 
}
/*首屏色调-黑白文字*/
.wrapper.black .tag-black { display: block;}
.wrapper.black .tag-white { display: none;}
.wrapper.white .tag-black { display: none;}
.wrapper.white .tag-white { display: block;}
.wrapper.white .comm-scroll::-webkit-scrollbar-thumb { background-color: #fff;}
.wrapper.white .role-info-slogan p { color: #fff;}
.wrapper.white .role-info-text1 li { color: #a0a0a0;}
.wrapper.white .role-info-text1 li span { color: #919191;}
.wrapper.white .role-info-text2 p { color: #919191;}
.wrapper.black .role-info-audio { background-color: #212121; border: .02rem solid #212121;}
.wrapper.white .role-info-audio { background-color: #222222; border: .02rem solid #3c3c3d;}
.wrapper.black .role-info-audio:hover { background-color: #424242;}
.wrapper.white .role-info-audio:hover { background-color: #424242;}
/*绝密空间*/
.role-info-ms { background-repeat: no-repeat;background-image:url(//game.gtimg.cn/images/gp/cp/a20230817role/role-info-ms.png);}

.close-hov {width:54px; height:62px; background-position: -178px -158px}
.close-def {width:54px; height:62px; background-position: -178px -86px}
.left-def {width:74px; height:74px; background-position: -10px -86px}
.left-disabled {width:74px; height:74px; background-position: -94px -86px}
.ms-subtitle1 {width:226px; height:28px; background-position: -10px -10px}
.ms-subtitle2 {width:226px; height:28px; background-position: -10px -48px}
.ms-subtitle3 {width:131px; height:28px; background-position: -10px -254px}
.right-def {width:74px; height:74px; background-position: -10px -170px}
.right-disabled {width:74px; height:74px; background-position: -94px -170px}

.ms-wrap { width: 2560px; height: 1440px; position: absolute; z-index: 10; left: -9999px; top: -9999px; background: url(//game.gtimg.cn/images/gp/cp/a20230817role/ms-bg.jpg) no-repeat center center; background-size: 100% 100%; overflow: hidden;}
.ms-wrap.show { left: 50%; top: 50%; margin: -720px 0 0 -1280px;}
.pop-role-ms { width: 100%; height: 100%; position: relative;}
.pop-role-ms-box { width: 1830px; height: 800px; position: absolute; top: 50%; left: 50%; margin: -224px 0 0 -915px;}
.pop-role-ms-box li { float: left; width: 880px; height: 514px; opacity: .3; visibility: hidden;}
.pop-role-ms-pic { position: relative; z-index: 1; width: 100%; height: 100%;}
.pop-role-ms-box li img { display: block; width: 100%;}
.pop-role-ms-info { position: absolute; left: 0; top: 678px; width: 100%; display: none;}
.pop-role-ms-tit { margin: 0 auto 20px;}
.pop-role-ms-text { width: 100%; font-size: 0; text-align: center;}
.pop-role-ms-text p { display: inline-block; vertical-align: middle; line-height: 44px; color: #fff; font-size: 24px; margin: 0 5px;}
.pop-role-ms-text a { width: 44px; height: 44px; position: relative; left: 0; top: 0; margin: 0 5px; display: inline-block; vertical-align: middle; background-color: transparent !important; border-color: #fff !important;}
.pop-role-ms-text a i { position: absolute; top: 50%; left: 50%; width: 26px; height: 19px; margin: -10px 0 0 -13px;}
.pop-role-ms-text a:hover { background-color: #424242 !important;}
.pop-role-ms-box li.swiper-slide-prev,.pop-role-ms-box li.swiper-slide-next,.pop-role-ms-box li.swiper-slide-active { visibility: visible;}
.pop-role-ms-box li.swiper-slide-active { opacity: 1;}
.pop-role-ms-box li.swiper-slide-active .pop-role-ms-info { display: block;}
.pop-role-ms-arr { position: absolute; z-index: 5; width: 1546px; height: 0; left: 50%; top: 50%; margin: -6px 0 0 -773px;}
.pop-role-ms-arr a { display: block; left: 0; right: 0; position: relative; width: 74px; height: 74px; transition: all .3s;}
.pop-role-ms-prev { float: left;}
.pop-role-ms-next { float: right;}
.pop-role-ms-arr a em { opacity: 1; position: absolute; left: 0; top: 0;}
.pop-role-ms-arr a:hover { -webkit-filter: brightness(1.2); filter: brightness(1.2);}
.pop-role-ms-arr a.pop-role-ms-prev:hover { left: -10px;}
.pop-role-ms-arr a.pop-role-ms-next:hover { left: 10px;}
.pop-role-ms-close { position: absolute; z-index: 10; left: 50%; top: 50%; width: 54px; height: 62px; margin: -420px 0 0 760px;}
.pop-role-ms-close em { position: absolute; left: 0; top: 0; opacity: 1; transition: all .3s;}
.pop-role-ms-close em.close-hov { opacity: 0;}
.pop-role-ms-close:hover em.close-def { opacity: 0;}
.pop-role-ms-close:hover em.close-hov { opacity: 1;}

/*37*/
.role-info-page5 .role-info-main { padding-left: 0;}
.role-28-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-28-bg5.jpg) no-repeat center center; background-size: cover;}
.role-37-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-37-bg5.jpg) no-repeat center center; background-size: cover;}
.role-38-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-38-bg5.jpg) no-repeat center center; background-size: cover;}
.role-39-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-39-bg5.jpg) no-repeat center center; background-size: cover;}
.role-info-page5-box1 { margin-left: 3.6rem; width: 12rem; height: 5.19rem; padding-top: 1.09rem;}
.role-info-page5-box1 h4 { line-height: .56rem; color: #fff; font-size: .38rem; font-weight: bold; position: relative;}
.role-info-ext-line { display: block; background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-info-ext-line.png) no-repeat center center; background-size: 100% 100%; width: 12rem; height: .11rem;}
.role-info-page5-box1 .role-info-ext-line { margin: .26rem 0 .4rem 0;}
.role-info-page5-box1 ul { width: 105%;}
.role-info-page5-box1 li { float: left; position: relative; padding-left: .32rem; line-height: .36rem; margin-bottom: .26rem; color: #fff; font-size: .24rem;}
.role-info-page5-li1 { width: 4rem;}
.role-info-page5-li2 { width: 4rem;}
.role-info-page5-li3 { width: 4rem;}
.role-info-page5-li4 { width: 4rem;}
.role-info-page5-li5 { width: 8rem;}
.role-info-page5-li6 { width: 6rem;}
.role-info-page5-li7 { width: 6rem;}
.role-info-page5-box1 li:before { content: ""; width: .16rem; height: .16rem; background-color: #ffb900; left: 0; top: .1rem; position: absolute; z-index: 2;}
.role-info-page5-box1 li span { display: block; float: left; padding-right: .32rem; opacity: .7;}
.role-info-page5-box1 li p { float: left;}
.role-info-page5-box1 li p b { text-decoration: line-through; font-weight: normal;}
.role-info-page5-box2 { margin-left: 3.6rem; width: 12rem;}
.role-info-page5-box2 h4 { line-height: .56rem; color: #fff; font-size: .38rem; font-weight: bold; position: relative;}
.role-info-page5-box2 .role-info-ext-line { margin: .26rem 0 .35rem 0;}
.role-info-page5-cont { width: 100%; height: 2.6rem;}
.role-info-page5-item { width: 100%; height: 100%; display: none; color: #fff; text-align: justify; animation: p5show .4s .1s ease-out both}
@keyframes p5show {
	0% {opacity: 0;transform: translateY(40px);}
	100% { opacity: 1; transform: translateX(0);}
}
.role-info-page5-item h5 { line-height: .48rem; font-size: .3rem; margin-bottom: .1rem; font-weight: bold;}
.role-info-page5-item p { font-size: .24rem; line-height: .44rem;}
.role-info-page5-tabs { width: 100%; height: 1.2rem;}
.role-info-page5-tabs ul { width: 100%; height: 100%;}
.role-info-page5-tabs li { width: 1.2rem; height: 1.2rem; float: left; margin-right: .58rem; background-color: #121212; cursor: pointer; position: relative;}
.role-info-page5-tabs li img { display: block; width: 100%; transition: all .3s linear; opacity: .5;}
.role-info-page5-tabs li:hover img { transform: scale(1.1); opacity: 1;}
.role-info-page5-tabs li.cur img { transform: scale(1.1); opacity: 1;}
.role-28-page5 .role-info-page5-li4 { width: 5rem;}
.role-28-page5 .role-info-page5-li5 { width: 5rem;}
.role-28-page5 .role-info-page5-li6 { width: 5rem;}
.role-28-page5 .role-info-page5-li7 { width: 5rem;}
.role-38-page5 .role-info-page5-box1 li:before { background-color: #ff69b4;}
.role-38-page5 .role-info-page5-li5 { width: 4rem;}
.role-38-page5 .role-info-page5-li6 { width: 4rem;}
.role-38-page5 .role-info-page5-tabs li.swiper-slide-active:before,.role-38-page5 .role-info-page5-tabs li.cur:before { content: ""; width: 2.4rem; height: 2.4rem; background: url(https://game.gtimg.cn/images/gp/cp/a20230817role/role-38-tale-hover.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -1.2rem 0 0 -1.2rem;}
.role-38-page5 .role-info-page5-box1 h4 span,.role-38-page5 .role-info-page5-box2 h4 span { position: relative; z-index: 2;}
.role-38-page5 .role-info-page5-box1 h4:before,.role-38-page5 .role-info-page5-box2 h4:before { content: ""; position: absolute; z-index: 1; height: .95rem; left: -.88rem; top: -.14rem; width: 4rem; background: url(https://game.gtimg.cn/images/gp/cp/a20230817role/role-38-tale-title1.png) no-repeat 0 0; background-size: auto 100%; pointer-events: none;}
.role-38-page5 .role-info-page5-box2 h4:before { left: -.76rem; background: url(https://game.gtimg.cn/images/gp/cp/a20230817role/role-38-tale-title2.png) no-repeat 0 0; background-size: auto 100%;}

.role-39-page5 .role-info-page5-box1 li:before { background-color: #00e4ff;}
.role-39-page5 .role-info-page5-li5 { width: 4rem;}
.role-39-page5 .role-info-page5-li6 { width: 4rem;}
.role-39-page5 .role-info-page5-tabs li.swiper-slide-active:before,.role-39-page5 .role-info-page5-tabs li.cur:before { content: ""; width: 1.68rem; height: 1.68rem; background: url(https://game.gtimg.cn/images/gp/cp/a20230817role/role-39-tale-hover.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -.84rem 0 0 -.84rem;}

.role-22-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-22-bg5.jpg) no-repeat center center; background-size: cover;}
.role-22-page5 .role-info-page5-box1 li:before { background-color: #8169ff;}
.role-22-page5 .role-info-page5-li5 { width: 4rem;}
.role-22-page5 .role-info-page5-li6 { width: 4rem;}
.role-22-page5 .role-info-page5-tabs li.swiper-slide-active:before,.role-22-page5 .role-info-page5-tabs li.cur:before { content: ""; width: 1.68rem; height: 1.68rem; background: url(https://game.gtimg.cn/images/gp/cp/a20230817role/role-22-tale-hover.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -.82rem 0 0 -.84rem; transform: scale(1.12);}

.role-27-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-27-bg5.jpg) no-repeat center center; background-size: cover;}
.role-27-page5 .role-info-page5-box1 li:before { background-color: #ff3023;}
.role-27-page5 .role-info-page5-li5 { width: 4rem;}
.role-27-page5 .role-info-page5-li6 { width: 4rem;}
.role-27-page5 .role-info-page5-tabs li.swiper-slide-active:before,.role-27-page5 .role-info-page5-tabs li.cur:before { content: ""; width: 1.68rem; height: 1.68rem; background: url(https://game.gtimg.cn/images/gp/cp/a20230817role/role-27-tale-hover.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -.84rem 0 0 -.84rem; transform: scale(1);}

.role-43-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-43-bg5.jpg) no-repeat center center; background-size: cover;}
.role-43-page5 .role-info-page5-box1 li:before { background-color: #cb303e;}
.role-43-page5 .role-info-page5-li5 { width: 4rem;}
.role-43-page5 .role-info-page5-li6 { width: 4rem;}
.role-43-page5 .role-info-page5-tabs li.swiper-slide-active:before,.role-43-page5 .role-info-page5-tabs li.cur:before { content: ""; width: 1.68rem; height: 1.68rem; background: url(https://game.gtimg.cn/images/gp/cp/a20230817role/role-43-tale-hover.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -.84rem 0 0 -.84rem; transform: scale(.94);}

.role-44-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-44-tale-bg.jpg) no-repeat center center; background-size: cover;}
.role-44-page5 .role-info-page5-box1 li:before { background-color: #01ffe3;}
.role-44-page5 .role-info-page5-li5 { width: 7rem;}
.role-44-page5 .role-info-page5-li6 { width: 7rem;}
.role-44-page5 .role-info-page5-tabs li.swiper-slide-active:before,.role-44-page5 .role-info-page5-tabs li.cur:before { content: ""; width: 1.68rem; height: 1.68rem; background: url(https://game.gtimg.cn/images/gp/cp/a20230817role/role-44-tale-hover.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -.84rem 0 0 -.84rem; transform: scale(1.01);}

.role-46-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-46-tale-bg.jpg) no-repeat center center; background-size: cover;}
.role-46-page5 .role-info-page5-box1 li:before { background-color: #cd3021;}
.role-46-page5 .role-info-page5-li5 { width: 7rem;}
.role-46-page5 .role-info-page5-li6 { width: 7rem;}
.role-46-page5 .role-info-page5-tabs li.swiper-slide-active:before,.role-46-page5 .role-info-page5-tabs li.cur:before { content: ""; width: 1.68rem; height: 1.68rem; background: url(https://game.gtimg.cn/images/gp/cp/a20230817role/role-46-tale-hover.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -.84rem 0 0 -.84rem; transform: scale(1.16);}

.role-49-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-49-tale-bg.jpg) no-repeat center center; background-size: cover;}
.role-49-page5 .role-info-page5-box1 li:before { background-color: #fd72ff;}
.role-49-page5 .role-info-page5-li1,.role-49-page5 .role-info-page5-li3,.role-49-page5 .role-info-page5-li5 { width: 5.36rem;}
.role-49-page5 .role-info-page5-li2,.role-49-page5 .role-info-page5-li4,.role-49-page5 .role-info-page5-li6 { width: 4.9rem;}
.role-49-page5 .role-info-page5-tabs li.swiper-slide-active:before,.role-49-page5 .role-info-page5-tabs li.cur:before { content: ""; width: 1.68rem; height: 1.68rem; background: url(https://game.gtimg.cn/images/gp/cp/a20230817role/role-49-tale-hover.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -.84rem 0 0 -.84rem; transform: scale(1.12);}

.role-50-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-50-tale-bg.jpg) no-repeat center center; background-size: cover;}
.role-50-page5 .role-page5-item { transform: scale(.9);}
.role-50-page5 .role-info-page5-box1 { padding-top: .7rem;}
.role-50-page5 .role-info-page5-box1 li:before { background-color: #cf58ff;}
.role-50-page5 .role-info-page5-box1 li { width: 100%;}
.role-50-page5 .role-info-page5-box1 li span { width: 1.6rem; padding-right: 0;}
.role-50-page5 .role-info-page5-box2 { display: none;}

.role-51-page5 { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-51-tale-bg.jpg) no-repeat center center; background-size: cover;}
.role-51-page5 .role-page5-item { transform: scale(.9);}
.role-51-page5 .role-info-page5-box1 { padding-top: .7rem;}
.role-51-page5 .role-info-page5-box1 li:before { background-color: #cf58ff;}
.role-51-page5 .role-info-page5-box1 li { width: 100%;}
.role-51-page5 .role-info-page5-box1 li span { width: 1.6rem; padding-right: 0;}
.role-51-page5 .role-info-page5-box2 { display: none;}

.role-boss-video { width: 8.28rem; height: 4.65rem; position: relative; float: left; margin-top: .06rem;}
.role-boss-video .pic-box { width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden;}
.role-boss-video .pic-box img { display: block; width: 100%; height: 100%;}
.role-boss-video a { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;}
.role-boss-video a em { position: absolute; top: 50%; left: 50%; margin: -.64rem 0 0 -.64rem; opacity: 0.6; transition: all .3s;}
.role-boss-video a:hover em { opacity: 1;}