* {margin: 0;padding: 0;border: 0;list-style: none;outline: none;}
a{text-decoration: none;-webkit-transition: all 0.45s;transition: all 0.45s;}
a:hover{text-decoration: underline;}
.allclear{ clear: both;}


body{width: 100%;min-width: 1200px;font-size: 14px;font-family: Arial; background: #100e26;}
.wrap{position: relative;width: 100%;height: 1585px;overflow: hidden;}
.bg{position: absolute;top: 0;left: 50%;margin-left: -960px;width: 1920px;}
.bg img{display: block;width: 100%;}
.video{position: absolute;top: 0;left: 50%;width: 1920px; margin-left: -960px; z-index: 1;}


/*顶部导航*/
.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;}


.main{position: relative;width: 1200px;margin: 0 auto; position: relative; z-index: 2;}
.part1,.part2{position: absolute;top: 55px;left: 50%;margin-left: -600px;width: 1200px;}
.part1_btn{position: absolute;top: 620px;left: 472px;width: 256px; display: flex; justify-content: space-between;}
.part1_btn a{display: block;width: 67px;height: 72px;}
.part1_fb{background: url("../images/part1_fb.png") no-repeat;}
.part1_fb:hover{background: url("../images/part1_fb2.png") no-repeat;}
.part1_ytb{background: url("../images/part1_youtube.png") no-repeat;}
.part1_ytb:hover{background: url("../images/part1_youtube2.png") no-repeat;}
.part1_discord{background: url("../images/part1_discord.png") no-repeat;}
.part1_discord:hover{background: url("../images/part1_discord2.png") no-repeat;}
.part1_logo{position: absolute;top: 330px;left: 433px;}
.playnow,.bot_play{ width: 304px; height: 116px; background: url(../images/playnow.webp) no-repeat; position: absolute; left: 50%;margin-left: -152px; -webkit-animation: play 2s steps(60) infinite;animation: play 2s steps(60) infinite;}
.playnow{ top: 510px;}
.playnow:hover,.bot_play:hover{ background: url(../images/playnow2.webp) no-repeat;}
.part1_box{ width: 1220px; position: absolute; top: 725px; left: -10px; display: flex; justify-content: space-between;}
.part1_news,.part1_guides,.part1_code,.part1_support,.part1_forum{ width: 238px; height: 70px;}
.part1_news{ background: url(../images/newsbtn.png) no-repeat;}
.part1_guides{ background: url(../images/guidesbtn.png) no-repeat;}
.part1_code{ background: url(../images/codebtn.png) no-repeat;}
.part1_support{ background: url(../images/supportbtn.png) no-repeat;}
.part1_forum{ background: url(../images/forumbtn.png) no-repeat;}
.part1_news:hover{ background: url(../images/newsbtn2.png) no-repeat;}
.part1_guides:hover{ background: url(../images/guidesbtn2.png) no-repeat;}
.part1_code:hover{ background: url(../images/codebtn2.png) no-repeat;}
.part1_support:hover{ background: url(../images/supportbtn2.png) no-repeat;}
.part1_forum:hover{ background: url(../images/forumbtn2.png) no-repeat;}


.part2{top: 900px;}
#slideStore{ width: 1286px; height: 410px; position: absolute; top: 0; left: -43px; overflow: hidden;}
#slideStore .swiper-slide{ width: 888px; background: #000000;height: 410px; box-sizing: border-box;}
#slideStore .swiper-slide img{display: block;width: 100%;}
#slideStore .swiper-button-prev,#slideStore .swiper-button-next{position: absolute;top: 130px;width: 148px;height: 202px;z-index: 1;}
#slideStore .swiper-button-prev:after,#slideStore .swiper-button-next:after{ display: none;}
#slideStore .swiper-button-prev{left: 50px;background: url("../images/banner_lf.png") no-repeat;-webkit-animation: fadeInLeft 1s ease-in-out infinite alternate;animation: fadeInLeft 1s ease-in-out infinite alternate;}
#slideStore .swiper-button-next{right: 50px;background: url("../images/banner_rg.png") no-repeat;-webkit-animation: fadeInRight 1s ease-in-out infinite alternate;animation: fadeInRight 1s ease-in-out infinite alternate;}
#slideStore .swiper-slide-prev,#slideStore .swiper-slide-next{opacity: 0.6 !important;}
.bot_play{ top: 420px;}


/*多语言*/
.bar_language{position: absolute;top: 500px;margin-top: -70px; right: -205px;width: 250px;height: 140px;z-index: 2;-webkit-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;}
.bar_language:hover{right: 30px;}
.bar_language a{position: relative; display: block;width: 46px;height: 46px;margin-bottom: 20px;}
.bar_language a span{position: absolute;top: 0;left: 10px; width: 220px;height: 46px;line-height: 46px;background-color: #de3f05;color: #fff;font-size: 14px;font-weight: bold;z-index: -1;border-radius: 5px; padding-left: 50px;}
.bar_en{background: url("../images/en.png") no-repeat;}
.bar_fr{background: url("../images/fr.png") no-repeat;}


/*Footer*/
.footer {position: absolute;top: 92.8%;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 -6960px;
    }
}
@keyframes play {
    to{
        background-position: 0 -6960px;
    }
}


@-webkit-keyframes fadeInLeft {
    from {
        /*opacity: 0;*/
        -webkit-transform: translate3d(-10%, 0, 0);
        transform: translate3d(-10%, 0, 0);
    }

    to {
        /*opacity: 1;*/
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        /*opacity: 0;*/
        -webkit-transform: translate3d(-10%, 0, 0);
        transform: translate3d(-10%, 0, 0);
    }

    to {
        /*opacity: 1;*/
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes fadeInRight {
    from {
        /*opacity: 0;*/
        -webkit-transform: translate3d(10%, 0, 0);
        transform: translate3d(10%, 0, 0);
    }

    to {
        /*opacity: 1;*/
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        /*opacity: 0;*/
        -webkit-transform: translate3d(10%, 0, 0);
        transform: translate3d(10%, 0, 0);
    }

    to {
        /*opacity: 1;*/
        -webkit-transform: none;
        transform: none;
    }
}



@media screen and (max-width: 1800px) {
  .wrap{height: 1521.6px;}
  .video,.bg,.main,.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.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;}
  .video,.bg,.main,.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: 1458.2px;}
  .video,.bg,.main,.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: 1394.8px;}
  .video,.bg,.main,.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: 1331.4px;}
  .video,.bg,.main,.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: 1268px;}
  .video,.bg,.main,.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);}
}
@media screen and (max-width: 1300px) {
  .wrap{height: 1204.6px;}
  .video,.bg,.main,.footer{-webkit-transform:perspective(1px) scale(0.76);-moz-transform:perspective(1px) scale(0.76);-ms-transform:perspective(1px) scale(0.76);-o-transform:perspective(1px) scale(0.76);transform:perspective(1px) scale(0.76);}
}