html,body,.wrapper,.story-header{width: 100%; position: relative;}
html,body { margin: 0 auto; background-color: #000; min-width: 1280px; max-width: 3840px;}

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

@font-face {
 	font-family:tpe;
 	src: url(https://game.gtimg.cn/images/gp/font/tpe_light.ttf  );
}

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

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

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

.fadeanim { animation: fadeInDown .4s .2s ease-out both;}

[data-animclass] { opacity: 0;}

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

.role-spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20251103role/role-spr.png); background-repeat:no-repeat; background-size:20.05rem 2.11rem;}
.role-spr.part1-item2-list{ width:16.64rem; height:1.02rem; background-position:0.87977% 2.75229%;}
.role-spr.part3-item1-line{ width:7.93rem; height:0.21rem; background-position:28.05281% 98.42105%;}
.role-spr.role-btn-more-def{ width:3.35rem; height:0.82rem; background-position:0.17964% 82.94574%;}
.role-spr.role-btn-more-icon{ width:0.1rem; height:0.11rem; background-position:0.15038% 95.5%;}
.role-spr.role-comm-tit{ width:16.62rem; height:0.78rem; background-position:99.12536% 80.45113%;}
.role-spr.role-petphrase-icon{ width:0.38rem; height:0.39rem; background-position:84.85003% 1.74419%;}


.page-content { overflow: hidden;}
/*根据阵营变色变色*/
.page-type1 .type-color { color: #527CB6 !important;}
.page-type2 .type-color { color: #B87C4A !important;}
.page-type3 .type-color { color: #871B9B !important;}
.page-type4 .type-color { color: #B0372A !important;}
.page-type5 .type-color { color: #C4B780 !important;}

.page-type1 .type-bgcolor { background-color: #527CB6 !important;}
.page-type2 .type-bgcolor { background-color: #B87C4A !important;}
.page-type3 .type-bgcolor { background-color: #871B9B !important;}
.page-type4 .type-bgcolor { background-color: #B0372A !important;}
.page-type5 .type-bgcolor { background-color: #C4B780 !important;}

.page-type1 .type-color-hov:hover { color: #527CB6 !important;}
.page-type2 .type-color-hov:hover { color: #B87C4A !important;}
.page-type3 .type-color-hov:hover { color: #871B9B !important;}
.page-type4 .type-color-hov:hover { color: #B0372A !important;}
.page-type5 .type-color-hov:hover { color: #C4B780 !important;}

.page-type1 .type-color-hov:hover i { background-color: #527CB6 !important;}
.page-type2 .type-color-hov:hover i { background-color: #B87C4A !important;}
.page-type3 .type-color-hov:hover i { background-color: #871B9B !important;}
.page-type4 .type-color-hov:hover i { background-color: #B0372A !important;}
.page-type5 .type-color-hov:hover i { background-color: #C4B780 !important;}

.page-type1 .type-color-hov.cur { color: #527CB6 !important;}
.page-type2 .type-color-hov.cur { color: #B87C4A !important;}
.page-type3 .type-color-hov.cur { color: #871B9B !important;}
.page-type4 .type-color-hov.cur { color: #B0372A !important;}
.page-type5 .type-color-hov.cur { color: #C4B780 !important;}

.page-type1 .type-color-hov.cur i { background-color: #527CB6 !important;}
.page-type2 .type-color-hov.cur i { background-color: #B87C4A !important;}
.page-type3 .type-color-hov.cur i { background-color: #871B9B !important;}
.page-type4 .type-color-hov.cur i { background-color: #B0372A !important;}
.page-type5 .type-color-hov.cur i { background-color: #C4B780 !important;}

.part1 { width: 100%; height: auto; position: relative; z-index: 4;}
.main { width: 16.6rem; margin: 0 auto; position: relative;}
.part1 .main { padding-top: 3.2rem;}
.role-name { width: 100%; height: 1rem;}
.role-name img { display: block; width: auto; height: 100%; float: left;}
.role-name-tips { float: left; display: block; width: 1.2rem; height: .4rem; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-name-tips.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-name-tips.png); mask-size: 100% 100%; color: #fff; font-size: .24rem; line-height: .4rem; text-align: center; padding-left: .18rem; margin-top: .1rem; margin-left: .12rem;}
.role-petphrase-box { width: 100%; height: auto; margin: .6rem auto .66rem;}
.role-petphrase { font-family: tpe; width: 100%; height: .36rem; line-height: .36rem; font-size: .32rem; color: #fff; position: relative;}
.role-petphrase p {display: inline-block; vertical-align: top; opacity: .7;}
.role-petphrase-tips { position: absolute; top: -.03rem; left: -.74rem; width: .54rem; height: .47rem; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-petphrase-tips.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-petphrase-tips.png); mask-size: 100% 100%;}
.role-petphrase-icon { display: inline-block; vertical-align: top; margin-left: .2rem; margin-top: .02rem;}
.role-line1 { background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-line1.png) no-repeat 0 0; background-size: 100% 100%; width: 16.6rem; height: .09rem; margin-bottom: .8rem;}
.role-infom { width: 13rem; height: auto; overflow: hidden; padding-bottom: .48rem;}
.role-infom p { width: 6.3rem; line-height: .34rem; margin-bottom: .32rem; font-size: 0; float: left;}
.role-infom p span { font-size: .24rem;}
.role-infom p img { display: inline-block; vertical-align: top; width: auto; height: .32rem; margin-left: .12rem; margin-top: .01rem;}
.role-infom p .sp1 { color: #fff; padding-right: .32rem; opacity: .4;}
.role-infom p .sp2 { color: #fff; font-weight: bold;}
.role-line2 { background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-line2.png) no-repeat 0 0; background-size: 100% 100%; width: 10.39rem; height: .08rem; margin-bottom: .6rem;}
.role-infom-text { width: 10.39rem; margin-bottom: .6rem;}
.role-infom-text p { color: #fff; opacity: .7; font-size: .2rem; line-height: .4rem; margin-bottom: .2rem;}
.role-line3 { background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-line3.png) no-repeat 0 0; background-size: 100% 100%; width: 10.99rem; height: .72rem; margin-bottom: 1.68rem;}
.role-pic { position: absolute; top: 5.06rem; right: -.78rem; width: 5.17rem; height: 8.2rem;}
.role-pic img { display: block; width: 100%; height: auto;}
.role-btn-box { position: absolute; top: 11.85rem; right: -.78rem; width: 5.17rem; height: auto;}
.role-btn-box .role-btn-more { position: relative; display: block; margin: 0 auto; width: 3.35rem; height: .82rem; line-height: .82rem; color: #080806; font-size: 0; text-align: center; color: #080806; font-weight: bold;}
.role-btn-box .role-btn-more span,.role-btn-box .role-btn-more i { display: inline-block; vertical-align: middle; position: relative; z-index: 3; text-align: center; font-size: .28rem; margin: 0 .06rem; transition: all .3s; position: relative; left: 0;}
.role-btn-box .role-btn-more i { -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-btn-more-icon.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-btn-more-icon.png); mask-size: 100% 100%; background: #000; width: .16rem; height: .18rem;}
.role-btn-box .role-btn-more em { position: absolute; z-index: 1; left: 0; top: 0;}
.role-btn-box .role-btn-more em.def { opacity: 1;}
.role-btn-box .role-btn-more:hover i { left: .06rem;}

.part2 { position: relative; z-index: 3; width: 100%; padding-bottom: 1.2rem;}
.part2-item { width: 100%; position: relative; padding-bottom: 1.2rem;}
.role-comm-tit { margin: 0 auto .8rem; position: relative;}
.role-comm-tit p { font-size: .36rem; color: #080806; line-height: .76rem; padding-left: .32rem; font-weight: bold;}
.role-comm-tit-icon { position: absolute; left: -.65rem; top: .18rem; width: .45rem; height: .4rem; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-comm-tit-icon.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-comm-tit-icon.png); mask-size: 100% 100%;}
.comm-lit-tit { width: 100%; height: .32rem; line-height: .32rem; position: relative; padding-left: .18rem; margin-bottom: .6rem;}
.comm-lit-tit em { width: .06rem; height: .32rem; position: absolute; left: 0; top: 0; z-index: 2;}
.comm-lit-tit p { font-size: .32rem; color: #fff;}
.part2-item1-cont { width: 101%; height: auto;}
.part2-item1-cont li { width: 100%; height: .8rem;}
.part2-item1-cont li p { line-height: .8rem; font-size: 0; text-align: center; border: 1px solid #5D5C5E; width: 1.71rem; float: left;}
.part2-item1-cont li p.p1 { background: #5D5C5E; width: 1.2rem; border-top: 1px solid #000;}
.part2-item1-cont li p span { display: inline-block; vertical-align: middle; font-size: .2rem; line-height: .24rem; padding: 0 .06rem; color: #fff;}
.part2-item1-cont li.first p { border-bottom: none;}
.part2-item1-cont li.first p span { font-size: .24rem; font-family: AgencyFB; font-weight: bold;}
.part2-item1-cont li.first p.p1 { border-color: #5D5C5E;}
.part2-item1-cont li.first p.p1 span { font-weight: normal; font-size: .2rem;}
.part2-item2-cont { width: 100%; height: auto;}
.part2-item2-cont li { position: relative; margin-bottom: .2rem;}
.part2-item2-cont li:last-child { margin-bottom: 0;}
.part2-item2-cont li div { margin-left: 1.32rem; width: 14.6rem; height: 100%; line-height: 1.02rem; font-size: 0;}
.part2-item2-cont li p { display: inline-block; vertical-align: middle; width: 100%; text-align: left; font-size: .24rem; line-height: .32rem; color: #fff;}
.part2-item3-cont { width: 100%; text-align: center;}
.part2-item3-cont ul { width: 110%; height: 3rem; overflow: hidden;}
.part2-item3-cont.ovf ul { height: auto;}
.part2-item3-cont.ovf .part2-item3-more { display: none;}
.part2-item3-cont li { text-align: left; width: 7.9rem; height: .82rem; line-height: .82rem; font-size: 0; color: #bababc; margin: 0 .8rem .2rem 0; float: left; position: relative; cursor: pointer;}
.part2-item3-cont li p { width: 6.5rem; margin-left: .32rem; font-size: .24rem; line-height: .32rem; display: inline-block; vertical-align: middle;}
.part1-item3-list-bg { position: absolute; left: 0; top: 0; background-color: #757376; width: 7.9rem; height: .82rem; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part1-item3-list-bg.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part1-item3-list-bg.png); mask-size: 100% 100%;}
.part1-item3-list-icon { width: .32rem; height: .25rem; position: absolute; z-index: 2; top: .29rem; right: .31rem; background: #4c4c4c; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part1-item3-list-icon.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part1-item3-list-icon.png); mask-size: 100% 100%;}
.part1-item3-list-icon.cur { display: none; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part1-item3-list-icon-cur.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part1-item3-list-icon-cur.png); mask-size: 100% 100%;}
.part2-item3-more { width: 2rem; display: block; margin: .6rem auto 0; line-height: .24rem; color: #8c8a8d; text-align: center;}
.part2-item3-more i { width: .09rem; height: .26rem; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part2-item3-more-icon.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part2-item3-more-icon.png); mask-size: 100% 100%;}
.part2-item3-more i,.part2-item3-more span { display: inline-block; vertical-align: top; margin: 0 .1rem; font-size: .2rem;}
.part2-item3-more i { background-color: #8c8a8d;}
.part2-item3-more i.i2 { transform: rotateY(180deg);}
.part2-item3-cont li.cur .part1-item3-list-icon { display: none;}
.part2-item3-cont li.cur .part1-item3-list-icon.cur { display: block;}
.part2-item4-cont { width: 104%; height: auto; overflow: hidden; margin-top: -.2rem;}
.part2-item4-cont a { display: block; float: left; width: 5.4rem; height: 3.39rem; margin: .2rem .2rem 0 0; position: relative;}
.part2-item4-cont a div { position: relative; overflow: hidden; width: 100%; height: 2.91rem;}
.part2-item4-cont a img { display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1;}
.part2-item4-cont a p { position: absolute; z-index: 4; line-height: .48rem; left: 0; bottom: 0; color: #080806; font-size: .24rem; padding-left: .2rem;}
.part2-item4-mask { width: 100%; height: 100%; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part2-item4-mask.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part2-item4-mask.png); mask-size: 100% 100%; background-color: #bebebe; position: absolute; left: 0; top: 0; z-index: 3;}
.part2-item4-cont a:hover p { color: #fff;}
.part2-item5-cont { width: 104%; height: auto; overflow: hidden; margin-top: -.2rem;}
.part2-item5-box { width: 100%; height: auto; display: none;}
.part2-item5-cont a { display: block; float: left; width: 2.6rem; height: 3.16rem; margin: .2rem .2rem 0 0; position: relative;}
.part2-item5-pic { background: url(//game.gtimg.cn/images/gp/cp/a20251103role/part2-item5-pic.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 1; width: 2.4rem; height: 2.4rem; left: .1rem; top: .1rem;}
.part2-item5-cont a img { display: block; width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1;}
.part2-item5-cont a p { position: absolute; z-index: 4; line-height: .48rem; left: 0; bottom: 0; color: #ceced0; font-size: 0; width: 100%; text-align: center;}
.part2-item5-cont a p span { display: inline-block; vertical-align: middle; font-size: .24rem; line-height: .24rem;}
.part2-item5-mask { width: 100%; height: 100%; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part2-item5-mask.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part2-item5-mask.png); mask-size: 100% 100%; background-color: #5b5a5f; position: absolute; left: 0; top: 0; z-index: 3;}
.part2-item5-cont a:hover p { color: #fff;}
.part2-item5-tab { position: absolute; top: -.06rem; right: 0; font-size: 0; text-align: right;}
.part2-item5-tab a { display: inline-block; vertical-align: top; margin: 0 0 0 .2rem; width: 1.2rem; height: .44rem; line-height: .44rem; text-align: center; color: #fff; font-size: .24rem; position: relative;}
.part2-item5-tab a span { color: #fff; position: relative; z-index: 5;}
.part2-item5-def { width: 100%; height: 100%; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part2-item5-def.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part2-item5-def.png); mask-size: 100% 100%; background-color: #4c4c4f; position: absolute; left: 0; top: 0; z-index: 3;}
.part2-item5-cur { display: none; width: 100%; height: 100%; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part2-item5-cur.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part2-item5-cur.png); mask-size: 100% 100%; background-color: #4c4c4f; position: absolute; left: 0; top: 0; z-index: 3;}
.part2-item5-tab a.cur .part2-item5-def { display: none;}
.part2-item5-tab a.cur .part2-item5-cur { display: block;}

.part3 { position: relative; z-index: 3; width: 100%; padding-bottom: 1.2rem;}
.part3-item { width: 100%; position: relative; padding-bottom: 1.2rem;}
.part3-item1-cont { width: 100%; height: auto; overflow: hidden; position: relative;}
.part3-item1-cont ul { margin-top: -.6rem; width: 110%;}
.part3-item1-cont li { width: 7.91rem; margin-top: .6rem; float: left; margin-right: .78rem;}
.part3-item1-cont li p { width: 100%; font-size: .2rem; line-height: .4rem; color: #fff; opacity: 0.7; margin-top: .2rem;}
.part3-item2 { width: 100%; height: auto; position: relative; padding-bottom: 1.98rem;}
.part3-item2-cont { position: relative; width: 13.8rem; margin: 0 auto; height: auto;}
.part3-item2-cont-1 { height: 2.6rem;}
.part3-item2-cont-2 { height: 7.5rem;}
.part3-item2-li { width: 2.6rem; height: 2.6rem; position: relative;}
.part3-item2-li1 { float: left; margin-bottom: 2.3rem;}
.part3-item2-li2 { float: right; margin-bottom: 2.3rem;}
.part3-item2-li3 { float: left; clear: both;}
.part3-item2-li4 { float: right;}
.part3-item2-li5 { position: absolute; left: 50%; top: 50%; margin: -1.3rem 0 0 -1.3rem;}
.part3-item2-box {  width: 2.6rem; height: 2.6rem; position: relative; z-index: 3;}
.part3-item2-box em { width: 100%; height: 100%; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part3-item2-box.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part3-item2-box.png); mask-size: 100% 100%; background-color: #4c4c4f; position: absolute; left: 0; top: 0; z-index: 1;}
.part3-item2-box i { width: 3.1rem; height: 3.1rem; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part3-item2-box-hov.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part3-item2-box-hov.png); mask-size: 100% 100%; background-color: #4c4c4f; position: absolute; left: 50%; top: 50%; margin: -1.55rem 0 0 -1.55rem; z-index: 1; transition: all .3s; opacity: 0; pointer-events: none;}
.part3-item2-box img { display: block; width: 100%; height: 100%; padding: .06rem; position: relative; z-index: 2;}
.part3-item2-li a { display: block;}
.part3-item2-li p { width: 100%; text-align: center; color: #fff; font-size: .24rem; line-height: .24rem;}
.part3-item2-li p.p1 { margin-top: .2rem; margin-bottom: .1rem; font-weight: bold;}
.part3-item2-li p.p2 { opacity: .7; font-size: .2rem;}
.part3-item2-li p.p3 { width: 3.22rem; height: .36rem; line-height: .36rem; font-size: 0; text-align: center; position: absolute; top: 50%; margin-top: -.18rem; overflow: hidden;}
.part3-item2-line { width: 3.22rem; height: 1.25rem; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part3-item2-line-v6.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part3-item2-line-v6.png); mask-size: 100% 100%; background-color: #594e5f; position: absolute; top: 1.21rem;}
.part3-item2-li p.p3 em,.part3-item2-li p.p3 span { display: inline-block; vertical-align: middle;}
.part3-item2-li p.p3 em { width: .25rem; height: .25rem; transform: rotate(45deg); position: relative; z-index: 1;}
.part3-item2-li p.p3 span { width: auto; height: .36rem; font-size: .2rem; padding: 0 .14rem; margin: 0 -.12rem; position: relative; z-index: 2;}
.part3-item2-li1 .part3-item2-line { right: -3.22rem;}
.part3-item2-li2 .part3-item2-line { left: -3.22rem; transform: rotateY(180deg);}
.part3-item2-li3 .part3-item2-line { top: auto; bottom: 1.21rem; right: -3.22rem; transform: rotateX(180deg);}
.part3-item2-li4 .part3-item2-line { top: auto; bottom: 1.21rem; left: -3.22rem; transform: rotateY(180deg) rotateX(180deg);}
.part3-item2-li1 p.p3 { left: 2.6rem;}
.part3-item2-li2 p.p3 { right: 2.6rem;}
.part3-item2-li3 p.p3 { left: 2.6rem;}
.part3-item2-li4 p.p3 { right: 2.6rem;}
.part3-item2-cont-1 .part3-item2-li p.p3 { width: 3rem;}
.part3-item2-li:hover .part3-item2-box i { opacity: 1;}

.part4 { position: relative; z-index: 3; width: 100%; padding-bottom: 1.2rem;}
.part4-item { width: 100%; position: relative; padding-bottom: 1.2rem;}
.part4-item1 { margin-top: .8rem;}
.part4-item1-cont { width: 6.22rem; height: 4.33rem; padding-top: .29rem;}
.part4-item1-item { width: 100%; height: auto; display: none;}
.part4-item1-item h5 { color: #fff; font-size: .4rem; line-height: .4rem; width: 100%; font-weight: bold;}
.part4-item1-scroll { width: 100%; height: 2.44rem; overflow-y: auto; margin-bottom: .8rem; margin-top: .4rem;}
.part4-item1-scroll p { color: #fff; font-size: .2rem; line-height: .4rem; opacity: .7;}


.part4-item1-tabs { width: 6.6rem; height: auto; overflow: hidden; margin-top: -.2rem;}
.part4-item1-tabs a { display: block; float: left; width: 1.95rem; height: 1.08rem; position: relative; padding: 1px; margin: .1rem .2rem 0 0;}
.part4-item1-tabs a img { display: block; width: 100%; height: 100%; position: relative; z-index: 2;}
.part4-item1-tabs a i { position: absolute; top: 0; left: 0; background-color: #666666; width: 100%; height: 100%; z-index: 1;}
.part4-item1-tabs a:hover { padding: 0.02rem;}
.part4-item1-video-box { position: absolute; right: 0; top: 0; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/part4-item1-video-box.png) no-repeat 0 0; background-size: 100% 100%; width: 9.59rem; height: 5.51rem; padding: .09rem .06rem 0.08rem .03rem;}
.part4-item1-video-list { width: 100%; height: 100%; overflow: hidden;}
.part4-item1-video-list a { display: block; width: 100%; height: 100%; position: relative; overflow: hidden;}
.part4-item1-video-list a img { display: block; width: 100%; height: 100%; transition: all .3s;}
.part4-item1-video-t { width: 1.13rem; height: 1.01rem; background-color: #fff; position: absolute; top: 2.17rem; left: 4.19rem; z-index: 2; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part4-item1-video-t.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part4-item1-video-t.png); mask-size: 100% 100%;}
.part4-item1-video-list a:hover img { transform: scale(1.2);}

.part5 { position: relative; z-index: 3; width: 100%; padding-bottom: 1.2rem;}
.part5-item { width: 102%; margin-left: -1%; position: relative; padding-bottom: 1.2rem; font-size: 0; text-align: center;}
.part5-item1 .part3-item2-li { display: inline-block; vertical-align: top; margin: 0 .1rem; cursor: pointer;}

.role-bg-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden;}
.role-bg-top { width: 100%;}
.role-bg-repeat { width: 100%; height: 100%; margin-top: -1px; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-info-bg2.jpg) repeat-y center top; background-size: 100% auto; position: absolute; top: 39.54rem; left: 0;}

.part-foot { width: 100%; height: 1.68rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/part-foot.png) no-repeat center top; background-size: auto; position: relative; z-index: 3;}

/*anim*/
.role-name,.role-petphrase,.role-line1 { opacity: 0; animation: bounceInright .4s .4s ease-out both;}
.role-infom { opacity: 0; animation: bounceInright .4s .6s ease-out both;}
.role-line2,.role-infom-text,.role-line3 { opacity: 0; animation: bounceInright .4s .8s ease-out both;}
.role-pic,.role-btn-box { opacity: 0; animation: bounceInright .4s 1s ease-out both;}

.page-type1 .role-bg-top { width: 100%; height: 39.55rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-info-bg1-1.jpg) no-repeat center top; background-size: 100% 100%;}
.page-type2 .role-bg-top { width: 100%; height: 39.55rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-info-bg1-2.jpg) no-repeat center top; background-size: 100% 100%;}
.page-type3 .role-bg-top { width: 100%; height: 39.55rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-info-bg1-3.jpg) no-repeat center top; background-size: 100% 100%;}
.page-type4 .role-bg-top { width: 100%; height: 39.55rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-info-bg1-4.jpg) no-repeat center top; background-size: 100% 100%;}
.page-type5 .role-bg-top { width: 100%; height: 39.55rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-info-bg1-5.jpg) no-repeat center top; background-size: 100% 100%;}