*{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: 1080px; margin-left: -960px;}
.part1 .bg{background: url("../images/bg1.webp") center no-repeat;}
.part2 .bg{background: url("../images/bg2.webp") center no-repeat;}
.part3 .bg{background: url("../images/bg3.webp") center no-repeat;}
.part1 .container,.part2 .container,.part3 .container{ width: 1200px; height: 1080px; z-index: 4;position: absolute;top: 0;left: 50%; margin-left: -600px;}
.center{position: absolute;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.post{position: absolute;}
.logo{top:38%;left: 0;width: 100%;text-align: center;}
.part1_txt{top: 60%;width: 572px;padding: 13px 20px;line-height: 24px;font-size: 18px;color: #88c0f9; background-color: rgb(0, 0, 0,.65);border-radius: 10px;box-sizing: border-box; }
.playnow,.bot_playnow{ left: 425px; width: 350px;height: 150px; background: url("../images/play.gif") no-repeat;}
.playnow{ top: 72%;}
.bot_playnow{ top: 65%;}
.playnow:hover,.bot_playnow:hover{ background: url("../images/play2.gif") no-repeat;}
.part1_btn{left: 270px; top: 75%;width: 660px;display: flex;justify-content: space-between;}
.part1_nav{background: url(../images/nav.webp) no-repeat;}
.part1_btn a{width: 206px;height: 66px;-webkit-transition: none;transition: none;}
.part1_support{background-position: -1px -1px;}
.part1_support:hover{background-position: -1px -74px;}
.part1_news{background-position: -220px -1px;}
.part1_news:hover{background-position: -220px -74px;}
.part1_code{background-position: -438px -1px;}
.part1_code:hover{background-position: -438px -74px;}
.down{ position: sticky; position: -webkit-sticky; /* Safari */ left: 0; bottom: 0; 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_bar{ width: 100px; height: 370px; position: absolute; left: -55px; top: 35%; z-index: 5;}
.part1_bar:hover{ left: 0;}
.part1_fb,.part1_discord,.part1_ytb,.gotop,.part1_forum{position: absolute;left: 25px; width: 60px;height: 60px;background: url(../images/sidebar.webp) no-repeat; -webkit-transition: none; transition: none;}
.gotop{ top: 0; background-position: -10px -10px;}
.gotop:hover{ background-position: -90px -10px;}
.part1_fb{top: 65px; background-position: -10px -80px;}
.part1_fb:hover{background-position: -90px -80px;}
.part1_ytb{top: 130px; background-position: -10px -150px;}
.part1_ytb:hover{background-position: -90px -150px;}
.part1_discord{top: 195px; background-position: -10px -220px;}
.part1_discord:hover{background-position: -90px -220px;}
.part1_forum{top: 260px;background-position: -10px -290px;}
.part1_forum:hover{background-position: -90px -290px;}


.part2_circle{top: 300px;left: 60px;width: 425px;height: 425px; background: url(../images/part2_circle2.webp) no-repeat;-webkit-animation: quan 18s infinite linear;animation: quan 18s infinite linear;}
.part2_circle2{top: 341px;left: 101px;width: 342px;height: 342px; background: url(../images/part2_circle.webp) no-repeat;-webkit-animation: quan 12s infinite linear reverse;animation: quan 12s infinite linear reverse;}
.part2Swiper{position: absolute;top: 76px;left: -80px;width: 1460px;height: 928px;overflow: hidden;z-index: 2;}
.part2Swiper .swiper-slide{position: relative; width: 1460px;height: 928px;}
.part2Swiper .swiper-slide img{display: block;width: 100%;}
.part2Swiper .swiper-slide-shadow {display: none;}
.part2_skill{top: 140px;right: 5px;}
.part2_class,.part2_class.on::after,.part2_class:hover:after{background: url(../images/part2_class.webp) no-repeat;}
.part2Swiper .swiper-button-prev,.part2Swiper .swiper-button-next{position: absolute;top: 62%;width: 101px;height: 64px; }
.part2Swiper .swiper-button-prev:after,.part2Swiper .swiper-button-next:after{ display: none;}
.part2Swiper .swiper-button-prev{left: 43%;background-position: -7px -232px;}
.part2Swiper .swiper-button-prev:hover{background-position: -247px -232px;}
.part2Swiper .swiper-button-next{right: 2%;background-position: -125px -232px;}
.part2Swiper .swiper-button-next:hover{background-position: -365px -232px;}

.part2SmallImg{position: absolute; top: 500px;left: 52%;width: 640px;height: 330px;overflow: hidden;z-index: 3;}
.part2_girls{background: url(../images/part2_girls.webp) no-repeat;}
.part2SmallImg .swiper-slide{width: 148px;height: 330px;cursor: pointer;overflow:visible;}
.part2_img1{background-position: -8px -9px;}
.part2_img1:hover,.part2_img1.swiper-slide-thumb-active{background-position: -8px -359px;}
.part2_img2{background-position: -168px -9px;}
.part2_img2:hover,.part2_img2.swiper-slide-thumb-active{background-position: -168px -359px;}
.part2_img3{background-position: -329px -9px;}
.part2_img3:hover,.part2_img3.swiper-slide-thumb-active{background-position: -329px -359px;}
.part2_img4{background-position: -489px -9px;}
.part2_img4:hover,.part2_img4.swiper-slide-thumb-active{background-position: -489px -359px;}
.part2_img5{background-position: -649px -9px;}
.part2_img5:hover,.part2_img5.swiper-slide-thumb-active{background-position: -649px -359px;}
.part2_img6{background-position: -810px -9px;}
.part2_img6:hover,.part2_img6.swiper-slide-thumb-active{background-position: -810px -359px;}
.part2_img7{background-position: -970px -9px;}
.part2_img7:hover,.part2_img7.swiper-slide-thumb-active{background-position: -970px -359px;}
.part2_img8{background-position: -1130px -9px;}
.part2_img8:hover,.part2_img8.swiper-slide-thumb-active{background-position: -1130px -359px;}
.part2_img9{background-position: -1291px -9px;}
.part2_img9:hover,.part2_img9.swiper-slide-thumb-active{background-position: -1291px -359px;}
.part2_img10{background-position: -1451px -9px;}
.part2_img10:hover,.part2_img10.swiper-slide-thumb-active{background-position: -1451px -359px;}


.part2_classBox{top: 100px;left: 260px;width: 680px;display: flex;justify-content: space-between;z-index: 3;}
.part2_classBox a{position: relative; width: 69px;height: 69px;}
.part2_classBox a.on::after,.part2_classBox a:hover::after{content: "";position: absolute; top: -22.5px;left: -22.5px; width: 114px;height: 114px; -webkit-animation: quan 8s infinite linear reverse;animation: quan 8s infinite linear reverse;}
.part2_x1{background-position: -23px -17px;}
.part2_x2{background-position: -171px -17px;}
.part2_x3{background-position: -318px -17px;}
.part2_x4{background-position: -466px -17px;}
.part2_x5{background-position: -613px -17px;}
.part2_x1.on::after,.part2_x1:hover::after{background-position: 0 -97px;}
.part2_x2.on::after,.part2_x2:hover::after{background-position: -148px -97px;}
.part2_x3.on::after,.part2_x3:hover::after{background-position: -295px -97px;}
.part2_x4.on::after,.part2_x4:hover::after{background-position: -444px -97px;}
.part2_x5.on::after,.part2_x5:hover::after{background-position: -590px -97px;}



 /* 第三屏 */
.part3_banner{position: absolute;top: 12%;left: 0;width: 1200px;}
.part3_banner .swiper-slide{width: 992px;height: 521px; box-sizing: border-box;}
.part3_banner .swiper-slide img{display: block;width: 100%;}
/* .part3_banner .swiper-slide-visible{opacity: 1;} */
.part3_banner .swiper-button-prev,.part3_banner .swiper-button-next{position: absolute;top: 50%;margin-top: -39.5px; width: 111px;height: 76px; background-position: -476px -220px;}
.part3_banner .swiper-button-prev:hover,.part3_banner .swiper-button-next:hover{background-position: -596px -220px;}
.part3_banner .swiper-button-prev:after,.part3_banner .swiper-button-next:after{ display: none;}
.part3_banner .swiper-button-prev{left:0;}
.part3_banner .swiper-button-next{right: 0;transform: rotate(180deg);}
.part3_banner .swiper-slide-prev::after,.part3_banner .swiper-slide-next::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgb(255, 255, 255,.66); }
.part3_box{top: 9%;left: 63px;pointer-events: none; width: 1074px;height: 607px; background: url(../images/part3_box.webp) no-repeat;z-index: 3;}

/*底部信息*/
.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;}


@-webkit-keyframes quan{
    to{
       -webkit-transform: rotate(360deg);
    }
}
@keyframes quan{
    to{
        transform: rotate(360deg);
    }
}
    /*向下箭头--动画效果*/
@-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;
    }
}



@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);}
}