html,body,.wrapper{width: 100%; height: 100%; position: relative;}
html,body { margin: 0 auto; background-color: #000;}

@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: #4d4b4d; 
  border-radius: 4px; 
}
body, html, .wrapper, .page-content { width: 100%; height: 100%; min-height: 18.8rem;}

.index-spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20260615metroroyale/index/m/index-spr-v5.png); background-repeat:no-repeat; background-size:2.56rem 2.56rem;}
.index-spr.page-hov-icon1{ width:0.82rem; height:0.82rem; background-position:1.72414% 1.72414%;}
.index-spr.page-hov-icon2{ width:0.82rem; height:0.82rem; background-position:1.72414% 50%;}
.index-spr.page-hov-icon3{ width:0.82rem; height:0.82rem; background-position:1.72414% 98.27586%;}
.index-spr.page-hov-icon4{ width:0.82rem; height:0.82rem; background-position:50% 1.72414%;}
.index-spr.page-hov-icon5{ width:0.82rem; height:0.82rem; background-position:98.27586% 1.72414%;}
.index-spr.page-hov-icon6{ width:0.82rem; height:0.82rem; background-position:50% 50%;}
.index-spr.page-hov-icon7{ width:0.82rem; height:0.82rem; background-position:50% 98.27586%;}
.index-spr.page-hov-icon8{ width:0.82rem; height:0.82rem; background-position:98.27586% 50%;}

.part1 { width: 100%; height: 100%; position: relative; z-index: 2; background: url(//game.gtimg.cn/images/gp/cp/a20260615metroroyale/index/m/bg-v6.jpg) #000 no-repeat center center; background-size: 100% auto;}
.part1 .main { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden;}
.page-link-item { position: absolute;}
.page-title { position: absolute; background: url(//game.gtimg.cn/images/gp/cp/a20260615metroroyale/index/m/slogan.png) no-repeat 0 0; background-size: 100% 100%; width: 8.26rem; height: 3.3rem; left: 1.5rem; bottom: .6rem; z-index: 9;}
.page-link-item { position: absolute; z-index: 3;}
.page-link-item a { display: block; width: 100%; height: 100%;}
.page-link1 { left: 1.31rem; top: 50%; margin-top: -2.44rem; width: 3.31rem; height: 2.14rem;}
.page-link2 { left: 4.75rem; top: 50%; margin-top: -4.3rem; width: 2.22rem; height: 3.04rem;}
.page-link3 { left: 4rem; top: 50%; margin-top: -1.1rem; width: 3.92rem; height: 4.4rem;}
.page-link4 { left: 3.5rem; top: 50%; margin-top: 3.05rem; width: 3.84rem; height: 1.42rem;}
.page-link5 { left: 7.02rem; top: 50%; margin-top: -4.46rem; width: 3.99rem; height: 3.06rem;}
.page-link6 { left: 7.3rem; top: 50%; margin-top: -.92rem; width: 3.71rem; height: 3.39rem;}
.page-link7 { left: 4.95rem; top: 50%; margin-top: -7.21rem; width: 2.54rem; height: 2.12rem;}
.page-link8 { left: 0; top: 50%; margin-top: -1.8rem; width: 1.3rem; height: 1.52rem;}

.page-hover { position: absolute; pointer-events: none; z-index: 4; width: 2.37rem; height: 1.25rem; padding-top: .23rem;}
.page-hover a { pointer-events: all;}
.page-hover p { position: relative; z-index: 2;}
.page-hover p.p1 { width: 2.36rem; height: 1rem; line-height: 1rem; font-size: 0; text-align: center;}
.page-hover p.p1 span,.page-hover p.p1 em { display: inline-block; vertical-align: middle; font-size: .45rem; margin: 0 .02rem;}
.page-hover p.p1 em { transform: scale(.96); margin-left: -.24rem;}
.page-hover p.p1 span { color: #fff;}
.page-hover p.p2 { position: absolute; right: 0; top: -.36rem; line-height: .28rem; font-size: .24rem; color: #fff; font-family: AgencyFB; text-align: right;}
.page-hover::before { content: ""; width: 3.78rem; height: 2.46rem; background: url(//game.gtimg.cn/images/gp/cp/a20260615metroroyale/index/m/page-hover-bg.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; z-index: 1; left: -.71rem; top: -.5rem;}
.page-hov1 { left: 1rem; top: 50%; margin-top: -.42rem;}
.page-hov2 { left: 3.93rem; top: 50%; margin-top: -5.17rem;}
.page-hov3 { left: 4.16rem; top: 50%; margin-top: -1.71rem;}
.page-hov4 { left: 2.23rem; top: 50%; margin-top: 2.75rem;}
.page-hov5 { left: 7.84rem; top: 50%; margin-top: -5.26rem;}
.page-hov6 { left: 7.34rem; top: 50%; margin-top: .76rem;}
.page-hov7 { left: 3.17rem; top: 50%; margin-top: -8.09rem;}
.page-hov8 { left: .29rem; top: 50%; margin-top: -4.09rem;}
.page-hover i { position: absolute; z-index: 6; right: -.2rem; bottom: -.21rem; background: url(//game.gtimg.cn/images/gp/cp/a20260615metroroyale/index/m/page-hover-i.png) no-repeat 0 0; background-size: 100% 100%; width: .45rem; height: .45rem;-webkit-animation: scaleAnim 2s linear infinite;animation: scaleAnim 2s linear infinite;}
@-webkit-keyframes scaleAnim{  
   0%{ -webkit-transform:scale(1,1);}
   50%{ -webkit-transform:scale(1.6,1.6);}
   100%{ -webkit-transform:scale(1,1);}  
 }
@keyframes scaleAnim{  
   0%{ transform:scale(1,1);}
   50%{ transform:scale(1.6,1.6);}
   100%{ transform:scale(1,1);}  
 }