@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: 0.8s;

  animation-fill-mode: both;

}



.animated.infinite {

  animation-iteration-count: infinite;

}



.animated.hinge {

  animation-duration: 0.8s;

}



.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, to {

    opacity: 1;

  }



  100% {

    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(0.9, 0.9, 0.9);

  }



  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 {



0% {

    transform: translate3d(0, 0, 0);

  }

  

50% {

    transform: translate3d(-10px, 0, 0);

  }

  

  



100% {

    transform: translate3d(0, 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(-1, -1, 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(0px, 0, 0);

  }

  45% {

    opacity: 1;

    transform: translate3d(0px, 0, 0);

  }



  to {

    opacity: 1;

    transform: translate3d(-500px, 0, 0);

  }

}



.bounceOutLeft {

  animation-name: bounceOutLeft;

}



@keyframes bounceOutRight {

  20% {

    opacity: 1;

    transform: translate3d(0, 0, 0);

  }



  to {

    opacity: 1;

    transform: translate3d(500px, 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;

}

















.lefttoright{-webkit-animation-duration: 3s;  animation-duration: 3s;  -webkit-animation-name: lefttoright;  animation-name:lefttoright;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;  animation-timing-function: ease-in;}

@-webkit-keyframes lefttoright {

	 0% { transform: translate(0,0px); opacity:0  } 

	 25% { transform: translate(0,0px); opacity:0  } 

	 50%{opacity:1;filter:brightness(130%);}

	 75%{ transform: translate(-230px,0);opacity:0}

	 100%{ transform: translate(-230px,0);opacity:0}

}

@keyframes lefttoright { 

	 0% { transform: translate(0,0px); opacity:0  } 

	 25% { transform: translate(0,0px); opacity:0  } 

	 50%{opacity:1;filter:brightness(130%);}

	 75%{ transform: translate(-230px,0);opacity:0}

	 100%{ transform: translate(-230px,0);opacity:0}

}







.righttoleft{-webkit-animation-duration: 3s;  animation-duration: 3s;  -webkit-animation-name: righttoleft;  animation-name:righttoleft;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;  animation-timing-function: ease-in;}

@-webkit-keyframes righttoleft {

	 0% { transform: translate(0,0px); opacity:0  } 

	 25% { transform: translate(0,0px); opacity:0  } 

	 50%{opacity:1}

	 75%{ transform: translate(230px,0);opacity:0}

	 100%{ transform: translate(230px,0);opacity:0}

}

@keyframes righttoleft { 

	 0% { transform: translate(0,0px); opacity:0  } 

	 25% { transform: translate(0,0px); opacity:0  } 

	 50%{opacity:1}

	 75%{ transform: translate(230px,0);opacity:0}

	 100%{ transform: translate(230px,0);opacity:0}

}

















.tob{-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-name: tob;  animation-name:tob;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite; -webkit-animation-direction: alternate;animation-direction: alternate;}

@-webkit-keyframes tob { 0% { transform:scale(0.95);  } 100%{ transform: scale(1); }}

@keyframes tob { 0% { transform:scale(0.95);  } 100%{ transform: scale(1); }}









.uptodown2 {-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-name: uptodown2;  animation-name:uptodown2;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite; -webkit-animation-direction: alternate;animation-direction: alternate;}

@-webkit-keyframes uptodown2 { 0% { transform: translate(0,0px);  } 100%{ transform: translate(0,10px);}}

@keyframes uptodown2 { 0% { transform: translate(0,0px);  } 100%{ transform: translate(0,10px);}}









.uptodown {-webkit-animation-duration: 1.5s;  animation-duration: 1.5s;  -webkit-animation-name: uptodown;  animation-name: uptodown;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite; -webkit-animation-direction: alternate;animation-direction: alternate;}

@-webkit-keyframes uptodown { 



 0%    { transform: translate(0,0px) ;}

 10%    { transform: translate(0,0px) ;}

 15%    { transform: translate(0,-10px) ;}

 20%    { transform: translate(0,0px) ;}

 100%  { transform: translate(0,0px) ;}





}



@keyframes uptodown {

	

 0%    { transform: translate(0,0px) ;}

 10%    { transform: translate(0,0px) ;}

 15%    { transform: translate(0,-10px) ;}

 20%    { transform: translate(0,0px) ;}

 100%  { transform: translate(0,0px) ;}



	 

	 }

















.downtoup {-webkit-animation-duration:8s;  animation-duration: 8s;  -webkit-animation-name: downtoup;  animation-name: downtoup;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite; }

@-webkit-keyframes downtoup { 



		0% { transform: translate(0,0) scale(1.5); opacity: 0;} 

		10% { transform: translate(0,-8px) scale(1.3); opacity: 1;} 

		20% { transform: translate(0,-15px) scale(1.3); opacity: 1;} 		

		100%{ transform: translate(0,-50px) scale(1);opacity: 0;}









}

@keyframes downtoup {



		0% { transform: translate(0,0) scale(1.5); opacity: 0;} 

		10% { transform: translate(0,-8px) scale(1.3); opacity: 1;} 

		20% { transform: translate(0,-15px) scale(1.3); opacity: 1;} 		

		100%{ transform: translate(0,-50px) scale(1);opacity: 0;}



		

		}



/*閃光*/				  

.brightness-play { -webkit-animation:brightness2-play 3s -0.14s  infinite ; animation:brightness2-play 3s -0.14s  infinite ;}

	@keyframes brightness2-play {

	  0% { 

		filter:brightness(100%);

	  }

	  90% { 

		filter:brightness(100%);

	  }

	  93% { 

		filter:brightness(150%);

	  }

	  95% { 

		filter:brightness(100%);

	  }

	  97% { 

		filter:brightness(150%);

	  }

	  100% { 

		filter:brightness(100%);

	  }

	}

	

/*閃光2*/				  

.brightness-play2 { -webkit-animation:brightness3-play 4s  linear infinite ; animation:brightness3-play 4s  linear infinite ;}

	@keyframes brightness3-play {

	  0% { 

		filter:brightness(100%);

	  }

	  40% { 

		filter:brightness(100%);

	  }

	  60% { 

		filter:brightness(130%);

	  }

	  80% { 

		filter:brightness(100%);

	  }

	  90% { 

		filter:brightness(110%);

	  }

	  100% { 

		filter:brightness(100%);

	  }

	}	

	



 

/*轉轉2*/	

.rotate2-play { -webkit-animation:rotate2-play 7s linear infinite ;

				        animation:rotate2-play 7s linear infinite ;}

	@keyframes rotate2-play {

	  0% { 

			transform: rotate(0deg);

	  }



	  100% { 

			transform: rotate(360deg);

	  }

	}

	

	

	

/*轉轉3*/	

.rotate3-play { -webkit-animation:rotate3-play 7s linear infinite ;

				        animation:rotate3-play 7s linear infinite ;}

	@keyframes rotate3-play {

	  100% { 

			transform: rotate(360deg);

	  }

	}

/*轉轉4*/	

.rotate4-play { -webkit-animation:rotate4-play 6s  ;

				        animation:rotate4-play 6s  ;}

	@keyframes rotate4-play {

	  100% { 

			transform: rotate(360deg);

	  }

	}

	/*鳥韻律感*/				  

.bird-play { -webkit-animation:bird-play 3s linear infinite ;

	  			          animation:bird-play 3s linear infinite ;}

	@-webkit-keyframes bird-play {

	  0%   { -webkit-transform: scale(1.01) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg); transform: scale(1.01) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg);}

	  100% { -webkit-transform: scale(1.01) rotate(360deg) translateX(2px) translateY(1px) rotate(-360deg); transform: scale(1.01) rotate(360deg) translateX(2px) translateY(1px) rotate(-360deg);}

	}



	@keyframes bird-play {

	  0%   { -webkit-transform: scale(1.01) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg); transform: scale(1.01) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg);}

	  100% { -webkit-transform: scale(1.01) rotate(360deg) translateX(2px) translateY(1px) rotate(-360deg); transform: scale(1.01) rotate(360deg) translateX(2px) translateY(1px) rotate(-360deg); }

	}	





/*右邊韻律感*/				  

.waves-play img { -webkit-animation:waves-play 0.5s linear infinite ;

	  			          animation:waves-play 0.5s linear infinite ;}



	@keyframes waves-play {

	  0%   { -webkit-transform: scale(1.01) rotate(0deg) translateX(0px) translateY(3px) rotate(0deg); transform: scale(1.01) rotate(0deg) translateX(0px) translateY(3px) rotate(0deg);}

	  100% { -webkit-transform: scale(1.01) rotate(360deg) translateX(0px) translateY(3px) rotate(-360deg); transform: scale(1.01) rotate(360deg) translateX(0px) translateY(3px) rotate(-360deg); }

	}

/*左邊韻律感*/				  

.waves2-play img { -webkit-animation:waves2-play 0.5s -1.6s linear infinite ;

	  			          animation:waves2-play 0.5s -1.6s linear infinite ;}

	@-webkit-keyframes waves2-play {

	  0% { -webkit-transform: scale(1.01) rotate(360deg) translateX(0px) translateY(2px) rotate(-360deg); transform: scale(1.01) rotate(360deg) translateX(0px) translateY(2px) rotate(-360deg);}

	  100%   { -webkit-transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg); transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg);}

	}



	@keyframes waves2-play {

	  0% { -webkit-transform: scale(1.01) rotate(360deg) translateX(0px) translateY(2px) rotate(-360deg); transform: scale(1.01) rotate(360deg) translateX(0px) translateY(2px) rotate(-360deg);}

	  100%   { -webkit-transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg); transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg);}

	}

/*左邊葉子搖擺*/

.swing3{

 -webkit-animation:swing3 5s  infinite alternate;

  animation:swing3 5s  infinite alternate;}

@keyframes swing3 {

  20% {transform: rotate3d(0, 0, 1, -2deg);}



  40% {transform: rotate3d(0, 0, 1, 1deg);}



  60% {transform: rotate3d(0, 0, 1, -1deg);}



  80% {transform: rotate3d(0, 0, 1, 1deg);}



  100% {transform: rotate3d(0, 0, 1, 0deg);}

}



/*右邊葉子搖擺*/

.swing4{

 -webkit-animation:swing4 2s  infinite alternate;

  animation:swing4 2s  infinite alternate;}

@keyframes swing4 {

  20% {transform: rotate3d(0, 0, 1, 3deg);}



  40% {transform: rotate3d(0, 0, 1, -3deg);}



  60% {transform: rotate3d(0, 0, 1, 2deg);}



  80% {transform: rotate3d(0, 0, 1, -2deg);}



  100% {transform: rotate3d(0, 0, 1, 0deg);}

}



/*熱*/				  

.hue-rotate-play {-webkit-animation:hue-rotate-play 5s infinite alternate;

				           animation:hue-rotate-play 5s infinite alternate;}

	@keyframes hue-rotate-play {

	  0% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  20% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  40% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  60% { 

		filter:brightness(125%) hue-rotate(0deg);

	  }

	  100% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	}

	

	@-webkit-keyframes hue-rotate-play {   

	  0% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  20% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  40% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  60% { 

		filter:brightness(125%) hue-rotate(0deg);

	  }

	  100% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

		}



/*熱*/				  

.hue-rotate-play2 {-webkit-animation:hue-rotate-play2 5s infinite alternate;

				           animation:hue-rotate-play2 5s infinite alternate;}

	@keyframes hue-rotate-play2 {

	  0% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  20% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  40% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  60% { 

		filter:brightness(155%) hue-rotate(0deg);

	  }

	  100% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	}

	

	@-webkit-keyframes hue-rotate-play2 {   

	  0% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  20% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  40% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

	  60% { 

		filter:brightness(155%) hue-rotate(0deg);

	  }

	  100% { 

		filter:brightness(100%) hue-rotate(0deg);

	  }

		}

		

	

/*掉落*/				  

.fall-play {-webkit-animation:fall-play 6s  ;

				           animation:fall-play 6s  ;}

	@keyframes fall-play {

	  0% { transform: translateX(100px) translateY(-300px); }	  

	  20% { transform: translateX(-120px) translateY(-200px);}

	  40% { transform: translateX(80px) translateY(-160px);}

	  60% { 

		transform: translateX(-80px) translateY(-100px);

	  }

	  80% { 

		transform: translateX(30px) translateY(-50px);

	  }

	  100% { 

		transform: translateX(0px) translateY(0px);

	  }

	}	

	/*心跳*/

.heartbeat-play {-webkit-animation-duration: 1s;  animation-duration:1s;  -webkit-animation-name: heartbeat-play;  animation-name: heartbeat-play;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}

	@-webkit-keyframes heartbeat-play {   

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

		40%  { -webkit-transform: scale(0.95); transform: scale(0.95);} 

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

		80%  { -webkit-transform: scale(0.95); transform: scale(0.95);}

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

		}

	@keyframes heartbeat-play { 

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

		40%  { -webkit-transform: scale(0.95); transform: scale(0.95);} 

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

		80%  { -webkit-transform: scale(0.95); transform: scale(0.95);}

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

			}



	

/*船變大*/	

	.ship-play {-webkit-animation-duration: 3s;  animation-duration:3s;  -webkit-animation-name: ship-play;  animation-name:ship-play;  -webkit-animation-iteration-count: 1;    animation-iteration-count:1;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}

	@-webkit-keyframes ship-play {   

		0%   { -webkit-transform: scale(0.70); transform: scale(0.70); } 

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

		}

	@keyframes ship-play { 

		0%   { -webkit-transform: scale(0.70); transform: scale(0.70); } 

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

	}















.fadeOut1_1{

 animation-name: fadeOut1_1;

 -webkit-animation-name: fadeOut1_1; 

 animation-duration: 2.6s; 

 -webkit-animation-duration: 2.6s;

 animation-timing-function: ease-out; 

 -webkit-animation-timing-function: ease-out;



/* visibility: visible !important; */

}

@keyframes fadeOut1_1 {

 0% {

  transform: scale(0);

  transform: translateY(50px);

  opacity: 0; 

 }

 10% {

  transform: scale(0.7);

  transform: translateY(10px);

  opacity: 1; 

 }

 45% {

  transform: scale(1); 

  transform: translateY(0px);

 

 } 

  50% {

  transform: /*scale(1)*/translateY(-2px);

  opacity: 0.7;  

 }

  100% {

  opacity: 0.0;  

 }

 }

@-webkit-keyframes fadeOut1_1 {

 0% {

  transform: scale(0);

  transform: translateY(50px);

  opacity: 0; 

 }

 10% {

  transform: scale(0.7);

  transform: translateY(10px);

  opacity: 1; 

 }

 45% {

  transform: scale(1); 

  transform: translateY(0px);

 

 } 

  50% {

  transform: /*scale(1)*/translateY(-2px);

  opacity: 0.7;  

 }

  100% {

  opacity: 0.0;  

 }



 }

























/*煙霧01*/

.fadeOut2{



 animation-timing-function: ease-out; 

 -webkit-animation-timing-function: ease-out;



 

 

 -webkit-animation:fadeOut2 10s infinite alternate;

animation:fadeOut2 10s infinite alternate;

/* visibility: visible !important; */

}

@keyframes fadeOut2 {

		0% { transform: translate(0,0) scale(1); opacity: 0.5;} 

		50% { transform: translate(0,-8px) scale(1.2); opacity: 1;} 

		100%{ transform: translate(0,-30px) scale(1);opacity: 0.5;}

 }

@-webkit-keyframes fadeOut2 {

		0% { transform: translate(0,0) scale(1); opacity: 0.5;} 

		50% { transform: translate(0,-8px) scale(1.2); opacity: 1;} 

		100%{ transform: translate(0,-30px) scale(1);opacity: 0.5;}

}





/*煙霧02*/

.fadeOut3{

 animation-name: fadeOut3;

 -webkit-animation-name: fadeOut3; 

 animation-duration:4s; 

 -webkit-animation-duration:4s;

 animation-timing-function: ease-out; 

 -webkit-animation-timing-function: ease-out;

 animation-iteration-count: infinite;

 -webkit-animation-iteration-count: infinite;  

/* visibility: visible !important; */

}

@keyframes fadeOut3 {

		0% { transform: translate(0,0) scale(0); opacity: 0;} 

		3% { transform: translate(0,0) scale(1); opacity:1;}  

		100%{ transform: translate(0,-400px) scale(1);opacity: 0;}

 }

@-webkit-keyframes fadeOut3 {

		0% { transform: translate(0,0) scale(0); opacity: 0;} 

		3% { transform: translate(0,0) scale(1); opacity:1;}  

		100%{ transform: translate(0,-400px) scale(1);opacity: 0;}

}







/*左邊的氣球路徑*/	

	.ball-play {-webkit-animation-duration: 5s;  animation-duration:5s;  -webkit-animation-name: ball-play;  animation-name:ball-play;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}

	@-webkit-keyframes ball-play {   

		0%   {   transform:translateX(-1000px) translateY(500px);} 

		80%  {  transform:translateX(200px) translateY(-600px); } 

		100%  {  transform:translateX(200px) translateY(-600px); } 

				}

	@keyframes ball-play { 

		0%   {   transform:translateX(-1000px) translateY(500px);} 

		80%  {  transform:translateX(200px) translateY(-600px); } 

		100%  {  transform:translateX(200px) translateY(-600px); } 

	}





	.ball-play2 {-webkit-animation-duration: 10s;  animation-duration:10s;  -webkit-animation-name: ball-play2;  animation-name:ball-play2;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}

	@-webkit-keyframes ball-play2 {   

		0%   {   transform:translateX(-1000px) translateY(700px);} 

		80%  {  transform:translateX(600px) translateY(-500px); } 

		100%  {  transform:translateX(600px) translateY(-500px); } 

				}

	@keyframes ball-play2 { 

		0%   {   transform:translateX(-1000px) translateY(700px);} 

		80%  {  transform:translateX(600px) translateY(-500px); } 

		100%  {  transform:translateX(600px) translateY(-500px); } 

	}













/*煙霧02*/

.fadeOut00{

 animation-name: fadeOut00;

 -webkit-animation-name: fadeOut00; 

 animation-duration:5s; 

 -webkit-animation-duration:5s;

 animation-timing-function: ease-out; 

 -webkit-animation-timing-function: ease-out;

 animation-iteration-count: infinite;

 -webkit-animation-iteration-count: infinite;

 animation-direction: alternate;  

 -webkit-animation-direction: alternate; 

/* visibility: visible !important; */

}

@keyframes fadeOut00 {

		0% { transform: translate(0,0) scale(1); opacity: 1;} 

		70% { transform: translate(0,0) scale(1); opacity:1;}  

		100%{ transform: translate(0,0) scale(1);opacity: 0;}

 }

@-webkit-keyframes fadeOut00 {

		0% { transform: translate(0,0) scale(1); opacity: 1;} 

		70% { transform: translate(0,0) scale(1); opacity:1;}  

		100%{ transform: translate(0,0) scale(1);opacity: 0;}

}

























/*右邊的氣球路徑*/	

	.ball-play3 {-webkit-animation-duration: 6s;  animation-duration:6s;  -webkit-animation-name: ball-play3;  animation-name:ball-play3;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}

	@-webkit-keyframes ball-play3 {   

		0%   {   transform:translateX(1000px) translateY(500px);} 

		80%  {  transform:translateX(-200px) translateY(-600px); } 

		100%  {  transform:translateX(-200px) translateY(-600px); } 

				}

	@keyframes ball-play3 { 

		0%   {   transform:translateX(1000px) translateY(500px);} 

		80%  {  transform:translateX(-200px) translateY(-600px); } 

		100%  {  transform:translateX(-200px) translateY(-600px); } 

	}





	.ball-play4 {-webkit-animation-duration: 9s;  animation-duration:9s;  -webkit-animation-name: ball-play4;  animation-name:ball-play4;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}

	@-webkit-keyframes ball-play4 {   

		0%   {   transform:translateX(1000px) translateY(700px);} 

		80%  {  transform:translateX(-400px) translateY(-500px); } 

		100%  {  transform:translateX(-400px) translateY(-500px); } 

				}

	@keyframes ball-play4 { 

		0%   {   transform:translateX(1000px) translateY(700px);} 

		80%  {  transform:translateX(-400px) translateY(-500px); } 

		100%  {  transform:translateX(-400px) translateY(-500px); } 

	}





/*微亮*/           

.minbright-play { -webkit-animation:minbright-play 2s linear infinite alternate; animation:minbright-play 2s linear infinite alternate ;}

        @-webkit-keyframes minbright-play {

          0% { filter:brightness(100%);  }

          100% { filter:brightness(140%);  }

        }

        @keyframes minbright-play {

          0% { filter:brightness(100%);  }

          100% { filter:brightness(140%);  }

        }

















	.bgtop_r-play { -webkit-animation:bgtop_r-play 120s linear infinite; animation:bgtop_r-play 120s linear infinite ;}

		@-webkit-keyframes bgtop_r-play {

		  0%   { background-position:0 0;}

		  100% { background-position:2000px 0;}

		}

		@keyframes bgtop_r-play {

		  0%   { background-position:0 0;}

		  100% { background-position:2000px 0;}

		}

		

	.bgtop_l-play { -webkit-animation:bgtop_l-play 120s linear infinite; animation:bgtop_l-play 120s linear infinite ;}

		@-webkit-keyframes bgtop_l-play {

		  0%   { background-position:0 0;}

		  100% { background-position:-2000px 0;}

		}

		@keyframes bgtop_l-play {

		  0%   { background-position:0 0;}

		  100% { background-position:-2000px 0;}

		}

		

	.bgtop_r-play2 { -webkit-animation:bgtop_r-play 100s linear infinite; animation:bgtop_r-play 100s linear infinite ;}

	.bgtop_r-play3 { -webkit-animation:bgtop_r-play 150s linear infinite; animation:bgtop_r-play 150s linear infinite ;}







/*SUN路徑*/	

	.sun-play2 {

		-webkit-animation:sun-play2 5s linear infinite alternate ;

		 animation:sun-play2 5s  linear infinite alternate ;

		 position:absolute; z-index:10;   top: 24px; left: 387px;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}

	@-webkit-keyframes sun-play2 {   

		0%   {   transform:translateX(50px) translateY(70px);} 

		50%   {   transform:translateX(0px) translateY(0px);} 

		100%  {  transform:translateX(-69px) translateY(-26px); } 

		

						}

	@keyframes sun-play2 { 

		0%   {   transform:translateX(50px) translateY(70px);} 

		50%   {   transform:translateX(0px) translateY(0px);} 

		100%  {  transform:translateX(-69px) translateY(-26px); } 

	}



























/*動資動資*/

.is-off {

  -webkit-animation: is-off 2s linear infinite;

          animation: is-off 2s linear infinite;

}

.is-off2 {

  -webkit-animation: is-off 2s -1s linear infinite;

          animation: is-off 2s -1s linear infinite;

}



.bg-move {

  -webkit-animation: bg-move 2s linear infinite;

          animation: bg-move 2s linear infinite;

}

.tr-bag {

  -webkit-transform: skewX(0deg) scaleY(1);

          transform: skewX(0deg) scaleY(1);

  -webkit-animation: tr-bag 4s linear infinite;

          animation: tr-bag 4s linear infinite;

}

.glitch .clock {

  -webkit-transform: skewX(0deg) scaleY(1);

          transform: skewX(0deg) scaleY(1);

  -webkit-animation: clock-bag 4s linear infinite;

          animation: clock-bag 4s linear infinite;

}

.c2 {

  -webkit-animation: c2 1s infinite linear alternate-reverse;

          animation: c2 1s infinite linear alternate-reverse;

}

.c1 {

  -webkit-animation: c1 2s infinite linear alternate-reverse;

          animation: c1 2s infinite linear alternate-reverse;

}

	/*

	@keyframes is-off {

	}

	@keyframes c1 {

	}

	@keyframes c2 {

	}

	@keyframes clock-bag {

	}

	@keyframes tr-bag {

	}

	@keyframes bg-move {

	}

	*/

	@-webkit-keyframes is-off {

	  0% {

		opacity: 1;

	  }

	  50% {

		opacity: 1;

	  }

	  56% {

		opacity: 0;

	  }

	  57% {

		opacity: 0;

	  }

	  58% {

		opacity: 1;

	  }

	  71% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  72% {

		-webkit-transform: scaleY(3) skewX(-60deg);

				transform: scaleY(3) skewX(-60deg);

	  }

	  73% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  80% {

		opacity: 1;

	  }

	  81% {

		opacity: 0;

	  }

	  84% {

		opacity: 0;

	  }

	  85% {

		opacity: 1;

	  }

	  91% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

		color: #fff;

	  }/*

	  92% {

		-webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

				transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

		color: #008000;

	  }*/

	  93% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

		color: #fff;

	  }

	}

	@keyframes is-off {

	  0% {

		opacity: 1;

	  }

	  50% {

		opacity: 1;

	  }

	  56% {

		opacity: 0;

	  }

	  57% {

		opacity: 0;

	  }

	  58% {

		opacity: 1;

	  }

	  71% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  72% {

		-webkit-transform: scaleY(3) skewX(-60deg);

				transform: scaleY(3) skewX(-60deg);

	  }

	  73% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  80% {

		opacity: 1;

	  }

	  81% {

		opacity: 0;

	  }

	  84% {

		opacity: 0;

	  }

	  85% {

		opacity: 1;

	  }

	  91% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

		color: #fff;

	  }/*

	  92% {

		-webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

				transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

		color: #008000;

	  }*/

	  93% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

		color: #fff;

	  }

	}

	@-webkit-keyframes c1 {

	  0% {

		clip: rect(33px, 9999px, 9px, 0);

	  }

	  5% {

		clip: rect(27px, 9999px, 69px, 0);

	  }

	  10% {

		clip: rect(89px, 9999px, 66px, 0);

	  }

	  15.000000000000002% {

		clip: rect(4px, 9999px, 51px, 0);

	  }

	  20% {

		clip: rect(66px, 9999px, 64px, 0);

	  }

	  25% {

		clip: rect(38px, 9999px, 18px, 0);

	  }

	  30.000000000000004% {

		clip: rect(64px, 9999px, 35px, 0);

	  }

	  35.00000000000001% {

		clip: rect(55px, 9999px, 89px, 0);

	  }

	  40% {

		clip: rect(46px, 9999px, 3px, 0);

	  }

	  45% {

		clip: rect(42px, 9999px, 17px, 0);

	  }

	  50% {

		clip: rect(96px, 9999px, 75px, 0);

	  }

	  55% {

		clip: rect(43px, 9999px, 30px, 0);

	  }

	  60.00000000000001% {

		clip: rect(71px, 9999px, 22px, 0);

	  }

	  65% {

		clip: rect(16px, 9999px, 28px, 0);

	  }

	  70.00000000000001% {

		clip: rect(84px, 9999px, 41px, 0);

	  }

	  75% {

		clip: rect(78px, 9999px, 46px, 0);

	  }

	  80% {

		clip: rect(75px, 9999px, 69px, 0);

	  }

	  85% {

		clip: rect(95px, 9999px, 100px, 0);

	  }

	  90% {

		clip: rect(59px, 9999px, 80px, 0);

	  }

	  95% {

		clip: rect(65px, 9999px, 18px, 0);

	  }

	  100% {

		clip: rect(58px, 9999px, 91px, 0);

	  }

	}

	@keyframes c1 {

	  0% {

		clip: rect(33px, 9999px, 9px, 0);

	  }

	  5% {

		clip: rect(27px, 9999px, 69px, 0);

	  }

	  10% {

		clip: rect(89px, 9999px, 66px, 0);

	  }

	  15.000000000000002% {

		clip: rect(4px, 9999px, 51px, 0);

	  }

	  20% {

		clip: rect(66px, 9999px, 64px, 0);

	  }

	  25% {

		clip: rect(38px, 9999px, 18px, 0);

	  }

	  30.000000000000004% {

		clip: rect(64px, 9999px, 35px, 0);

	  }

	  35.00000000000001% {

		clip: rect(55px, 9999px, 89px, 0);

	  }

	  40% {

		clip: rect(46px, 9999px, 3px, 0);

	  }

	  45% {

		clip: rect(42px, 9999px, 17px, 0);

	  }

	  50% {

		clip: rect(96px, 9999px, 75px, 0);

	  }

	  55% {

		clip: rect(43px, 9999px, 30px, 0);

	  }

	  60.00000000000001% {

		clip: rect(71px, 9999px, 22px, 0);

	  }

	  65% {

		clip: rect(16px, 9999px, 28px, 0);

	  }

	  70.00000000000001% {

		clip: rect(84px, 9999px, 41px, 0);

	  }

	  75% {

		clip: rect(78px, 9999px, 46px, 0);

	  }

	  80% {

		clip: rect(75px, 9999px, 69px, 0);

	  }

	  85% {

		clip: rect(95px, 9999px, 100px, 0);

	  }

	  90% {

		clip: rect(59px, 9999px, 80px, 0);

	  }

	  95% {

		clip: rect(65px, 9999px, 18px, 0);

	  }

	  100% {

		clip: rect(58px, 9999px, 91px, 0);

	  }

	}

	@-webkit-keyframes c2 {

	  0% {

		clip: rect(91px, 9999px, 28px, 0);

	  }

	  5% {

		clip: rect(36px, 9999px, 73px, 0);

	  }

	  10% {

		clip: rect(68px, 9999px, 18px, 0);

	  }

	  15.000000000000002% {

		clip: rect(60px, 9999px, 68px, 0);

	  }

	  20% {

		clip: rect(95px, 9999px, 73px, 0);

	  }

	  25% {

		clip: rect(70px, 9999px, 98px, 0);

	  }

	  30.000000000000004% {

		clip: rect(65px, 9999px, 2px, 0);

	  }

	  35.00000000000001% {

		clip: rect(5px, 9999px, 46px, 0);

	  }

	  40% {

		clip: rect(23px, 9999px, 11px, 0);

	  }

	  45% {

		clip: rect(56px, 9999px, 1px, 0);

	  }

	  50% {

		clip: rect(56px, 9999px, 42px, 0);

	  }

	  55% {

		clip: rect(4px, 9999px, 50px, 0);

	  }

	  60.00000000000001% {

		clip: rect(45px, 9999px, 67px, 0);

	  }

	  65% {

		clip: rect(3px, 9999px, 39px, 0);

	  }

	  70.00000000000001% {

		clip: rect(30px, 9999px, 1px, 0);

	  }

	  75% {

		clip: rect(44px, 9999px, 8px, 0);

	  }

	  80% {

		clip: rect(42px, 9999px, 61px, 0);

	  }

	  85% {

		clip: rect(25px, 9999px, 95px, 0);

	  }

	  90% {

		clip: rect(96px, 9999px, 46px, 0);

	  }

	  95% {

		clip: rect(65px, 9999px, 43px, 0);

	  }

	  100% {

		clip: rect(42px, 9999px, 12px, 0);

	  }

	  23% {

		-webkit-transform: scaleX(0.8);

				transform: scaleX(0.8);

	  }

	}

	@keyframes c2 {

	  0% {

		clip: rect(91px, 9999px, 28px, 0);

	  }

	  5% {

		clip: rect(36px, 9999px, 73px, 0);

	  }

	  10% {

		clip: rect(68px, 9999px, 18px, 0);

	  }

	  15.000000000000002% {

		clip: rect(60px, 9999px, 68px, 0);

	  }

	  20% {

		clip: rect(95px, 9999px, 73px, 0);

	  }

	  25% {

		clip: rect(70px, 9999px, 98px, 0);

	  }

	  30.000000000000004% {

		clip: rect(65px, 9999px, 2px, 0);

	  }

	  35.00000000000001% {

		clip: rect(5px, 9999px, 46px, 0);

	  }

	  40% {

		clip: rect(23px, 9999px, 11px, 0);

	  }

	  45% {

		clip: rect(56px, 9999px, 1px, 0);

	  }

	  50% {

		clip: rect(56px, 9999px, 42px, 0);

	  }

	  55% {

		clip: rect(4px, 9999px, 50px, 0);

	  }

	  60.00000000000001% {

		clip: rect(45px, 9999px, 67px, 0);

	  }

	  65% {

		clip: rect(3px, 9999px, 39px, 0);

	  }

	  70.00000000000001% {

		clip: rect(30px, 9999px, 1px, 0);

	  }

	  75% {

		clip: rect(44px, 9999px, 8px, 0);

	  }

	  80% {

		clip: rect(42px, 9999px, 61px, 0);

	  }

	  85% {

		clip: rect(25px, 9999px, 95px, 0);

	  }

	  90% {

		clip: rect(96px, 9999px, 46px, 0);

	  }

	  95% {

		clip: rect(65px, 9999px, 43px, 0);

	  }

	  100% {

		clip: rect(42px, 9999px, 12px, 0);

	  }

	  23% {

		-webkit-transform: scaleX(0.8);

				transform: scaleX(0.8);

	  }

	}

	@-webkit-keyframes clock-bag {

	  0% {

		-webkit-transform: translate(4px, 2px);

				transform: translate(4px, 2px);

	  }

	  2% {

		-webkit-transform: translate(5px, 1px);

				transform: translate(5px, 1px);

	  }

	  4% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  6% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  8% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  10% {

		-webkit-transform: translate(1px, 3px);

				transform: translate(1px, 3px);

	  }

	  12% {

		-webkit-transform: translate(1px, 1px);

				transform: translate(1px, 1px);

	  }

	  14.000000000000002% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  16% {

		-webkit-transform: translate(1px, 3px);

	

				transform: translate(1px, 3px);

	  }

	  18% {

		-webkit-transform: translate(4px, 4px);

				transform: translate(4px, 4px);

	  }

	  20% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  22% {

		-webkit-transform: translate(5px, 2px);

				transform: translate(5px, 2px);

	  }

	  24% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  26% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  28.000000000000004% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  30% {

		-webkit-transform: translate(5px, 3px);

				transform: translate(5px, 3px);

	  }

	  32% {

		-webkit-transform: translate(3px, 5px);

				transform: translate(3px, 5px);

	  }

	  34% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  36% {

		-webkit-transform: translate(4px, 2px);

				transform: translate(4px, 2px);

	  }

	  38% {

		-webkit-transform: translate(5px, 1px);

				transform: translate(5px, 1px);

	  }

	  40% {

		-webkit-transform: translate(2px, 2px);

				transform: translate(2px, 2px);

	  }

	  42% {

		-webkit-transform: translate(4px, 3px);

				transform: translate(4px, 3px);

	  }

	  44% {

		-webkit-transform: translate(1px, 3px);

				transform: translate(1px, 3px);

	  }

	  46.00000000000001% {

		-webkit-transform: translate(3px, 1px);

				transform: translate(3px, 1px);

	  }

	  48% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  50% {

		-webkit-transform: translate(1px, 3px);

				transform: translate(1px, 3px);

	  }

	  52% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  54% {

		-webkit-transform: translate(4px, 4px);

				transform: translate(4px, 4px);

	  }

	  56.00000000000001% {

		-webkit-transform: translate(3px, 3px);

				transform: translate(3px, 3px);

	  }

	  58% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  60% {

		-webkit-transform: translate(4px, 3px);

				transform: translate(4px, 3px);

	  }

	  62% {

		-webkit-transform: translate(5px, 2px);

				transform: translate(5px, 2px);

	  }

	  64% {

		-webkit-transform: translate(5px, 3px);

				transform: translate(5px, 3px);

	  }

	  66% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  68% {

		-webkit-transform: translate(5px, 1px);

				transform: translate(5px, 1px);

	  }

	  70.00000000000001% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  72% {

		-webkit-transform: translate(2px, 2px);

				transform: translate(2px, 2px);

	  }

	  74% {

		-webkit-transform: translate(3px, 5px);

				transform: translate(3px, 5px);

	  }

	  76% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  78% {

		-webkit-transform: translate(3px, 5px);

				transform: translate(3px, 5px);

	  }

	  80% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  82.00000000000001% {

		-webkit-transform: translate(1px, 2px);

				transform: translate(1px, 2px);

	

	

	  }

	  84% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  86% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  88% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  90% {

		-webkit-transform: translate(5px, 2px);

				transform: translate(5px, 2px);

	  }

	  92.00000000000001% {

		-webkit-transform: translate(2px, 1px);

				transform: translate(2px, 1px);

	  }

	  94% {

		-webkit-transform: translate(2px, 1px);

				transform: translate(2px, 1px);

	  }

	  96% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  98% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  100% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  1% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  1.5% {

		-webkit-transform: scaleY(3) skewX(-60deg);

				transform: scaleY(3) skewX(-60deg);

	  }

	  2% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  51% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

	  }/*

	  52% {

		-webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

				transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

	  }*/

	  53% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

	  }

	}

	@keyframes clock-bag {

	  0% {

		-webkit-transform: translate(4px, 2px);

				transform: translate(4px, 2px);

	  }

	  2% {

		-webkit-transform: translate(5px, 1px);

				transform: translate(5px, 1px);

	  }

	  4% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  6% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  8% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  10% {

		-webkit-transform: translate(1px, 3px);

				transform: translate(1px, 3px);

	  }

	  12% {

		-webkit-transform: translate(1px, 1px);

				transform: translate(1px, 1px);

	  }

	  14.000000000000002% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  16% {

		-webkit-transform: translate(1px, 3px);

				transform: translate(1px, 3px);

	  }

	  18% {

		-webkit-transform: translate(4px, 4px);

				transform: translate(4px, 4px);

	  }

	  20% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  22% {

		-webkit-transform: translate(5px, 2px);

				transform: translate(5px, 2px);

	  }

	  24% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  26% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  28.000000000000004% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  30% {

		-webkit-transform: translate(5px, 3px);

				transform: translate(5px, 3px);

	  }

	  32% {

		-webkit-transform: translate(3px, 5px);

				transform: translate(3px, 5px);

	  }

	  34% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  36% {

		-webkit-transform: translate(4px, 2px);

				transform: translate(4px, 2px);

	  }

	  38% {

		-webkit-transform: translate(5px, 1px);

				transform: translate(5px, 1px);

	  }

	  40% {

		-webkit-transform: translate(2px, 2px);

				transform: translate(2px, 2px);

	  }

	  42% {

		-webkit-transform: translate(4px, 3px);

				transform: translate(4px, 3px);

	  }

	  44% {

		-webkit-transform: translate(1px, 3px);

				transform: translate(1px, 3px);

	  }

	  46.00000000000001% {

		-webkit-transform: translate(3px, 1px);

				transform: translate(3px, 1px);

	  }

	  48% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  50% {

		-webkit-transform: translate(1px, 3px);

				transform: translate(1px, 3px);

	  }

	  52% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  54% {

		-webkit-transform: translate(4px, 4px);

				transform: translate(4px, 4px);

	  }

	  56.00000000000001% {

		-webkit-transform: translate(3px, 3px);

				transform: translate(3px, 3px);

	  }

	  58% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  60% {

		-webkit-transform: translate(4px, 3px);

				transform: translate(4px, 3px);

	  }

	  62% {

		-webkit-transform: translate(5px, 2px);

				transform: translate(5px, 2px);

	  }

	  64% {

		-webkit-transform: translate(5px, 3px);

				transform: translate(5px, 3px);

	  }

	  66% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  68% {

		-webkit-transform: translate(5px, 1px);

				transform: translate(5px, 1px);

	  }

	  70.00000000000001% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  72% {

		-webkit-transform: translate(2px, 2px);

				transform: translate(2px, 2px);

	  }

	  74% {

		-webkit-transform: translate(3px, 5px);

				transform: translate(3px, 5px);

	  }

	  76% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  78% {

		-webkit-transform: translate(3px, 5px);

				transform: translate(3px, 5px);

	  }

	  80% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  82.00000000000001% {

		-webkit-transform: translate(1px, 2px);

				transform: translate(1px, 2px);

	  }

	  84% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  86% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  88% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  90% {

		-webkit-transform: translate(5px, 2px);

				transform: translate(5px, 2px);

	  }

	  92.00000000000001% {

		-webkit-transform: translate(2px, 1px);

				transform: translate(2px, 1px);

	  }

	  94% {

		-webkit-transform: translate(2px, 1px);

				transform: translate(2px, 1px);

	  }

	  96% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  98% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  100% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  1% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  1.5% {

		-webkit-transform: scaleY(3) skewX(-60deg);

				transform: scaleY(3) skewX(-60deg);

	  }

	  2% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  51% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

	  }/*

	  52% {

		-webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

				transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

	  }*/

	  53% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

	  }

	}

	@-webkit-keyframes tr-bag {

	  0% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  2% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  4% {

		-webkit-transform: translate(3px, 5px);

				transform: translate(3px, 5px);

	  }

	  6% {

		-webkit-transform: translate(3px, 2px);

				transform: translate(3px, 2px);

	  }

	  8% {

		-webkit-transform: translate(1px, 1px);

				transform: translate(1px, 1px);

	  }

	  10% {

		-webkit-transform: translate(5px, 5px);

				transform: translate(5px, 5px);

	  }

	  12% {

		-webkit-transform: translate(3px, 5px);

				transform: translate(3px, 5px);

	  }

	  14.000000000000002% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  16% {

		-webkit-transform: translate(4px, 3px);

				transform: translate(4px, 3px);

	  }

	  18% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  20% {

		-webkit-transform: translate(2px, 1px);

				transform: translate(2px, 1px);

	  }

	  22% {

		-webkit-transform: translate(5px, 3px);

				transform: translate(5px, 3px);

	  }

	  24% {

		-webkit-transform: translate(2px, 1px);

				transform: translate(2px, 1px);

	  }

	  26% {

		-webkit-transform: translate(4px, 1px);

				transform: translate(4px, 1px);

	  }

	  28.000000000000004% {

		-webkit-transform: translate(3px, 3px);

				transform: translate(3px, 3px);

	  }

	  30% {

		-webkit-transform: translate(1px, 3px);

				transform: translate(1px, 3px);

	  }

	  32% {

		-webkit-transform: translate(4px, 4px);

				transform: translate(4px, 4px);

	  }

	  34% {

		-webkit-transform: translate(5px, 2px);

				transform: translate(5px, 2px);

	  }

	  36% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  38% {

		-webkit-transform: translate(3px, 1px);

				transform: translate(3px, 1px);

	  }

	  40% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  42% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  44% {

		-webkit-transform: translate(1px, 4px);

	

				transform: translate(1px, 4px);

	  }

	  46.00000000000001% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  48% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  50% {

		-webkit-transform: translate(3px, 1px);

				transform: translate(3px, 1px);

	  }

	  52% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  54% {

		-webkit-transform: translate(3px, 3px);

				transform: translate(3px, 3px);

	  }

	  56.00000000000001% {

		-webkit-transform: translate(2px, 1px);

				transform: translate(2px, 1px);

	  }

	  58% {

		-webkit-transform: translate(5px, 3px);

				transform: translate(5px, 3px);

	  }

	  60% {

		-webkit-transform: translate(3px, 1px);

				transform: translate(3px, 1px);

	  }

	  62% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  64% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  66% {

		-webkit-transform: translate(2px, 2px);

				transform: translate(2px, 2px);

	  }

	  68% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  70.00000000000001% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  72% {

		-webkit-transform: translate(3px, 1px);

				transform: translate(3px, 1px);

	  }

	  74% {

		-webkit-transform: translate(4px, 1px);

				transform: translate(4px, 1px);

	  }

	  76% {

		-webkit-transform: translate(2px, 4px);

				transform: translate(2px, 4px);

	  }

	  78% {

		-webkit-transform: translate(2px, 2px);

				transform: translate(2px, 2px);

	  }

	  80% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  82.00000000000001% {

		-webkit-transform: translate(2px, 4px);

				transform: translate(2px, 4px);

	  }

	  84% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  86% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  88% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  90% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  92.00000000000001% {

		-webkit-transform: translate(5px, 5px);

				transform: translate(5px, 5px);

	  }

	  94% {

		-webkit-transform: translate(3px, 2px);

				transform: translate(3px, 2px);

	  }

	  96% {

		-webkit-transform: translate(5px, 1px);

				transform: translate(5px, 1px);

	  }

	  98% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  100% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  1% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  1.5% {

		-webkit-transform: scaleY(3) skewX(-60deg);

				transform: scaleY(3) skewX(-60deg);

	  }

	  2% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  51% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

	  }/*

	  52% {

		-webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

				transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

	  }*/

	  53% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

	  }

	}

	@keyframes tr-bag {

	  0% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  2% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  4% {

		-webkit-transform: translate(3px, 5px);

				transform: translate(3px, 5px);

	  }

	

	  6% {

		-webkit-transform: translate(3px, 2px);

				transform: translate(3px, 2px);

	  }

	  8% {

		-webkit-transform: translate(1px, 1px);

				transform: translate(1px, 1px);

	  }

	  10% {

		-webkit-transform: translate(5px, 5px);

				transform: translate(5px, 5px);

	  }

	  12% {

		-webkit-transform: translate(3px, 5px);

				transform: translate(3px, 5px);

	  }

	  14.000000000000002% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  16% {

		-webkit-transform: translate(4px, 3px);

				transform: translate(4px, 3px);

	  }

	  18% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  20% {

		-webkit-transform: translate(2px, 1px);

				transform: translate(2px, 1px);

	  }

	  22% {

		-webkit-transform: translate(5px, 3px);

				transform: translate(5px, 3px);

	  }

	  24% {

		-webkit-transform: translate(2px, 1px);

				transform: translate(2px, 1px);

	  }

	  26% {

		-webkit-transform: translate(4px, 1px);

				transform: translate(4px, 1px);

	  }

	  28.000000000000004% {

		-webkit-transform: translate(3px, 3px);

				transform: translate(3px, 3px);

	  }

	  30% {

		-webkit-transform: translate(1px, 3px);

				transform: translate(1px, 3px);

	  }

	  32% {

		-webkit-transform: translate(4px, 4px);

				transform: translate(4px, 4px);

	  }

	  34% {

		-webkit-transform: translate(5px, 2px);

				transform: translate(5px, 2px);

	  }

	  36% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  38% {

		-webkit-transform: translate(3px, 1px);

				transform: translate(3px, 1px);

	  }

	  40% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  42% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  44% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  46.00000000000001% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  48% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  50% {

		-webkit-transform: translate(3px, 1px);

				transform: translate(3px, 1px);

	  }

	  52% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  54% {

		-webkit-transform: translate(3px, 3px);

				transform: translate(3px, 3px);

	  }

	  56.00000000000001% {

		-webkit-transform: translate(2px, 1px);

				transform: translate(2px, 1px);

	  }

	  58% {

		-webkit-transform: translate(5px, 3px);

				transform: translate(5px, 3px);

	  }

	  60% {

		-webkit-transform: translate(3px, 1px);

				transform: translate(3px, 1px);

	  }

	  62% {

		-webkit-transform: translate(2px, 3px);

				transform: translate(2px, 3px);

	  }

	  64% {

		-webkit-transform: translate(5px, 4px);

				transform: translate(5px, 4px);

	  }

	  66% {

		-webkit-transform: translate(2px, 2px);

				transform: translate(2px, 2px);

	  }

	  68% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  70.00000000000001% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  72% {

		-webkit-transform: translate(3px, 1px);

				transform: translate(3px, 1px);

	  }

	  74% {

		-webkit-transform: translate(4px, 1px);

				transform: translate(4px, 1px);

	  }

	  76% {

		-webkit-transform: translate(2px, 4px);

				transform: translate(2px, 4px);

	  }

	  78% {

		-webkit-transform: translate(2px, 2px);

				transform: translate(2px, 2px);

	  }

	  80% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  82.00000000000001% {

		-webkit-transform: translate(2px, 4px);

	

				transform: translate(2px, 4px);

	  }

	  84% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  86% {

		-webkit-transform: translate(4px, 5px);

				transform: translate(4px, 5px);

	  }

	  88% {

		-webkit-transform: translate(3px, 4px);

				transform: translate(3px, 4px);

	  }

	  90% {

		-webkit-transform: translate(1px, 4px);

				transform: translate(1px, 4px);

	  }

	  92.00000000000001% {

		-webkit-transform: translate(5px, 5px);

				transform: translate(5px, 5px);

	  }

	  94% {

		-webkit-transform: translate(3px, 2px);

				transform: translate(3px, 2px);

	  }

	  96% {

		-webkit-transform: translate(5px, 1px);

				transform: translate(5px, 1px);

	  }

	  98% {

		-webkit-transform: translate(2px, 5px);

				transform: translate(2px, 5px);

	  }

	  100% {

		-webkit-transform: translate(1px, 5px);

				transform: translate(1px, 5px);

	  }

	  1% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  1.5% {

		-webkit-transform: scaleY(3) skewX(-60deg);

				transform: scaleY(3) skewX(-60deg);

	  }

	  2% {

		-webkit-transform: scaleY(1) skewX(0deg);

				transform: scaleY(1) skewX(0deg);

	  }

	  51% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

	  }/*

	  52% {

		-webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

				transform: scaleX(1.5) scaleY(0.2) skewX(80deg);

	  }*/

	  53% {

		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);

				transform: scaleX(1) scaleY(1) skewX(0deg);

	  }

	}

	@-webkit-keyframes bg-move {

	  0% {

		background-position: 0 0;

	  }

	  100% {

		background-position: 0 -32px;

	  }

	}

	@keyframes bg-move {

	  0% {

		background-position: 0 0;

	  }

	  100% {

		background-position: 0 -32px;

	  }

	}



/*心跳A*/

.heartbeat-playA {-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-name: heartbeat-playA;  animation-name: heartbeat-playA;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}

	@-webkit-keyframes heartbeat-playA {   

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

		40%  { -webkit-transform: scale(0.99); transform: scale(0.99); filter:brightness(100%);} 

		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 

		80%  { -webkit-transform: scale(0.98); transform: scale(0.98); filter:brightness(100%);}

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

	}

	@keyframes heartbeat-playA { 

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

		40%  { -webkit-transform: scale(0.99); transform: scale(0.99); filter:brightness(100%);} 

		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 

		80%  { -webkit-transform: scale(0.98); transform: scale(0.98); filter:brightness(100%);}

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

	}

	

	

.expandOpen{

	animation-name: expandOpen;

	-webkit-animation-name: expandOpen;	



	animation-duration: 1.2s;	

	-webkit-animation-duration: 1.2s;



	animation-timing-function: ease-out;	

	-webkit-animation-timing-function: ease-out;



	backface-visibility: visible !important;	

	-webkit-backface-visibility: visible !important;	

}



@keyframes expandOpen {

	0% {

		transform: scale(1.8);

		opacity: 0.0;		

	}

	50% {

		transform: scale(0.95);

		opacity:1;

		

	}	

	80% {

		transform: scale(1.05);

	}

	90% {

		transform: scale(0.98);

	}	

	100% {

		transform: scale(1);

	}			

}



@-webkit-keyframes expandOpen {

	0% {

		-webkit-transform: scale(1.8);

		opacity: 0.0;		

	}

	50% {

		-webkit-transform: scale(0.95);

		-webkit-opacity:1;

	}	

	80% {

		-webkit-transform: scale(1.05);

	}

	90% {

		-webkit-transform: scale(0.98);

	}	

	100% {

		-webkit-transform: scale(1);

	}					

}







.fireplay {-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-name: fireplay;  animation-name: fireplay;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite; -webkit-animation-direction: alternate;animation-direction: alternate;}

@-webkit-keyframes fireplay { 

 0%    { transform: scale(1); }

 50%    { transform: scale(0.8); }

 100%  { transform: scale(1); }

}



@keyframes fireplay {

 0%    { transform: scale(1); }

 50%    { transform: scale(0.8); }

 100%  { transform: scale(1); }

	 }







.rocketplay {-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-name:rocketplay;  animation-name:rocketplay;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;     animation-timing-function: ease-in-out;      -webkit-animation-timing-function: ease-in-out;}

@-webkit-keyframes rocketplay { 

	  0%   { -webkit-transform: scale(1) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg); transform: scale(1) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg);}

	  50% { -webkit-transform: scale(1) rotate(360deg) translateX(2px) translateY(0.5px) rotate(-360deg); transform: scale(1) rotate(360deg) translateX(2px) translateY(0.5px) rotate(-360deg);}

	  100%   { -webkit-transform: scale(1) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg); transform: scale(1) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg);}

}



@keyframes rocketplay {

	  0%   { -webkit-transform: scale(1) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg); transform: scale(1) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg);}

	  50% { -webkit-transform: scale(1) rotate(360deg) translateX(2px) translateY(0.5px) rotate(-360deg); transform: scale(1) rotate(360deg) translateX(2px) translateY(0.5px) rotate(-360deg);}

	  100%   { -webkit-transform: scale(1) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg); transform: scale(1) rotate(0deg) translateX(2px) translateY(0px) rotate(0deg);}

	 }