* {margin:0;padding: 0;}
html{height: 100%;}
body {font-size: 14px;  font-family: "Microsoft YaHei",微软雅黑,"Microsoft JhengHei",serif;height: 100%;position: relative;background:#f5f5f5}
a {text-decoration: none;color:#000}
img {border: none;}
li{list-style: none;}
/***************index***************/
.wapper{overflow: hidden;margin: auto;width: 100%;}
.top{height: 70px;width: 100%;background: rgba(11, 13, 20, 0.8);position: fixed;top:0;left:0;z-index: 99;}
.top .mainbox{height: 70px;width: 1200px;margin: 0 auto;}
.top-l{float: left;}
.top-l img{height: 70px;width: 230px; cursor: default; }
.top-r{float: right;}
.top-r .nav{display: inline-block;color: #94979f;margin-left: 20px;width: 100px;font-size:14px;text-align:center;line-height: 70px;}
.top-r .nav:hover{filter: brightness(130%)}
.top-r .nav.act{color: #fff;font-size: 16px;}
.top-r .download{background-position: -310px -334px;width: 130px; height: 40px;display: inline-block;margin-left:30px;position: relative;top:15px;}
.top-r .download:hover{background-position: -160px -334px;}
.top-r .download:active{background-position: -10px -334px;}
.top-r .download.b{background-position: -310px -274px;}
.top-r .download.b:hover{background-position: -160px -274px;}
.top-r .download.b:active{background-position: -10px -274px;line-height: 70px;}
.mgr{display: none !important;}
body{padding-top: 0 !important;}
/*
.common-top-l::before{
    content:"";
    position: absolute;
     top: 0;
    width: 170px;
    height: 10px;
    background-color: rgba(255,255,255,.3);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite;
}
@-webkit-keyframes searchLights {
    0% { left: -30px; top: 0; }
    to { left: 120px; top: 0; }
}*/
#container{position: relative;overflow: hidden;}


.hot-game-list{
    width:1200px;
    margin:0 auto;
}

.hot-game-list {margin-top: 30px;}
.hot-game-list div{float: left;width: 290px;margin: 8px 5px;}
.hot-game-list div h3{font-size:14px;margin-bottom:4px;text-align:center}
.hot-game-list div h3 a{color:#63c3de;height:22px!important;}
.hot-game-list div p a{text-align: left;font-size: 12px;color: #fff;padding: 5px 10px;line-height: 22px;height: 89px;background: #85919b;border-radius: 3px;display: flex;flex-direction: column;justify-content: space-between;}
.hot-game-list div a:hover{color:#63c3de; text-decoration:underline;}
.hot-game-list div a span{color:#3d4044;}
.hot-game-list div h3 a,.hot-game-list div h3 a:hover{display:compact;font-size:14px;padding:0;text-indent:10px;}
.yxfg{
	width:1200px;
	margin:0 auto;
}
.yxfg1{
	width:289px;
	height:399px;
	float:left;
}
.yxfg1 .item{
    width: 289px;
    height: 192px;
    position: relative;
    display: block;
}
.yxfg1 .item img{
	width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
     filter: brightness(80%);
}

.yxfg1 .item img:hover{
     filter: brightness(100%);
}
.yxfg1 .item .titles{
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 34px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0,.6);
    color: #fff;
}

.yxfg2{
	width:289px;
	height:399px;
	float:left;
	margin-left:15px;
}
.yxfg2 .item{
    width: 289px;
    height: 192px;
    position: relative;
    display: block;
}
.yxfg2 .item img{
	width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
     filter: brightness(80%);
}

.yxfg2 .item img:hover{
     filter: brightness(100%);
}
.yxfg2 .item .titles{
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 34px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0,.6);
    color: #fff;
}

.topic-one{
	width:592px;
	height:399px;
	float:left;
	margin-left:15px;
}
.topic-one .item{
    width: 592px;
    height: 399px;
    position: relative;
    display: block;
}
.topic-one .item img{
	width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    filter: brightness(80%);
}
.topic-one .item img:hover{
    filter: brightness(100%);
}
.topic-one .item .titles{
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 34px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0,.6);
    color: #fff;
}









.guide{position: fixed;bottom: 40px;left: 50%;width: 31px;height: 28px;margin-left: -15px;background-position:  -10px -394px;z-index: 99;cursor: pointer;}
.guide:hover{background-position:  -460px -334px;}
.guide:active{background-position:  -460px -274px;}

#pagination{position: fixed;right: 115px;top: 50%;height: 142px;margin-top: -72px;z-index: 100;}
#pagination div.pagbar{height: 14px;width: 4px;margin-top: 12px;}
#pagination div.active{height: 26px;}
#pagination div.pagbar .bar{background: #fff;opacity: .5;height: 100%;cursor: pointer; width: 4px; display: inline-block;}
#pagination div.active .bar{background: #fff;opacity: 1;height: 100%;cursor: pointer; width: 4px; display: inline-block;}
#pagination .act-tag{position: absolute;left: 10px;bottom: -2.5px;width: 40px;height: 17px;background-image: url("../images/act_tag_n.png");background-size: 100% 100%;cursor: pointer;}
#pagination div.active .act-tag{bottom: 2.5px;}
#pagination .act-tag:hover{background-image: url("../images/act_tag_h.png");}
@media screen and (max-width: 950px) {
    #pagination{display: none;}
}

.hide{display: none;}

/* p0 start*/
#p0 {position: relative;margin: 0 auto;background-image: url(../images/1507a8b42dab14d60d8d9acc011c8a4d.jpg);background-repeat: no-repeat;background-position: center;height: 100%;width: 100%;z-index: 1;}
#p0-inner{ position: absolute; top: 0; width: 1920px; left: 50%; margin-left: -960px; height: 100%; }
#p0-inner .bg {position: absolute;width: 1920px;height: 917px;top: 0;left: 0;z-index: 5;background-image: url(../images/1507a8b42dab14d60d8d9acc011c8a4d.jpg);background-repeat: no-repeat;background-position: center;height: 100%;width: 100%;animation-name: imgAnimation6;animation: imgAnimation6 10s infinite;-webkit-animation: imgAnimation6 10s infinite;-moz-animation: imgAnimation6 10s infinite;}
#p0-inner .particleAnimation {position: absolute;width: 100%;height: 100%;top: -150px;left: 10px;z-index:7;background-size: 100% 100%;/*animation: particleAnimation 1s infinite;animation-delay: 4s;-webkit-animation-delay: 4s; -webkit-animation: particleAnimation 1s infinite;-moz-animation: particleAnimation 1s infinite;*/}
#p0-inner .particleAnimation img {position: absolute;width: 100%;height: 100%;top: 0;left: 0; display: none;}
#p0-inner .particleAnimation img.frameShow {display: block;}
#p0-inner .mask_bg {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 9;background-color: rgba(0, 0, 0, 0.3);}
#p0-inner .mask{display:none;position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 999;background-color: rgba(0,0,0,0);}
#p0-inner .logo {position: absolute;left: 50%;top: 50%;margin-left: -283px;margin-top: -300px;z-index: 99;}
#p0-inner .title1{position: absolute;left: 50%;top:50%;margin-left: -370px;margin-top: -300px;z-index: 99;}
#p0-inner .title2 {position: absolute;left: 50%;top: 50%;margin-left: -112px;margin-top: -60px;z-index: 99;}
#p0-inner .imgAniWrapper{position: absolute;width: 100%;height: 300px;left: 0;top: 328px;z-index: 98;}
#p0-inner .imgAnimation1 {animation-name: imgAnimation1;animation: imgAnimation1 1s alternate infinite;-webkit-animation: imgAnimation1 1s alternate;-moz-animation: imgAnimation1 2s alternate infinite;}
#p0-inner .imgAnimation2 {transition: all 1s cubic-bezier(.23, 1, .23, 1);animation-name: imgAnimation2;animation: imgAnimation2 1s alternate;-webkit-animation: imgAnimation2 1s alternate;-moz-animation: imgAnimation2 2s alternate infinite;}
#p0-inner .imgAnimation3 {transition: all 1s cubic-bezier(.23, 1, .23, 1);animation-name: imgAnimation3;animation: imgAnimation3 1s alternate;-webkit-animation: imgAnimation3 1s alternate;-moz-animation: imgAnimation3 2s alternate infinite;}
#p0-inner .imgAnimation4 {animation-name: imgAnimation4;animation: imgAnimation4 1s alternate;-webkit-animation: imgAnimation4 1s alternate;-moz-animation: imgAnimation3 2s alternate infinite;}
#p0-inner .imgAnimation5 {animation-name: imgAnimation5;animation: imgAnimation5 10s alternate infinite;-webkit-animation: imgAnimation5 10s alternate infinite;-moz-animation: imgAnimation5 10s alternate infinite;}
@media screen and (max-height: 820px) {
    .imgAniWrapper {
        transform: scale(0.8);
        margin-top: -90px;
    }
    .install-1 {
        transform: scale(0.8);
    }
    .install-2 {
        transform: scale(0.8);
    }
}

#p0-inner .heard{height: 567px;width: 100%;position: relative;}
#p0-inner .install-1{position: absolute;left: 50%;top:50%;font-size: 0;margin-top: 110px;transform: translateX(-50%);/*margin-left: -270px;*/z-index: 99;}
#p0-inner .download{display: inline-block;width: 240px;height: 68px;text-align: center;background-position: -270px -186px;}
#p0-inner .download:hover{background-position: -10px -186px;}
#p0-inner .download:active{background-position: -270px -98px;}
#p0-inner p{color: rgba(255,255,255,.4);margin-top: 18px; font-size: 12px;text-align: center;}
#p0-inner div{float: left;}
#p0-inner .install-2{position: absolute;left: 50%;top:50%;font-size: 0;margin-top: 110px;margin-left: 30px;z-index: 99;}
#p0-inner .downloadgj{display: inline-block;width: 240px;height: 68px;text-align: center;background-position: -270px -10px;}
#p0-inner .downloadgj:hover{background-position: -10px -98px;}
#p0-inner .downloadgj:active{background-position: -10px -10px;}

#p0-inner .downloadmac{display: inline-block;width: 240px;height: 68px;text-align: center;background-position: 0 -432px;}
#p0-inner .downloadmac:hover{background-position: -259px -432px;}
#p0-inner .downloadmac:active{background-position:0 -520px;}

#p0-inner .view-detail{color: #02fcd1;}
#p0-inner .view-detail:hover{color: #64fae6;}
#p0-inner .view-detail:active{color: #01ceab;}

#p0-inner .install-3{position: absolute;left: 50%;top:50%;font-size: 0;margin-top: 236px;margin-left: -129px;z-index: 99;}
#p0-inner .install-3 .download-sp{font-size: 14px;color: #02fcd1;text-decoration: underline;cursor: pointer;}
#p0-inner .install-3 .download-sp:hover{color: #64fae6;}
#p0-inner .install-3 .download-sp:active{color: #01ceab;}
#p0-inner .hidden{display: none;}

@keyframes particleAnimation {
    0% {background-image: url("../images/0000.png")}
    4% {background-image: url("../images/0001.png")}
    8% {background-image: url("../images/0002.png")}
    16% {background-image: url("../images/0003.png")}
    16% {background-image: url("../images/0004.png")}
    20% {background-image: url("../images/0005.png")}
    24% {background-image: url("../images/0006.png")}
    28% {background-image: url("../images/0007.png")}
    32% {background-image: url("../images/0008.png")}
    36% {background-image: url("../images/0009.png")}
    40% {background-image: url("../images/0010.png")}
    44% {background-image: url("../images/0011.png")}
    48% {background-image: url("../images/0012.png")}
    52% {background-image: url("../images/0013.png")}
    56% {background-image: url("../images/0014.png")}
    60% {background-image: url("../images/0015.png")}
    64% {background-image: url("../images/0016.png")}
    68% {background-image: url("../images/0017.png")}
    72% {background-image: url("../images/0018.png")}
    76% {background-image: url("../images/0019.png")}
    80% {background-image: url("../images/0020.png")}
    84% {background-image: url("../images/0021.png")}
    88% {background-image: url("../images/0022.png")}
    92% {background-image: url("../images/0023.png")}
    96% {background-image: url("../images/0024.png")}
    100% {background-image: url("../images/0025.png")}
}

@-webkit-keyframes particleAnimation {
    0% {background-image: url("../images/0000.png")}
    4% {background-image: url("../images/0001.png")}
    8% {background-image: url("../images/0002.png")}
    16% {background-image: url("../images/0003.png")}
    16% {background-image: url("../images/0004.png")}
    20% {background-image: url("../images/0005.png")}
    24% {background-image: url("../images/0006.png")}
    28% {background-image: url("../images/0007.png")}
    32% {background-image: url("../images/0008.png")}
    36% {background-image: url("../images/0009.png")}
    40% {background-image: url("../images/0010.png")}
    44% {background-image: url("../images/0011.png")}
    48% {background-image: url("../images/0012.png")}
    52% {background-image: url("../images/0013.png")}
    56% {background-image: url("../images/0014.png")}
    60% {background-image: url("../images/0015.png")}
    64% {background-image: url("../images/0016.png")}
    68% {background-image: url("../images/0017.png")}
    72% {background-image: url("../images/0018.png")}
    76% {background-image: url("../images/0019.png")}
    80% {background-image: url("../images/0020.png")}
    84% {background-image: url("../images/0021.png")}
    88% {background-image: url("../images/0022.png")}
    92% {background-image: url("../images/0023.png")}
    96% {background-image: url("../images/0024.png")}
    100% {background-image: url("../images/0025.png")}
}


@-webkit-keyframes imgAnimation1 {
    0% {
        opacity:0;
    }

    100% {
        opacity:1;
    }
}
@-webkit-keyframes imgAnimation2 {
    0% {
        opacity:0;
        margin-left: -450px;
        margin-top: -300px;
    }

    100% {
        opacity:1;
        margin-left: -370px;
        margin-top: -300px;
    }
}
@-webkit-keyframes imgAnimation3 {
    0% {
        opacity:0;
        margin-left: -32px;
        margin-top: -60px;
    }

    100% {
        opacity:1;
        margin-left: -112px;
        margin-top: -60px;
    }
}
@-webkit-keyframes imgAnimation4 {
    0% {
        display: block;
        background-color: rgba(0, 0, 0, 0.5);
    }

    100% {
        background-color: rgba(0, 0, 0, 0);
        display: none;
    }
}

@-webkit-keyframes imgAnimation5 {
    0% {
        background-color: rgba(0, 0, 0, 0.3);
    }

    50% {
        background-color: rgba(0, 0, 0, 0);
    }

    100% {
        background-color: rgba(0, 0, 0, 0.3);
    }
}

@-webkit-keyframes imgAnimation6 {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
        width: 100%;
        height: 100%;
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
@keyframes scrollBackground1{
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-3200px);
    }
}
@-webkit-keyframes scrollBackground1{
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-3200px);
    }
}
@keyframes scrollBackground2{
    0% {
        transform: translateX(3200px);
    }
    100% {
        transform: translateX(0px);
    }
}
@-webkit-keyframes scrollBackground2{
    0% {
        transform: translateX(3200px);
    }
    100% {
        transform: translateX(0px);
    }
}

/* p1 start*/
#p1{ position:relative; margin:0 auto; height: 850px;width: 100%;}
#p1-inner{position: absolute;top: 0;width: 1920px;left: 50%;margin-left: -960px;height: 100%;z-index: 98;}
.scroll-bg{font-size:0;width:3200px;height: 1000px;position: absolute;left: 50%;top:50%;margin-left: -1600px;margin-top: -500px;}
.scroll-bg .vert{width: 320px;height: 1000px;position: absolute;top:0;}
#scroll-1{transform: translateX(0px);-webkit-transform: translateX(0px);animation: scrollBackground1 80s linear infinite;-webkit-animation: scrollBackground1 80s linear infinite;}
#scroll-2{transform: translateX(3200px);-webkit-transform: translateX(3200px);animation: scrollBackground2 80s linear infinite;-webkit-animation: scrollBackground2 80s linear infinite;}
.scroll-bg .v1{left: 0;}
.scroll-bg .v2{left: 320px;}
.scroll-bg .v3{left: 640px;}
.scroll-bg .v4{left: 960px;}
.scroll-bg .v5{left: 1280px;}
.scroll-bg .v6{left: 1600px;}
.scroll-bg .v7{left: 1920px;}
.scroll-bg .v8{left: 2240px;}
.scroll-bg .v9{left: 2560px;}
.scroll-bg .v10{left: 2880px;}
.scroll-bg .card {width: 320px;height: 500px;background: #0b0d14;opacity: 0.1;}
.scroll-bg .f1{opacity: .1;animation: flash1 6s linear infinite;-webkit-animation: flash1 6s linear infinite;}
.scroll-bg .f2{opacity: .2;animation: flash2 8s linear infinite;-webkit-animation: flash2 8s linear infinite;}
.scroll-bg .f3{opacity: .3;animation: flash3 6s linear infinite;-webkit-animation: flash3 6s linear infinite;}
.scroll-bg .f4{opacity: .4;animation: flash4 8s linear infinite;-webkit-animation: flash4 8s linear infinite;}
.scroll-bg .f5{opacity: .5;animation: flash5 6s linear infinite;-webkit-animation: flash5 6s linear infinite;}
.scroll-bg .f6{opacity: .6;animation: flash6 8s linear infinite;-webkit-animation: flash6 8s linear infinite;}
#scroll-2{transform: translateX(3200px);-webkit-transform: translateX(3200px);}
@keyframes flash1 {
    0% {opacity: .1;}
    45% {opacity: 1;}
    95% {opacity: 0;}
    100% {opacity: .1;}
}
@-webkit-keyframes flash1 {
    0% {opacity: .1;}
    45% {opacity: 1;}
    95% {opacity: 0;}
    100% {opacity: .1;}
}
@keyframes flash2 {
    0% {opacity: .2;}
    40% {opacity: 1;}
    90% {opacity: 0;}
    100% {opacity: .2;}
}
@-webkit-keyframes flash2 {
    0% {opacity: .2;}
    40% {opacity: .6;}
    90% {opacity: .1;}
    100% {opacity: .2;}
}

@keyframes flash3 {
    0% {opacity: .3;}
    35% {opacity: 1;}
    85% {opacity: 0;}
    100% {opacity: .3;}
}
@-webkit-keyframes flash3 {
    0% {opacity: .3;}
    35% {opacity: 1;}
    85% {opacity: 0;}
    100% {opacity: .3;}
}

@keyframes flash4 {
    0% {opacity: .4;}
    30% {opacity: 1;}
    80% {opacity: 0;}
    100% {opacity: .4;}
}
@-webkit-keyframes flash4 {
    0% {opacity: .4;}
    30% {opacity: 1;}
    80% {opacity: 0;}
    100% {opacity: .4;}
}

@keyframes flash5 {
    0% {opacity: .5;}
    25% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: .5;}
}
@-webkit-keyframes flash5 {
    0% {opacity: .5;}
    25% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: .5;}
}
@keyframes flash6 {
    0% {opacity: .6;}
    20% {opacity: 1;}
    70% {opacity: 0;}
    100% {opacity: .6;}
}
@-webkit-keyframes flash6 {
    0% {opacity: .6;}
    20% {opacity: 1;}
    70% {opacity: 0;}
    100% {opacity: .6;}
}

@keyframes flash10 {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes flash10 {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}
#p1-inner .title{position: absolute;left: 50%;bottom:50%;margin-left:-520px;margin-bottom: 25px;}
#p1-inner .desc{font-size: 20px;color: #eee;width: 600px;text-align: center;position: absolute;height: 20px;line-height: 20px;margin-left: -300px;margin-bottom: 210px;left: 50%;bottom:50%;}
#p1-inner .b {position: absolute;z-index: 99;left: 0;right: 0;margin: auto;top: 50%;width: 1200px;height: 399px;margin-top: -162px;}
#p1-inner .bt1 {}
#p1-inner .bt2 {margin-left: 40px;}
#p1-inner .bt3 {margin-left: 40px;}
#p1-inner .btn {display: inline-block;position: relative;box-sizing: border-box;width: 240px;text-align: center;height: 100%;border: 1px solid rgba(255,255,255,0.3);background-color: rgba(11,13,20,0.6);}
#p1-inner .btn:hover{border: 1px solid rgba(7,107,238);}
#p1-inner .btn a {margin-bottom: 28px;text-align: center;padding: 0;}
#p1-inner .btn a div{background-repeat: no-repeat;background-position: center;height: 82px;width: 74px;}
#p1-inner .btn .btn-icon{height: 100px;width: 100px;position: absolute;left: 0;right: 0;top: 54px;margin: auto;transition: all 0.1s linear;}
#p1-inner .btn .btn-desc{width: 98px;position: absolute;left: 0;right: 0;top: 208px;margin: auto;font-size: 20px;text-align: center;line-height: 20px;transition: all 0.1s linear;}
#p1-inner .btn .download-first{opacity: 0;width: 130px;height: 40px;position: absolute;text-align: center;line-height: 40px;font-size: 16px;background-color: #076bee;top: 170px;left: 0;right: 0;margin: auto;transition: 0.1s opacity ease-in-out;}
#p1-inner .btn .download-first:hover{background-color: rgb(0,136,240);}
#p1-inner .btn .download-first:active{background-color: rgb(7,107,238);}
#p1-inner .btn .download-second{opacity: 0;width: 130px;height: 40px;position: absolute;text-align: center;line-height: 40px;font-size: 16px;background-color: #076bee;top: 230px;left: 0;right: 0;margin: auto;transition: 0.1s opacity ease-in-out;}
#p1-inner .btn .download-second:hover{background-color: rgb(0,136,240);}
#p1-inner .btn .download-second:active{background-color: rgb(7,107,238);}
#p1-inner .btn:hover .btn-icon{transform: translateY(-14px) scale(0.8);}
#p1-inner .btn:hover .btn-desc{transform: translateY(-57px);}
#p1-inner .bt1:hover .btn-icon{transform: translateY(-30px) scale(0.8);}
#p1-inner .bt1:hover .btn-desc{transform: translateY(-93px);}
#p1-inner .bt3:hover .btn-icon{transform: translateY(-30px) scale(0.8);}
#p1-inner .bt3:hover .btn-desc{transform: translateY(-93px);}
#p1-inner .btn:hover .download-first{opacity: 1;transition: 0.1s opacity 0.05s ease-in-out;}
#p1-inner .btn:hover .download-second{opacity: 1;transition: 0.1s opacity 0.05s ease-in-out;}

/* p2 start*/
#p2{ position:relative; margin:0 auto; height: 850px;width: 100%; background:#000 url(../images/3d92335c616d0d7604a166a91c8ef0a6.png) no-repeat center;}
#p2-inner{ position: absolute; top: 0; width: 1920px; left: 50%; margin-left: -960px; height: 850px;}
#p2-inner .title{position: absolute;left: 50%;top:50%;margin-left:-375px;margin-top: -180px; }
#p2-inner .planet1{position: absolute;left: 50%;top:50%;margin-left:500px;margin-top: -280px; }
#p2-inner .planet2{position: absolute;left: 50%;top:50%;margin-left:-570px;margin-top: -80px; }
#p2-inner .bottom{position: absolute;left: 0;top:50%;margin-top: -500px; }
#p2-inner .desc{width: 900px;height: 160px;position: absolute;left: 50%;top: 50%;margin-left: -450px;margin-top: -20px;}
#p2-inner .card{width: 300px;height: 100%;float: left;position: relative;}
#p2-inner .card img{position: absolute;top:0;left: 105px;}
#p2-inner .card .wd{position: absolute;bottom:0;left: 0;width: 300px;text-align: center;font-size: 20px;color: #eee;}
/* p3 start*/
#p3{ position:relative; margin:0 auto; height: 100%;width: 100%;}
#p3-inner{ position: absolute; top: 50%; width: 1920px; left: 50%; margin-left: -960px; height: 1000px;margin-top: -500px;background: url(../images/beac8f52c4a19fd9220cca6fcabf3b9b.png);}
#panel-left{
    width: 1280px;
    height:1000px;
    position: absolute;
    top:0;
    left: 0;
    /*background: url(../images/63548d9981ca5fb42e44710836b79c62.jpg) 0 0 no-repeat;*/
    -webkit-clip-path: polygon(0% 0%, 100% 0, 1020px 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0, 1020px 100%, 0% 100%);
    z-index: 1;
    }
#left-spread{width: 1280px;height:1000px; position: absolute;top:0;left: 0;background: url(../images/bc5e1060f2651be0a28b93b23ef50b8d.png) 0 0 no-repeat;}
#panel-left-title{position: absolute;left: 458px;transform: scale(1);top:297px;z-index: 2;filter: drop-shadow(4px 4px 20px rgba(0,0,0,.3))}
#panel-left .desc{position: absolute;right: 324px;top:414px;width: 500px; height: 20px;color: #eee;font-size: 20px;}
#panel-left .pay{position: absolute;right: 259px;top:474px;width: 632px;height: 225px;}
#panel-left .card{float: right;margin-left: -35px;position: relative;top: 0;-webkit-transition: top 100ms linear;}
#panel-left .card:hover {top: -5px;}

#panel-right{
    width: 1280px;
    height:1000px;
    position: absolute;
    top:0;
    right: 0;
    /*background: url(../images/270bfd8bd93d35d1c03b81412cf48801.jpg) 100% 0 no-repeat;*/
    -webkit-clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
    }
#right-spread{width: 0;height:1000px; position: absolute;top:0;right: 0;background: url(../images/a2350c2768731edb49f6f108a5097e36.png) 100% 0 no-repeat;
    -webkit-clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    overflow: hidden;
}
/*#panel-right .can-hide{display: none;}*/
#panel-right-title{position: absolute;right: 396px;transform: scale(1);-ms-transform: scale(1);top:443px;z-index: 1;filter: drop-shadow(4px 4px 20px rgba(0,0,0,.3))}
#panel-right .desc{position: absolute;right: 600px;top:414px;width: 400px; height: 20px;color: #eee;font-size: 20px;}
#panel-right .pay{position: absolute;right: 460px;top:474px;width: 540px; height: 230px;}
#panel-right .card{float: right;margin-right: 20px;position: relative;top: 0;transition: top 100ms linear;-webkit-transition: top 100ms linear;}
#panel-right .card:hover{top: -5px;}

#magic-bg{position: absolute; top: 0; width: 540px; right:0; height: 1000px;background: url(../images/beac8f52c4a19fd9220cca6fcabf3b9b.png) 100% 0 no-repeat;
    -webkit-clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(260px 0%, 100% 0, 100% 100%, 0% 100%);
    z-index:1;
}

#p4 {position: relative;margin: 0 auto;background-image: url(../images/645fb7e994748a42de6cbbf88b52c7ce.png);background-repeat: no-repeat;background-position: center;height: 100%;width: 100%;z-index: 1;display: flex;align-items: center;justify-content: center;flex-direction: column;}
#p4 .p4-title{margin-bottom: 20px;}
#p4 .p4-title .p4-title-bg{height: 72px;width: 698px;margin-bottom: 20px;background-image: url("../images/6bf6bb4c2d391a05c36457bace0f315e.png");}
#p4 .p4-title .p4-title-tips{text-align: center;font-size: 16px;}
#p4 .p4-inner{display: flex;flex-wrap: wrap;width: 1140px;}
/* p4 start*/
#p5{ position:relative; margin:0 auto; height: 800px;width: 100%; background:#08090f url(../images/7c07673b8b6d42d6b7a5f41c915a2621.jpg) center center no-repeat;}
#p5-inner{ position: absolute; top: 50%; width: 1920px; left: 50%; margin-left: -960px; height: 800px;overflow: hidden;}
.event-news{height: 340px;position: relative;margin: auto;padding-top: 140px;width: 1200px;/*margin-top: -80px;*/}
.event-news .title{position: absolute;top: 100px;left: 50%;margin-left: -228px;}
.event-news .more{text-align: center;position: absolute;top: 180px;width: 200px;left: 50%;margin-left: -100px;color: #94979f;}
.event-news .more a{color: #94979f;}
.event-news .more a:hover{color: #fff;}
.event-news .more a:active{color: #94979f; opacity: .5;}

.event-news ul{position: absolute; bottom: 0;width: 100%;}
.event-news li{float: left;position: relative;margin-right: 30px;}
.event-news li:last-child{margin-right: 0px;}

.event-news .event-desc{height: 75px;width: 100%;position: absolute;bottom: 0px;color: #fff;left: 0}
.event-news .event-desc .desc{margin: 18px auto 7px 18px;font-size: 16px;}
.event-news .event-desc p{margin-left: 18px;}
.event-news .event-desc p:first-child{height: 16px;overflow: hidden; line-height: 1;}
.event-news .event-desc p:nth-child(2){height: 22px;color: #94979f;font-size: 12px!important;}
.event-news li img{height: 240px;width: 380px;}
.event-news .mask{position: absolute;height: 75px;width: 380px;bottom: 0px;background: #000;filter:alpha(opacity:60); opacity:0.6;left: 0}
@media screen and (max-height: 820px) {
    .event-news {
        transform: scale(0.8);
        /* margin-top: -120px; */
    }
}

#common-top {position: fixed !important;}
#common-mainbox {position: relative;left: -8px;}
.footer{font-size: 12px;line-height: 1.8em;color: #10131b;text-align: center;padding: 30px 0;width: 100%;position: absolute;left: 0;bottom: 0;}
.footer a, .footer p{color: #9E9E9E;margin: 0 10px;}

.partner{position: absolute;width: 1300px;left: 50%;margin-left: -600px;bottom: 100px;display: flex;}
.partner *{display: inline-block;vertical-align: middle;}
.partner i{background: rgba(78,80,87,0.7);width: 1px;height: 50px;margin-right: 40px;}
.partner span{filter:alpha(opacity:50);font-size: 12px;color: #7e8189;margin-right: 31px;margin-bottom: 15px;}

.partner .partner_p1,
.partner .partner_p2{
    display: flex;
    flex-direction: column;
}

.partner .partner_p3,
.partner .partner_p1 .partner_p1_content,
.partner .partner_p1 .partner_p2_content{
    display: flex;
}

#wechat{position: relative;}
#wechat .sh{display: none;position: absolute;top: -150px;left: -60px;}
#wechat:hover .sh{display: block;}
#android {position: relative;}
#android .sh {display: none;width: 140px;height: 140px;background: #fff;position: absolute;top: -151px;left: -61px;}
#android .sh .hinter{width: 9px;height: 9px;position: absolute;left: 0;right: 0;bottom: -3px;margin: auto;background: #fff;transform: rotate(45deg);}
#android .sh img{height: 125px;width: 125px;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;}
#android:hover .sh {display: block;}
#netbar image{}
#new {position: absolute;top: 41px;left: 555px;}
#netbar span{line-height: 13px;color: #fff;}
#netbar .icon{}