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

@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);}
}
@keyframes bounceInleft{
	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; 
}

.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: 3;}
.role-top { width: 100%; height: 1px;}
.role-info-top { width: 100%; height: 1px;}
.main { width: 16.6rem; margin: 0 auto; position: relative; top: -1px;}
.part1 .main { padding-top: 5.45rem; margin-top: -1px;}
.part1-website { width: 150%; margin-left: -25%; height: auto; padding-bottom: .8rem; font-size: 0; text-align: center;}
.part1-website a { display: inline-block; vertical-align: top; width: 2.26rem; height: 1.08rem; line-height: 1.08rem; position: relative; text-align: center;}
.part1-website a span { color: #fff; opacity: .7; font-size: .24rem; position: relative; z-index: 3;}
.part1-website a em { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
.part1-website-item { display: inline-block; vertical-align: top; width: 7rem; font-size: 0;}
.part1-website-center { width: 6.5rem; opacity: 0; margin: 0 auto;}
.part1-website-left { text-align: right;}
.part1-website-left a { margin-left: .56rem;}
.part1-website-right { text-align: left;}
.part1-website-right a { margin-right: .56rem;}
.role-tab-def { background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-tab-def.png) no-repeat 0 0; background-size: 100% 100%;}
.role-tab-hov { background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-tab-hov.png) no-repeat 0 0; background-size: 100% 100%; opacity: 0;}
.part1-website a:hover .def { opacity: 0;}
.part1-website a:hover .hov { opacity: 1;}
.part1-website a:hover span { opacity: 1; font-weight: bold;}
.part1-website a.cur { display: none;}

.part1-item-list { width: 100%; height: auto; padding-bottom: .2rem;}
.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; font-weight: bold;}

.part3-item2-li { width: 2.6rem; height: 3.38rem; 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;}
.part3-item2-li p.new { width: .53rem; height: .3rem; position: absolute; top: 0; right: 0; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/new.jpg) no-repeat 0 0; background-size: 100% 100%; z-index: 4;}
.part3-item2-line { width: 3.22rem; height: 1.18rem; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part3-item2-line.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/part3-item2-line.png); mask-size: 100% 100%; background-color: #594e5f; position: absolute; top: 1.28rem;}
.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.28rem; right: -3.22rem; transform: rotateX(180deg);}
.part3-item2-li4 .part3-item2-line { top: auto; bottom: 1.28rem; 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;}
.part5-item { width: 102%; position: relative; font-size: 0; text-align: left;}
.part5-item1 .part3-item2-li { display: inline-block; vertical-align: top; margin: 0 .2rem .6rem 0; 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-box img { display: block; margin: 0 auto; width: 100%;}
.role-bg-repeat { width: 100%; height: 100%; margin-top: -1px; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-bg2.jpg) repeat-y center top; background-size: 100% auto;}
.role-bg-frame1 { width: 24.44rem; height: 5.17rem; position: fixed; z-index: 1; pointer-events: none; top: 1.4rem; left: 50%; margin-left: -12.22rem; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-bg-frame1.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-bg-frame1.png); mask-size: 100% 100%;}
.role-bg-frame2 { width: 24.44rem; height: 4.03rem; position: fixed; z-index: 1; pointer-events: none; bottom: .6rem; left: 50%; margin-left: -12.22rem; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-bg-frame2.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103role/role-bg-frame2.png); mask-size: 100% 100%;}

/*anim*/
.part1-website-left { opacity: 0; animation: bounceInleft .4s .1s ease-out both;}
.part1-website-right { opacity: 0; animation: bounceInright .4s .1s ease-out both;}