*{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: #ffffff; 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: 790px; margin-left: -960px;}
.part1 .bg{background: url("GUIDEIOS.jpg") center no-repeat;}
.part2 .bg{background: url("bg2.jpg") center no-repeat;}
.part1 .container,.part2 .container{ width: 1200px; height: 1080px; z-index: 4;position: absolute;top: 0;left: 50%; margin-left: -600px;}
.logo{ position: absolute;top:40%;left: 306.5px;}
.playnow,.bot_playnow{ left: 415px; width: 370px;height: 120px; background: url("playnow.webp") no-repeat;background-position: 0 0;-webkit-animation: play 2s steps(60) infinite;animation: play 2s steps(60) infinite; position: absolute; z-index: 4;}
.playnow{ top: 69%;}
.bot_playnow{ top: 768px;margin-left: 350px;}

@media screen and (max-width: 1800px) {
    .bot_playnow{  top: 55%;margin-left: 50px;}
.playnow:hover,.bot_playnow:hover{ background: url("playnow2.webp") no-repeat;}
.down{ position: sticky; position: -webkit-sticky; /* Safari */ left: 0; bottom: 0; width: 100px;height: 95px; background: url("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("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_bar{ width: 100px; height: 370px; position: absolute; right: -45px; top: 35%; z-index: 5;-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.part1_bar:hover{ right: 0;}
.part1_fb,.part1_discord,.part1_ytb,.gotop,.part1_forum{position: absolute;left: 25px; width: 59px;height: 58px;}
.gotop{ top: 0; background: url("gotop.png") no-repeat;}
.gotop:hover{ background: url("gotop2.png") no-repeat;}
.part1_fb{top: 65px; background: url("facebook.png") no-repeat;}
.part1_fb:hover{background: url("facebook2.png") no-repeat;}
.part1_ytb{top: 130px; background: url("youtube.png") no-repeat;}
.part1_ytb:hover{background: url("youtube2.png") no-repeat;}
.part1_discord{top: 195px; background: url("discord.png") no-repeat;}
.part1_discord:hover{background: url("discord2.png") no-repeat;}
.part1_forum{top: 260px; background: url("forum.png") no-repeat;}
.part1_forum:hover{background: url("forum2.png") no-repeat;}


.txt{ width: 1100px; height: 116px; text-align: left; font-size: 20px; color: #fdf0c7; position: absolute; left: 50px; top: 5%; line-height: 22px; box-sizing: border-box; padding-top: 25px;}
#slideStore{ width: 1400px; height: 471px; position: absolute; top: 17.7%; left: -100px; overflow: hidden; z-index: 1;}
#slideStore .swiper-slide{ width: 901px;height: 471px; box-sizing: border-box; background: #000000;}
#slideStore .swiper-slide img{display: block;width: 100%;}
.swiper-button-prev,.swiper-button-next{position: absolute;top: 400px;width: 103px;height: 102px;z-index: 2;}
.swiper-button-prev:after,.swiper-button-next:after{ display: none;}
.swiper-button-prev{left: 80px;background: url("lf.png") no-repeat;}
.swiper-button-prev:hover{ background: url("lf2.png") no-repeat;}
.swiper-button-next{right: 80px;background: url("rg.png") no-repeat;}
.swiper-button-next:hover{ background: url("rg2.png") no-repeat;}
 #slideStore .swiper-slide-prev,#slideStore .swiper-slide-next{opacity: 0.6 !important;}
.banner_bg{ width: 952px; height: 503px; background: url("banner_bg.png") no-repeat; position: absolute; left: 126px; top: 167px; z-index: 2; pointer-events: none;}


/*点击弹出窗 兼容IE  --------------*/
.mask{display: none; width: 100%; height: 100%; background: #000; opacity: .7;filter:alpha(opacity=70); position: fixed; left: 0; top: 0; z-index:99;}
.pop{display: none;width: 28em; height: 38em;z-index:99;background: #11121c;
    margin-left:-14em!important;margin-top:-15.2em!important;
    left:50%;/*FF IE7*/
    top:40%;/*FF IE7*/
    margin-top:0px;
    position:fixed!important;/*FF IE7*/
    position:absolute;/*IE6*/
    _top:       expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/}
.pop_close{position: absolute;top: 1.125em;right: -2.2em;width: 1.75em;height: 1.75em;cursor: pointer; background: url("pop_close.png") no-repeat;background-size: 100% 100%;}
.pop_close:hover{background: url("pop_close2.png") no-repeat;background-size: 100% 100%;-webkit-transform: rotate(-180deg);transform: rotate(-180deg);-webkit-transition: all 0.35s;transition: all 0.35s;}
.pop_logBox{position: relative;width: 100%;height: 4em;background-color: #1f203a;}
.pop_preRegisterImg{width: 24.1667em;height:18.1667em; margin: 0.5em auto;}
.pop_preRegisterImg img{display: block;width: 100%; border-radius: 5px;}
.pop_preBd{width: 21em;margin: 1em auto 1em;color: #ffffff;font-size: 1.1667em;line-height: 1.7em;}
.pop_preName{color: #978eff;font-weight: bold;}
.pop_learnMore{display: block; width: 11.5em;height: 2.5em;line-height:2.2em; margin: 0 auto;text-align: center;font-weight: bold;background: transparent;color: #fff;border: 2px solid #5346e7;box-sizing: border-box; }


@-webkit-keyframes play{
    to{
        background-position: 0 -7200px;
    }
}
@keyframes play{
    to{
        background-position: 0 -7200px;
    }
}


/*动画*/
@-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;
    }
}


/*底部信息*/
.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: #f5e28c;  z-index:4;}
.copyright a{ color: #f5e28c;}
.copyright a:hover{ color: #FFFFFF;}


@media screen and (max-width: 1800px) {
    .swiper_footer{ width: 150%; top: 94%; left: -25%;}
    .part,.down{-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,.down{-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) {
    .swiper_footer{ width: 150%; top: 99%; left: -25%;}
    .part,.down{-webkit-transform: scale(0.92);-moz-transform: scale(0.92);-ms-transform: scale(0.92);-o-transform: scale(0.92);transform: scale(0.92);}
}
@media screen and (max-width: 1600px) {
    .swiper_footer{ width: 150%; top: 103%; left: -25%;}
    .part,.down{-webkit-transform: scale(0.88);-moz-transform: scale(0.88);-ms-transform: scale(0.88);-o-transform: scale(0.88);transform: scale(0.88);}
}
@media screen and (max-width: 1500px) {
    .swiper_footer{ width: 150%; top: 108%; left: -25%;}
    .part,.down{-webkit-transform: scale(0.84);-moz-transform: scale(0.84);-ms-transform: scale(0.84);-o-transform: scale(0.84);transform: scale(0.84);}
}
@media screen and (max-width: 1400px) {
    .swiper_footer{ width: 150%; top: 113%; left: -25%;}
    .part,.down{-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-ms-transform: scale(0.8);-o-transform: scale(0.8);transform: scale(0.8);}
}
@media screen and (max-width: 1300px) {
    .swiper_footer{ width: 150%; top: 119%; left: -25%;}
    .part,.down{-webkit-transform: scale(0.76);-moz-transform: scale(0.76);-ms-transform: scale(0.76);-o-transform: scale(0.76);transform: scale(0.76);}
}