.injection-banner {
  overflow: hidden;
  position: relative;
}

.injection-banner .img-group-wrapper {
  overflow: hidden;
  position: relative;
  width: min(90vw, 720px);
  aspect-ratio: 720 / 900;
  margin-inline: auto;
}

.injection-banner .img-group-wrapper p {
  font-size: clamp(12px, 1vw, 18px);
  margin: 0;
}

.injection-banner .img-group-wrapper::before {
  content: "";
  position: absolute;

  width: 600px;
  height: 600px;

  border: 1px solid rgba(26, 50, 69, 0.12);
  border-radius: 50%;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: -3;

  animation: floatCircleBefore 12s ease-in-out infinite;
}

.injection-banner .img-group-wrapper::after {
  content: "";
  position: absolute;

  width: 400px;
  height: 400px;

  border: 1px solid rgba(26, 50, 69, 0.2);
  border-radius: 50%;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: -2;

  animation: floatCircleAfter 10s ease-in-out infinite reverse;
}

@keyframes floatCircleBefore {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(0.5);
  }

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

@keyframes floatCircleAfter {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
  }

  50% {
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    transform: translate(-50%, -50%) scale(0.5);
  }
}

.top-img-box {
  width: 12.5%;
  height: auto;
  opacity: 0;
  position: absolute;
  top: 17.4%;
  right: 43.6%;
}

.top-img-box img {
  width: 100%;
  height: 100%;
  display: block;
}

.mid-top-img-box {
  width: 12.5%;
  height: auto;
  opacity: 0;
  position: absolute;
  top: 20%;
  right: 43.6%;
}

.mid-top-img-box img {
  width: 100%;
  height: 100%;
  display: block;
}

.mid-bottom-img-box {
  width: 12.5%;
  height: auto;
  opacity: 0;
  position: absolute;
  top: 50.5%;
  right: 43.6%;
}

.mid-bottom-img-box img {
  width: 100%;
  height: 100%;
  display: block;
}

.bottom-img-box {
  width: 12.5%;
  height: auto;
  opacity: 0;
  position: absolute;
  top: 74.5%;
  right: 43.6%;
}

.bottom-img-box img {
  width: 100%;
  height: 100%;
  display: block;
}

.degree-adjustment-screw-text {
  position: absolute;
  top: 3%;
  right: 19%;
}

.degree-adjustment-screw-icon {
  width: 16.6%;
  height: auto;
  position: absolute;
  top: 6.5%;
  right: 28.5%;
}

.degree-adjustment-screw-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.inject-button-text {
  position: absolute;
  top: 11.5%;
  left: 23.5%;
}

.inject-button-icon {
  width: 13.5%;
  height: auto;
  position: absolute;
  top: 12.5%;
  left: 36%;
}

.inject-button-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.indicator-text {
  position: absolute;
  top: 28.6%;
  right: 20%;
}

.indicator-icon {
  width: 22%;
  height: auto;
  position: absolute;
  top: 20.7%;
  right: 22%;
}

.indicator-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.display-window-text {
  position: absolute;
  top: 30%;
  left: 18%;
}

.display-window-icon {
  width: 21%;
  height: auto;
  position: absolute;
  top: 23%;
  left: 24%;
}

.display-window-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pen-body-text {
  position: absolute;
  top: 47%;
  right: 19.2%;
}

.pen-body-icon {
  width: 15.6%;
  height: auto;
  position: absolute;
  top: 48%;
  right: 28.2%;
}

.pen-body-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.grading-text {
  position: absolute;
  bottom: 37%;
  right: 2%;
}

.grading-icon {
  width: 31%;
  height: auto;
  position: absolute;
  bottom: 41%;
  right: 14%;
}

.grading-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.protector-text {
  position: absolute;
  bottom: 43%;
  left: 25%;
}

.protector-icon {
  width: 16%;
  height: auto;
  position: absolute;
  bottom: 40%;
  left: 34%;
}

.protector-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.needle-joint-text {
  position: absolute;
  bottom: 24%;
  left: 21%;
}

.needle-joint-icon {
  width: 22.6%;
  height: auto;
  position: absolute;
  bottom: 28%;
  left: 28%;
}

.needle-joint-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pen-cap-text {
  position: absolute;
  bottom: 23.5%;
  right: 28%;
}

.pen-cap-icon {
  width: 13%;
  height: auto;
  position: absolute;
  bottom: 20%;
  right: 33%;
}

.pen-cap-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.injection-banner svg path {
  will-change: stroke-dashoffset;
}

.injection-banner svg circle {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
}

.degree-adjustment-screw-text,
.inject-button-text,
.indicator-text,
.display-window-text,
.pen-body-text,
.grading-text,
.protector-text,
.needle-joint-text,
.pen-cap-text {
  opacity: 0;
  transform: translate(50%, -50%);
}

@media (max-width: 576px) {
  .degree-adjustment-screw-text {
    position: absolute;
    top: 2%;
    right: 19%;
  }
  .inject-button-text {
    position: absolute;
    top: 10.5%;
    left: 20.3%;
  }

  .pen-body-text {
    position: absolute;
    top: 47%;
    right: 15.2%;
  }
  .protector-text {
    position: absolute;
    bottom: 43%;
    left: 20%;
  }
  .pen-cap-text {
    position: absolute;
    bottom: 23.5%;
    right: 25%;
  }

  .needle-joint-text {
    position: absolute;
    bottom: 24%;
    left: 18%;
  }
}