.scroll-wrapper {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    .bg-layer img,
    .mask-layer img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .bg-layer {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      background-color: aquamarine;
    }

    
    .mask-layer {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 50;
      width: 100%;
      height: 100%;

      /* 使用遮罩圖像 */
      -webkit-mask-image: url('../image/mask.webp');
      mask-image: url('../image/mask.webp');
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 32702.6px;
      mask-size: 32702.6px;
      -webkit-mask-position: -29432.3px center;
      mask-position: -29432.3px center;

      pointer-events: none;

      /* 加入動畫效果 */
      animation: revealMask 2.5s ease-out forwards;
      -webkit-animation: revealMask 2.5s ease-out forwards;
    }
    @keyframes revealMask {
      from {
        -webkit-mask-position: 29432.3px center;
                mask-position: 29432.3px center;
      }
      to {
        -webkit-mask-position: -29432.3px center;
                mask-position: -29432.3px center;
      }
    }

    @media (max-width:1100px){
        .mask-layer{
            animation-play-state:paused
        }
    }