* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;

}

body.freeze {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
}

a:hover {
    text-decoration: none
}

header {
    height: 92px;
    position: relative;
    z-index: 24;
    box-shadow: 0 0 9px rgba(255, 255, 255, .6);
}

header .bg-menu {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(#05c2e7, #044181);
    background: #007eff;
    transition: all .3s
}

header .btn-menu {
    position: fixed;
    z-index: 15;
    top: 0;
    right: 0;
    width: 13.3333333333%;
    height: 0;
    padding-top: 13.3333333333%;
    cursor: pointer;
    margin-top: 2.6666666667%;
    margin-right: 2.6666666667%;
}

header .btn-menu .inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

header .btn-menu .inner::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 0;
    padding-top: 8%;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    border-radius: 20px;
    -webkit-transform: translateY(-220%) rotateZ(0deg);
    transform: translateY(-220%) rotateZ(0deg);
    transition: all .5s
}

header .btn-menu .inner::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 0;
    padding-top: 8%;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    border-radius: 20px;
    transform: translateY(220%) rotateZ(0deg);
    transition: all .5s
}

header .btn-menu .inner span {
    position: absolute;
    display: block;
    width: 50%;
    height: 0;
    padding-top: 8%;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    border-radius: 20px;
    transition: all .3s
}

header.open .btn-menu .inner::after {
    transform: translateY(0) rotateZ(-45deg);
}

header.open .btn-menu .inner::before {
    transform: translateY(0) rotateZ(45deg);
}

header.open .btn-menu .inner span {
    transform: scale(0, 1);
}

header.open .bg-menu {
    transform: scale(30);
}




header nav {
    position: relative;
    width: 100%;
    z-index: 10;
}

header nav ul {
    justify-content: center;
    display: flex;
    padding-top: 26px;
}

header nav ul li {
    line-height: 40px;
    height: 40px;
    font-size: 22px;
    margin: 0 15px;
}

header nav ul li.btn-index {
    width: 70px;
}

header nav ul li.btn-index a {
    background-image: url(../img/index.png);
}

header nav ul li.btn-index.active a,
header nav ul li.btn-index.active a:hover {
    background-position: 0 -40px;
}

header nav ul li.btn-index a:hover {
    background-position: 0 -80px;
}

header nav ul li.btn-fun {
    width: 120px;
    position: relative;
}

header nav ul li.btn-fun a {
    background-image: url(../img/fun.png);
}

header nav ul li.btn-fun.active a,
header nav ul li.btn-fun.active a:hover {
    background-position: 0 -40px;
}

header nav ul li.btn-fun a:hover {
    background-position: 0 -80px;
}

header nav ul li.btn-video {
    width: 120px;
    position: relative;
}

header nav ul li.btn-video a {
    background-image: url(../img/video.png);
}

header nav ul li.btn-video.active a,
header nav ul li.btn-video.active a:hover {
    background-position: 0 -40px;
}

header nav ul li.btn-video a:hover {
    background-position: 0 -80px;
}

header nav ul li.btn-ask {
    width: 148px;
    position: relative;
    background-image: url(../img/ask.png);
    background-repeat: no-repeat;
}

header nav ul li.btn-ask.active,
header nav ul li.btn-ask.active:hover {
    background-position: 0 -40px;
}

header nav ul li.btn-ask:hover {
    background-position: 0 -80px;
}

header nav ul li.btn-ask ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 40px;
    width: 218px;
    height: 0px;
    transition: all 0.2s ease;
    overflow: hidden;
    background-image: url(../img/bg_submenu_pc1.png);
    padding-top: 0;
    display: inherit;
}

header nav ul li.btn-ask:hover ul {
    height: 139px;
}

header nav ul li.btn-ask ul li {
    margin: 36px auto 0;
}

header nav ul li.btn-ask ul li.Twitter {
    margin-top: 30px;
    width: 98px;
    height: 23px;
    background-image: url(../img/twi.png);
}

header nav ul li.btn-ask ul li.Twitter:hover {
    background-position: 0 -23px;
}

header nav ul li.btn-ask ul li.Facebook {
    width: 112px;
    height: 23px;
    background-image: url(../img/fac.png);
}

header nav ul li.btn-ask ul li.Facebook:hover {
    background-position: 0 -23px;
}

header nav ul li.btn-ask ul li.luntan {
    width: 46px;
    height: 23px;
    background-image: url(../img/lun.png);
}

header nav ul li.btn-ask ul li.luntan:hover {
    background-position: 0 -23px;
}

header nav ul li.btn-DownLoad {
    width: 120px;
    position: relative;
    background-image: url(../img/down.png);
    background-repeat: no-repeat;
}

header nav ul li.btn-DownLoad.active,
header nav ul li.btn-DownLoad.active:hover {
    background-position: 0 -40px;
}

header nav ul li.btn-DownLoad:hover {
    background-position: 0 -80px;
}

header nav ul li.btn-DownLoad ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 40px;
    width: 218px;
    height: 0px;
    transition: all 0.2s ease;
    overflow: hidden;
    background-image: url(../img/bg_submenu_pc.png);
    padding-top: 0;
    display: inherit;
}

header nav ul li.btn-DownLoad:hover ul {
    height: 208px;
}

header nav ul li.btn-DownLoad ul li {
    margin: 32px auto 0;
}

header nav ul li.btn-DownLoad ul li.TiantangM {
    margin-top: 30px;
    width: 174px;
    height: 27px;
    background-image: url(../img/TiantangM.png);
}

header nav ul li.btn-DownLoad ul li.TiantangM:hover {
    background-position: 0 -27px;
}

header nav ul li.btn-DownLoad ul li.Moniqi {
    width: 136px;
    height: 27px;
    background-image: url(../img/Moniqi.png);
}

header nav ul li.btn-DownLoad ul li.Moniqi:hover {
    background-position: 0 -27px;
}

header nav ul li.btn-DownLoad ul li.jianshi {
    width: 84px;
    height: 27px;
    background-image: url(../img/jianshi.png);
}

header nav ul li.btn-DownLoad ul li.jianshi:hover {
    background-position: 0 -27px;
}


[class^="btn-"] a {
    display: block;
    width: 100%;
    height: 100%;
}


header nav ul li a {
    color: #fff
}

header nav ul li a span {
    display: none
}

header nav ul li:not(:first-child)::before {
    content: '';
    position: absolute;
    background: url(../img/fgx.png) no-repeat 0 0;
    width: 12px;
    height: 20px;
    left: -22px;
    top: 8px;
}

footer {
    position: relative;
    background: #007eff;
    box-shadow: 0 0 9px rgba(255, 255, 255, .6);

    color: #fff;
    text-align: center;
    padding: 54px 0 25px;
    z-index: 3
}

ul.down {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

ul.down li {
    margin: 0 15px;
}

ul.down li a {
    display: block;
    height: 70px;
    width: 180px;
    line-height: 70px;
    font-weight: bold;
    text-align: center;
    color: #fff
}

ul.down li.TiantangM a {
    background-image: url(../img/btn_down1.png)
}

ul.down li.TiantangM a:hover {
    background-position: 0 -70px;
}

ul.down li.Moniqi a {
    background-image: url(../img/btn_down3.png)
}

ul.down li.Moniqi a:hover {
    background-position: 0 -70px;
}

ul.down li.jianshi a {
    background-image: url(../img/btn_down2.png)
}

ul.down li.jianshi a:hover {
    background-position: 0 -70px;
}
ul.down li.yun a {
    background-image: url(../img/btn_down4.png);background-position: 0 -70px;
}

ul.down li.yun a:hover {
    background-position: 0 0px;
}


footer .logo {
    width: 120px;
    height: 49px;
    background: url(../img/logo.png);
    margin: 12px auto 0;
    background-size: cover;
}

.h5area {
    width: 100%;
    padding-bottom: 56.444444444444%;
    background: url(../img/bg_01.jpg);
    background-size: cover;
    /*margin-top: -92px;*/
    position: relative;
    display: none;
    overflow: hidden;
}

.h5area .guding {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 22;
}

.h5area .guding .bgplay {
    min-width: 124px;
    height: 124px;
    background: url(../img/btn_play.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.h5area .logogd {
    width: 60%;
    margin: 0 auto;
}

.h5area .logogd .img {
    width: 100%;
    padding-bottom: 41%;
    background: url(../img/logo.png);
    background-size: cover;
}

.h5area .se {
    position: absolute;
    background-size: cover;
}

.h5area .deng {
    border-radius: 100%;
    width: 1.4583333333333%;
    z-index: 3;
    padding-bottom: 1.4583333333333%;
    background: -webkit-radial-gradient(rgba(255, 250, 16, 1), rgba(255, 250, 16, 0) 50%);
}

.h5area .deng-1 {
    left: 1.8229166666667%;
    top: 24.42962962963%;
    animation: shan1 .6s linear infinite
}
.h5area .deng-2 {
    left:33.645833333333%;
    top: 50.996296296296%;
    animation: shan1 .6s linear infinite
}
.h5area .deng-3 {
    left: 52.03125%;
    top: 35.092592592593%;
    animation: shan1 .6s linear infinite
}
.h5area .deng-4 {
    left: 71.770833333333%;
    top: 94.074074074074%;
    animation: shan1 .6s linear infinite
}

@keyframes shan1 {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.h5area .shuye1 {
    z-index: 4;
    width: 3.28125%;
    padding-bottom: 1.7708333333333%;
    background-image: url(../img/dong/shuye1.png);
    /*left: 83.958333333333%;*/
    left: 0;
    top: 0;
    animation: piao1 4s linear infinite both
}

.h5area .shuye2 {
    z-index: 4;
    width: 3.28125%;
    padding-bottom: 1.7708333333333%;
    background-image: url(../img/dong/shuye1.png);
    /*left: 83.958333333333%;*/
    left: 0;
    top: 0;
    animation: piao2 6s linear infinite both
}

.h5area .shuye3 {
    z-index: 4;
    width: 3.28125%;
    padding-bottom: 1.7708333333333%;
    background-image: url(../img/dong/shuye1.png);
    /*left: 83.958333333333%;*/
    left: 0;
    top: 0;
    animation: piao3 8s linear infinite both
}

@keyframes piao1 {
    0% {
        left: 80%;
        top: 0%;
        transform: rotateX(0deg);

    }

    50% {
        left: 55%;
        top: 50%;
        transform: rotateX(180deg) rotateY(180deg);
    }

    100% {
        left: 30%;
        top: 100%;
        transform: rotateX(0deg);
    }
}

@keyframes piao2 {
    0% {
        left: 70%;
        top: 0%;
        transform: rotateX(0deg);

    }

    50% {
        left: 50%;
        top: 50%;
        transform: rotateX(180deg) rotateY(180deg);
    }

    100% {
        left: 30%;
        top: 100%;
        transform: rotateX(0deg);
    }
}

@keyframes piao3 {
    0% {
        left: 60%;
        top: 0%;
        transform: rotateX(0deg);

    }

    50% {
        left: 35%;
        top: 50%;
        transform: rotateX(180deg) rotateY(180deg);
    }

    100% {
        left: 10%;
        top: 100%;
        transform: rotateX(0deg);
    }
}

.h5area .section01-1 {
    width: 3.6458333333333%;
    padding-bottom: 7.5520833333333%;
    background-image: url(../img/dong/section01-1.gif);
    left: 53.958333333333%;
    top: 73.055555555556%;
}

.h5area .section01-2 {
    width: 6.1979166666667%;
    padding-bottom: 9.1666666666667%;
    background-image: url(../img/dong/section01-2.gif);
    left: 43.4375%;
    top: 83.611111111111%;
}

.h5area .section01-3 {
    width: 5.4166666666667%;
    padding-bottom: 6.7708333333334%;
    background-image: url(../img/dong/section01-3.gif);
    left: 8.6979166666667%;
    top: 28.888888888889%;
    animation: jp 1s linear infinite
}

@keyframes jp {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20%);
    }

    100% {
        transform: translateX(0);
    }
}

.h5area .section01-4 {
    width: 4.6354166666667%;
    padding-bottom: 5.78125%;
    background-image: url(../img/dong/section01-4.gif);
    left: 8.0729166666667%;
    top: 55.833333333333%;
}

.h5area .section01-5 {
    width: 3.3854166666667%;
    padding-bottom: 7.1354166666667%;
    background-image: url(../img/dong/section01-5.gif);
    left: 12.708333333333%;
    top: 48.148148148148%;
}

.h5area .section02-1 {
    width: 3.4375%;
    padding-bottom: 8.0208333333333%;
    background-image: url(../img/dong/section02-1.gif);
    left: 62.864583333333%;
    top: 55%;
}

.h5area .section02-2 {
    width: 7.1354166666667%;
    padding-bottom: 6.8229166666667%;
    background-image: url(../img/dong/section02-2.gif);
    left: 55.572916666667%;
    top: 61.481481481481%;
    animation: xz .6s linear infinite
}

@keyframes xz {
    0% {
        transform: rotateZ(0);
    }

    /*50% {
          transform: translateY(-20%);
        }*/
    100% {
        transform: rotateZ(4deg);
    }
}

.h5area .section02-3 {
    width: 3.4375%;
    padding-bottom: 7.7604166666667%;
    background-image: url(../img/dong/section02-3.gif);
    left: 38.333333333333%;
    top: 19.537037037037%;
}

.h5area .section02-4 {
    width: 4.0104166666667%;
    padding-bottom: 7.9166666666667%;
    background-image: url(../img/dong/section02-4.gif);
    left: 82.395833333333%;
    top: 73.240740740741%;
}

.h5area .section02-5 {
    width: 6.40625%;
    padding-bottom: 8.6458333333333%;
    background-image: url(../img/dong/section02-5.gif);
    left: 85.833333333333%;
    top: 77.037037037037%;
}

.h5area .section03-1 {
    width: 5.46875%;
    padding-bottom: 10.260416666667%;
    background-image: url(../img/dong/section03-1.gif);
    left: 53.125%;
    top: 2.2222222222222%;
}

.h5area .section03-2 {
    width: 5.2083333333333%;
    padding-bottom: 7.0833333333333%;
    background-image: url(../img/dong/section03-2.gif);
    left: 39.479166666667%;
    top: 50.555555555556%;
}

.h5area .section03-3 {
    width: 10.729166666667%;
    padding-bottom: 15.15625%;
    background-image: url(../img/dong/section03-3.gif);
    left: 40.416666666667%;
    top: 32.037037037037%;
}

.funarea,
.videoarea {
    position: relative;
    margin-top: -92px;
}

.funarea .bg,
.videoarea .bg {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 100vh;
    background-size: cover;
    background-position: center 100%;
    background-repeat: no-repeat;
}

.funarea .bg {
    background-image: url(../img/bg_js.jpg);
}


.videoarea .bg {
    background-image: url(../img/bg_video.jpg);
}

.funarea .container,
.videoarea .container {
    margin-top: 92px;
    position: relative;
    z-index: 2
}

.funarea .container {
    padding: 1% 0 5%;
}

.videoarea .container {
    padding-top: 1%
}

.funarea .tit img,
.videoarea .tit img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}




.videoarea .container .row {
    padding: 5% 0 0;
}

.videoarea .container ul li {
    margin-bottom: 30px;
}

.videoarea .container ul li .tit {
    height: 58px;
    /*background: #000;*/
    font-size: 20px;
    line-height: 58px;
    text-align: center;
    font-weight: bold;
}

.videoarea .container ul li a .tit {
    color: #fff;
    transition: all .3s;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    text-shadow: 0 0 3px rgba(0, 0, 0, .6)
}

.videoarea .container ul li .img {
    padding-bottom: 99.014778325123%;
    position: relative;
    background: url(../img/frame.png);
    background-size: cover;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.videoarea .container ul li .img img {
    width: 90%;
    height: 90%;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -45%;
    margin-top: -45%
}

.videoarea .container ul li .img i {
    width: 100px;
    height: 100px;
    background: url(../img/btn_play.png) 0 0 no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    z-index: 1;
    transform: translate(-50%, -30%) scale(.2);
    background-size: cover;
    transition: all .3s;
    opacity: 0
}

.videoarea .container ul li a:hover .img i {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.videoarea .container ul li a:hover .tit {
    background: linear-gradient(#05c2e7, #044181);
    color: #fff
}


.videoplay {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 100%;
    right: 100%;
    background: #000;
    z-index: 999;
    display: none;
}

.videoplay .closewin {
    width: 6%;
    padding-bottom: 6%;
    cursor: pointer;
    position: absolute;
    background: linear-gradient(#05c2e7, #044181);
    background: #007eff;
    right: 18px;
    top: 18px;
    transform: rotate(45deg);
    border-radius: 100%;
    transition: all .4s ease-in-out;
}



.videoplay .closewin span {
    display: block;
    background: #fff;
    position: absolute;
}

.videoplay .closewin span:nth-child(1) {
    height: 12%;
    width: 60%;
    top: 50%;
    margin-left: -30%;
    left: 50%;
    margin-top: -6%
}

.videoplay .closewin span:nth-child(2) {
    height: 60%;
    width: 12%;
    left: 50%;
    margin-left: -6%;
    margin-top: -30%;
    top: 50%;
}


.newbanner {

    height: 740px;
}

.newbanner .swiper-container {
    width: 100%;
    height: 100%;
}

.newbanner .ren {
    width: 666px;
    height: 740px;
    position: absolute;
    top: 0;
    z-index: 2;
    left: 20
}

.newbanner .ren img,
.newbanner .js img {
    width: 100%
}


.newbanner .js {
    width: 666px;
    height: 448px;
    position: absolute;
    right: 40px;
    top: 30%;
}

.newbanner .js span {
    display: none
}

.newbanner .swiper-button-prev {
    outline: 0;
    width: 80px;
    height: 80px;
    background: url(../img/fun/img_arrow.png) no-repeat 0 0;
    display: block;
}

.newbanner .swiper-button-prev:hover {
    background-position: 0 -80px;
}

.newbanner .swiper-button-next {
    outline: 0;
    width: 80px;
    height: 80px;
    background: url(../img/fun/img_arrow.png) no-repeat -80px 0;
    display: block;
}

.newbanner .swiper-button-next:hover {
    background-position: -80px -80px;
}


.page-loader {
    position: fixed;
    z-index: 200;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(#05c2e7, #044181);
    background: #007eff;
    opacity: 0;
    z-index: 999;
}

.page-loader .mid {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
    margin-top: -60px;
}

.page-loader .mid p {
    margin-top: 1.0rem;
    font-size: 1.0rem;
    color: rgb(249, 218, 172);
    text-transform: uppercase;
}

.page-loader .mid p em {
    margin-left: 6px;
}

.page-loader .mid .ico {
    width: 86px;
    height: 86px;
    margin: 0 auto;
    display: block;
}