/* =========================================================
   Index Banner (eislideshow) — 完整修復版 + RWD + Header Safe Area
   目標：
   1) 修正 li position 衝突（必須 absolute 疊放）
   2) 固定高度 banner（桌機 520px / 手機 370px）
   3) 文字在左、mainImg 在右（row-reverse）
   4) 不用負 margin-top、不用捲動
   5) bgImg 動畫不影響 mainImg 與文字
   6) Header Safe Area：避免內容被 header(約80px)遮住
   ========================================================= */

/* ---- 可調參數（集中管理） ---- */
:root{
  --banner-h-desktop: 400px;
  --banner-h-mobile: 370px;
  --header-safe-h: 0px;           /* ✅你的 header 高度（通常是 80px，不是 80 公分） */
  --banner-pad-x-desktop: 15px;
  --banner-pad-x-tablet: 15px;
  --banner-pad-x-mobile: 16px;
  --banner-gap-desktop: 24px;
  --banner-gap-tablet: 18px;
  --banner-gap-mobile: 12px;
}

/* ---- transitions（維持你原本） ---- */

#indexbanner img,
#indexbanner .bannerConterBox,
#indexbanner .bannerConterBox *{
  transition: none !important;
}

#indexbanner .moreBut{
  transition: background-color 0.5s, color 0.5s !important;
}

/* ---- indexbanner 根 ---- */
#indexbanner {
  display: block;
  width: 100%;
  position: relative;
  background: var(--color_B);
  overflow: hidden;
  z-index: 1;
}

/* =========================================================
   Slider 高度鏈：ei-slider → ul → li 需一致
   ========================================================= */
.ei-slider {
  position: relative;
  width: 100%;
  height: var(--banner-h-desktop); /* 桌機固定高度 */
  margin: 0 auto;
  overflow: hidden;
}

/* ul 必須滿高，li 才能 100% */
.ei-slider ul.ei-slider-large {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ✅核心修復：li 必須 absolute 疊放（不要再被 relative 蓋掉） */
.ei-slider ul.ei-slider-large > li {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* loading layer（維持你原本） */
.ei-slider-loading {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 500;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  text-align: center;
  line-height: 400px;
}

/* =========================================================
   背景圖 bgImg：只鎖定 bgImg，避免影響 mainImg
   ========================================================= */
.bgImg{
  position: absolute !important;
  top: -2%;
  left: -2%;
  width: 104% !important;
  height: 104% !important;
  object-fit: cover;
  z-index: 0 !important;

  /* 動畫更順、避免次像素抖動露縫 */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ⚠️你原本會套到所有 li img，會害 mainImg 被 height:100% 拉爆
   這裡改成「不要強制 height:100%」，讓 mainImg 自己算高度 */
#indexbanner li img {
  width: 100%;
  height: auto;            /* ✅避免把 mainImg 拉爆 */
  position: relative;
  overflow: hidden;
  z-index: 4;
}
/* bgImg 仍要 100% 高 */
#indexbanner li img.bgImg{
  position: absolute !important;
  inset: 0 !important;

  /* ✅蓋掉 JS 寫進去的 marginLeft/marginTop */
  margin: 0 !important;

  /* ✅蓋掉 JS 寫進去的 width/height（避免縮小後偏移/露白） */
  width: 100% !important;
  height: 100% !important;

  /* ✅雙保險：即使被設成奇怪尺寸，也至少不會露白 */
  min-width: 100% !important;
  min-height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  /* ✅避免次像素縫 */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;

  z-index: 0 !important;
  display: block;
  transform: scale(1.06);            /* ✅基準放大一點點 */
  transform-origin: center center;
}

#indexbanner li img.bgImg[class*="bgAnim-"]{
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
}

/* mainImg 圖片：明確指定 */
#indexbanner .bannerConterBox .mainImg img{
  width: 100%;
  height: auto !important;
  display: block;
}

/* =========================================================
   bgImg 動畫
   ========================================================= */
   keyframes zoomIn   { from{transform:scale(1.06)} to{transform:scale(1.16)} }
   @keyframes zoomOut  { from{transform:scale(1.18)} to{transform:scale(1.06)} }
   @keyframes panLeft  { from{transform:scale(1.12) translateX(1.5%)} to{transform:scale(1.18) translateX(-1.5%)} }
   @keyframes panRight { from{transform:scale(1.12) translateX(-1.5%)} to{transform:scale(1.18) translateX(1.5%)} }

.bgAnim-zoomIn   { animation: zoomIn 14s ease-in-out both; }
.bgAnim-zoomOut  { animation: zoomOut 14s ease-in-out both; }
.bgAnim-panLeft  { animation: panLeft 14s ease-in-out both; }
.bgAnim-panRight { animation: panRight 14s ease-in-out both; }

/* =========================================================
   內容層 bannerConterBox（文字左、圖右、垂直置中 + Header Safe）
   ✅策略：bannerConterBox 本體往下推 header-safe-h，
          並用 calc 扣掉可用高度，在剩餘區域做置中
   ========================================================= */
#indexbanner .bannerConterBox {
  position: relative !important;
  top: auto !important;
  margin-top: 0 !important;

  width: 100%;
  /* ✅扣掉 header 安全區後的可用高度 */
  height: calc(100% - var(--header-safe-h));
  /* ✅整個內容區往下推開 header */
  margin-top: var(--header-safe-h);

  z-index: 1;

  display: flex;
  flex-direction: row-reverse; /* ✅ mainImg 右、文字左 */
  align-items: center;         /* ✅ 垂直置中 */
  justify-content: flex-start; /* 需要置中整組可改成 center */
  gap: var(--banner-gap-desktop);

  box-sizing: border-box;
  padding: 0 var(--banner-pad-x-desktop);

  transform-origin: center center;

  overflow: hidden; /* 不捲動 */

}

/* 子區塊內部也垂直置中 */
.bannerConterBox .mainImg,
.bannerConterBox .indexbanner_textBox{
  display: flex;
  flex-direction: column;
  justify-content: center;
}


#indexbanner .bannerConterBox .mainImg {
  width: 60%;
  max-width: 720px;
  float: none !important;
}

/* 文字區 */
#indexbanner .indexbanner_textBox {
  width: 50%;
  text-align: left;
  align-items: flex-start;
}

/* 標題文字（沿用你原本） */
#indexbanner h1,#indexbanner h2,#indexbanner h3 {
  position: relative;
  z-index: 7;
  color: #fff;
  margin-top: 10px;
}
#indexbanner h1{
  font-weight: bold;
  letter-spacing: 0.03em;
  font-size: 45px;
  line-height: 1em;
}
#indexbanner h2 { font-size: 35px; }

/* 按鈕（沿用你原本） */
#indexbanner .moreBut{
  display: inline-block;
  width: auto;
  padding: 10px 20px;
  background-color: var(--color_M1);
  text-align: center;
  color: #fff;
  margin-top: 20px;
  font-size: var(--size_normal);
}
#indexbanner .moreBut:hover{
  background-color:#15569b;
}

#indexbanner .moreBut.moreButRight{
  margin-left: 300px;
}

/* =========================================================
   Thumbs（你原本是 display none，保留）
   ========================================================= */
.ei-slider-thumbs {
  position: absolute;
  width: 90px;
  bottom: 20px;
  right: calc(50% - 45px);
  z-index: 50;
  display: none !important;
}

/* =========================================================
   Arrow（置中）
   ========================================================= */
.ei-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  line-height: 50px;
  text-align: center;
  z-index: 999;
  user-select: none;
}
.ei-arrow-prev{ left: 15px; }
.ei-arrow-next{ right: 15px; }

.ei-arrow.disabled{
  opacity: 0.25;
  pointer-events: none;
}
.ei-dragging, .ei-dragging *{
  user-select: none;
  -webkit-user-select: none;
}

/* 1) 整組在可用區域置中（不是靠左） */
#indexbanner .bannerConterBox{
  justify-content: center !important;  /* ✅整組置中 */
  gap: 40px !important;                /* ✅拉開文字與圖距離 */
  padding-left: 64px !important;       /* ✅左右留白更均衡 */
  padding-right: 64px !important;
}

/* 2) 左文右圖的寬度用更穩的方式：flex-basis + clamp，避免偏移 */
#indexbanner .indexbanner_textBox{
  width: auto !important;              /* 覆蓋你原本 width:40% */
  flex: 0 1 clamp(320px, 38vw, 520px); /* ✅文字區寬度 */
  text-align: left;
  align-items: flex-start;
}

#indexbanner .bannerConterBox .mainImg{
  width: auto !important;              /* 覆蓋你原本 width:55% */
  flex: 0 1 clamp(320px, 42vw, 720px); /* ✅圖區寬度 */
  max-width: 720px;
}

/* 3) 確保左右不會被挤到貼邊 */
#indexbanner .bannerConterBox .mainImg img{
  max-width: 100%;
  height: auto !important;
}

/* =========================================================
   RWD：<= 1100px（平板/小桌機）
   ========================================================= */
@media only screen and (max-width: 1100px) {
  #indexbanner .bannerConterBox{
    padding: 0 var(--banner-pad-x-tablet);
    gap: var(--banner-gap-tablet);
  }
  #indexbanner .indexbanner_textBox { width: 50%; }
  #indexbanner .bannerConterBox .mainImg { width: 50%; }
  #indexbanner h1{ font-size: 38px; }
  #indexbanner h2{ font-size: 28px; }
}

/* =========================================================
   RWD：<= 776px（手機）
   - 高度改 370px
   - 改成上下排
   - Header Safe 仍生效（calc + margin-top）
   ========================================================= */


@media screen and (max-width: 776px){

  :root{
    --header-safe-h-mobile: 0px; /* 手機 header 實際高度，常見 56/64/80 */
  }

  /* ✅讓整個 banner 避開 header（header 若是 fixed/sticky 必備） */
  #indexbanner{
    padding-top: var(--header-safe-h-mobile);
    box-sizing: border-box;
  }
  .ei-slider{
    height: calc(var(--banner-h-mobile) + var(--header-safe-h-mobile)) !important;
  }

  /* ✅維持左右排版（不要上下排） */
  #indexbanner .bannerConterBox{
    flex-direction: row-reverse !important; /* 圖右文左 */
    justify-content: center !important;     /* 整組置中 */
    align-items: center !important;
    height: 100% !important;
    margin-top: -40px !important;              /* 取消你之前 margin-top safe */
    padding-top: 0 !important;             /* 不再在 box 裡做 safe */
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 12px !important;
  }

  /* ✅左文字：加大字、提高可讀性 */
  #indexbanner .indexbanner_textBox{
    width: auto !important;
    flex: 0 1 100% !important;     /* 文字稍微多一點空間 */
    text-align: left !important;
    align-items: flex-start !important;

    /* 清掉舊手機版負 margin / 固定高度 */
    margin-top: 0 !important;
    height: auto !important;
    left: auto !important;
  }

  #indexbanner h1{
    font-size: 30px !important;
    line-height: 1.15 !important;
    margin-top: 0 !important;
  }
  #indexbanner h2{
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
  #indexbanner h3{
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  /* ✅右圖片：縮小一點，避免擠到文字 */
  #indexbanner .bannerConterBox .mainImg{
    width: auto !important;
    flex: 0 1 80% !important;
    max-width: none !important;
  }
  #indexbanner .bannerConterBox .mainImg img{
    width: 100% !important;
    height: auto !important;
  }

  /* 按鈕：稍微放大一點，手指好按 */
  #indexbanner .moreBut{
    font-size: 14px !important;
    padding: 10px 16px !important;
    margin-top: 12px !important;
  }

  #indexbanner .moreBut.moreButRight{
    margin-left: 100px !important;
  }

  /* 箭頭縮小避免遮字 */
  .ei-arrow{
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 40px;
  }
}

/* =========================
   手機版：Header 遮蔽終極修復
   讓「整個 banner」往下避開 header
   ========================= */


/* =========================================================
   若你的 header 是 position: fixed/sticky，
   更推薦改成「整個 banner 往下推」：
   1) 取消 bannerConterBox 的 margin-top / calc
   2) 改用 #indexbanner { padding-top: var(--header-safe-h); }
   你若需要這個版本我也可以直接替你切換。
   ========================================================= */