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

}
body{
     background: url(../img/bg.jpg) center  0;
    background-size: cover;
}
body.freeze {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
   
}

a:hover {
    text-decoration: none
}

header {
    height: 84px;
    position: fixed;width: 100%;left: 0;top: 0;z-index: 24;

}

header .bg-menu { 
    z-index: 1;
    background: #c7223b;
    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 {height: 84px;
    justify-content: space-around;
    display: flex;margin-bottom: 0;
    background: url(../img/menu-bg.png?v=0.0.1) center 0;padding:0 50px;
}

header nav ul li{position: relative;padding:0 25px;}
header nav ul li a{display: flex;flex-direction: column;height: 100%;justify-content: center;}
header nav ul li a span {
    color: #fff;font-size: 20px;text-align: center;
}
header nav ul li a em {font-size: 14px;
    color: #000;font-style: normal;text-align: center;
}
header nav ul li.active a span{color: #ff0048}
header nav ul li.active a em{color: #ff0048}
header nav dl{display: none;position: absolute;top: 64px;margin-bottom: 0;width: 100%;background: #00afff;left: 0;border-radius: 0 0 3px 6px;overflow: hidden;box-shadow: 0 0 6px rgba(0,0,0,.6)}
header nav dl dt {font-weight: normal;}
header nav dl dt a{padding:6px 0 ;transition: all .5s}
header nav dl dt a:hover{background: #00a0de;}
header nav ul li:hover dl{display: block;}
header nav ul li dt span{font-size: 16px;}
footer {
    position: relative;
    background: #00b8ff;
    color: #fff;
    text-align: center;
    padding: 54px 0 25px;
    z-index: 3
}

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

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

ul.down li a {
    display: block;
    height: 70px;
    width: 256px;
    line-height: 70px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-image: url(../img/btnv.png)
}

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

.videoarea,.funarea,.indexarea{min-height: calc(100vh - 99px)}
/*.indexarea{height: 1440px;}*/
.indexarea h1 {position: relative;margin-top: 130px;margin-bottom: 0}
.indexarea h1 span{text-indent: -9999em;position: absolute;}
.indexarea h1 img{width: 83.916666666667%;margin-left: auto;margin-right: auto;display: block;}
.indexarea .leftright{padding-bottom: 43.763888888889%;position: relative;}
.indexarea .left,.indexarea .right{position: absolute;}
.indexarea .left{width: 13.75%;left: 18.333333333333%}
.indexarea .left img{width: 100%;height: 100%;object-fit: cover;}
.indexarea .right{width: 22%;right: 9.6666666666667%}
.indexarea .right img{width: 100%;height: 100%;object-fit: cover;}
.indexarea .videotwo{padding-bottom: 10%}
.indexarea .videotwo ul{display: flex;justify-content: space-around;}
.indexarea .videotwo ul li{max-width: 348px;width: 50%;}
.indexarea .videotwo ul li .vv{
    padding-bottom: 75%;
    position: relative;
    background: url(../img/frame.png);
    background-size: cover;
    overflow: hidden;
}
.indexarea .videotwo ul li .vv .play{background: #000;width: 80%;padding-bottom: 54%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.indexarea .videotwo ul li .vv iframe{width: 100%;height:100%;position: absolute;left: 0%;top: 0%;}


.indexarea .videotwo ul li .vt img{margin:0 auto;display: block;width: 100%;max-width: 322px;}


.indexarea .videotwo ul li .tit{
    display: block;
    color: #fff;
    overflow: hidden;
    font-size: 24px;
    background: url(../img/btni.png);
    background-size: cover;
    padding-bottom: 26%;
    position: relative;margin-top: 15px;
}
.indexarea .videotwo ul li .tit span {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}



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

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

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




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

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

.videoarea .container ul li a .tit {
    color: #fff;overflow: hidden;font-size: 18px;background: url(../img/btnv.png);background-size: cover;padding-bottom: 29%;position: relative;
}
.videoarea .container ul li a .tit span{position: absolute;display: block;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;}

.videoarea .container ul li .img {
    padding-bottom: 75%;
    position: relative;
    background: url(../img/frame.png);
    background-size: cover;
    overflow: hidden;
}

.videoarea .container ul li .img img {
    width: 50%;   
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.videoarea .container ul li .img i {
    width: 24%;
    padding-bottom:  24%;
    background: url(../img/btn_play.png) 0 0 no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    z-index: 1;
    transform: translate(-50%, -50%);
    background-size: cover;
}




.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: #d63243;
    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: -20px
}

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


.newbanner .js {
    /*width: 666px;
    height: 448px;*/
    width: 590px;
    height: 346px;
    position: absolute;
    right: 80px;
    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;
}