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



html,body{width: 100%; height: 100%;font-family: Arial;background: #111520; min-width: 1200px; min-height: 720px;}
.wrap{position: relative; width: 100%;height: 100%;overflow: hidden;transition: transform 1s;-webkit-transition: -webkit-transform 1s;}
.swiper-main{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.swiper-main .swiper-slide{overflow: hidden;}
.part{position: relative;width: 100%;height: 100%;box-sizing: border-box;}
.part .bg{position: absolute;top: 0;left: 50%;width: 1920px;height: 1080px; margin-left: -960px;}
.part1 .bg{background: url("../images/bg1.jpg") center no-repeat;}
.part2 .bg{background: url("../images/bg2.jpg") center no-repeat;}
.part3 .bg{background: url("../images/bg3.jpg") center no-repeat;}
.part4 .bg{background: url("../images/bg4.jpg") center no-repeat;}
.part1 .container,.part2 .container,.part3 .container,.part4 .container{ width: 1200px; height: 1080px; z-index: 4;position: absolute;top: 0;left: 50%; margin-left: -600px;}
.logo{ width: 451px; height: 247px; background: url(../images/logo.png) no-repeat; position: absolute;top:38%;left: 374.5px;}
.playnow,.bot_playnow{width: 321px; height: 100px; top: 65%; left: 439.5px; background: url(../images/playnow.gif) no-repeat; position: absolute; z-index: 4;}
.playnow{ top: 62.5%;}
.bot_playnow{ top: 65%;}
.playnow:hover,.bot_playnow:hover{ background: url(../images/playnow2.gif) no-repeat;}
.down{ position: sticky; position: -webkit-sticky; /* Safari */ left: 47.5%; top:88%; width: 100px;height: 95px; background: url("../images/down.png") no-repeat;-webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; animation: pulse 2s infinite; opacity: 0.5; cursor: pointer; z-index: 3;}
.down:after{position: absolute;top: 0;left: 34px; content: ""; width: 30px;height: 45px; background: url("../images/mouse.png") no-repeat;  animation:fadeInDown 1.5s infinite; -o-animation:fadeInDown 1.5s infinite;
    -moz-animation:fadeInDown 1.5s infinite;
    -webkit-animation:fadeInDown 1.5s infinite;
    animation-fill-mode:both;
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -o-animation-fill-mode:both;}
.part1_line{ width: 1920px; height: 44px; background: url(../images/part1_line.png) no-repeat; position: absolute; top: 946px; left: 50%; margin-left: -960px; z-index: 2;}


.part1_bar{ width: 100px; height: 370px; position: absolute; left: -55px; top: 35%; z-index: 5;-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.part1_bar:hover{ left: 0;}
.part1_fb,.part1_discord,.part1_ytb,.gotop,.part1_forum{position: absolute;left: 25px; width: 59px;height: 58px;}
.gotop{ top: 0; background: url("../images/gotop.png") no-repeat;}
.gotop:hover{ background: url("../images/gotop2.png") no-repeat;}
.part1_fb{top: 65px; background: url("../images/facebook.png") no-repeat;}
.part1_fb:hover{background: url("../images/facebook2.png") no-repeat;}
.part1_ytb{top: 130px; background: url("../images/youtube.png") no-repeat;}
.part1_ytb:hover{background: url("../images/youtube2.png") no-repeat;}
.part1_discord{top: 195px; background: url("../images/discord.png") no-repeat;}
.part1_discord:hover{background: url("../images/discord2.png") no-repeat;}
.part1_forum{top: 260px; background: url("../images/forum.png") no-repeat;}
.part1_forum:hover{background: url("../images/forum2.png") no-repeat;}



.part2_news,.part2_guides,.part2_support,.part2_faq,.part2_code{ width: 155px; height: 44px; position: absolute; background: url(../images/part2_btn.png) no-repeat; text-align: center; line-height: 44px; font-size: 16px; color: #fffefe;}
.part2_news:hover,.part2_guides:hover,.part2_support:hover,.part2_faq:hover,.part2_code:hover{ background: url(../images/part2_btn2.png) no-repeat;}
.part2_news,.part2_guides{ cursor: pointer;}
.part2_news{ right: 142px; top: 28.2%;}
.part2_guides{ right: 399px; top: 51.2%;}
.part2_support{ left: 132px; top: 39.8%;}
.part2_faq{ left: 510px; top: 21.7%;}
.part2_code{ left: 304px; top: 63.8%;}

.part2_newsbox,.part2_guidesbox{position: absolute; width: 563px;height: 417px; background: url("../images/part2_newsBox.png") no-repeat;z-index: 5;}
.part2_newsbox{ top: 34%; right: 0;}
.part2_guidesbox{ top: 28%; left: 20px;}
.part2_newsbox ul,.part2_guidesbox ul{position: relative;width: 440px;margin: 0 auto;}
.part2_newstop{ width: 100%; text-align: center; font-size: 35px; color: #121822; font-weight: bold; margin: 60px 0 5px 0;}
.part2_newsTitle{display: block;width: 100%;height: 35px;line-height: 35px; color: #220d07;font-size: 16px;overflow: hidden;border-bottom: 1px dotted #220d07;}
.part2_newsTitle p{float: left;width: 76%;height: 30px;text-overflow: ellipsis;white-space: nowrap; overflow: hidden;}
.part2_newsTitle span{float: right;width: 24%;text-align: center;}
.part2_newsTitle:hover{color: #ffffff;}
.part2_more{display: block;width: 176px;height: 44px;margin: 15px auto 0; background: url("../images/part2_more.png") no-repeat;}
.part2_more:hover{background: url("../images/part2_more2.png") no-repeat;}
.part2_close{ width: 58px; height: 58px; background: url(../images/part2_close.png) no-repeat; position: absolute; cursor: pointer; top: 38px; right: 10px;}
.part2_close:hover{background: url("../images/part2_close2.png") no-repeat;}
.part2_map1,.part2_map2,.part2_map3,.part2_map4,.part2_map5{ width: 246px; height: 132px; position: absolute;}
.part2_map1{left: 257.5px;top: 50.5%;}
.part2_map2{ left: 465px; top: 8.2%;}
.part2_map3{ right: 353px; top: 37.7%;}
.part2_map4{ right: 96px; top: 14.6%;}
.part2_map5{ left: 86.9px; top: 26.4%;}


.part3_title{ position: absolute; left: 555px; top: 9%; color: #efe0b8; font-size: 30px; font-weight: bold; z-index: 3;}
.part3_line{ width: 338px; height: 788px; background: url(../images/part3_line.png) no-repeat; position: absolute; top: 10%; right: -46px; z-index: 3;}
.part3_line2{ width: 512px; position: absolute; top: 360px; left: 885px; border-bottom: 2px #bfae87 solid;}
.part3_txt1{ width: 159px; height: 41px; position: absolute; left: 952px; top: 24.7%; font-size: 20px; color: #f2cc8f; line-height: 41px; text-align: center;}
.part3_txt2{ position: absolute; left: 886px; top: 32%; color: #dfc99d; font-size: 24px;}
.part3_txt3{ position: absolute; left: 886px; top: 38%; color: #dfc99d; font-size: 18px; line-height: 36px;}
.part3_icon{ width: 254px; height: 264px; background: url(../images/part3_icon.png) no-repeat; position: absolute; right: 163px; bottom: 9.5%;}
.part3_character{position: absolute;top: -5%;left: -330px; width: 1398px;height: 986px;z-index: 2;}
.part3_character .swiper-slide-prev,.part3_character .swiper-slide-next{opacity: 0 !important;}
.part3_smallCharacter{position: absolute;top: 0;left: 0;width:390px;height: 100%;}
.part3_smallCharacter .swiper-slide{position: absolute;width: 139px!important;margin-right: 0!important; height: 139px;cursor: pointer;}
.part3_smallImg1{ left: 130px; top: 3%; background: url("../images/part3_Img1.png") no-repeat;}
.part3_smallImg2{ left: 250px; top: 27%; background: url("../images/part3_Img2.png") no-repeat;}
.part3_smallImg3{ left: 250px; bottom: 27%; background: url("../images/part3_Img3.png") no-repeat;}
.part3_smallImg4{ left: 130px; bottom: 3%; background: url("../images/part3_Img4.png") no-repeat;}
.part3_smallCharacter .swiper-slide-thumb-active.part3_smallImg1 .circle,
.part3_smallImg1:hover .circle,.part3_smallCharacter .swiper-slide-thumb-active.part3_smallImg2 .circle,.part3_smallImg2:hover .circle,.part3_smallCharacter .swiper-slide-thumb-active.part3_smallImg3 .circle,.part3_smallImg3:hover .circle,.part3_smallCharacter .swiper-slide-thumb-active.part3_smallImg4 .circle,.part3_smallImg4:hover .circle{position: absolute; width: 139px;height: 139px; background: url("../images/part3_circle.png") no-repeat; left: 0; top: 0; -webkit-animation: circle 10s infinite linear;animation: circle 10s infinite linear;}
.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right{background:transparent;}
.part3_light{ width: 110px; height: 110px; position: absolute; left: 71px; top: 72px; background: url("../images/light.png") no-repeat;-webkit-animation: light 1s steps(26) infinite;animation: light 1s steps(26) infinite;}
.part3_light2,.part3_light3,.part3_light4{ width: 90px; height: 90px; position: absolute; background: url("../images/light2.png") no-repeat;-webkit-animation: light2 1s steps(26) infinite;animation: light2 1s steps(26) infinite;}
.part3_light2{ left: -11px; top: 28px;}
.part3_light3{ right: -8px; top: 28px;}
.part3_light4{ left: 80px; top: 182px;}


.part4_title{ width: 100%; text-align: center; color: #efe0b8; font-size: 30px; font-weight: bold; position: absolute; left: 0; top: 6.5%;}
.slide-box{ position: relative; margin: 9.5% 0 0 33px;}
.slide-list{ position: relative; top: 0; left: 0; list-style: none; height: 674px; margin: 0 auto; perspective: 500px;}
.slide-list li{ position: absolute; width: 1004px; height: 525px; transition: all .5s; z-index: -1; opacity: 0; filter: alpha(opacity=0); border: 1px solid #bfae87;}
.slide-box li.banner1{ left: 114px; top: 86px; z-index: 4; width: 561px; height: 248px; opacity: .3; filter: alpha(opacity=30);}
.slide-box li.banner2{ left: 0; top: 0px; z-index: 5; opacity: 1; filter: alpha(opacity=100);}
.slide-box li.banner3{ top: 50px; left: auto; right: 100px; width: 1004px; height: 525px; opacity: .5; filter: alpha(opaciyt:50);}
.slide-box li.banner4{ left: 193px; top: 0;}
.slide-list li img{ width: 100%;}
.part4-prev, .part4-next{ display: block; width: 56px; height: 56px; position: absolute; top: 532px; right: 33px; z-index: 9; cursor: pointer;background: url(../images/feature-spr.png) center top no-repeat;}
.part4-next{ top: 460px; background-position: center bottom;}
.part4-prev:hover,.part4-next:hover{background: url(../images/feature-spr2.png) center top no-repeat;}
.part4-next:hover{ top: 460px; background-position: center bottom;}


/*底部信息*/
.swiper_footer{position: absolute;top: 90%;left: 0;width: 100%;height: 100px;background:#000000;}
.copyright{position: relative;margin: 20px auto 0; width:1200px; text-align:center; line-height:20px; display:block;font-size: 14px; color: #dfc99d;  z-index:4;}
.copyright a{ color: #dfc99d;}
.copyright a:hover{ color: #FFFFFF;}





/*动画*/
@-webkit-keyframes pulse{0%{filter:brightness(100%)}50%{filter:brightness(140%)}100%{filter:brightness(100%)}}
@-moz-keyframes pulse{0%{filter:brightness(100%)}50%{filter:brightness(140%)}100%{filter:brightness(100%)}}
@-o-keyframes pulse{0%{filter:brightness(100%)}50%{filter:brightness(140%)}100%{filter:brightness(100%)}}
@keyframes pulse{0%{filter:brightness(100%)}50%{filter:brightness(140%)}100%{filter:brightness(100%)}}
/*向下箭头--动画效果*/
@-webkit-keyframes fadeInDown {
    from {
        -webkit-transform: translate3d(0, -30%, 0);
        transform: translate3d(0, -30%, 0);
    }

    to {
        -webkit-transform: none;
        transform: none;
    }
}
@-o-keyframes fadeInDown {
    from {
        -o-transform: translate3d(0, -30%, 0);
        transform: translate3d(0, -30%, 0);
    }

    to {
        -o-transform: none;
        transform: none;
    }
}
@-moz-keyframes fadeInDown {
    from {
        -moz-transform: translate3d(0, -30%, 0);
        transform: translate3d(0, -30%, 0);
    }

    to {
        -moz-transform: none;
        transform: none;
    }
}
@keyframes fadeInDown {
    from {
        transform: translate3d(0, -30%, 0);
        transform: translate3d(0, -30%, 0);
    }

    to {
        transform: none;
        transform: none;
    }
}


@-webkit-keyframes circle {
  to{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes circle {
  to{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*大光效*/
@-webkit-keyframes light {
     to{
         background-position: 0 -2860px;
     }
 }
@keyframes light {
    to{
        background-position: 0 -2860px;
    }
}

/*小光效*/
@-webkit-keyframes light2 {
     to{
         background-position: 0 -2340px;
     }
 }
@keyframes light2 {
    to{
        background-position: 0 -2340px;
    }
}


@media screen and (max-width: 1800px) {
    .swiper_footer{ width: 150%; top: 94%; left: -25%;}
    .part{-webkit-transform: scale(0.96);-moz-transform: scale(0.96);-ms-transform: scale(0.96);-o-transform: scale(0.96);transform: scale(0.96);
        -webkit-transition: all 0.25s ease;
        -o-transition: all 0.25s ease;
        transition: all 0.25s ease;}
    .part{-webkit-transform-origin: center 0;-moz-transform-origin: center 0;-ms-transform-origin: center 0;-o-transform-origin: center 0;transform-origin: center 0;}
    .down{left: 47%; top: 92%;}
}
@media screen and (max-width: 1700px) {
    .swiper_footer{ width: 150%; top: 99%; left: -25%;}
    .part{-webkit-transform: scale(0.92);-moz-transform: scale(0.92);-ms-transform: scale(0.92);-o-transform: scale(0.92);transform: scale(0.92);}
    .part{-webkit-transform-origin: center 0;-moz-transform-origin: center 0;-ms-transform-origin: center 0;-o-transform-origin: center 0;transform-origin: center 0;}
    .down{left: 47%; top: 95%;}
}
@media screen and (max-width: 1600px) {
    .swiper_footer{ width: 150%; top: 103%; left: -25%;}
    .part{-webkit-transform: scale(0.88);-moz-transform: scale(0.88);-ms-transform: scale(0.88);-o-transform: scale(0.88);transform: scale(0.88);}
    .part{-webkit-transform-origin: center 0;-moz-transform-origin: center 0;-ms-transform-origin: center 0;-o-transform-origin: center 0;transform-origin: center 0;}
    .down{left: 47%; top: 100%;}
}
@media screen and (max-width: 1500px) {
    .swiper_footer{ width: 150%; top: 108%; left: -25%;}
    .part{-webkit-transform: scale(0.84);-moz-transform: scale(0.84);-ms-transform: scale(0.84);-o-transform: scale(0.84);transform: scale(0.84);}
    .part{-webkit-transform-origin: center 0;-moz-transform-origin: center 0;-ms-transform-origin: center 0;-o-transform-origin: center 0;transform-origin: center 0;}
    .down{left: 47%; top: 105%;}
}
@media screen and (max-width: 1400px) {
    .swiper_footer{ width: 150%; top: 113%; left: -25%;}
    .part{-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-ms-transform: scale(0.8);-o-transform: scale(0.8);transform: scale(0.8);}
    .part{-webkit-transform-origin: center 0;-moz-transform-origin: center 0;-ms-transform-origin: center 0;-o-transform-origin: center 0;transform-origin: center 0;}
    .down{left: 46.5%; top: 110%;}
}
@media screen and (max-width: 1300px) {
    .swiper_footer{ width: 150%; top: 119%; left: -25%;}
    .part{-webkit-transform: scale(0.76);-moz-transform: scale(0.76);-ms-transform: scale(0.76);-o-transform: scale(0.76);transform: scale(0.76);}
    .part{-webkit-transform-origin: center 0;-moz-transform-origin: center 0;-ms-transform-origin: center 0;-o-transform-origin: center 0;transform-origin: center 0;}
    .down{left: 46.5%; top: 115%;}
}
@media screen and (max-width: 1200px) {
    .swiper_footer{ width: 150%; top: 126%; left: -25%;}
    .part{-webkit-transform: scale(0.72);-moz-transform: scale(0.72);-ms-transform: scale(0.72);-o-transform: scale(0.72);transform: scale(0.72);}
    .part{-webkit-transform-origin: center 0;-moz-transform-origin: center 0;-ms-transform-origin: center 0;-o-transform-origin: center 0;transform-origin: center 0;}
    .down{left: 46%; top: 119%;}
}