:root {
  /* 定義輪播參數 */
  --s: 6;          /* 總共有幾張圖 (對應 HTML 的 li 數量) */
  --w: 200;         /* 每一張圖預計移動的寬度 (單位: px) */
  --speed: 8s;      /* 每一張切換的速度 */
}

.g-container {
  width: 1200px;
  margin: 15px auto;
  height: 400px;
  background: #ebebeb;
  /* 移除此處的 overflow: hidden，讓標題陰影或定位不受限 */
  box-sizing: border-box;
  position: relative;
  padding-top: 45px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.g-title {   
  position: absolute;
  top: 0;
  left: 0; /* 確保從最左邊開始 */
  width: 100%; 
  background-color: #1b5d69;
  color: #fff;
  padding: 8px 0;
  text-align: center;
  z-index: 10;
  font-size: 18px;
  font-weight: bold;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.g-scroll-wrapper {
  margin: 0 15px;      /* 關鍵：左右各留出 15px 間距 */
  overflow: hidden;    /* 動畫在此處被切斷，形成不貼邊的效果 */
}

.g-scroll-wrapper ul {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  list-style: none;
  /* 核心動畫：向左位移總長度 */
  animation: move calc(var(--speed) * var(--s)) linear infinite;
}

.g-scroll-wrapper ul:hover {
  animation-play-state: paused; /* 滑鼠移入時暫停，方便使用者點擊 */
}

.g-scroll-wrapper ul li {
  flex-shrink: 0;
  width: 250px; /* 設定固定的寬度，方便計算位移 */
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
}

.g-scroll-wrapper ul li a {
  text-decoration: none;
  color: #333;
  font-size: 15px;
  display: block;
  line-height:140%;
}

.g-scroll-wrapper ul li a:hover{
  color:#B506A4;
}

.g-scroll-wrapper ul li img {
  border: 2px #a3a3a3 solid;
  height: 200px;
  width: auto;
  margin-bottom: 5px;
}

/* 跑馬燈位移動畫 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 位移長度 = 圖片張數 * 每張寬度 */
    transform: translateX(calc(var(--s) * 250 * -1px));
  }
}