*{padding: 0; 
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #ffffff;
}
.container{
    width: 130vmin;
    position: absolute;
    
    top: 30%;
    left: 30%;
    overflow: hidden;
}
.wrapper{
    width : 100%;
    height: 100%;
    
    display: flex;
    animation : slide 25s infinite;
}
/*此為首頁跑馬燈照片動畫撥放調整編碼,增加slide時,除了時間段要分割外，也需要保留停留時間，第一個時間百分比表示slide 出現時間，第二個時間百分比表示停留時間*/
@keyframes slide {
    0% { transform: translateX(0); }
  14.28% { transform: translateX(0); }
  19.28% { transform: translateX(-100%); }
  33.33% { transform: translateX(-100%); }
  38.33% { transform: translateX(-200%); }
  52.38% { transform: translateX(-200%); }
  57.38% { transform: translateX(-300%); }
  71.43% { transform: translateX(-300%); }
  76.43% { transform: translateX(-400%); }
  90.48% { transform: translateX(-400%); }
  95.48% { transform: translateX(-500%); }
  100%  { transform: translateX(-600%); }
}


img{
    
    width: 100%;
    height: 100%;
    
    
    
}


.carousel-container {
  display: none;
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: auto;
}



.carousel-slide {
  display: flex;
  width: 700vw; /* 7張圖片，每張佔100vw */
  animation: scrollCarouselMobile 25s infinite;
}

.carousel-slide img {
  width: 100vw;
  flex-shrink: 0;
  object-fit: contain;
}

/* Slideshow 效果 - 每張圖片停頓切換 */
@keyframes scrollCarouselMobile {
  0%    { transform: translateX(0); }
  14.28%  { transform: translateX(0); }
  17.13%  { transform: translateX(-100vw); }
  28.56%  { transform: translateX(-100vw); }
  31.41%  { transform: translateX(-200vw); }
  42.84%  { transform: translateX(-200vw); }
  45.69%  { transform: translateX(-300vw); }
  57.12%  { transform: translateX(-300vw); }
  59.97%  { transform: translateX(-400vw); }
  71.4%   { transform: translateX(-400vw); }
  74.25%  { transform: translateX(-500vw); }
  85.68%  { transform: translateX(-500vw); }
  88.53%  { transform: translateX(-600vw); } /* 最後一張（複製的第一張） */
  100%    { transform: translateX(0); } /* 平滑回原點 */
}

/* 媒體查詢：手機版 */
@media (max-width: 768px) {
  .container {
    display: none !important;
  }
  .carousel-container {
    display: block !important;
  }
}