@media screen and (min-height:900px)
{

    body{font-size:14px;FONT-FAMILY:"Microsoft YaHei","Arial Narrow";}
    a{COLOR:#494949;text-decoration:none}
    a:hover{COLOR:#f00;text-decoration:none}
    .header{position:fixed;top:30px;left:50px;}

    #step1{
        background-image:url(../images/down/bg_y.png)
    }

    #step1 .content{
        position:relative;
        width:810px;
        height:100%;
        margin:0 auto
    }

    #step1 .dong1{
        position:absolute;
        top:150px;
        left:255px;

        animation: rotation1 5s linear infinite;
        -moz-animation: rotation1 5s linear infinite;
        -webkit-animation: rotation1 5s linear infinite;
        -o-animation: rotation1 5s linear infinite;
        -ms-animation:rotation1 5s linear infinite;
    }

    @-webkit-keyframes rotation1{
        from {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
        to {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    @keyframes rotation1{
        from {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
        to {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);

        }
    }

    #step1 .dong2{
        position:absolute;
        top:67px;
        left:177px;

        animation: rotation2 5s linear infinite;
        -moz-animation: rotation2 5s linear infinite;
        -webkit-animation: rotation2 5s linear infinite;
        -o-animation: rotation2 5s linear infinite;
        -ms-animation:rotation2 5s linear infinite;
    }

    @-webkit-keyframes rotation2{
        from {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);

        }
    }
    @keyframes rotation2{
        from {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);

        }
    }

    #step1 .dong3{
        position:absolute;
        top:525px;
        left:25%;
        margin-left:-230px;
    }

    #step1 .down{
        position:absolute;
        top:695px;
        left:34%;
        margin-left:-298px;
    }

    #step1 .downpp{
        position:absolute;
        top:785px;
        left:50%;
        margin-left:-98px;
    }

    #step1 .downpp a{
        text-decoration:underline;
        font-size:16px;
        color:#55BEA3;
    }

    #step2{
        background-image:url(../images/down/bg_y.png)
    }
    #step2 .content{
        position:relative;
        width:810px;
        height:800px;
        margin:0 auto
    }
    #step2 .step2bg{
        position:absolute;
        top:120px;
        left:50%;
        width:596px;
        margin-left:-295px;

    }
    #step2 .dong1{
        position:absolute;
        top:166px;

        left:215px;
    }

    .flyTop1 { -webkit-animation: flyTop1 1s ease; -moz-animation: flyTop1 1s ease; animation: flyTop1 1s ease; }
    .flyTop2 { -webkit-animation: flyTop2 1s ease; -moz-animation: flyTop2 1s ease; animation: flyTop2 1s ease; }

    @-webkit-keyframes flyTop1 {
        0% {
            -webkit-transform:translateY(80px);
        }
        100% {
            -webkit-transform:translateY(0);
        }
    }
    @-moz-keyframes flyTop1 {
        0% {
            -moz-transform:translateY(80px);
        }
        100% {
            -moz-transform:translateY(0);
        }
    }
    @keyframes flyTop1 {
        0% {
            transform:translateY(80px);
        }
        100% {
            transform:translateY(0);
        }
    }


    @-webkit-keyframes flyTop2 {
        0% {
            -webkit-transform:translateY(180px);
        }
        100% {
            -webkit-transform:translateY(0);
        }
    }
    @-moz-keyframes flyTop2 {
        0% {
            -moz-transform:translateY(180px);
        }
        100% {
            -moz-transform:translateY(0);
        }
    }
    @keyframes flyTop2 {
        0% {
            transform:translateY(180px);
        }
        100% {
            transform:translateY(0);
        }
    }

    #step2 .dong2{
        position:absolute;
        top:58px;
        left:203px;
        /*animation-duration: 2s;
        -moz-animation-duration: 2s;
        -webkit-animation-delay: 0.2s;*/
    }

    #step2 .dong3{
        position:absolute;
        /*top:195px;*/
        top:182px;
        left:384px;
    }

    #step2 .clock{
        -webkit-animation:rotateLabel 2s ;
        animation:rotateLabel 2s ;
    }

    @-webkit-keyframes rotateLabel {
        0%{
            -webkit-transform-origin:20px;
            -webkit-transform: rotate(-160deg);
        }
        100%{
            -webkit-transform-origin:20px;
            -webkit-transform: rotate(0);
        }
    }

    @keyframes rotateLabel {
        0%{
            transform-origin:20px;
            transform: rotate(-160deg);
        }
        100%{
            transform-origin:20px;
            transform: rotate(0);
        }
    }

    #step2 .dong4{
        position:absolute;
        top:545px;
        left:30%;
        margin-left:-295px;
    }


    #step3{
        background-image:url(../images/down/bg_y.png)
    }
    #step3 .content{
        position:relative;
        width:810px;
        height:800px;
        margin:0 auto
    }

    #step3 .step2bg{
        position:absolute;
        top:20px;
        left:50%;
        width:787px;
        margin-left:-393px;
    }

    #step3 .dong1{
        position:absolute;
        top:14px;
        left:-14px;

        animation-duration: 4s;
        -moz-animation-duration: 4s;
    }

    #step3 .dong2{
        position:absolute;
        top:14px;
        right:-28px;
        animation-duration: 4s;
        -moz-animation-duration: 4s;
    }

    #step3 .dong3{
        position:absolute;
        top:60px;
        left:50%;
        margin-left:-200px;
        /*animation-duration: 2s;
        -moz-animation-duration: 2s;
        -webkit-animation-delay: 0.2s;*/
    }

    .flyDown3 { -webkit-animation: flyDown1 0.5s cubic-bezier(.36,.11,1,-0.08); -moz-animation: flyDown1 0.5s cubic-bezier(.36,.11,1,-0.08); animation: flyDown1 0.5s cubic-bezier(.36,.11,1,-0.08);}
    .flyDown5 { -webkit-animation: flyDown5 1s; -moz-animation: flyDown5 1s; animation: flyDown5 1s;}

    @-webkit-keyframes flyDown1 {
        0% {
            -webkit-transform:translateY(-300px);
        }
        100% {
            -webkit-transform:translateY(0);
        }
    }
    @-moz-keyframes flyDown1 {
        0% {
            -moz-transform:translateY(-300px);
        }
        100% {
            -moz-transform:translateY(0);
        }
    }
    @keyframes flyDown1 {
        0% {
            transform:translateY(-300px);
        }
        100% {
            transform:translateY(0);
        }
    }

    @keyframes flyDown5 {
        0% {
            transform:translate(100px,-300px);
        }
        100% {
            transform:translate(0,0);
        }
    }

    #step3 .dong4{
        position:absolute;
        top:545px;
        left:38%;
        margin-left:-295px;
    }


    #step4{
        background-image:url(../images/down/bg_y.png)
    }
    #step4 .content{
        position:relative;
        width:810px;
        height:800px;
        margin:0 auto
    }
    #step4 .step2bg{
        position:absolute;
        top:20px;
        left:50%;
        width:787px;
        margin-left:-393px;
    }

    #step4 .dong1{
        position:absolute;
        top:56px;
        right:193px;

        animation-duration: 1s;
        -moz-animation-duration: 1s;
    }

    #step4 .dong2{
        position:absolute;
        top:19px;
        left:186px;
        animation-duration: 1.2s;
        -moz-animation-duration: 1.2s;

        -webkit-animation-delay: .5s;
    }

    #step4 .dong3{
        position:absolute;
        top:173px;
        left:53px;

        animation-duration: 1.2s;
        -moz-animation-duration: 1.2s;

        -webkit-animation-delay: .5s;
    }
    #step4 .dong4{
        position:absolute;
        top:356px;
        left:100px;
        animation-duration: 1.2s;
        -moz-animation-duration: 1.2s;

        -webkit-animation-delay: .5s;
    }

    #step4 .dong5{
        position:absolute;
        top:485px;
        left:50%;
        margin-left:-295px;
    }

    .flyright1 { -webkit-animation: flyright1 .3s ease-in; -moz-animation: flyright1 .3s ease-in; animation: flyright1 .3s ease-in;}

    @-webkit-keyframes flyright1 {
        0% {
            -webkit-transform:translateX(50px);
        }
        100% {
            -webkit-transform:translateX(0);
        }
    }
    @-moz-keyframes flyright1 {
        0% {
            -moz-transform:translateX(50px);
        }
        100% {
            -moz-transform:translateX(0);
        }
    }
    @keyframes flyright1 {
        0% {
            transform:translateX(50px);
        }
        100% {
            transform:translateX(0);
        }
    }

    #step5{
        background-image:url(../images/down/bg_y.png)
    }
    #step5 .content{
        position:relative;
        width:810px;
        height:800px;
        margin:0 auto
    }
    #step5 .step2bg{
        position:absolute;
        top:200px;
        left:50%;
        width:907px;
        margin-left:-453px;
    }

    #step5 .dong1{
        position:absolute;
        top:25px;
        right:79px;
    }

    #step5 .dong2{
        position:absolute;
        top:71px;
        right:205px;

        animation-duration: 4s;
        -moz-animation-duration: 4s;
    }

    .yuan {
        -webkit-animation: yuan 4s ease;-moz-animation: yuan 4s ease; animation: yuan 4s ease;

    }

    @-webkit-keyframes yuan {
        0% {
            opacity:0;
            -webkit-transform:scale(0.3);
            -moz-transform:scale(0.3);
        }
        50%
        {
            opacity:1;
            -webkit-transform:scale(1.05);
            -moz-transform:scale(1.05);
        }
        80%
        {
            -webkit-transform:scale(0.8);
            -moz-transform:scale(0.8);
        }
        100%
        {
            -webkit-transform:scale(1);
            -moz-transform:scale(1);
        }
    }
    @-moz-keyframes yuan {
        0% {
            opacity:0;
            -webkit-transform:scale(0.3);
            -moz-transform:scale(0.3);
        }
        50%
        {
            opacity:1;
            -webkit-transform:scale(1.05);
            -moz-transform:scale(1.05);
        }
        80%
        {
            -webkit-transform:scale(0.8);
            -moz-transform:scale(0.8);
        }
        100%
        {
            -webkit-transform:scale(1);
            -moz-transform:scale(1);
        }
    }
    @keyframes yuan {
        0% {
            opacity:0;
            -webkit-transform:scale(0.3);
            -moz-transform:scale(0.3);
        }
        50%
        {
            opacity:1;
            -webkit-transform:scale(1.05);
            -moz-transform:scale(1.05);
        }
        80%
        {
            -webkit-transform:scale(0.8);
            -moz-transform:scale(0.8);
        }
        100%
        {
            -webkit-transform:scale(1);
            -moz-transform:scale(1);
        }
    }

    #step5 .dong4{
        position:absolute;
        top:595px;
        left:35%;
        margin-left:-325px;
    }
    #step5 #dong301{position:absolute;top:371px;left:126px;}
    #step5 #dong302{position:absolute;top:286px;left:324px;}
    #step5 #dong303{position:absolute;top:455px;left:310px;}
    #step5 #dong304{position:absolute;top:456px;left:504px;}
    #step5 #dong305{position:absolute;top:282px;left:511px;}
    #step5 #dong306{position:absolute;top:371px;right:85px;}

    #step5 #dong307{position:absolute;top:333px;left:220px;}
    #step5 #dong308{position:absolute;top:413px;left:216px;}
    #step5 #dong309{position:absolute;top:500px;left:412px;}
    #step5 #dong310{position:absolute;top:414px;left:606px;}
    #step5 #dong311{position:absolute;top:245px;left:420px;}
    #step5 #dong312{position:absolute;top:327px;right:192px;}

    #moveball1{
        position:fixed;
        top:90px;
        left:5px;
        animation-name: rightMove, bottomMove;
        animation-duration: 14s;
        animation-iteration-count: infinite;
    }
    @keyframes rightMove{

        60% {
            animation-timing-function: linear;
            left: 55px;
        }
    }

    @keyframes bottomMove{
        60% {
            animation-timing-function: linear;
            top: 140px;
        }
    }

    #moveball2{
        position:fixed;
        bottom:90px;
        left:5px;
        animation-name: rightMove2, bottomMove2;
        animation-duration: 16s;
        animation-iteration-count: infinite;
    }

    @keyframes rightMove2{
        60% {
            animation-timing-function: linear;
            left: 55px;
        }
    }

    @keyframes bottomMove2{
        60% {
            animation-timing-function: linear;
            bottom: 140px;
        }
    }
    #moveball3{
        position:fixed;
        top:90px;
        right:5px;
        animation-name: rightMove3, bottomMove3;
        animation-duration: 16s;
        animation-iteration-count: infinite;
    }

    @keyframes rightMove3{
        60% {
            animation-timing-function: linear;
            right: 55px;
        }
    }

    @keyframes bottomMove3{
        60% {
            animation-timing-function: linear;
            top: 140px;
        }
    }

    #moveball4{
        position:fixed;
        bottom:90px;
        right:5px;
        animation-name: rightMove4, bottomMove4;
        animation-duration:15s;
        animation-iteration-count: infinite;
    }

    @keyframes rightMove4{
        60% {
            animation-timing-function: linear;
            right: 55px;
        }
    }

    @keyframes bottomMove4{
        60% {
            animation-timing-function: linear;
            bottom: 140px;
        }
    }
}



@media screen and (max-height:900px)
{

    body{font-size:14px;FONT-FAMILY:"Microsoft YaHei","Arial Narrow";}
    a{COLOR:#494949;text-decoration:none}
    a:hover{COLOR:#f00;text-decoration:none}
    .header{position:fixed;top:30px;left:50px;}

    #step1{
        background-image:url(../images/down/bg_y.png)
    }

    #step1 .downpp{
        position:absolute;
        top:655px;
        left:50%;
        margin-left:-98px;
    }

    #step1 .downpp a{
        text-decoration:underline;
        font-size:16px;
        color:#55BEA3;
    }

    #step1 .content{
        position:relative;
        width:810px;
        height:100%;
        margin:0 auto
    }

    #step1 .dong1{
        position:absolute;
        top: 99px;
        left: 260px;
        animation: rotation1 5s linear infinite;
        -moz-animation: rotation1 5s linear infinite;
        -webkit-animation: rotation1 5s linear infinite;
        -o-animation: rotation1 5s linear infinite;
        -ms-animation:rotation1 5s linear infinite;
    }

    @-webkit-keyframes rotation1{
        from {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
        to {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    @keyframes rotation1{
        from {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
        to {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);

        }
    }

    #step1 .dong2{
        position:absolute;
        top: 36px;
        left: 195px;
        animation: rotation2 5s linear infinite;
        -moz-animation: rotation2 5s linear infinite;
        -webkit-animation: rotation2 5s linear infinite;
        -o-animation: rotation2 5s linear infinite;
        -ms-animation:rotation2 5s linear infinite;
    }
    @-webkit-keyframes rotation2{
        from {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);

        }
    }
    @keyframes rotation2{
        from {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);

        }
    }

    #step1 .dong3{
        position:absolute;
        top: 395px;
        left:35%;
        margin-left:-230px;
    }

    #step1 .down{
        position:absolute;
        top: 510px;
        left: 39%;
        margin-left: -285px;
        /* display: block; */
        /* clear: both; */
    }

    #step2{
        background-image:url(../images/down/bg_y.png)
    }
    #step2 .content{
        position:relative;
        width:810px;
        height:800px;
        margin:0 auto
    }
    #step2 .step2bg{
        position:absolute;
        top: 90px;
        left:50%;
        width:596px;
        margin-left:-295px;
    }
    #step2 .dong1{
        position:absolute;
        top: 132px;
        left:215px;
    }

    .flyTop1 { -webkit-animation: flyTop1 1s ease; -moz-animation: flyTop1 1s ease; animation: flyTop1 1s ease; }
    .flyTop2 { -webkit-animation: flyTop2 1s ease; -moz-animation: flyTop2 1s ease; animation: flyTop2 1s ease; }

    @-webkit-keyframes flyTop1 {
        0% {
            -webkit-transform:translateY(80px);
        }
        100% {
            -webkit-transform:translateY(0);
        }
    }
    @-moz-keyframes flyTop1 {
        0% {
            -moz-transform:translateY(80px);
        }
        100% {
            -moz-transform:translateY(0);
        }
    }
    @keyframes flyTop1 {
        0% {
            transform:translateY(80px);
        }
        100% {
            transform:translateY(0);
        }
    }


    @-webkit-keyframes flyTop2 {
        0% {
            -webkit-transform:translateY(180px);
        }
        100% {
            -webkit-transform:translateY(0);
        }
    }
    @-moz-keyframes flyTop2 {
        0% {
            -moz-transform:translateY(180px);
        }
        100% {
            -moz-transform:translateY(0);
        }
    }
    @keyframes flyTop2 {
        0% {
            transform:translateY(180px);
        }
        100% {
            transform:translateY(0);
        }
    }

    #step2 .dong2{
        position:absolute;
        top: 40px;
        left:203px;
        /*animation-duration: 2s;
        -moz-animation-duration: 2s;
        -webkit-animation-delay: 0.2s;*/
    }

    #step2 .dong3{
        position:absolute;
        /*top:195px;*/
        top:182px;
        left:384px;
    }

    #step2 .clock{
        -webkit-animation:rotateLabel 2s ;
        animation:rotateLabel 2s ;
    }

    @-webkit-keyframes rotateLabel {
        0%{
            -webkit-transform-origin:20px;
            -webkit-transform: rotate(-160deg);
        }
        100%{
            -webkit-transform-origin:20px;
            -webkit-transform: rotate(0);
        }
    }

    @keyframes rotateLabel {
        0%{
            transform-origin:20px;
            transform: rotate(-160deg);
        }
        100%{
            transform-origin:20px;
            transform: rotate(0);
        }
    }

    #step2 .dong4{
        position:absolute;
        top: 488px;
        left: 44%;
        margin-left:-295px;
    }


    #step3{
        background-image:url(../images/down/bg_y.png)
    }
    #step3 .content{
        position:relative;
        width:810px;
        height:800px;
        margin:0 auto
    }

    #step3 .step2bg{
        position:absolute;
        top:20px;
        left:50%;
        width:787px;
        margin-left:-393px;
    }

    #step3 .dong1{
        position:absolute;
        top:14px;
        left:-14px;

        animation-duration: 4s;
        -moz-animation-duration: 4s;
    }

    #step3 .dong2{
        position:absolute;
        top:14px;
        right:-28px;
        animation-duration: 4s;
        -moz-animation-duration: 4s;
    }

    #step3 .dong3{
        position:absolute;
        top:60px;
        left:50%;
        margin-left:-200px;
        /*animation-duration: 2s;
        -moz-animation-duration: 2s;
        -webkit-animation-delay: 0.2s;*/
    }

    .flyDown3 { -webkit-animation: flyDown1 0.5s cubic-bezier(.36,.11,1,-0.08); -moz-animation: flyDown1 0.5s cubic-bezier(.36,.11,1,-0.08); animation: flyDown1 0.5s cubic-bezier(.36,.11,1,-0.08);}
    .flyDown5 { -webkit-animation: flyDown5 1s; -moz-animation: flyDown5 1s; animation: flyDown5 1s;}

    @-webkit-keyframes flyDown1 {
        0% {
            -webkit-transform:translateY(-300px);
        }
        100% {
            -webkit-transform:translateY(0);
        }
    }
    @-moz-keyframes flyDown1 {
        0% {
            -moz-transform:translateY(-300px);
        }
        100% {
            -moz-transform:translateY(0);
        }
    }
    @keyframes flyDown1 {
        0% {
            transform:translateY(-300px);
        }
        100% {
            transform:translateY(0);
        }
    }

    @keyframes flyDown5 {
        0% {
            transform:translate(100px,-300px);
        }
        100% {
            transform:translate(0,0);
        }
    }

    #step3 .dong4{
        position:absolute;
        top: 505px;
        left: 50%;
        margin-left:-295px;
    }


    #step4{
        background-image:url(../images/down/bg_y.png)
    }
    #step4 .content{
        position:relative;
        width:810px;
        height:800px;
        margin:0 auto
    }
    #step4 .step2bg{
        position:absolute;
        top:20px;
        left:50%;
        width:787px;
        margin-left:-393px;
    }

    #step4 .dong1{
        position:absolute;
        top:56px;
        right:193px;

        animation-duration: 1s;
        -moz-animation-duration: 1s;
    }

    #step4 .dong2{
        position:absolute;
        top:19px;
        left:186px;
        animation-duration: 1.2s;
        -moz-animation-duration: 1.2s;

        -webkit-animation-delay: .5s;
    }

    #step4 .dong3{
        position:absolute;
        top:173px;
        left:53px;

        animation-duration: 1.2s;
        -moz-animation-duration: 1.2s;

        -webkit-animation-delay: .5s;
    }
    #step4 .dong4{
        position:absolute;
        top:356px;
        left:100px;
        animation-duration: 1.2s;
        -moz-animation-duration: 1.2s;

        -webkit-animation-delay: .5s;
    }

    #step4 .dong5{
        position:absolute;
        top: 475px;
        left:60%;
        margin-left:-295px;
    }

    .flyright1 { -webkit-animation: flyright1 .3s ease-in; -moz-animation: flyright1 .3s ease-in; animation: flyright1 .3s ease-in;}

    @-webkit-keyframes flyright1 {
        0% {
            -webkit-transform:translateX(50px);
        }
        100% {
            -webkit-transform:translateX(0);
        }
    }
    @-moz-keyframes flyright1 {
        0% {
            -moz-transform:translateX(50px);
        }
        100% {
            -moz-transform:translateX(0);
        }
    }
    @keyframes flyright1 {
        0% {
            transform:translateX(50px);
        }
        100% {
            transform:translateX(0);
        }
    }

    #step5{
        background-image:url(../images/down/bg_y.png)
    }
    #step5 .content{
        position:relative;
        width:810px;
        height:800px;
        margin:0 auto
    }
    #step5 .step2bg{
        position:absolute;
        top: 190px;
        left:50%;
        width:907px;
        margin-left:-453px;
    }

    #step5 .dong1{
        position:absolute;
        top:25px;
        right:79px;
    }

    #step5 .dong2{
        position:absolute;
        top:71px;
        right:205px;

        animation-duration: 4s;
        -moz-animation-duration: 4s;
    }

    .yuan {
        -webkit-animation: yuan 4s ease;-moz-animation: yuan 4s ease; animation: yuan 4s ease;

    }

    @-webkit-keyframes yuan {
        0% {
            opacity:0;
            -webkit-transform:scale(0.3);
            -moz-transform:scale(0.3);
        }
        50%
        {
            opacity:1;
            -webkit-transform:scale(1.05);
            -moz-transform:scale(1.05);
        }
        80%
        {
            -webkit-transform:scale(0.8);
            -moz-transform:scale(0.8);
        }
        100%
        {
            -webkit-transform:scale(1);
            -moz-transform:scale(1);
        }
    }
    @-moz-keyframes yuan {
        0% {
            opacity:0;
            -webkit-transform:scale(0.3);
            -moz-transform:scale(0.3);
        }
        50%
        {
            opacity:1;
            -webkit-transform:scale(1.05);
            -moz-transform:scale(1.05);
        }
        80%
        {
            -webkit-transform:scale(0.8);
            -moz-transform:scale(0.8);
        }
        100%
        {
            -webkit-transform:scale(1);
            -moz-transform:scale(1);
        }
    }
    @keyframes yuan {
        0% {
            opacity:0;
            -webkit-transform:scale(0.3);
            -moz-transform:scale(0.3);
        }
        50%
        {
            opacity:1;
            -webkit-transform:scale(1.05);
            -moz-transform:scale(1.05);
        }
        80%
        {
            -webkit-transform:scale(0.8);
            -moz-transform:scale(0.8);
        }
        100%
        {
            -webkit-transform:scale(1);
            -moz-transform:scale(1);
        }
    }

    #step5 .dong4{
        position:absolute;
        top: 543px;
        left: 51%;
        margin-left:-325px;
    }
    #step5 #dong301{position:absolute;top:371px;left:126px;}
    #step5 #dong302{position:absolute;top:286px;left:324px;}
    #step5 #dong303{position:absolute;top:455px;left:310px;}
    #step5 #dong304{position:absolute;top:456px;left:504px;}
    #step5 #dong305{position:absolute;top:282px;left:511px;}
    #step5 #dong306{position:absolute;top:371px;right:85px;}

    #step5 #dong307{position:absolute;top:333px;left:220px;}
    #step5 #dong308{position:absolute;top:413px;left:216px;}
    #step5 #dong309{position:absolute;top: 493px;left:412px;}
    #step5 #dong310{position:absolute;top:414px;left:606px;}
    #step5 #dong311{position:absolute;top:245px;left:420px;}
    #step5 #dong312{position:absolute;top:327px;right:192px;}

    #moveball1{
        position:fixed;
        top:90px;
        left:5px;
        animation-name: rightMove, bottomMove;
        animation-duration: 14s;
        animation-iteration-count: infinite;
    }
    @keyframes rightMove{

        60% {
            animation-timing-function: linear;
            left: 55px;
        }
    }

    @keyframes bottomMove{
        60% {
            animation-timing-function: linear;
            top: 140px;
        }
    }

    #moveball2{
        position:fixed;
        bottom:90px;
        left:5px;
        animation-name: rightMove2, bottomMove2;
        animation-duration: 16s;
        animation-iteration-count: infinite;
    }

    @keyframes rightMove2{
        60% {
            animation-timing-function: linear;
            left: 55px;
        }
    }

    @keyframes bottomMove2{
        60% {
            animation-timing-function: linear;
            bottom: 140px;
        }
    }
    #moveball3{
        position:fixed;
        top:90px;
        right:5px;
        animation-name: rightMove3, bottomMove3;
        animation-duration: 16s;
        animation-iteration-count: infinite;
    }

    @keyframes rightMove3{
        60% {
            animation-timing-function: linear;
            right: 55px;
        }
    }

    @keyframes bottomMove3{
        60% {
            animation-timing-function: linear;
            top: 140px;
        }
    }

    #moveball4{
        position:fixed;
        bottom:90px;
        right:5px;
        animation-name: rightMove4, bottomMove4;
        animation-duration:15s;
        animation-iteration-count: infinite;
    }

    @keyframes rightMove4{
        60% {
            animation-timing-function: linear;
            right: 55px;
        }
    }

    @keyframes bottomMove4{
        60% {
            animation-timing-function: linear;
            bottom: 140px;
        }
    }


    #step1 .step1bg{
        left: 80px;
        position: absolute;
        top: 0;
    }
    #step1 .step1bg img{
        height: 548px;
    }

    #step1 .dong1 img{
        height: 227px;
    }

    #step1 .dong2 img{
        height: 357px;
    }

    #step1 .dong3 img{
        height: 95px;
    }
    #step1 .down img{
        height: 41px;
    }


    #step2 .dong4 img{
        height: 115px;
    }

    #step3 .dong4 img{
        height: 95px;
    }


    #step4 .dong5 img{
        height: 100px;
    }

    #step5 .dong4 img{
        height: 110px;
    }
}


.footer .left{font-size:12px;color:#B6B3B3;position:fixed;bottom:15px;left:50px;}
.footer .right{font-size:14px;float:right;position:fixed;bottom:15px;right:50px;}

@media screen and (min-height:900px){.ben3D{text-decoration: underline;color: #266ce1;font-size: 24px;position: absolute;top: 800px;left: 50%;margin-left: -298px;}}
@media screen and (max-height:900px){.ben3D{text-decoration: underline;color: #266ce1;font-size: 24px;position: absolute;top: 670px;left: 63%;margin-left: -298px;}}