@charset "UTF-8";
/* CSS Document */
.swiper-slide { position: relative; }
/* --- Products 整個區塊藍色背景 --- */
/* ===== Products 重構：左右分欄，上對齊，圖片貼頂 ===== */
#collapseProducts .slide_content {
  background: linear-gradient(135deg, #1E88E5 0%, #42A5F5 100%) !important;
  /* 取消整體上方 padding，讓圖片可直接貼頂；僅保留下方留白 */
  padding: 0 0 50px !important;
  min-height: 610px !important; /* 對齊圖片原始高度 */
  overflow: visible !important;
}
/* back 按鈕本身加內距，避免文字緊貼頂 */
#collapseProducts .c-navigation__back-btn {
  margin-top: 10px !important;
  margin-bottom: 18px !important;
}
/* 主要的左右分欄：改為頂端對齊 */
.Products-grid {
  align-items: flex-start !important; /* 原本垂直置中會造成圖片往下 */
  gap: 60px !important;
  margin-top: 0 !important;
}
/* 左欄自行控制頂部留白，不影響右側圖片 */
.Products-links {
  padding-top: 20px !important; /* 可視需求再調整 0~40 */
}
/* 圖片容器：拿掉固定高度與多餘 padding 讓圖真正貼頂 */
.Products-image {
  height: auto !important;
  padding: 0 !important;
  width: 700px !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 38px -8px rgba(0,0,0,0.28), 0 8px 18px -6px rgba(0,0,0,0.18) !important;
}
.Products-image img#Products-main-image {
  height: 610px !important; /* 固定視覺高度，與原設計一致 */
  border-radius: 14px !important;
}
/* 行動裝置下仍維持原本垂直堆疊，但圖片在最上方 */
@media (max-width: 991px) {
  #collapseProducts .slide_content { padding: 0 0 40px !important; }
  .Products-links { padding-top: 0 !important; }
  .Products-image { width: 100% !important; }
  .Products-image img#Products-main-image { width: 100% !important; height: auto !important; }
}
.c-navigation__back-btn {
  color: #fff !important;
  font-size: 1.2em !important;
  font-weight: 600 !important;
  margin-bottom: 30px !important;
  display: block !important;
  text-decoration: none !important;
}
/* FINAL Products layout overrides */
.Products-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important; /* 上對齊 */
  gap: 60px !important;
  position: relative !important;
  z-index: 10 !important;
  margin-top: 0 !important;
}
.Products-links {
  min-width: 250px !important;
  flex: 0 0 auto !important;
  text-align: left !important;
  padding-top: 0 !important; /* 拉到最頂 */
}
.c-navigation__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 60px 0 0 0 !important; /* 上方 60px 間距 */
  list-style: none !important;
}
.c-navigation__item {
  margin: 0 !important;
  padding: 0 !important;
}
/* 移除預設第一個項目的白線 - 改為hover時動態顯示 */
/* 徹底清除外部 CSS 的樣式 */
#collapseProducts .c-navigation__title {
  display: block !important;
  padding: 14px 20px !important;
  font-size: 1.1em !important;
  color: #fff !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
  text-align: left !important;
  text-decoration: none !important;
  position: relative !important; /* 供 pseudo-element 定位 */
  /* 清除不要的樣式 */
  border-radius: 0 !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
/* 短白線，以 pseudo-element 實作 */
#collapseProducts .c-navigation__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px; /* 縮短白線 */
  background: transparent;
  border-radius: 2px;
  transition: background .3s ease;
}
#collapseProducts .c-navigation__title:hover,
#collapseProducts .c-navigation__title.active {
  color: #fff !important;
  font-weight: 600 !important;
  padding-left: 22px !important;
  text-decoration: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
#collapseProducts .c-navigation__title:hover::before,
#collapseProducts .c-navigation__title.active::before {
  background: #fff;
}
/* 清除綠色底線 */
#collapseProducts .c-navigation__title::after {
  display: none !important;
}
.Products-image {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  position: relative !important;
  height: auto !important;
  width: 700px !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.Products-image img#Products-main-image {
  width: 100% !important;
  height: 610px !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  display: block !important;
  box-shadow: none !important;
  transition: none !important;
}
@media (max-width: 991px) {
  .Products-grid {
    flex-direction: column !important;
    gap: 30px !important;
  }
  .Products-links {
    min-width: 0 !important;
    width: 100% !important;
  }
  .Products-image {
    width: 100% !important;
    justify-content: center !important;
  }
}
/* --- 產品下拉動畫優化 --- */
/* Products dropdown：fixed 定位，用 JS 動態設定 top 貼在 header 底部 */
#collapseProducts {position:fixed; left:0; right:0; top:0; z-index:1002; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,0.08);}
#collapseProducts.collapsing {overflow:visible;}
#collapseProducts .slide_content {padding:40px 0 50px;}
.swiper-banner-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.swiper-banner-text .container {
  width: 1170px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding-right: 0;
  position: relative;
  z-index: 11;
}
.swiper-banner-text .banner_txt {
  text-align: right;
  pointer-events: auto;
  position: relative;
  z-index: 12;
}

.swiper {
  width: 100%;
  max-width: 100vw;
  height: 665px;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.swiper-slide {
  width: 100%;
  height: 665px;
  flex-shrink: 0;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.swiper {
  width: 100%;
  max-width: 100vw;
  height: 665px;
  position: relative;
  overflow: hidden;
  background: none;
  margin: 0;
  padding: 0;
}
/* 確保 .bannerbg 不會蓋住文字 */
.bannerbg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.custom-pagination {
  position: absolute !important;
  bottom: 50px !important;
  left: 75px !important;
  display: flex !important;
  gap: 30px !important;
  z-index: 10 !important;
}
.custom-pagination .step {
  font-weight: 900;
  font-size: 1.1em;
  color: #fff;
  position: relative;
  cursor: pointer;
  padding: 5px 15px;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-text-stroke: 0.2px #fff;
}
.custom-pagination .step::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
  width: 50px;
  height: 4px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.custom-pagination .step.swiper-pagination-bullet-active {
  color: #63B930;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.custom-pagination .step.swiper-pagination-bullet-active::after {
  background: #63B930;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
/* Remove default Swiper pagination bullet styles */
.swiper-pagination-bullet {
  background: transparent !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}


.c-both{
  clear: both;
}

.f-left{
  float: left;
}

.f-right{
  float: right;
}

.l-h-110 {
line-height:110%
}

.l-h-120 {
line-height:120%
}

.l-h-130 {
line-height:130%
}

.l-h-140 {
line-height:140%
}

.l-h-150 {
line-height:150%
}

.l-h-160 {
line-height:160%
}

.l-h-170 {
line-height:170%
}

.l-h-180 {
line-height:180%
}

.l-h-190 {
line-height:190%
}

.l-h-200 {
line-height:200%
}



  /* 左藍右灰背景：左側 300px + 70px 視覺留白(含欄寬與一點緩衝) */
  /*
    修正：原本直接在 .slide_content 上用 full-width gradient，當視窗 > container(max-width) 時
    container 會置中，漸層仍貼左，造成藍色區塊與左側欄位對不齊 (看起來「歪掉」)。
    改法：將漸層搬到 .container::before，並置中，確保藍/灰切換點永遠對齊左欄 + gap。
    需要調整的參數：
      --video-left-width: 300px   (左欄寬)
      --video-gap: 70px           (左右欄 gap，需要同 #collapseVideo .video-grid 的 gap)
      切換點 = 300 + 70 = 370px
    若之後調 gap/left 寬，只要同步改這兩個 CSS 變數即可。
  */
  #collapseVideo .slide_content {position:relative; background:#f5f5f5; padding:0; overflow:visible;} /* 移除底部空白 */
  /* 取消外層 container，直接使用 video-grid 佔滿可用寬度 */
  /* 只在 video-grid 內做左藍右灰，不影響外部灰背景 */
  /* 動態對齊：藍色覆蓋 (viewport 寬度 - container 寬度)/2 + 左欄寬；不再用固定 margin-left */
  #collapseVideo .video-grid {--video-left-width:300px; --offset-left:0px; --video-right-inner-pad:25px; --video-shift:0px; /* 只有桌機大尺寸才會設值 */ display:flex; align-items:flex-start; gap:70px; position:relative; padding:0 0 60px; 
    --video-offset-effective:calc(var(--offset-left) - var(--video-shift));
    background:linear-gradient(90deg,#1E88E5 0 calc(var(--video-offset-effective) + var(--video-left-width)), #f5f5f5 calc(var(--video-offset-effective) + var(--video-left-width)) 100%); 
    padding-left:var(--video-offset-effective);
  }
  #collapseVideo .video-left {width:300px; padding:40px 0 0 0; color:#fff;} /* 取消固定 margin-left */
  #collapseVideo .video-left h3 {font-size:28px; font-weight:700; margin:0 0 25px; color:#fff;}
  #collapseVideo .video-cat-list {list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px;}
  #collapseVideo .video-cat-list a {display:block; padding:10px 18px; color:#ffffff; font-weight:500; text-decoration:none; border-left:3px solid transparent; transition:.3s; opacity:.85;}
  #collapseVideo .video-cat-list a.active,#collapseVideo .video-cat-list a:hover {border-left-color:#fff; padding-left:22px; opacity:1;}
  /* 右側內容 */
  /* 右側內容：增加左側內距 (50px) 並限制最大寬度避免過度拉伸 */
  /* 右側內容：寬度動態 = 視窗寬 - (左側有效偏移 + 左欄寬 + 40px 安全邊距) */
  #collapseVideo .video-right {flex:1 1 auto; position:relative; padding:40px 80px 0 var(--video-right-inner-pad); background:transparent; 
    width:100%;
    max-width:calc(100vw - (var(--video-offset-effective) + var(--video-left-width) + 40px));
    overflow:hidden;}
  /* 滑軌 */
  .video-tabs {position:relative; width:520px; max-width:100%; margin:0 0 50px; background:#e2e2e2; border-radius:40px; display:flex;}
  .video-tabs button {flex:1; background:transparent; border:0; padding:14px 10px; font-weight:600; letter-spacing:.5px; cursor:pointer; position:relative; z-index:2; font-size:14px; color:#666; transition:.3s;}
  .video-tabs button.active {color:#0a5c96;}
  .video-tabs .track {position:absolute; top:0; left:0; height:100%; width:50%; background:#fff; border-radius:40px; box-shadow:0 6px 18px rgba(0,0,0,.12); transition:transform .45s cubic-bezier(.19,1,.22,1);}
  /* 內容區 */
  .video-panels {position:relative;}
  .video-panel {display:none; animation:fadeIn .4s ease;}
  .video-panel.active {display:block;}
  @keyframes fadeIn {from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
  /* 範例影片卡片 */
  .video-cards {display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:28px;}
  .video-card {background:#fff; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.08); overflow:hidden; transition:.35s; cursor:pointer;}
  .video-card:hover {box-shadow:0 10px 26px rgba(0,0,0,.16); transform:translateY(-4px);}
  .video-thumb {position:relative; aspect-ratio:16/9; background:#ddd;}
  .video-thumb img {width:100%; height:100%; object-fit:cover; display:block;}
  .video-info {padding:14px 16px 18px;}
  .video-info h4 {margin:0 0 6px; font-size:15px; font-weight:600; line-height:1.3; color:#111;}
  .video-info p {margin:0; font-size:13px; color:#555; line-height:1.5; height:40px; overflow:hidden;}
  /* 右側第二種內容 (例如文件/下載) */
  .resource-list {display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px;}
  .resource-item {background:#fff; border:1px solid #e2e6ea; padding:18px 18px 20px; border-radius:8px; transition:.3s; position:relative;}
  .resource-item:hover {border-color:#0a5c96; box-shadow:0 4px 14px rgba(0,0,0,.08);}
  .resource-item h5 {margin:0 0 8px; font-size:15px; font-weight:600; color:#0a5c96;}
  .resource-item span {display:block; font-size:12px; color:#666;}
  /* Product presentation grid styles */
  .c-list-presentation-grid {display:flex; flex-wrap:wrap; gap:34px; align-items:flex-start; max-width:100%;} /* 允許換行避免溢出 */
  /* 透明 / 無盒子樣式 + 固定欄寬 */
  .c-list-presentation {background:transparent; border:0; padding:0; display:flex; flex-direction:column; align-items:flex-start; text-align:left; position:relative; width:170px; flex:0 0 170px;}
  .c-list-presentation__image-container {width:100%; height:110px; display:flex; align-items:flex-end; justify-content:flex-start; margin:0 0 14px;}
  .c-list-presentation__image {max-width:100%; height:auto; object-fit:contain; display:block;}
  .c-list-presentation__accordeon-btn {font-size:16px; font-weight:600; margin:0 0 12px; color:#111; line-height:1.25;}
  .c-list-presentation__list {list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;}
  .c-list-presentation__item a {display:inline-block; font-size:14px; color:#005b94; text-decoration:none; line-height:1.35;}
  .c-list-presentation__item a:hover {text-decoration:underline; color:#0a75bd;}
  @media (max-width:991px){
  .c-list-presentation-grid {flex-wrap:wrap; gap:26px;}
  .c-list-presentation {width:150px; flex:0 0 150px;}
  .c-list-presentation__list {display:none;}
  .c-list-presentation.open .c-list-presentation__list {display:flex;}
  .c-list-presentation__accordeon-btn {cursor:pointer;}
  }
  @media (min-width:992px){
    .c-list-presentation__list {display:flex !important;}
  }
  /* 斷點計算 container 寬度：>=992px -> 950px, 768-991 -> 750px */
  @media (min-width:992px){
    #collapseVideo .video-grid {--offset-left:calc((100vw - 950px)/2);}  
  }
  /* 畫面 >=1180px 時再左移 115px，避免中等寬度變成負值貼邊 */
  @media (min-width:1180px){
    #collapseVideo .video-grid {--video-shift:115px;}
  }
  @media (min-width:768px) and (max-width:991px){
  #collapseVideo .video-grid {--offset-left:calc((100vw - 750px)/2); --video-right-inner-pad:90px;}  
  }
  @media (max-width:767px){
  #collapseVideo .video-grid {--offset-left:0; --video-right-inner-pad:0;} /* 手機滿版；右側內距歸零 */
  }
  @media (max-width:991px){
    #collapseVideo .video-grid {flex-direction:column; gap:30px;}
    #collapseVideo .video-left {width:100%; padding:30px 0 0;}
    #collapseVideo .video-right {padding:10px 0 0 0;}
    .video-tabs {margin:10px auto 40px;}
  }
  /* 取消縮放，改用斷點調整欄寬與間距避免爆版 */
  @media (max-width:1600px) and (min-width:1200px){
    .c-list-presentation {width:160px; flex:0 0 160px;}
    .c-list-presentation-grid {gap:32px;}
  }
  @media (max-width:1199px) and (min-width:992px){
    .c-list-presentation {width:150px; flex:0 0 150px;}
    .c-list-presentation-grid {gap:28px;}
    .c-list-presentation__image-container {height:100px;}
  }

/*harvey加的*/
.nav_i {
    padding-bottom: 1.5rem;
}
.nav_i.no_pb{
    padding-bottom: inherit;
}


/* 下拉區塊 */
.menu-dropdown-content {
  display: none; /* 預設隱藏 */
  position: absolute;
  top: 100%;  /* 在主連結正下方 */
  width: 100%;
  left: 0;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 99;
}

/* 下拉選項樣式 */
.menu-dropdown-content a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
}

.menu-dropdown-content li.menu-item {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    line-height: 200%;
    padding-left: 5px;
}

.menu-dropdown-content li.menu-item a{
    color: #fff;
    padding: 5px 5px 5px 10px;
}

.menu-dropdown-content li.menu-item a.active{
    border-left: 3px solid #FFF;
}

.menu-dropdown-content {
  background: linear-gradient(135deg, #1E88E5 0%, #003680 100%) !important;
  /* 取消整體上方 padding，讓圖片可直接貼頂；僅保留下方留白 */
  min-height: 310px !important; /* 對齊圖片原始高度 */
  overflow: visible !important;
}


.menu-dropdown-content ul{
    padding: 5px;
}

.collapse.in{
    z-index: 999;
}

.sticyHeader .top_link{
    overflow: inherit;
}

#menu-dropdown-image{
    max-width: 690px;
    width: 100%;
}

span.read_more{
    line-height: 30px;
    cursor: pointer;
}

span.read_more img{
    width: 30px;
    float: left;
    margin-right: 8px;
}

.m_nav_i{
    padding: 10px 0;
    border-bottom: 2px solid #edf1d0;
}

.m_nav_i:hover{ padding-top:0.5rem; padding-bottom:1rem; box-shadow:inset 0 -2px 0 #fff;}

.m_nav_i.sub_menu{
    background: #FFF;
    padding: 10px 0;
    border-top: 2px solid #c5cc95;
    font-weight: normal;
}

.m_nav_i.sub_menu:hover{ padding-top:0.5rem; padding-bottom:1rem; box-shadow:inset 0 -2px 0 #fff;}

@media (max-width:1536px){
 #index_banner .flex-control-nav{
  left: 15%;
 }
}


@media (max-width:1024px){
 #index_banner .flex-control-nav{
  left: 20%;
 }
}



@media (max-width:768px){
 #index_banner .flex-control-nav{
  left: 25%;
 }
}


@media (max-width:640px){
 #index_banner .flex-control-nav{
  left: 30%;
 }
}


@media (max-width:480px){
 #index_banner .flex-control-nav{
  left: 40%;
 }

  .flex-control-paging li a {
      padding: 5px 10px;
      width: 20px;
      height: 20px;
  }

  .flex-control-paging li a {
      padding: 5px 10px;
      width: 20px;
      height: 20px;
  }

  .flex-control-paging li a.flex-active {
      padding: 7px 15px;
  }

}