html{
    font-family: "微软雅黑";
    font-size: 20px;
}
body{
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
}
audio{
    display: none;
}
.music{
    position: fixed;
    right:10px;
    top:10px;
    z-index: 9999;
    width: 30px;
}
.up{
    animation: myfirst 2s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}
.off{
    display: none;
}
@keyframes myfirst {
    from {transform: rotate(0);}
    to {transform: rotate(360deg);}
}
.container{
    width: 100%;
    background: url("../images/bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.img1{
    position: absolute;
    width: 100%;
    left:0;
    top:11.24%;
    transition: all 1.5s;
    opacity: 0;
}
.img2{
    position: absolute;
    left:50%;
    top:50%;
    transition: all 1.5s;
    width: 0;
    height: 0;
}
.jb1{
    position: absolute;
    font-size: 14px;
    color: #1a7cd0;
    left:30%;
    bottom:45%;
    z-index: 100;
    opacity: .8;
    display: none;
}
.jb2{
    position: absolute;
    font-size: 14px;
    color: #1a7cd0;
    right:30%;
    bottom:45%;
    z-index: 100;
    opacity: .8;
    display: none;
}
.lu{
    position: absolute;
    z-index: 1001;
    bottom:0;
    left:0;
    width: 100%;
}
.lu>img{
    display: block;
    width: 100%;
}
.fj{
    position: absolute;
    z-index: 10;
    width: 100%;
    left:0;
    height: 160px;
}
.bg2-2{
    opacity: 0;
}
.luLeft,.luRight{
    width: 50%;
    float: left;
    position: relative;
    height: 100%;
}
.luLeft>img{
    position: absolute;
    right:0;
    width: 100%;
    bottom:0;
    transition: all 1.2s linear;
}
.luRight>img{
    position: absolute;
    left:0;
    width: 100%;
    bottom:0;
    transition: all 1.2s linear;
}
button{
    position: absolute;
    bottom:12%;
    width: 26%;
    background: none;
    outline: none;
    border: none;
    left:37%;
    opacity: .8;
}
button>img{
    display: block;
    width: 100%;
}
.luLeft>.aa,.luRight>.aa{
    width: 0;
    height: 0;
}
.nr{
    position: absolute;
    z-index: 1000;
    bottom:0;
    width: 100%;
    height: 100%;
    left:0;
}
.nr>img{
    position: absolute;
    width: 100%;
    bottom:0;
    left:0;
    display: none;
}
.nr>div{
    position: absolute;
    width: 100%;
    bottom:0;
    left:0;
    display: none;
}
.nr>div>img{
    display: block;
    width: 100%;
}
.bg{
    position: absolute;
    width: 100%;
    bottom:0;
    height: 100%;
    left:0;
    z-index: 998;
}
.bg>img{
    position: absolute;
    width: 100%;
    left:0;
    bottom:0;
    display: none;
}
/*1-3*/
.swiper1-3{
    position: absolute;
    width: 57.6%;
    height: 22.2%;
    left:11.5%;
    top:46.8%;
}
.swiper1-3 img{
    display: block;
    width: 100%;
}
.p1-5{
    position: absolute;
    width: 75%;
    left:12.5%;
    height: 30%;
    top:0;
}
.p1-5>.video-js{
    width: 100%;
    height: 100%;
}
.p4-1{
    position: absolute;
    width: 58%;
    height: 22.5%;
    left: 11%;
    top: 46.5%;
}
.p4-1>.video-js{
    width: 100%;
    height: 100%;
    display: block;
}
.p5-2{
    position: absolute;
    width: 100%;
    z-index: 10;
    display: none;
    opacity: 0;
}
.p5-2{
    position: absolute;
    z-index: 10;
    width: 100%;
    left:0;
    bottom:0;
}
.p3-11{
    position: absolute;
    width: 68%;
    left:15%;
    height: 27%;
    top:1.5%;
}
.p3-11>.video-js{
    width: 100%;
    height: 100%;
}
.p2-2{
    position: absolute;
    width: 75%;
    left:12.5%;
    top:13%;
}
.swiper2-2 img{
    display: block;
    width: 100%;
}
.p8-left{
    position: absolute;
    width: 30px;
    left:-30px;
    top:30%;

}
.p8-right{
    position: absolute;
    width: 30px;
    top:30%;
    right:-30px;
}
.p2,.p3,.p4,.p5,.p6,.p7,.p8,.p9,.p10,.p11,.p12,.p13,.p14,.p15,.p16,.p17,.p18,.p19,.p20,.p21,.p22,.p23,.p24,.p25,.p26,.p27{
    animation-duration:1.5s;
    animation-delay: .5s;
}
.p13{
    width: 100%;
    height: 100%;
    left:0;
    bottom:0;
    position: absolute;
}
.p13-1{
    width: 75%;
    position: absolute;
    left: 12.5%;
    top:5%;
    height: 70%;
    overflow: scroll;
    border: 5px solid #7eb2dc;
    padding: 5px 10px;
    background: #fff;
}
.p13>p{
    font-size: 14px;
    width: 15px;
    text-align: center;
    color: #1a7cd0;
    left: 7%;
    top: 20%;
    position: absolute;
}
.p13-1>img{
    display: block;
    width: 100%;
}
/*1-3*/
.swiper3-1{
    position: absolute;
    width: 57.6%;
    height: 22.2%;
    right: 13.5%;
    top: 1.53%;
}
.swiper3-1 img{
    display: block;
    width: 100%;
}
.swiper20-1,.swiper21-1{
    position: absolute;
    width: 79.2%;
    height: 32%;
    left:11.2%;
    top:1.5%;
}
.swiper23-1{
    position: absolute;
    width: 78%;
    height: 29%;
    left:12.5%;
    top:41%;
}
.swiper20-1 img,.swiper21-1 img,.swiper23-1 img{
    display: block;
    width: 100%;
    height: 100%;
}
.p24-1{
    display: block;
    width: 100%;
}
.p24-2{
    position: absolute;
    z-index: 11;
    left:0;
    width: 100%;
    bottom:0;
    opacity: 0;
    display: none;
}
.p26-1{
    position: absolute;
    left:0;
    width: 100%;
    bottom:0;
    opacity: 0;
    display: none;
}
.p26{
    display: block;
    width: 100%;
}
.p16>p{
    position: absolute;
    width: 100%;
    font-size: 14px;
    text-align: center;
    left:0;
    bottom:32%;
    color: #1a7cd0;
}
.p26-2{
    display: block;
    width: 100%;
}
.p26>div{
    position: absolute;
    z-index: 10;
    width: 74%;
    left:13%;
    height: 50%;
    top:16.2%;
    overflow: scroll;
    padding-bottom: 150px;
}
.p26>div>img{
    display: block;
    width: 100%;
}
.p27-1{
    display: block;
    width: 100%;
}
.p27-2{
    position: absolute;
    width: 100%;
    left:0;
    bottom:0;
}
.swiper16-1{
    width: 100%;
}
.swiper16-1 img{
    display: block;
    width: 100%;
}
.container>p{
    position: absolute;
    width: 100%;
    font-size: 14px;
    text-align: center;
    left:0;
    bottom:24%;
    line-height: 28px;
    color: #1a7cd0;
    z-index: 1002;
    opacity: .6;
}
.p27>div{
    position: absolute;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    color: #1a7cd0;
    top:40%;
    padding: 0 24px;
}
.p27>div>p{
    text-align: center;
    margin-bottom: 6px;
}
.btns{
    position: absolute;
    width: 30%;
    left:35%;
    top:65%;
}
.btns>img{
    display: block;
    width: 100%;
}
/*遮罩*/
.mask{
    position: fixed;
    z-index: 10;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: #000;
    opacity: .6;
    display: none;
}