*{margin: 0;padding: 0;border: 0;outline: none;list-style: none;}


body{background:#0b0221; font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif"; font-size: 12px; min-width: 1200px;}
.wrap{position: relative;width: 100%; height: 1195px; overflow: hidden; z-index: 2;background-color: #21243c;}
.bg{position: absolute;top: 0;left: 50%;width: 1920px;margin-left: -960px;}
.video{position: absolute;top: 0;left: 50%;width: 1920px; margin-left: -960px; z-index: 2;}
.main{position: relative;width: 1200px;margin: 0 auto; z-index: 3;}

/*顶部导航*/
.gm-offical-top {position:fixed; top:0; left:0; z-index:999; width:100%; height:50px; background:#fff;}
.gm-offical-top .logo {float:left; _display:inline; width:139px; height:50px; margin-right:60px; padding-left:20px; background:url("http://r2cdn2.r2games.com/en/gamesite/topnav/images/gm_offical_top_logo.jpg") no-repeat 20px center; text-indent:-999em; overflow: hidden;}
.gm-offical-top .logo a {display:block; width:139px; height:50px;}

.toplogo{position: absolute;top: 644px;left: 420px;}
.play{ width: 320px; height: 100px; background: url('../images/play.webp') no-repeat; position: absolute;top: 785px;left: 446px; cursor: pointer; -webkit-animation: play 4s steps(100) infinite;animation: play 4s steps(100) infinite;}
.play:hover{background: url('../images/play2.webp') no-repeat; }
.text{ width: 100%; font-size: 24px;color: #fcfe01;position: absolute; top: 895px; left: 0; line-height: 30px; text-align: center;}
.nav{ width: 56px; position: absolute;right: 335px;top: 671px;}
.nav li{display: inline-block;margin-bottom: 10px;}
.nav li a{display: block; width: 56px;height: 61px;}
.Youtube{background: url('../images/Youtube.png')no-repeat;}
.Youtube:hover{background: url('../images/Youtube2.png')no-repeat;}
.FB{background: url('../images/FB.png')no-repeat;}
.FB:hover{background: url('../images/FB2.png')no-repeat;}
.Discord{background: url('../images/Discord.png') no-repeat;}
.Discord:hover{background: url('../images/Discord2.png') no-repeat;}

/*Footer*/
.footer {position: absolute;bottom: 0px; left: 0; height:115px; width: 100%;font-size: 12px; background-color:#100e24; text-align: center; z-index: 2;}
.footer .inner { position: relative;  width: 998px; margin: 0 auto;}
.footer .footer-hd { padding: 15px 0 0 0; line-height: 25px; color: #ffffff;}
.footer .footer-hd a{ color: #ffffff;text-decoration: none;}
.footer .footer-hd a:hover{ color: #bac6fe;}

.footer p{padding-top:15px; color: #ffffff;  font-size:12px;}
.footer .i-separation { margin:0 10px 0 10px; border-right: 1px solid #ffffff;}


@-webkit-keyframes play{
  to{
    background-position: 0 -10000px;
  }
}
@keyframes play{
  to{
    background-position: 0 -10000px;
  }
}


@media screen and (max-width: 1800px){
    .wrap{height: 1147.2px;}
    .bg,.main,.swiper_footer{-webkit-transform:perspective(1px) scale(0.96);-moz-transform:perspective(1px) scale(0.96);-ms-transform:perspective(1px) scale(0.96);-o-transform:perspective(1px) scale(0.96);transform:perspective(1px) scale(0.96);-webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
    .bg,.main,.swiper_footer{-webkit-transform-origin: center 0;-moz-transform-origin: center 0;-ms-transform-origin: center 0;-o-transform-origin: center 0;transform-origin: center 0;}
  }
  @media screen and (max-width: 1700px){
    .wrap{height: 1099.4px;}
    .bg,.main,.swiper_footer{-webkit-transform:perspective(1px) scale(0.92);-moz-transform:perspective(1px) scale(0.92);-ms-transform:perspective(1px) scale(0.92);-o-transform:perspective(1px) scale(0.92);transform:perspective(1px) scale(0.92);}
  }
  @media screen and (max-width: 1600px){
    .wrap{height: 1051.6px;}
    .bg,.main,.swiper_footer{-webkit-transform:perspective(1px) scale(0.88);-moz-transform:perspective(1px) scale(0.88);-ms-transform:perspective(1px) scale(0.88);-o-transform:perspective(1px) scale(0.88);transform:perspective(1px) scale(0.88);}
  }
  @media screen and (max-width: 1500px){
    .wrap{height: 1003.8px;}
    .bg,.main,.swiper_footer{-webkit-transform:perspective(1px) scale(0.84);-moz-transform:perspective(1px) scale(0.84);-ms-transform:perspective(1px) scale(0.84);-o-transform:perspective(1px) scale(0.84);transform:perspective(1px) scale(0.84);}
  }
  @media screen and (max-width: 1400px) {
    .wrap{height: 956px;}
    .bg,.main,.swiper_footer{-webkit-transform:perspective(1px) scale(0.8);-moz-transform:perspective(1px) scale(0.8);-ms-transform:perspective(1px) scale(0.8);-o-transform:perspective(1px) scale(0.8);transform:perspective(1px) scale(0.8);}
  }