@charset "utf-8";
/* CSS Document */
 
/**************进场***************/
/*由小到大*/ 
.FromSmallToLarge{
    -webkit-animation:FromSmallToLarge 1s .2s ease both;
    -moz-animation:FromSmallToLarge 1s .2s ease both;
    animation:FromSmallToLarge 1s .2s ease both;
}
/*由上到下*/
.FromUpToDown{
    -webkit-animation:FromUpToDown 1s .2s ease both;
    -moz-animation:FromUpToDown 1s .2s ease both;
    animation:FromUpToDown 1s .2s ease both;
}
/*由下到上*/
.FromDownToUp{
    -webkit-animation:FromDownToUp 1s .2s ease both;
    -moz-animation:FromDownToUp 1s .2s ease both;
    animation:FromDownToUp 1s .2s ease both;

}
/*由左到右进场*/
.FromLeftToRight{
    -webkit-animation:FromLeftToRight 1s .2s ease both;
    -moz-animation:FromLeftToRight 1s .2s ease both;
    animation:FromLeftToRight 1s .2s ease both;
}
/*由右到左进场*/
.FromRightToLeft{
    -webkit-animation:FromRightToLeft 1s .2s ease both;
    -moz-animation:FromRightToLeft 1s .2s ease both;
    animation:FromRightToLeft 1s .2s ease both;

}
 /*360度循环旋转*/
 .Infinite360Rotate{
     -webkit-animation:Infinite360Rotate 2500ms 200ms infinite linear both;
     -moz-animation:Infinite360Rotate 2500ms 200ms infinite linear both;
     animation:Infinite360Rotate 2500ms 200ms infinite linear both;
 }
  
 /*******************************************************Loading_Star*****************************************************************/
 #preloader {
            background: #FFFFFF;
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index:20000; 
            opacity:1;
        }
        .spinner-wrap {
            width: 100%;
            position: absolute;
            top: 50%;
        } 
        .spinner {
            height: 50px;
            width: 50px;
            margin: -50px auto 0;
            animation: spin 1s steps(12, end) infinite;
            -webkit-animation: spin 1s steps(12, end) infinite;
        } 
            .spinner:hover i {
                height: 6px;
            }

            .spinner i {
                height: 12px;
                width: 6px;
                margin-left: -3px;
                display: block;
                transition: height 1s;
                position: absolute;
                left: 50%;
                transform-origin: center 25px;
                -webkit-transform-origin: center 25px;
                background: #000;
                border-radius: 3px;
            }

                .spinner i:nth-child(1) {
                    opacity: 0.08;
                }

                .spinner i:nth-child(2) {
                    -webkit-transform: rotate(30deg);
                    transform: rotate(30deg);
                    opacity: 0.167;
                }

                .spinner i:nth-child(3) {
                    transform: rotate(60deg);
                    -webkit-transform: rotate(60deg);
                    opacity: 0.25;
                }

                .spinner i:nth-child(4) {
                    transform: rotate(90deg);
                    -webkit-transform: rotate(90deg);
                    opacity: 0.33;
                }

                .spinner i:nth-child(5) {
                    transform: rotate(120deg);
                    -webkit-transform: rotate(120deg);
                    opacity: 0.4167;
                }

                .spinner i:nth-child(6) {
                    transform: rotate(150deg);
                    opacity: 0.5;
                }

                .spinner i:nth-child(7) {
                    transform: rotate(180deg);
                    -webkit-transform: rotate(180deg);
                    opacity: 0.583;
                }

                .spinner i:nth-child(8) {
                    transform: rotate(210deg);
                    -webkit-transform: rotate(210deg);
                    opacity: 0.67;
                }

                .spinner i:nth-child(9) {
                    transform: rotate(240deg);
                    -webkit-transform: rotate(240deg);
                    opacity: 0.75;
                }

                .spinner i:nth-child(10) {
                    transform: rotate(270deg);
                    -webkit-transform: rotate(270deg);
                    opacity: 0.833;
                }

                .spinner i:nth-child(11) {
                    transform: rotate(300deg);
                    -webkit-transform: rotate(300deg);
                    opacity: 0.9167;
                }

                .spinner i:nth-child(12) {
                    transform: rotate(330deg);
                    -webkit-transform: rotate(330deg);
                    opacity: 1;
                }

        @keyframes spin {
            from {
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes spin 
        {
            from {
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }
/*******************************************************Loading_End*****************************************************************/




































/*************************进场**************************/
/******由小到大进场*********/
@-webkit-keyframes FromSmallToLarge{
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 FromSmallToLarge{
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)}
}
@keyframes FromSmallToLarge{
0%{opacity:0;
transform:scale(.3)}
50%{opacity:1;
transform:scale(1.05)}
70%{transform:scale(.9)}
100%{transform:scale(1)}
}


/******由上到下进场*********/
@-webkit-keyframes FromUpToDown{
0%{opacity:0;
-webkit-transform:translateY(-2000px)}
60%{opacity:1;
-webkit-transform:translateY(30px)}
80%{-webkit-transform:translateY(-10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes FromUpToDown{
0%{opacity:0;
-moz-transform:translateY(-2000px)}
60%{opacity:1;
-moz-transform:translateY(30px)}
80%{-moz-transform:translateY(-10px)}
100%{-moz-transform:translateY(0)}
}
@keyframes FromUpToDown{
0%{opacity:0;
transform:translateY(-2000px)}
60%{opacity:1;
transform:translateY(30px)}
80%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}


/******由下到上进场*********/
@-webkit-keyframes FromDownToUp{
0%{opacity:0;
-webkit-transform:translateY(2000px)}
60%{opacity:1;
-webkit-transform:translateY(-30px)}
80%{-webkit-transform:translateY(10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes FromDownToUp{
0%{opacity:0;
-moz-transform:translateY(2000px)}
60%{opacity:1;
-moz-transform:translateY(-30px)}
80%{-moz-transform:translateY(10px)}
100%{-moz-transform:translateY(0)}
}
@keyframes FromDownToUp{
0%{opacity:0;
transform:translateY(2000px)}
60%{opacity:1;
transform:translateY(-30px)}
80%{transform:translateY(10px)}
100%{transform:translateY(0)}
}


/******由左到右进场*********/
@-webkit-keyframes FromLeftToRight{
0%{opacity:0;
-webkit-transform:translateX(-2000px)}
60%{opacity:1;
-webkit-transform:translateX(30px)}
80%{-webkit-transform:translateX(-10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes FromLeftToRight{
0%{opacity:0;
-moz-transform:translateX(-2000px)}
60%{opacity:1;
-moz-transform:translateX(30px)}
80%{-moz-transform:translateX(-10px)}
100%{-moz-transform:translateX(0)}
}
@keyframes FromLeftToRight{
0%{opacity:0;
transform:translateX(-2000px)}
60%{opacity:1;
transform:translateX(30px)}
80%{transform:translateX(-10px)}
100%{transform:translateX(0)}
}



/******由右到左进场*********/
@-webkit-keyframes FromRightToLeft{
0%{opacity:0;
-webkit-transform:translateX(2000px)}
60%{opacity:1;
-webkit-transform:translateX(-30px)}
80%{-webkit-transform:translateX(10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes FromRightToLeft{
0%{opacity:0;
-moz-transform:translateX(2000px)}
60%{opacity:1;
-moz-transform:translateX(-30px)}
80%{-moz-transform:translateX(10px)}
100%{-moz-transform:translateX(0)}
}
@keyframes FromRightToLeft{
0%{opacity:0;
transform:translateX(2000px)}
60%{opacity:1;
transform:translateX(-30px)}
80%{transform:translateX(10px)}
100%{transform:translateX(0)}
}


/*旋转*/
@-webkit-keyframes Infinite360Rotate{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes Infinite360Rotate{
    0%{-moz-transform:rotate(0deg);}
    100%{-moz-transform:rotate(360deg);}
}
@keyframes Infinite360Rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}