@keyframes index-1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes index-1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes title {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px) scale(.9);
        transform: translateY(40px) scale(.9);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}

@-webkit-keyframes title {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px) scale(.9);
        transform: translateY(40px) scale(.9);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}

@keyframes show1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes show1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes left_1 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes left_1 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}


@keyframes g_left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes g_left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes g_right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes g_right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes g_up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes g_up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes g_bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes g_bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes radius {
    0%   {opacity: 0;	transform:rotateY(0deg);-webkit-transform:rotateY(0deg);}
    100% {opacity: 1;	transform:rotateY(360deg);-webkit-transform:rotateY(360deg);}
}

@-webkit-keyframes radius {
    0%   {opacity: 0;	transform:rotateY(0deg);-webkit-transform:rotateY(0deg);}
    100% {opacity: 1;	transform:rotateY(360deg);-webkit-transform:rotateY(360deg);}
}
@keyframes xuanzhuan {
    0%   {opacity: 0;	transform:rotate(20deg);-webkit-transform:rotate(20deg);}
    100% {opacity: 1;	transform:rotate(0deg);-webkit-transform:rotate(0deg);}
}

@-webkit-keyframes xuanzhuan {
    0%   {opacity: 0;	transform:rotate(20deg);-webkit-transform:rotate(20deg);}
    100% {opacity: 1;	transform:rotate(0deg);-webkit-transform:rotate(0deg);}
}

@keyframes up_bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    65%{
        opacity: .65;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes up_bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    65%{
        opacity: .75;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(600px) rotateX(90deg);
        -ms-transform: perspective(600px) rotateX(90deg);
        transform: perspective(600px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(600px) rotateX(-10deg);
        -ms-transform: perspective(600px) rotateX(-10deg);
        transform: perspective(600px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(600px) rotateX(10deg);
        -ms-transform: perspective(600px) rotateX(10deg);
        transform: perspective(600px) rotateX(10deg)
    }
    100% {
        -webkit-transform: perspective(600px) rotateX(0deg);
        -ms-transform: perspective(600px) rotateX(0deg);
        transform: perspective(600px) rotateX(0deg);
        opacity: 1
    }
}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(600px) rotateX(90deg);
        transform: perspective(600px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(600px) rotateX(-10deg);
        transform: perspective(600px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(600px) rotateX(10deg);
        transform: perspective(600px) rotateX(10deg)
    }
    100% {
        -webkit-transform: perspective(600px) rotateX(0deg);
        transform: perspective(600px) rotateX(0deg);
        opacity: 1
    }
}

@keyframes flipInX2 {
    0% {
        -webkit-transform: perspective(1500px) rotateX(90deg);
        -ms-transform: perspective(1500px) rotateX(90deg);
        transform: perspective(1500px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(1500px) rotateX(-10deg);
        -ms-transform: perspective(1500px) rotateX(-10deg);
        transform: perspective(1500px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(1500px) rotateX(10deg);
        -ms-transform: perspective(1500px) rotateX(10deg);
        transform: perspective(1500px) rotateX(10deg)
    }
    100% {
        -webkit-transform: perspective(1500px) rotateX(0deg);
        -ms-transform: perspective(1500px) rotateX(0deg);
        transform: perspective(1500px) rotateX(0deg);
        opacity: 1
    }
}
@-webkit-keyframes flipInX2 {
    0% {
        -webkit-transform: perspective(600px) rotateX(90deg);
        transform: perspective(600px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(600px) rotateX(-10deg);
        transform: perspective(600px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(600px) rotateX(10deg);
        transform: perspective(600px) rotateX(10deg)
    }
    100% {
        -webkit-transform: perspective(600px) rotateX(0deg);
        transform: perspective(600px) rotateX(0deg);
        opacity: 1
    }
}
/**������ end****/

/**������������ begin**/
.flipInX {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}
.flipInX2 {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX2;
    animation-name: flipInX2;
}
.title {
    -webkit-animation-name: title;
    animation-name: title;
}
.g_up {
    -webkit-animation-name: g_up;
    animation-name: g_up;
}
.g_right {
    -webkit-animation-name: g_right;
    animation-name: g_right;
}
.g_bottom {
    -webkit-animation-name: g_bottom;
    animation-name: g_bottom;
}
.g_left {
    -webkit-animation-name: g_left;
    animation-name: g_left;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
}
/**������������ end****/

/**����ʱ����� beign**/
.animate {
    opacity: 0;
}
.slow {
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.mild {
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.fast {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/**************************************/

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px
    }
}

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

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

@-webkit-keyframes mk_fade {
    0% {
        opacity: .1
    }
    100% {
        opacity: 1
    }
}

@keyframes mk_fade {
    0% {
        opacity: .1
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes mk_left_to_right {
    0% {
        -webkit-transform: translate(-30px, 0);
        transform: translate(-30px, 0);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}

@keyframes mk_left_to_right {
    0% {
        -webkit-transform: translate(-30px, 0);
        transform: translate(-30px, 0);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}

@-webkit-keyframes mk_right_to_left {
    0% {
        -webkit-transform: translate(30px, 0);
        transform: translate(30px, 0);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}

@keyframes mk_right_to_left {
    0% {
        -webkit-transform: translate(30px, 0);
        transform: translate(30px, 0);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}

@-webkit-keyframes mk_bottom_to_top {
    0% {
        -webkit-transform: translate(0, 50px);
        transform: translate(0, 50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}

@keyframes mk_bottom_to_top {
    0% {
        -webkit-transform: translate(0, 50px);
        transform: translate(0, 50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}

@-webkit-keyframes mk_top_to_bottom {
    0% {
        -webkit-transform: translate(0, -50px);
        transform: translate(0, -50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}

@keyframes mk_top_to_bottom {
    0% {
        -webkit-transform: translate(0, -50px);
        transform: translate(0, -50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1
    }
}

@-webkit-keyframes mk_bottom_to_top_scale {
    0% {
        -webkit-transform: translate(0, 50px) scale(.8);
        transform: translate(0, 50px) scale(.8);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
        opacity: 1
    }
}

@keyframes mk_bottom_to_top_scale {
    0% {
        -webkit-transform: translate(0, 50px) scale(.8);
        transform: translate(0, 50px) scale(.8);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
        opacity: 1
    }
}

@-webkit-keyframes mk_scale_blur {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-filter: blur(50);
        filter: blur(50);
        opacity: 0
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

@keyframes mk_scale_blur {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-filter: blur(50);
        filter: blur(50);
        opacity: 0
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

.cssanimations .anim_emt {
    visibility: hidden
}

.anim_emt.start-animation.scale_up {
    -webkit-animation: mk_scale .8s 1 cubic-bezier(.445, .05, .55, .95) both;
    animation: mk_scale .8s 1 cubic-bezier(.445, .05, .55, .95) both;
    visibility: visible
}

.anim_emt.start-animation.fade_in {
    -webkit-animation: mk_fade 1.2s 1 cubic-bezier(.445, .05, .55, .95) both;
    animation: mk_fade 1.2s 1 cubic-bezier(.445, .05, .55, .95) both;
    visibility: visible
}

.anim_emt.start-animation.r_to_l {
    -webkit-animation: mk_right_to_left 1.2s 1 cubic-bezier(.77, 0, .175, 1) both;
    animation: mk_right_to_left 1.2s 1 cubic-bezier(.77, 0, .175, 1) both;
    visibility: visible
}

.anim_emt.start-animation.l_to_r {
    -webkit-animation: mk_left_to_right 1.2s 1 cubic-bezier(.77, 0, .175, 1) both;
    animation: mk_left_to_right 1.2s 1 cubic-bezier(.77, 0, .175, 1) both;
    visibility: visible
}

.anim_emt.start-animation.t_to_b {
    -webkit-animation: mk_top_to_bottom 1.2s 1 cubic-bezier(.77, 0, .175, 1) both;
    animation: mk_top_to_bottom 1.2s 1 cubic-bezier(.77, 0, .175, 1) both;
    visibility: visible
}

.anim_emt.start-animation.b_to_t {
    -webkit-animation: mk_bottom_to_top 1.2s 1 cubic-bezier(.77, 0, .175, 1) both;
    animation: mk_bottom_to_top 1.2s 1 cubic-bezier(.77, 0, .175, 1) both;
    visibility: visible
}

.anim_emt.start-animation.b_to_t_scale {
    -webkit-animation: mk_bottom_to_top_scale 1.2s 1 cubic-bezier(.77, 0, .175, 1) both;
    animation: mk_bottom_to_top_scale 1.2s 1 cubic-bezier(.77, 0, .175, 1) both;
    visibility: visible
}

.anim_emt.start-animation.scale_blur {
    -webkit-animation: mk_scale_blur 2s 1 cubic-bezier(.77, 0, .175, 1) both;
    animation: mk_scale_blur 2s 1 cubic-bezier(.77, 0, .175, 1) both;
    visibility: visible
}
.m-b-md.anim_emt {
    visibility: hidden;
}