.bg-animation {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  background-color: #0b0c18;
}

.bg-top-circle {
  position: absolute;
  left: 50%;
  top: 60px;
  z-index: 3;
  width: 320px;
}

@media (min-width: 576px) {

  .bg-top-circle {
    top: 0px;
    width: 750px;
  }
}

.bg-top-circle {
  transform: translateX(-50%);
}

.moving-curve {
  position: absolute;
  right: -227px;
  top: 300px;
  z-index: 2;
  filter: blur(30px);
  animation: moving 8s ease-in-out infinite forwards;
}

.bg-layer {
  background: linear-gradient(
      179deg,
      #0b0c18 8.28%,
      rgba(11, 12, 24, 0.05) 54.58%,
      #0b0c18 99.24%
    ),
    url('/static/I_004/images/index/bg-linear.jpg') lightgray 50% / cover no-repeat;
  position: absolute;
  top: 156px;
  z-index: 1;
  height: 800px;
  width: 100%;
}

@media (min-width: 768px) {

  .bg-layer {
    height: 1000px;
  }
}

@media (min-width: 1024px) {

  .bg-layer {
    height: 1231px;
  }
}

.bg-layer {
  filter: blur(10px);
}

@keyframes moving {
  0 {
    transform: translateY(0) translateX(-227px);
    filter: blur(30px);
  }
  50% {
    transform: translateY(400px) translateX(-20%);
    filter: blur(35px);
  }
  100 {
    transform: translateY(0) translateX(-227px);
    filter: blur(30px);
  }
}

/*# sourceMappingURL=bg-animation.css.map */