*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;}
.tips_blk{z-index:99999999999;position:absolute;left:50%;bottom:10px;width:130px;height: 20px;margin-left:-65px;text-align:center;}
.tips_blk p{z-index:99999999999;font-size:10px;color:#FFF;}
.tips_blk_hide p{z-index:99999999999;display:none;}
.loading{position:absolute;width:100%;height:100%;background:url('../images/loading.jpg');background-size:100% 100%;z-index: 99}


.loading1{
    width:33%;height:15%;background:url('../images/photo1.png') no-repeat;background-size:100% 100%;position: absolute;top:33%;left:33%
}
.loading2{
    width:33%;height:15%;background:url('../images/photo2.png') no-repeat;background-size:100% 100%;position: absolute;top:33%;left:33%
}
.loading3{
    width:6%;height:3.76%;background:url('../images/hand.png') no-repeat;background-size:100% 100%;position: absolute;top:41%;left:62%;
    -webkit-animation:shake 1.2s linear infinite;
    animation:shake 1.2s linear infinite;

}




.loading2.ani{
    animation: ptoto 1.5s;
    -webkit-animation: ptoto 1.5s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes ptoto { 0% { transform: translate(0px, 0px) rotate(0deg); }
    2% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
    4% { transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
    6% { transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
    8% { transform: translate(-1.5px, -2.5px) rotate(0.5deg); }
    10% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
    12% { transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
    14% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
    16% { transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
    18% { transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
    20% { transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
    22% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
    24% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
    26% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
    28% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
    30% { transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
    32% { transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
    34% { transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
    36% { transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
    38% { transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
    40% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
    42% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
    44% { transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
    46% { transform: translate(0.5px, -2.5px) rotate(0.5deg); }
    48% { transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
    50% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
    52% { transform: translate(1.5px, 0.5px) rotate(0.5deg); }
    54% { transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
    56% { transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
    58% { transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
    60% { transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
    62% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
    64% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
    66% { transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
    68% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
    70% { transform: translate(0.5px, 1.5px) rotate(0.5deg); }
    72% { transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
    74% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
    76% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
    78% { transform: translate(-0.5px, -2.5px) rotate(0.5deg); }
    80% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
    82% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
    84% { transform: translate(-1.5px, -1.5px) rotate(-0.5deg); }
    86% { transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
    88% { transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
    90% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
    92% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
    94% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
    96% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
    98% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); } }










.loading11{
    position:absolute;top:71%;left:34%;width: 35.26%;height:4px;background-color: #141414;
}
.loading11_1{
     position:absolute;top:0;left:0;width: 0;height:100%;background-color: #d70303;
 }
a{opacity:1}
/*loading*/
/*音乐*/
.music_blk{z-index:999;position:fixed;top:5px;right:5px;display:none}
.music{display:block;width:30px;height:30px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;}
.music_on{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}

.swiper-container{position:absolute;width:100%;height:100%;left:0;top:0}
.swiper-slide{position:relative;overflow:hidden}



.bg1{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}

#video_bg1{position:absolute;width: 100%;height:100%;top:0;left:0}
#video1_1{object-fit: fill}
.bg1_1{width: 100%;height:100%;position: absolute;top:0;left:0;z-index: 1;background:url("../images/p2.jpg") no-repeat 0 0;background-size:100% 100%;}

/*.again_click{*/
    /*width: 34%;*/
    /*height: 7%;*/
    /*position: absolute;*/
    /*top: 76%;*/
    /*left: 33%;*/
/*}*/
/*.shore{*/
    /*width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/shore.png") no-repeat 0 0;background-size:100% 100%;display:none;z-index: 10;*/
/*}*/

#s0{position:relative;background:url('../images/p2.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s0_list{
    width: 100%;position: absolute;left:0;top:20.65%;height:68.45%;
}
.s0_list>div{
    width: 100%;height:10%;
}
.s0_1{
    background:url('../images/p2.1.png') no-repeat 0 0;background-size:100% 100%;
}
.s0_2{
    background:url('../images/p2.2.png') no-repeat 0 0;background-size:100% 100%;
}
.s0_3{
    background:url('../images/p2.3.png') no-repeat 0 0;background-size:100% 100%;
}
.s0_4{
    background:url('../images/p2.4.png') no-repeat 0 0;background-size:100% 100%;
}
.s0_5{
    background:url('../images/p2.5.png') no-repeat 0 0;background-size:100% 100%;
}
.s0_6{
    background:url('../images/p2.6.png') no-repeat 0 0;background-size:100% 100%;
}
.s0_7{
    background:url('../images/p2.7.png') no-repeat 0 0;background-size:100% 100%;
}
.s0_8{
    background:url('../images/p2.8.png') no-repeat 0 0;background-size:100% 100%;
}
.s0_9{
    background:url('../images/p2.9.png') no-repeat 0 0;background-size:100% 100%;
}
.s0_10{
    background:url('../images/p2.10.png') no-repeat 0 0;background-size:100% 100%;
}



#s1{position: relative;background:url('../images/p3.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s1_1{
    width: 100%;height:100%;position: absolute;left:0;top:0;background:url('../images/p3.1.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;
}
#s1.ani .s1_1{
    -webkit-animation:1s 0.1s Out linear both;
    animation:1s 0.1s Out linear both;
}


#s2{position: relative;background:url('../images/p4.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}

#s3{position: relative;top:0;left:0;width: 100%;height:100%;}
.s3_1{
    width: 100%;height:100%;position: absolute;left:0;top:0;background:url('../images/p5.png') no-repeat 0 0;background-size:100% 100%;opacity: 1;
}
.s3_2{
    width: 23%;
    height: 13.5%;
    position: absolute;
    left: 42%;
    top: 22%;
}
.s3_list{
    position: absolute;top:0;left:0;width: 100%;height:100%;
}
.s3_list>div{
    top: 50%;
    left: 17%;
    width: 20%;
    height: 6%;
    position: absolute;
}
.s3_list>div:nth-of-type(1){
    top: 50%;
    left: 17%;
    width: 20%;
    height: 6%;
}
.s3_list>div:nth-of-type(2){
    top: 50%;
    left: 41%;
    width: 20%;
    height: 6%;
}
.s3_list>div:nth-of-type(3){
    top: 50%;
    left: 66%;
    width: 20%;
    height: 6%;
}
.s3_list>div:nth-of-type(4){
    top: 56%;
    left: 17%;
    width: 20%;
    height: 6%;
}
.s3_list>div:nth-of-type(5){
    top: 56%;
    left: 41%;
    width: 20%;
    height: 6%;
}
.s3_list>div:nth-of-type(6){
    top: 56%;
    left: 66%;
    width: 20%;
    height: 6%;
}
.s3_list>div:nth-of-type(7){
    top: 63%;
    left: 17%;
    width: 20%;
    height: 6%;
}
.s3_list>div:nth-of-type(8){
    top: 63%;
    left: 41%;
    width: 20%;
    height: 6%;
}
.s3_list>div:nth-of-type(9){
    top: 63%;
    left: 66%;
    width: 20%;
    height: 6%;
}
.s3_list>div:nth-of-type(10){
    top: 70%;
    left: 17%;
    width: 20%;
    height: 6%;
}
.s3_list>div:nth-of-type(11){
    top: 70%;
    left: 41%;
    width: 20%;
    height: 6%;
}
.s3_list>div:nth-of-type(12){
    top: 70%;
    left: 66%;
    width: 20%;
    height: 6%;
}
.s3_list i{
    width: 17%;
    height: 35%;
    position: absolute;
    left: 78%;
    top: 49%;
    opacity: 0;
    background:url('../images/p5.1.png') no-repeat 0 0;background-size:100% 100%;;
}

.shore_click{
    width: 36%;
    height: 6%;
    position: absolute;
    left: 33%;
    top: 78%;
}

.arrow{
    width: 7%;
    height: 3%;
    position: absolute;
    left: 47%;
    top: 92%;background:url('../images/arrow.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;
}
#s1.ani .arrow,#s0.ani .arrow{
    -webkit-animation:1s 1s arrow linear infinite;
    animation:1s 1s arrow linear infinite;
}

.shore{
    width: 100%;height:100%;position: fixed;left:0;top:0;background:url('../images/p5.2.png') no-repeat 0 0;background-size:100% 100%;display:none;z-index:10
}


.man{
    width: 100%;height:100%;position: absolute;top:0;left:0;display: none;
}
.man>div{
    width: 100%;height:100%;position: absolute;left:0;top:0;display: none;
}
.man1{
    background:url('../images/xinshengdong.jpg?2') no-repeat 0 0;background-size:100% 100%;
}
.man2{
    background:url('../images/renfei.jpg?2') no-repeat 0 0;background-size:100% 100%;
}
.man3{
    background:url('../images/wangmingle.jpg?2') no-repeat 0 0;background-size:100% 100%;
}
.man4{
    background:url('../images/wujingjing.jpg?2') no-repeat 0 0;background-size:100% 100%;
}
.man5{
    background:url('../images/zhaoxu.jpg?2') no-repeat 0 0;background-size:100% 100%;
}
.man6{
    background:url('../images/lixiaojiao.jpg?2') no-repeat 0 0;background-size:100% 100%;
}
.man7{
    background:url('../images/luoliangliang.jpg?2') no-repeat 0 0;background-size:100% 100%;
}
.man8{
    background:url('../images/guoqi.jpg?2') no-repeat 0 0;background-size:100% 100%;
}
.man9{
    background:url('../images/baipeiluan.jpg?2') no-repeat 0 0;background-size:100% 100%;
}
.man10{
    background:url('../images/xuhuanchao.jpg?2') no-repeat 0 0;background-size:100% 100%;
}
.man span{
    width: 29%;
    height: 6%;
    position: absolute;
    top: 87%;
    left: 10%;
}
.man i{
    width: 29%;height:5%;position: absolute;top:87%;left:62%
}

.s2_mask{
    width: 100%;height:100%;position: fixed;left:0;top:0;background:url('../images/p4.jpg') no-repeat 0 0;background-size:100% 100%;
}

.div1_1{
    width: 100%;height:100%;position: absolute;left:0;top:0;display: none;background:url('../images/video_bg.jpg?1') no-repeat 0 0;background-size:100% 100%;
}

.video_play{
    width: 82%;
    height: 30%;
    position: absolute;
    left: 8%;
    top: 14%;
}
.s2_click{
    width: 37%;
    height: 8%;
    position: absolute;
    left: 31%;
    top: 70%;
}

.bg1.ani{
    -webkit-animation:0.3s 0.1s Out1 linear both;
    animation:0.3s 0.1s Out1 linear both;
}


@keyframes bg0_1{
    0%{opacity:0}
    20%{opacity:1}
    80%{opacity: 1}
    100%{opacity: 0}
}
@-webkit-keyframes bg0_1{
    0%{opacity:0}
    20%{opacity:1}
    80%{opacity: 1}
    100%{opacity: 0}
}
@-webkit-keyframes arrow {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 0}
    100% { -webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);opacity: 1}
}
@keyframes arrow {
    0% { transform:translate3d(0,0,0);opacity: 0}
    100% { transform:translate3d(0,-50%,0);opacity: 1}
}








@-webkit-keyframes shake{
    0%{opacity: 0}
    25%{opacity:1}
    50%{opacity: 0}
    75%{opacity:1}
    100%{opacity: 0}
}


@keyframes shake{
    0%{opacity: 0}
    25%{opacity:1}
    50%{opacity: 0}
    75%{opacity:1}
    100%{opacity: 0}
}

@-webkit-keyframes Out{
    0%{opacity: 0}
    100%{opacity:1}
}
@keyframes Out{
    0%{opacity: 0}
    100%{opacity:1}
}

@-webkit-keyframes Out1{
    0%{opacity: 1}
    100%{opacity:0}
}
@keyframes Out1{
    0%{opacity: 1}
    100%{opacity:0}
}