.circleBox {
  position: absolute;
  top: 55%;
  left: 62%;
  transform: translate(-50%, -50%); /* 精準置中 */
  width: 400px;
  height: 400px;

}  
.circle,
.circle1,
.circle2,
.circle3 {
    width: 100px;
    height: 100px;
    background: rgba(231, 31, 34, 0.4);
    border: 1px solid rgba(231, 31, 34, 0.15);
    border-radius: 999px;
    position: absolute;
    top: 50%;
    left: 45%;
 
}
    .circle1,
    .circle2,
    .circle3 {
      animation-name: circleChange;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    .circle1 {
      animation-delay: 1s;
    }
    .circle2 {
      animation-delay: 2s;
    }
    .circle3 {
      animation-delay: 3s;
    }
  
    @keyframes circleChange {
      0% {
        transform: scale(1);
        opacity: 0.95;
      }
      25% {
        transform: scale(2);
        opacity: 0.75;
      }
      50% {
        transform: scale(3);
        opacity: 0.5;
      }
      75% {
        transform: scale(4);
        opacity: 0.25;
      }
      100% {
        transform: scale(5);
        opacity: 0.05;
      }
    }
  }



  
  /* 雲 */
  .slide-wrap ul:first-child {
    animation: slide1 70s -35s linear infinite;
  }
  .slide-wrap ul:last-child {
    animation: slide2 70s linear infinite;
  }

  @keyframes slide1 {
    0% { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
  @keyframes slide2 {
    0% { transform: translateX(0); }
    to { transform: translateX(-200%); }
  }
  
  @media screen and (max-width:540px) {
    .slide-wrap ul li {
      width: 1600px;
      height: 291px;
    }
  }