/*音乐*/
.music_blk{z-index:999;position:fixed;left:5px;top:5px;display: none}
.music{display:block;width:30px;height:30px;background:url('../images/music_on.png?1') no-repeat;background-size:100% 100%;}
.music_on{
            -webkit-animation:rotate 1.2s linear infinite;
            animation:rotate 1.2s linear infinite;
}
@keyframes rotate{
    0%{
         -webkit-transform:rotateZ(0deg);
        transform:rotateZ(0deg);
      }
    100%{
        -webkit-transform:rotateZ(360deg);
        transform:rotateZ(360deg);
      }
}
@-webkit-keyframes rotate{
    0%{
         -webkit-transform:rotateZ(0deg);
        transform:rotateZ(0deg);
      }
    100%{
        -webkit-transform:rotateZ(360deg);
        transform:rotateZ(360deg);
    }
}
*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
.wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/background.jpg?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}
.loadWrap{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.l_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/loading/p0_1.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.l_2{
    position: absolute;
    width: 7%;
    height: 3%;
    left: 43%;
    top: 37.6%;
    background-image: url(../images/loading/p0_2.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: rot_sec 60s linear infinite;
    -webkit-animation: rot_sec 60s linear infinite;
    transform-origin: bottom right;
    -webkit-transform-origin: bottom right;
}
.l_3{
    position: absolute;
    width: 7%;
    height: 5%;
    left: 50%;
    top: 35.2%;
    background-image: url(../images/loading/p0_3.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: rot_sec 1s linear infinite;
    -webkit-animation: rot_sec 1s linear infinite;
    transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
}
@keyframes rot_sec{
    0%{
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
    }
}
@-webkit-keyframes rot_sec{
    0%{
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
    }
}
.l_4{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/loading/p0_4.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page1{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    contain: style;
    overflow: hidden;
}
.p1_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1/p1_1.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: fadeInOut 4s linear both,;
    -webkit-animation: fadeInOut 4s linear both;
}
.page2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    contain: style;
     transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    overflow: hidden;
}
.p2_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2/p2_1.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: fadeIn 1s linear both;
    -webkit-animation: fadeIn 1s linear both;
}
.p2_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2/p2_2.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: fadeIn 1s 1s linear both;
    -webkit-animation: fadeIn 1s 1s linear both;
}
.p2_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2/p2_3.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: fadeIn 1s 2s linear both;
    -webkit-animation: fadeIn 1s 2s linear both;
}
.p2_4{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2/p2_4.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
     animation: fadeIn 1s 3s linear both;
    -webkit-animation: fadeIn 1s 3s linear both;
}
.p2_5{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2/p2_5.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
     animation: fadeIn 1s 4s linear both;
    -webkit-animation: fadeIn 1s 4s linear both;
}
.p2_6{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2/p2_6.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: fadeIn 2s linear forwards,fadeOut 2s 5s linear forwards;
    -webkit-animation: fadeIn 2s linear forwards,fadeOut 2s 5s linear forwards;
}
.p2_7{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2/p2_7.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: fadeInOut 4s 7s linear forwards;
    -webkit-animation: fadeInOut 4s 7s linear forwards;
}
.page3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    contain: style;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    overflow: hidden;
}
.p3_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3/p3_1.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: fadeIn 1s 1.5s linear forwards;
    -webkit-animation: fadeIn 1s 1.5s linear forwards;
}
.p3_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3/p3_2.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: fadeIn 1.5s linear forwards;
    -webkit-animation: fadeIn 1.5s linear forwards;
}
.p3_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3/p3_3.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation: fadeInOut 4s 2.5s linear forwards;
    -webkit-animation: fadeInOut 4s 2.5s linear forwards;
}
.p3_4{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3/p3_4.png?1);
    opacity: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: fadeIn 1s 6.5s linear forwards;
    -webkit-animation: fadeIn 1s 6.5s linear forwards;
}
.page_skip{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 40%;
    top:3%;
    background-image: url(../images/p_skip.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
}
.ps_click{
    position: absolute;
    width: 9%;
    height: 8%;
    left: 47%;
    top: 88%;  
}
.page4{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    contain: style;
    overflow: hidden;
}
.p4_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4/p4_01.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0; 
}
.ani .p4_1{
    animation: fadeInOut 4s linear forwards;
    -webkit-animation: fadeInOut 4s linear forwards;
}
.p4_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4/p4_02.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
}
.ani .p4_2{
    animation: fadeIn 1.5s 4s  linear forwards;
    -webkit-animation: fadeIn 1.5s 4s linear forwards;
}
.rani .p4_2{
    opacity: 1;
}
.p4_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4/p4_03.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
}
.ani .p4_3{
    animation: fadeIn 1s 5.5s  linear forwards;
    -webkit-animation: fadeIn 1s 5.5s linear forwards;
}
.rani .p4_3{
    opacity: 1;
}
.p4_4{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p4/p4_04.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;  
}
.ani .p4_4{
    animation: fadeIn 1s 5.5s  linear forwards;
    -webkit-animation: fadeIn 1s 5.5s linear forwards;
}
.rani .p4_4{
    opacity: 1;
}
.upImg{
    position: absolute;
    display: none;
}
.p4_click{
    position: absolute;
    width: 38%;
    height: 8.5%;
    left: 31%;
    top: 61%;
}
.page5{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p5/background.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    contain: style;
    overflow: hidden;
}
.preImg{
    position: absolute;
    left: 50%;
    top: 41%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
}
.p5_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p5/p5_3.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    animation: fadeIn 0.8s linear infinite alternate;
    -webkit-animation: fadeIn 0.8s linear infinite alternate;
}
.page6{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p5/background.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    overflow: hidden;
}
.revImg{
    position: absolute;
    left: 50%;
    top: 41%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
}
.p6_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p6/p6_02.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p6_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p6/p6_03.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}
.p6_click{
    position: absolute;
    width: 46%;
    height: 7.5%;
    left: 27%;
    top: 74%;
}
.page7{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.p6_boder{
    position: absolute;
    width: 44.2%;
    height:5.6%;
    left: 9.7%;
    top: 74.9%;
    border: 1px solid black;
}
.swiper-container{
    position: absolute;
    width: 44%;
    height: 15%;
    left: 10%;
    top: 70.3%;
}
.swiper-slide{
    width: 100%;
    height: 33%;
    background-size: 70% 90%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
}
.swiper-slide:nth-of-type(2){
    background-image: url(../images/p7/1940.png?1);
    opacity: 1;
}
.swiper-slide:nth-of-type(3){
    background-image: url(../images/p7/1950.png?1);
}
.swiper-slide:nth-of-type(4){
    background-image: url(../images/p7/1960.png?1);
}
.swiper-slide:nth-of-type(5){
    background-image: url(../images/p7/1970.png?1);
}
.swiper-slide:nth-of-type(6){
    background-image: url(../images/p7/1980.png?1);
}
.swiper-slide:nth-of-type(7){
    background-image: url(../images/p7/1990.png?1);
}
.p7_click{
    position: absolute;
    width: 22%;
    height: 8.6%;
    left: 69%;
    top: 73.7%;
    background-size: 100% 100%;
    background-image: url(../images/p7/p7_1.png?1);
    background-repeat: no-repeat;
}
.page8{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.p8_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p8/p08_1.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: -1%;
    opacity: 0;
    animation: fadeIn 0.8s 1.5s linear infinite alternate;
    -webkit-animation: fadeIn 0.8s 1.5s linear infinite alternate;
}
.p8_2{
    position: absolute;
    width: 100%;
    height: 100%;
    left:19%;
    background-image: url(../images/p8/p08_2.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    opacity: 0;
    animation: fadeIn 1s 1.5s linear both;
    -webkit-animation: fadeIn 1s 1.5s linear both;
}
.p8_4{
    position: absolute;
    width: 35%;
    height: 4.2%;
    left: 31%;
    top: 69.5%;
    background-image: url(../images/p8/p1940.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%;  
}
.p8_5{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p8/p08_4.png?1);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    opacity: 0;
    animation: fadeIn 1s 1.5s linear both;
    -webkit-animation: fadeIn 1s 1.5s linear both;
}
.saveImg{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.p8_click1{
    position: absolute;
    width: 34%;
    height: 7%;
    left: 33%;
    top: 75.7%;
}
@keyframes fadeIn{
    0%{  
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes fadeOut{
    0%{  
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@-webkit-keyframes fadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes fadeInOut{
    0%{
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    70%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@-webkit-keyframes fadeInOut{
     0%{
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    70%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}