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

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

.guide-box{position: absolute; left: 50%; width: .84rem; margin-left: -.42rem; height: 1.2rem; bottom: 0; z-index: 8; text-align: center; pointer-events: none; }
.guide-box i{display: block; margin: 0 auto; animation: move 1s linear infinite;}
.guide-box span{display: block; color: #222; font-size: .22rem; line-height: .4rem;}
.isblack .guide-box span{ color: #fff; opacity: .6;}

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

.wrapper,.wrapper *{box-sizing: border-box;}
.wrapper{font-size: 12px;}

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



.copygirht_details { position: relative;}

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


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

.role-spr { background-image: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-spr.png); background-repeat: no-repeat; background-size: 2.07rem 1.3rem; }

.role-spr.icon-more { width:0.09rem; height:0.17rem; background-position:69.69697% 8.84956%; }
.role-spr.pop-close-icon.hover { width:0.54rem; height:0.62rem; background-position:6.53595% 14.70588%; }
.role-spr.pop-close-icon { width:0.54rem; height:0.62rem; background-position:48.36601% 14.70588%; }
.role-spr.tit-left { width:1.87rem; height:0.14rem; background-position:50% 70.68966%; }
.role-spr.tit-right { width:1.87rem; height:0.14rem; background-position:50% 91.37931%; }


.role-content { width: 100%; height: auto; background: url(//game.gtimg.cn/images/gp/cp/a20230817role/bg-repeat.jpg) repeat-y center top; background-size: 100% auto; margin-top: 1.2rem; padding-top: .88rem; overflow: hidden;}
.role-anim-top { width: 100%; height: 1px;}
.role-main { width: 19.2rem; margin: 0 auto; position: relative;}
.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: 100%; height: auto; overflow: hidden;}
.role-roll ul { width: 110%;}
.role-roll li { float: left; width: 4.04rem; height: 7.17rem; margin: 0 .48rem 1.48rem .32rem; position: relative; z-index: 1; cursor: pointer;}
.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: 2; 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: 3; 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: 4; left: .38rem; top: 5.8rem; transition: all .3s; width: 3.66rem; height: 1.2rem;}
.role-inform h5 { width: 110%; color: #fff; font-size: .5rem; font-weight: bold; line-height: .7rem; transition: all .3s; overflow: hidden;}
.role-inform p { width: 100%; color: #bcbdbd; font-size: .28rem; line-height: .38rem; transition: all .3s; overflow: hidden;}
.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 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;}

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

.comm-tit,.role-roll li { opacity: 0;}

.role-pop1 { display: none; position: relative; outline: none; width: 12rem; height: auto;}
.role-pop1 .comm-tit { margin-bottom: .62rem; animation: none; opacity: 1;}
.role-pop1 .comm-tit span { font-size: .56rem;}
.role-pop1-left { float: left; width: 3.83rem; height: auto; border-right: .02rem solid #1a1a1a; position: relative;}
.role-pop1-left ul { overflow-y: auto; width: 3.7rem; height: 9.1rem;}
.role-pop1-left li { line-height: .78rem; color: #818181; font-size: .29rem; width: 3.3rem;}
.role-pop1-left li.cursor { cursor: pointer;}
.role-pop1-left li:hover { color: #ffb900;}
.role-pop1-left li.cur { color: #ffb900;}
.role-pop-layer { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-pop-layer.png) no-repeat 0 0; background-size: 100% 100%; width: 3.3rem; height: 2.74rem; position: absolute; left: 0; bottom: 0; pointer-events: none;}
.role-pop1-right { float: right; width: 7.8rem; height: 9.1rem; padding-top: .1rem; overflow-y: auto;}
.role-pop1-right h5 { line-height: .56rem; width: 7.4rem;}
.role-pop1-right h5.hidezy { height: 0; overflow: hidden;}
.role-pop1-right h5.hidezy span { display: none;}
.role-pop1-sp1 { color: #989898; font-size: .26rem; margin-right: .5rem;}
.role-pop1-sp2 { color: #fff; font-size: .28rem;}
.role-pop1-right p { width: 7.4rem; color: #b8b8b8; font-size: .26rem; line-height: .44rem; margin-bottom: .22rem; text-align: justify;}
.mb { margin-bottom: .32rem;}
/*½ÇÉ«ÏêÇé*/
.page1-jili { background: url(//game.gtimg.cn/images/gp/cp/a20230817role/role-jili-bg.jpg) no-repeat center center; background-size: cover;}


.gp-loadingbox{display: block;}