@charset "UTF-8";
* {
  padding: 0px;
  margin: 0px;
}

.showEffect {
  position: fixed;
  right: 2%;
  top: 40%;
  z-index: 999999;
  width: 6%;
  opacity: 0.5;
}

.showEffect:hover {
  opacity: 1;
  cursor: pointer;
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.try-animation {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url("../images/back.png");
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 2147483647;
  display: none;
  /* 从左侧进场急刹车动画 */
  /* 从右侧进场急刹车动画 */
}
.try-animation img {
  max-width: inherit;
}
.try-animation .delete {
  position: absolute;
  right: 10%;
  top: 10%;
  z-index: 9000;
}
.try-animation .delete:hover {
  opacity: 0.6;
  cursor: pointer;
}
.try-animation .yhs {
  position: absolute;
  z-index: 10;
  top: 10%;
  left: 0;
  width: 100%;
  height: 100%;
}
.try-animation .yhs img {
  position: absolute;
  z-index: 20000000000000;
}
.try-animation .yhs .yh1 {
  width: 6%;
  left: 0;
  bottom: 0;
  margin-left: -3%;
  margin-bottom: 29%;
  z-index: 3000000;
  animation: shoot 5s linear infinite;
  -webkit-animation: shoot 5s linear infinite;
}
.try-animation .yhs .yh2 {
  width: 6.98%;
  bottom: 0;
  left: 35.16%;
  margin-bottom: 15%;
  animation: shoot 4s linear infinite;
  -webkit-animation: shoot 4s linear infinite;
}
.try-animation .yhs .yh3 {
  width: 3.75%;
  right: 45.83%;
  top: 0;
  padding-top: 2.6%;
  animation: shoot 6s linear infinite;
  -webkit-animation: shoot 6s linear infinite;
}
.try-animation .try-img1 {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -10px;
  opacity: 0;
}
.try-animation .try-img2-box {
  padding-bottom: 0%;
  position: absolute;
  width: 100%;
  bottom: 0;
  overflow: hidden;
  z-index: 1000;
}
.try-animation .try-img2 {
  width: 57.4%;
  position: absolute;
  right: 0;
  bottom: 0;
}
.try-animation .try-img6 {
  width: 23.96%;
  position: absolute;
  right: 19.64%;
  bottom: 0;
  opacity: 0;
  padding-bottom: 3.28%;
}
.try-animation .try-img11 {
  width: 10.99%;
  position: absolute;
  left: 17.08%;
  padding-top: 5.3%;
  opacity: 0;
  animation: showfu 0.6s linear forwards 0.6s;
  -webkit-animation: showfu 0.6s linear forwards 0.6s;
}
.try-animation .try-img12 {
  width: 9.06%;
  position: absolute;
  left: 24.9%;
  top: 0;
  padding-top: 12.88%;
  opacity: 0;
  animation: showfu 0.6s linear forwards 0.9s;
  -webkit-animation: showfu 0.6s linear forwards 0.9s;
}
.try-animation .try-img13 {
  width: 10.52%;
  position: absolute;
  left: 16.56%;
  top: 0;
  padding-top: 15.6%;
  opacity: 0;
  animation: showfu 0.6s linear forwards 1.2s;
  -webkit-animation: showfu 0.6s linear forwards 1.2s;
}
.try-animation .try-img14 {
  width: 10.94%;
  position: absolute;
  left: 24.11%;
  top: 0;
  padding-top: 21.3%;
  opacity: 0;
  animation: showfu 0.6s linear forwards 1.5s;
  -webkit-animation: showfu 0.6s linear forwards 1.5s;
}
.try-animation .try-img15 {
  width: 9.48%;
  position: absolute;
  right: 0;
  top: 0;
}
.try-animation .try-img10 {
  width: 6.56%;
  position: absolute;
  left: 16.82%;
  top: 0;
  padding-top: 27.6%;
  opacity: 0;
  animation: rotateInTop 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.8s;
}
.try-animation .try-img9 {
  width: 3.7%;
  position: absolute;
  left: 29.06%;
  top: 0;
  padding-top: 7.7%;
  opacity: 0;
  animation: showfu 0.6s linear forwards 1.7s;
  -webkit-animation: showfu 0.6s linear forwards 1.7s;
}
.try-animation .try-img16 {
  width: 4.53%;
  position: absolute;
  left: 12.92%;
  bottom: 0;
  padding-bottom: 11.69%;
  opacity: 0;
  animation: rotateInTop 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 2s;
}
.try-animation .try-img17 {
  width: 6.67%;
  position: absolute;
  right: 4.43%;
  bottom: 0;
  padding-bottom: 22%;
  z-index: 300000;
  opacity: 0;
  animation: rotateInTop 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 2.2s;
}
.try-animation .try-number img {
  position: absolute;
}
.try-animation .try-number .try-img4 {
  width: 10.78%;
  left: 44.32%;
  bottom: 0;
  padding-bottom: 22.98%;
  opacity: 0;
  animation: rotateInTop 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.4s;
}
.try-animation .try-number .try-img3 {
  width: 14.17%;
  right: 33.7%;
  bottom: 0;
  padding-bottom: 21.5%;
  opacity: 0;
  animation: rotateInTop 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.6s;
}
.try-animation .try-number .try-img8 {
  width: 10.36%;
  right: 25.57%;
  bottom: 0;
  padding-bottom: 22.98%;
  opacity: 0;
  animation: rotateInTop 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.8s;
}
.try-animation .try-number .try-img5 {
  width: 10.52%;
  right: 15.4%;
  bottom: 0;
  padding-bottom: 22.98%;
  opacity: 0;
  animation: rotateInTop 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 2s;
}
@keyframes showfu {
  0% {
    opacity: 0;
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
  }
  80% {
    opacity: 1;
    border-radius: 0%;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
@keyframes bounceInLeft {
  0% {
    transform: translateX(-300%) rotate(-360deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes bounceInRight {
  0% {
    transform: translateX(300%) rotate(360deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes ballBounce {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  20% {
    transform: translateY(-20px) rotate(5deg);
  }
  40% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}
@keyframes ballBounceL {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  20% {
    transform: translateY(-20px) rotate(-5deg);
  }
  40% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-30deg) translateY(30px);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) translateY(0);
  }
}
@keyframes rotateInRight {
  from {
    opacity: 0;
    transform: rotate(20deg) translateY(30px);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) translateY(0);
  }
}
@keyframes rotateInTop {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rotate3D {
  0% {
    transform: rotateY(0deg);
  }
  15% {
    transform: rotateY(90deg);
  }
  25% {
    transform: rotateY(0deg);
  }
}
@keyframes shoot {
  0% {
    transform: translate3d(0%, 500%, 0) scale(0.02);
    background-color: #FFE896;
    border-radius: 50%;
  }
  79% {
    background-color: #FFE896;
    border-radius: 50%;
  }
  80% {
    background-color: inherit;
    transform: translate3d(0%, 0%, 0) scale(0.02);
    border-radius: 50%;
  }
  90% {
    transform: translate3d(0%, 0%, 0) scale(1);
    border-radius: 50%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}