@charset "UTF-8";
.animation-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.4588235294);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(7px);
}

.animation-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 25px;
  background: rgba(168, 168, 168, 0.3019607843);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/************* 要替換掉的 *************/
.animation {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  margin: 12px auto;
  position: relative;
  background: #FFF;
  box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  box-sizing: border-box;
  animation: shadowPulse 1.5s linear infinite;
}

@keyframes shadowPulse {
  33% {
    background: #FFF;
    box-shadow: -24px 0 var(--pc-500), 24px 0 #FFF;
  }
  66% {
    background: var(--pc-500);
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  }
  100% {
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 var(--pc-500);
  }
}
/************* 要替換掉的 *************/
@media (max-width: 576px) {
  .animation-bg {
    background: rgba(20, 20, 20, 0.1764705882);
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(0); */
  }
}/*# sourceMappingURL=animation.css.map */