@charset "utf-8";/*动画*/
.animate-element { opacity: 0; -webkit-perspective:1000;-ms-perspective:1000; }
.no-transform .animate-element { opacity: 1; }
.animate-element.in-viewport.fade-in { -webkit-animation: fade .7s 1 cubic-bezier(0.445,.05,.55,.95); -moz-animation: fade .7s 1 cubic-bezier(0.445,.05,.55,.95); -o-animation: fade .7s 1 cubic-bezier(0.445,.05,.55,.95); animation: fade .7s 1 cubic-bezier(0.445,.05,.55,.95); opacity: 1; }
.animate-element.in-viewport.scale-up { -webkit-animation: scale .7s 1 cubic-bezier(0.445,.05,.55,.95); -moz-animation: scale .7s 1 cubic-bezier(0.445,.05,.55,.95); -o-animation: scale .7s 1 cubic-bezier(0.445,.05,.55,.95); animation: scale .7s 1 cubic-bezier(0.445,.05,.55,.95); opacity: 1; }
.animate-element.in-viewport.scale-down {   animation: scale2 .7s 1 cubic-bezier(0.445,.05,.55,.95); opacity: 1; }
.animate-element.in-viewport.right-to-left { -webkit-animation: right_to_left .6s 1 cubic-bezier(0.77,0,.175,1); -moz-animation: right_to_left .6s 1 cubic-bezier(0.77,0,.175,1); -o-animation: right_to_left .6s 1 cubic-bezier(0.77,0,.175,1); animation: right_to_left .6s 1 cubic-bezier(0.77,0,.175,1); opacity: 1; }
.animate-element.in-viewport.left-to-right { -webkit-animation: left_to_right .6s 1 cubic-bezier(0.77,0,.175,1); -moz-animation: left_to_right .6s 1 cubic-bezier(0.77,0,.175,1); -o-animation: left_to_right .6s 1 cubic-bezier(0.77,0,.175,1); animation: left_to_right .6s 1 cubic-bezier(0.77,0,.175,1); opacity: 1; }
.animate-element.in-viewport.top-to-bottom { -webkit-animation: top_to_bottom .6s 1 cubic-bezier(0.77,0,.175,1); -moz-animation: top_to_bottom .6s 1 cubic-bezier(0.77,0,.175,1); -o-animation: top_to_bottom .6s 1 cubic-bezier(0.77,0,.175,1); animation: top_to_bottom .6s 1 cubic-bezier(0.77,0,.175,1); opacity: 1; }
.animate-element.in-viewport.bottom-to-top { -webkit-animation: bottom_to_top .6s 1 cubic-bezier(0.77,0,.175,1); -moz-animation: bottom_to_top .6s 1 cubic-bezier(0.77,0,.175,1); -o-animation: bottom_to_top .6s 1 cubic-bezier(0.77,0,.175,1); animation: bottom_to_top .6s 1 cubic-bezier(0.77,0,.175,1); opacity: 1; }
.animate-element.in-viewport.flip-x { -webkit-animation: flip_x .6s 1 cubic-bezier(0.77,0,.175,1); -moz-animation: flip_x .6s 1 cubic-bezier(0.77,0,.175,1); -o-animation: flip_x .6s 1 cubic-bezier(0.77,0,.175,1); animation: flip_x .6s 1 cubic-bezier(0.77,0,.175,1); opacity: 1; }
.animate-element.in-viewport.flip-y { -webkit-animation: flip_y .6s 1 cubic-bezier(0.77,0,.175,1); -moz-animation: flip_y .6s 1 cubic-bezier(0.77,0,.175,1); -o-animation: flip_y .6s 1 cubic-bezier(0.77,0,.175,1); animation: flip_y .6s 1 cubic-bezier(0.77,0,.175,1); opacity: 1; }


@-webkit-keyframes flip_x {
    0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; }
    100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@-moz-keyframes flip_x {
    0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; }
    100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@-o-keyframes flip_x {
    0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; }
    100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@keyframes flip_x {
    0% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
    100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
@-webkit-keyframes flip_y {
    0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; }
    100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; }
}
@-moz-keyframes flip_y {
    0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; }
    100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; }
}
@-o-keyframes flip_y {
    0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; }
    100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; }
}
@keyframes flip_y {
    0% { transform: perspective(400px) rotateY(90deg); opacity: 0; }
    100% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
}
@-webkit-keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-o-keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-webkit-keyframes scale {
    0% { -webkit-transform: scale(0.3); opacity: 0; }
    100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes scale {
    0% { -moz-transform: scale(0.3); opacity: 0; }
    100% { -moz-transform: scale(1); opacity: 1; }
}
@-o-keyframes scale {
    0% { -o-transform: scale(0.3); opacity: 0; }
    100% { -o-transform: scale(1); opacity: 1; }
}
@keyframes scale {
    0% { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@-webkit-keyframes left_to_right {
    0% { -webkit-transform: translate(-15%,0); opacity: 0; }
    100% { -webkit-transform: translate(0,0); opacity: 1; }
}
@-moz-keyframes left_to_right {
    0% { -moz-transform: translate(-15%,0); opacity: 0; }
    100% { -moz-transform: translate(0,0); opacity: 1; }
}
@-o-keyframes left_to_right {
    0% { -o-transform: translate(-15%,0); opacity: 0; }
    100% { -o-transform: translate(0,0); opacity: 1; }
}
@keyframes left_to_right {
    0% { transform: translate(-15%,0); opacity: 0; }
    100% { transform: translate(0,0); opacity: 1; }
}
@-webkit-keyframes right_to_left {
    0% { -webkit-transform: translate(15%,0); opacity: 0; }
    100% { -webkit-transform: translate(0,0); opacity: 1; }
}
@-moz-keyframes right_to_left {
    0% { -moz-transform: translate(15%,0); opacity: 0; }
    100% { -moz-transform: translate(0,0); opacity: 1; }
}
@-o-keyframes right_to_left {
    0% { -o-transform: translate(15%,0); opacity: 0; }
    100% { -o-transform: translate(0,0); opacity: 1; }
}
@keyframes right_to_left {
    0% { transform: translate(15%,0); opacity: 0; }
    100% { transform: translate(0,0); opacity: 1; }
}
@-webkit-keyframes bottom_to_top {
    0% { -webkit-transform: translate(0,60%); opacity: 0; }
    100% { -webkit-transform: translate(0,0); opacity: 1; }
}
@-moz-keyframes bottom_to_top {
    0% { -moz-transform: translate(0,60%); opacity: 0; }
    100% { -moz-transform: translate(0,0); opacity: 1; }
}
@-o-keyframes bottom_to_top {
    0% { -o-transform: translate(0,60%); opacity: 0; }
    100% { -o-transform: translate(0,0); opacity: 1; }
}
@keyframes bottom_to_top {
    0% { transform: translate(0,60%); opacity: 0; }
    100% { transform: translate(0,0); opacity: 1; }
}
@-webkit-keyframes top_to_bottom {
    0% { -webkit-transform: translate(0,-20%); opacity: 0; }
    100% { -webkit-transform: translate(0,0); opacity: 1; }
}
@-moz-keyframes top_to_bottom {
    0% { -moz-transform: translate(0,-20%); opacity: 0; }
    100% { -moz-transform: translate(0,0); opacity: 1; }
}
@-o-keyframes top_to_bottom {
    0% { -o-transform: translate(0,-20%); opacity: 0; }
    100% { -o-transform: translate(0,0); opacity: 1; }
}
@keyframes top_to_bottom {
    0% { transform: translate(0,-20%); opacity: 0; }
    100% { transform: translate(0,0); opacity: 1; }
}

@keyframes fade1 {
    0% { opacity: 0; }
    5% { opacity: 0.1; }
    10% { opacity: 0.2; }
    15% { opacity: 0.3; }
    20% { opacity: 0.4; }
    25% { opacity: 0.5; }
    30% { opacity: 0.6; }
    35% { opacity: 0.7; }
    40% { opacity: 0.8; }
    45% { opacity: 0.9; }
    50% { opacity: 1; }
    55% { opacity: 0.9; }
    60% { opacity: 0.8; }
    65% { opacity: 0.7; }
    70% { opacity: 0.6; }
    75% { opacity: 0.5; }
    80% { opacity: 0.4; }
    85% { opacity: 0.3; }
    90% { opacity: 0.2; }
    95% { opacity: 0.1; }
    100% { opacity: 0; }
}
@keyframes scale1 {
    0% { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes scale2{
    0% { transform: scale(1.5); opacity: 0; }
    80% { transform: scale(0.3); opacity: 0.5;}
    100% { transform: scale(1); opacity: 1; }
}
@keyframes scale3 {
    0% { transform: scale(0.3); opacity: .0; }
    80% { transform: scale(1.5); opacity: 0.5;}
    100% { transform: scale(1); opacity: 1; }
}
@keyframes scale3a {
    0% { transform: scale(0.3); opacity: .0; }
    80% { transform: scale(1.3); opacity: 1;}
    100% { transform: scale(1); opacity: 1; }
}
@keyframes scale_f {
    0% {transform: scale(0); opacity: .0; }
    5% {transform: scale(0.1); opacity: 0.1; }
    10% {transform: scale(0.2); opacity: 0.2; }
    15% {transform: scale(0.3); opacity: 0.3; }
    20% {transform: scale(0.4); opacity: 0.4; }
    25% {transform: scale(0.5); opacity: 0.5; }
    30% {transform: scale(0.6); opacity: 0.6; }
    35% {transform: scale(0.7); opacity: 0.7; }
    40% {transform: scale(0.8); opacity: 0.8; }
    45% {transform: scale(0.9); opacity: 0.9; }
    50% {transform: scale(1); opacity: 1; }
    55% {transform: scale(1.1); opacity: 0.9; }
    60% {transform: scale(1.2); opacity: 0.8; }
    65% {transform: scale(1.3); opacity: 0.7; }
    70% {transform: scale(1.4); opacity: 0.6; }
    75% {transform: scale(1.4); opacity: 0.5; }
    80% {transform: scale(1.4); opacity: 0.4; }
    85% {transform: scale(1.4); opacity: 0.3; }
    90% {transform: scale(1.4); opacity: 0.2; }
    95% {transform: scale(1.4); opacity: 0.1; }
    100% {transform: scale(1.5); opacity: 0; }
}
@keyframes dese {
    0% {transform:rotate(10deg) translate(0,-1%); }
    50% {transform:rotate(-12deg) translate(0,2%);}
    100% {transform:rotate(10deg) translate(0,-1%);}
}
@keyframes swing {
    0% {transform:rotate(0deg);opacity: 1;}
    40% {transform:rotate(-10deg);}
    60% {transform:rotate(5deg);}
    80% {transform:rotate(-5deg);}
    100% {transform:rotate(0);opacity: 1;}
}
@keyframes swing1 {
    0% { transform: rotate(0);opacity: 1;}
    33% { transform: rotate(-5deg);}
    66% { transform: rotate(5deg);}
    100% { transform: rotate(0);opacity: 1;}
}
@keyframes bounce {
    0%,20%,50%,80%,100% {transform:translateY(0);opacity: 0;}
    60% {transform:translateY(-30px);opacity: 0.5;}
    100% {transform:translateY(-15px);opacity: 1;}
}
@keyframes bouncein {
    0% {opacity:0;transform:scale(0.3);}
    40% {opacity:1;transform:scale(1.05);}
    80% {transform:scale(0.9);}
    100% {transform:scale(1);}
}
@keyframes bouncein1 {
    0% {opacity:0;transform:scale(.3);transform:scale(.3)}
    50% {opacity:1;transform:scale(1.05);transform:scale(1.05)}
    70% {transform:scale(.9);transform:scale(.9)}
    100% {opacity:1;transform:scale(1);transform:scale(1)}
}
@keyframes rotateinRT {
    0% {transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
    100% {transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
@keyframes flipinY {
    0% {transform:perspective(400px) rotateY(90deg);opacity:0;}
    40% {transform:perspective(400px) rotateY(-10deg);}
    80% {transform:perspective(400px) rotateY(10deg);}
    100% {transform:perspective(400px) rotateY(0);opacity:1;}
}
@keyframes flipinY1 {
    0% {transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}
    40% {transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}
    70% {transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}
    100% {transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}
}
@keyframes flipoutY {
    100% {transform:perspective(400px) rotateY(0);opacity:1;}
    0% {transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@keyframes bounceinT {
    0% {opacity:0;transform:translateY(-100px);}
    30% {opacity:1;transform:translateY(30px);}
    60% {transform:translateY(-10px);}
    100% {transform:translateY(0);}
}
@keyframes bounceinB {
    0% {opacity:0;transform:translateY(100px);}
    30% {opacity:1;transform:translateY(-30px);}
    60% {transform:translateY(10px);}
    100% {transform:translateY(0);}
}
@keyframes bounceinB1{
    0% {opacity:0;transform:translateY(100px);}
    30% {opacity:1;transform:translateY(0px);}
    60% {transform:translateY(10px);}
    100% {transform:translateY(0);}
}
@keyframes bounceinL {
    0% {opacity:0;transform:translateX(-100px);}
    30% {opacity:1;transform:translateX(30px);}
    60% {transform:translateX(-10px);}
    100% {transform:translateX(0);}
}
@keyframes bounceinR {
    0% {opacity:0;transform:translateX(100px);}
    30% {opacity:1;transform:translateX(-30px);}
    60% {transform:translateX(10px);}
    100% {transform:translateX(0);}
}
@keyframes bounceoutT {
    0% {transform:translateY(0);}
    50% {opacity:1;transform:translateY(20px);}
    100% {opacity:0;transform:translateY(-100px);}
}
@keyframes flipinX {
    0% {transform:perspective(400px) rotateX(90deg);opacity:0;}
    30% {transform:perspective(400px) rotateX(-10deg);}
    70% {transform:perspective(400px) rotateX(10deg);}
    100% {transform:perspective(400px) rotateX(0);opacity:1;}
}
@keyframes flipinX1 {
    0% {transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}
    40% {transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}
    70% {transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}
    100% {transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}
}
@keyframes ring {
    0% {transform:scale(1);opacity: 0;}
    10%,20% {transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90% {transform:scale(1.1) rotate(3deg);}
    40%,60%,80% {transform:scale(1.1) rotate(-3deg);}
    100% {transform:scale(1) rotate(0);opacity: 1;}
}
@keyframes ring1 {
    0% {transform:scale(1);opacity: 0;}
    10%,20% {transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90% {transform:scale(1.3) rotate(3deg);}
    40%,60%,80% {transform:scale(1.3) rotate(-3deg);}
    100% {transform:scale(1) rotate(0);opacity: 1;}
}
@keyframes wobble {
    0% {transform:translateX(0);opacity: 0;}
    20% {transform:translateX(-100px) rotate(-5deg);}
    40% {transform:translateX(80px) rotate(3deg);}
    60% {transform:translateX(-65px) rotate(-3deg);}
    70% {transform:translateX(40px) rotate(2deg);}
    90% {transform:translateX(-20px) rotate(-1deg);}
    100% {transform:translateX(0);opacity: 1;}
}
@keyframes rotateineftB {
    0% {transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
    100% {transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
@keyframes arrow {
    0%,30% {opacity: 0;transform: translate(0,10px);}
    60% {opacity: 1;transform: translate(0,0);}
    100% {opacity: 0;transform: translate(0,-8px);}
}
@keyframes floatA {
    0% {transform: translate(0, 0);}
    25% {transform: translate(10px, 10px);}
    50% {transform: translate(20px, -10px);}
    75% {transform: translate(-10px, -10px);}
    100% {transform: translate(0, 0);}
}
@keyframes floatA1 {
    0% {transform: translate(0, 0);}
    50% {transform: translate(0, 30px);}
    100% { transform: translate(0, 0);}
}
@keyframes floatA2 {
    0% {transform: translate(0, 0);}
    50% {transform: translate(0, -30px);}
    100% {transform: translate(0, 0);}
}
@keyframes floatB {
    0% {transform: translate(0, 0);}
    25% {transform: translate(-10px, -10px);}
    50% {transform: translate(-20px, 10px);}
    75% {transform: translate(10px, 10px);}
    100% {transform: translate(0, 0);}
}
@keyframes flash {
    0%,50%,100% {opacity:1;}
    30%,75% {opacity:0;}
}
@keyframes flash1 {
    0% {opacity: 0;}
    50% {opacity: 1;}
    70% {opacity: 1;}
    100% { opacity: 0;}
}
@keyframes bounceinT {
    0% {opacity:0;transform:translateY(-100px);}
    30% {opacity:1;transform:translateY(30px);}
    60% {transform:translateY(-10px);}
    100% {transform:translateY(0);}
}
@keyframes bounceinT1 {
    0% {opacity:0;transform:translateY(-100px);}
    30% {opacity:1;transform:translateY(0px);}
    60% {transform:translateY(-10px);}
    100% {transform:translateY(0);}
}
@keyframes steam {
    0% { top: 285px; transform: scale(0.7); opacity: 0;}
    50% { top: 235px; transform: scale(0.7); opacity: 1;}
    100% {top: 235px; transform: scale(1); opacity: 0;}
}
@keyframes rubberBand {
    0% {transform:scale(1);transform:scale(1)}
    30% {transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}
    40% {transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}
    60% {transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}
    100% {transform:scale(1);transform:scale(1)}
}
@keyframes shake {
    0%,100% {transform:translateX(0);transform:translateX(0)}
    10%,30%,50%,70%,90% {transform:translateX(-10px);transform:translateX(-10px)}
    20%,40%,60%,80% {transform:translateX(10px);transform:translateX(10px)}
}
@keyframes lightSpeedIn {
    0% {transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}
    60% {transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}
    80% {transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}
    100% {transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}
}
@keyframes lightSpeedOut {
    0% {transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}
    100% {transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}
}
@keyframes rotateIn {
    0% {transform-origin:center center;transform:rotate(-200deg);opacity:0}
    100% {transform-origin:center center;transform:rotate(0);opacity:1}
}
@keyframes rotateInDownLeft {
    0% {transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
    100% {transform-origin:left bottom;transform:rotate(0);opacity:1}
}
@keyframes rotateInDownRight {
    0% {transform-origin:right bottom;transform:rotate(90deg);opacity:0}
    100% {transform-origin:right bottom;transform:rotate(0);opacity:1}
}
@keyframes rotateInUpLeft {
    0% {transform-origin:left bottom;transform:rotate(90deg);opacity:0}
    100% {transform-origin:left bottom;transform:rotate(0);opacity:1}
}
@keyframes rotateInUpRight {
    0% {transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
    100% {transform-origin:right bottom;transform:rotate(0);opacity:1}
}
@keyframes pulse {
    0% {transform: scale(0.9);opacity: 0.7;}
    50% {transform: scale(1);opacity: 1;}   
    100% {transform: scale(0.9);opacity: 0.7;}           
}
@keyframes floating {
    0% {transform: translateY(0%);}
    50% {transform: translateY(10%);}   
    100% {transform: translateY(0%);}           
}
@keyframes tossing {
    0% {transform: rotate(-4deg);}
    50% {transform: rotate(4deg);}
    100% {transform: rotate(-4deg);}                       
}
@keyframes pullUp {
    0% {transform-origin: 50% 100%;transform: scaleY(0);}
    40% {transform-origin: 50% 100%;transform: scaleY(1.02);}
    60% {transform-origin: 50% 100%;transform: scaleY(0.98);}
    80% {transform-origin: 50% 100%;transform: scaleY(1.01);}
    100% {transform-origin: 50% 100%;transform: scaleY(0.98);}
    80% {transform-origin: 50% 0%;transform: scaleY(1.01);}
    100% {transform-origin: 50% 0%;transform: scaleY(1);}                                         
}
@keyframes pullDown {
    0% {transform-origin: 50% 0%;transform: scaleY(0);}
    40% {transform-origin: 50% 0%;transform: scaleY(1.02);}
    60% {transform-origin: 50% 0%;transform: scaleY(0.98);}
    80% {transform-origin: 50% 0%;transform: scaleY(1.01);}
    100% {transform-origin: 50% 0%;transform: scaleY(0.98);}               
    80% {transform-origin: 50% 0%;transform: scaleY(1.01);}
    100% {transform-origin: 50% 0%;transform: scaleY(1);}                           
}
@keyframes stretchRight {
    0% {transform-origin: 0% 0%;transform: scaleX(0);}
    40% {transform-origin: 0% 0%;transform: scaleX(1.02);}
    60% {transform-origin: 0% 0%;transform: scaleX(0.98);}
    80% {transform-origin: 0% 0%;transform: scaleX(1.01);}
    100% {transform-origin: 0% 0%;transform: scaleX(0.98);}               
    80% {transform-origin: 0% 0%;transform: scaleX(1.01);}
    100% {transform-origin: 0% 0%;transform: scaleX(1);}                           
}
@keyframes stretchLeft {
    0% {transform-origin: 100% 0%;transform: scaleX(0);}
    40% {transform-origin: 100% 0%;transform: scaleX(1.02);}
    60% {transform-origin: 100% 0%;transform: scaleX(0.98);}
    80% {transform-origin: 100% 0%;transform: scaleX(1.01);}
    100% {transform-origin: 100% 0%;transform: scaleX(0.98);}               
    80% {transform-origin: 100% 0%;transform: scaleX(1.01);}
    100% {transform-origin: 100% 0%;transform: scaleX(1);}                           
}
/*magic*/
@keyframes twisterInUp {
  0% {opacity: 0;transform-origin: 100% 0;transform: scale(0, 0) rotate(360deg) translateY(100%);}
  30% {transform-origin: 100% 0;transform: scale(0, 0) rotate(360deg) translateY(100%);}
  100% {opacity: 1;transform-origin: 0 0;transform: scale(1, 1) rotate(0deg) translateY(0);}
}
@keyframes twisterInDown {
  0% {opacity: 0;transform-origin: 0 100%;transform: scale(0, 0) rotate(360deg) translateY(-100%);}
  30% {transform-origin: 0 100%;transform: scale(0, 0) rotate(360deg) translateY(-100%);}
  100% {opacity: 1;transform-origin: 100% 100%;transform: scale(1, 1) rotate(0deg) translateY(0%);}
}
@keyframes swap {
  0% {opacity: 0;transform-origin: 0 100%;transform: scale(0, 0) translate(-700px, 0px);}
  100% {opacity: 1;transform-origin: 100% 100%;transform: scale(1, 1) translate(0px, 0px);}
}
@keyframes puffIn {
  0% {opacity: 0;transform-origin: 50% 50%;transform: scale(2,2);filter: blur(2px);}
  100% {opacity: 1;transform-origin: 50% 50%;transform: scale(1,1);filter: blur(0px);}
}
@keyframes vanishIn {
  0% {opacity: 0;transform-origin: 50% 50%;transform: scale(2, 2);filter: blur(90px);}
  100% {opacity: 1;transform-origin: 50% 50%;transform: scale(1, 1);filter: blur(0px);}
}
@keyframes perspectiveLeft {
  0% {backface-visibility: visible !important;transform-origin: 0 0;transform: perspective(800px) rotateY(0deg);}
  100% {backface-visibility: visible !important;transform-origin: 0 0;transform: perspective(800px) rotateY(-180deg);}
}
@keyframes perspectiveLeftRetourn {
  0% {backface-visibility: visible !important;transform-origin: 0 0;transform: perspective(800px) rotateY(-180deg);}
  100% {backface-visibility: visible !important;transform-origin: 0 0;transform: perspective(800px) rotateY(0deg);}
}
@keyframes perspectiveUp {
  0% {backface-visibility: visible !important;transform-origin: 0 0;transform: perspective(800px) rotateX(0deg);}
  100% {backface-visibility: visible !important;transform-origin: 0 0;transform: perspective(800px) rotateX(180deg);}
}
@keyframes perspectiveUpRetourn {
  0% {transform-origin: 0 0;transform: perspective(800px) rotateX(180deg);}
  100% {transform-origin: 0 0;transform: perspective(800px) rotateX(0deg);}
}
@keyframes swashIn {
  0% {opacity: 0;transform-origin: 50% 50%;transform: scale(0, 0);}
  90% {opacity: 1;transform-origin: 50% 50%;transform: scale(0.9, 0.9);}
  100% {opacity: 1;transform-origin: 50% 50%;transform: scale(1, 1);}
}
@keyframes foolishIn {
  0% {opacity: 0;transform-origin: 50% 50%;transform: scale(0, 0) rotate(360deg);}
  20% {opacity: 1;transform-origin: 0% 100%;transform: scale(0.5, 0.5) rotate(0deg);}
  40% {opacity: 1;transform-origin: 100% 100%;transform: scale(0.5, 0.5) rotate(0deg);}
  60% {opacity: 1;transform-origin: 0%;transform: scale(0.5, 0.5) rotate(0deg);}
  80% {opacity: 1;transform-origin: 0% 0%;transform: scale(0.5, 0.5) rotate(0deg);}
  100% {opacity: 1;transform-origin: 50% 50%;transform: scale(1, 1) rotate(0deg);}
}
@keyframes tinLeftIn {
  0% {opacity: 0;transform: scale(1, 1) translateX(-900%);}
  50%, 70%, 90% {opacity: 1;transform: scale(1.1, 1.1) translateX(0);}
  60%, 80%, 100% {opacity: 1;transform: scale(1, 1) translateX(0);}
}
@keyframes tinDownIn {
  0% {opacity: 0;transform: scale(1, 1) translateY(900%);}
  50%, 70%, 90% {opacity: 1;transform: scale(1.1, 1.1) translateY(0);}
  60%, 80%, 100% {opacity: 1;transform: scale(1, 1) translateY(0);}
}
@keyframes boingInUp {
  0% {opacity: 0;transform-origin: 50% 0%;transform: perspective(800px) rotateX(-90deg);}
  50% {opacity: 1;transform-origin: 50% 0%;transform: perspective(800px) rotateX(50deg);}
  100% {opacity: 1;transform-origin: 50% 0%;transform: perspective(800px) rotateX(0deg);}
}
@keyframes spaceInLeft {
  0% {opacity: 0;transform-origin: 40% 50%;transform: scale(.2) translate(-100%, 0%);}
  100% {opacity: 1;transform-origin: 40% 50%;transform: scale(1) translate(0%, 0%);}
}
@keyframes spaceInRight {
  0% {opacity: 0;transform-origin: 60% 50%;transform: scale(.2) translate(100%, 0%);}
  100% {opacity: 1;transform-origin: 60% 50%;transform: scale(1) translate(0%, 0%);}
}
@keyframes spaceInDown {
  0% {opacity: 0;transform-origin: 50% 50%;transform: scale(.2) translate(0%, 200%);}
  100% {opacity: 1;transform-origin: 50% 50%;transform: scale(1) translate(0%, 0%);}
}
@keyframes spaceInUp {
  0% {opacity: 0;transform-origin: 50% 60%;transform: scale(.2) translate(0%, -200%);}
  100% {opacity: 1;transform-origin: 50% 60%;transform: scale(1) translate(0%, 0%);}
}