@charset "utf-8";

/******* Fonts Import Start **********/
/* @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); */
/********* Fonts Face CSS End **********/

/******* Middle section CSS Start ******/
/* -------- Landing page ------- */

.promotion-sub {
  background-color: #00000050;
  max-width: 100px;
  padding: 0.3rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: var(--color-w65);
}
/******** Middle section CSS End *******/

/* index logo slider */

.slider {
  width: 100%;
  padding: 10px; /* 上下留點間距 */
}

.slide-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 手機預設6列 */
  gap: 16px; /* 圖片間距 */
}

.slide img {
  width: 100%;
  height: auto;
  object-fit: contain; /* 保持圖片比例 */
}

.slide img {
  width: 100%;
  height: auto;
  object-fit: contain;         /* 保持圖片比例 */
  filter: brightness(60%);     /* 預設圖片較暗 */
  transition: filter 0.3s ease; /* 平滑過渡效果 */
}

.slide img:hover {
  filter: brightness(100%);    /* 滑鼠懸停恢復原本亮度 */
}

/* 電腦版 (螢幕寬度 >= 768px) 顯示8張圖 */
@media (min-width: 768px) {
  .slide-track {
    grid-template-columns: repeat(8, 1fr);
  }
}


/***** responsive css Start ******/

@media (min-width: 992px) and (max-width: 1199px) {


  /* -------- Landing page ------- */
}

@media (min-width: 768px) and (max-width: 991px) {

  /* -------- Landing page ------- */
}