.animate-box {
  position: relative;
  width: 100%;
}
.image-w {
  width: 8.1875rem;
  height: 8.875rem;
}
.top1 {
  position: absolute;
  right: 11.375rem;
  top: 6.6875rem;
  z-index: 100;
  animation: top1 9s infinite linear alternate;
}
@keyframes top1{
  0%{ top: 6.6875rem }
  100%{ top: 1.25rem }
}
.top2 {
  position: absolute;
  right: 15.4375rem;
  top: 9.9375rem;
  z-index: 99;
  animation: top2 9s infinite linear alternate;
}
@keyframes top2{
  0%{ right: 15.4375rem }
  100%{ right: 25.0625rem }
}
.top3 {
  position: absolute;
  right: 7.25rem;
  top: 9.9375rem;
  z-index: 99;
  animation: top3 9s infinite linear alternate;
}
@keyframes top3{
  /* 0%{ right: 3.3125rem }
  100%{ right: 9.5625rem } */
  0%{ right: 7.25rem }
  100%{ right: 0.3125rem }
}
.top4 {
  position: absolute;
  right: 26.875rem;
  top: 16.9375rem;
  z-index: 88;
  width: 5rem;
  height: 4.625rem;
}
.top5 {
  position: absolute;
  right: -1.625rem;
  top: 20.8125rem;
  z-index: 88;
  width: 32.5625rem;
  height: 20.345rem;
}
.top6 {
  position: absolute;
  right: -1.625rem;
  top: 19.3125rem;
  z-index: 88;
  width: 12.125rem;
  height: 10.86875rem;
}
.top7 {
  position: absolute;
  right: 14.625rem;
  top: 19.625rem;
  z-index: 88;
  /* width: 18.375rem;
  height: 12.125rem; */
  width: 16.3125rem;
  height: 10.75rem;
}
/* 黄色小球 */
.top8 { 
  position: absolute;
  right: 13rem;
  top: 21.6875rem;
  z-index: 88;
  width: 3.8125rem;
  height: 3.8125rem;
  animation: 1s top8 linear 0s infinite alternate;
}
@keyframes top8{
  from { top: 21.6875rem }
  to { top: 28.375rem }
}
/* 紫色小球 */
.top9 {
  position: absolute;
  right: -0.5rem;
  top: 37.5rem;
  z-index: 88;
  width: 3.375rem;
  height: 3.3125rem;
  animation: top9 8s infinite linear alternate;
}
@keyframes top9{
  0%{ right: -0.5rem; bottom: 11.75rem; transform:translateY(0); }
  100%{  right: 16.875rem; bottom: 0;  transform:translateY(6.25rem); }
}
/* 白色小球 */
.top10 {
  position: absolute;
  right: 19.9375rem;
  top: 26.25rem;
  z-index: 88;
  width: 6.0625rem;
  height: 6.5625rem;
}

/* 粉色正方形 */
.top11 {
  position: absolute;
  right: 22.5625rem;
  top: 38.125rem;
  z-index: 88;
  /* width: 6.0625rem;
  height: 6.5625rem; */
  width: 8.75rem;
  height: 7.9375rem;
  animation: top11 5s infinite linear alternate;
}
@keyframes top11 {
  0%{ right: 22.5625rem; bottom: 5.8125rem; transform:translateY(0); }
  100%{  right: 27.5625rem; bottom: 0;  transform:translateY(2.1875rem); }
}
.top12 {
  position: absolute;
  right: 34.875rem;
  top: 31.9375rem;
  z-index: 88;
  width: 5rem;
  height: 4.625rem;
}

/* 产品页面动画 */
.product-page .product-container .product-media .img-bg-edit {
  box-shadow: 0 0 5rem 0.4375rem #f3f3f9;
  border-radius: 1.25rem;
}
@keyframes slide-bck-center {
  0% {
  }
  100% {
    transform-style: preserve-3d;
    /* transform: perspective(18.75rem) rotateY(7deg) scale(1) translate(3.75rem, 0); */
    transform: perspective(14.8125rem) rotateZ(0deg) rotateY(7deg) scale(1) translate(3.75rem, 0px)
  }
}
@keyframes slide-bck-center1 {
  0% {
  }
  100% {
    transform-style: preserve-3d;
    transform: perspective(18.75rem) rotateY(-6deg) scale(1) translate(-1.25rem, 0px);
  }
}
@keyframes slide-bck-center2 {
  0% {
    transform-style: preserve-3d;
    transform: perspective(18.75rem) rotateY(6deg) scale(1);
  }
  100% {
  }
}
@keyframes slide-bck-center3 {
  0% {
    transform-style: preserve-3d;
    transform: perspective(18.75rem) rotateY(-6deg) scale(1);
  }
  100% {
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  /* animation: fadeInUp 1s linear; */
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
} 
.animate__fadeOut {
  /* animation: fadeOut 1s linear; */
}

.fixed-box {
  position: fixed; 
  right: 0; 
  bottom: 10rem; 
  cursor: pointer; 
  z-index: 1000
}

.animate_visible {
  animation: animateVisible 1s forwards;
}
.animate_visible_out {
  animation: animateVisibleOut 1s linear;
}

@keyframes animateVisible {
  from {
    right: -21.875rem;
    opacity: 0;
  }

  to {
    right: 9.375rem;
    opacity: 1;
  }
} 
@keyframes animateVisibleOut {
  from {
    right: 9.375rem
  }

  to {
    right: -21.875rem
  }
}