/*=============================================================*/
/* 动画设计 */
/*=============================================================*/
.animate {
    opacity: 0;
    -webkit-animation-duration: 0.8s;
    -moz-animation-duration: 0.8s;
    -o-animation-duration: 0.8s;
    animation-duration: 0.8s;
    /* -webkit-animation-fill-mode: both; */
/*     -moz-animation-fill-mode: both; */
/*     -o-animation-fill-mode: both; */
    /* animation-fill-mode: both; */
}
/*=============================================================*/
/* fadeInUp */
/*=============================================================*/
 @-webkit-keyframes fadeInUp {
     0% {
         opacity: 0;
         -webkit-transform: translateY(50px);
    }
     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
    }
}
 @-moz-keyframes fadeInUp {
     0% {
         opacity: 0;
         -moz-transform: translateY(50px);
    }
     100% {
         opacity: 1;
         -moz-transform: translateY(0);
    }
}
 @-o-keyframes fadeInUp {
     0% {
         opacity: 0;
         -o-transform: translateY(50px);
    }
     100% {
         opacity: 1;
         -o-transform: translateY(0);
    }
}
 @keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(50px);
    }
     100% {
         opacity: 1;
         transform: translateY(0);
    }
}
 .animate.fadeInUp {
     opacity: 1;
     -webkit-animation-name: fadeInUp;
     -moz-animation-name: fadeInUp;
     -o-animation-name: fadeInUp;
     animation-name: fadeInUp;
}
/*===================================================================================*/
/* fadeInDown */
/*===================================================================================*/
 @-webkit-keyframes fadeInDown {
     0% {
         opacity: 0;
         -webkit-transform: translateY(-50px);
    }
     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
    }
}
 @-moz-keyframes fadeInDown {
     0% {
         opacity: 0;
         -moz-transform: translateY(-50px);
    }
     100% {
         opacity: 1;
         -moz-transform: translateY(0);
    }
}
 @-o-keyframes fadeInDown {
     0% {
         opacity: 0;
         -o-transform: translateY(-50px);
    }
     100% {
         opacity: 1;
         -o-transform: translateY(0);
    }
}
 @keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translateY(-50px);
    }
     100% {
         opacity: 1;
         transform: translateY(0);
    }
}
 .animate.fadeInDown {
     opacity: 1;
     -webkit-animation-name: fadeInDown;
     -moz-animation-name: fadeInDown;
     -o-animation-name: fadeInDown;
     animation-name: fadeInDown;
}
/*===================================================================================*/
/* fadeInLeft */
/*===================================================================================*/
 @-webkit-keyframes fadeInLeft {
     0% {
         opacity: 0;
         -webkit-transform: translateX(-100px);
    }
     100% {
         opacity: 1;
         -webkit-transform: translateX(0);
    }
}
 @-moz-keyframes fadeInLeft {
     0% {
         opacity: 0;
         -moz-transform: translateX(-100px);
    }
     100% {
         opacity: 1;
         -moz-transform: translateX(0);
    }
}
 @-o-keyframes fadeInLeft {
     0% {
         opacity: 0;
         -o-transform: translateX(-100px);
    }
     100% {
         opacity: 1;
         -o-transform: translateX(0);
    }
}
 @keyframes fadeInLeft {
     0% {
         opacity: 0;
         transform: translateX(-100px);
    }
     100% {
         opacity: 1;
         transform: translateX(0);
    }
}
 .animate.fadeInLeft {
     opacity: 1;
     -webkit-animation-name: fadeInLeft;
     -moz-animation-name: fadeInLeft;
     -o-animation-name: fadeInLeft;
     animation-name: fadeInLeft;
}
/*===================================================================================*/
/* fadeInRight */
/*===================================================================================*/
 @-webkit-keyframes fadeInRight {
     0% {
         opacity: 0;
         -webkit-transform: translateX(100px);
    }
     100% {
         opacity: 1;
         -webkit-transform: translateX(0);
    }
}
 @-moz-keyframes fadeInRight {
     0% {
         opacity: 0;
         -moz-transform: translateX(100px);
    }
     100% {
         opacity: 1;
         -moz-transform: translateX(0);
    }
}
 @-o-keyframes fadeInRight {
     0% {
         opacity: 0;
         -o-transform: translateX(100px);
    }
     100% {
         opacity: 1;
         -o-transform: translateX(0);
    }
}
 @keyframes fadeInRight {
     0% {
         opacity: 0;
         transform: translateX(100px);
    }
     100% {
         opacity: 1;
         transform: translateX(0);
    }
}
 .animate.fadeInRight {
     opacity: 1;
     -webkit-animation-name: fadeInRight;
     -moz-animation-name: fadeInRight;
     -o-animation-name: fadeInRight;
     animation-name: fadeInRight;
}
/*===================================================================================*/
/* bounceIn */
/*===================================================================================*/
 @-webkit-keyframes bounceIn {
     0% {
         opacity: 0;
         -webkit-transform: scale(.3);
    }
     50% {
         opacity: 1;
         -webkit-transform: scale(1.05);
    }
     70% {
         -webkit-transform: scale(.9);
    }
     100% {
         -webkit-transform: scale(1);
    }
}
 @-moz-keyframes bounceIn {
     0% {
         opacity: 0;
         -moz-transform: scale(.3);
    }
     50% {
         opacity: 1;
         -moz-transform: scale(1.05);
    }
     70% {
         -moz-transform: scale(.9);
    }
     100% {
         -moz-transform: scale(1);
    }
}
 @-o-keyframes bounceIn {
     0% {
         opacity: 0;
         -o-transform: scale(.3);
    }
     50% {
         opacity: 1;
         -o-transform: scale(1.05);
    }
     70% {
         -o-transform: scale(.9);
    }
     100% {
         -o-transform: scale(1);
    }
}
 @keyframes bounceIn {
     0% {
         opacity: 0;
         transform: scale(.3);
    }
     50% {
         opacity: 1;
         transform: scale(1.05);
    }
     70% {
         transform: scale(.9);
    }
     100% {
         transform: scale(1);
    }
}
 .animate.bounceIn {
     opacity: 1;
     -webkit-animation-name: bounceIn;
     -moz-animation-name: bounceIn;
     -o-animation-name: bounceIn;
     animation-name: bounceIn;
}
 @-webkit-keyframes SCALE {
     0% {
         transform: scale(1);
    }
     50% {
         transform: scale(1.1);
    }
     100% {
         transform: scale(1);
    }
}
 @-moz-keyframes SCALE {
     0% {
         transform: scale(1);
    }
     50% {
         transform: scale(1.1);
    }
     100% {
         transform: scale(1);
    }
}
 @-ms-keyframes SCALE {
     0% {
         transform: scale(1);
    }
     50% {
         transform: scale(1.1);
    }
     100% {
         transform: scale(1);
    }
}
 @keyframes SCALE {
     0% {
         transform: scale(1);
    }
     50% {
         transform: scale(1.1);
    }
     100% {
         transform: scale(1);
    }
}

/*===================================================================================*/
/*  bounceIn                                                                         */  
/*===================================================================================*/

    @-webkit-keyframes bounceIn {
        0% {
            opacity: 0;
            -webkit-transform: scale(.3);
        }

        50% {
            opacity: 1;
            -webkit-transform: scale(1.05);
        }

        70% {
            -webkit-transform: scale(.9);
        }

        100% {
            -webkit-transform: scale(1);
        }
    }

    @-moz-keyframes bounceIn {
        0% {
            opacity: 0;
            -moz-transform: scale(.3);
        }

        50% {
            opacity: 1;
            -moz-transform: scale(1.05);
        }

        70% {
            -moz-transform: scale(.9);
        }

        100% {
            -moz-transform: scale(1);
        }
    }

    @-o-keyframes bounceIn {
        0% {
            opacity: 0;
            -o-transform: scale(.3);
        }

        50% {
            opacity: 1;
            -o-transform: scale(1.05);
        }

        70% {
            -o-transform: scale(.9);
        }

        100% {
            -o-transform: scale(1);
        }
    }

    @keyframes bounceIn {
        0% {
            opacity: 0;
            transform: scale(.3);
        }

        50% {
            opacity: 1;
            transform: scale(1.05);
        }

        70% {
            transform: scale(.9);
        }

        100% {
            transform: scale(1);
        }
    }

    .animate.bounceIn {
        opacity: 1;

        -webkit-animation-name: bounceIn;
           -moz-animation-name: bounceIn;
             -o-animation-name: bounceIn;
                animation-name: bounceIn;
    }