body {
    background-color: black;
    overflow: hidden;
    font-family: "kaiti"
}

.hide {
    display: none;
}

.pos {
    position: absolute;
    left: 0;
    width: 100%;
}

.arrow {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 80px;
    height: 100px;
    margin-top: -50px;
    opacity: 1;
    background: url(../img/arrow.png) no-repeat right center;
    background-size: 25px 47px;
    -webkit-animation: arrow 1.5s 2s ease-in-out infinite;
    z-index: 999;
    zoom: 1;
}

.baoming {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    z-index: 999;
    display: none;
}
.baoming div{
    width:70%;
    height:40%;
    background:rgb(200,200,200);
    margin:0 auto;
    margin-top:40%;
    position: relative;
    border-radius: 10px;
    color:black;
}
#name {
        width: 58%;
    height: 1.8rem;
    font-size: 1.05rem;
    background-size: 100% 100%;
    border: none;
    border-radius: 0px;
    display: block;
    text-align: center;
    position: absolute;
    top: 18%;
    left: 30%;
}
.xingming{
    position: absolute;
    top: 13%;
    left: 12%;
    font-size: 1.05rem
}
.dianhua{
    position: absolute;
    top: 39%;
    left: 12%;
    font-size: 1.05rem
}

#tell {
    width: 58%;
    height: 1.8rem;
    font-size: 1.05rem;
    background-size: 100% 100%;
    border: none;
    border-radius: 0px;
    display:block;
    text-align: center;
    position: absolute;
    top: 44%;
    left: 30%;
}
.tj{
        width: 21%;
    position: absolute;
    top: 64%;
    text-align: center;
    left: 38%;
    border: 1px solid black;
    border-radius: 10px;
    font-size: 1.05rem;
    padding: 5px;
}
.bm{
    width: 21%;
    height: auto;
    top: 87%;
    left: 40%;
    -webkit-animation: fadeFromTop 1s 2.5s linear both;
}
.animate1 {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}

.animate2 {
    position: absolute;
    display: none;
}

.page1 {
    background: url(../img/1.jpg?215) no-repeat 50% 50%;
    background-size: 100% 100%;
}

.img1_1 {
    width: 67%;
    height: auto;
    -webkit-animation: zhuan 140s linear infinite;
    left: 16%;
    top: 26%;
}

@-webkit-keyframes zhuan2 {
    100% {
        -webkit-transform: rotate(-360deg);
    }
}

@-webkit-keyframes zhuan {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

.xiaoshi {
    -webkit-animation: xiaoshi 2s linear 0.5s both;
}

@-webkit-keyframes xiaoshi {
    0% {
        top: 0%;
    }
    100% {
        top: -100%;
    }
}

.img1_2 {
    width: 60%;
    height: auto;
    top: 82%;
    left: 20%;
    -webkit-animation: big2 1s linear 0.5s both;
}

.img1_2_1 {
    -webkit-animation: sh 2s linear 1.5s both, sh2 1.8s linear 3.6s forwards;
}

.img1_2_2 {
    -webkit-animation: sh 2s linear 5.5s both;
}

.shou1 {
    width: 7%;
    height: auto;
    top: 85%;
    left: 67%;
    -webkit-animation: sh 2s linear 5.5s both, big3 1.5s linear infinite;
	z-index:9999;
}

.shou4 {
    width: 7%;
    height: auto;
        top: 80%;
    left: 52%;
    -webkit-animation: sh 2s linear both, big3 1.5s linear infinite;
    display: none;
    position: fixed;
    z-index: 99999;
}

.shou3 {
    width: 7%;
    height: auto;
    top: 48%;
    left: 69%;
    -webkit-animation: sh 2s linear 15.5s both, big3 1.5s linear infinite;
}

.shou2 {
    width: 48%;
    height: auto;
    top: 47%;
    left: 55%;
    -webkit-animation: sh 2s linear both, big3 1.5s linear infinite;
}

.b1 {
    width: 5%;
    height: auto;
    -webkit-animation: fx1 4s linear infinite;
    top: 59%;
    left: 20%;
}

.b2 {
    width: 5%;
    height: auto;
    -webkit-animation: fx2 3s linear infinite;
    top: 60%;
    left: 54%;
}

.b3 {
    width: 3%;
    height: auto;
    -webkit-animation: fx3 5s linear infinite;
    top: 63%;
    left: 37%;
}

.b4 {
    width: 3%;
    height: auto;
    -webkit-animation: fx3 4.5s linear infinite;
    top: 50%;
    left: 45%;
}

.img2_1 {
    -webkit-animation: fx1 4s linear infinite;
}

.img2_2 {
    -webkit-animation: fx2 3s linear infinite;
}

.img2_3 {
    -webkit-animation: fx6 15s linear infinite;
}

@-webkit-keyframes fx6 {
    0% {
        left: -50%;
        top: 0%;
    }
    100% {
        top: -5%;
        left: 100%;
    }
}

.dian {
    width: 50px;
    height: 50px;
    right: 38%;
    top: 53%;
    display: none;
}

.dian .img2_4 {
    width: 100%;
    height: 100%;
    -webkit-animation: zhuan2 8s linear infinite;
}

.i1929 {
    width: 110px;
    height: 110px;
    right: 14%;
    top: 13%;
    -webkit-animation: i1929 1.5s linear both;
}

@-webkit-keyframes i1929 {
    0% {
        top: 100%;
        -webkit-transform: scaleX(0.3);
    }
    100% {
        top: 13%;
        -webkit-transform: scaleY(1);
    }
}

.i1929 .img2_4 {
    width: 100%;
    height: 100%;
    -webkit-animation: zhuan2 8s linear infinite;
}

.i1929 .img2_5 {
    width: 100%;
    height: 100%;
}

@-webkit-keyframes i1986 {
    0% {
        top: 100%;
        -webkit-transform: scaleX(0.3);
    }
    100% {
        top: 21%;
        -webkit-transform: scaleY(1);
    }
}

.i1986 {
    width: 110px;
    height: 110px;
    left: 5%;
    top: 21%;
    -webkit-animation: i1986 1.5s 0.5s linear both;
}

.i1986 .img2_4 {
    width: 100%;
    height: 100%;
    -webkit-animation: zhuan 9s linear infinite;
}

.i1986 .img2_5 {
    width: 100%;
    height: 100%;
}

@-webkit-keyframes i2000 {
    0% {
        top: 100%;
        -webkit-transform: scaleX(0.3);
    }
    100% {
        top: 42%;
        -webkit-transform: scaleY(1);
    }
}

.i2000 {
    width: 110px;
    height: 110px;
    right: 5%;
    top: 42%;
    -webkit-animation: i2000 1.5s 1s linear both;
}

.i2000 .img2_4 {
    width: 100%;
    height: 100%;
    -webkit-animation: zhuan2 10s linear infinite;
}

.i2000 .img2_5 {
    width: 100%;
    height: 100%;
}

@-webkit-keyframes i2008 {
    0% {
        top: 130%;
        -webkit-transform: scaleX(0.3);
    }
    100% {
        top: 64%;
        -webkit-transform: scaleY(1);
    }
}

.i2008 {
    width: 110px;
    height: 110px;
    left: 40%;
    top: 64%;
    -webkit-animation: i2008 1.5s 1.5s linear both;
}

.i2008 .img2_4 {
    width: 100%;
    height: 100%;
    -webkit-animation: zhuan 11s linear infinite;
}

.i2008 .img2_5 {
    width: 100%;
    height: 100%;
}

@-webkit-keyframes i2011 {
    0% {
        top: 150%;
        -webkit-transform: scaleX(0.3);
    }
    100% {
        top: 79%;
        -webkit-transform: scaleY(1);
    }
}

.i2011 {
    width: 110px;
    height: 110px;
    right: 16%;
    top: 79%;
    -webkit-animation: i2011 1.5s 2s linear both;
}

.i2011 .img2_4 {
    width: 100%;
    height: 100%;
    -webkit-animation: zhuan2 12s linear infinite;
}

.i2011 .img2_5 {
    width: 100%;
    height: 100%;
}

.img2_5_1 {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.img2_5_2 {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.img2_5_3 {
    width: 100%;
    height: auto;
    left: 0%;
    top: 42%;
    display: none;
    position: absolute;
    -webkit-animation: sh 1s linear both;
}

.img2_6_1 {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.img2_6_2 {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.img2_6_3 {
    width: 100%;
    height: auto;
    left: 0%;
    top: 42%;
    display: none;
    position: absolute;
    -webkit-animation: sh 1s linear both;
}

.img2_7_1 {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.img2_7_2 {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.img2_7_3 {
    width: 100%;
    height: auto;
    left: 0%;
    top: 42%;
    display: none;
    position: absolute;
    -webkit-animation: sh 1s linear both;
}

.img2_8_1 {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.img2_8_2 {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.img2_8_3 {
    width: 100%;
    height: auto;
    left: 0%;
    top: 42%;
    display: none;
    position: absolute;
    -webkit-animation: sh 1s linear both;
}

.img2_9_1 {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.img2_9_2 {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.img2_9_3 {
    width: 100%;
    height: auto;
    left: 0%;
    top: 42%;
    display: none;
    position: absolute;
    -webkit-animation: sh 1s linear both;
}

.img5_1 {}

.img5_1_1 {
    width: 73%;
    height: auto;
    top: 15%;
    left: 18%;
    -webkit-animation: yidong 5s linear infinite;
}

.img5_2 {
    -webkit-animation: fadeFromTop 1.5s linear both;
}

.img5_3 {
    -webkit-animation: fadeFromBottom 1.5s linear both;
}

.img5_4 {
    -webkit-animation: yidong2 1s linear infinite;
}

.img6_2 {
    width: 56%;
    height: auto;
    top: 14%;
    left: 21%;
}

.img6_2_1 {
    width: 56%;
    height: auto;
    top: 14%;
    left: 21%;
    -webkit-animation: zhuan 3s linear infinite;
}

.img6_3 {
    -webkit-animation: fadeFromLeft 1s 0.5s linear both;
}

.img6_4 {
    -webkit-animation: fadeFromRight 1s 1s linear both;
}

.img6_5 {
    -webkit-animation: yidong3 6s linear infinite;
}

.img6_6 {
    -webkit-animation: yidong3 4s linear infinite;
}

.img6_7 {
    -webkit-animation: yidong3 5s linear infinite;
}

.img6_8 {
    -webkit-animation: fadeFromTop 1s 1.5s linear both;
}
.img6_9 {
    -webkit-animation: fadeFromTop 1s 2s linear both;
}
.on1 {
    -webkit-animation: do 1s linear both, do2 2s 1s linear infinite;
}

.on2 {
    -webkit-animation: up 1s linear both, up2 3s 1s linear infinite;
}

.bt1 {
    width: 5%;
    height: auto;
    top: 29%;
    position: absolute;
    left: 80%;
    -webkit-animation: sh 1s 1.7s linear both, light 1s 1.7s linear infinite;
}

.bt2 {
    width: 5%;
    height: auto;
    top: 18%;
    position: absolute;
    left: 32%;
    -webkit-animation: sh 1s 2s linear both, light 1s 2s linear infinite;
}

.bt3 {
    width: 5%;
    height: auto;
    top: 59%;
    position: absolute;
    left: 86%;
    -webkit-animation: sh 1s 2.5s linear both, light 1s 2.5s linear infinite;
}

.bt4 {
    width: 5%;
    height: auto;
    top: 80%;
    position: absolute;
    left: 61%;
    -webkit-animation: sh 1s 3s linear both, light 1s 3s linear infinite;
}

.bt5 {
    width: 5%;
    height: auto;
    top: 95%;
    position: absolute;
    left: 78%;
    -webkit-animation: sh 1s 3.5s linear both, light 1s 3.5s linear infinite;
}

.onbt {
    -webkit-animation: sh 1s linear both, light 1s linear infinite;
}

.mp4 {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 10;
    background: black;
    overflow: hidden;
}

.mp5 {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 11;
    background: black;
    overflow: hidden;
}

#video {
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
}

.mh1 {
    -webkit-animation: fadeInUp 0.3s linear both;
}

.mh2 {
    -webkit-animation: fadeInUp 0.3s 0.1s linear both;
}

.mh3 {
    -webkit-animation: fadeInUp 0.3s 0.2s linear both;
}

.qx1 {
    -webkit-animation: fadeInUp 0.3s 0.3s linear both;
}

.mh4 {
    -webkit-animation: fadeInUp 0.3s 0.4s linear both;
}

.mh5 {
    -webkit-animation: fadeInUp 0.3s 0.5s linear both;
}

.qx2 {
    -webkit-animation: fadeInUp 0.3s 0.6s linear both;
}

.mh6 {
    -webkit-animation: fadeInUp 0.3s 0.7s linear both;
}

.mh7 {
    -webkit-animation: fadeInUp 0.3s 0.8s linear both;
}

.mh8 {
    -webkit-animation: fadeInUp 0.3s 0.9s linear both;
}

.qx3 {
    -webkit-animation: fadeInUp 0.3s 1s linear both;
}

.mh9 {
    -webkit-animation: fadeInUp 0.3s 1.1s linear both;
}

.mh10 {
    -webkit-animation: fadeInUp 0.3s 1.2s linear both;
}

.mh11 {
    -webkit-animation: fadeInUp 0.3s 1.3s linear both;
}

.qx4 {
    -webkit-animation: fadeInUp 0.3s 1.4s linear both;
}

.mh12 {
    -webkit-animation: fadeInUp 0.3s 1.5s linear both;
}

.mh13 {
    -webkit-animation: fadeInUp 0.3s 1.6s linear both;
}

.mh14 {
    -webkit-animation: fadeInUp 0.3s 1.7s linear both;
}

.qx5 {
    -webkit-animation: fadeInUp 0.3s 1.8s linear both;
}

.mh15 {
    -webkit-animation: fadeInUp 0.3s 1.9s linear both;
}

.mh16 {
    -webkit-animation: fadeInUp 0.3s 2s linear both;
}

.wzk {
    -webkit-animation: fadeInUp 0.5s linear 2.5s both;
}

.z1 {
    -webkit-animation: sh 2s linear 3.5s both, sh2 2s linear 5.5s forwards;
}

.z2 {
    -webkit-animation: sh 2s linear 7.5s both, sh2 2s linear 9.5s forwards;
}

.z3 {
    -webkit-animation: sh 2s linear 11.5s both, sh2 2s linear 13.5s forwards;
}

.z4 {
    -webkit-animation: sh 2s linear 15.5s both;
}

@-webkit-keyframes yidong3 {
    0% {
        top: 100%;
    }
    100% {
        top: -100%;
    }
}

@-webkit-keyframes yidong2 {
    100% {
        left: 2%;
    }
}

@-webkit-keyframes yidong {
    0% {
        top: 15%
    }
    50% {
        top: 46%;
    }
}

@-webkit-keyframes mohu {
    0% {
        -webkit-filter: blur(10px;
        );
    }
    100% {
        -webkit-filter: blur(0px;
        );
    }
}

@-webkit-keyframes up2 {
    0% {
        top: -18%;
    }
    50% {
        top: -15%;
    }
    100% {
        top: -18%;
    }
}

@-webkit-keyframes up {
    0% {
        top: 0%;
    }
    100% {
        top: -18%;
    }
}

@-webkit-keyframes do2 {
    0% {
        top: 13%;
    }
    50% {
        top: 16%;
    }
    100% {
        top: 13%;
    }
}

@-webkit-keyframes do {
    0% {
        top: 0;
    }
    100% {
        top: 13%;
    }
}

@-webkit-keyframes fx4 {
    50% {
        -webkit-transform: translate(-5px, -5px);
    }
}

@-webkit-keyframes fx3 {
    50% {
        -webkit-transform: translate(0, -5px);
    }
}

@-webkit-keyframes fx2 {
    50% {
        -webkit-transform: translate(5px, 5px);
    }
}

@-webkit-keyframes fx1 {
    50% {
        -webkit-transform: translate(5px, 5px);
    }
}

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

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

@-webkit-keyframes wz1 {
    25% {
        -webkit-filter: blur(10px);
    }
    50% {
        -webkit-filter: blur(0);
    }
    75% {
        -webkit-filter: blur(5px);
    }
    100% {
        -webkit-filter: blur(0);
    }
}

.page2 {
    background: url(../img/1.jpg?221) no-repeat 50% 50%;
    background-size: 100% 100%;
}

.page3 {
    background: url(../img/1.jpg?1123) no-repeat 50% 50%;
    background-size: 100% 100%;
}

.page4 {
    background: url(../img/6.jpg) no-repeat 50% 50%;
    background-size: 100% 100%;
}
.page9 {
    background: url(../img/7.jpg) no-repeat 50% 50%;
    background-size: 100% 100%;
}

.page5 {
    background: url(../img/7.jpg) no-repeat 50% 50%;
    background-size: 100% 100%;
}

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

@-webkit-keyframes big3 {
    50% {
        -webkit-transform: scale(1.2);
    }
}

@-webkit-keyframes big {
    0% {
        -webkit-transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes big2 {
    0% {
        -webkit-transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes tada2 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);
    }
    40%, 60%, 80% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1
    }
}

@-webkit-keyframes light {
    50% {
        opacity: 0.5
    }
}

@-webkit-keyframes arrow {
    0%, 30% {
        opacity: 0;
        transform: translate(10px, 0)
    }
    60% {
        opacity: 1;
        transform: translate(0, 0)
    }
    100% {
        opacity: 0;
        transform: translate(-8px, 0)
    }
}

@-webkit-keyframes rotate2 {
    0% {
        -webkit-transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}


/* all 
::-webkit-input-placeholder { color:#676262;text-indent:0px; }
::-moz-placeholder { color:#676262;text-indent:0px; } /* firefox 19+ */

:-ms-input-placeholder {
    color: #676262;
    text-indent: 0px;
}


/* ie */

input:-moz-placeholder {
    color: #676262;
    text-indent: 0px;
}

@-webkit-keyframes fadeFromLeft {
    0% {
        -webkit-transform: translate3d(-30px, 0, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@-webkit-keyframes fadeFromRight {
    0% {
        -webkit-transform: translate3d(30px, 0, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@-webkit-keyframes fadeFromTop {
    0% {
        -webkit-transform: translate3d(0, -50px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@-webkit-keyframes fadeFromBottom {
    0% {
        -webkit-transform: translate3d(0, 50px, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}