.scene-6 {
    opacity: 0;
  }
  
  .scene6-content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 86rem;
    height: 32rem;
    transform: translate(-50%, -50%);
  }
  
  .scene6-text {
    position: absolute;
    left: 50%;
    top: 0;
    width: 44rem;
    transform: translateX(-50%);
    text-align: center;
    z-index: 3;
  }
  
  .scene6-line {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 0.55rem;
  }
  
  .scene6-dot-field,
.scene6-kolam-layer {
  position: absolute;
  margin-left: 2rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 15rem;
  z-index: 1;
}
  
  .scene6-kolam-layer {
    z-index: 2;
    pointer-events: none;
  }
  
  .scene6-dot {
    position: absolute;
    width: 0.24rem;
    height: 0.24rem;
    border-radius: 50%;
    background: var(--yellow);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  
  .scene6-dot.visible {
    animation: scene6DotIn 0.35s ease forwards;
  }
  .scene6-kolam-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  @keyframes scene6DotIn {
    to {
      opacity: 0.75;
      transform: translate(-50%, -50%) scale(1);
    }
  }
  
  @media (max-width: 56.25rem) {
    .scene6-content {
      width: 84vw;
      height: 30rem;
    }
  
    .scene6-text {
      width: 82vw;
    }
  
    .scene6-dot-field,
    .scene6-kolam-layer {
      height: 15rem;
    }
  }