#loading-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3D5A8D;
    display: none;          /* 預設隱藏 */
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3D5A8D;
  }
  
  .box {
    position: relative;
    width: 800px;  /* 可調整 */
    height: 600px;
    overflow: hidden;
  }
  
  .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
  }
  
  /* img1: 顯示前半段 */
  .img1 {
    animation: swap1 0.4s infinite steps(1);
  }

  /* img2: 顯示後半段 */
  .img2 {
    animation: swap2 0.4s infinite steps(1);
  }

  @keyframes swap1 {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes swap2 {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Respect user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .img1, .img2 {
      animation: none;
      opacity: 1;
    }
  }