@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
}
.animated.duration-3s {
  animation-duration: 3s;
}
.animated.duration-4s {
  animation-duration: 4s;
}
.animated.duration-5s {
  animation-duration: 5s;
}
.animated.duration-10s {
  animation-duration: 10s;
}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  animation-name: pulse;
}

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  animation-name: rubberBand;
}

@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  animation-name: shake;
}

@keyframes headShake {
  0% {
    transform: translateX(0);
  }

  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    transform: translateX(0);
  }
}

.headShake {
  animation-timing-function: ease-in-out;
  animation-name: headShake;
}

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  transform-origin: top center;
  animation-name: swing;
}

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes wobble {
  from {
    transform: none;
  }

  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    transform: none;
  }
}

.wobble {
  animation-name: wobble;
}

@keyframes jello {
  from, 11.1%, to {
    transform: none;
  }

  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  animation-name: jello;
  transform-origin: center;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-name: bounceIn;
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  to {
    transform: none;
  }
}

.bounceInLeft {
  animation-name: bounceInLeft;
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: none;
  }
}

.bounceInRight {
  animation-name: bounceInRight;
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  animation-name: bounceInUp;
}

@keyframes bounceOut {
  20% {
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  animation-name: bounceOut;
}

@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  animation-name: bounceOutDown;
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  animation-name: bounceOutLeft;
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  animation-name: bounceOutRight;
}

@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  animation-name: bounceOutUp;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDownBig {
  animation-name: fadeInDownBig;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeftBig {
  animation-name: fadeInLeftBig;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRightBig {
  animation-name: fadeInRightBig;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUpBig {
  animation-name: fadeInUpBig;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  animation-name: fadeOutDown;
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  animation-name: fadeOutDownBig;
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  animation-name: fadeOutLeft;
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  animation-name: fadeOutRight;
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  animation-name: fadeOutRightBig;
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  animation-name: fadeOutUp;
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  animation-name: fadeOutUpBig;
}

@keyframes flip {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
  }

  to {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  animation-name: flip;
}

@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipInX;
}

@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipInY;
}

@keyframes flipOutX {
  from {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@keyframes flipOutY {
  from {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipOutY;
}

@keyframes lightSpeedIn {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  animation-name: lightSpeedOut;
  animation-timing-function: ease-in;
}

@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    transform-origin: center;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  animation-name: rotateIn;
}

@keyframes rotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  animation-name: rotateInDownLeft;
}

@keyframes rotateInDownRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  animation-name: rotateInDownRight;
}

@keyframes rotateInUpLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  animation-name: rotateInUpLeft;
}

@keyframes rotateInUpRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  animation-name: rotateInUpRight;
}

@keyframes rotateOut {
  from {
    transform-origin: center;
    opacity: 1;
  }

  to {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  animation-name: rotateOut;
}

@keyframes rotateOutDownLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  animation-name: rotateOutDownLeft;
}

@keyframes rotateOutDownRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  animation-name: rotateOutDownRight;
}

@keyframes rotateOutUpLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
}

@keyframes rotateOutUpRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  animation-name: rotateOutUpRight;
}

@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  animation-name: hinge;
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }

  50% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.jackInTheBox {
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rollIn {
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  animation-name: rollOut;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;

    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  animation-name: zoomInDown;
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInLeft {
  animation-name: zoomInLeft;
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInRight {
  animation-name: zoomInRight;
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  animation-name: zoomInUp;
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  animation-name: zoomOut;
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  animation-name: zoomOutDown;
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    transform: scale(.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}

.zoomOutLeft {
  animation-name: zoomOutLeft;
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    transform: scale(.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}

.zoomOutRight {
  animation-name: zoomOutRight;
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutUp {
  animation-name: zoomOutUp;
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  animation-name: slideInDown;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  animation-name: slideInRight;
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  animation-name: slideInUp;
}

@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  animation-name: slideOutDown;
}

@keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  animation-name: slideOutLeft;
}

@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  animation-name: slideOutRight;
}

@keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  animation-name: slideOutUp;
}

/*动?箭?*/
.jiantou{
  animation: jiantou_zx 1s infinite linear;
  -webkit-animation: jiantou_zx 1s infinite linear;
}
@-webkit-keyframes jiantou_zx {
  0% {-webkit-transform: translateY(100px); opacity: 1;}
  50% { opacity: 0.8;}
  100% {-webkit-transform: translateY(0px); opacity: 0;}
}
  
@keyframes jiantou_zx {
  0% {-webkit-transform: translateY(100px); opacity: 1;}
  50% { opacity: 0.8;}
  100% {-webkit-transform: translateY(0px); opacity: 0;}
}

.roll-in-right{-webkit-animation:roll-in-right .6s ease-out both;animation:roll-in-right .6s ease-out both}
/* ----------------------------------------------
 * Generated by Animista on 2022-3-4 18:35:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @-webkit-keyframes roll-in-right{0%{-webkit-transform:translateX(800px) rotate(540deg);transform:translateX(800px) rotate(540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1}}@keyframes roll-in-right{0%{-webkit-transform:translateX(800px) rotate(540deg);transform:translateX(800px) rotate(540deg);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);opacity:1}}

 .slide-in-bck-center{-webkit-animation:slide-in-bck-center .7s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bck-center .7s cubic-bezier(.25,.46,.45,.94) both}
 /* ----------------------------------------------
 * Generated by Animista on 2022-3-4 18:36:30
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes slide-in-bck-center{0%{-webkit-transform:translateZ(600px);transform:translateZ(600px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes slide-in-bck-center{0%{-webkit-transform:translateZ(600px);transform:translateZ(600px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

.slide-in-elliptic-right-bck{-webkit-animation:slide-in-elliptic-right-bck .7s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-elliptic-right-bck .7s cubic-bezier(.25,.46,.45,.94) both}
/* ----------------------------------------------
 * Generated by Animista on 2022-3-4 18:37:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/* ----------------------------------------------
 * Generated by Animista on 2022-3-4 18:47:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-elliptic-right-bck
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-elliptic-right-bck {
  0% {
    -webkit-transform: translateX(800px) rotateY(30deg) scale(6.5);
            transform: translateX(800px) rotateY(30deg) scale(6.5);
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 600px 50%;
            transform-origin: 600px 50%;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-right-bck {
  0% {
    -webkit-transform: translateX(800px) rotateY(30deg) scale(6.5);
            transform: translateX(800px) rotateY(30deg) scale(6.5);
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 600px 50%;
            transform-origin: 600px 50%;
    opacity: 1;
  }
}

.toWidth {
  animation-name: toWidth;
}

@keyframes toWidth {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}


 .slide-in-bck-br{-webkit-animation:slide-in-bck-br .6s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bck-br .6s cubic-bezier(.25,.46,.45,.94) both}
 /* ----------------------------------------------
 * Generated by Animista on 2022-3-4 18:37:56
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes slide-in-bck-br{0%{-webkit-transform:translateZ(700px) translateY(300px) translateX(400px);transform:translateZ(700px) translateY(300px) translateX(400px);opacity:0}100%{-webkit-transform:translateZ(0) translateY(0) translateX(0);transform:translateZ(0) translateY(0) translateX(0);opacity:1}}@keyframes slide-in-bck-br{0%{-webkit-transform:translateZ(700px) translateY(300px) translateX(400px);transform:translateZ(700px) translateY(300px) translateX(400px);opacity:0}100%{-webkit-transform:translateZ(0) translateY(0) translateX(0);transform:translateZ(0) translateY(0) translateX(0);opacity:1}}

.swing-in-bottom-bck{-webkit-animation:swing-in-bottom-bck .6s cubic-bezier(.175,.885,.32,1.275) both;animation:swing-in-bottom-bck .6s cubic-bezier(.175,.885,.32,1.275) both}
/* ----------------------------------------------
 * Generated by Animista on 2022-3-4 18:38:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @-webkit-keyframes swing-in-bottom-bck{0%{-webkit-transform:rotateX(-70deg);transform:rotateX(-70deg);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:1}}@keyframes swing-in-bottom-bck{0%{-webkit-transform:rotateX(-70deg);transform:rotateX(-70deg);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:1}}

 .bounce-in-right{-webkit-animation:bounce-in-right 1.1s both;animation:bounce-in-right 1.1s both}
 /* ----------------------------------------------
 * Generated by Animista on 2022-3-4 18:40:0
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes bounce-in-right{0%{-webkit-transform:translateX(600px);transform:translateX(600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateX(68px);transform:translateX(68px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateX(32px);transform:translateX(32px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateX(8px);transform:translateX(8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce-in-right{0%{-webkit-transform:translateX(600px);transform:translateX(600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateX(68px);transform:translateX(68px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateX(32px);transform:translateX(32px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateX(8px);transform:translateX(8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

/* ----------------------------------------------
 * Generated by Animista on 2022-3-4 18:52:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @-webkit-keyframes puff-in-left{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes puff-in-left{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}

 .scale-up-tl{-webkit-animation:scale-up-tl .4s cubic-bezier(.39,.575,.565,1.000) both;animation:scale-up-tl .4s cubic-bezier(.39,.575,.565,1.000) both}
 /* ----------------------------------------------
 * Generated by Animista on 2022-3-4 19:10:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes scale-up-tl{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 0;transform-origin:0 0}}@keyframes scale-up-tl{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 0;transform-origin:0 0}}

.slide-in-bck-top{-webkit-animation:slide-in-bck-top .6s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bck-top .6s cubic-bezier(.25,.46,.45,.94) both}
/* ----------------------------------------------
 * Generated by Animista on 2022-3-4 21:12:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @-webkit-keyframes slide-in-bck-top{0%{-webkit-transform:translateZ(700px) translateY(-300px);transform:translateZ(700px) translateY(-300px);opacity:0}100%{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);opacity:1}}@keyframes slide-in-bck-top{0%{-webkit-transform:translateZ(700px) translateY(-300px);transform:translateZ(700px) translateY(-300px);opacity:0}100%{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);opacity:1}}

 .animated.delay-0-5s {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-1-5s {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-2-5s {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-3-5s {
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-4-5s {
  -webkit-animation-delay: 4.5s;
  animation-delay: 4.5s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.delay-5-5s {
  -webkit-animation-delay: 5.5s;
  animation-delay: 5.5s;
}

/* 放大缩小 */
@keyframes scale1 {
  0% {    transform: scale(1);  }
  50% {     transform: scale(1.1);  }
  100% {     transform: scale(1);  }
}

.scale1{animation:scale1 5s infinite linear;}

/* 旋转 */
@keyframes scale2 {
  0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
}
.scale2{animation:scale2 5s infinite linear;}



/* 光环动画 */

 .scale-up-center{-webkit-animation:scale-up-center 1s cubic-bezier(.39,.575,.565,1.000) both;animation:scale-up-center 1s cubic-bezier(.39,.575,.565,1.000) both}

 @-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}

 /* 左旋转进? */
 .roll-in-blurred-left{-webkit-animation:roll-in-blurred-left 1s cubic-bezier(.23,1.000,.32,1.000) both;animation:roll-in-blurred-left 1s cubic-bezier(.23,1.000,.32,1.000) both}

@-webkit-keyframes roll-in-blurred-left{0%{-webkit-transform:translateX(-1000px) rotate(-720deg);transform:translateX(-1000px) rotate(-720deg);-webkit-filter:blur(50px);filter:blur(50px);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes roll-in-blurred-left{0%{-webkit-transform:translateX(-1000px) rotate(-720deg);transform:translateX(-1000px) rotate(-720deg);-webkit-filter:blur(50px);filter:blur(50px);opacity:0}100%{-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg);-webkit-filter:blur(0);filter:blur(0);opacity:1}}

 /* 右阴影进? */
 .slide-in-blurred-right{-webkit-animation:slide-in-blurred-right 1s cubic-bezier(.23,1.000,.32,1.000) both;animation:slide-in-blurred-right 1s cubic-bezier(.23,1.000,.32,1.000) both}

 @-webkit-keyframes slide-in-blurred-right{0%{-webkit-transform:translateX(1000px) scaleX(2.5) scaleY(.2);transform:translateX(1000px) scaleX(2.5) scaleY(.2);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateX(0) scaleY(1) scaleX(1);transform:translateX(0) scaleY(1) scaleX(1);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes slide-in-blurred-right{0%{-webkit-transform:translateX(1000px) scaleX(2.5) scaleY(.2);transform:translateX(1000px) scaleX(2.5) scaleY(.2);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateX(0) scaleY(1) scaleX(1);transform:translateX(0) scaleY(1) scaleX(1);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}
 
 /* 右下翻转进入 */
 .tilt-in-fwd-br{-webkit-animation:tilt-in-fwd-br 1s cubic-bezier(.25,.46,.45,.94) both;animation:tilt-in-fwd-br 1s cubic-bezier(.25,.46,.45,.94) both}

@-webkit-keyframes tilt-in-fwd-br{0%{-webkit-transform:rotateY(20deg) rotateX(-35deg) translate(300px,300px) skew(35deg,-10deg);transform:rotateY(20deg) rotateX(-35deg) translate(300px,300px) skew(35deg,-10deg);opacity:0}100%{-webkit-transform:rotateY(0) rotateX(0deg) translate(0,0) skew(0deg,0deg);transform:rotateY(0) rotateX(0deg) translate(0,0) skew(0deg,0deg);opacity:1}}@keyframes tilt-in-fwd-br{0%{-webkit-transform:rotateY(20deg) rotateX(-35deg) translate(300px,300px) skew(35deg,-10deg);transform:rotateY(20deg) rotateX(-35deg) translate(300px,300px) skew(35deg,-10deg);opacity:0}100%{-webkit-transform:rotateY(0) rotateX(0deg) translate(0,0) skew(0deg,0deg);transform:rotateY(0) rotateX(0deg) translate(0,0) skew(0deg,0deg);opacity:1}}

/* 旋转进入 */
.swirl-in-fwd{-webkit-animation:swirl-in-fwd 1s ease-out both;animation:swirl-in-fwd 1s ease-out both}

 @-webkit-keyframes swirl-in-fwd{0%{-webkit-transform:rotate(-540deg) scale(0);transform:rotate(-540deg) scale(0);opacity:0}100%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);opacity:1}}@keyframes swirl-in-fwd{0%{-webkit-transform:rotate(-540deg) scale(0);transform:rotate(-540deg) scale(0);opacity:0}100%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);opacity:1}}

 /* 中心小变大带抖动 */
 .bounce-in-fwd{-webkit-animation:bounce-in-fwd 1.1s both;animation:bounce-in-fwd 1.1s both}

 @-webkit-keyframes bounce-in-fwd{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:scale(.7);transform:scale(.7);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:scale(.84);transform:scale(.84);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}89%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce-in-fwd{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:scale(.7);transform:scale(.7);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:scale(.84);transform:scale(.84);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}89%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:scale(.95);transform:scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

 /* 从左前进? */
.slide-in-elliptic-left-fwd{-webkit-animation:slide-in-elliptic-left-fwd 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-elliptic-left-fwd 1s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes slide-in-elliptic-left-fwd{0%{-webkit-transform:translateX(-800px) rotateY(30deg) scale(0);transform:translateX(-800px) rotateY(30deg) scale(0);-webkit-transform-origin:-100% 50%;transform-origin:-100% 50%;opacity:0}100%{-webkit-transform:translateX(0) rotateY(0) scale(1);transform:translateX(0) rotateY(0) scale(1);-webkit-transform-origin:1800px 50%;transform-origin:1800px 50%;opacity:1}}@keyframes slide-in-elliptic-left-fwd{0%{-webkit-transform:translateX(-800px) rotateY(30deg) scale(0);transform:translateX(-800px) rotateY(30deg) scale(0);-webkit-transform-origin:-100% 50%;transform-origin:-100% 50%;opacity:0}100%{-webkit-transform:translateX(0) rotateY(0) scale(1);transform:translateX(0) rotateY(0) scale(1);-webkit-transform-origin:1800px 50%;transform-origin:1800px 50%;opacity:1}}

 /* 摇动动效 */
 .wobble-hor-bottom{-webkit-animation:wobble-hor-bottom 5s infinite both;animation:wobble-hor-bottom 5s infinite both}

@-webkit-keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}

/* 旋转前置进入 */
.swirl-in-bottom-bck{-webkit-animation:swirl-in-bottom-bck .65s ease-out both;animation:swirl-in-bottom-bck .65s ease-out both}

 @-webkit-keyframes swirl-in-bottom-bck{0%{-webkit-transform:rotate(540deg) scale(5);transform:rotate(540deg) scale(5);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}}@keyframes swirl-in-bottom-bck{0%{-webkit-transform:rotate(540deg) scale(5);transform:rotate(540deg) scale(5);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}}

 /* 左下水平展开 */
 .scale-in-bl{-webkit-animation:scale-in-bl 2s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-bl 2s cubic-bezier(.25,.46,.45,.94) both}

@-webkit-keyframes scale-in-bl{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 100%;transform-origin:0 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 100%;transform-origin:0 100%;opacity:1}}@keyframes scale-in-bl{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 100%;transform-origin:0 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 100%;transform-origin:0 100%;opacity:1}}

/* 上前置进? */
.slide-in-elliptic-bottom-fwd{-webkit-animation:slide-in-elliptic-bottom-fwd 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-elliptic-bottom-fwd 1s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes slide-in-elliptic-bottom-fwd{0%{-webkit-transform:translateY(600px) rotateX(30deg) scale(0);transform:translateY(600px) rotateX(30deg) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% -1400px;transform-origin:50% -1400px;opacity:1}}@keyframes slide-in-elliptic-bottom-fwd{0%{-webkit-transform:translateY(600px) rotateX(30deg) scale(0);transform:translateY(600px) rotateX(30deg) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% -1400px;transform-origin:50% -1400px;opacity:1}}

 /* 向下展开 */
 .scale-in-ver-top{-webkit-animation:scale-in-ver-top 1.5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-ver-top 1.5s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes scale-in-ver-top{0%{-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}}@keyframes scale-in-ver-top{0%{-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:100% 0;transform-origin:100% 0;opacity:1}}

 /* 中上向下展开 */
 .scale-in-top{-webkit-animation:scale-in-top .5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-top .5s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes scale-in-top{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 0;transform-origin:50% 0;opacity:1}}@keyframes scale-in-top{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 0;transform-origin:50% 0;opacity:1}}

 /* 云朵动效 */
 .jello-horizontal{-webkit-animation:jello-horizontal 4s infinite both;animation:jello-horizontal 4s infinite both}

 @-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

 /* 云朵动效2 */
 .shake-horizontal{-webkit-animation:shake-horizontal 8s cubic-bezier(.455,.03,.515,.955) infinite both;animation:shake-horizontal 8s cubic-bezier(.455,.03,.515,.955) infinite both}

 @-webkit-keyframes shake-horizontal{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%{-webkit-transform:translateX(10px);transform:translateX(10px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:translateX(-8px);transform:translateX(-8px)}}@keyframes shake-horizontal{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%{-webkit-transform:translateX(10px);transform:translateX(10px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:translateX(-8px);transform:translateX(-8px)}}

 /* 下前置翻? */
 .slide-in-elliptic-bottom-bck{-webkit-animation:slide-in-elliptic-bottom-bck .7s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-elliptic-bottom-bck .7s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes slide-in-elliptic-bottom-bck{0%{-webkit-transform:translateY(600px) rotateX(-30deg) scale(6.5);transform:translateY(600px) rotateX(-30deg) scale(6.5);-webkit-transform-origin:50% -100%;transform-origin:50% -100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% 500px;transform-origin:50% 500px;opacity:1}}@keyframes slide-in-elliptic-bottom-bck{0%{-webkit-transform:translateY(600px) rotateX(-30deg) scale(6.5);transform:translateY(600px) rotateX(-30deg) scale(6.5);-webkit-transform-origin:50% -100%;transform-origin:50% -100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% 500px;transform-origin:50% 500px;opacity:1}}

 /* 坐下移动 */
 .slide-in-left{-webkit-animation:slide-in-left 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-left 1s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}

 /* 文字动效2 从中间上下展? */
 .scale-in-ver-center{-webkit-animation:scale-in-ver-center .5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-ver-center .5s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes scale-in-ver-center{0%{-webkit-transform:scaleY(0);transform:scaleY(0);opacity:1}100%{-webkit-transform:scaleY(1);transform:scaleY(1);opacity:1}}@keyframes scale-in-ver-center{0%{-webkit-transform:scaleY(0);transform:scaleY(0);opacity:1}100%{-webkit-transform:scaleY(1);transform:scaleY(1);opacity:1}}

 /* 文字动效2 从左上展? */
 .puff-in-center{-webkit-animation:puff-in-center .7s cubic-bezier(.47,0.000,.745,.715) both;animation:puff-in-center .7s cubic-bezier(.47,0.000,.745,.715) both}

 @-webkit-keyframes puff-in-center{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes puff-in-center{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}

 /* 文字动效2 从左右缓? */
 .puff-in-hor{-webkit-animation:puff-in-hor .7s cubic-bezier(.47,0.000,.745,.715) both;animation:puff-in-hor .7s cubic-bezier(.47,0.000,.745,.715) both}

@-webkit-keyframes puff-in-hor{0%{-webkit-transform:scaleX(2);transform:scaleX(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes puff-in-hor{0%{-webkit-transform:scaleX(2);transform:scaleX(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}

/* 文字动效2 从上下缓? */
.puff-in-ver{-webkit-animation:puff-in-ver .7s cubic-bezier(.47,0.000,.745,.715) both;animation:puff-in-ver .7s cubic-bezier(.47,0.000,.745,.715) both}

 @-webkit-keyframes puff-in-ver{0%{-webkit-transform:scaleY(2);transform:scaleY(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes puff-in-ver{0%{-webkit-transform:scaleY(2);transform:scaleY(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}

 /* 文字动效2 左右展开 */
 .scale-in-hor-center{-webkit-animation:scale-in-hor-center 1s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-hor-center 1s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes scale-in-hor-center{0%{-webkit-transform:scaleX(0);transform:scaleX(0);opacity:1}100%{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}@keyframes scale-in-hor-center{0%{-webkit-transform:scaleX(0);transform:scaleX(0);opacity:1}100%{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}

 /* 右下原点摇动 */
 .shake-br{-webkit-animation:shake-br 3s cubic-bezier(.455,.03,.515,.955) infinite both;animation:shake-br 3s cubic-bezier(.455,.03,.515,.955) infinite both}

 @-webkit-keyframes shake-br{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}10%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}20%,40%,60%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}30%,50%,70%{-webkit-transform:rotate(4deg);transform:rotate(4deg)}80%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}90%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}@keyframes shake-br{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}10%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}20%,40%,60%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}30%,50%,70%{-webkit-transform:rotate(4deg);transform:rotate(4deg)}80%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}90%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}

 /* 文字动效 左右聚拢 */
 .tracking-in-contract-bck{-webkit-animation:tracking-in-contract-bck 1s cubic-bezier(.215,.61,.355,1.000) both;animation:tracking-in-contract-bck 1s cubic-bezier(.215,.61,.355,1.000) both}

@-webkit-keyframes tracking-in-contract-bck{0%{letter-spacing:1em;-webkit-transform:translateZ(400px);transform:translateZ(400px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes tracking-in-contract-bck{0%{letter-spacing:1em;-webkit-transform:translateZ(400px);transform:translateZ(400px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

/* 文字动效 从上放大展现 */
.puff-in-top{-webkit-animation:puff-in-top .7s cubic-bezier(.47,0.000,.745,.715) both;animation:puff-in-top .7s cubic-bezier(.47,0.000,.745,.715) both}

 @-webkit-keyframes puff-in-top{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes puff-in-top{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(0);filter:blur(0);opacity:1}}

 /* 文字动效 放大 */
 .slide-in-elliptic-top-fwd{-webkit-animation:slide-in-elliptic-top-fwd 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-elliptic-top-fwd 1s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes slide-in-elliptic-top-fwd{0%{-webkit-transform:translateY(-600px) rotateX(-30deg) scale(0);transform:translateY(-600px) rotateX(-30deg) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% 1400px;transform-origin:50% 1400px;opacity:1}}@keyframes slide-in-elliptic-top-fwd{0%{-webkit-transform:translateY(-600px) rotateX(-30deg) scale(0);transform:translateY(-600px) rotateX(-30deg) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% 1400px;transform-origin:50% 1400px;opacity:1}}

 /* 右前置闪? */
 .slide-in-elliptic-right-bck{-webkit-animation:slide-in-elliptic-right-bck .7s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-elliptic-right-bck .7s cubic-bezier(.25,.46,.45,.94) both}

@-webkit-keyframes slide-in-elliptic-right-bck{0%{-webkit-transform:translateX(800px) rotateY(30deg) scale(6.5);transform:translateX(800px) rotateY(30deg) scale(6.5);-webkit-transform-origin:-100% 50%;transform-origin:-100% 50%;opacity:0}100%{-webkit-transform:translateX(0) rotateY(0) scale(1);transform:translateX(0) rotateY(0) scale(1);-webkit-transform-origin:600px 50%;transform-origin:600px 50%;opacity:1}}@keyframes slide-in-elliptic-right-bck{0%{-webkit-transform:translateX(800px) rotateY(30deg) scale(6.5);transform:translateX(800px) rotateY(30deg) scale(6.5);-webkit-transform-origin:-100% 50%;transform-origin:-100% 50%;opacity:0}100%{-webkit-transform:translateX(0) rotateY(0) scale(1);transform:translateX(0) rotateY(0) scale(1);-webkit-transform-origin:600px 50%;transform-origin:600px 50%;opacity:1}}

/* 前置左闪? */
.slide-in-elliptic-left-bck{-webkit-animation:slide-in-elliptic-left-bck .7s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-elliptic-left-bck .7s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes slide-in-elliptic-left-bck{0%{-webkit-transform:translateX(-800px) rotateY(-30deg) scale(6.5);transform:translateX(-800px) rotateY(-30deg) scale(6.5);-webkit-transform-origin:200% 50%;transform-origin:200% 50%;opacity:0}100%{-webkit-transform:translateX(0) rotateY(0) scale(1);transform:translateX(0) rotateY(0) scale(1);-webkit-transform-origin:-600px 50%;transform-origin:-600px 50%;opacity:1}}@keyframes slide-in-elliptic-left-bck{0%{-webkit-transform:translateX(-800px) rotateY(-30deg) scale(6.5);transform:translateX(-800px) rotateY(-30deg) scale(6.5);-webkit-transform-origin:200% 50%;transform-origin:200% 50%;opacity:0}100%{-webkit-transform:translateX(0) rotateY(0) scale(1);transform:translateX(0) rotateY(0) scale(1);-webkit-transform-origin:-600px 50%;transform-origin:-600px 50%;opacity:1}}

/* 底部展开 */
.scale-in-bottom{-webkit-animation:scale-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes scale-in-bottom{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}}@keyframes scale-in-bottom{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:1}}

/* 闪光 */
.blink-1{-webkit-animation:blink-1 1s infinite both;animation:blink-1 1s infinite both}

 @-webkit-keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}

 /* 抖动 */
 .vibrate-3{-webkit-animation:vibrate-3 1s linear infinite both;animation:vibrate-3 1s linear infinite both}

 @-webkit-keyframes vibrate-3{0%{-webkit-transform:translate(0);transform:translate(0)}10%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}20%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}30%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}50%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}70%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}80%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}90%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate-3{0%{-webkit-transform:translate(0);transform:translate(0)}10%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}20%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}30%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}50%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}70%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}80%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}90%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}

 /* 心跳 */
 .heartbeat{-webkit-animation:heartbeat 1.5s ease-in-out infinite both;animation:heartbeat 1.5s ease-in-out infinite both}

@-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

 /* 特殊动效1 */
.scale_R{
  animation: scale_R 1s linear;
  -webkit-animation: scale_R 1s  linear;
}
@-webkit-keyframes scale_R {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }

  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
  }

  to {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}
  
@keyframes scale_R {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }

  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
  }

  to {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}

/* 气泡上浮 */
.slide-in-fwd-bottom-scale-out {
	-webkit-animation: slide-in-fwd-bottom-scale-out 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
	        animation: slide-in-fwd-bottom-scale-out 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}


 @-webkit-keyframes slide-in-fwd-bottom-scale-out {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(800px);
            transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-bottom-scale-out {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(800px);
            transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  80% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
  100% {
    
    opacity: 0;
  }
}

/* 小人跳出 */
.slide-in-elliptic-bottom-fwd {
	-webkit-animation: slide-in-elliptic-bottom-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-elliptic-bottom-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

 @-webkit-keyframes slide-in-elliptic-bottom-fwd {
  0% {
    -webkit-transform: translateY(600px) rotateX(30deg) scale(0);
            transform: translateY(600px) rotateX(30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -800px;
            transform-origin: 50% -800px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-bottom-fwd {
  0% {
    -webkit-transform: translateY(600px) rotateX(30deg) scale(0);
            transform: translateY(600px) rotateX(30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -800px;
            transform-origin: 50% -800px;
    opacity: 1;
  }
}

/* 小人旋转进入 60deg */
@keyframes rollIn-60 {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -60deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rollIn-60 {
  animation-name: rollIn-60;
}

/* 小人摇曳 */




/* 新动? */
.slide-in-fwd-center{-webkit-animation:slide-in-fwd-center 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-fwd-center 1s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes slide-in-fwd-center{0%{-webkit-transform:translateZ(-1400px);transform:translateZ(-1400px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes slide-in-fwd-center{0%{-webkit-transform:translateZ(-1400px);transform:translateZ(-1400px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}
/* 云朵飘动 */
.bounce-left{-webkit-animation:bounce-left 5s infinite both;animation:bounce-left 5s infinite both}

 @-webkit-keyframes bounce-left  { 0% { -webkit-transform: translateX(-48px);transform: translateX(-48px);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;opacity: 1;}25% {-webkit-transform: translateX(-26px); transform: translateX(-26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}50% { -webkit-transform: translateX(0px); transform: translateX(0px);-webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}75% {-webkit-transform: translateX(-26px); transform: translateX(-26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;} 100% {-webkit-transform: translateX(-48px); transform: translateX(-48px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}} @keyframes bounce-left { 0% { -webkit-transform: translateX(-48px);transform: translateX(-48px);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;opacity: 1;}25% {-webkit-transform: translateX(-26px); transform: translateX(-26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}50% { -webkit-transform: translateX(0px); transform: translateX(0px);-webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}75% {-webkit-transform: translateX(-26px); transform: translateX(-26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;} 100% {-webkit-transform: translateX(-48px); transform: translateX(-48px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}}

 .fade-in-fwd{-webkit-animation:fade-in-fwd 1s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-fwd 1s cubic-bezier(.39,.575,.565,1.000) both}

@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

 .slide-in-fwd-tl{-webkit-animation:slide-in-fwd-tl 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-fwd-tl 1s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes slide-in-fwd-tl{0%{-webkit-transform:translateZ(-1400px) translateY(-800px) translateX(-1000px);transform:translateZ(-1400px) translateY(-800px) translateX(-1000px);opacity:0}100%{-webkit-transform:translateZ(0) translateY(0) translateX(0);transform:translateZ(0) translateY(0) translateX(0);opacity:1}}@keyframes slide-in-fwd-tl{0%{-webkit-transform:translateZ(-1400px) translateY(-800px) translateX(-1000px);transform:translateZ(-1400px) translateY(-800px) translateX(-1000px);opacity:0}100%{-webkit-transform:translateZ(0) translateY(0) translateX(0);transform:translateZ(0) translateY(0) translateX(0);opacity:1}}

 .slide-in-blurred-right{-webkit-animation:slide-in-blurred-right 1s cubic-bezier(.23,1.000,.32,1.000) both;animation:slide-in-blurred-right 1s cubic-bezier(.23,1.000,.32,1.000) both}

@-webkit-keyframes slide-in-blurred-right{0%{-webkit-transform:translateX(1000px) scaleX(2.5) scaleY(.2);transform:translateX(1000px) scaleX(2.5) scaleY(.2);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateX(0) scaleY(1) scaleX(1);transform:translateX(0) scaleY(1) scaleX(1);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes slide-in-blurred-right{0%{-webkit-transform:translateX(1000px) scaleX(2.5) scaleY(.2);transform:translateX(1000px) scaleX(2.5) scaleY(.2);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateX(0) scaleY(1) scaleX(1);transform:translateX(0) scaleY(1) scaleX(1);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}

.flip-2-ver-left-fwd{-webkit-animation:flip-2-ver-left-fwd .5s cubic-bezier(.455,.03,.515,.955) both;animation:flip-2-ver-left-fwd .5s cubic-bezier(.455,.03,.515,.955) both}

 @-webkit-keyframes flip-2-ver-left-fwd{0%{-webkit-transform:translateX(0) translateZ(0) rotateY(0);transform:translateX(0) translateZ(0) rotateY(0);-webkit-transform-origin:0 50%;transform-origin:0 50%}100%{-webkit-transform:translateX(-100%) translateZ(160px) rotateY(180deg);transform:translateX(-100%) translateZ(160px) rotateY(180deg);-webkit-transform-origin:100% 0;transform-origin:100% 0}}@keyframes flip-2-ver-left-fwd{0%{-webkit-transform:translateX(0) translateZ(0) rotateY(0);transform:translateX(0) translateZ(0) rotateY(0);-webkit-transform-origin:0 50%;transform-origin:0 50%}100%{-webkit-transform:translateX(-100%) translateZ(160px) rotateY(180deg);transform:translateX(-100%) translateZ(160px) rotateY(180deg);-webkit-transform-origin:100% 0;transform-origin:100% 0}}

 .slide-in-elliptic-right-fwd{-webkit-animation:slide-in-elliptic-right-fwd 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-elliptic-right-fwd 1s cubic-bezier(.25,.46,.45,.94) both}

@-webkit-keyframes slide-in-elliptic-right-fwd{0%{-webkit-transform:translateX(800px) rotateY(-30deg) scale(0);transform:translateX(800px) rotateY(-30deg) scale(0);-webkit-transform-origin:-100% 50%;transform-origin:-100% 50%;opacity:0}100%{-webkit-transform:translateX(0) rotateY(0) scale(1);transform:translateX(0) rotateY(0) scale(1);-webkit-transform-origin:-1800px 50%;transform-origin:-1800px 50%;opacity:1}}@keyframes slide-in-elliptic-right-fwd{0%{-webkit-transform:translateX(800px) rotateY(-30deg) scale(0);transform:translateX(800px) rotateY(-30deg) scale(0);-webkit-transform-origin:-100% 50%;transform-origin:-100% 50%;opacity:0}100%{-webkit-transform:translateX(0) rotateY(0) scale(1);transform:translateX(0) rotateY(0) scale(1);-webkit-transform-origin:-1800px 50%;transform-origin:-1800px 50%;opacity:1}}

.scale-in-tl{-webkit-animation:scale-in-tl .5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-tl .5s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes scale-in-tl{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}}@keyframes scale-in-tl{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}}

 .scale-in-center{-webkit-animation:scale-in-center 1s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-center 1s cubic-bezier(.25,.46,.45,.94) both}

@-webkit-keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}

.shadow-drop-2-br{-webkit-animation:shadow-drop-2-br 5s cubic-bezier(.25,.46,.45,.94) infinite both;animation:shadow-drop-2-br 5s cubic-bezier(.25,.46,.45,.94) infinite both}

 @-webkit-keyframes shadow-drop-2-br{0%{-webkit-transform:translateZ(0) translateX(0) translateY(0);transform:translateZ(0) translateX(0) translateY(0);}
 100%{-webkit-transform:translateZ(50px) translateX(-12px) translateY(-12px);transform:translateZ(50px) translateX(-12px) translateY(-12px); }}@keyframes shadow-drop-2-br{0%{-webkit-transform:translateZ(0) translateX(0) translateY(0);transform:translateZ(0) translateX(0) translateY(0);}100%{-webkit-transform:translateZ(50px) translateX(-12px) translateY(-12px);transform:translateZ(50px) translateX(-12px) translateY(-12px); }}

/* 特殊动效 */
/* 左右缓动 */
.dance-left-right{-webkit-animation:dance-left-right 15s infinite both;animation:dance-left-right 15s infinite both}

 @-webkit-keyframes dance-left-right  { 0% { -webkit-transform: translateX(-150px);transform: translateX(-150px);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;opacity: 1;}50% { -webkit-transform: translateX(0); transform: translateX(0);-webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}100% {-webkit-transform: translateX(-150px); transform: translateX(-150px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}} @keyframes dance-left-right { 0% { -webkit-transform: translateX(-150px);transform: translateX(-150px);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;opacity: 1;}50% { -webkit-transform: translateX(0); transform: translateX(0);-webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}100% {-webkit-transform: translateX(-150px); transform: translateX(-150px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}}

/* 圆圈缓动 */
.vibrate-2{-webkit-animation:vibrate-2 5s linear infinite both;animation:vibrate-2 5s linear infinite both}

 @-webkit-keyframes vibrate-2 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(20px, -20px);
            transform: translate(20px, -20px);
  }
  40% {
    -webkit-transform: translate(20px, -5px);
            transform: translate(20px, -5px);
  }
  60% {
    -webkit-transform: translate(-20px, -5px);
            transform: translate(-20px, -5px);
  }
  80% {
    -webkit-transform: translate(-20px, -20px);
            transform: translate(-20px, -20px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-2 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(20px, -20px);
            transform: translate(20px, -20px);
  }
  40% {
    -webkit-transform: translate(20px, -5px);
            transform: translate(20px, -5px);
  }
  60% {
    -webkit-transform: translate(-20px, -5px);
            transform: translate(-20px, -5px);
  }
  80% {
    -webkit-transform: translate(-20px, -20px);
            transform: translate(-20px, -20px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}


/* 修复古董1 */
.rotate-5-bl-cw{-webkit-animation:rotate-5-bl-cw 1s cubic-bezier(.25,.46,.45,.94) both;animation:rotate-5-bl-cw 1s cubic-bezier(.25,.46,.45,.94) both infinite }

 @-webkit-keyframes rotate-5-bl-cw{
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:48px 5px;transform-origin:48px 5px}
  25%{-webkit-transform:rotate(1deg);transform:rotate(1deg);-webkit-transform-origin:48px 5px;transform-origin:48px 5px}
  50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:48px 5px;transform-origin:48px 5px}
  75%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg);-webkit-transform-origin:48px 5px;transform-origin:48px 5px}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:48px 5px;transform-origin:48px 5px}}
 @keyframes rotate-5-bl-cw{
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:48px 5px;transform-origin:48px 5px}
  25%{-webkit-transform:rotate(1deg);transform:rotate(1deg);-webkit-transform-origin:48px 5px;transform-origin:48px 5px}
  50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:48px 5px;transform-origin:48px 5px}
  75%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg);-webkit-transform-origin:48px 5px;transform-origin:48px 5px}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:48px 5px;transform-origin:48px 5px}}

 /* 修复古董2 */
 .rotate-5-br-ccw{-webkit-animation:rotate-5-br-ccw 1s cubic-bezier(.25,.46,.45,.94) both;animation:rotate-5-br-ccw 1s cubic-bezier(.25,.46,.45,.94) both infinite}

@-webkit-keyframes rotate-5-br-ccw {
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  25%{-webkit-transform:rotate(1deg);transform:rotate(1deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  75%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}}
@keyframes rotate-5-br-ccw {
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  25%{-webkit-transform:rotate(1deg);transform:rotate(1deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  75%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}}

 /* 修复古董3 */
 .rotate-5-bottom-cw{-webkit-animation:rotate-5-bottom-cw 1s cubic-bezier(.25,.46,.45,.94) infinite both;animation:rotate-5-bottom-cw 1s cubic-bezier(.25,.46,.45,.94) infinite both}
 @-webkit-keyframes rotate-5-bottom-cw {
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 100%;transform-origin:0 100%}
  25%{-webkit-transform:rotate(1deg);transform:rotate(1deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}
  50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 100%;transform-origin:0 100%}
  75%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 100%;transform-origin:0 100%}}
@keyframes rotate-5-bottom-cw {
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 100%;transform-origin:0 100%}
  25%{-webkit-transform:rotate(1deg);transform:rotate(1deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}
  50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 100%;transform-origin:0 100%}
  75%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 100%;transform-origin:0 100%}}


/* 梯子 */
 .rotate-25-br-ccw{-webkit-animation:rotate-25-br-ccw 2s cubic-bezier(.25,.46,.45,.94) both;animation:rotate-25-br-ccw 2s cubic-bezier(.25,.46,.45,.94) both infinite}

@-webkit-keyframes rotate-25-br-ccw {
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}
  50%{-webkit-transform:rotate(25deg);transform:rotate(25deg);-webkit-transform-origin:18% 100%;transform-origin:18% 100%}
  /* 50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 100%;transform-origin:0 100%} */
  75%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);-webkit-transform-origin:18% 100%;transform-origin:18% 100%}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}
@keyframes rotate-25-br-ccw {
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}
  50%{-webkit-transform:rotate(25deg);transform:rotate(25deg);-webkit-transform-origin:18% 100%;transform-origin:18% 100%}
  /* 50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 100%;transform-origin:0 100%} */
  75%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);-webkit-transform-origin:18% 100%;transform-origin:18% 100%}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}

 /* 特殊 */
 .slide-in-elliptic-bottom-bck{-webkit-animation:slide-in-elliptic-bottom-bck 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-elliptic-bottom-bck 1s cubic-bezier(.25,.46,.45,.94) both}

@-webkit-keyframes slide-in-elliptic-bottom-bck{0%{-webkit-transform:translateY(600px) rotateX(-30deg) scale(6.5);transform:translateY(600px) rotateX(-30deg) scale(6.5);-webkit-transform-origin:50% -100%;transform-origin:50% -100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% 500px;transform-origin:50% 500px;opacity:1}}@keyframes slide-in-elliptic-bottom-bck{0%{-webkit-transform:translateY(600px) rotateX(-30deg) scale(6.5);transform:translateY(600px) rotateX(-30deg) scale(6.5);-webkit-transform-origin:50% -100%;transform-origin:50% -100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% 500px;transform-origin:50% 500px;opacity:1}}

/* icon */
.rotate-scale-up{-webkit-animation:rotate-scale-up .65s linear both;animation:rotate-scale-up .65s linear both}

 @-webkit-keyframes rotate-scale-up{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(2) rotateZ(180deg);transform:scale(2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes rotate-scale-up{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(2) rotateZ(180deg);transform:scale(2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}

/* 第一章图的出? */
 .rotate-in-2-bck-cw{-webkit-animation:rotate-in-2-bck-cw 3s cubic-bezier(.25,.46,.45,.94) both;animation:rotate-in-2-bck-cw 3s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes rotate-in-2-bck-cw{0%{-webkit-transform:translateZ(200px) rotate(-45deg);transform:translateZ(200px) rotate(-45deg);opacity:0}100%{-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0);opacity:1}}@keyframes rotate-in-2-bck-cw{0%{-webkit-transform:translateZ(200px) rotate(-45deg);transform:translateZ(200px) rotate(-45deg);opacity:0}100%{-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0);opacity:1}}

/* 标题出场方式 */
 .slide-in-blurred-top{-webkit-animation:slide-in-blurred-top 1s forwards;animation:slide-in-blurred-top 1s forwards}

 @-webkit-keyframes slide-in-blurred-top{0%{-webkit-transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform:translateY(-1000px) scaleY(2.5) scaleX(.2);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateY(0) scaleY(1) scaleX(1);transform:translateY(0) scaleY(1) scaleX(1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes slide-in-blurred-top{0%{-webkit-transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform:translateY(-1000px) scaleY(2.5) scaleX(.2);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateY(0) scaleY(1) scaleX(1);transform:translateY(0) scaleY(1) scaleX(1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}

 
 /* 新效? 20221103 */
 /* 背景? 翻页渐变? */
 .swing-in-top-fwd{-webkit-animation:swing-in-top-fwd 1.5s cubic-bezier(.175,.885,.32,1.275) both;animation:swing-in-top-fwd 1.5s cubic-bezier(.175,.885,.32,1.275) both}

@-webkit-keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}@keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}

/* 拍照手臂 */
.photo-rotate-5{-webkit-animation:photo-rotate-5 2s cubic-bezier(.25,.46,.45,.94) both;animation:photo-rotate-5 2s cubic-bezier(.25,.46,.45,.94) both infinite}

@-webkit-keyframes photo-rotate-5 {
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 0;transform-origin:0 0}
  50%{-webkit-transform:rotate(5deg);transform:rotate(5deg);-webkit-transform-origin:0 0;transform-origin:0 0}
  /* 50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 100%;transform-origin:0 100%} */
  75%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg);-webkit-transform-origin:0 0;transform-origin:0 0}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 0;transform-origin:0 0}}
@keyframes photo-rotate-5 {
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 0;transform-origin:0 0}
  50%{-webkit-transform:rotate(5deg);transform:rotate(5deg);-webkit-transform-origin:0 0;transform-origin:0 0}
  /* 50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 100%;transform-origin:0 100%} */
  75%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg);-webkit-transform-origin:0 0;transform-origin:0 0}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:0 0;transform-origin:0 0}}

 /* 灯光闪烁 */
 .blink-1{-webkit-animation:blink-1 3s infinite both;animation:blink-1 3s infinite both}

@-webkit-keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}

/* 抖动 */
.wobble-ver-left{-webkit-animation:wobble-ver-left 5s infinite both;animation:wobble-ver-left 5s infinite both}

 @-webkit-keyframes wobble-ver-left{0%{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0);-webkit-transform-origin:0 50%;transform-origin:0 50%}15%{-webkit-transform:translateY(-2px) rotate(1deg);transform:translateY(-2px) rotate(1deg)}75%{-webkit-transform:translateY(-2px) rotate(-1deg);transform:translateY(-2px) rotate(-1deg)}}
 @keyframes wobble-ver-left{0%,100%{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0);-webkit-transform-origin:0 50%;transform-origin:0 50%}15%{-webkit-transform:translateY(-2px) rotate(1deg);transform:translateY(-2px) rotate(1deg)}75%{-webkit-transform:translateY(-2px) rotate(-1deg);transform:translateY(-2px) rotate(-1deg)}}

 /* 放大缩小 */
@keyframes scale3 {
  0% {    transform: translateY(0px) scale(1);  }
  25% {     transform: translateY(-5px) scale(0.9);  }
  50% {     transform: translateY(0px) scale(1);  }
  75% {     transform: translateY(-5px) scale(0.9);  }
  100% {     transform: translateY(0px) scale(1);  }
}

.scale3{animation:scale3 10s infinite linear;}

/* 放大缩小 */
@keyframes scale4 {
  0% {    transform: translateY(-10px) scale(1);  }
  25% {     transform: translateY(0px) scale(0.9);  }
  50% {     transform: translateY(-8px) scale(1);  }
  75% {     transform: translateY(-5px) scale(0.9);  }
  100% {     transform: translateY(-10px) scale(1);  }
}

.scale4{animation:scale4 10s infinite linear;}

/* 飞机进入动画 */
.slide-in-br{-webkit-animation:slide-in-br 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-br 1s cubic-bezier(.25,.46,.45,.94) both}

 @-webkit-keyframes slide-in-br{0%{-webkit-transform:translateY(1000px) translateX(1000px);transform:translateY(1000px) translateX(1000px);opacity:0}100%{-webkit-transform:translateY(0) translateX(0);transform:translateY(0) translateX(0);opacity:1}}@keyframes slide-in-br{0%{-webkit-transform:translateY(1000px) translateX(1000px);transform:translateY(1000px) translateX(1000px);opacity:0}100%{-webkit-transform:translateY(0) translateX(0);transform:translateY(0) translateX(0);opacity:1}}

 /* 书本进入动画 */
 .tilt-in-fwd-tr{-webkit-animation:tilt-in-fwd-tr 1s cubic-bezier(.25,.46,.45,.94) both;animation:tilt-in-fwd-tr 1s cubic-bezier(.25,.46,.45,.94) both}

@-webkit-keyframes tilt-in-fwd-tr{0%{-webkit-transform:rotateY(20deg) rotateX(35deg) translate(300px,-300px) skew(-35deg,10deg);transform:rotateY(20deg) rotateX(35deg) translate(300px,-300px) skew(-35deg,10deg);opacity:0}100%{-webkit-transform:rotateY(0) rotateX(0deg) translate(0,0) skew(0deg,0deg);transform:rotateY(0) rotateX(0deg) translate(0,0) skew(0deg,0deg);opacity:1}}@keyframes tilt-in-fwd-tr{0%{-webkit-transform:rotateY(20deg) rotateX(35deg) translate(300px,-300px) skew(-35deg,10deg);transform:rotateY(20deg) rotateX(35deg) translate(300px,-300px) skew(-35deg,10deg);opacity:0}100%{-webkit-transform:rotateY(0) rotateX(0deg) translate(0,0) skew(0deg,0deg);transform:rotateY(0) rotateX(0deg) translate(0,0) skew(0deg,0deg);opacity:1}}

/* 抖动动画1 */
.vibrate-1{-webkit-animation:vibrate-1 .3s linear infinite both;animation:vibrate-1 .3s linear infinite both}

 @-webkit-keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}

 /* 切换动画效果 */
 .rotate-scale-up-ver{-webkit-animation:rotate-scale-up-ver .65s linear both;animation:rotate-scale-up-ver .65s linear both}

@-webkit-keyframes rotate-scale-up-ver{0%{-webkit-transform:scale(1) rotateY(0);transform:scale(1) rotateY(0)}50%{-webkit-transform:scale(2) rotateY(180deg);transform:scale(2) rotateY(180deg)}100%{-webkit-transform:scale(1) rotateY(360deg);transform:scale(1) rotateY(360deg)}}@keyframes rotate-scale-up-ver{0%{-webkit-transform:scale(1) rotateY(0);transform:scale(1) rotateY(0)}50%{-webkit-transform:scale(2) rotateY(180deg);transform:scale(2) rotateY(180deg)}100%{-webkit-transform:scale(1) rotateY(360deg);transform:scale(1) rotateY(360deg)}}

.rotate-10-br-ccw{-webkit-animation:rotate-10-br-ccw 1s cubic-bezier(.25,.46,.45,.94) both;animation:rotate-10-br-ccw 1s cubic-bezier(.25,.46,.45,.94) both infinite}

@-webkit-keyframes rotate-10-br-ccw {
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  25%{-webkit-transform:rotate(10deg);transform:rotate(10deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  75%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}}
@keyframes rotate-10-br-ccw {
  0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  25%{-webkit-transform:rotate(10deg);transform:rotate(10deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  50%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
  75%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
 100%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}}


 /* 从左侧展? */
 .scale-in-hor-left{-webkit-animation:scale-in-hor-left 1s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-hor-left 1s cubic-bezier(.25,.46,.45,.94) both}

@-webkit-keyframes scale-in-hor-left{0%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}}@keyframes scale-in-hor-left{0%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}}<!--ecms sync check [sync_thread_id="3bcee7cc5a424330844ab778a62d31c1" sync_date="2025-02-28 09:05:38" check_sum="3bcee7cc5a424330844ab778a62d31c1]-->