a,li{text-decoration:none; -webkit-tap-highlight-color:transparent;}


@-webkit-keyframes fadeInDn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,120px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0)
    }
}
@keyframes fadeInDn {
    0% {
        opacity: 0;
        transform: translate3d(0,120px,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 { -webkit-animation: fadeInDn .4s ease-out .2s both; animation: fadeInDn .4s ease-out .2s both;}
.fadeanim1 { animation-delay: 0s; animation-duration: .1s;}

.wrapper { padding-top: 0;}
.wrapper,.wrapper *{ -webkit-box-sizing:border-box; box-sizing:border-box;}



.role-spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20230817role/m/role-spr.png); background-repeat:no-repeat; background-size:4.51rem 1.62rem;}
.role-spr.pop-arrow{ width:0.56rem; height:0.33rem; background-position:97.72152% 6.97674%;}
.role-spr.pop1-btn-close{ width:3.69rem; height:1.19rem; background-position:10.97561% 20.93023%;}
.role-spr.tit-left{ width:1.89rem; height:0.17rem; background-position:3.43511% 93.7931%;}
.role-spr.tit-right{ width:1.89rem; height:0.17rem; background-position:78.62595% 93.7931%;}

.role-content { width: 100%; height: auto; background: url(//game.gtimg.cn/images/gp/cp/a20230817role/m/bg-repeat.jpg) repeat-y center top; background-size: 100% auto; padding-top: 1.38rem; overflow: hidden;}
.role-anim-top { width: 100%; height: 1.05rem;}
.role-main { width: 100%; margin: 0 auto; position: relative;}
.comm-tit { width: 100%; font-size: 0; text-align: center; line-height: .94rem;}
.comm-tit em,.comm-tit span { display: inline-block; vertical-align: top;}
.comm-tit em { margin-top: .4rem;}
.comm-tit span { margin: 0 .6rem; color: #fff; font-size: .68rem; font-weight: bold;}
.role-roll { padding-top: 1.12rem; width: 100%; height: auto; overflow: hidden;}
.role-roll ul { font-size: 0; text-align: left; padding-left: .52rem;}
.role-roll li { display: inline-block; vertical-align: top; width: 3.1rem; height: 5.53rem; margin: 0 .15rem .98rem; position: relative; cursor: pointer; opacity: 0;}
.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; display: none;}
.role-pic-hover img { display: block; width: 4.45rem; height: auto;}
.role-inform { position: absolute; z-index: 3; left: .3rem; top: 4.04rem; transition: all .3s;}
.role-inform h5 { width: 110%; color: #fff; font-size: .42rem; font-weight: bold; line-height: .62rem; transition: all .3s;}
.role-inform p { width: 110%; color: #bcbdbd; font-size: .33rem; line-height: .56rem; transition: all .3s;}

.jump-link { width: 100%; height: .94rem; position: absolute; top: 0; left: 0; z-index: 5;}
/*pop*/
.pop1 { width: 100%; height: 100%; display: block; left: -9999px; top: -9999px; outline: none; position: absolute; background-color: #111112;}
.pop1 .pop_close { right: 1rem;}
.pop1-box { width: 100%; height: 100%; overflow-y: auto; padding-bottom: 2.2rem; position: relative; z-index: 1;}
.pop1-box li { width: 100%; height: 1.38rem; border-bottom: 1px solid #373738; line-height: 1.38rem; position: relative; overflow: hidden; transition: all .3s;}
.pop1-box li.cur { height: auto;}
.pop1-box li.cur a p { color: #ffb900;}
.pop1-box li.cur a em { transform: rotate(180deg);}
.pop1-box li a { display: block; width: 100%; height: 1.38rem;}
.pop1-box li p { width: 100%; color: #e8e8e8; padding-left: .7rem; font-size: .4rem;}
.pop1-box li em { position: absolute; top: .54rem; right: .68rem; z-index: 2; transition: all .3s;}
.role-pop1-right { width: 100%; padding: .74rem .68rem .62rem; height: auto; margin: 0 auto; background-color: #232425;}
.role-pop1-right h5 { line-height: .68rem; width: 100%;}
.role-pop1-right h5.mb { margin-bottom: .56rem;}
.pop1-box li.hidezy .role-pop1-right h5 { margin-bottom: .56rem;}
.pop1-box li.hidezy .role-pop1-right h5.mb { display: none;}
.role-pop1-sp1 { color: #e8e8e8; font-size: .4rem; margin-right: .5rem;}
.role-pop1-sp2 { color: #e8e8e8; font-size: .4rem;}
.role-pop1-right p { width: 100%; color: #e8e8e8; font-size: .4rem; line-height: .68rem; margin-bottom: .24rem; text-align: justify; padding-left: 0 !important;}
.pop1-btn-close { position: absolute; left: 50%; bottom: .6rem; z-index: 5; margin-left: -1.83rem;}
.pop1-layer { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/story-swiper-auto-lay1.png) no-repeat 0 0; background-size: 100% 100%; width: 100%; height: 12rem; position: absolute; bottom: -6rem; left: 0; z-index: 4; pointer-events: none;}

/*µ¯´°*/
.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_comm,.pop_comm *{ -webkit-box-sizing:border-box; box-sizing:border-box;}

.gp-loadingbox{display: block;}