body,html{
    width: 100%;
}
body{
    background: #000;

}

.index-map-box{
    width: 100%;
    height: 100vh;
    background: url("../images/index/indexMap.jpg") no-repeat;
    background-size: cover;
    position: relative;
}

.title-img {
    width: 100%;
    z-index: 99;
}

.big{
    animation: big 2s 1 alternate;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    opacity:0;
}

@keyframes shaking {
    50% {
        transform:rotate(10deg)

    }
    100% {
        transform:rotate(-10deg)

    }
}

@keyframes moving {
    25% {
        transform:translateY(-20px)
    }
    50% {
        transform:translateX(-100px)rotate(-45deg)
    }
    75% {
        transform:rotate(0deg)translateX(-100px)translateY(-20px)
    }
    100% {
        transform:translateX(-100px)translateY(100px)
    }
}

@keyframes big {
    25% {
        transform:translateY(-20px);
        opacity:0.2;
        font-size: 30pt;
        transition:all 1s;
    }
    50% {
        transform:translateY(-50px);
        opacity:0.5;
        font-size: 40pt;
        transition:all 1s;
    }
    75% {
        transform:translateY(-80px);
        opacity:0.8;
        font-size: 50pt;
        transition:all 1s;
    }
    100% {
        transform:translateY(-100px);
        opacity:1;
        font-size: 60pt;
        transition:all 1s;
    }
}

.snow-container {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    top: 0;
}

.snow {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    -webkit-animation: snow linear infinite;
    animation: snow linear infinite;
}
.snow.foreground {
    /*background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");*/
    background-image: url("../images/index/indexText.png") ;
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
}
.snow.foreground.layered {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
/*.snow.middleground {*/
/*background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);*/
/*-webkit-animation-duration: 20s;*/
/*animation-duration: 20s;*/
/*}*/
.snow.middleground.layered {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}
/*.snow.background {*/
/*background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);*/
/*-webkit-animation-duration: 30s;*/
/*animation-duration: 30s;*/
/*}*/
.snow.background.layered {
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
}

@-webkit-keyframes snow {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        -webkit-transform: translate3d(15%, 100%, 0);
        transform: translate3d(15%, 100%, 0);
    }
}

@keyframes snow {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        -webkit-transform: translate3d(15%, 100%, 0);
        transform: translate3d(15%, 100%, 0);
    }
}
/*适配手机端*/
@media screen and (max-width: 400px){
    .title-img{
        top:20%;
    }
}