/* header 導航列 */
#webNavigation .designhuHeader {
  display: flex;
  gap: 40px;
}
/* 第一層項目相對定位，用來放絕對定位的下拉 */
#webNavigation .designhuHeader > li {
  position: relative;
  text-align: left;
}

.site-branding {
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    padding 0.25s ease;
}

/* Mega Menu 打開時 */
.site-branding.is-mega-open {
  background: white;
  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); */

  padding-top: 32px;
  padding-bottom: 32px;
}

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  z-index: 50;
}

.mega-menu.is-active {
  display: block;
  box-shadow: inset 0 15px 15px -10px rgba(0, 0, 0, 0.1);
}

.designhuHeader li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #1a1a1a;
  transition: color 0.3s ease;
}

/* 小三角（完全不佔高度） */
.designhuHeader li > a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-top: 4px;

  width: 10px;
  height: 10px;
  background: #3eb375;
  clip-path: polygon(0 0, 100% 0, 0 100%);

  opacity: 0;
  transform: translateY(4px);
  transition: all 0.3s ease;
  pointer-events: none;
}

/* hover + active 共用樣式 */
.designhuHeader li > a:hover,
.designhuHeader li.current-menu-item > a,
.designhuHeader li.current-menu-parent > a,
.designhuHeader li.current-menu-ancestor > a {
  color: #1a1a1a33;
}

/* 小三角 hover + active */
.designhuHeader li > a:hover::before,
.designhuHeader li.current-menu-item > a::before,
.designhuHeader li.current-menu-parent > a::before,
.designhuHeader li.current-menu-ancestor > a::before {
  opacity: 1;
  transform: translateY(0);
}

/* ===== header 導航列 end ===== */

/* 首頁 產品列 左右箭頭 */
.swiper-button-disabled {
  pointer-events: none !important;
  opacity: 0.3 !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important; /* 移除預設箭頭 */
}

/* 隱私權政策 */
/* .privacy-policy {
  position: relative;
  z-index: 50;
}

.entry-content {
  padding: 120px 80px 80px 80px; 
} */

/* --- 文章匯集頁 pagination 樣式 ---  */
.page-numbers {
  width: 54px;
  height: 26px;

  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 99px;
  background-color: white;
  color: #666;
  font-family: "Josefin Sans";
  line-height: 120%;
  font-weight: 500;
}

.page-numbers:not(.current):hover {
  background-color: #3eb375;
  color: #fff;
  transition:
    background-color 0.7s ease,
    color 0.7s ease;
}

/* 當前頁 */
.page-numbers.current {
  background-image: linear-gradient(
    90deg,
    #3eb375 50%,
    rgba(62, 179, 117, 0.2) 100%
  );
  color: white;
  font-weight: 600;
}
.prev,
.next {
  width: 54px;
  height: 26px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: white;
  border-radius: 99px;
  border: none;
  padding: 0 12px;

  color: #1a1a1a;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
.prev:hover,
.next:hover {
  background-color: #3eb375;
  color: #ffffff;
}

.hu-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hu-pagination .page-numbers.disabled {
  pointer-events: none;
  background-color: #ffffff66;
  border: none;
  color: #c9c9c9;
}
/* --- 文章匯集頁 pagination 樣式 end --- */

/* --- header 手機版漢堡線 --- */
.hamberger .line {
  display: block;
  width: 29px;
  height: 1px;
  background-color: #ffffff;
  border-radius: 9999px; /* round cap */
  transition: all 0.3s ease;
}

/* active 時變成 X */
.hamberger.active .top {
  transform: translateY(11px) rotate(45deg);
}

.hamberger.active .middle {
  opacity: 0;
}

.hamberger.active .bottom {
  transform: translateY(-11px) rotate(-45deg);
}
/* --- header 手機版漢堡線 end--- */

/* --- header 手機版選單 --- */
.web_nav_m.open {
  transform: translateX(0);
  opacity: 1;
}

/* 手機選單背景模糊 */
.menu-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.4); /* 背景遮罩 */
}

.no-scroll {
  overflow: hidden;
  width: 100%;
}

/* 文章頁 & 404.php header 文字樣式 */

/* 1. 主選單第一層 (ul.designhuHeader > li > a) 
   使用 > 確保只改到第一層，不會改到 Mega Menu 裡面的連結 */
.single-news .site-header .designhuHeader > li > a,
.single-blog .site-header .designhuHeader > li > a,
.error404 .site-header .designhuHeader > li > a {
  color: white;
}

/* 2. 語言切換區塊的連結 (.lang-btn) */
.single-news .site-header .lang-btn,
.single-blog .site-header .lang-btn,
.error404 .site-header .lang-btn {
  color: white;
}

/* 若有下拉選單打開時文字變回深色 */
.single-news .site-branding.is-mega-open .designhuHeader > li > a,
.single-blog .site-branding.is-mega-open .designhuHeader > li > a,
.error404 .site-branding.is-mega-open .designhuHeader > li > a {
  color: #1a1a1a;
}

/* 斜線 */
.single-news .site-header .text-gray3,
.single-blog .site-header .text-gray3,
.error404 .site-header .text-gray3 {
  color: white;
}

/* 文章頁 & 404.php header 文字樣式 ====== */

/* Contact Us input */
input::placeholder,
textarea::placeholder {
  color: #c1c1c1;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */
  letter-spacing: 0.3px;
}

/* timeline about 歷史沿革 ＆ 主頁 */
/* 橫向時間線 */
.timeSwiper::before,
.timelineSwiper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 210px;
  height: 1px;
  width: 100%;
  background: #3eb375;
  z-index: 0;
}

.hex-card {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

/* === blog 文章頁 see more news === */
.card-border-animate::before,
.card-border-animate::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, #3eb375 50%, rgba(62, 179, 117, 0.2) 100%);
  transition: all 0.7s ease;
  pointer-events: none;
}

/* 上邊 */
.card-border-animate::before {
  top: 0;
  left: 0;
  height: 1px;
  width: 0%;
}

/* 左邊 */
.card-border-animate::after {
  top: 0;
  left: 0;
  width: 1px;
  height: 0%;
}

/* Hover 狀態 */
.card-border-animate:hover::before {
  width: 100%;
  height: 2px;
}

.card-border-animate:hover::after {
  height: 100%;
  width: 2px;
}
/* === blog 文章頁 see more news === end*/

.ui-corner-line {
  position: relative;
  overflow: hidden;
}

/* 上邊線 */
.ui-corner-line::before,
.ui-corner-line::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, #3eb375 50%, rgba(62, 179, 117, 0.2) 100%);
  pointer-events: none;
  transition: all 0.4s ease;
}

/* 上邊：從左到右 */
.ui-corner-line::before {
  top: 0;
  left: 0;
  height: 1px;
  width: 0%;
}

/* 左邊：從上到下 */
.ui-corner-line::after {
  top: 0;
  left: 0;
  width: 1px;
  height: 0%;
}

/* Hover 展開 */
a:hover .ui-corner-line::before,
.ui-corner-line:hover::before {
  width: 100%;
}

a:hover .ui-corner-line::after,
.ui-corner-line:hover::after {
  height: 100%;
}

/* Active 狀態：直接滿長 */
.ui-corner-line.is-active::before {
  width: 100%;
}

.ui-corner-line.is-active::after {
  height: 100%;
}

/* 首頁 service items 收合 */
.accordion-item {
  position: relative;
}

/* hover 底線 gradient */
.accordion-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0%;
  background: linear-gradient(90deg, #3eb375 50%, rgba(62, 179, 117, 0.2) 100%);
  transition: 0.3s ease;
}

/* hover 出現 */
.accordion-item:hover::after {
  width: 100%;
}

/* active 狀態 */
.accordion-item.is-active::after {
  width: 100%;
}

/* active 上邊線 */
.accordion-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 0%;
  background: linear-gradient(90deg, #3eb375 50%, rgba(62, 179, 117, 0.2) 100%);
  /* transition: width 0.3s ease; */
}

/* active 時出現上邊線 */
.accordion-item.is-active::before {
  width: 100%;
}

/* 首頁 聯絡我們 */
.clip-diagonal {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

#service-title span {
  display: inline-block;
  transform: translateX(-40px);
  opacity: 0;
  transition:
    transform 0.6s ease,
    opacity 0.6s ease;
}

#service-title.is-active span {
  transform: translateX(0);
  opacity: 1;
}

/* 共用 sidebar固定在左側 */
.sidebar-sticky {
  position: sticky;
  top: 120px;
}

/* =============================
  Animated Border ( btn1 & totop 共用元件)
============================= */
.btn--animated-border {
  position: relative;

  /* 設計系統變數 */
  --border-radius: 4px;
  --border-delay: 1s;
  --border-draw-duration: 0.6s;
}

/* ===== 2px 靜態框 ===== */
.btn--animated-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: var(--border-radius);

  background: linear-gradient(90deg, #3eb375 50%, rgba(62, 179, 117, 0.2) 100%);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  padding: 2px;
  opacity: 0;
}

/* ===== 1px 動畫框 ===== */
.btn--animated-border::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--border-radius);

  background: linear-gradient(
    180deg,
    #3eb375 50%,
    rgba(62, 179, 117, 0.2) 100%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  padding: 1px;
  opacity: 0;

  clip-path: inset(100% 45% 0 45% round var(--border-radius));
}

/* ===== hover 行為 ===== */
.btn--animated-border:hover {
  border-color: transparent;
}

.btn--animated-border:hover::before {
  opacity: 1;
  animation: hideStaticBorder 0s linear var(--border-delay) forwards;
}

.btn--animated-border:hover::after {
  opacity: 1;
  animation: drawBorder var(--border-draw-duration) ease forwards
    var(--border-delay);
}

/* ===== reset ===== */
.btn--animated-border:not(:hover)::before,
.btn--animated-border:not(:hover)::after {
  animation: none;
  opacity: 0;
}

@keyframes hideStaticBorder {
  to {
    opacity: 0;
  }
}

/* 下 → 左 → 上 → 右，順時針 */
/* clip-path: inset(top right bottom left round 999px); */
@keyframes drawBorder {
  0% {
    clip-path: inset(45% 100% 45% 0 round var(--border-radius));
  }
  25% {
    clip-path: inset(0 100% 0 0 round var(--border-radius));
  }
  50% {
    clip-path: inset(0 0 100% 0 round var(--border-radius));
  }
  75% {
    clip-path: inset(0 0 0 100% round var(--border-radius));
  }
  100% {
    clip-path: inset(0 0 0 0% round var(--border-radius));
  }
}

/* =============================
  totop button ＆ icon
============================= */
.icon-wrap {
  position: relative;
  width: 24px;
  height: 24px;
}

.icon {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  fill: #1a1a1a;
}

.icon-default {
  opacity: 1;
}

.totop {
  position: absolute;
  width: 48px;
  height: 48px;
  background: #efefef;
  border: 1px solid white;
  border-radius: 4px;

  display: flex;
  align-items: center;
  justify-content: center;
  --border-radius: 4px;
  --border-delay: 0.6s; /*  drawBorder 的 delay */
}

/* 箭頭動畫 */
.totop:hover .icon-default {
  opacity: 0;
}

.totop:hover .icon-hover-1 {
  opacity: 1;
  animation: hideIcon1 0s linear var(--border-delay) forwards;
}

.totop:hover .icon-hover-2 {
  opacity: 0;
  animation: showIcon2 0.6s linear var(--border-delay) forwards;
}

@keyframes hideIcon1 {
  to {
    opacity: 0;
  }
}

@keyframes showIcon2 {
  to {
    opacity: 1;
  }
}

.btn1 {
  position: relative;
  background: white;
  color: #1a1a1a;
  font-family: "Josefin Sans";

  border: 1px solid #efefef;
  border-radius: 99px;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  /* 對齊 animated border */
  --border-radius: 99px;
  z-index: 0;
}

.lang-btn {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 99px;
  border: 1px solid transparent;
  transition: color 0.2s ease;
}

/* 漸層邊框 */
.lang-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99px;
  pointer-events: none;

  border: 1px solid transparent;
  border-image: linear-gradient(
      90deg,
      #3eb375 50%,
      rgba(62, 179, 117, 0.2) 100%
    )
    1;

  opacity: 0;
  transition: opacity 0.7s ease;
}

/* hover 出現邊框 */
.lang-btn:hover::before {
  opacity: 1;
}

/* ==== news 匯集頁箭頭動畫 ==== */
.arrow-wrap {
  position: relative;
  width: 24px;
  height: 24px;
}

/* 共用 */
.arrow {
  position: absolute;
  inset: 0;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}

/* 初始狀態 */
.arrow-1 {
  transform: translateX(0);
  opacity: 1;
}

.arrow-2 {
  transform: translateX(-100%);
  opacity: 0;
}

/* hover 在整個卡片 a 上 */
a.group:hover .arrow-1 {
  transform: translateX(100%);
  opacity: 0;
}

a.group:hover .arrow-2 {
  transform: translateX(0);
  opacity: 1;
}

/* ==== news 匯集頁箭頭動畫 end ==== */

.timeBtn {
  padding: 4px 12px;
  border-radius: 99px;
  background-color: white;
  color: #666;
  font-family: "Josefin Sans";
  transition:
    background-color 0.7s ease,
    color 0.7s ease;
}

/* hover */
.timeBtn:not(.timeBtn.is-active):hover {
  background-color: #3eb375;
  color: #ffffff;
}

/* active */
.timeBtn.is-active {
  background-image: linear-gradient(
    90deg,
    #3eb375 50%,
    rgba(62, 179, 117, 0.2) 100%
  );
  color: #ffffff;
}

/* 產品介紹頁 - 縮圖 active 時的綠色遮罩 */
.thumb-active-mask {
  position: absolute;
  inset: 0;
  background: #3eb375cc;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2; /* 一定要高於圖片 */
  /* 模糊底下的圖片 */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Swiper active */
.mySwiper .swiper-slide-thumb-active .thumb-active-mask {
  opacity: 1;
}

/* 文章頁社群分享 icon 連結 */
.heateor_sss_sharing_container a {
  position: relative;
}

.heateor_sss_sharing_container a::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 99px;
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-image: linear-gradient(
      90deg,
      #3eb375 50%,
      rgba(62, 179, 117, 0.2) 100%
    )
    1;
}

.heateor_sss_sharing_container a:hover::after {
  opacity: 1;
}