/* ========================================================
   Wonder Fastener — style.css (1:1 Restored Version)
   Design: industrial teal & orange, precision engineering feel
======================================================== */

:root {
  --teal-dark:   #16596c;
  --teal:        #1c5566;
  --teal-mid:    #2c7285;
  --orange:      #f3891f;
  --orange-dark: #e0740a;
  --text-dark:   #232b2e;
  --text-mid:    #000;
  --text-light:  #7c8a8f;
  --bg-light:    #f4f7f9; /* 稍微修正為更貼近設計稿的淡灰藍 */
  --white:       #ffffff;
  --radius:      4px;    /* 根據設計稿微調更為硬朗的導角 */
  --nav-h:       90px;
  --site-px:     8%;
  --head-px:     40px;
  --shadow:      0 12px 32px rgba(18,65,76,0.06);
  --transition:  0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; }

[id] { scroll-margin-top: var(--nav-h); } /* 錨點捲動時避免被固定導覽列遮住 */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* 防止 iOS Safari 橫向時自動放大字體 */
  text-size-adjust: 100%;
}

html, body {
  max-width: 100%;
  overflow-x: hidden; /* 防止手機端出現非預期橫向捲動 */
}

body {
  font-family: "Segoe UI", Arial, "Microsoft JhengHei", "PingFang TC", sans-serif;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
  padding-top: var(--nav-h);
  -webkit-font-smoothing: antialiased;
}

a, button {
  -webkit-tap-highlight-color: transparent; /* 移除 Android Chrome 點擊灰色閃爍 */
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

/* 1. 防止圖片在連結內產生預設邊框 */
img {
  border: none;
  outline: none;
}

/* 2. 移除連結被點擊或聚焦時的瀏覽器預設輪廓線 */
img:focus,
img:active {
  outline: none;
  box-shadow: none; /* 預防部分現代瀏覽器使用 shadow 代替 outline */
}


.container-xxl { padding-left: var(--site-px); padding-right: var(--site-px); }
.container-xxhead { padding-left: var(--head-px); padding-right: var(--head-px); }

/* Reference layout (spec.com.tw) uses much more of the viewport than Bootstrap's
   default 1320px cap — widen progressively on larger screens so content doesn't
   look squeezed into a narrow centered strip. */
@media (min-width: 1400px) {
  .container-xxl { max-width: 1680px; }
}
@media (min-width: 1700px) {
  .container-xxl { max-width: 1840px; }
  :root { --head-px: 56px; }
}
@media (min-width: 1920px) {
  .container-xxl { max-width: 2040px; }
  :root { --head-px: 64px; }
}

/* Nav sizing scales up only once the container itself has room to spare —
   below 1400px this stays compact so it fits on laptop-width screens. */
@media (min-width: 1400px) {
  .wf-logo img { height: 46px; }

  .wf-nav-links {
    gap: 52px;
    margin-left: 100px;
  }
  .wf-nav-links .nav-link { font-size: 1.35rem; }

  .wf-lang-toggle {
    font-size: 1.25rem;
    padding: 8px 18px;
  }
}

/* ========================================================
   NAVBAR
======================================================== */
.wf-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  height: var(--nav-h);
  background: var(--white);
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
}

.wf-nav-inner {
  width: 100%;
  padding: 0;
}

.wf-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.wf-logo img { height: 46px; width: auto; object-fit: contain; }

.wf-logo-text {
  font-size: 1.2rem;
  color: var(--teal-dark);
  letter-spacing: 0.03em;
  font-weight: 700;
}

.wf-nav-links {
  gap: 50px;
  margin-left: 96px;
}

.wf-nav-links .nav-link {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-dark);
  padding: 8px 2px;
  position: relative;
  transition: color var(--transition);
}

.wf-nav-links .nav-link::after {
 
}

.wf-nav-links .nav-link:hover,
.wf-nav-links .nav-link.active {
  color: var(--orange);
}

.wf-nav-links .nav-link:hover::after,
.wf-nav-links .nav-link.active::after {
  transform: scaleX(1);
}

/* Mega Dropdown 與設計稿對齊 */
.wf-mega-toggle-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.wf-mega-label {
  color: inherit;
  font: inherit;
}

.wf-mega-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px 6px;
  margin-left: 4px;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.wf-mega-toggle:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.wf-mega-toggle::after {
  content: "+";
  display: inline-block;
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
}
.wf-mega-parent.show .wf-mega-toggle::after {
  content: "\2212"; /* minus sign, menu is open */
}

.wf-mega-menu {
  border: 1px solid #eef1f2;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
  min-width: 240px;
}

.wf-mega-menu .dropdown-item {
  font-size: 1.15rem;
  color: var(--text-dark);
  padding: 10px 20px;
  font-weight:600;
  border-bottom: 1px solid #f4f6f7;
}
.wf-mega-menu .dropdown-item:last-child { border-bottom: none; }

.wf-mega-menu .dropdown-item:hover,
.wf-mega-menu .dropdown-item.active {
  background: var(--bg-light);
  color: var(--orange);
}

@media (min-width: 1400px) {
  .wf-mega-parent:hover .wf-mega-menu { display: block; }
}

/* Click-to-toggle: works at every breakpoint (mobile has no hover, so this
   is the only way to open the submenu there; on desktop it complements
   the hover reveal above). */
.wf-mega-menu.show { display: block; }

/* ========================================================
   NAVBAR — CLICK / NAVIGATION FEEDBACK
   The next page can take a moment to load, and the mobile menu used to
   just vanish the instant a link was tapped with nothing else on screen
   changing — leaving the user unsure whether the tap even registered.
   These two pieces give immediate, visible feedback: the tapped link
   stays highlighted for a beat, and a thin bar fills in across the top.
======================================================== */
.wf-page-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--orange);
  z-index: 2000;
  pointer-events: none;
  transition: width 0.2s ease-out;
}
.wf-page-loading-bar.wf-active {
  /* Eases most of the way there and holds — it never needs to finish,
     since the browser swaps in the new page before it would. */
  width: 80%;
  transition: width 3.5s cubic-bezier(0.1, 0.5, 0.1, 1);
}

.wf-nav-links .nav-link.wf-link-loading,
.wf-nav-links .wf-mega-label.wf-link-loading,
.wf-mega-menu .dropdown-item.wf-link-loading {
  background-color: var(--bg-light);
  color: var(--orange);
  transition: background-color var(--transition), color var(--transition);
}

/* ========================================================
   NAVBAR — MOBILE MENU (collapse / MegaMenu / language)
======================================================== */
.wf-nav-inner .navbar-toggler {
  border: none;
  padding: 4px 8px;
  color: var(--teal-dark);
}
.wf-nav-inner .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

@media (max-width: 1600px) {
	
.wf-logo img { height: 40px; width: auto; object-fit: contain; }

	
.wf-nav-links {
    gap: 32px;
    margin-left: 30px;
}


}
@media (max-width: 1399.98px) {
  /* 展開選單以浮動面板呈現，避免撐開固定高度的導覽列 */
  .wf-nav-inner .navbar-collapse {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--head-px));
    right: calc(-1 * var(--head-px));
    background: var(--white);
    box-shadow: 0 16px 32px rgba(18,65,76,0.12);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px var(--site-px) 24px;
  }

  .wf-nav-links {
    width: 100%;
    gap: 0;
    margin-left: 0;
  }

  .wf-nav-links .nav-link {
    box-sizing: border-box;
    padding: 14px 4px;
    border-bottom: 1px solid #eef1f2;
	width: 100%;
  }
  /* 純文字連結 (Solutions / Applications / Quality / News...)：明確設為 block，
     讓 width:100% 生效，可點擊區域撐滿整行，而非只等於文字寬度。
     注意：Capabilities 用的是 span.wf-mega-toggle-wrap，維持原本的 inline-flex，不受此規則影響。 */
  .wf-nav-links a.nav-link {
    display: block;
  }
  .wf-nav-links .nav-item:last-child .nav-link { border-bottom: none; }
  .wf-nav-links .nav-link::after { display: none; } /* 底線指示器僅適用桌機版 */

  /* MegaMenu 在手機上改為就地展開的區塊，而非浮動卡片 */
  .wf-mega-menu {
    position: static !important;
    width: 100%;
    border: none;
    box-shadow: none;
     
    border-radius: var(--radius);
    margin: 4px 0 8px;
  }
  .wf-mega-menu .dropdown-item {
    padding: 10px 4px 10px 24px;
    width: 100%;
    white-space: normal;
    word-break: break-word;
  }

  .wf-lang-links {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eef1f2;
  }
  .wf-lang-toggle { display: block; width: 100%; text-align: left; box-sizing: border-box; }
  .wf-lang-menu { width: 100%; }
}

.wf-lang-toggle {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  padding: 6px 12px;
  border: 1px solid #e2e6e8;
  border-radius: var(--radius);
}

.wf-lang-toggle::after {
  display: inline-block;
  content: "+";
  border: none;
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  margin-left: 6px;
  vertical-align: 0;
}

.wf-lang-menu { min-width: 120px;
  border: 1px solid #eef1f2;
  box-shadow: var(--shadow);
}
.wf-lang-menu .dropdown-item { padding: 8px 18px; font-size: 0.95rem; }

.wf-lang-menu .dropdown-item.active,
.wf-lang-menu .dropdown-item:active {
  background-color: var(--teal-dark);
  color: var(--white);
}

.wf-lang-menu .dropdown-item:hover,
.wf-lang-menu .dropdown-item:focus {
  background-color: var(--teal-dark);
  color: var(--white);
}

 
 
 /* ========================================================
   HERO (Multi-Background Dynamic Swiper Version)
======================================================== */
 /* ========================================================
   HERO (Perfect Full-Screen Multi-Background Swiper)
======================================================== */
.wf-hero {
  position: relative;
  background-color: var(--bg-light);
  overflow: hidden;
  width: 100%;
}

.wf-hero-swiper {
  width: 100%;
  height: 100%;
}

/* 確保每個 slide 背景圖能全螢幕滿版覆蓋 */
.wf-hero-swiper .swiper-slide {
  background-size: cover;
  background-position: center right; /* 精準對齊右側產品區域 */
  background-repeat: no-repeat;
  width: 100%;
}

/* Banner 高度：以視窗寬度等比例縮放（以 1920px 版面為基準，約 38vw，最高上限 865px），
   所有裝置（手機／平板／桌機）統一套用同一比例，讓手機版與 PC 版維持相同的橫向版型，僅等比縮小。 */
.wf-hero-swiper .swiper-slide .wf-hero-inner {
  height: min(865px, 38vw);
  min-height: 0;
}

 /* 1. 清理容器背景與外觀 */
.wf-hero-content {
  position: relative;
  
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  padding: 0;
  animation: none; /* 移除舊有的浮動動畫 */
}


.wf-hero-swiper .swiper-slide .wf-hero-title {max-width: 560px;}
/* 2. 設定大標題與描述文字的初始狀態（下沉 + 隱藏）與過渡曲線 */
.wf-hero-swiper .swiper-slide .wf-hero-title,
.wf-hero-swiper .swiper-slide .wf-hero-desc {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.215, 0.610, 0.355, 1), 
              transform 1.2s cubic-bezier(0.215, 0.610, 0.355, 1);
}

/* 3. 當該頁成為活動頁 (.swiper-slide-active) 時，精準觸發延時浮現 */
.wf-hero-swiper .swiper-slide-active .wf-hero-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s; /* 大標題先浮現 */
}

.wf-hero-swiper .swiper-slide-active .wf-hero-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s; /* 描述文字隨後延時浮現 */
}



.wf-hero-content.is-active .wf-hero-tag       { animation-delay: 0.05s; }
.wf-hero-content.is-active .wf-hero-title      { animation-delay: 0.20s; }
.wf-hero-content.is-active .wf-hero-desc       { animation-delay: 0.38s; }
.wf-hero-content.is-active .wf-btn-hero-cta    { animation-delay: 0.55s; }

@keyframes wf-hero-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* 卡片本身持續、極輕微的上下浮動，呼應「floating」效果 */
@keyframes wf-hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.wf-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.wf-hero-tag::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}

.wf-hero-title {
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--teal-dark);
  margin-bottom: 20px;
  user-select: none;
}

.wf-hero-desc {
  font-size: 1.35rem;
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 48%;
  margin-bottom: 0;
  user-select: none;
}

.wf-btn-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 30px;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.wf-btn-hero-cta i { transition: transform var(--transition); }
.wf-btn-hero-cta:hover {
  background: var(--orange-dark);
  color: var(--white);
  transform: translateY(-2px);
}
.wf-btn-hero-cta:hover i { transform: translateX(4px); }

/* 尊重使用者「減少動態效果」的系統偏好設定 */
@media (prefers-reduced-motion: reduce) {
  .wf-hero-content { animation: none; }
  .wf-hero-content > * { opacity: 1; transform: none; }
  .wf-hero-content.is-active > * { animation: none; }
}

.wf-hero-swiper:active {
  cursor: grabbing !important;
}

/* 底部置中極簡圓點 */
.wf-carousel-dots {
  position: absolute;
  left: 50% !important;
  bottom: 40px !important;
  right: auto !important;
  transform: translateX(-50%);
  width: auto !important;
  margin: 0;
  padding: 0;
  gap: 10px;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.wf-carousel-dots .wf-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background-color: #ced6da;
  display: inline-block;
  cursor: pointer;
  transition: all 0.25s ease;
}

.wf-carousel-dots .wf-dot.active {
  background-color: var(--teal-dark);
}

/* RWD 響應式佈局 */
@media (max-width: 991.98px) {
  /* 手機／平板版：不再切換成卡片式堆疊版型，改為與 PC 版相同的橫向排版，
     僅依視窗寬度等比例縮小文字、間距與按鈕尺寸。 */
  .wf-hero-swiper .swiper-slide .d-flex {
    height: auto;
    min-height: 360px !important;
    padding: 20px 0;
  }

 
  /* 偽元素：承接原本的背景圖，單獨控制透明度 */
.wf-hero-swiper .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 關鍵：讀取 div 行內 style 裡的背景圖地址 */
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.85; /* 圖片透明度 0~1，自行調整 */
  z-index: 1;
}

.wf-hero-swiper .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.55); /* 半透明白色遮罩 */
  z-index: 2;
  pointer-events: none;
}

.wf-hero-swiper .swiper-slide > * {
  position: relative;
  z-index: 3; /* 從 2 提升到 3，疊在遮罩之上 */
}


  .wf-hero-content {
    max-width: 70%;
  }

  .wf-hero-title {
    font-size: clamp(1.15rem, 4.4vw, 2.4rem);
    margin-bottom: clamp(8px, 2vw, 20px);
  }

  .wf-hero-desc {
    font-size: clamp(0.78rem, 2vw, 1.1rem);
    max-width: 100%;
  }

  .wf-btn-hero-cta {
    margin-top: clamp(10px, 2.8vw, 28px);
    padding: clamp(8px, 1.8vw, 14px) clamp(16px, 3.6vw, 30px);
    font-size: clamp(0.78rem, 1.7vw, 1rem);
  }

  .wf-carousel-dots { bottom: 16px !important; }
}

@media (max-width: 575.98px) {
  .wf-carousel-dots { bottom: 12px !important; }
}

/* ========================================================
   ABOUT / WHY
======================================================== */
/* ========================================================
   ABOUT + CAPABILITIES 共用背景
   line-bg.webp 從 About 區塊頂部一路延伸到 Capabilities 區塊底部
   （footer/contact 開始之前），中間不中斷
======================================================== */
.wf-about-cap-bg {
  background-image: url('../img/line-bg.webp');
  background-repeat: repeat;
  background-position: top center;
}

/* ========================================================
   ABOUT / WHY (Updated with Custom Graphics)
======================================================== */
.wf-about {
  padding: 100px 0;
  background: transparent; /* 背景改由外層 .wf-about-cap-bg 提供 */
}

.wf-about .container-xxl{
  max-width:1730px;
}

@media (min-width:992px){
  .wf-about .row{
    --bs-gutter-x: 6rem; /* 4rem=64px，想要更大就改5rem、6rem */
  }
}


.wf-about-img-wrap {
  border-radius: var(--radius);
  overflow: hidden;
}
.wf-about-img { display: block; width: 100%; height: auto; object-fit: cover; }

.wf-eyebrow {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.wf-section-title {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--teal-dark);
  margin-bottom: 40px;
}

.wf-badges {
  margin-bottom: 30px;
}

.wf-badges>* {
   
    padding-right: 0;
    padding-left: 0;
    
}

.wf-badge {
  text-align: center;
}

/* 清理邊框，改為純圖片排版容器 */
.wf-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 140px; /* 保持與原設計稿一致的高度間距 */
  margin: 0 auto 16px;
}

/* 限制三個認證圖案圖片的最高與最大寬度，確保 1:1 等高對齊不變形 */
.wf-badge-icon img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}

.wf-badge h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--teal-dark);
  margin-bottom: 6px;
}

.wf-badge p {
  font-size: 1.15rem;
  color: #333;
  line-height: 1.2;
  margin-bottom: 0;
}

.wf-btn-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--teal-dark);
  color: var(--white);
  font-weight: 600;
  font-size: 1.25rem;
  padding: 16px 32px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.5s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
@media (hover: hover) {
  .wf-btn-learn-more:hover {
    background-color: var(--orange);
    color: var(--white);
  }
}
.wf-btn-learn-more:active {
  background-color: var(--orange-dark);
  color: var(--white);
  transition: background-color 0.2s ease;
}


/* ========================================================
   CAPABILITIES
======================================================== */
.wf-capabilities {
  padding: 60px 0 100px 0; /* 底部改用 padding（而非 margin），讓 .wf-about-cap-bg 的背景能延伸覆蓋到這段間距 */
  background: transparent; /* 背景改由外層 .wf-about-cap-bg 提供 */
}

.wf-cap-head {
  text-align: center;
  margin: 0px auto 40px; /* 與上方 About 內容保持間距，下方間距改由 .wf-capabilities 的 padding-top 提供 */
}

/* 針對 13 吋筆電（通常小於 1400px 且大於平板）進行字級縮放與間距微調 */
@media (max-width: 1399.98px) {
  .wf-cap-head {
    margin-bottom: 60px; /* 稍微縮小間距 */
  }
  .wf-cap-title {
    font-size: 2.4rem; /* 降低大標題字級，避免字數過多時擠壓 */
  }
  .wf-cap-desc {
    font-size: 1.25rem; /* 降低描述文字字級，確保流暢換行不重疊 */
    max-width: 85%;    /* 限制寬度讓整體視覺更集中 */
    margin: 0 auto;
  }
  .wf-capabilities .wf-cap-grid {
    padding: 30px 20px; /* 縮減網格內邊距，留出更多空間給內容 */
  }
}



.wf-cap-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 14px;
}

.wf-cap-desc {
  font-size: 1.85rem;
  color: #000;
  margin-bottom: 0;
}

/* 新增：專屬產品列表的背景與寬度控制區塊 */
.wf-capabilities .wf-cap-grid {
  background:#f7f7f7;       /* 僅產品列表部分上底色 */
  max-width: 1550px;        /* 限制最大寬度 1550px */
  margin-left: auto;        /* 左右置中 */
  margin-right: auto;
  padding: 40px; /* 為列表內側加上上下左右的留白間距 */
  border-radius: var(--radius); /* 可選：為底色區塊加上微幅圓角，若不需要可刪除 */
}

/* 替换原有的 .wf-cap-card、.wf-cap-img 及其子元素样式 */

.wf-cap-card {
  height: 100%;
           /* 產品卡片維持白色，與淡灰藍底色做出層次 */
  padding: 0 0 22px 0;        /* 2. 移除顶部和左右 padding，只留底部文字的 padding */
  overflow: hidden;           /* 确保图片外角顺应卡片的圆角 */
  transition: transform var(--transition), box-shadow var(--transition);
}

.wf-cap-img {
  display: block;  
  background: #fff;   /* 更改为块级，方便宽度撑满 */
  width: 100%;                /* 宽度 100% 撑满大框框，两边不留白 */
  aspect-ratio: 1 / 1;
  margin-bottom: 20px;
  overflow: hidden;
}

.wf-cap-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 4. 核心：让图片完全填满容器且不因拉伸变形 */
  transition: transform 0.4s ease; /* 與 Applications 卡片圖片的縮放動畫節奏一致 */
}

/* 滑鼠移入時圖片微幅放大，並由 .wf-cap-img 的 overflow: hidden 裁切，
   維持置中對齊不跑版，效果與 .wf-app-card:hover .wf-app-card-img 一致 */
.wf-cap-card:hover .wf-cap-img img{
  transform: scale(1.05);
}


.wf-cap-label {
  font-size: 1.55rem;          /* 略微放大文字对应图一视觉 */
  font-weight: 700;
  color: var(--text-dark);    /* 对应图一的深色文字 */
  line-height: 1.35;
  text-align: left;
  padding: 0 10px;            /* 5. 将文本的左右内边距补回来，确保文字不贴边 */
  margin-bottom: 0;
}

.wf-cap-card:hover .wf-cap-label {
  color: var(--orange);;
}
 
@media (max-width: 991.98px) {
  .wf-capabilities { padding: 60px 0 100px 0; }
  .wf-capabilities .wf-cap-grid { padding: 0; }
  .wf-cap-head { margin: 60px auto 36px; }
}

@media (max-width: 767.98px) {
  .wf-cap-img {  margin-bottom: 14px; }  
  .wf-cap-card { padding: 0; }
  .wf-cap-label { font-size: 0.9rem; }
  .wf-cap-title,.wf-contact-eyebrow, .wf-contact-desc {text-align: left;}
  .wf-cap-desc {
        font-size: 1.35rem;
        text-align: left;
        max-width: 100%;
    }

	
}

@media (max-width: 575.98px) {
  .wf-cap-desc { font-size: 0.95rem; }
  .wf-cap-img {  margin-bottom: 12px; }
  
}

 
/* ========================================================
   CONTACT
======================================================== */


.wf-contact {
  background-color: var(--teal-dark);          
  background-image: url('../img/bot_bg.png');        
  background-repeat: no-repeat;                     
  background-position: center center;          
  padding: 36px 0;
  color: var(--white);
}

.wf-contact .container-xxl, .wf-footer .container-xxl{
  max-width:1850px;
}

.wf-contact .col-lg-4{ margin-top:0;} 

.wf-contact-eyebrow {
  color: var(--orange);
  font-weight: 600;
  font-size: 2.65rem;
  margin-bottom: 0;
}

.wf-contact-desc {
  color: #fff;
  font-size: 1.65rem;
  font-weight: 600;
  max-width: 440px;
  margin-bottom: 0;
  line-height: 1.4;
}

.wf-contact-list { margin-bottom: 0; }
.wf-contact-list li {
  margin-bottom: 4px;
  font-size: 1.15rem;
  color: #fff;
  font-weight: 600;
}
.wf-contact-list li:last-child { margin-bottom: 0; }

.wf-contact-label {
  color: var(--orange);
  font-weight: 700;
  display: inline-block;
  width: 60px;
  font-size: 1.25rem;
}

.wf-btn-email {
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: 1.35rem;
  padding: 21px 24px;
  border-radius: var(--radius);
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere; /* 防止過長 email 撐破按鈕造成橫向溢出 */
  transition: all var(--transition);
}
.wf-btn-email:hover {
  background: var(--orange-dark);
  color: var(--white);
  transform: translateY(-1px);
}

/* ========================================================
   FOOTER
======================================================== */
.wf-footer {
  background: var(--white);
  padding: 30px 0;
  border-top: 1px solid #eef1f2;
}

.wf-footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--teal-dark);
  font-size: 1.1rem;
}




.wf-footer-logo img { height: auto; }



.wf-footer-links li { margin: 0 14px; }
.wf-footer-links a {
  font-size: 1.25rem;
  color: #000;
  font-weight: 500;
  transition: color var(--transition);
}
.wf-footer-links a:hover { color: var(--orange); }

.wf-footer-copy {
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.5;
}

.wf-back-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 42px; height: 42px;
  border: none;
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--white);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition), bottom var(--transition);
  z-index: 1040;
}
.wf-back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ========================================================
   COOKIE CONSENT BANNER
======================================================== */
.wf-cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--white);
  border-top: 1px solid #eef1f2;
  box-shadow: 0 -8px 28px rgba(18,65,76,0.10);
  z-index: 1050; /* above .wf-back-top (1040) and the fixed nav (1030) */
  padding: 18px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
}
.wf-cookie-banner.show { opacity: 0.85; visibility: visible; transform: translateY(0); }

.wf-cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.wf-cookie-text {
  margin: 0;
  flex: 1 1 480px;
  color: var(--text-dark);
  font-size: 1rem;
  line-height: 1.6;
}

.wf-cookie-accept {
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--teal-dark);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 32px;
  border: none;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.wf-cookie-accept:hover {
  background: var(--teal-mid);
  color: var(--white);
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .wf-cookie-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 14px;
  }
  .wf-cookie-text { font-size: 0.9rem; }
  .wf-cookie-accept { width: 100%; text-align: center; }
}


@media (max-width: 1399px) {
.wf-btn-email {
  font-size: 1.15rem;
  padding: 18px 21px;
  
}	

	.wf-cap-desc {
    font-size: 1.35rem;
	}
	
	.wf-cap-label {
    font-size: 1.35rem;
	}
	
	.wf-cookie-text {
	  margin: 0;
	  flex: 1 1 120px;
	  text-align: left;
	}  
		
	
}

	
@media (min-width: 1400px) {
  .wf-footer-links { margin-left:0; }
  .wf-footer-links li { margin: 0 10px; }
	  .wf-btn-email {
	  font-size: 1.10rem;
	  padding: 14px 18px;
	  
	}
	.wf-contact-desc {
    font-size: 1.35rem;
	}
	
	  
  
  	.wf-cap-desc {
    font-size: 1.35rem;
	}
	
	.wf-cap-label {
    font-size: 1.35rem;
	}
	
	


}
@media (min-width: 1700px) {
 .wf-footer-links { margin-left:-20px; }
 .wf-footer-links li { margin: 0 18px; }
 .wf-btn-email {
  font-size: 1.25rem;
  padding: 18px 21px;
  
}

	.wf-cap-desc {
    font-size: 1.85rem;
	}
	
	.wf-cap-label {
    font-size: 1.55rem;
	}
	
	
		.wf-contact-desc {
    font-size: 1.65rem;
	}

	

}
@media (min-width: 1920px) {
  .wf-footer-links { margin-left:-30px; }

	
}

 

@media (max-width: 575.98px) {
  .wf-back-top {
    right: 16px; bottom: 16px;
    width: 38px; height: 38px;
    font-size: 1rem;
  }
	
}

/* ========================================================
   RESPONSIVE
   （原檔案此區塊有兩段重複的 @media(max-width:991.98px)，
   已合併整理為單一區塊，並補上 Navbar / Hero / About / Footer
   等各元件的手機版細節調整）
======================================================== */
@media (max-width: 991.98px) {
  :root { --nav-h: 76px; --site-px: 24px; }

  /* Logo：手機端縮小高度，避免撐開導覽列 */
  .wf-logo img {
    height: 32px;
    width: auto;
  }

  .wf-about { padding: 60px 0; }

  /* Contact：置中排列，避免地址/電話在窄螢幕擠壓變形 */
  .wf-contact { text-align: center; }
  .wf-contact-desc { margin: 0 auto 24px; }
  .wf-contact-list { text-align: left; display: inline-block; margin-bottom: 24px; }
  .wf-contact-list li { font-size: 0.88rem; }

  /* Footer：整欄置中重新排版 */
  .wf-footer .row > div { text-align: center !important; }
  .wf-footer-logo { justify-content: center; margin-bottom: 4px; }
  .wf-footer-links {
    justify-content: center !important;
    margin: 12px 0 !important;
    row-gap: 8px;
  }
  .wf-footer-links li { margin: 0 10px; }
  .wf-footer-copy { margin-top: 4px; }
}

@media (max-width: 767.98px) {
  /* About 認證圖示：三個維持同列但縮小尺寸，避免擁擠 */
  	
	.wf-footer-links {
        justify-content: left !important;
        margin: 12px 0 !important;
        row-gap: 8px;
    }
  .wf-badge-icon { height: 64px; margin-bottom: 12px; }
  .wf-badge-icon img { max-height: 60px; }
  .wf-badge h3 { font-size: 1rem; }
  .wf-badge p { font-size: 0.82rem; }
  .wf-contact-desc {
    color: #fff;
    font-size: 1.25rem;
  }
  .wf-footer-logo img {
    width: 80%;
	}
	.wf-cap-label {
        font-size: 1.0rem;
    }
}

@media (max-width: 575.98px) {
  :root { --site-px: 20px; } /* 同步驅動 .container-xxl 與導覽選單的左右內距 */
  :root { --head-px: 20px; } /* 同步驅動 .container-xxl 與導覽選單的左右內距 */
  
    .wf-logo img {
        height: 28px;
        width: auto;
    }

  .wf-badges .col-4 { flex: 0 0 100%; max-width: 100%; }
  .wf-badge { margin-bottom: 30px; }
  .wf-badge:last-child { margin-bottom: 0; }
  .wf-badge-icon { height: auto; margin-bottom: 12px; }
  .wf-badge-icon img { max-height: 72px; }
  
  .wf-badges>* {
    padding-left: calc(var(--bs-gutter-x) * .5);
}

  .wf-btn-learn-more { width: 76%;  margin-left:12%;padding: 12px 24px;justify-content: center; text-align: center; }
  
  .wf-btn-email {  width: 100%; justify-content: center; text-align: center;font-size: 1.0rem; }
  
}
/* ========================================================
   ABOUT PAGE (about.html)
   Page banner, breadcrumb, intro text, Sustainability &
   Responsibility cards, Community Involvement.
======================================================== */

/* ---- Page Banner ---- */
.wf-ab-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1900 / 388;   /* mirrors the design's full-bleed banner proportions; same ratio at every breakpoint so mobile scales down like PC instead of switching to a taller crop */
  background-image: url('../img/about_banner.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.wf-ab-banner-title {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: 0.02em;
  margin: 0;
}

/* About 主體內容寬度統一：以 wf-ab-sustain 現有寬度 (1650px) 為基準，
   讓 Banner 標題、麵包屑、Intro、Sustain、Community 五個區塊左右邊界對齊；
   Banner 區塊背景圖仍維持滿版 (100vw)，只有內層文字容器對齊寬度；
   導覽列 (header) 與頁尾 (footer) 維持原本較寬的 .container-xxl，不受影響。 */
.wf-ab-banner .container-xxl,
.wf-ab-breadcrumb-bar .container-xxl,
.wf-ab-intro .container-xxl,
.wf-ab-sustain .container-xxl,
.wf-ab-community .container-xxl {
  max-width: 1650px;
}

/* ---- Breadcrumb ---- */
.wf-ab-breadcrumb-bar {
  background: #f9f9f9;
  padding: 14px 0;
}

.wf-ab-breadcrumb {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
}
.wf-ab-breadcrumb a { color: var(--text-dark); transition: color var(--transition); }
.wf-ab-breadcrumb a:hover { color: var(--orange); }
.wf-ab-breadcrumb-sep { color: var(--text-light); }
.wf-ab-breadcrumb-current { color: var(--teal-mid); }

@media (max-width: 575.98px) {
  .wf-ab-breadcrumb { font-size: 0.85rem; }
}

/* ---- About Intro ---- */
.wf-ab-intro {
  padding: 100px 0;
  background-image: url('../img/line-bg.webp');
  background-repeat: repeat;
  background-size: auto;
  background-position: center top;
}

.wf-ab-intro-title {
  color: var(--orange);
  font-weight: 700;
  font-size: clamp(1.9rem, 2.6vw, 2.65rem);
  margin-bottom: 36px;
}

.wf-ab-intro-text p {
  font-size: 1.35rem;
  color: #000;
  line-height: 1.85;
  max-width: 1300px;
  margin-bottom: 24px;
  
}
.wf-ab-intro-text p:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
  .wf-ab-intro { padding: 70px 0; }
}
@media (max-width: 575.98px) {
  .wf-ab-intro-text p { font-size: 1.25rem; line-height: 1.8;}
}

/* ---- Sustainability & Responsibility ---- */
.wf-ab-sustain {
  position: relative;
  padding: 100px 0;
  background-color: var(--teal-dark);
  background-image: url('../img/about_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wf-ab-sustain::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 26, 20, 0.32);
}

.wf-ab-sustain .container-xxl {
  position: relative;
  z-index: 1;
}

.wf-ab-sustain-title {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  margin-bottom: 48px;
}

.wf-ab-card {
  height: 100%;
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 32px;
  box-shadow: var(--shadow);
}

.wf-ab-card h3 {
  color: #16586e;
  font-weight: 700;
  font-size: 1.85rem;
  margin-bottom: 18px;
}

.wf-ab-card ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.wf-ab-card li {
  position: relative;
  padding-left: 16px;
  color: #000;
  font-size: 1.25rem;
  line-height: 1.9;
}
.wf-ab-card li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--text-mid);
}

.wf-ab-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.wf-ab-icons img {
  width: 102px;
  height: 102px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .wf-ab-sustain { padding: 70px 0; }
  .wf-ab-sustain-title { margin-bottom: 32px; }
}
@media (max-width: 575.98px) {
  .wf-ab-card { padding: 26px 24px; }
  .wf-ab-icons img { width: 86px; height:86px; }
}

/* ---- Community Involvement ---- */
.wf-ab-community { 
  padding: 100px 0;
  background-image: url('../img/line-bg.webp');
  background-repeat: repeat;
  background-size: auto;
  background-position: center top;
 }

.wf-ab-community-title {
  color: var(--orange);
  font-weight: 700;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  margin-bottom: 24px;
}

.wf-ab-community-text {
  font-size: 1.35rem;
  color: #000;
  line-height: 1.5;  

  margin-bottom: 28px;
}

.wf-ab-icons-lg img { width: 100px; height: 100px; }

.wf-ab-community-img {
  border-radius: var(--radius);
  overflow: hidden;
  text-align:center;
}
.wf-ab-community-img img {
  width: 100%;
  height: auto;
  max-width:580px;
 
}

@media (max-width: 991.98px) {
  .wf-ab-community { padding: 70px 0; }
}
@media (max-width: 575.98px) {
  .wf-ab-icons-lg img { width: 52px; height: 52px; }
}

/* ========================================================
   SOLUTIONS PAGE (solutions.html)
   Banner override, intro, solution list items, pagination
======================================================== */

/* ---- Banner override (reuses about banner, different image) ---- */
.wf-sol-banner {
  background-image: url('../img/about_banner.jpg');
}

/* ---- Intro ---- */
.wf-sol-intro {
  padding: 80px 0 60px;
  background-image: url('../img/line-bg.webp');
  background-repeat: repeat;
  background-size: auto;
  background-position: center top;
}

.wf-sol-intro .container-xxl {
  max-width: 1650px;
  padding-left: var(--site-px);  /* 使用全站統一的 site padding 確保貼齊 */
  padding-right: var(--site-px);
}


.wf-sol-intro-title {
  color: var(--orange);
  font-weight: 700;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  margin-bottom: 20px;
  letter-spacing:2px;
}

.wf-sol-intro-text {
  font-size: 1.25rem;
  color: #000;
  line-height: 1.5;
  max-width: 1300px;
  margin: 0;
}

/* ---- Solutions List ---- */
.wf-sol-list {
  padding: 0 0 80px;
  background-image: url('../img/line-bg.webp');
  background-repeat: repeat;
  background-size: auto;
  background-position: center top;
  
}

.wf-sol-list > .container-xxl {
    max-width: 1100px;
    padding: 0;
	
}

/* Each solution row */
.wf-sol-item {
  display: flex;
  align-items: flex-start;
  gap: 58px;
  padding: 48px 0;
  
}
.wf-sol-item:last-child {
  border-bottom: none;
}

/* Thumbnail */
.wf-sol-thumb {
  flex: 0 0 400px;
  width: 400px;
  position: relative;
}

.wf-sol-thumb::before {
  /* subtle offset shadow block matching the design */
  content: '';
  position: absolute;
  inset: 12px 12px -12px -12px;
  background: #f7f7f7;
  border-radius: var(--radius);
  z-index: 0;
}

.wf-sol-thumb img {
  position: relative;
  z-index: 1;
  width: 100%;

}

/* Text body */
.wf-sol-body {
  flex: 1;
  padding-top: 10px;
  max-width: 1100px;
}

.wf-sol-item-title {
  color: var(--teal-dark);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.6vw, 1.65rem);
  margin-bottom: 14px;
}

.wf-sol-item-desc {
  color: #000;
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0;
}

/* ---- Pagination ---- */
.wf-sol-pagination-wrap {
  display: flex;
  justify-content: center;
  padding: 40px 0 20px;
}

.wf-sol-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wf-page-num,
.wf-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d0dade;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-mid);
  background: var(--white);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
}

.wf-page-num:hover,
.wf-page-btn:hover {
  background: var(--teal-dark);
  color: var(--white);
  border-color: var(--teal-dark);
}

.wf-page-num.wf-page-active {
  background: var(--teal-dark);
  color: var(--white);
  border-color: var(--teal-dark);
  pointer-events: none;
}

.wf-page-btn {
  color: var(--teal-dark);
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
  .wf-sol-item {
    flex-direction: column;
    gap: 28px;
    padding: 36px 0;
  }
  .wf-sol-thumb {
    flex: none;
    width: 100%;
  }
  .wf-sol-thumb::before {
    inset: 8px -8px -8px 8px;
  }
  .wf-sol-intro { padding: 60px 0 40px; }
  .wf-sol-list { padding-bottom: 60px; }
  .wf-sol-item-desc { max-width: 100%; }
}

/* ========================================================
   APPLICATIONS PAGE (applications.html)
   Banner override, 3-column card grid with gaps + bg image
======================================================== */

/* ---- Banner override ---- */
.wf-app-banner {
  background-image: url('../img/about_banner.jpg');
}

/* ---- Section wrapper — full-width background image ---- */
.wf-app-section {
  padding: 70px 0 60px;
  background-image: url('../img/line-bg.webp');
  background-repeat: repeat;
  background-size: auto;
  background-position: center top;
}

	
.wf-app-section .container-xxl {
  max-width: 1650px;
  padding-left: var(--site-px);
  padding-right: var(--site-px);
}
	
/* Grid gutter — 16px between cards, shared by both the applications grid
   and the news grid (.wf-news-grid) so spacing stays identical on both
   pages. Set directly rather than via gx-*/gy-* utility classes for an
   exact, explicit value (16px happens to equal Bootstrap's gx-3/gy-3,
   but setting it directly here keeps both grids tied to one source). */
.wf-app-grid,
.wf-news-grid {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 16px;
}

.wf-app-grid .col-lg-4,.wf-news-grid .col-lg-4 { margin-bottom:24px;}
/* ---- 3×N grid ---- */
.wf-app-grid {
  border: none;
  margin-bottom: 50px;
}

/* Each card cell */
.wf-app-card {
  height: 100%;
  background: var(--white);
  transition: box-shadow var(--transition);
  overflow: hidden;
}

.wf-app-card:hover {
  
  position: relative;
  z-index: 1;
}

/* Make col stretch to card height */
.wf-app-grid > [class*="col"] {
  display: flex;
  flex-direction: column;
}

/* Thumbnail — background-image span, same 390:270 ratio and 100% width
   as .wf-news-thumb on the news list page, so both grids render the
   thumbnail at the same proportions. */
.wf-app-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 390 / 270;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #c9cdcf;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.wf-app-card:hover .wf-app-card-img {
  transform: scale(1.05);
}

/* Text body */
.wf-app-card-body {
  padding: 24px 26px 52px;
  flex: 1;
  border-left: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.wf-app-card-title {
  color: var(--text-dark);
  font-weight: 600;
  font-size: 1.85rem;
  margin-bottom: 12px;
}


.wf-app-card-desc {
  color: var(--text-mid);
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0;
  height: auto;                 /* 拿掉固定 px，改用 line-clamp 控制 */
  display: -webkit-box;
  -webkit-line-clamp: 5;        /* 想顯示幾行就填幾，建議跟卡片視覺高度抓一致 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ---- Responsive ---- */

 @media (max-width: 1300px) {
    .wf-sol-list > .container-xxl { 
  padding-left: var(--site-px);
  padding-right: var(--site-px);
	}
} 



@media (max-width: 991.98px) {
  .wf-app-section { padding: 50px 0 40px; }
}

@media (max-width: 575.98px) {
  .wf-app-grid .col-md-6 { width: 100%; }
  .wf-app-card-body { padding: 18px 20px 26px; }
  
}

/* ========================================================
   QUALITY PAGE (quality.html)
   Banner override, process-step grid (01-07), and the two
   dark Quality Standards / Quality Documents panels.
======================================================== */

/* ---- Banner override (reuses about banner, different image) ---- */
.wf-qua-banner {
  background-image: url('../img/quality_bg.jpg');
}

/* ---- Section wrapper — shared light grid background under
   the intro text, process grid, and standards/documents panels ---- */
.wf-qua-section {
  padding: 100px 0;
  background-image: url('../img/line-bg.webp');
  background-repeat: repeat;
  background-size: auto;
  background-position: center top;
}

@media (min-width: 1920px) {
    .wf-qua-section .container-xxl {
        max-width: 1650px;
    }
}	
	

/* ---- Process Steps Grid (01–07) ---- */
.wf-qua-grid { margin-top: 56px; }

.wf-qua-card {
  height: 100%;
  background: #f7f7f7;
  border-radius: var(--radius);
  padding: 18px 42px 24px;
}

.wf-qua-card-title {
  color: var(--teal-dark);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.35;
  min-height: 2.2em;
  margin-bottom: 0;
}

.wf-qua-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.wf-qua-card-icon {
  display: inline-flex;
  align-items: flex-end;
  font-size: 2.6rem;
  color: var(--teal-mid);
  line-height: 1;
}

.wf-qua-card-icon img {
  width: auto;
  height: 80px;
  object-fit: contain;
}

.wf-qua-card-num {
    font-family: "Century Gothic", AppleGothic, sans-serif;
    font-weight: 900;
    font-size: 6.8rem;
    line-height: 0.85;
    color: #ebecee;
    display: inline-block;    
    transform: scaleY(0.85);     
    transform-origin: bottom right; 
}

@media (max-width: 991.98px) {
  .wf-qua-section { padding: 70px 0; }
  .wf-qua-grid { margin-top: 36px; }
}
@media (max-width: 575.98px) {
  .wf-qua-card { padding: 26px 24px; }
  .wf-qua-card-title { font-size: 1.55rem; min-height: 0; margin-bottom: 26px; }
  .wf-qua-card-icon { font-size: 2.2rem; }
  .wf-qua-card-icon img { height: 66px; }
  .wf-qua-card-num { font-size: 5.2rem; }
}

/* ---- Quality Standards / Quality Documents Panels ---- */
.wf-qua-panels { margin-top: 8px; }

.wf-qua-panel {
  height: 100%;
  background: var(--teal-dark);
  border-radius: var(--radius);
  padding: 44px 40px;
}

.wf-qua-panel-title {
  color: var(--white);
  font-weight: 700;
  font-size: 1.55rem;
  margin-bottom: 28px;
}

.wf-qua-panel-icon { margin-bottom: 28px; }
.wf-qua-panel-icon img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.wf-qua-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wf-qua-panel li,.wf-qua-panel li p {
  position: relative;
  padding-left: 8px;
  color: var(--white);
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 0;
}
 


.wf-qua-panel li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color:#fff;
}

@media (max-width: 575.98px) {
  .wf-qua-panel { padding: 32px 26px; }
  .wf-qua-panel-icon img { width: 72px; height: 72px; }
}

/* ========================================================
   NEWS LIST PAGE (news.html)
   Card grid with placeholder thumbnails, hover accent, and
   numbered pagination.
======================================================== */

.wf-news-section {
  padding: 100px 0;
    background-image: url('../img/line-bg.webp');
  background-repeat: repeat;
  background-size: auto;
  background-position: center top;

}

.wf-news-section .container-xxl {
	max-width: 1650px;
    padding-left: var(--site-px);
    padding-right: var(--site-px);
}

/* ---- Card ---- */
.wf-news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  text-decoration: none;
}

.wf-news-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 390 / 270;
  overflow: hidden;
  background-color: #c9cdcf;
  background-size: cover;
  background-position: center;
}
.wf-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Border wraps only the text panel (left/right/bottom) — the image above
   stays untouched, since the panel has no top border and sits flush under it. */
.wf-news-panel {
  position: relative;
  flex: 1;
  display: block;
  border-left: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  padding: 32px 28px 80px;
  transition: border-color .25s ease;
}
.wf-news-card:hover .wf-news-panel { border-color: var(--orange); }

.wf-news-body {
  display: block;
}

.wf-news-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-dark, #1c1c1c);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.4;
  margin-bottom: 16px;
  transition: color .25s ease;
}
.wf-news-card:hover .wf-news-title { color: var(--teal-mid); }

.wf-news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #000;
  font-size: 1.25rem;
  line-height: 1.5;
}

.wf-news-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-dark);
  color: var(--white);
  font-size: 1.25rem;
  transition: background-color .25s ease;
}
.wf-news-card:hover .wf-news-arrow { background: var(--orange); }

/* ---- Pagination ---- */
.wf-news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 56px 0 0;
  /* reset default <ul> box-model so the eyoucms {eyou:pagelist} output
     (<ul class="pagination"><li><a>...</a></li></ul>) lines up like the
     static design */
  list-style: none;
  padding: 0;
}

.wf-news-pagination li { display: flex; }

.wf-news-page,
.wf-news-pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--bg-light);
  color: var(--text-mid, #5b6669);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.wf-news-page:hover,
.wf-news-pagination li a:hover { background: rgba(18,65,76,0.15); color: var(--teal-dark); }

.wf-news-page.active,
.wf-news-pagination li.active a {
  background: var(--teal-dark);
  color: var(--white);
}

/* Prev / Next arrows: {eyou:pagelist listitem='pre,pageno,next'} always
   renders the prev link as the first <li> and the next link as the last
   <li>, with literal "<" / ">" as the link text -- so we target them by
   position, hide the raw text, and draw the same chevron icon used in
   the static design. */
.wf-news-pagination li:first-child a,
.wf-news-pagination li:last-child a {
  background: var(--white);
  border: 1px solid #d0dade;
  color: var(--teal-dark);
  font-size: 0; /* hides the literal &lt; / &gt; text from the system output */
}
.wf-news-pagination li:first-child a:hover,
.wf-news-pagination li:last-child a:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--white);
}
.wf-news-pagination li:first-child a::before,
.wf-news-pagination li:last-child a::before {
  font-family: "bootstrap-icons" !important;
  font-size: 1rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}
.wf-news-pagination li:first-child a::before { content: "\f284"; } /* bi-chevron-left */
.wf-news-pagination li:last-child a::before  { content: "\f285"; } /* bi-chevron-right */

@media (max-width: 991.98px) {
  .wf-news-section { padding: 70px 0; }
}
@media (max-width: 575.98px) {
  .wf-news-panel { padding: 24px 22px 66px; }
   
}

/* ========================================================
   NEWS DETAIL PAGE (news-detail.html)
   Article header, centered featured image (same 390:270
   ratio as the list thumbnails), body copy, and Back button.
======================================================== */

.wf-news-detail-date {
  color: #000;
  font-size: 1.15rem;
  margin-bottom: 14px;
}

.wf-news-detail-title {
  color: #000;
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.4;
  margin-bottom: 28px;
  
}

.wf-news-detail-divider {
  border: none;
  border-top: 2px solid #b6b5b5;
  margin: 0 0 56px;
}

.wf-news-detail-image {
  max-width: 750px;
  aspect-ratio: 390 / 270;
  margin: 0 auto 56px;
  overflow: hidden;
  background-color: #c9cdcf;
}
.wf-news-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wf-news-detail-body p {
  color: var(--text-mid);
  font-size: 1.35rem;
  line-height: 1.5;
  margin-bottom: 28px;
}
.wf-news-detail-body p:last-child { margin-bottom: 0; }

.wf-news-detail-back-wrap {
  text-align: center;
  margin-top: 56px;
}

.wf-news-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--teal-dark);
  color: var(--white);
  font-weight: 600;
  font-size: 1.35rem;
  padding: 12px 42px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition);
}
.wf-news-back-btn:hover {
  background: var(--orange);
  color: var(--white);
  transform: translateY(-1px);
}

@media (max-width: 575.98px) {
	.wf-news-section {
        padding: 35px 0;
    }
	
  .wf-news-detail-title { font-size: 1.85rem; }
  .wf-news-detail-image { max-width: 100%; }
}



/* capabilities */
  .wf-cap-detail-section {
    position: relative;
    padding: 100px 0;
    background-image: url('../img/line-bg.webp');
	background-repeat: repeat;
	background-position: top center; 
    z-index: 1;
  }

 
  
  
  @media (min-width: 1920px) {
    .wf-cap-detail-section .container-xxl {
        max-width: 1650px;
    } 
}


   
  

  /* 內頁客製排版樣式 */
  .wf-cap-detail-title {
    font-size: clamp(2rem, 3.2vw, 3rem);
    color: var(--orange);
    font-weight: 700;
    margin-bottom: 24px;
  }

  .wf-cap-detail-intro {
    font-size: 1.25rem;
    color: var(--text-mid);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 900px;
  }

  .wf-cap-sub-block {
    margin-bottom: 30px;
  }

  .wf-cap-sub-title {
    font-size: 1.45rem;
    color: var(--teal-dark);
    font-weight: 700;
    margin-bottom: 15px;
  }

  .wf-cap-sub-text {
    font-size: 1.25rem;
    color: var(--text-dark);
    line-height: 1.6;
  }

  /* 橘色圓點列表 */
  .wf-cap-bullets {
    list-style: none !important;
    padding-left: 0;
    margin-bottom: 0;
  }
  
  .wf-cap-bullets ul {padding-left:0;}

  .wf-cap-bullets li {
	list-style: none !important;
    position: relative;
    padding-left: 20px;
    font-size: 1.25rem;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 2;
  }
  
    .wf-cap-bullets li p{
		margin-bottom:0;
	}

  .wf-cap-bullets li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--orange);
    font-size: 1.5rem;
    line-height: 1.8;
  }

  /* 機器配圖 */
  .wf-cap-feature-img-wrap {
   
    overflow: hidden;
    
  }

  .wf-cap-feature-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  /* 下方成品展示 */
  .wf-finished-section {
    margin-top: 60px;
    padding-top: 50px;
   /*  border-top: 1px solid rgba(18, 65, 76, 0.1); */
  }

  .wf-finished-title {
    font-size: 2.2rem;
    color: var(--orange);
    font-weight: 700;
    margin-bottom: 35px;
  }
  
  .wf-finished-section  .col-md-4{
	  padding-left: 12px;
    padding-right: 12px; }

	  /* 修改後的成品展示圖片容器 */
	.wf-product-thumb {
	  width: 100%;
	  aspect-ratio: 390 / 270;        /* 1. 核心：統一圖片容器的縱橫比（可依需求改為 1/1 或固定高度如 height: 250px） */
	  border: 1px solid #dfdfdf;
	  background-color: var(--white);
	  border-radius: var(--radius);
	  overflow: hidden;
	  display: flex;
	  align-items: center;        /* 2. 垂直居中 */
	  justify-content: center;    /* 3. 水平居中 */
	  padding: 15px;              /* 4. 可選：內邊距，防止圖片貼邊顯得擁擠 */
	}

	.wf-product-thumb img {
	  width: 100%;
	  height: 100%;
	  object-fit: contain;        /* 5. 核心：按比例自動縮放，完整顯示圖片且不變形 */
	}

  .wf-product-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #e2e8f0;
    border-radius: var(--radius);
  }
  
/* 隐藏 Google 翻译顶栏及提示 */
.skiptranslate {
    display: none !important;
}
body {
    top: 0px !important;
}  


/* Iphone 12 PRO */


.edui-upload-video {
  width: 100% !important;
  height: auto !important;
  display: block;
}



@media (max-width: 575.98px) {
	.wf-ab-banner {min-height:120px;}
	.wf-ab-banner-title {font-size: 1.55rem;}
	.wf-cap-detail-section {
		position: relative;
		padding: 40px 0 60px;
	  }
	  
	.wf-finished-title {
		font-size: 1.85rem;
	}
	.wf-footer-logo {
        justify-content: left;
        margin-bottom: 4px;
		margin-left:0px;
    }
	.wf-contact-eyebrow {font-size: 1.85rem;}
	
	.wf-footer-links li {
        margin: 0 20px 0 0;
    }
	
	.wf-contact-label {
	  width: 66px;
	}
	
}	
	

/* Iphone SE */

@media (max-width: 321px) {
    .wf-ab-icons img { width: 66px; height:66px; }

	.wf-logo img {
        height: 24px;
        width: auto;
    }
	
.wf-hero-content {
    max-width: 100%;
	padding:20px 0;
  }
  
  .wf-hero-title {font-size: 1.35rem;}
  .wf-hero-desc { font-size: 1.15rem; line-height:1.2;}
  
  .wf-footer-links a {
	font-size: 1.0rem;
	}
	
}