#dh-big{
    /*最大的盒子*/
    width: 600px;
    height: 549px;
    position: relative;
    margin: 95px auto 0;
    overflow: hidden;
}
#bg1{
    width: 333px;
    height: 300px;
    position: absolute;
    left: 100px;
    top: 150px;
    z-index: 2;
}
#bg2{
    position: absolute;
    left: 440px;
    top: 30px;
    animation:mymove 6s infinite linear;
    -webkit-animation:mymove 6s infinite linear; /* Safari 和 Chrome */
    -moz-animation:mymove 6s infinite linear;
    -o-animation:mymove 6s infinite linear;
}
@keyframes mymove
{
    0% {
        left: 420px;
    }
    50%{
        left: 440px;
    }
    100% {
        left: 420px;
    }
}

@-moz-keyframes mymove /* Firefox */
{
    0% {
        left: 420px;
    }
    50%{
        left: 440px;
    }
    100% {
        left: 420px;
    }
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
    0% {
        left: 420px;
    }
    50%{
        left: 440px;
    }
    100% {
        left: 420px;
    }
}

@-o-keyframes mymove /* Opera */
{
    0% {
        left: 420px;
    }
    50%{
        left: 440px;
    }
    100% {
        left: 420px;
    }
}
#bg3{
    position: absolute;
    left: 70px;
    top: 80px;
    animation:mymove1 6s infinite linear;
    -webkit-animation:mymove1 6s infinite linear; /* Safari 和 Chrome */
    -moz-animation:mymove1 6s infinite linear;
    -o-animation:mymove1 6s infinite linear;
}
@keyframes mymove1
{
    0% {
        left: 50px;
    }
    50%{
        left: 70px;
    }
    100% {
        left: 50px;
    }
}
@-moz-keyframes mymove1 /* Firefox */
{
    0% {
        left: 50px;
    }
    50%{
        left: 70px;
    }
    100% {
        left: 50px;
    }
}

@-webkit-keyframes mymove1 /* Safari 和 Chrome */
{
    0% {
        left: 50px;
    }
    50%{
        left: 70px;
    }
    100% {
        left: 50px;
    }
}

@-o-keyframes mymove1 /* Opera */
{
    0% {
        left: 50px;
    }
    50%{
        left: 70px;
    }
    100% {
        left: 50px;
    }
}
#bg4{
    position: absolute;
    left: 520px;
    top: 320px;
    animation:mymove2 6s infinite linear;
    -webkit-animation:mymove2 6s infinite linear; /* Safari 和 Chrome */
    -moz-animation:mymove2 6s infinite linear;
    -o-animation:mymove2 6s infinite linear;
}
@keyframes mymove2
{
    0% {
        left: 500px;
    }
    50%{
        left: 520px;
    }
    100% {
        left: 500px;
    }
}

@-moz-keyframes mymove2 /* Firefox */
{
    0% {
        left: 500px;
    }
    50%{
        left: 520px;
    }
    100% {
        left: 500px;
    }
}

@-webkit-keyframes mymove2 /* Safari 和 Chrome */
{
    0% {
        left: 500px;
    }
    50%{
        left: 520px;
    }
    100% {
        left: 500px;
    }
}

@-o-keyframes mymove2 /* Opera */
{
    0% {
        left: 500px;
    }
    50%{
        left: 520px;
    }
    100% {
        left: 500px;
    }
}

#bg5{
    position: absolute;
    left: 230px;
    top: 360px;
    z-index: 123;
    width: 56px;
    height: 80px;
    background-image: url("../img/banner-gif/d5-3.png");
    background-position: 0 80px;
    animation:mymove5 10s infinite linear;
    -webkit-animation:mymove5 10s infinite linear; /* Safari 和 Chrome */
    -moz-animation:mymove5 10s infinite linear;
    -o-animation:mymove5 10s infinite linear;
}
@keyframes mymove5
{
    0%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    1%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    10%{
        left: 270px;
        top: 340px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    20%{
        left: 287px;
        top: 291px;
        width: 56px;
        height: 80px;
        opacity: 1;
        background-position: 0 0;
    }
    21%{
        left: 287px;
        top: 291px;
        width: 56px;
        height: 80px;
        opacity: 1;
        background-position: 0 0;
    }
    28%{
        left: 287px;
        top: 291px;
        opacity: 1;
        width: 56px;
        height: 80px;
        background-position: 0 0;
    }
    29%{
        left: 287px;
        top: 291px;
        opacity: 0;
        width: 56px;
        height: 80px;
        background-position: 0 0;
    }
    30%{
        left: 230px;
        top:500px;
        opacity: 0;
        width: 56px;
        height: 80px;

    }
    30.1%{
        left: 230px;
        top:500px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    50%{
        left: 230px;
        top:450px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    65%{
        left: 230px;
        top:430px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    78%{
        left: 230px;
        top:430px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    78.1%{
        left: 230px;
        top:430px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    89.1%{
        left: 230px;
        top:430px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    100%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
}
@-moz-keyframes mymove5 /* Firefox */
{
    0%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    1%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    10%{
        left: 270px;
        top: 340px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    20%{
        left: 287px;
        top: 291px;
        width: 56px;
        height: 80px;
        opacity: 1;
        background-position: 0 0;
    }
    21%{
        left: 287px;
        top: 291px;
        width: 56px;
        height: 80px;
        opacity: 1;
        background-position: 0 0;
    }
    28%{
        left: 287px;
        top: 291px;
        opacity: 1;
        width: 56px;
        height: 80px;
        background-position: 0 0;
    }
    29%{
        left: 287px;
        top: 291px;
        opacity: 0;
        width: 56px;
        height: 80px;
        background-position: 0 0;
    }
    30%{
        left: 230px;
        top:500px;
        opacity: 0;
        width: 56px;
        height: 80px;
    }
    30.1%{
        left: 230px;
        top:500px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    50%{
        left: 230px;
        top:450px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    65%{
        left: 230px;
        top:430px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    78%{
        left: 230px;
        top:430px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    78.1%{
        left: 230px;
        top:430px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    89.1%{
        left: 230px;
        top:430px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    100%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
}

@-webkit-keyframes mymove5 /* Safari 和 Chrome */
{
    0%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    1%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    10%{
        left: 270px;
        top: 340px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    20%{
        left: 287px;
        top: 291px;
        width: 56px;
        height: 80px;
        opacity: 1;
        background-position: 0 0;
    }
    21%{
        left: 287px;
        top: 291px;
        width: 56px;
        height: 80px;
        opacity: 1;
        background-position: 0 0;
    }
    28%{
        left: 287px;
        top: 291px;
        opacity: 1;
        width: 56px;
        height: 80px;
        background-position: 0 0;
    }
    29%{
        left: 287px;
        top: 291px;
        opacity: 0;
        width: 56px;
        height: 80px;
        background-position: 0 0;
    }
    30%{
        left: 230px;
        top:500px;
        opacity: 0;
        width: 56px;
        height: 80px;
    }
    30.1%{
        left: 230px;
        top:500px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    50%{
        left: 230px;
        top:450px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    65%{
        left: 230px;
        top:430px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    78%{
        left: 230px;
        top:430px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    78.1%{
        left: 230px;
        top:430px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    89.1%{
        left: 230px;
        top:430px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    100%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
}
@-o-keyframes mymove5 /* Opera */
{
    0%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    1%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    10%{
        left: 270px;
        top: 340px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    20%{
        left: 287px;
        top: 291px;
        width: 56px;
        height: 80px;
        opacity: 1;
        background-position: 0 0;
    }
    21%{
        left: 287px;
        top: 291px;
        width: 56px;
        height: 80px;
        opacity: 1;
        background-position: 0 0;
    }
    28%{
        left: 287px;
        top: 291px;
        opacity: 1;
        width: 56px;
        height: 80px;
        background-position: 0 0;
    }
    29%{
        left: 287px;
        top: 291px;
        opacity: 0;
        width: 56px;
        height: 80px;
        background-position: 0 0;
    }
    30%{
        left: 230px;
        top:500px;
        opacity: 0;
        width: 56px;
        height: 80px;

    }
    30.1%{
        left: 230px;
        top:500px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    50%{
        left: 230px;
        top:450px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    65%{
        left: 230px;
        top:430px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    78%{
        left: 230px;
        top:430px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    78.1%{
        left: 230px;
        top:430px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    89.1%{
        left: 230px;
        top:430px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    100%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
}
@-ms-keyframes mymove5
{
    0%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;

    }
    1%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    10%{
        left: 270px;
        top: 340px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    20%{
        left: 287px;
        top: 291px;
        width: 56px;
        height: 80px;
        opacity: 1;
        background-position: 0 0;
    }
    21%{
        left: 287px;
        top: 291px;
        width: 56px;
        height: 80px;
        opacity: 1;
        background-position: 0 0;
    }
    28%{
        left: 287px;
        top: 291px;
        opacity: 1;
        width: 56px;
        height: 80px;
        background-position: 0 0;
    }
    29%{
        left: 287px;
        top: 291px;
        opacity: 0;
        width: 56px;
        height: 80px;
        background-position: 0 0;
    }
    30%{
        left: 230px;
        top:500px;
        opacity: 0;
        width: 56px;
        height: 80px;
    }
    30.1%{
        left: 230px;
        top:500px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    50%{
        left: 230px;
        top:450px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    65%{
        left: 230px;
        top:430px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }
    78%{
        left: 230px;
        top:430px;
        width: 26px;
        height: 80px;
        background-position: 0 80px;
        opacity: 1;
    }

    78.1%{
        left: 230px;
        top:430px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    89.1%{
        left: 230px;
        top:430px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
    100%{
        left: 230px;
        top: 360px;
        width: 56px;
        height: 80px;
        background-position: 0 0;
        opacity: 1;
    }
}

#bg6{
    position: absolute;
    left: 110px;
    top: 300px;
    z-index: 99;
}
#bg7{
    position: absolute;
    left:300px;
    top: 400px;
    z-index: 122;
    width: 80px;
    height: 94px;
    animation:mymove7 10s infinite linear;
    -webkit-animation:mymove7 10s infinite linear; /* Safari 和 Chrome */
    -moz-animation:mymove7 10s infinite linear;
    -o-animation:mymove7 10s infinite linear;
    background-image: url("../img/banner-gif/d9-3.png");
    background-position: 0 0;
}
@keyframes mymove7
{
    0% {
        left:300px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    30% {
        left:200px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    38%{
        left:200px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 0;
        background-position: 80px 0;
    }
    38.1%{
        left:-100px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    40%{
        left:-100px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    42%{
        left:-100px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 0 0;

    }
    77.9%{
        left:190px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 0 0;
    }
    78%{
        left: 200px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
    80%{
        left: 200px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
    100%{
        left:300px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
}

@-moz-keyframes mymove7 /* Firefox */
{
    0% {
        left:300px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    30% {
        left:200px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    38%{
        left:200px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 0;
        background-position: 80px 0;
    }
    38.1%{
        left:-100px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    40%{
        left:-100px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    42%{
        left:-100px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 0 0;
    }
    77.9%{
        left:190px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 0 0;
    }
    78%{
        left: 200px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
    80%{
        left: 200px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
    100%{
        left:300px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
}

@-webkit-keyframes mymove7 /* Safari 和 Chrome */
{
    0% {
        left:300px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    30% {
        left:200px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    38%{
        left:200px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 0;
        background-position: 80px 0;
    }
    38.1%{
        left:-100px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    40%{
        left:-100px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    42%{
        left:-100px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 0 0;
    }
    77.9%{
        left:190px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 0 0;
    }
    78%{
        left: 200px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
    80%{
        left: 200px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
    100%{
        left:300px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
}
@-o-keyframes mymove7 /* Opera */
{
    0% {
        left:300px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    30% {
        left:200px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    38%{
        left:200px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 0;
        background-position: 80px 0;
    }
    38.1%{
        left:-100px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    40%{
        left:-100px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    42%{
        left:-100px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 0 0;
    }
    77.9%{
        left:190px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 0 0;
    }
    78%{
        left: 200px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
    80%{
        left: 200px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
    100%{
        left:300px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
}
@-ms-keyframes mymove7
{
    0% {
        left:300px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    30% {
        left:200px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    38%{
        left:200px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 0;
        background-position: 80px 0;
    }
    38.1%{
        left:-100px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    40%{
        left:-100px;
        top: 580px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 80px 0;
    }
    42%{
        left:-100px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 0 0;

    }
    77.9%{
        left:190px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 0 0;
    }
    78%{
        left: 200px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
    80%{
        left: 200px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
    100%{
        left:300px;
        top: 400px;
        width: 80px;
        height: 94px;
        opacity: 1;
        background-position: 160px 0;
    }
}
#bg8{
    position: absolute;
    left: 150px;
    top: 75px;
    z-index: 3;
    animation:mymove8 9s infinite linear;
    -webkit-animation:mymove8 9s infinite linear; /* Safari 和 Chrome */
    -moz-animation:mymove8 9s infinite linear;
    -o-animation:mymove8 9s infinite linear;
}
@keyframes mymove8
{
    0% {
        left: 135px;
        top: 75px;
    }
    30%{
        left: 140px;
        top: 75px;
    }
    50%{
        left: 148px;
        top: 75px;
    }
    70%{
        left: 143px;
        top: 75px;
    }
    100% {
        left: 135px;
        top: 75px;
    }
}

@-moz-keyframes mymove8 /* Firefox */
{
    0% {
        left: 135px;
        top: 75px;
    }
    30%{
        left: 140px;
        top: 75px;
    }
    50%{
        left: 148px;
        top: 75px;

    }
    70%{
        left: 143px;
        top: 75px;
    }
    100% {
        left: 135px;
        top: 75px;
    }
}


@-webkit-keyframes mymove8 /* Safari 和 Chrome */
{
    0% {
        left: 135px;
        top: 75px;
    }
    30%{
        left: 140px;
        top: 75px;
    }
    50%{
        left: 148px;
        top: 75px;
    }
    70%{
        left: 143px;
        top: 75px;
    }
    100% {
        left: 135px;
        top: 75px;
    }
}


@-o-keyframes mymove8 /* Opera */
{
    0% {
        left: 135px;
        top: 75px;
    }
    30%{
        left: 140px;
        top: 75px;
    }
    50%{
        left: 148px;
        top: 75px;
    }
    70%{
        left: 143px;
        top: 75px;
    }
    100% {
        left: 135px;
        top: 75px;
    }
}

@-ms-keyframes mymove8
{
    0% {
        left: 135px;
        top: 75px;
    }
    30%{
        left: 140px;
        top: 75px;
    }
    50%{
        left: 148px;
        top: 75px;
    }
    70%{
        left: 143px;
        top: 75px;
    }
    100% {
        left: 135px;
        top: 75px;
    }
}

#bg10-1{
    position: absolute;
    left: 110px;
    top: 350px;
    z-index: 99;
}
#bg11{
    position: absolute;
    left: 380px;
    top: 170px;
    z-index: 99;
}
#bg12{
    position: absolute;
    left: 160px;
    top: 350px;
    z-index: 99;
}
#bg13{
    position: absolute;
    left: 134px;
    top: 380px;
    z-index: 99;
}
#bg14{
    position: absolute;
    left: 160px;
    top: 320px;
}
#bg15{
    position: absolute;
    left: 120px;
    top: 350px;
}
#bgsdk-2{
    position: absolute;
    left: 210px;
    top: 340px;
    z-index: 99;
}
#bg20{
    position: absolute;
    left: 265px;
    top: 130px;
    animation:mymove20 3s infinite linear;
    -webkit-animation:mymove20 3s infinite linear; /* Safari 和 Chrome */
    -moz-animation:mymove20 3s infinite linear;
    -o-animation:mymove20 3s infinite linear;
}
@keyframes mymove20
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);
    }
    50% {
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); 	/* IE 9 */
        -moz-transform:rotate(180deg); 	/* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg);
    }
    100%{
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); 	/* IE 9 */
        -moz-transform:rotate(360deg); 	/* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg);
    }
}

@-moz-keyframes mymove20 /* Firefox */
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);
    }

    50% {
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); 	/* IE 9 */
        -moz-transform:rotate(180deg); 	/* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg);
    }
    100%{
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); 	/* IE 9 */
        -moz-transform:rotate(360deg); 	/* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg);
    }
}

@-webkit-keyframes mymove20 /* Safari 和 Chrome */
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);
    }
    50% {
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); 	/* IE 9 */
        -moz-transform:rotate(180deg); 	/* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg);
    }
    100%{
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); 	/* IE 9 */
        -moz-transform:rotate(360deg); 	/* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg);
    }
}
@-o-keyframes mymove21 /* Opera */
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);
    }

    50% {
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); 	/* IE 9 */
        -moz-transform:rotate(180deg); 	/* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg);
    }
    100%{
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); 	/* IE 9 */
        -moz-transform:rotate(360deg); 	/* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg);
    }
}

#bg21{
    position: absolute;
    left: 320px;
    top: 120px;
    z-index: 1;
    animation:mymove21 4s infinite linear;
    -webkit-animation:mymove21 4s infinite linear; /* Safari 和 Chrome */
    -moz-animation:mymove21 4s infinite linear;
    -o-animation:mymove21 4s infinite linear;
}
@keyframes mymove21
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);

    }
    50% {
        transform:rotate(-180deg);
        -ms-transform:rotate(-180deg); 	/* IE 9 */
        -moz-transform:rotate(-180deg); 	/* Firefox */
        -webkit-transform:rotate(-180deg); /* Safari 和 Chrome */
        -o-transform:rotate(-180deg);
    }
    100%{
        transform:rotate(-360deg);
        -ms-transform:rotate(-360deg); 	/* IE 9 */
        -moz-transform:rotate(-360deg); 	/* Firefox */
        -webkit-transform:rotate(-360deg); /* Safari 和 Chrome */
        -o-transform:rotate(-360deg);
    }
}

@-moz-keyframes mymove21 /* Firefox */
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);
    }
    50% {
        transform:rotate(-180deg);
        -ms-transform:rotate(-180deg); 	/* IE 9 */
        -moz-transform:rotate(-180deg); 	/* Firefox */
        -webkit-transform:rotate(-180deg); /* Safari 和 Chrome */
        -o-transform:rotate(-180deg);
    }
    100%{
        transform:rotate(-360deg);
        -ms-transform:rotate(-360deg); 	/* IE 9 */
        -moz-transform:rotate(-360deg); 	/* Firefox */
        -webkit-transform:rotate(-360deg); /* Safari 和 Chrome */
        -o-transform:rotate(-360deg);
    }
}

@-webkit-keyframes mymove21 /* Safari 和 Chrome */
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);
    }
    50% {
        transform:rotate(-180deg);
        -ms-transform:rotate(-180deg); 	/* IE 9 */
        -moz-transform:rotate(-180deg); 	/* Firefox */
        -webkit-transform:rotate(-180deg); /* Safari 和 Chrome */
        -o-transform:rotate(-180deg);
    }
    100%{
        transform:rotate(-360deg);
        -ms-transform:rotate(-360deg); 	/* IE 9 */
        -moz-transform:rotate(-360deg); 	/* Firefox */
        -webkit-transform:rotate(-360deg); /* Safari 和 Chrome */
        -o-transform:rotate(-360deg);
    }

}
@-o-keyframes mymove21 /* Opera */
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);
    }
    50% {
        transform:rotate(-180deg);
        -ms-transform:rotate(-180deg); 	/* IE 9 */
        -moz-transform:rotate(-180deg); 	/* Firefox */
        -webkit-transform:rotate(-180deg); /* Safari 和 Chrome */
        -o-transform:rotate(-180deg);
    }
    100%{
        transform:rotate(-360deg);
        -ms-transform:rotate(-360deg); 	/* IE 9 */
        -moz-transform:rotate(-360deg); 	/* Firefox */
        -webkit-transform:rotate(-360deg); /* Safari 和 Chrome */
        -o-transform:rotate(-360deg);
    }
}
#bg22{
    position: absolute;
    left: 350px;
    top: 230px;
    z-index: 1;
    animation:mymove22 4s infinite linear;
    -webkit-animation:mymove22 4s infinite linear; /* Safari 和 Chrome */
    -moz-animation:mymove22 4s infinite linear;
    -o-animation:mymove22 4s infinite linear;
}
@keyframes mymove22
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);
    }
    50% {
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); 	/* IE 9 */
        -moz-transform:rotate(180deg); 	/* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg);
    }
    100%{
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); 	/* IE 9 */
        -moz-transform:rotate(360deg); 	/* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg);
    }
}

@-moz-keyframes mymove22 /* Firefox */
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);
    }
    50% {
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); 	/* IE 9 */
        -moz-transform:rotate(180deg); 	/* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg);
    }
    100%{
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); 	/* IE 9 */
        -moz-transform:rotate(360deg); 	/* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg);
    }
}

@-webkit-keyframes mymove22 /* Safari 和 Chrome */
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);
    }
    50% {
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); 	/* IE 9 */
        -moz-transform:rotate(180deg); 	/* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg);
    }
    100%{
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); 	/* IE 9 */
        -moz-transform:rotate(360deg); 	/* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg);
    }
}
@-o-keyframes mymove22 /* Opera */
{
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); 	/* IE 9 */
        -moz-transform:rotate(0deg); 	/* Firefox */
        -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
        -o-transform:rotate(0deg);
    }
    50% {
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); 	/* IE 9 */
        -moz-transform:rotate(180deg); 	/* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg);
    }
    100%{
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); 	/* IE 9 */
        -moz-transform:rotate(360deg); 	/* Firefox */
        -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
        -o-transform:rotate(360deg);
    }
}