:root {
  --Main-Bg: #f6f4f4;
  --Light-BG: #e5e5e5;
  --Headlines: #13120c;
  --White: #fff;
  --Font-Family-Title: "Rethink Sans";
  --Font-Family-Body: "Rethink Sans";
  --Font-Size-H1: 96px;
  --Font-Size-H4: 34px;
  --Font-Size-H6: 20px;
  --Font-Size-Body-1: 16px;
  --Font-Size-Body-2: 14px;
  --Body-text: #484740;
  /* slider */
  --card-w: 1022px;
  --overlap: 870px;
  --gap: calc(var(--card-w) - var(--overlap));
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

p {
  overflow-wrap: break-word;
}

body {
  /* max-width: 1920px; */
  margin: 0 auto;
  /* 1) 確保不合成粗體 */
  font-synthesis: none;

  /* 2) 讓渲染更接近設計工具 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  all: unset;
  display: flex;
  align-items: center;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: var(--Headlines, #13120c);
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}

a:visited {
  color: inherit;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* border-radius: 24px; */
}

/* Header */
.header-bg {
  background-color: var(--Main-Bg, #f6f4f4);
}
.site-header {
  width: 100%;
  height: 66.6px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 19px 7.813% 19px 7.813%;
  transition: all 0.3s ease-in-out;
  max-width: 1920px;
  margin: 0 auto;
}
/* ===== Header 永遠固定在最上方（全站） ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1688; /* 你原本 mobile 用 1688，沿用 */
}
@media (min-width: 1921px) {
  .site-header {
    padding: 19px 150px 19px 150px;
  }
}
@media (max-width: 1920px) {
  .site-header {
    background-color: var(--Main-Bg, #f6f4f4);
  }
}
@media (max-width: 850px) {
  body.menu-open .site-header {
    height: auto;
    padding: 64px 16px 0 16px;
    background-color: var(--White, #fff);
  }
}
@media (max-width: 575px) {
  .site-header {
    height: auto;
    padding: 16px 16px 8px 16px;
    top: 0;
    z-index: 1688;
    background-color: var(--Main-Bg, #f6f4f4);
  }
}

.site-header .web_nav {
  width: 100%;
}

.site-header .logo {
  width: 6.25%;
  flex-shrink: 0;
  min-width: 120px;
  margin-right: 5%;
}

@media (max-width: 1440px) {
  .site-header .logo {
    margin-right: 0%;
  }
}
/* ===== Hero 狀態：LOGO 轉成白色 ===== */
body.is-hero .site-header .logo img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.site-header .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  max-height: 32px;
}

.web_nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 47px;

  position: relative;
  width: 91%;
}
html[lang="zh-TW"] .web_nav ul.designhuHeader {
  gap: 93px;
}
@media (max-width: 1770px) {
  html[lang="zh-TW"] .web_nav ul.designhuHeader,
  .web_nav ul {
    gap: 77px;
  }
}
@media (max-width: 1300px) {
  .web_nav ul {
    gap: 35px;
  }
  html[lang="zh-TW"] .web_nav ul.designhuHeader {
    gap: 54px;
  }
}
@media (max-width: 980px) {
  .web_nav ul {
    gap: 20px;
  }
}
@media (max-width: 850px) {
  .web_nav ul {
    display: none;
  }
}

.web_nav ul .accordion-item-li {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.web_nav ul .accordion-item-li:first-child {
  position: absolute;
  top: 0;
  left: 5.7%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.web_nav ul .accordion-item-li:last-child {
  position: absolute;
  top: 0;
  right: 31px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.web_nav ul .accordion-item-li a:hover {
  text-decoration: none;
}

.web_nav ul .accordion-item-li.current-menu-item,
.web_nav ul .accordion-item-li.current-menu-parent {
  margin-left: -27px;
}

.web_nav ul .accordion-item-li.current-menu-item::before,
.web_nav ul .accordion-item-li.current-page-parent::before,
.web_nav ul .accordion-item-li.current-menu-parent::before,
.web_nav ul .accordion-item-li.current-page-ancestor::before {
  content: "";
  background: #d9d9d9;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.site .web_nav ul li span {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  text-wrap: nowrap;
}
html[lang="zh-TW"] .site .web_nav ul li span {
  font-family: "Noto Sans TC";
}
@media (max-width: 1100px) {
  .site .web_nav ul li span {
    font-size: 18px;
  }
}
@media (max-width: 1000px) {
  .site .web_nav ul li span {
    font-size: 15px;
  }
}

.site .web_nav ul .accordion-item-li:hover > a > .line {
  opacity: 0.8;
}

.site .web_nav ul .accordion-item-content-li:hover > a > .line {
  opacity: 1;
}

.site-header .nav_lang {
  position: absolute;
  top: 19.34px;
  /* right: 19px; */
  right: 7.813%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1921px) {
  .site-header .nav_lang {
    right: 150px;
  }
}

.site-header .nav_lang.mb h6 a {
  color: var(--Headlines, #13120c) !important;
  opacity: 0.8;
}
.site-header .nav_lang.mb h6.is-active a {
  opacity: 1;
}

.site-header .nav_lang.mb svg path {
  stroke: var(--Headlines, #13120c) !important;
}

@media (max-width: 850px) {
  .site-header .nav_lang.pc {
    display: none;
  }

  .site-header .nav_lang {
    position: static;
  }
}

.site-header h6 {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.4;
}
.site-header h6.is-active {
  opacity: 1;
}
@media (max-width: 1000px) {
  .site-header h6 {
    font-size: 15px;
  }
}

.accordion-item-content-nav {
  display: none;
  position: absolute;
  top: 28px;
  left: 0px;
  z-index: 100;
}
.web_nav ul .accordion-item-li.current-menu-item .accordion-item-content-nav,
.web_nav
  ul
  .accordion-item-li.current-page-ancestor
  .accordion-item-content-nav,
.web_nav ul .accordion-item-li.current-menu-parent .accordion-item-content-nav {
  display: none;
  position: absolute;
  top: 28px;
  left: 25px;
  z-index: 100;
}

.web_nav .accordion-item-content-ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: start;
  align-items: start;
}

.web_nav .accordion-item-content-ul .accordion-item-content-li {
  margin-left: 0;
}

.web_nav .accordion-item-content-ul .accordion-item-content-li span {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
  opacity: 0.6;
}

.web_nav
  ul
  .accordion-item-li.current-menu-item:hover
  .accordion-item-content-nav,
.web_nav
  ul
  .accordion-item-li.current-page-parent:hover
  .accordion-item-content-nav,
.web_nav
  ul
  .accordion-item-li.current-menu-parent:hover
  .accordion-item-content-nav,
.web_nav ul .accordion-item-li:hover .accordion-item-content-nav,
.web_nav
  ul
  .accordion-item-li.current-page-ancestor:hover
  .accordion-item-content-nav {
  display: block;
}

/* .accordion-item-content-nav {
  display: block;
} */

.mobile_nav_icon {
  display: none;
}

@media (max-width: 850px) {
  .mobile_nav_icon {
    position: relative;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-right: 16px;
  }

  .mobile_nav_icon svg {
    position: absolute;
    inset: 0;
    width: 48px;
    height: 48px;
    transition:
      opacity 0.4s ease,
      transform 0.5s ease;
    transform-origin: center;
    opacity: 0;
    transform: rotate(0deg) scale(0.8);
  }

  /* 顯示狀態 */
  .mobile_nav_icon svg.is-active {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  /* 點開狀態（從 open → close 的動畫） */
  body.menu-open .mobile_nav_icon svg:first-of-type {
    transform: rotate(90deg) scale(0.5);
    opacity: 0;
  }
  body.menu-open .mobile_nav_icon svg:last-of-type {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }

  /* 未開時（從 close → open 的動畫） */
  body:not(.menu-open) .mobile_nav_icon svg:first-of-type {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  body:not(.menu-open) .mobile_nav_icon svg:last-of-type {
    transform: rotate(-90deg) scale(0.5);
    opacity: 0;
  }
}

/* 當手機選單打開時鎖住整頁 */
body.lock-scroll {
  overflow: hidden;
  height: 100vh;
  touch-action: none; /* 禁止手機的下拉滑動事件 */
}
.mobile_nav {
  width: 100%;
  height: calc(100vh - 112px);
  overflow-y: auto; /* 只讓 menu 自己滾動 */
  position: fixed;
  top: 112px; /* 從 header 底下開始 */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 0 16px 40px 16px;
  background: var(--White, #fff);
  backdrop-filter: blur(16px);
}
/* hidden 時保險隱藏 */
.mobile_nav[hidden] {
  display: none !important;
}
@media (min-width: 851px) {
  .mobile_nav {
    display: none;
  }
}

.mobile_nav .accordion-item-content-nav {
  display: block;
  position: static;
}

.mobile_nav ul {
  display: flex;
  flex-direction: column;
}
.mobile_nav ul.designhuHeader {
  margin: 55px 0;
  gap: 17px;
}

/* 僅第一層：.accordion-item-li 直屬的 a 裡的 .line */
.mobile_nav > ul > li.accordion-item-li > a > .line {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  margin-bottom: 8px;
  width: 100%;
  display: block;
  padding: 12px 0 20px 0;
  border-bottom: 1px solid var(--Light-BG, #e5e5e5);
}

.mobile_nav ul .accordion-item-content-li a .line {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
  opacity: 0.6;
}

.nav_contact_button {
  width: 100%;
  display: flex;
  padding: 20px 27px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  align-self: stretch;
  border-radius: 56px;
  background: var(--Headlines, #13120c);

  margin: 55px 0 40px 0;
  z-index: 9999;
}

.nav_contact_button a {
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  z-index: 9999;
}

/* Header END */

/* Home */
/* ===== 滿版影片（100vw + 100vh） ===== */
.home-video-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
@media (max-width: 768px) {
  .home-video-hero {
    width: 100%;
    height: auto;
    aspect-ratio: 377 / 303;
  }
}

.home-video-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-video-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* ===== Hero 期間 Header：透明底 + 白字 ===== */
body.is-hero #masthead,
body.is-hero .site-header {
  background: transparent !important;
  box-shadow: none !important;
}

/* 連結白字（你 header 裡的 a 都會套到） */
body.is-hero #masthead a,
body.is-hero .site-header a {
  color: #fff;
}

body.is-hero .mobile_nav_icon svg rect {
  fill: #fff;
}

/* Astra 常見 hamburger / icon 變白（不是 Astra 也不會壞） */
body.is-hero .ast-mobile-menu-trigger-minimal,
body.is-hero .ast-mobile-menu-trigger-minimal .ast-mobile-svg {
  color: #fff !important;
  fill: #fff !important;
}

/* ===== Hero 期間：Header 文字強制白色（實際顯示的是 span） ===== */

/* 第一層選單文字 */
body.is-hero .site .web_nav ul li span {
  color: #fff !important;
}

/* 子選單文字（如果有下拉） */
body.is-hero .web_nav .accordion-item-content-ul span {
  color: #fff !important;
  opacity: 0.85;
}

/* 語系切換 En | 中文（h6） */
body.is-hero .site-header h6 {
  color: #fff;
  opacity: 0.8;
}
body.is-hero .site-header h6.is-active {
  opacity: 1;
}

/* ===== Hero 狀態：語系切換中間的 SVG 改成白色 ===== */
body.is-hero .site-header .nav_lang svg path {
  stroke: #fff;
}

/* ===== Hero 狀態：修正 current item 圓點位置 ===== */
body.is-hero .site .web_nav ul .accordion-item-li.current-menu-item {
  margin-left: 0;
}

/* Hero 狀態：圓點顯示為白色 */
body.is-hero .web_nav ul .accordion-item-li.current-menu-item::before,
body.is-hero .web_nav ul .accordion-item-li.current-page-parent::before,
body.is-hero .web_nav ul .accordion-item-li.current-menu-parent::before,
body.is-hero .web_nav ul .accordion-item-li.current-page-ancestor::before {
  background: #fff;
}

/* =========================================
   Mobile menu OPEN overrides (priority over hero)
   ========================================= */

/* 3) 選單打開：語言分隔線 svg stroke 改黑 */
body.menu-open #masthead.site-header .nav_lang svg path {
  stroke: #13120c !important;
}

/* 5) 如果你 hero 狀態有把 header 變透明，這裡強制蓋回來 */
body.menu-open.is-hero #masthead.site-header {
  background: #fff !important;
}

body.menu-open #masthead .mobile_nav_icon svg rect,
body.menu-open #masthead .mobile_nav_icon svg path {
  fill: #13120c !important;
}

/* ✅ menu 打開時：logo 一律回黑，蓋過 is-hero 的 invert */
body.menu-open .site-header .logo img {
  filter: none !important;
}

.video-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;

  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* SVG 共用設定 */
.video-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  color: #fff;
}

/* 外圈 */
.video-toggle circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
}

/* icon 本體 */
.video-toggle rect,
.video-toggle path {
  fill: currentColor;
}

/* 狀態切換 */
.video-toggle .icon-play {
  display: none;
}
.video-toggle.is-paused .icon-pause {
  display: none;
}
.video-toggle.is-paused .icon-play {
  display: block;
}

.home-header-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.home-header {
  width: 100%;
  padding: 48px 7.813% 16px 7.813%;
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}
html[lang="zh-TW"] .home-header {
  display: flex;
  align-items: center;
  gap: 54px;
  padding: 100px 7.813% 87px 7.813%;
}
@media (min-width: 1921px) {
  .home-header {
    padding: 48px 150px 16px 150px;
  }
  html[lang="zh-TW"] .home-header {
    padding: 100px 150px 87px 150px;
  }
}
@media (max-width: 950px) {
  html[lang="zh-TW"] .home-header {
    gap: 30px;
  }
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .home-header {
    flex-direction: column;
    align-items: start;
    gap: 8px;
  }
}
@media (max-width: 525px) {
  .home-header {
    padding: 50px 16px 24px 16px;
  }
  html[lang="zh-TW"] .home-header {
    padding: 32px 20px 16px 20px;
  }
}

.home-header .zh-line {
  display: none;
}
html[lang="zh-TW"] .home-header .zh-line {
  display: block;
  max-height: 122px;
}
@media (max-width: 1890px) {
  html[lang="zh-TW"] .home-header .zh-line {
    max-height: 110px;
  }
}
@media (max-width: 1660px) {
  html[lang="zh-TW"] .home-header .zh-line {
    max-height: 90px;
  }
}
@media (max-width: 1550px) {
  html[lang="zh-TW"] .home-header .zh-line {
    max-height: 78px;
  }
}
@media (max-width: 1350px) {
  html[lang="zh-TW"] .home-header .zh-line {
    max-height: 77px;
  }
}
@media (max-width: 1150px) {
  html[lang="zh-TW"] .home-header .zh-line {
    max-height: 54px;
  }
}
@media (max-width: 1024px) {
  html[lang="zh-TW"] .home-header .zh-line {
    max-height: 47px;
  }
}
@media (max-width: 950px) {
  html[lang="zh-TW"] .home-header .zh-line {
    max-height: 38px;
  }
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .home-header .zh-line {
    display: none;
  }
}

.home-header .title {
  width: 100%;
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 122px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
html[lang="zh-TW"] .home-header .title {
  width: auto;
  font-size: 122px;
  letter-spacing: -2.3px;
}
@media (min-width: 1921px) {
  html[lang="zh-TW"] .home-header .title {
    /* font-size: 158px; */
  }
}
.home-header .sub-title {
  position: absolute;
  top: 63.5%;
  left: 8%;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
@media (min-width: 1921px) {
  .home-header .sub-title {
    left: 150px;
  }
}
@media (max-width: 1890px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 110px;
  }
  .home-header .title {
    font-size: 106px;
  }
  .home-header .sub-title {
    top: 63%;
  }
}
@media (max-width: 1760px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 100px;
  }
}
@media (max-width: 1660px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 90px;
  }
  .home-header .title {
    font-size: 90px;
  }
  .home-header .sub-title {
    top: 59%;
  }
}
@media (max-width: 1550px) {
  .home-header .title {
    font-size: 76px;
  }
  html[lang="zh-TW"] .home-header .title {
    font-size: 78px;
  }
  .home-header .sub-title {
    top: 54%;
  }
}
@media (max-width: 1350px) {
  .home-header .title {
    font-size: 76px;
  }
  html[lang="zh-TW"] .home-header .title {
    font-size: 77px;
  }
  .home-header .sub-title {
    top: 56%;
    font-size: 24px;
  }
}
@media (max-width: 1280px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 65px;
  }
}
@media (max-width: 1180px) {
  .home-header .title {
    font-size: 60px;
  }
  .home-header .sub-title {
    top: 57%;
    font-size: 20px;
  }
}
@media (max-width: 1150px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 54px;
  }
}
@media (max-width: 1024px) {
  .home-header .title {
    font-size: 52px;
  }
  html[lang="zh-TW"] .home-header .title {
    font-size: 47px;
  }
  .home-header .sub-title {
    top: 59%;
    font-size: 18px;
  }
}
@media (max-width: 950px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 38px;
  }
}
@media (max-width: 880px) {
  .home-header .title {
    font-size: 44px;
  }
  .home-header .sub-title {
    top: 59%;
    font-size: 16px;
    line-height: 130%;
  }
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 60px;
  }
  .home-header .title {
    font-size: 60px;
  }
}
@media (max-width: 600px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 48px;
  }
  .home-header .title {
    font-size: 44px;
  }
}
@media (max-width: 500px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 40px;
  }
}
@media (max-width: 525px) {
  .home-header .title {
    font-weight: 300;
    letter-spacing: 0.25px;
    line-height: 140%;
    font-size: 36px;
  }
  html[lang="zh-TW"] .home-header .title {
    font-size: 33px;
    font-weight: 400;
    font-family: "Noto Sans TC";
    line-height: 150%;
    letter-spacing: 0.25px;
    padding-top: 0px;
  }
}
@media (max-width: 330px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 29px;
  }
}
@media (max-width: 330px) {
  .home-header .title {
    font-size: 32px;
  }
}

.home-header .bottom-title {
  display: flex;
  justify-content: end;
}

@media (max-width: 768px) {
  .home-header .bottom-title {
    justify-content: start;
  }
}

html[lang="zh-TW"] .home-header .sub-title {
  position: static;
  color: var(--Headlines, #13120c);
  font-family: "Noto Sans TC";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1px;
}
@media (max-width: 1440px) {
  html[lang="zh-TW"] .home-header .sub-title {
    font-size: 18px;
    letter-spacing: 0.5px;
  }
}
@media (max-width: 825px) {
  html[lang="zh-TW"] .home-header .sub-title {
    font-size: 16px;
  }
}

.home-header .sub-title.web {
  display: block;
}

.home-header .sub-title.mobile {
  display: none;
  position: static;
}

@media (max-width: 768px) {
  .home-header .sub-title.mobile {
    display: block;
    margin-top: 8px;
  }
  .home-header .sub-title.web {
    display: none;
  }
  .home-header .sub-title {
    font-size: 18px;
    gap: 8px;
  }
}
@media (max-width: 520px) {
  .home-header .sub-title {
    font-size: 16px;
    gap: 6px;
  }
}

.home-hero-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.home-hero {
  width: 100%;
  padding: 0 7.8125%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .home-hero {
    padding: 0 150px;
  }
}
@media (max-width: 525px) {
  .home-hero {
    padding: 12px 8px 0px 8px;
  }
}

.home-hero .hero {
  position: relative;
  border-radius: 24px;
  width: 100%;
  aspect-ratio: 1800/1012;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .home-hero .hero {
    aspect-ratio: 377/522;
    background-size: cover;
    background-position: bottom;
  }
  html[lang="zh-TW"] .home-hero .hero a {
    display: none;
  }
}

.home-hero .deco-dot {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  z-index: 2;
}

.home-hero .learn-more {
  display: block;

  color: var(--White, #fff);
  text-align: right;
  position: absolute;
  right: 30px;
  bottom: 30px;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
.home-hero .learn-more.mb {
  display: none;
}
@media (max-width: 525px) {
  .home-hero .learn-more.pc {
    display: none;
  }

  .home-hero .learn-more.mb {
    position: absolute;
    right: 0px;
    bottom: 16px;
    width: 100%;
    display: block;
    color: var(--White, #fff);
    text-align: center;
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.25px;
    text-transform: uppercase;
  }
}

.home-profile-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.home-profile {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1920px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .home-profile {
    display: flex;
    align-items: center;
  }
}

.home-profile .header {
  display: flex;
  align-items: center;
  gap: 30px;
}

.home-profile .header .mb-line {
  display: none;
}

@media (max-width: 768px) {
  .home-profile .header .mb-line {
    display: flex;
    align-items: center;
  }
}

.home-profile .title {
  width: 100%;
  color: var(--Body-text, #484740);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.home-profile .title.zh-mb-title {
  display: none;
}
html[lang="zh-TW"] .home-profile .title {
  color: var(--Dark-BG, #363130);
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 5px;
}

@media (max-width: 768px) {
  .home-profile .title {
    width: fit-content;
    text-align: start;
    padding-left: 8px;
  }
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .home-profile .title.zh-mb-title {
    display: block;
    color: var(--Body-text, #484740);
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 16.8px */
    letter-spacing: 0.25px;
  }
  html[lang="zh-TW"] .home-profile .title.normal {
    display: none;
  }
}

.home-profile .profile {
  width: 100%;
  aspect-ratio: 1920/1080;
  background-size: 90% auto;
  background-repeat: no-repeat;
  background-position: center;
  padding: 120px 7.813% 68px 7.813%;
}
@media (min-width: 1921px) {
  .home-profile .profile {
    padding: 120px 150px 68px 150px;
  }
}
@media (max-width: 1024px) {
  .home-profile .profile {
    background-size: contain;
    background-position: center 9%;
  }
  html[lang="zh-TW"] .home-profile .profile {
    background-position: center 9%;
  }
}
@media (max-width: 768px) {
  .home-profile .profile {
    background-size: contain;
    background-position: center 23%;
  }
  html[lang="zh-TW"] .home-profile .profile {
    background-position: center 10%;
  }
}
@media (max-width: 525px) {
  .home-profile .profile {
    background-size: 150% auto;
    background-position: center 13%;
    padding: 68px 16px 0 16px;
  }
  html[lang="zh-TW"] .home-profile .profile {
    padding: 31px 16px 0 16px;
  }
}

.home-profile .top-title {
  margin-top: 80px;

  color: var(--Headlines, #13120c);
  text-align: center;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 64px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.75px;
}
html[lang="zh-TW"] .home-profile .top-title {
  margin-top: 256px;

  font-size: 34px;
  line-height: 140%;
  letter-spacing: 0.25px;
}
@media (max-width: 1024px) {
  .home-profile .top-title {
    margin-top: 60px;
    font-size: 64px;
  }
  html[lang="zh-TW"] .home-profile .top-title {
    margin-top: 25%;

    font-size: var(--Font-Size-H4, 34px);
    letter-spacing: 0.25px;
  }
}
@media (max-width: 768px) {
  .home-profile .top-title {
    margin-top: 60px;
    font-size: 58px;

    padding-left: 8px;
  }
  html[lang="zh-TW"] .home-profile .top-title {
    margin-top: 25%;

    font-size: var(--Font-Size-H4, 34px);
    letter-spacing: 0.25px;
  }
}
@media (max-width: 620px) {
  .home-profile .top-title {
    font-size: 40px;
  }
}
@media (max-width: 525px) {
  .home-profile .top-title {
    color: var(--Headlines, #13120c);
    text-align: center;
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.15px;
    margin-top: 44px;
  }
  html[lang="zh-TW"] .home-profile .top-title {
    margin-top: 28%;

    font-family: "Noto Sans TC";
    font-size: 14px;
    line-height: 150%;
  }
}

.home-profile .bottom-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  color: var(--Headlines, #13120c);
  text-align: center;
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 108px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;

  min-height: 288px;
  white-space: pre-line; /* 讓 \n 變成換行 */
}
html[lang="zh-TW"] .home-profile .bottom-title {
  font-family: "Noto Sans TC";
  min-height: 150px;
  font-size: 72px;
  margin-top: 32px;
  letter-spacing: -0.75px;
}
@media (max-width: 1024px) {
  .home-profile .bottom-title {
    margin-top: 0px;
    font-size: 72px;
    min-height: 388px;
  }
}
@media (max-width: 768px) {
  .home-profile .bottom-title {
    margin-top: 50px;
    min-height: 288px;
    font-size: 60px;
  }
  html[lang="zh-TW"] .home-profile .bottom-title {
    margin-top: 21px;
    font-size: 60px;
  }
}
@media (max-width: 525px) {
  .home-profile .bottom-title {
    font-size: 34px;
    min-height: 88px;
    margin-top: 35px;
  }
  html[lang="zh-TW"] .home-profile .bottom-title {
    margin-top: 21px;

    font-size: 34px;
    line-height: 150%;
    letter-spacing: 0.25px;
    min-height: 51px;
    margin-bottom: 107px;
  }
}

.home-profile .steps-list {
  margin-top: 180px;
  display: flex;
  align-items: flex-start;
  gap: 42px;
  align-self: stretch;
}
@media (max-width: 1250px) {
  .home-profile .steps-list {
    margin-top: 90px;
    flex-direction: column;
  }
}
@media (max-width: 525px) {
  .home-profile .steps-list {
    margin-top: 48px;
    flex-direction: column;
    gap: 24px;
    padding: 0 12px;
  }
}

.home-profile .steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  flex: 1 0 0;
  max-width: calc((100% - 126px) / 4);
}
@media (max-width: 1250px) {
  .home-profile .steps {
    gap: 16px;
    max-width: 100%;
  }
}
@media (max-width: 525px) {
  .home-profile .steps {
    gap: 16px;
  }
}

.home-profile .steps .steps-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
@media (max-width: 475px) {
  .home-profile .steps .steps-head {
    gap: 0;
  }
}

.home-profile .steps .steps-head .title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;

  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0px;

  /* margin-top: 4px; */
  /* white-space: wrap; */
  text-align: left;
}
@media (max-width: 1720px) {
  .home-profile .steps .steps-head .title {
    font-size: 24px;
  }
}
@media (max-width: 1440px) {
  .home-profile .steps .steps-head .title {
    font-size: 20px;
  }
}
@media (max-width: 1320px) {
  .home-profile .steps .steps-head .title {
    font-size: 18px;
  }
}
@media (max-width: 1250px) {
  .home-profile .steps .steps-head .title {
    font-size: 24px;
  }
}
@media (max-width: 575px) {
  .home-profile .steps .steps-head .title {
    display: none;
  }
}

.home-profile .steps .icon {
  width: 48px;
  height: 48px;
}
@media (max-width: 525px) {
  .home-profile .steps .icon {
    width: 26px;
    height: 26px;
  }
}
.home-profile .steps .icon img {
  width: auto;
}
.home-profile .steps .desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 1600px) {
  .home-profile .steps .desc {
    font-size: 18px;
  }
}
@media (max-width: 1440px) {
  .home-profile .steps .desc {
    font-size: 16px;
  }
}
@media (max-width: 1250px) {
  .home-profile .steps .desc {
    font-size: 19px;
  }
}
.home-profile .steps .desc .desc-pc {
  display: block;
}
.home-profile .steps .desc .desc-mb {
  display: none;
}
@media (max-width: 768px) {
  .home-profile .steps .desc .desc-pc {
    display: none;
  }
  .home-profile .steps .desc .desc-mb {
    display: block;
  }
}

@media (max-width: 525px) {
  .home-profile .steps .desc,
  html[lang="zh-TW"] .home-profile .steps .desc {
    font-size: 14px;
  }
  html[lang="zh-TW"] .home-profile .steps .desc {
    font-family: "Noto Sans TC";
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.5px;
  }
}

.home-awards-bg {
  background: var(--Main-Bg, #f6f4f4);
  border-radius: 0 0 60px 60px;
}
.home-awards {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 56px 7.813% 68px 7.813%;
}
@media (min-width: 1921px) {
  .home-awards {
    padding: 56px 150px 68px 150px;
  }
}
@media (max-width: 768px) {
  .home-awards-bg {
    border-radius: 0;
  }
  .home-awards {
    padding: 64px 16px;
  }
}

.home-awards .head {
  display: flex;
  width: 100%;
  height: 22px;
  align-items: center;
  gap: 30px;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  html[lang="zh-TW"] .home-awards .head {
    padding: 0 16px;
  }
}

.home-awards .head .title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  text-wrap: nowrap;
  white-space: nowrap;
}
html[lang="zh-TW"] .home-awards .head .title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 5px;
}

.home-awards .head .pc-line {
  display: block;
}

@media (max-width: 768px) {
  .home-awards .head .pc-line {
    display: none;
  }
  html[lang="zh-TW"] .home-awards .head .title {
    font-size: 14px;
    line-height: 120%; /* 16.8px */
    letter-spacing: 0.25px;
  }
}

.home-awards .head .mb-line {
  display: none;
}

@media (max-width: 768px) {
  .home-awards .head .mb-line {
    display: block;
  }
}

/* =========================================================
   Awards / Clients multi-row layout (JS controlled)
   - 不裁切 / 不變形
   - Awards: 永遠兩排
   - Clients: >=768 兩排；<768 四排
   - 高度與 gap 由 JS 計算（--logo-h / --col-gap / --row-gap）
   - ✅ 保命：任何情況都不允許撐爆 viewport
   ========================================================= */

/* ✅ 全頁止血：不再出現右邊白邊 */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

.home-awards .awards-list,
.home-clients .clients-list {
  --logo-h: 113px;
  --row-gap: 60px;
  --col-gap: 48px;

  --logo-max-w-base: 204px; /* 桌機基準寬 */
  --logo-max-w: var(--logo-max-w-base); /* ✅ 預設=基準，之後由 JS 動態改寫 */

  width: 100%;
  max-width: 100%;
  display: block;
  padding: 38px 0% 38px 3%;

  overflow-x: visible;
}
.home-clients .clients-list {
  padding: 38px 0% 38px 5.8%;
}
@media (max-width: 475px) {
  .home-awards .awards-list,
  .home-clients .clients-list {
    padding: 24px 0;
  }
  .home-clients .clients-list {
    padding-bottom: 0;
  }
}
@supports not (overflow: clip) {
  .home-awards .awards-list,
  .home-clients .clients-list {
    overflow-x: hidden;
  }
}

.home-awards .awards-list > .awards-row.row-1 {
  margin-bottom: 60px;
}
@media (max-width: 1024px) {
  .home-awards .awards-list > .awards-row.row-1 {
    margin-bottom: 40px;
  }
}
@media (max-width: 475px) {
  .home-awards .awards-list > .awards-row.row-1 {
    margin-bottom: 24px;
  }
}
/* JS 插入的 row */
.home-awards .awards-list > .awards-row,
.home-clients .clients-list > .awards-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap; /* 預設不換行，交給 JS 切 rows */
  gap: var(--col-gap);
  max-width: 100%;
}

.home-awards .awards-list > .awards-row,
.home-clients .clients-list > .awards-row {
  display: flex;
  flex-wrap: nowrap; /* ✅ 同排不換行 */
  gap: var(--col-gap);
  align-items: center;
  justify-content: center;
}
@media (max-width: 475px) {
  .home-awards .awards-list > .awards-row,
  .home-clients .clients-list > .awards-row {
    justify-content: space-between !important;
    width: 100% !important;
  }
}

.home-awards .awards-list .award,
.home-clients .clients-list .client {
  height: var(--logo-h);
  max-width: var(--logo-max-w);
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-awards .awards-list .award img,
.home-clients .clients-list .client img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
}

/* award 的 a：避免被全域 a {display:block;width:100%} 影響 */
.home-awards .awards-list .award > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: auto;
  max-width: var(--logo-max-w);
}

/* img：只受高度控制，等比例縮放，不裁切不變形 */
.home-awards .awards-list .award img,
.home-clients .clients-list .client img {
  display: block;
  height: 100%;
  width: auto;
  max-width: var(--logo-max-w);
  object-fit: contain;
  object-position: center;
}

/* ✅ Clients：<768 你要求 space-between，但如果不小心 overflow，JS 會加 is-overflow 保命改成 wrap */
@media (max-width: 767.98px) {
  .home-clients .clients-list > .awards-row {
    justify-content: space-between;
  }
}

/* ✅ 保命模式（JS 會在真的塞不下時加上 is-overflow） */
.home-awards .awards-list.is-overflow > .awards-row,
.home-clients .clients-list.is-overflow > .awards-row {
  flex-wrap: nowrap;
  justify-content: center;
  row-gap: var(--row-gap);
}

/* hover 放大（保留你的需求） */
.home-awards .awards-list .award:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.home-awards .bottom {
  display: flex;
  width: 100%;
  height: 12px;
  align-items: center;
  gap: 30px;
  flex-shrink: 0;
}
.home-awards .bottom .mb-line {
  display: none;
}

@media (max-width: 525px) {
  .home-awards .bottom .pc-line,
  .home-awards .bottom .pc-dot {
    display: none;
  }
  .home-awards .bottom .mb-line {
    display: block;
  }
}

/* ===== 基本容器 ===== */
.home-slider {
  --card-w: 1022px;
  width: 100%;
  padding: 108px 7.813% 83px 7%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .home-slider {
    padding: 108px 150px 83px 150px;
  }
}
.home-slider .swiper.overlap {
  overflow: hidden;
  padding: 9px 0;
  border-radius: 32px;
  margin-bottom: 20px;
}
.home-slider .swiper.overlap .swiper-wrapper {
  position: relative;
  height: 732px;
  overflow: visible; /* 浮起不被裁切 */
  width: 100%;
  margin: 0 auto;

  box-sizing: border-box; /* 保險，避免內邊撐寬 */
}

/* ===== 卡片：原地定位，不做透明度/陰影特效 ===== */
.home-slider .swiper.overlap .swiper-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  height: 732px;
  transform: translateX(calc(-50% + var(--offset, 0px) + var(--x, 0px)))
    translateY(0);
  transition:
    transform 0.35s ease,
    z-index 0.25s ease,
    height 0.35s ease;
  border: 8px #fff solid;
  border-radius: 32px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  visibility: hidden; /* 初始隱藏，舞台上才顯示 */
  pointer-events: none;
  /* 不要陰影 */
  box-shadow: none;
}

/* 舞台上的卡片可見可點（不改透明度） */
.home-slider .swiper.overlap .swiper-slide[data-show="1"] {
  visibility: visible;
  pointer-events: auto;
}
.home-slider .swiper.overlap .swiper-slide[data-show="1"]:hover {
  z-index: 1200;
}

/* 內層圖片：active 時縮短，露出 meta */
.home-slider .swiper.overlap .swiper-slide .slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  transition: height 0.35s ease;
}

.home-slider .swiper.overlap .swiper-slide .slide-img .deco-dot {
  position: absolute;
  top: 16px;
  left: 16px;
}

.home-slider .swiper.overlap .swiper-slide .slide-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 32px;
}

/* 敘述（預設不顯示） */
.home-slider .swiper-slide .meta {
  display: none;
  padding: 16px 20px;
  background: #fff;
  justify-content: space-between;
  align-items: center;
}
.home-slider .swiper-slide .meta span {
  color: #13120c;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}

/* ===== 被點擊：原地上移 + 顯示敘述 ===== */
.home-slider .swiper.overlap .swiper-slide.is-active .slide-img {
  height: 90%;
}

.home-slider .swiper.overlap .swiper-slide.is-active .meta {
  display: flex;
}

.home-slider .controls {
  display: flex;
  align-items: center;
  gap: 30px;
  align-self: stretch;
  justify-content: space-between;
  padding-left: 20px;
}

.home-slider .controls .slide-button {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.home-slider .controls .slide-button .ctrl-btn {
  display: flex;
  padding: 20px;
  align-items: center;
  border-radius: 50%;
  border: 1px solid var(--Lines, #c8c8ca);
  transition: background-color 0.1s ease-in-out;
}

.home-slider .controls .slide-button .ctrl-btn:hover,
.home-slider .controls .all-button:hover {
  background-color: var(--Main-Bg, #f6f4f4);
}

.home-slider .controls .all-button {
  display: flex;
  width: 19.2%;
  padding: 22px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 56px;
  border: 1px solid var(--Lines, #c8c8ca);

  color: var(--Headlines, #13120c);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;

  transition: background-color 0.1s ease-in-out;
}
html[lang="zh-TW"] .home-slider .controls .all-button {
  font-size: 22px;
  width: 19%;
  padding: 18px 18px 18px 20px;
  letter-spacing: 3px;
}

@media (max-width: 1440px) {
  .home-slider .controls .all-button {
    display: flex;
    width: 25%;
  }
}
@media (max-width: 1024px) {
  .home-slider .controls .all-button {
    display: flex;
    width: 50%;
  }
}

/* 預設：桌機顯示原 slider；手機版區塊先隱藏 */
.home-slider-mobile {
  display: none;
}

/* 手機 ≤768px：隱藏原本 .home-slider（你的 slider 區塊），改顯示手機版 */
@media (max-width: 768px) {
  .home-slider {
    display: none !important;
  }
  .home-slider-mobile {
    display: block !important;
    width: 100%;
    background: var(--Main-Bg, #f6f4f4);
    padding: 0 8px;
  }

  .home-slider-mobile .hsm-list {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    margin-bottom: 8px;
  }
  html[lang="zh-TW"] .home-slider-mobile .hsm-list {
    margin-bottom: 42px;
  }
  .home-slider-mobile .hsm-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-radius: 24px;
    background: var(--White, #fff);
    padding: 8px;
    margin-bottom: 8px;
  }
  .home-slider-mobile .hsm-card .hsm-img {
    position: relative;
  }
  .home-slider-mobile .hsm-card .hsm-img svg {
    position: absolute;
    top: 16px;
    left: 16px;
  }
  .home-slider-mobile .hsm-img img {
    display: block;
    width: 100%;
    height: 299px;
    border-radius: 24px;
  }
  .home-slider-mobile .hsm-meta {
    margin-top: 8px;
    padding: 16px 8px;
    display: flex;
    justify-content: space-between;
  }
  .home-slider-mobile .hsm-title {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: var(--Font-Size-H6, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.15px;
  }
  .home-slider-mobile .hsm-all {
    /* margin-top: 16px; */
    width: 100%;
    display: flex;
    padding: 24px 27px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 56px;
    border: 1px solid var(--Lines, #c8c8ca);

    color: var(--Headlines, #13120c);
    text-align: center;
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.25px;
    text-transform: uppercase;
  }
  html[lang="zh-TW"] .home-slider-mobile .hsm-all {
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 3px;
  }
}
@media (max-width: 525px) {
  .home-slider-mobile .hsm-all {
    padding: 19px 27px;
  }
  .home-slider-mobile .hsm-meta {
    padding: 4px 16px;
  }
}

@media (min-width: 769px) {
  .home-slider-mobile {
    display: none !important;
  }
}

.home-legacy-bg {
  background: var(--Main-Bg, #f6f4f4);
  border-radius: 60px 60px 0 0;
}
@media (max-width: 768px) {
  .home-legacy-bg {
    border-radius: 0;
  }
}
.home-legacy {
  display: block;
  width: 100%;
  padding: 68px 7.813% 66px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
html[lang="zh-TW"] .home-legacy {
  padding: 68px 7.813% 139px 7.813%;
}
@media (min-width: 1921px) {
  .home-legacy {
    padding: 68px 150px 66px 150px;
  }
  html[lang="zh-TW"] .home-legacy {
    padding: 68px 150px 139px 150px;
  }
}
@media (max-width: 768px) {
  .home-legacy {
    border-radius: 0;

    padding-block: 0;
    height: auto;
    padding: 64px 16px 0 16px;
  }
  html[lang="zh-TW"] .home-legacy {
    padding: 64px 16px 0 16px;
  }
}

.home-legacy .header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 102px;
}
@media (max-width: 1400px) {
  .home-legacy .header {
    margin-bottom: 0px;
  }
}

.home-legacy .header .title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
html[lang="zh-TW"] .home-legacy .header .title {
  font-size: 17px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 5px;
}

.home-legacy .header .mb-line {
  display: none;
}

@media (max-width: 768px) {
  .home-legacy .header .mb-line {
    display: block;
  }
  html[lang="zh-TW"] .home-legacy .header .title {
    font-size: 14px;
    font-weight: 400;
    line-height: 120%; /* 16.8px */
    letter-spacing: 0.25px;
  }
}

.home-legacy .head {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 67px;

  position: sticky;
  top: 0;
  /* overflow: hidden; */
}
html[lang="zh-TW"] .home-legacy .head {
  gap: 93px;
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .home-legacy .head,
  .home-legacy .head {
    gap: 30px;
  }
}

html[lang="zh-TW"] .home-legacy .head .title-block {
  display: flex;
  align-items: center;
  gap: 37px;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .home-legacy .head .title-block {
    flex-direction: column;
    align-items: start;
    gap: 16px;

    margin-top: 47px;
  }
}
.home-legacy .head .strong-title {
  color: var(--Body-text, #484740);
  font-feature-settings: "liga" off;
  font-family: "Rethink Sans";
  font-size: 86px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;

  padding: 0 4%;
}
html[lang="zh-TW"] .home-legacy .head .strong-title {
  color: var(--Headlines, #13120c);
  font-family: "Noto Sans TC";
  font-size: 85px;
  line-height: 140%;
  letter-spacing: -3px;
  padding: 0;
  /* white-space: nowrap; */
}
.home-legacy .head .strong-title .legacy-title.pc {
  display: block;
}
.home-legacy .head .strong-title .legacy-title.mb {
  display: none;
}
@media (max-width: 475px) {
  .home-legacy .head .strong-title .legacy-title.pc {
    display: none;
  }
  .home-legacy .head .strong-title .legacy-title.mb {
    display: block;
  }
}
@media (max-width: 1915px) {
  .home-legacy .head .strong-title,
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 76px;
  }
}
@media (max-width: 1730px) {
  .home-legacy .head .strong-title,
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 72px;
  }
}
@media (max-width: 1660px) {
  .home-legacy .head .strong-title,
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 60px;
  }
}
@media (max-width: 1440px) {
  .home-legacy .head .strong-title,
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 48px;
    /* margin-top: 24px; */
  }
}
@media (max-width: 1300px) {
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 44px;
  }
}
@media (max-width: 1130px) {
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 40px;
  }
}
@media (max-width: 1010px) {
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 40px;
  }
}
@media (max-width: 950px) {
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 32px;
  }
}
@media (max-width: 860px) {
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 27px;
  }
}
@media (max-width: 525px) {
  .home-legacy .head .strong-title {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: var(--Font-Size-H4, 34px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;
    padding: 0;
    margin-top: 44px;
  }
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-family: "Noto Sans TC";
    font-size: var(--Font-Size-H4, 34px);
    line-height: 150%;
    margin-top: 0;
    letter-spacing: 0.25px;

    white-space: normal;
  }
}
@media (max-width: 390px) {
  .home-legacy .head .strong-title {
    letter-spacing: 0.1px;
  }
}

.home-legacy .head .zh-line {
  display: none;
}
html[lang="zh-TW"] .home-legacy .head .zh-line {
  display: block;
}
@media (max-width: 1915px) {
  html[lang="zh-TW"] .home-legacy .head .zh-line {
    max-height: 76px;
  }
}
@media (max-width: 1730px) {
  html[lang="zh-TW"] .home-legacy .head .zh-line {
    max-height: 72px;
  }
}
@media (max-width: 1650px) {
  html[lang="zh-TW"] .home-legacy .head .zh-line {
    max-height: 60px;
  }
}
@media (max-width: 1440px) {
  html[lang="zh-TW"] .home-legacy .head .zh-line {
    max-height: 48px;
  }
}
@media (max-width: 1300px) {
  html[lang="zh-TW"] .home-legacy .head .zh-line {
    max-height: 44px;
  }
}
@media (max-width: 1130px) {
  html[lang="zh-TW"] .home-legacy .head .zh-line {
    max-height: 40px;
  }
}
@media (max-width: 1010px) {
  html[lang="zh-TW"] .home-legacy .head .zh-line {
    max-height: 40px;
  }
}
@media (max-width: 950px) {
  html[lang="zh-TW"] .home-legacy .head .zh-line {
    max-height: 32px;
  }
}
@media (max-width: 860px) {
  html[lang="zh-TW"] .home-legacy .head .zh-line {
    max-height: 27px;
  }
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .home-legacy .head .zh-line {
    display: none;
  }
}
.home-legacy .head .subtitle {
  display: none;
}
html[lang="zh-TW"] .home-legacy .head .subtitle {
  display: block;
  font-family: "Noto Sans TC";
  font-size: 22px;
  line-height: 150%;
  letter-spacing: 1px;
  max-width: 195px;
}
html[lang="zh-TW"] .home-legacy .head .subtitle.mb {
  display: none;
}
@media (max-width: 1300px) {
  html[lang="zh-TW"] .home-legacy .head .subtitle {
    font-size: 18px;
    max-width: 175px;
  }
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .home-legacy .head .subtitle.pc {
    display: none;
  }
  html[lang="zh-TW"] .home-legacy .head .subtitle.mb {
    display: block;
  }
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .home-legacy .head .subtitle.mb {
    font-family: "Noto Sans TC";
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.5px;
    max-width: 100%;
  }
}

/* 舞台：只決定這一帶的高度，別用 flex 拉伸子層 */
.home-legacy .head .circle-img {
  position: relative;
  width: 100%;
  display: block; /* 不是 flex，避免把子層撐高 */
  height: clamp(240px, 22vw, 406px);
  min-height: 138px;
  overflow: visible;
}

/* 每一顆圓（你現在的 div.img.show） */
.home-legacy .head .circle-img > .img {
  position: absolute;
  /* 讓每顆圓自己長出 1:1 */
  aspect-ratio: 1 / 1;
  width: var(--w, 22%); /* 每顆的寬度，用自訂變數或 nth-child 設 */
  left: var(--x, 0%); /* X 位置 */
  top: var(--y, 0%); /* Y 位置（通常 0 或 50%-translateY(-50%)） */
  transform: translate(var(--tx, 0), var(--ty, 0));
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.5s ease;
}
.home-legacy .head .circle-img > .img:hover {
  z-index: 999;
  transform: scale(1.02) translateY(-5px); /* 微放大並往上浮 */
}

.home-legacy .head .circle-img > .img:nth-child(1) {
  --w: 21.5%;
  --x: 0%;
  --y: 0%;
}
.home-legacy .head .circle-img > .img:nth-child(2) {
  --w: 21.5%;
  --x: 8.575%;
  --y: 0%;
}
.home-legacy .head .circle-img > .img:nth-child(3) {
  --w: 21.5%;
  --x: 17.15%;
  --y: 0%;
}
.home-legacy .head .circle-img > .img:nth-child(4) {
  --w: 21.5%;
  --x: 26.725%;
  --y: 0%;
}
.home-legacy .head .circle-img > .img:nth-child(5) {
  --w: 64.5%;
  --x: 35.3%;
  --y: 0%;
}
.home-legacy .head .contact-circle {
  --w: 20.5%;
  --x: 0.8%;
  /* --y: 2%; */
  --y: -18%;
}

.home-legacy .head .circle-img .img:first-child {
  margin-left: 0;
}

.home-legacy .head .circle-img .img:nth-child(5) {
  border-radius: 9999px;
  aspect-ratio: 3.02 / 1;
}

.home-legacy .head .circle-img .img {
  opacity: 1;
}

@media (max-width: 1440px) {
  .home-legacy .head .contact-circle {
    --x: 0.5%;
    --y: 1.5%;
  }
}

@media (max-width: 768px) {
  .home-legacy .head .circle-img > .img:nth-child(1) {
    --w: 35%;
    --x: 0%;
    --y: 0%;
  }
  .home-legacy .head .circle-img > .img:nth-child(2) {
    --w: 35%;
    --x: 8.575%;
    --y: 0%;
  }
  .home-legacy .head .circle-img > .img:nth-child(3) {
    --w: 35%;
    --x: 17.15%;
    --y: 0%;
  }
  .home-legacy .head .circle-img > .img:nth-child(4) {
    --w: 35%;
    --x: 26.725%;
    --y: 0%;
  }
  .home-legacy .head .circle-img > .img:nth-child(5) {
    aspect-ratio: 1.84 / 1;
  }
  .home-legacy .head .contact-circle {
    --w: 33%;
    --x: 1%;
    --y: 2%;
  }
}

.home-legacy .head .circle-img .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.home-legacy .head .circle-img .img:nth-child(5) img {
  border-radius: 9999px;
}

.home-legacy .head .circle-img .contact-circle {
  position: absolute;
  aspect-ratio: 1 / 1;
  width: var(--w, 0%);
  right: var(--x, 0%);
  top: var(--y, 0%);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--Headlines, #13120c);
  overflow: hidden;
  z-index: 1000;

  opacity: 1;
}

.home-legacy .circle-img .img,
.home-legacy .contact-circle {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1.5s ease,
    transform 1.5s ease;
  will-change: opacity, transform;
}

.home-legacy .circle-img .img.show,
.home-legacy .contact-circle.show {
  opacity: 1;
  transform: translateY(0);
}

.home-legacy .head .circle-img .contact-circle .marquee-items {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 2px;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1024px) {
  .home-legacy .head .circle-img .contact-circle .marquee-items {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .home-legacy .head .circle-img .contact-circle .marquee-items {
    font-size: 28px;
  }
}

@media (max-width: 525px) {
  .home-legacy .head .circle-img .contact-circle .marquee-items {
    font-size: 20px;
  }
}

@media (max-width: 375px) {
  .home-legacy .head .circle-img .contact-circle .marquee-items {
    font-size: 16px;
  }
}

/* 更明顯的自下而上進場效果（不改圓的大小與座標） */
.home-legacy .circle-img .img,
.home-legacy .contact-circle {
  opacity: 0;
  transform: translateY(80px) scale(0.96);
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.5s ease,
    box-shadow 0.7s ease;
  will-change: opacity, transform;
}

.home-legacy .circle-img .img.show,
.home-legacy .contact-circle.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 無障礙：減少動效時直接顯示 */
@media (prefers-reduced-motion: reduce) {
  .home-legacy .circle-img .img,
  .home-legacy .contact-circle {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* 新版的沒動畫版本circle-imgs */

.home-legacy .circle-imgs {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.home-legacy .circle-imgs a.img:first-of-type {
  margin-left: 0;
}
.home-legacy .circle-imgs .img {
  margin-left: -10.75%;
  width: 22.5%;
  height: auto;
  aspect-ratio: 1 / 1;

  transition: all 0.3s ease;
}
.home-legacy .circle-imgs .img:hover {
  z-index: 999;
  transform: scale(1.02) translateY(-5px); /* 微放大並往上浮 */
}
.home-legacy .circle-imgs a.img:nth-last-of-type(2) {
  width: 64.5%;
  aspect-ratio: 3.02 / 1;
}
.home-legacy .circle-imgs a.img:nth-last-of-type(2) img {
  border-radius: 9999px;
}
.home-legacy .circle-imgs a.img img {
  border-radius: 50%;
}
@media (max-width: 525px) {
  .home-legacy .circle-imgs .img:nth-child(4) {
    display: none;
  }
  .home-legacy .circle-imgs .img {
    margin-left: -25.75%;
    width: 138px;
  }
  .home-legacy .circle-imgs a.img:nth-last-of-type(2) {
    width: 269px;
    aspect-ratio: 269 / 138;
  }
  .home-legacy .circle-imgs a.img:nth-last-of-type(2) img {
    object-position: left;
  }
}

.home-legacy .head .circle-imgs .contact-circle {
  position: absolute;
  aspect-ratio: 1 / 1;
  width: 19%;
  right: 0.8%;
  /* --- 讓圓心跟別的圓對齊 --- */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--Headlines, #13120c);
  overflow: hidden;
  z-index: 1000;

  opacity: 1;
}
@media (max-width: 1440px) {
  .home-legacy .head .circle-imgs .contact-circle {
    right: 0.5%;
  }
}
@media (max-width: 525px) {
  .home-legacy .head .circle-imgs .contact-circle {
    width: 126px;
    right: 4%;
  }
}
@media (max-width: 416px) {
  .home-legacy .head .circle-imgs .contact-circle {
    width: 32.5%;
    right: 1%;
    top: 51%;
  }
}
.home-legacy .head .circle-imgs .contact-circle .marquee-items {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0px;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1024px) {
  .home-legacy .head .circle-imgs .contact-circle .marquee-items {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .home-legacy .head .circle-imgs .contact-circle .marquee-items {
    font-size: 28px;
  }
}

@media (max-width: 525px) {
  .home-legacy .head .circle-imgs .contact-circle .marquee-items {
    font-size: 20px;
  }
  html[lang="zh-TW"]
    .home-legacy
    .head
    .circle-imgs
    .contact-circle
    .marquee-items {
    color: var(--White, #fff);
    text-align: center;
    font-family: "Noto Sans TC";
    font-size: var(--Font-Size-H6, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.15px;
  }
}

@media (max-width: 375px) {
  .home-legacy .head .circle-imgs .contact-circle .marquee-items {
    font-size: 16px;
  }
}

.home-clients-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.home-clients {
  width: 100%;
  padding: 68px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .home-clients {
    padding: 68px 150px;
  }
}

.home-clients.pc {
  display: block;
}
.home-clients.mb {
  display: none;
}
@media (max-width: 768px) {
  .home-clients.pc {
    display: none;
  }
  .home-clients.mb {
    display: block;
  }
}

@media (max-width: 525px) {
  .home-clients {
    padding: 60px 16px 0 16px;
  }
  html[lang="zh-TW"] .home-clients {
    padding: 66px 16px 0 16px;
  }
}

.home-clients .head {
  display: flex;
  width: 100%;
  height: 22px;
  align-items: center;
  gap: 30px;
  flex-shrink: 0;
}
.home-clients .head .title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  text-wrap: nowrap;
}
html[lang="zh-TW"] .home-clients .head .title {
  font-size: 17px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 5px;
}
.home-clients .mb-line {
  display: none;
}
@media (max-width: 525px) {
  .home-clients .mb-line {
    display: block;
  }
  .home-clients .pc-line {
    display: none;
  }
  .home-clients .pc-dot {
    display: none;
  }
  html[lang="zh-TW"] .home-clients .head .title {
    font-size: var(--Font-Size-Body-2, 14px);
    line-height: 120%; /* 16.8px */
    letter-spacing: 0.25px;
  }
}

.home-clients .clients-list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 68px;
}
@media (max-width: 1440px) {
  .home-clients .clients-list {
    gap: 34px;
  }
}
@media (max-width: 768px) {
  .home-clients .clients-list {
    gap: 21px;
    padding: 38px 0%;
  }
}

.home-clients .clients-list .client {
  width: auto;
  max-width: 260px;
  height: 62px;
  /* margin-right: 16px; */
}

.home-clients .clients-list .client img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.home-clients .bottom {
  display: flex;
  width: 100%;
  height: 12px;
  align-items: center;
  gap: 30px;
  flex-shrink: 0;
}

.home-resources-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.home-resources {
  display: block;
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 68px 7.813% 107px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .home-resources {
    padding: 68px 150px 107px 150px;
  }
}
@media (max-width: 525px) {
  .home-resources {
    padding: 64px 8px 32px 8px;
  }
}

.home-resources .head {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
@media (max-width: 768px) {
  .home-resources .head {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 40px;
  }
}
@media (max-width: 525px) {
  .home-resources .head {
    gap: 11px;
  }
}

.home-resources .head .header {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
}
@media (min-width: 769px) {
  .home-resources .head .header {
    justify-content: center;
  }
}

.home-resources .head .header svg {
  display: none;
}
@media (max-width: 768px) {
  .home-resources .head .header svg {
    display: block;
  }
}

.home-resources .head .title.zh-mb-title {
  display: none;
}
html[lang="zh-TW"] .home-resources .head .title.zh-mb-title {
  display: block;
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 25.5px */
  letter-spacing: 5px;
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .home-resources .head .title.zh-mb-title {
    color: var(--Body-text, #484740);
    font-family: "Noto Sans TC";
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 16.8px */
    letter-spacing: 0.25px;
  }
}
html[lang="zh-TW"] .home-resources .head .title.normal {
  display: none;
}

.home-resources .head .title {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--Body-text, #484740);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;

  white-space: nowrap;
}

@media (max-width: 525px) {
  .home-resources .head .title {
    justify-content: start;
    padding: 0 8px;
  }
}

.home-resources .head .title-block {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .home-resources .head .title-block {
    gap: 12px;
  }
  .home-resources .head .title-block {
    gap: 16px;
  }
}
.home-resources .head .main-title {
  color: #010101;
  text-align: center;
  font-feature-settings: "liga" off;
  font-family: "Rethink Sans";
  font-size: var(--Font-Size-H1, 96px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
@media (max-width: 1440px) {
  .home-resources .head .main-title {
    font-size: 80px;
  }
}
@media (max-width: 1024px) {
  .home-resources .head .main-title {
    font-size: 72px;
  }
}
@media (max-width: 525px) {
  .home-resources .head .main-title {
    justify-content: start;
    padding: 0 8px;
  }
}
html[lang="zh-TW"] .home-resources .head .main-title {
  font-size: 88px;
}
@media (max-width: 768px) {
  .home-resources .head .main-title {
    font-size: 66px;
    margin-top: 44px;
  }
  html[lang="zh-TW"] .home-resources .head .main-title {
    font-size: 66px;
    text-align: left;
  }
}
@media (max-width: 525px) {
  .home-resources .head .main-title {
    font-size: var(--Font-Size-H4, 34px);
    padding: 0 8px;
    text-align: left;
  }
  html[lang="zh-TW"] .home-resources .head .main-title {
    font-size: 36px;
  }
}

.home-resources .head .sub-title {
  color: var(--Body-text, #484740);
  text-align: center;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
html[lang="zh-TW"] .home-resources .head .sub-title {
  font-size: 34px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.25px;
}
@media (max-width: 768px) {
  .home-resources .head .sub-title {
    text-align: start;
  }
}
@media (max-width: 525px) {
  .home-resources .head .sub-title {
    padding: 0 8px;
    font-size: var(--Font-Size-Body-1, 16px);
  }
  html[lang="zh-TW"] .home-resources .head .sub-title {
    color: var(--Headlines, #13120c);
    font-family: "Noto Sans TC";
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.5px;
  }
}

/* --- Resources Header --- */

.resources {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
}
@media (max-width: 600px) {
  .works-main .resources {
    display: none;
  }
}
.architecture-design-child-main .resources {
  padding: 0 7.813% 54px 7.813%;
}
@media (min-width: 1921px) {
  .architecture-design-child-main .resources {
    padding: 0 150px 54px 150px;
  }
}
.resources .top-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 30px;
}
.resources .top-header .title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
html[lang="zh-TW"] .resources .top-header .title {
  font-size: 17px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 3px;
}

/* --- Resources Slider --- */
.rscope {
  position: relative;
  width: 100%;
  /* padding: 0 7.813% 68px 7.813%; */
  display: flex;
  flex-direction: column;

  overflow-x: hidden; /* 防任何子元素橫向溢出影響 clientWidth */
}

@media (max-width: 768px) {
  .rscope {
    display: none;
  }
}

.rscope::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 80%;
  background: #f6f4f4;
  pointer-events: none;
  z-index: 10;
}

.rscope .header .title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.rs-row {
  display: flex;
  gap: 24px;
  align-items: start;
  overflow: hidden;
  margin-top: 60px;
}
/* slider 外層 */
.home-resources .rscope {
  position: relative;
  overflow: hidden; /* 關鍵 */
}

/* 遮掉最右邊那條線 */
.home-resources .rscope::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px; /* 比 border 稍微大一點 */
  height: 80%;
  background: #f6f4f4; /* 換成你頁面背景色 */
  pointer-events: none;
  z-index: 10;
}

.rscope .swiper-slide {
  flex: 0 0 auto; /* 讓 Swiper 的 px 寬度生效 */
  width: auto; /* 不強迫固定寬 */
  box-sizing: border-box; /* 重點：讓 padding 算在寬度內（見真兇 2） */

  /* 你原本的樣式可以保留 */
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
  /* height、padding、邊框可留，但已改為 border-box 以免撐寬 */
  height: 470px;
  padding: 0;
  border-right: 1px solid #c8c8ca;
}

.rscope .swiper-slide:first-child .rs-card {
  padding-left: 0;
}

.rscope .swiper-slide:last-child {
  padding-right: 0;
  border-right: none;
}

/* 輪播本體 */
.rs-swiper {
  width: 100%;
  padding-bottom: 32px;
}

.rs-card {
  padding: 0 30px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  height: 100%;
  gap: 16px;
}
.rs-card a {
  width: 100%;
}
.rs-card img {
  width: 100%;
  height: 269px;
  border-radius: 16px;
}

.rs-body {
  display: flex;
  flex-direction: column;
}

.rs-heading {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

@media (max-width: 1440px) {
  .rs-heading {
    font-size: 22px;
  }
}
.rs-date {
  position: absolute;
  bottom: 0;
  /* left: 30px; */

  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}

.rscope .controls {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 30px;
  align-self: stretch;
}

.rscope .controls .svg-line {
  width: 100%;
  height: 2px;
  display: block;
}

.rscope .controls .slide-button {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.rscope .controls .slide-button .ctrl-btn2 {
  display: flex;
  padding: 20px;
  align-items: center;
  border-radius: 56px;
  border: 1px solid var(--Lines, #c8c8ca);
}

.rscope .controls .all-button2 {
  display: flex;
  width: 21.7%;
  padding: 22px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 56px;
  border: 1px solid var(--Lines, #c8c8ca);

  color: var(--Headlines, #13120c);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
html[lang="zh-TW"] .rscope .controls .all-button2 {
  font-size: 22px;
  width: 21.5%;
  padding: 18px;
}
@media (max-width: 1440px) {
  .rscope .controls .all-button2 {
    width: 25.8%;
  }
}
@media (max-width: 1024px) {
  .rscope .controls .all-button2 {
    width: 50.8%;
  }
}

/* 手機版architecture-design-child-main底下輪播 */

.rp-wrap {
  position: relative;
}

.rp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.rp-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rp-swiper {
  overflow: visible;
}

.rp-swiper .swiper-slide {
  width: auto;
}

/* 若要固定寬改在 .rp-card */

.rp-card {
  display: block;
  width: 320px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.rp-media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--rp-ratio, 4 / 3);
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  margin: 16px 16px 0 16px;
}

.rp-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rp-body {
  padding: 18px 20px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.rp-text {
  flex: 1 1 auto;
}

.rp-name {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.rp-nav {
  display: flex;
  gap: 10px;
}

.rp-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  user-select: none;
}

.rp-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.rp-card:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
  .rp-card {
    width: 280px;
  }
}

.mobile-card {
  display: none;
}

@media (max-width: 768px) {
  .mobile-card {
    display: block;
    width: 100%;
    padding: 20px 0 0 0;
  }
  html[lang="zh-TW"] .mobile-card {
    padding: 42px 0 0 0;
  }
  .mobile-card .mb-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .mobile-card .mb-card img {
    display: block;
    width: 100%;
    height: 240px;
    border-radius: 18px;
    object-fit: cover;
    object-position: center;
  }
  .mobile-card .mb-card .mb-body {
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .mobile-card .mb-card .mb-heading {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: var(--Font-Size-H5, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
  }
  .mobile-card .mb-card .mb-date {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;
    margin-top: 16px;
    margin-bottom: 30px;
    opacity: 0.6;
  }
  .mobile-card .all-button-mb {
    display: flex;
    width: 100%;
    padding: 24px 27px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 56px;
    border: 1px solid var(--Lines, #c8c8ca);
  }
  .mobile-card .all-button-mb a {
    color: var(--Headlines, #13120c);
    text-align: center;
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.25px;
    text-transform: uppercase;
  }
  html[lang="zh-TW"] .mobile-card .all-button-mb a {
    font-size: 16px;
  }
}
@media (max-width: 525px) {
  .mobile-card .all-button-mb {
    padding: 16px 27px;
  }
}

/* Footer */
.footer-bg {
  background: var(--Light-BG, #e5e5e5);
}

.site-footer {
  width: 100%;
  padding: 68px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .site-footer {
    padding: 68px 150px;
  }
}
@media (max-width: 768px) {
  .site-footer {
    padding: 32px 1.5%;
  }
}

@media (max-width: 525px) {
  .site-footer {
    padding: 16px 8px 8px 8px;
  }
}

.site-footer .footer_mobile_nav {
  display: none;
}
@media (max-width: 768px) {
  .site-footer .footer_mobile_nav {
    width: 100%;
    display: block;
    margin-bottom: 32px;
    padding: 0 8px;
  }
}
@media (max-width: 525px) {
  .site-footer .footer_mobile_nav {
    margin-bottom: 15px;
  }
}

.site-footer .footer_mobile_nav ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.site-footer .footer_mobile_nav ul li {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
.site-footer .footer_mobile_nav ul li a {
  color: var(--Body-text, #484740);
}
@media (max-width: 525px) {
  .site-footer .footer_mobile_nav ul li {
    font-size: 14px;
  }
}

.site-footer .footer-main {
  width: 100%;
  border-radius: 24px;
  padding: 59px 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  min-height: 472px;
}
@media (max-width: 1780px) {
  .site-footer .footer-main {
    padding: 59px 15%;
  }
}
@media (max-width: 1520px) {
  .site-footer .footer-main {
    padding: 59px 10%;
  }
}
@media (max-width: 1024px) {
  .site-footer .footer-main {
    padding: 59px 5%;
  }
}
@media (max-width: 475px) {
  .site-footer .footer-main {
    min-height: 301px;
    gap: 24px;
  }
}

.site-footer .footer-main .footer-title {
  color: var(--Headlines, #13120c);
  text-align: center;
  font-feature-settings: "liga" off;
  font-family: "Rethink Sans";
  font-size: var(--Font-Size-H1, 96px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
@media (max-width: 1380px) {
  .site-footer .footer-main .footer-title {
    font-size: 75px;
  }
}
@media (max-width: 1024px) {
  .site-footer .footer-main .footer-title {
    font-size: 72px;
  }
}
@media (max-width: 900px) {
  .site-footer .footer-main .footer-title {
    font-size: 56px;
  }
}
@media (max-width: 600px) {
  .site-footer .footer-main .footer-title {
    font-size: 45px;
  }
}
@media (max-width: 475px) {
  .site-footer .footer-main .footer-title {
    font-size: var(--Font-Size-H4, 34px);
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}

.site-footer .footer-main .more-button {
  display: flex;
  width: 212px;
  padding: 23px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 56px;
  background: var(--Headlines, #13120c);

  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
html[lang="zh-TW"] .site-footer .footer-main .more-button {
  padding: 19px 23px;
  color: var(--White, #fff);
  text-align: center;
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
}
@media (max-width: 525px) {
  .site-footer .footer-main .more-button {
    width: 88%;
    padding: 16px;
  }
}

.site-footer .footer-main .more-button a {
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
html[lang="zh-TW"] .site-footer .footer-main .more-button a {
  font-family: "Noto Sans TC";
  font-size: 22px;
  letter-spacing: 3px;
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .site-footer .footer-main .more-button a {
    font-family: "Noto Sans TC";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
  }
}

.site-footer .footer-subscribe {
  display: flex;
  width: 100%;
  padding: 8px 8px 8px 30px;
  align-items: center;
  gap: 28px;
  border-radius: 24px;
  background: var(--White, #fff);
  margin-top: 8px;
}
@media (max-width: 475px) {
  .site-footer .footer-subscribe {
    padding: 8px 4px 8px 20px;
  }
}

.site-footer .footer-subscribe .title {
  width: 22%;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  margin-right: 5%;
}
@media (max-width: 1440px) {
  .site-footer .footer-subscribe .title {
    font-size: 18px;
  }
}
@media (max-width: 768px) {
  .site-footer .footer-subscribe .title {
    display: none;
  }

  .site-footer .footer-subscribe .sub-svg {
    display: none;
  }
}

.site-footer .footer-subscribe .email {
  width: 58%;
}
.site-footer .footer-subscribe .email.mb {
  display: none;
}
@media (max-width: 768px) {
  .site-footer .footer-subscribe .email {
    flex: 1;
  }
  .site-footer .footer-subscribe .email.pc {
    display: none;
  }
  .site-footer .footer-subscribe .email.mb {
    display: block;
  }
}

.site-footer .footer-subscribe .email input,
.site-footer .footer-subscribe .email input::placeholder {
  padding: 8px 6px;
  width: 100%;
  border: none;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
html[lang="zh-TW"] .site-footer .footer-subscribe .email input::placeholder,
html[lang="zh-TW"] .site-footer .footer-subscribe .email input {
  color: var(--Headlines, #13120c);
  letter-spacing: 1px;
  line-height: 150%;
}
@media (max-width: 525px) {
  .site-footer .footer-subscribe .email input,
  .site-footer .footer-subscribe .email input::placeholder {
    font-size: 16px;
    letter-spacing: 0.5px;
  }
}

.site-footer .footer-subscribe .email input:focus-visible {
  outline: 2px solid #484740;
  outline-offset: 0px;
  border-radius: 12px;
}

.site-footer .footer-subscribe .submit-btn {
  display: flex;
  width: 17.15%;
  padding: 12px 8px 12px 8px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--Secondary-1, #e7e6e1);
  cursor: pointer;
  transition: all 0.3s ease;
}

@media (max-width: 1024px) {
  .site-footer .footer-subscribe .submit-btn {
    width: 24%;
  }
}

@media (max-width: 768px) {
  .site-footer .footer-subscribe .submit-btn {
    width: 56px;
    justify-content: center;
  }
}

.site-footer .footer-subscribe .submit-btn:hover,
.site-footer .footer-subscribe .submit-btn:hover input {
  background: var(--Main-Bg, #f6f4f4);
}

.site-footer .footer-subscribe .submit-btn input {
  text-align: start;
  padding: 0 8px;
  width: 100%;
  border: none;
  background: var(--Secondary-1, #e7e6e1);
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.site-footer .footer-subscribe .submit-btn.zh input {
  font-family: "Noto Sans TC";
  font-size: 22px;
  letter-spacing: 3px;
}
@media (max-width: 768px) {
  .site-footer .footer-subscribe .submit-btn input {
    display: none;
  }
}

.site-footer .footer-nav {
  width: 100%;
  margin-top: 140px;
}
@media (max-width: 1024px) {
  .site-footer .footer-nav {
    margin-top: 80px;
  }
}
@media (max-width: 768px) {
  .site-footer .footer-nav {
    display: none;
  }
}

.site-footer .footer-nav ul {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

@media (max-width: 1440px) {
  .site-footer .footer-nav ul {
    flex-wrap: wrap;
  }
}

.site-footer .footer-nav ul li {
  transition: opacity 0.3s ease-in-out;
}

.site-footer .footer-nav ul li:hover {
  /* animation: fadeOutIn 0.3s ease-in-out; */
  opacity: 0.6;
}

@keyframes fadeOutIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

.site-footer .footer-nav li a {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  display: flex;
  align-items: flex-start;
}
.site-footer .footer-nav li a:hover {
  text-decoration: none;
}
@media (max-width: 1650px) {
  .site-footer .footer-nav li a {
    font-size: 38px;
  }
}
@media (max-width: 1440px) {
  .site-footer .footer-nav li a {
    font-size: 35px;
  }
}

@media (max-width: 1180px) {
  .site-footer .footer-nav li a {
    font-size: 24px;
  }
}

@media (max-width: 1024px) {
  .site-footer .footer-nav li a {
    font-size: 20px;
  }
}

.site-footer .footer-nav li a::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 16px;
  background-image: url("/wp-content/uploads/2025/09/bx_up-arrow-alt.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@media (max-width: 1024px) {
  .site-footer .footer-nav li a::after {
    margin-left: 0;
  }
}

.site-footer .footer-bottom-mobile {
  display: none;
}

@media (max-width: 768px) {
  .site-footer .footer-bottom-mobile {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 36px;
    width: 100%;
    gap: 49px;
  }

  .site-footer .footer-bottom-mobile .footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 80%;

    padding-left: 8px;
  }

  .site-footer .footer-bottom-mobile .footer-info .footer-logo {
    width: 100.133px;
    height: 23.333px;
    flex-shrink: 0;
  }

  .site-footer .footer-bottom-mobile .footer-info .infos {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .site-footer .footer-bottom-mobile .footer-info .infos .info {
    display: flex;
    align-items: start;
    gap: 8px;
    text-wrap: wrap;
  }

  html[lang="zh-TW"]
    .site-footer
    .footer-bottom-mobile
    .footer-info
    .infos
    .info {
    gap: 4px;
  }

  .site-footer .footer-bottom-mobile .footer-info .infos .info .title {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.25px;

    white-space: nowrap;
  }
  .site-footer .footer-bottom-mobile .footer-info .infos .info .desc {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  .site-footer
    .footer-bottom-mobile
    .footer-info
    .infos
    .info
    .desc
    div:nth-child(2),
  .site-footer
    .footer-bottom-mobile
    .footer-info
    .infos
    .info
    .desc
    div:nth-child(3) {
    margin-left: -77px;
  }

  .site-footer .footer-bottom-mobile .footer-mb-social-media {
    position: absolute;
    right: 0;
    top: 10%;
  }

  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_more {
    order: 1;
  }

  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_facebook {
    order: 2;
  }

  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_button_instagram {
    order: 3;
  }

  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_button_threads,
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_button_twitter {
    display: none !important;
  }

  /* 先隱藏原本的 SVG / 字型 icon */
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_facebook
    svg,
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_facebook
    .heateor_sss_svg,
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_facebook
    span,
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_more
    svg,
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_more
    .heateor_sss_svg,
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_more
    span,
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_button_instagram
    svg,
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_button_instagram
    .heateor_sss_svg,
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_button_instagram
    span {
    display: none !important;
  }

  /* 統一每顆按鈕樣式 */
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 34px 34px !important;
    background-color: transparent !important;
    font-size: 0 !important; /* 移除字型 icon 佔位 */
    box-shadow: none !important;
    overflow: hidden !important; /* 防止內層東西撐開 */
  }

  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_facebook {
    background-image: url("/wp-content/uploads/2025/10/footer-FB_icon.svg.svg") !important;
  }

  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_button_instagram {
    background-image: url("/wp-content/uploads/2025/10/footer-IG_icon.svg.svg") !important;
  }
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul
    a.heateor_sss_more {
    background-image: url("/wp-content/uploads/2025/10/footer-more_icon.svg") !important;
  }

  .site-footer .footer-bottom-mobile .bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 24px;
    gap: 8px;
    border-top: 1px solid var(--Lines, #c8c8ca);
  }

  .site-footer .footer-bottom-mobile .bottom .desc,
  .site-footer .footer-bottom-mobile .bottom a {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;
  }

  .page-id-64 .footer-main {
    display: none;
  }
}
@media (max-width: 525px) {
  .site-footer .footer-bottom-mobile .footer-info .infos .info .title,
  .site-footer .footer-bottom-mobile .footer-info .infos .info .desc {
    font-size: 14px;
  }
  html[lang="zh-TW"]
    .site-footer
    .footer-bottom-mobile
    .footer-info
    .infos
    .info
    .desc {
    white-space: nowrap;
  }
  .site-footer .footer-bottom-mobile .bottom .desc,
  .site-footer .footer-bottom-mobile .bottom .desc a {
    font-size: 14px;
  }
  .site-footer
    .footer-bottom-mobile
    .footer-mb-social-media
    .heateor_sss_sharing_ul {
    gap: 8px;
    padding: 0 10px 20px 0;
  }

  .site-footer
    .footer-bottom-mobile
    .footer-info
    .infos
    .info
    .desc
    div:nth-child(2),
  .site-footer
    .footer-bottom-mobile
    .footer-info
    .infos
    .info
    .desc
    div:nth-child(3) {
    margin-left: -69px;
  }
}

.site-footer .footer-bottom {
  width: 100%;
  padding-top: 30px;
  margin-top: 145px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 1px solid var(--Lines, #c8c8ca);
}

@media (max-width: 768px) {
  .site-footer .footer-bottom {
    display: none;
  }
}

.site-footer .footer-bottom .logo-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer .footer-bottom .logo-section .footer-logo {
  width: 76px;
  height: 21px;
}

.site-footer .footer-bottom .logo-section .footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.site-footer .footer-bottom .logo-section .footer-year {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.site-footer .footer-bottom .footer-social {
  display: flex;
  align-items: flex-start;
  gap: 64%;
}

@media (max-width: 768px) {
  .site-footer .footer-bottom .footer-social {
    gap: 32%;
  }
}

.site-footer .footer-bottom .footer-social li {
  transition: all 0.3s ease;
}

.site-footer .footer-bottom .footer-social li:hover {
  transform: scale(1.1);
}

.site-footer .footer-bottom .footer-social a {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}
html[lang="zh-TW"] .site-footer .footer-bottom .footer-social a {
  font-family: "Noto Sans TC";
  font-size: 17px;
  letter-spacing: 3px;
}
.site-footer .footer-bottom .footer-privacy {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}

/* About */

.about-main {
  width: 100%;
}
.about-main .top-bg {
  background: var(--Main-Bg, #f6f4f4);
  border-radius: 0 0 60px 60px;
}
@media (max-width: 768px) {
  .about-main .top-bg {
    border-radius: 0px;
  }
}

.about-main .top {
  width: 100%;
  padding: 148px 7.813% 88px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
html[lang="zh-TW"] .about-main .top {
  padding: 165px 7.813% 88px 7.813%;
}
@media (min-width: 1921px) {
  .about-main .top {
    padding: 148px 150px 88px 150px;
  }
  html[lang="zh-TW"] .about-main .top {
    padding: 165px 150px 88px 150px;
  }
}
@media (max-width: 1024px) {
  .about-main .top {
    padding: 68px 7.813% 48px 7.813%;
    border-radius: 0px;
  }
}
@media (max-width: 525px) {
  .about-main .top {
    padding: 134px 8px 48px 8px;
  }
  html[lang="zh-TW"] .about-main .top {
    padding: 134px 8px 48px 8px;
  }
}

html[lang="zh-TW"] .about-main .top .title-block,
html[lang="zh-TW"] .team-main .header .title-block,
html[lang="zh-TW"] .awards-main .header .title-block {
  display: flex;
  gap: 54px;
  align-items: center;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .about-main .top .title-block,
  html[lang="zh-TW"] .team-main .header .title-block,
  html[lang="zh-TW"] .awards-main .header .title-block {
    /* margin-bottom: 30px; */
    flex-direction: column;
    align-items: start;
    gap: 14px;
    padding: 0 8px;
  }
}
.about-main .top .title-block .zh-line,
.about-main .top .title-block .subtitle,
.team-main .header .title-block .zh-line,
.team-main .header .title-block .subtitle,
.awards-main .header .title-block .zh-line,
.awards-main .header .title-block .subtitle {
  display: none;
}
html[lang="zh-TW"] .about-main .top .title-block .zh-line,
html[lang="zh-TW"] .about-main .top .title-block .subtitle,
html[lang="zh-TW"] .team-main .header .title-block .zh-line,
html[lang="zh-TW"] .team-main .header .title-block .subtitle,
html[lang="zh-TW"] .awards-main .header .title-block .zh-line,
html[lang="zh-TW"] .awards-main .header .title-block .subtitle {
  display: block;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .about-main .top .title-block .zh-line,
  html[lang="zh-TW"] .team-main .header .title-block .zh-line,
  html[lang="zh-TW"] .awards-main .header .title-block .zh-line {
    display: none;
  }
}
html[lang="zh-TW"] .about-main .top .title-block .subtitle,
html[lang="zh-TW"] .team-main .header .title-block .subtitle,
html[lang="zh-TW"] .awards-main .header .title-block .subtitle {
  color: var(--Headlines, #13120c);
  font-family: "Noto Sans TC";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1px;

  width: auto;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .about-main .top .title-block .subtitle,
  html[lang="zh-TW"] .team-main .header .title-block .subtitle,
  html[lang="zh-TW"] .awards-main .header .title-block .subtitle {
    display: none;
  }
}
@media (max-width: 1900px) {
  html[lang="zh-TW"] .about-main .top .title-block .subtitle,
  html[lang="zh-TW"] .team-main .header .title-block .subtitle,
  html[lang="zh-TW"] .awards-main .header .title-block .subtitle {
    width: auto;
  }
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .team-main .header .title-block .subtitle,
  html[lang="zh-TW"] .awards-main .header .title-block .subtitle {
    display: none;
  }
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .about-main .top .title-block .subtitle {
    font-size: 16px;
    letter-spacing: 0.5px;
  }
}
html[lang="zh-TW"] .about-main .top .title-block .main-title,
html[lang="zh-TW"] .team-main .header .title-block .main-title,
html[lang="zh-TW"] .awards-main .header .title-block .main-title {
  font-size: 100px;
  white-space: nowrap;
  padding-bottom: 4px;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .about-main .top .title-block .main-title,
  html[lang="zh-TW"] .team-main .header .title-block .main-title,
  html[lang="zh-TW"] .awards-main .header .title-block .main-title {
    color: var(--Headlines, #13120c);
    font-family: "Noto Sans TC";
    font-size: 72px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.25px;
  }
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .about-main .top .title-block .main-title,
  html[lang="zh-TW"] .team-main .header .title-block .main-title,
  html[lang="zh-TW"] .awards-main .header .title-block .main-title {
    font-size: 36px;
  }
}
.about-main .top .main-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 122px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
@media (max-width: 1480px) {
  .about-main .top .main-title {
    font-size: 100px;
  }
}
@media (max-width: 768px) {
  .about-main .top .main-title {
    font-size: 68px;
  }
}
@media (max-width: 525px) {
  .about-main .top .main-title {
    font-size: 36px;
    letter-spacing: 0.25px;
    line-height: 140%;
    padding-left: 8px;
  }
  html[lang="zh-TW"] .about-main .top .main-title {
    padding-left: 0;
  }
}

.bread {
  padding-top: 36px;
  padding-bottom: 25px;
}

@media (max-width: 768px) {
  .bread {
    padding-top: 0;
    margin-top: -8px;
    padding-left: 8px;
  }
}
.bread span a,
.bread span {
  color: rgba(19, 18, 12, 0.6);
  opacity: 1; /* 整體透明度回到正常 */
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
@media (max-width: 768px) {
  .bread span a,
  .bread span {
    font-size: 12px;
  }
}
@media (max-width: 525px) {
  .bread span a,
  .bread span {
    font-size: 8px;
  }
}
.bread #breadcrumbs .breadcrumb_last {
  color: rgba(19, 18, 12, 1); /* 最後一個完全不透明 */
}

/* ✅ 專門選最後那根 "/"（在最後頁名前的那一個） */
.bread #breadcrumbs > span > span:nth-last-child(2) {
  color: rgba(19, 18, 12, 1);
}

.about-main .service {
  width: 100%;
  margin-top: 82px;
}
html[lang="zh-TW"] .about-main .service {
  margin-top: 109px;
}
@media (max-width: 768px) {
  .about-main .service {
    margin-top: 40px;
  }
  html[lang="zh-TW"] .about-main .service {
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  .about-main .top .hero img {
    border-radius: 18px;
    height: 301px;
  }
}
.about-main .service .service-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 68px;
}
@media (max-width: 768px) {
  .about-main .service .service-intro {
    margin-top: 80px;
  }
}
@media (max-width: 525px) {
  .about-main .service .service-intro {
    margin-top: 49px;
    gap: 32px;
  }
  html[lang="zh-TW"] .about-main .service .service-intro {
    margin-top: 13px;
  }
}

.about-main .service .service-intro .title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  margin-bottom: 52px;
}
@media (max-width: 768px) {
  .about-main .service .service-intro .title {
    display: none;
  }
}

.about-main .service .service-intro .service-title.pc {
  display: block;
}
.about-main .service .service-intro .service-title.mb {
  display: none;
}
@media (max-width: 768px) {
  .about-main .service .service-intro .service-title.pc {
    display: none;
  }
  .about-main .service .service-intro .service-title.mb {
    display: block;
  }
}
.about-main .service .service-intro .service-title {
  color: var(--Headlines, #13120c);
  text-align: center;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.75px;
}
@media (max-width: 1800px) {
  .about-main .service .service-intro .service-title {
    font-size: 60px;
  }
}
@media (max-width: 1440px) {
  .about-main .service .service-intro .service-title {
    font-size: 52px;
  }
}
@media (max-width: 1250px) {
  .about-main .service .service-intro .service-title {
    font-size: 44px;
  }
}
@media (max-width: 1040px) {
  .about-main .service .service-intro .service-title {
    font-size: 33px;
  }
}
@media (max-width: 768px) {
  .about-main .service .service-intro .service-title {
    font-size: 40px;
  }
}
@media (max-width: 680px) {
  .about-main .service .service-intro .service-title {
    font-size: 32px;
  }
}
@media (max-width: 525px) {
  .about-main .service .service-intro .service-title {
    color: var(--Headlines, #13120c);
    text-align: center;
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: var(--Font-Size-H5, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
  }
}

.about-main .service .service-intro .zh-pc-line,
.about-main .service .service-intro .zh-mb-line,
html[lang="zh-TW"] .about-main .service .service-intro .zh-mb-line {
  display: none;
}
html[lang="zh-TW"] .about-main .service .service-intro .zh-pc-line {
  display: block;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .about-main .service .service-intro .zh-mb-line {
    display: block;
  }
  html[lang="zh-TW"] .about-main .service .service-intro .zh-pc-line {
    display: none;
  }
}

.about-main .service .service-intro .service-images {
  width: 75%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
@media (max-width: 1580px) {
  .about-main .service .service-intro .service-images {
    width: 90%;
  }
}
@media (max-width: 525px) {
  .about-main .service .service-intro .service-images {
    margin-bottom: 24px;
    gap: 8px;
  }
}

.about-main .service .service-intro .service-images a {
  transition: all 0.2s ease;
}
.about-main .service .service-intro .service-images a:hover {
  transform: scale(1.02);
}

.about-main .service .service-intro .service-images img {
  max-width: 322px;
  aspect-ratio: 1 / 1;
}
@media (max-width: 1024px) {
  .about-main .service .service-intro .service-images img {
    max-width: 222px;
  }
}
@media (max-width: 525px) {
  .about-main .service .service-intro .service-images img {
    width: 120px;
  }
}
@media (max-width: 375px) {
  .about-main .service .service-intro .service-images img {
    max-width: 100px;
  }
}
@media (max-width: 320px) {
  .about-main .service .service-intro .service-images img {
    max-width: 90px;
  }
}

.about-main .service .service-intro .service-description.pc {
  display: block;
}
.about-main .service .service-intro .service-description.mb {
  display: none;
}
@media (max-width: 768px) {
  .about-main .service .service-intro .service-description.pc {
    display: none;
  }
  .about-main .service .service-intro .service-description.mb {
    display: block;
  }
  .about-main .service .service-intro .service-description.mb .desc-393 {
    display: block;
  }
  .about-main .service .service-intro .service-description.mb .desc-375 {
    display: none;
  }
}
@media (max-width: 390px) {
  .about-main .service .service-intro .service-description.mb .desc-393 {
    display: none;
  }
  .about-main .service .service-intro .service-description.mb .desc-375 {
    display: block;
  }
}
.about-main .service .service-intro .service-description {
  width: 100%;
  color: var(--Body-text, #484740);
  text-align: center;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H4, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
@media (max-width: 1350px) {
  .about-main .service .service-intro .service-description {
    font-size: 30px;
  }
}
@media (max-width: 1200px) {
  .about-main .service .service-intro .service-description {
    font-size: 26px;
  }
}
@media (max-width: 1040px) {
  .about-main .service .service-intro .service-description {
    padding: 0;
    font-size: 24px;
  }
}
@media (max-width: 960px) {
  .about-main .service .service-intro .service-description {
    font-size: 20px;
  }
}
@media (max-width: 820px) {
  .about-main .service .service-intro .service-description {
    font-size: 19px;
  }
}
@media (max-width: 768px) {
  .about-main .service .service-intro .service-description {
    font-size: 25px;
    letter-spacing: 0.5px;
    padding: 0 8px;
  }
}
@media (max-width: 666px) {
  .about-main .service .service-intro .service-description {
    font-size: 22px;
  }
}
@media (max-width: 580px) {
  .about-main .service .service-intro .service-description {
    font-size: 16px;
  }
}

.about-main .service .service-intro .find-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 4px;
}
@media (max-width: 768px) {
  .about-main .service .service-intro .find-section {
    padding: 0 20px;
  }
}
@media (max-width: 475px) {
  .about-main .service .service-intro .find-section {
    margin-top: 24px;
  }
}

.about-main .service .service-intro .find-title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 4px;
}
html[lang="zh-TW"] .about-main .service .service-intro .find-title {
  font-weight: 400;
  line-height: 150%;
}
@media (max-width: 1024px) {
  .about-main .service .service-intro .find-title {
    margin-bottom: 40px;
  }
}
@media (max-width: 525px) {
  .about-main .service .service-intro .find-title {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: var(--Font-Size-H6, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.15px;

    margin-bottom: 24px;
  }
}

.about-main .service .service-intro .find-desc {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 46px;
}
.about-main .service .service-intro .find-desc .desc-group {
  flex: 1;
}
html[lang="zh-TW"] .about-main .service .service-intro .find-desc .desc-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
@media (max-width: 768px) {
  .about-main .service .service-intro .find-desc {
    flex-direction: column;
    gap: 36px;
  }
  html[lang="zh-TW"]
    .about-main
    .service
    .service-intro
    .find-desc
    .desc-group {
    flex-direction: column;
    gap: 16px;
  }

  .about-main .service .service-intro .find-desc .desc-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}
@media (max-width: 525px) {
  .about-main .service .service-intro .find-desc {
    gap: 16px;
  }
  html[lang="zh-TW"] .about-main .service .service-intro .find-desc {
    gap: 24px;
  }
}

.about-main .service .service-intro .find-desc img {
  display: none;
}
html[lang="zh-TW"] .about-main .service .service-intro .find-desc img {
  display: block;
  width: 34px;
  height: 34px;
  margin-top: 4px;
}
@media (max-width: 768px) {
  .about-main .service .service-intro .find-desc img {
    display: block;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
}
@media (max-width: 525px) {
  .about-main .service .service-intro .find-desc img {
    width: 26px;
    height: 26px;
  }
  html[lang="zh-TW"] .about-main .service .service-intro .find-desc img {
    display: block;
    width: 26px;
    height: 26px;
    margin-top: 4px;
  }
}

.about-main .service .service-intro .find-desc .desc {
  flex: 1;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
.about-main .service .service-intro .find-desc .desc .dash-mb {
  display: none;
}
html[lang="zh-TW"] .about-main .service .service-intro .find-desc .desc {
  line-height: 150%;
  max-width: 393px;
}
@media (max-width: 525px) {
  .about-main .service .service-intro .find-desc .desc {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
  html[lang="zh-TW"] .about-main .service .service-intro .find-desc .desc {
    font-size: 16px;
    letter-spacing: 0.5px;
  }
  .about-main .service .service-intro .find-desc .desc .dash-pc {
    display: none;
  }
  .about-main .service .service-intro .find-desc .desc .dash-mb {
    display: block;
  }
}

.about-main .more-btn {
  display: flex;
  width: 258px;
  padding: 24px;
  justify-content: center;
  align-items: center;
  border-radius: 56px;
  background: var(--Headlines, #13120c);
  margin-left: 30px;
}
html[lang="zh-TW"] .about-main .more-btn {
  padding: 19px 24px;
}
@media (max-width: 768px) {
  .about-main .more-btn.server {
    display: none;
  }
  .about-main .more-btn {
    margin: 0 auto;
  }
}

.about-main .service .service-intro .more-btn {
  margin-top: 20px;
}

.about-main .more-btn p {
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  width: 70%;
}
html[lang="zh-TW"] .about-main .more-btn p {
  font-family: "Noto Sans TC";
  font-size: 22px;
  line-height: normal;
  letter-spacing: 3px;
  width: 70%;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .about-main .more-btn p {
    font-size: 16px;
  }
}

html[lang="zh-TW"] .about-main .service .service-intro .title {
  order: 1;
  margin-bottom: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 3px;
}
html[lang="zh-TW"] .about-main .service .service-intro .service-title {
  order: 2;
  font-size: 48px;
  line-height: 150%; /* 72px */
  letter-spacing: -1px;
}
html[lang="zh-TW"] .about-main .service .service-intro .zh-mb-line {
  order: 3;
}
html[lang="zh-TW"] .about-main .service .service-intro .zh-pc-line {
  order: 3;
}
html[lang="zh-TW"] .about-main .service .service-intro .service-images {
  order: 5;
}
html[lang="zh-TW"] .about-main .service .service-intro .service-description {
  order: 4;
  line-height: 150%;
}
html[lang="zh-TW"] .about-main .service .service-intro .find-section {
  order: 6;
}
html[lang="zh-TW"] .about-main .service .service-intro .more-btn {
  order: 7;
  padding: 19px;
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .about-main .service .service-intro .service-title {
    font-size: 24px;
  }
}

.about-main .middle {
  width: 100%;
  padding: 102px 11% 102px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .about-main .middle {
    padding: 102px 150px 102px 150px;
  }
}
@media (max-width: 1024px) {
  .about-main .middle {
    padding: 50px 7.813%;
    background: var(--Main-Bg, #f6f4f4);
  }
}
@media (max-width: 525px) {
  .about-main .middle {
    padding: 16px 8px 72px 8px;
    background: var(--Main-Bg, #f6f4f4);
  }
}

.about-main .middle .head {
  display: flex;
  align-self: center;
  gap: 30px;
}
@media (max-width: 525px) {
  .about-main .middle .head {
    padding: 0 8px;
  }
}

.about-main .middle .title {
  width: 109px;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  text-wrap: nowrap;
}
@media (max-width: 1024px) {
  .about-main .middle .title.twba {
    display: none;
  }
}

.about-main .middle .head svg {
  display: none;
}

@media (max-width: 768px) {
  .about-main .middle .head svg {
    display: block;
    align-self: center;
  }
}

.about-main .middle .awards-items {
  margin-top: -15px;
  margin-left: 26.5%;
  margin-bottom: 152px;
}

@media (max-width: 768px) {
  .about-main .middle .awards-items {
    margin-top: 24px;
    margin-left: 0;
    margin-bottom: 64px;
  }
}

.about-main .middle .awards-items .header {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  margin-left: 30px;
}
@media (max-width: 768px) {
  .about-main .middle .awards-items .header {
    gap: 16px;
    margin-left: 0px;
  }
}
@media (max-width: 525px) {
  .about-main .middle .awards-items .header {
    gap: 14px;
  }
}

.about-main .middle .awards-items .header .main-title {
  color: #13120c;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.75px;
  text-wrap: nowrap;
}
@media (max-width: 1024px) {
  .about-main .middle .awards-items .header .main-title {
    font-size: 60px;
  }
}
@media (max-width: 768px) {
  .about-main .middle .awards-items .header .main-title {
    font-size: 48px;
    padding: 0 8px;
  }
}
@media (max-width: 525px) {
  .about-main .middle .awards-items .header .main-title {
    font-size: 34px;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}

.about-main .middle .awards-items .header .desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}
.about-main .middle .awards-items .header .desc .pc-aw-zn-desc {
  display: block;
}
.about-main .middle .awards-items .header .desc .mb-aw-zn-desc {
  display: none;
}
@media (max-width: 768px) {
  .about-main .middle .awards-items .header .desc {
    padding: 0 8px;
  }
  .about-main .middle .awards-items .header .desc .pc-aw-zn-desc {
    display: none;
  }
  .about-main .middle .awards-items .header .desc .mb-aw-zn-desc {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

.about-main .middle .awards-items .award-video {
  margin-top: 82px;
  margin-bottom: 90px;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  margin-left: 30px;
}
@media (max-width: 768px) {
  .about-main .middle .awards-items .award-video {
    margin: 40px 0;
  }
}
@media (max-width: 525px) {
  .about-main .middle .awards-items .award-video {
    margin: 24px 0;
  }
}

.about-main .middle .awards-items .award-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 24px;
}
.about-main .middle .awards-items .pc-award-icons {
  display: block;
  width: 100%;
  margin-left: 30px;
}
@media (max-width: 768px) {
  .about-main .middle .awards-items .pc-award-icons {
    display: none;
  }
}

@media (min-width: 769px) {
  .about-main .middle .awards-items .mobile-award-icons {
    display: none;
  }
}
@media (max-width: 768px) {
  .about-main .middle .awards-items .mobile-award-icons {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    gap: 30px;

    padding: 0 8px;
  }
}
@media (max-width: 525px) {
  .about-main .middle .awards-items .mobile-award-icons {
    padding: 0;
    gap: 18px;
    justify-content: space-between;
  }
}
@media (max-width: 380px) {
  .about-main .middle .awards-items .mobile-award-icons {
    gap: 12px;
  }
}

.about-main .middle .awards-items .mobile-award-icons img {
  width: auto;
  height: 113px;
  margin-right: 39px;
}

@media (max-width: 1024px) {
  .about-main .middle .awards-items .mobile-award-icons img {
    height: 70px;
    margin-right: 25px;
  }
}
@media (max-width: 768px) {
  .about-main .middle .awards-items .mobile-award-icons img {
    height: 52px;
    margin-right: 15px;
  }
}
@media (max-width: 525px) {
  .about-main .middle .awards-items .mobile-award-icons img {
    height: 35px;
    margin-right: 0;
  }
}

.about-main .middle .awards-list {
  width: 100%;
  margin-top: 155px;
  margin-right: 2%;
  padding: 52px 30px 52px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-top: 1px solid #c8c8ca;
  border-bottom: 1px solid #c8c8ca;
}
@media (max-width: 1440px) {
  .about-main .middle .awards-list {
    margin-top: 100px;
  }
}
@media (max-width: 1024px) {
  .about-main .middle .awards-list {
    margin-top: 75px;
    padding: 52px 0;
  }
}
@media (max-width: 768px) {
  .about-main .middle .awards-list {
    margin-top: 50px;
  }
}
@media (max-width: 475px) {
  .about-main .middle .awards-list {
    margin-top: 32px;
    padding: 24px 0;
  }
  .about-main .middle .awards-list svg {
    width: 17.2px;
    height: 16px;
  }
}

.about-main .middle .awards-list .title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  text-wrap: nowrap;
}
@media (max-width: 525px) {
  .about-main .middle .awards-list .title {
    color: var(--Dark-BG, #363130);
    font-size: var(--Font-Size-H5, 24px);
    line-height: 140%;

    padding: 0 8px;
  }
}

.about-main .middle .more-btn {
  margin-top: 52px;
  display: flex;
  width: 258px;
  padding: 24.3px;
  justify-content: center;
  align-items: center;
  border-radius: 56px;
  background: var(--Headlines, #13120c);
}
html[lang="zh-TW"] .about-main .middle .more-btn {
  padding: 19px;
}
@media (max-width: 768px) {
  .about-main .middle .more-btn {
    width: 87.3%;
    margin-top: 32px;
  }
  html[lang="zh-TW"] .about-main .middle .more-btn {
    margin-top: 32px;
  }
}

.about-main .middle .more-btn p {
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  width: 70%;
}

.twba-items {
  margin: -15px 0% 0px 26.5%;
}
@media (max-width: 1024px) {
  .twba-items {
    margin: 0;
  }
}

.twba-items .header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  margin-left: 30px;
}
html[lang="zh-TW"] .twba-items .header {
  gap: 16px;
}
@media (max-width: 768px) {
  .twba-items .header {
    gap: 32px;
    padding-left: 8px;
    margin-left: 0px;
  }
}
@media (max-width: 475px) {
  .twba-items .header {
    gap: 16px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

.twba-items .header .main-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  /* padding: 8px; */
  margin-bottom: 40px;
}
html[lang="zh-TW"] .twba-items .header .main-title {
  font-size: 48px !important;
  line-height: 150%;
  letter-spacing: -1px;
}
@media (max-width: 525px) {
  .twba-items .header .main-title {
    font-size: var(--Font-Size-H4, 34px) !important;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  html[lang="zh-TW"] .twba-items .header .main-title {
    font-family: "Noto Sans TC";
    font-size: 24px !important;
    line-height: 150%;
    letter-spacing: -1px;
    margin-bottom: 0px;
  }
}

.twba-items .header .desc-block.pc {
  display: block;
}
.twba-items .header .desc-block.mb {
  display: none;
}
@media (max-width: 1800px) {
  .twba-items .header .desc-block.pc {
    display: none;
  }
  .twba-items .header .desc-block.mb {
    display: block;
  }
}
.twba-items .header .desc-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.twba-items .header .desc-block .desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
.twba-items .header .desc-block .desc p {
  white-space: nowrap;
}
@media (max-width: 1800px) {
  .twba-items .header .desc-block .desc p {
    white-space: normal;
  }
}
@media (max-width: 1024px) {
  .twba-items .header .desc-block .desc {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}
@media (max-width: 768px) {
  .twba-items .header .desc-block .desc p {
    white-space: normal;
  }
}
@media (max-width: 525px) {
  .twba-items .header .desc-block .desc {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
  html[lang="zh-TW"] .twba-items .header .desc-block .desc {
    color: var(--Body-text, #484740);
    text-align: justify;
    font-family: "Noto Sans TC";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.15px;
  }
}

.twba-items .header .desc-block .desc a {
  color: var(--Body-text, #484740);
  text-decoration: underline;
}

.twba-items .twba-image {
  width: 51%;
  /* margin: 0 auto; */
  margin-left: 2%;
}
@media (max-width: 1024px) {
  .twba-items .twba-image {
    width: 100%;
  }
}

.twba-items .twba-image img {
  width: 100%;
  aspect-ratio: 720 / 510;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 24px;
  margin-top: 86px;
}
@media (max-width: 525px) {
  .twba-items .twba-image img {
    margin-top: 40px;
  }
}

.about-main .bottom-bg {
  background: var(--Main-Bg, #f6f4f4);
  border-radius: 60px 60px 0 0;
}
@media (max-width: 768px) {
  .about-main .bottom-bg {
    border-radius: 0;
  }
}
.about-main .bottom {
  width: 100%;
  padding: 102px 11% 100px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .about-main .bottom {
    padding: 102px 150px 100px 150px;
  }
}
@media (max-width: 1024px) {
  .about-main .bottom {
    border-radius: 0;
    padding: 24px 7.813%;
  }
}
@media (max-width: 525px) {
  .about-main .bottom {
    padding: 12px 16px;
  }
}

.about-main .bottom .head {
  display: flex;
  align-items: center;
  gap: 30px;
}

.about-main .bottom .title {
  /* width: 109px; */
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.about-main .bottom .head svg {
  display: none;
}
@media (max-width: 768px) {
  .about-main .bottom .head svg {
    display: block;
    align-self: center;
  }
}

.about-main .bottom .organization-items {
  margin-top: -15px;
  margin-left: 26%;
  /* margin-bottom: 100px; */
}
@media (max-width: 1024px) {
  .about-main .bottom .organization-items {
    margin-top: 24px;
    margin-left: 0;
    margin-bottom: 20px;
  }
}

.about-main .bottom .organization-items .header {
  display: flex;
  /* padding: 0 30px; */
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  margin-left: 30px;
}
@media (max-width: 1024px) {
  .about-main .bottom .organization-items .header {
    padding: 0;
  }
}
@media (max-width: 575px) {
  .about-main .bottom .organization-items .header {
    gap: 16px;
    margin-left: 0px;
  }
}

.about-main .bottom .organization-items .header .main-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.75px;
  transition: all 0.3s ease;
}
@media (max-width: 1024px) {
  .about-main .bottom .organization-items .header .main-title {
    font-size: 66px;
  }
}
@media (max-width: 525px) {
  .about-main .bottom .organization-items .header .main-title {
    font-size: 34px;
  }
}

.about-main .bottom .organization-items .header .main-title:hover {
  scale: 1.05;
}

.about-main .bottom .organization-items .header .desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 122px;
}
@media (max-width: 768px) {
  .about-main .bottom .organization-items .header .desc {
    display: none;
  }
}

.about-main .bottom .organization-items .header .mb-desc {
  display: none;
}
@media (max-width: 768px) {
  .about-main .bottom .organization-items .header .mb-desc {
    display: block;
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-H6, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.5px;
    margin-bottom: 40px;
  }
}

@media (max-width: 525px) {
  .about-main .bottom .organization-items .header .mb-desc {
    font-size: var(--Font-Size-Body-1, 16px);
    margin-bottom: 56px;
  }
}

.about-main .bottom .organization-items .partner-cards {
  width: 100%;
  max-width: 1190px;
  flex-shrink: 0;
}
html[lang="zh-TW"] .about-main .bottom .organization-items .partner-cards {
  border-top: 1px solid var(--Lines, #c8c8ca);
}
@media (max-width: 768px) {
  .about-main .bottom .organization-items .partner-cards {
    display: none;
  }
}

/* 手風琴開合 */
.accordion__item .accordion__content {
  display: none;
}
.accordion__item.active .accordion__content {
  display: block;
}

/* 手機：只有 Partners 打開(active)才顯示 .partner-cards */
@media (max-width: 767.98px) {
  .organization-items
    .accordion-item--partners
    .accordion__content
    .partner-cards {
    display: none !important;
  }
  .organization-items
    .accordion-item--partners.active
    .accordion__content
    .partner-cards {
    display: block !important;
  }
}

/* 桌機：原位顯示 */
@media (min-width: 768px) {
  .organization-items .partner-cards {
    display: block;
  }
}

.about-main .bottom .organization-items .partner-cards .partner-title {
  width: 100%;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  padding-top: 52px;
  margin-bottom: 52px;
  border-top: 1px solid #c8c8ca;
  padding-left: 30px;
}
@media (max-width: 768px) {
  .about-main .bottom .organization-items .partner-cards .partner-title {
    text-align: center;
    padding-left: 0px;
  }
}

.about-main
  .bottom
  .organization-items
  .partner-cards
  .partner-title:first-child {
  border: none;
}

.about-main .bottom .organization-items .partner-cards .partner-card {
  display: flex;
  gap: 48px;
  padding-bottom: 50px;
  padding-left: 30px;
}
@media (max-width: 768px) {
  .about-main .bottom .organization-items .partner-cards .partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}
@media (max-width: 575px) {
  .about-main .bottom .organization-items .partner-cards .partner-card {
    padding-left: 0px;
  }
}

.about-main
  .bottom
  .organization-items
  .partner-cards
  .partner-card
  .partner-photo {
  width: 300px;
  height: 300px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .about-main
    .bottom
    .organization-items
    .partner-cards
    .partner-card
    .partner-photo {
    width: 250px;
    height: 250px;
  }
}

.about-main
  .bottom
  .organization-items
  .partner-cards
  .partner-card
  .partner-photo
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-main .bottom .organization-items .partner-cards .partner-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: -6px;
  margin-bottom: -6px;
}
@media (max-width: 768px) {
  .about-main .bottom .organization-items .partner-cards .partner-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.about-main
  .bottom
  .organization-items
  .partner-cards
  .partner-meta
  .partner-name {
  color: #000;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  margin-bottom: 16px;
}
html[lang="zh-TW"]
  .about-main
  .bottom
  .organization-items
  .partner-cards
  .partner-meta
  .partner-name {
  font-family: var(--Font-Family-Title, "Rethink Sans") !important;
}
@media (max-width: 768px) {
  .about-main
    .bottom
    .organization-items
    .partner-cards
    .partner-meta
    .partner-name {
    text-align: center;
    font-size: 46px;
  }
}
@media (max-width: 545px) {
  .about-main
    .bottom
    .organization-items
    .partner-cards
    .partner-meta
    .partner-name {
    font-size: 24px;
  }
}

.about-main .bottom .organization-items .partner-cards .partner-meta .title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.15px;
  /* margin-top: 101px; */
}
@media (max-width: 768px) {
  .about-main .bottom .organization-items .partner-cards .partner-meta .title {
    margin-top: 30px;
  }
}
@media (max-width: 545px) {
  .about-main .bottom .organization-items .partner-cards .partner-meta .title {
    font-size: 16px;
  }
}

.about-main
  .bottom
  .organization-items
  .partner-cards
  .partner-meta
  .partner-line {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 545px) {
  .about-main
    .bottom
    .organization-items
    .partner-cards
    .partner-meta
    .partner-line {
    font-size: 16px;
  }
}

.about-main
  .bottom
  .organization-items
  .partner-cards
  .partner-meta
  .partner-professions {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
@media (max-width: 768px) {
  .about-main
    .bottom
    .organization-items
    .partner-cards
    .partner-meta
    .partner-professions {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
}

.about-main
  .bottom
  .organization-items
  .partner-cards
  .partner-meta
  .partner-professions
  .profession-item {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
html[lang="zh-TW"]
  .about-main
  .bottom
  .organization-items
  .partner-cards
  .partner-meta
  .partner-professions
  .profession-item {
  font-family: var(--Font-Family-Title, "Rethink Sans") !important;
}
@media (max-width: 545px) {
  .about-main
    .bottom
    .organization-items
    .partner-cards
    .partner-meta
    .partner-professions
    .profession-item {
    font-size: 16px;
  }
}

.about-main .bottom .organization-items .partner-cards .more-btn {
  margin-bottom: 102px;
  width: 210px;
}

.about-main .bottom .organization-items .team-cards {
  width: 100%;
  max-width: 1190px;
  flex-shrink: 0;
  border-top: 1px solid #c8c8ca;
}

.about-main .bottom .organization-items .team-cards .team-card {
  width: 100%;
  padding: 50px 12px 50px 30px;
  border-bottom: 1px solid #c8c8ca;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about-main .bottom .organization-items .team-cards .team-card .title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

/* Awards */
.awards-main {
  width: 100%;
}

.awards-main .header-top-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.awards-main .header.top {
  padding: 148px 7.813% 31px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
html[lang="zh-TW"] .awards-main .header.top {
  padding: 168px 7.813% 68px 7.813%;
}
.awards-main .header {
  width: 100%;
  padding: 0;
  margin-top: -30px;
}
@media (min-width: 1921px) {
  .awards-main .header.top {
    padding: 148px 150px 31px 150px;
  }
  html[lang="zh-TW"] .awards-main .header.top {
    padding: 168px 150px 68px 150px;
  }
}
@media (max-width: 768px) {
  .awards-main .header {
    margin-top: 0px;
  }
  .awards-main .header.top {
    padding: 164px 7.813% 60px 7.813%;
  }
}
@media (max-width: 525px) {
  .awards-main .header.top {
    padding: 164px 8px 44px 8px;
  }
  .awards-main .header.twba {
    padding: 0;
  }
  html[lang="zh-TW"] .awards-main .header.top {
    padding: 164px 8px 62px 8px;
  }
}

.awards-main .header .main-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 122px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
@media (max-width: 1480px) {
  .awards-main .header .main-title {
    font-size: 100px;
  }
}
@media (max-width: 768px) {
  .awards-main .header .main-title {
    font-size: 80px;
  }
}
@media (max-width: 525px) {
  .awards-main .header .main-title {
    font-size: 36px;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}

@media (max-width: 525px) {
  .awards-main .header .bread {
    padding-top: 0;
    padding-bottom: 23px;
    margin-top: -10px;
  }
}

.awards-main .header .hero-video {
  margin-bottom: 77px;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
html[lang="zh-TW"] .awards-main .header .hero-video {
  margin-bottom: 131px;
}
@media (max-width: 525px) {
  .awards-main .header .hero-video {
    padding-bottom: 76.1%;
    margin-bottom: 33px;
  }
  html[lang="zh-TW"] .awards-main .header .hero-video {
    margin-bottom: 30px;
  }
}

.awards-main .header .hero-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 24px;
}

.awards-main .header .awards-section {
  width: 100%;
  padding-bottom: 91px;
}
@media (max-width: 525px) {
  .awards-main .header .awards-section {
    padding-bottom: 0;
  }
}

.awards-main .header .awards-section .awards-desc.pc {
  display: block;
}
.awards-main .header .awards-section .awards-desc.mb {
  display: none;
}
@media (max-width: 768px) {
  .awards-main .header .awards-section .awards-desc.pc {
    display: none;
  }
  .awards-main .header .awards-section .awards-desc.mb {
    display: block;
  }
}
.awards-main .header .awards-section .awards-desc {
  color: var(--Headlines, #13120c);
  text-align: center;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H4, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
html[lang="zh-TW"] .awards-main .header .awards-section .awards-desc {
  font-size: 46px;
  line-height: 120%;
}
@media (max-width: 1670px) {
  .awards-main .header .awards-section .awards-desc,
  html[lang="zh-TW"] .awards-main .header .awards-section .awards-desc {
    font-size: 28px;
  }
}
@media (max-width: 1470px) {
  .awards-main .header .awards-section .awards-desc,
  html[lang="zh-TW"] .awards-main .header .awards-section .awards-desc {
    font-size: 24px;
  }
}
@media (max-width: 1260px) {
  .awards-main .header .awards-section .awards-desc,
  html[lang="zh-TW"] .awards-main .header .awards-section .awards-desc {
    font-size: 20px;
  }
}
@media (max-width: 1060px) {
  .awards-main .header .awards-section .awards-desc,
  html[lang="zh-TW"] .awards-main .header .awards-section .awards-desc {
    font-size: 18px;
  }
}
@media (max-width: 950px) {
  .awards-main .header .awards-section .awards-desc,
  html[lang="zh-TW"] .awards-main .header .awards-section .awards-desc {
    font-size: 16px;
  }
}
@media (max-width: 860px) {
  .awards-main .header .awards-section .awards-desc,
  html[lang="zh-TW"] .awards-main .header .awards-section .awards-desc {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .awards-main .header .awards-section .awards-desc,
  html[lang="zh-TW"] .awards-main .header .awards-section .awards-desc {
    font-size: 24px;
  }
}
@media (max-width: 525px) {
  .awards-main .header .awards-section .awards-desc {
    color: var(--Body-text, #484740);
    font-size: var(--Font-Size-Body-1, 16px);
    letter-spacing: 0.5px;
  }
  html[lang="zh-TW"] .awards-main .header .awards-section .awards-desc {
    color: var(--Body-text, #484740);
    font-size: var(--Font-Size-Body-1, 16px);
    letter-spacing: 0.5px;
  }
}

/* =========================================================
   Awards icons (JS rows controlled)
   - Desktop: container width 90% (center)
   - <=768: container width 100%
   - Row spacing: 用 margin-bottom 控制（JS 也可同步調）
   ========================================================= */

.awards-main .header .awards-icons {
  /* 交給 JS 插入 .awards-row 來排版，因此容器用 block */
  display: block;

  width: 90%;
  margin: 128px auto 0;
  padding: 0;
}

/* 小螢幕：100% */
@media (max-width: 768px) {
  .awards-main .header .awards-icons {
    width: 100%;
    margin-top: 60px;
    padding: 0; /* 你若要保留左右內距可改成 0 16px */
  }
}

@media (max-width: 475px) {
  .awards-main .header .awards-icons {
    margin-top: 24px;
    padding: 0 8px; /* 你原本有 8px，就保留 */
  }
}

/* JS 產生的 row */
.awards-main .header .awards-icons > .awards-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;

  /* row 之間距離（你說要縮小一半：原 60 → 30） */
  /* ✅ 做法 A：純 CSS 控制（如果你 JS 已經在 row-1 設 margin-bottom，可刪這段） */
}

.awards-main .header .awards-icons > .awards-row.row-1 {
  margin-bottom: 30px; /* 兩行之間的 gap（縮小一半） */
}

/* 425 再更緊一點（可選） */
@media (max-width: 525px) {
  .awards-main .header .awards-icons > .awards-row.row-1 {
    margin-bottom: 15px;
  }
}

/* item（避免被舊樣式影響） */
.awards-main .header .awards-icons .awards-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* img：以 JS 設的 CSS 變數為主 */
.awards-main .header .awards-icons .awards-icon img {
  height: var(--logo-h, 113px);
  max-width: var(--logo-max-w, 230px);
  width: auto;

  object-fit: contain;
  object-position: center;
  display: block;
}

.awards-main .awards-links-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.awards-main .awards-links {
  width: 100%;
  padding: 0 7.813% 100px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .awards-main .awards-links {
    padding: 0 150px 100px 150px;
  }
}
@media (max-width: 525px) {
  .awards-main .awards-links {
    padding: 0 16px 40px 16px;
  }
}

.awards-main .awards-links .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}

.awards-main .awards-links .title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}
.awards-main .awards-links .title.zh {
  display: none;
}
html[lang="zh-TW"] .awards-main .awards-links .title.zh {
  display: block;
}
html[lang="zh-TW"] .awards-main .awards-links .title.en {
  display: none;
}
@media (max-width: 768px) {
  .awards-main .awards-links .title.twba {
    display: none;
  }
  html[lang="zh-TW"] .awards-main .awards-links .title.zh {
    display: none;
  }
}

.awards-main .awards-links .head svg {
  align-self: center;
}
@media (min-width: 768px) {
  .awards-main .awards-links .head svg {
    display: none;
  }
}

.awards-main .awards-links .awards-links-section {
  margin-top: -30px;
  margin-left: 26.5%;
  margin-bottom: 122px;
}
html[lang="zh-TW"] .awards-main .awards-links .awards-links-section {
  margin-bottom: 100px;
}
@media (max-width: 768px) {
  .awards-main .awards-links .awards-links-section {
    margin-top: 25px;
    margin-left: 0;
    margin-bottom: 60px;
    width: 100%;
  }
}
@media (max-width: 525px) {
  .awards-main .awards-links .awards-links-section {
    margin-bottom: 0px;
    margin-top: 56px;
  }
  html[lang="zh-TW"] .awards-main .awards-links .awards-links-section {
    margin-bottom: 0px;
  }
}

@media (max-width: 1200px) {
  .awards-main .awards-links .awards-links-section svg {
    display: none;
  }
}

.awards-main .awards-links .main-title {
  color: #13120c;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.75px;
  padding-bottom: 30px;
}
@media (max-width: 1440px) {
  .awards-main .awards-links .main-title {
    font-size: 60px;
  }
}
@media (max-width: 1024px) {
  .awards-main .awards-links .main-title {
    font-size: 52px;
  }
}
html[lang="zh-TW"] .awards-main .awards-links .main-title {
  font-family: "Noto Sans TC";
  font-size: 48px;
  line-height: 150%;
  letter-spacing: -2px;
}
@media (max-width: 768px) {
  .awards-main .awards-links .main-title,
  html[lang="zh-TW"] .awards-main .awards-links .main-title {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: 52px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}
@media (max-width: 525px) {
  .awards-main .awards-links .main-title {
    color: var(--Dark-BG, #363130);
    font-size: var(--Font-Size-H5, 24px);
    margin-bottom: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  html[lang="en-US"] .awards-main .awards-links .main-title.awards::after {
    content: "List";
  }
  .awards-main .awards-links .main-title.twba,
  html[lang="zh-TW"] .awards-main .awards-links .main-title.twb {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: var(--Font-Size-H4, 34px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  html[lang="zh-TW"] .awards-main .awards-links .main-title {
    font-size: 34px !important;
  }
  html[lang="zh-TW"] .awards-main .awards-links .main-title .en-text {
    font-family: var(--Font-Family-Title, "Rethink Sans") !important;
  }
}

.awards-main .awards-links .awards-links-list {
  display: flex;
  width: 100%;
  max-width: 1130px;
  flex-direction: column;
  align-items: flex-start;
  gap: -1px;
  border-top: 1px solid #c8c8ca;
}

.awards-main .awards-links .awards-links-list li {
  display: flex;
  width: 100%;
  max-width: 1130px;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #c8c8ca;
}

.awards-main .awards-links .awards-links-list li a {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
html[lang="zh-TW"] .awards-main .awards-links .awards-links-list li a {
  font-family: var(--Font-Family-Title, "Rethink Sans") !important;
}
@media (max-width: 525px) {
  .awards-main .awards-links .awards-links-list li a {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

.awards-main .awards-links .awards-images {
  margin-top: 100px;
  margin-bottom: 100px;
  width: 100%;
  max-width: 1130px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
@media (max-width: 768px) {
  .awards-main .awards-links .awards-images {
    gap: 5px;
  }
}
@media (max-width: 525px) {
  .awards-main .awards-links .awards-images {
    margin-top: 23px;
    margin-bottom: 49px;
  }
  html[lang="zh-TW"] .awards-main .awards-links .awards-images {
    margin-top: 50px;
    margin-bottom: 38px;
  }
}

.awards-main .awards-links .awards-images .awards-image {
  aspect-ratio: 189 / 204;
}
.awards-main .awards-links .awards-images img {
  border-radius: 24px;
}

.awards-main .awards-links .pc-line {
  max-width: calc(100% + 60px);
  margin-left: -30px;
}

/* IMO team */

.team-main-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.team-main {
  max-width: 1920px;
  margin: 0 auto;
}

.team-main .header {
  width: 100%;
  padding: 148px 7.813% 77px 7.813%;
}
html[lang="zh-TW"] .team-main .header {
  padding: 170px 7.813% 120px 7.813%;
}
@media (min-width: 1921px) {
  .team-main .header {
    padding: 134px 150px 48px 150px;
  }
  html[lang="zh-TW"] .team-main .header {
    padding: 170px 150px 120px 150px;
  }
}
@media (max-width: 768px) {
  .team-main .header {
    padding: 134px 7.813% 48px 7.813%;
  }
}
@media (max-width: 525px) {
  .team-main .header {
    padding: 134px 8px 48px 8px;
  }
  html[lang="zh-TW"] .team-main .header {
    padding: 134px 8px 48px 8px;
  }
}

.team-main .header .main-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 122px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
@media (max-width: 1480px) {
  .team-main .header .main-title {
    font-size: 100px;
  }
}
@media (max-width: 768px) {
  .team-main .header .main-title {
    font-size: 80px;
    padding: 0 8px;
  }
  html[lang="zh-TW"] .team-main .header .main-title {
    padding: 0;
  }
}
@media (max-width: 525px) {
  .team-main .header .main-title {
    font-size: 36px;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}

@media (max-width: 525px) {
  .team-main .header .bread {
    padding-top: 0;
    padding-bottom: 23px;
    margin-top: -10px;
  }
}

.team-main .header .hero {
  width: 100%;
  border-radius: 24px;
}
.team-main .header .hero img {
  width: 100%;
  border-radius: 24px;
}
@media (max-width: 525px) {
  .team-main .header .hero {
    border-radius: 18px;
  }
  .team-main .header .hero img {
    border-radius: 18px;
    height: 303px;
  }
}

.team-main .team-intro {
  width: 100%;
  padding: 0 10.125% 100px 10.125%;
}
html[lang="zh-TW"] .team-main .team-intro {
  padding: 0 10.125% 77px 10.125%;
}
@media (min-width: 1921px) {
  .team-main .team-intro {
    padding: 0 150px 100px 150px;
  }
}
@media (max-width: 525px) {
  .team-main .team-intro {
    padding: 0 16px 40px 16px;
  }
  html[lang="zh-TW"] .team-main .team-intro {
    padding: 0 16px 42px 16px;
  }
}

.team-main .mb-intro {
  display: none;
}
@media (max-width: 768px) {
  .team-main .mb-intro {
    display: block;
    color: var(--Headlines, #13120c);
    text-align: center;
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;

    margin-bottom: 40px;
  }
}
@media (max-width: 525px) {
  .team-main .mb-intro {
    font-size: var(--Font-Size-H5, 24px);
  }
  html[lang="zh-TW"] .team-main .mb-intro {
    margin-bottom: 64px;
  }
}

.team-main .intro.pc {
  display: block;
}
.team-main .intro.mb {
  display: none;
}
@media (max-width: 1440px) {
  .team-main .intro.pc {
    display: none;
  }
  .team-main .intro.mb {
    display: block;
  }
}
.team-main .intro {
  color: var(--Headlines, #13120c);
  text-align: center;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
@media (max-width: 1900px) {
  .team-main .intro {
    font-size: 28px;
  }
}
@media (max-width: 1660px) {
  .team-main .intro {
    font-size: 24px;
  }
}
@media (max-width: 768px) {
  .team-main .intro {
    color: var(--Body-text, #484740);
    font-size: 24px;
  }
}
@media (max-width: 525px) {
  .team-main .intro {
    font-size: var(--Font-Size-Body-1, 16px);
    letter-spacing: 0.5px;
  }
  html[lang="zh-TW"] .team-main .intro {
    text-align: start;
  }
}

.team-main .zh-mb-title,
.team-main .zh-mb-lg-title {
  display: none;
}

@media (max-width: 525px) {
  html[lang="zh-TW"] .team-main .zh-mb-lg-title {
    display: block;
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: var(--Font-Size-H4, 34px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;

    margin-bottom: 16px;
  }
  html[lang="zh-TW"] .team-main .zh-mb-title {
    display: flex;
    gap: 30px;
    align-items: center;

    margin-bottom: 24px;
  }
  html[lang="zh-TW"] .team-main .zh-mb-title .title {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;
    white-space: nowrap;
  }
}

@media (max-width: 1650px) {
  .team-main .pc-line {
    display: none;
  }
}

.team-main .partner-card-items {
  width: 100%;
  padding: 0 10.125% 9px 10.125%;
}
@media (min-width: 1921px) {
  .team-main .partner-card-items {
    padding: 0 150px 9px 150px;
  }
}
@media (max-width: 768px) {
  .team-main .partner-card-items {
    padding: 0 6.125% 100px 6.125%;
  }
}
@media (max-width: 525px) {
  .team-main .partner-card-items {
    padding: 0 13px 37px 13px;
  }
  html[lang="zh-TW"] .team-main .partner-card-items {
    padding: 0 13px 0px 13px;
  }
}

.team-main .partner-card-items .pc-line {
  max-width: 100%;
}

.team-main .partner-card-items .mb-partner-card {
  width: 100%;
  display: none;
}

.team-main .partner-card-items .partner-card .partner-less-btn {
  display: none;
}

@media (max-width: 768px) {
  .team-main .partner-card-items .mb-partner-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .team-main .partner-card-items .mb-partner-card .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    overflow: hidden;
    /* margin-top: 32px; */
    margin-bottom: 12px;
    gap: 24px;
  }

  .team-main .partner-card-items .mb-partner-card .head svg {
    align-self: center;
  }
  html[lang="zh-TW"] .team-main .partner-card-items .mb-partner-card .head svg {
    display: none;
  }

  .team-main .partner-card-items .mb-partner-card .mb-partner-card__title {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
  }

  .team-main .partner-card-items .mb-partner-card .mb-partner-block {
    display: flex;
    gap: 13px;
    padding-left: 13px;
  }

  .team-main
    .partner-card-items
    .mb-partner-card
    .mb-partner-block
    .mb-partner-card__image {
    width: 220px;
    height: 220px;
  }
  .team-main
    .partner-card-items
    .mb-partner-card
    .mb-partner-block
    .mb-partner-card__image
    img {
    width: 220px;
    height: 220px;
  }
  .team-main
    .partner-card-items
    .mb-partner-card
    .mb-partner-block
    .mb-partner-card__body {
    display: flex;
    flex-direction: column;
    gap: 17px;
    justify-content: space-between;
    width: 60%;
  }
  .team-main
    .partner-card-items
    .mb-partner-card
    .mb-partner-block
    .mb-partner-card__body
    .mb-partner-card__name {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.5px;
  }

  .team-main
    .partner-card-items
    .mb-partner-card
    .mb-partner-block
    .mb-partner-card__body
    .mb-partner-card__intro {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.5px;
    padding-top: 28px;
  }

  .team-main .partner-card-items .mb-partner-card .partner-more-btn,
  .team-main .partner-card-items .partner-card .partner-less-btn {
    margin-top: 32px;
    margin-bottom: 64px;
    margin-left: 16px;
    margin-right: 16px;
    width: 32%;
    display: flex;
    padding: 21px 27px;
    /* justify-content: center; */
    align-items: center;
    border-radius: 56px;
    background: var(--Headlines, #13120c);
    gap: 60px;
    color: var(--White, #fff);
    text-align: center;
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.25px;
    text-transform: uppercase;
  }
}

@media (max-width: 525px) {
  .team-main .partner-card-items .mb-partner-card .mb-partner-card__title {
    color: var(--Dark-BG, #363130);
    font-size: var(--Font-Size-H5, 24px);
    line-height: 140%;
    white-space: nowrap;
  }
  .team-main
    .partner-card-items
    .mb-partner-card
    .mb-partner-block
    .mb-partner-card__image {
    width: 150px;
    height: 150px;
  }
  .team-main
    .partner-card-items
    .mb-partner-card
    .mb-partner-block
    .mb-partner-card__image
    img {
    width: 150px;
    height: 150px;
  }
  .team-main
    .partner-card-items
    .mb-partner-card
    .mb-partner-block
    .mb-partner-card__body
    .mb-partner-card__name {
    font-size: var(--Font-Size-Body-1, 16px);
  }
  .team-main
    .partner-card-items
    .mb-partner-card
    .mb-partner-block
    .mb-partner-card__body
    .mb-partner-card__intro {
    padding-top: 0;
    font-size: var(--Font-Size-Body-1, 16px);
  }

  .team-main .partner-card-items .mb-partner-card .partner-more-btn,
  .team-main .partner-card-items .partner-card .partner-less-btn {
    width: 59.3%;
    margin-bottom: 40px;
    padding: 21px 27px 21px 23%;
    gap: 60px;
    margin-top: 22px;
  }
}

.team-main .partner-card-items .partner-card {
  display: flex;
  gap: 48px;
  padding-bottom: 100px;
  border-bottom: 1px solid #c8c8ca;
  padding-top: 52px;
}
@media (max-width: 1280px) {
  .team-main .partner-card-items .partner-card {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .team-main .partner-card-items .partner-card {
    padding-bottom: 36px;
    border-bottom: none;
  }
}

.team-main .partner-card-items .partner-card .partner-card__title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  max-width: 160px;
}
html[lang="zh-TW"]
  .team-main
  .partner-card-items
  .partner-card
  .partner-card__title {
  font-size: 46px;
  white-space: nowrap;
}
@media (max-width: 1440px) {
  .team-main .partner-card-items .partner-card .partner-card__title {
    font-size: 38px;
  }
  html[lang="zh-TW"]
    .team-main
    .partner-card-items
    .partner-card
    .partner-card__title {
    font-size: 38px;
  }
}
.team-main .partner-card-items .partner-card .partner-card__image {
  width: 300px;
  height: 300px;
  flex-shrink: 0;
  margin-left: 6.25%;
}
@media (max-width: 1440px) {
  .team-main .partner-card-items .partner-card .partner-card__image {
    width: 220px;
    height: 220px;
  }
}
.team-main
  .partner-card-items
  .partner-card#partner-card-2
  .partner-card__image {
  margin-left: 5.5%;
}
@media (max-width: 1440px) {
  .team-main
    .partner-card-items
    .partner-card#partner-card-2
    .partner-card__image {
    margin-left: 3%;
  }
}
html[lang="zh-TW"]
  .team-main
  .partner-card-items
  .partner-card#partner-card-2
  .partner-card__image {
  margin-left: 4.5%;
}
@media (min-width: 1921px) {
  .team-main
    .partner-card-items
    .partner-card#partner-card-2
    .partner-card__image {
    margin-left: 5.8%;
  }
  html[lang="zh-TW"]
    .team-main
    .partner-card-items
    .partner-card#partner-card-2
    .partner-card__image {
    margin-left: 4.8%;
  }
}
@media (max-width: 1024px) {
  .team-main .partner-card-items .partner-card .partner-card__image {
    margin-left: 0;
  }
}

.team-main .partner-card-items .partner-card .partner-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.team-main .partner-card-items .partner-card .partner-card__body {
  display: flex;
  flex-direction: column;
}

.team-main
  .partner-card-items
  .partner-card
  .partner-card__body
  .partner-card__name {
  color: #000;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  margin-bottom: 22px;
}
html[lang="zh-TW"]
  .team-main
  .partner-card-items
  .partner-card
  .partner-card__body
  .partner-card__name {
  font-size: 46px;
}

.team-main
  .partner-card-items
  .partner-card
  .partner-card__body
  .partner-card__intro {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-top: 40px;
}
.team-main
  .partner-card-items
  .partner-card
  .partner-card__body
  .partner-card__intro
  strong {
  font-weight: 700;
}
.team-main
  .partner-card-items
  .partner-card
  .partner-card__body
  .partner-card__intro
  .ml-text {
  margin-left: 52px;
}

.team-main .partner-card-items .team-card {
  width: 100%;
  padding: 52px 0px 91px 30px;
  border-bottom: 1px solid #c8c8ca;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.team-main .partner-card-items .team-card:last-child {
  border-bottom: none;
}
@media (max-width: 768px) {
  .team-main .partner-card-items .team-card {
    padding: 32px 0px 64px 0px;
    flex-direction: column;
    align-items: start;
    gap: 40px;
  }
}
@media (max-width: 525px) {
  .team-main .partner-card-items .team-card {
    padding: 24px 8px;
    flex-direction: column;
    align-items: start;
    gap: 24px;
  }
  .team-main .partner-card-items > article.team-card:first-of-type {
    margin-top: 36px;
  }
  .team-main .partner-card-items .team-card:last-child {
    border-bottom: 1px solid #c8c8ca;
  }
  html[lang="zh-TW"] .team-main .partner-card-items .team-card:last-child {
    border-bottom: none;
  }
}

.team-main .partner-card-items .team-card .team-card__title {
  flex: 0.68;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
html[lang="zh-TW"] .team-main .partner-card-items .team-card .team-card__title {
  flex: 0.655;
}
@media (min-width: 1921px) {
  .team-main .partner-card-items .team-card .team-card__title {
    flex: 0.64;
  }
  html[lang="zh-TW"]
    .team-main
    .partner-card-items
    .team-card
    .team-card__title {
    flex: 0.61;
  }
}
@media (max-width: 525px) {
  .team-main .partner-card-items .team-card .team-card__title {
    color: var(--Dark-BG, #363130);
    font-size: var(--Font-Size-H5, 24px);
    line-height: 140%;
  }
}

.team-main .partner-card-items .team-card .team-card__desc {
  flex: 1;
  color: #e82c2c;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 525px) {
  .team-main .partner-card-items .team-card .team-card__desc {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

@media (max-width: 768px) {
  .partner-card-wrap .partner-card[hidden],
  .partner-card-wrap .mb-partner-card[hidden] {
    display: none !important;
  }
}

/* 可選：展開時讓區塊更順眼一點 */
.partner-card-wrap .partner-card {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Architecture Design */

.architecture-design-main {
  width: 100%;
}

.architecture-design-main .header-bg {
  background: var(--Main-Bg, #f6f4f4);
  border-radius: 0 0 60px 60px;
}
@media (max-width: 768px) {
  .architecture-design-main .header-bg {
    border-radius: 0;
  }
}
.architecture-design-main .header {
  width: 100%;
  padding: 147px 7.813% 0px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
html[lang="zh-TW"] .architecture-design-main .header {
  padding: 168px 7.813% 68px 7.813%;
}
@media (min-width: 1921px) {
  .architecture-design-main .header {
    padding: 147px 150px 0px 150px;
  }
  html[lang="zh-TW"] .architecture-design-main .header {
    padding: 168px 150px 68px 150px;
  }
}
@media (max-width: 768px) {
  .architecture-design-main .header {
    padding: 134px 8px 56px 8px;
    border-radius: 0;
  }
  html[lang="zh-TW"] .architecture-design-main .header {
    padding: 138px 8px 32px 8px;
  }
}

html[lang="zh-TW"] .architecture-design-main .header .title-block {
  display: flex;
  align-items: center;
  gap: 54px;
}
.architecture-design-main .header .main-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 122px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
html[lang="zh-TW"] .architecture-design-main .header .main-title {
  font-family: "Noto Sans TC";
  font-size: 100px;
  white-space: nowrap;
}
@media (max-width: 1480px) {
  .architecture-design-main .header .main-title {
    font-size: 100px;
  }
}
@media (max-width: 1024px) {
  .architecture-design-main .header .main-title {
    font-size: 80px;
  }
  html[lang="zh-TW"] .architecture-design-main .header .main-title {
    padding: 0 8px;
    font-size: 72px;
  }
}
@media (max-width: 900px) {
  .architecture-design-main .header .main-title {
    font-size: 72px;
  }
}
@media (max-width: 768px) {
  .architecture-design-main .header .main-title {
    font-size: 80px;
  }
}
@media (max-width: 525px) {
  .architecture-design-main .header .main-title {
    font-size: 36px;
    line-height: 140%;
    letter-spacing: 0.25px;

    padding-left: 8px;
  }

  .architecture-design-main .header .hero {
    height: 303px;
    width: 100%;
    border-radius: 18px;
  }
  .architecture-design-main .header .hero img {
    height: 303px;
    width: 100%;
    border-radius: 18px;
  }
  html[lang="zh-TW"] .architecture-design-main .header .main-title {
    font-size: 36px;
  }
}
.architecture-design-main .header .zh-line {
  display: none;
}
html[lang="zh-TW"] .architecture-design-main .header .zh-line {
  display: block;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .architecture-design-main .header .zh-line {
    display: none;
  }
}
.architecture-design-main .header .subtitle {
  display: none;
}
html[lang="zh-TW"] .architecture-design-main .header .subtitle {
  display: block;
  width: auto;

  color: var(--Headlines, #13120c);
  font-family: "Noto Sans TC";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1px;
}
@media (max-width: 1680px) {
  html[lang="zh-TW"] .architecture-design-main .header .subtitle {
    width: auto;
  }
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .architecture-design-main .header .subtitle {
    display: none;
  }
}

.architecture-design-main .header .header-items {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 77px 6.25% 88px 6.25%;
}
html[lang="zh-TW"] .architecture-design-main .header .header-items {
  gap: 105px;
  padding: 77px 6.25% 49px 6.25%;
}
@media (max-width: 525px) {
  .architecture-design-main .header .header-items {
    gap: 36px;
    padding: 40px 0px 24px 0px;
  }
  html[lang="zh-TW"] .architecture-design-main .header .header-items {
    gap: 36px;
    padding: 38px 0px 24px 0px;
  }
}

.architecture-design-main .header .header-items .header-items__desc.pc {
  display: block;
}
.architecture-design-main .header .header-items .header-items__desc.mb {
  display: none;
}
@media (max-width: 890px) {
  .architecture-design-main .header .header-items .header-items__desc.pc {
    display: none;
  }
  .architecture-design-main .header .header-items .header-items__desc.mb {
    display: block;
  }
}
.architecture-design-main .header .header-items .header-items__desc {
  color: var(--Headlines, #13120c);
  text-align: center;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 29px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
@media (max-width: 1870px) {
  .architecture-design-main .header .header-items .header-items__desc {
    font-size: 25px;
  }
}
@media (max-width: 1620px) {
  .architecture-design-main .header .header-items .header-items__desc {
    font-size: 22px;
  }
}
@media (max-width: 1420px) {
  .architecture-design-main .header .header-items .header-items__desc {
    font-size: 20px;
  }
}
@media (max-width: 1300px) {
  .architecture-design-main .header .header-items .header-items__desc {
    font-size: 18px;
  }
}
@media (max-width: 1180px) {
  .architecture-design-main .header .header-items .header-items__desc {
    font-size: 16px;
  }
}
@media (max-width: 1040px) {
  .architecture-design-main .header .header-items .header-items__desc {
    font-size: 14px;
  }
}
@media (max-width: 910px) {
  .architecture-design-main .header .header-items .header-items__desc {
    font-size: 12px;
  }
}
@media (max-width: 800px) {
  .architecture-design-main .header .header-items .header-items__desc {
    font-size: 11px;
  }
}
html[lang="zh-TW"]
  .architecture-design-main
  .header
  .header-items
  .header-items__desc {
  line-height: 150%;
  font-size: 34px;
}
@media (max-width: 1890px) {
  html[lang="zh-TW"]
    .architecture-design-main
    .header
    .header-items
    .header-items__desc {
    font-size: 32px;
  }
}
@media (max-width: 1760px) {
  html[lang="zh-TW"]
    .architecture-design-main
    .header
    .header-items
    .header-items__desc {
    font-size: 30px;
  }
}
@media (max-width: 1650px) {
  html[lang="zh-TW"]
    .architecture-design-main
    .header
    .header-items
    .header-items__desc {
    font-size: 28px;
  }
}
@media (max-width: 1540px) {
  html[lang="zh-TW"]
    .architecture-design-main
    .header
    .header-items
    .header-items__desc {
    font-size: 25px;
  }
}
@media (max-width: 1385px) {
  html[lang="zh-TW"]
    .architecture-design-main
    .header
    .header-items
    .header-items__desc {
    font-size: 22px;
  }
}
@media (max-width: 1220px) {
  html[lang="zh-TW"]
    .architecture-design-main
    .header
    .header-items
    .header-items__desc {
    font-size: 20px;
  }
}
@media (max-width: 1110px) {
  html[lang="zh-TW"]
    .architecture-design-main
    .header
    .header-items
    .header-items__desc {
    font-size: 18px;
  }
}
@media (max-width: 1000px) {
  html[lang="zh-TW"]
    .architecture-design-main
    .header
    .header-items
    .header-items__desc {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .architecture-design-main .header .header-items .header-items__desc {
    color: var(--Body-text, #484740);
    text-align: center;
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.5px;
  }
}
@media (max-width: 525px) {
  .architecture-design-main .header .header-items .header-items__desc {
    font-size: var(--Font-Size-Body-1, 16px);
  }
  html[lang="zh-TW"]
    .architecture-design-main
    .header
    .header-items
    .header-items__desc {
    font-size: 16px;
    line-height: 140%;
    padding: 0 8px;
  }
}

.architecture-design-main .header .header-items .header-items__images {
  width: 84%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 1440px) {
  .architecture-design-main .header .header-items .header-items__images {
    width: 100%;
  }
}
@media (max-width: 525px) {
  .architecture-design-main .header .header-items .header-items__images {
    margin-bottom: 16px;
  }
}

.architecture-design-main .header .header-items .header-items__images img {
  width: 322px;
  aspect-ratio: 1 / 1;
}
@media (max-width: 1440px) {
  .architecture-design-main .header .header-items .header-items__images img {
    width: 262px;
  }
}
@media (max-width: 1024px) {
  .architecture-design-main .header .header-items .header-items__images img {
    width: 202px;
  }
}
@media (max-width: 768px) {
  .architecture-design-main .header .header-items .header-items__images img {
    width: 152px;
  }
}
@media (max-width: 525px) {
  .architecture-design-main .header .header-items .header-items__images img {
    width: 120px;
  }
}
@media (max-width: 365px) {
  .architecture-design-main .header .header-items .header-items__images img {
    width: 90px;
  }
}

.architecture-design-main .process-bg {
  background: white;
}
.architecture-design-main .process {
  width: 100%;
  padding: 30px 37px 100px 60px;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .architecture-design-main .process {
    padding: 30px 150px 100px 150px;
  }
}
@media (max-width: 525px) {
  .architecture-design-main .process {
    padding: 16px 8px;
  }
}

.architecture-design-main .process .type {
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 525px) {
  .architecture-design-main .process .type {
    padding: 0 4px;

    gap: 32px;
    font-size: var(--Font-Size-Body-1, 16px);
    letter-spacing: 0.5px;
  }
}

.architecture-design-main .process .type .nagetive {
  cursor: pointer;
  opacity: 0.4;
}
.architecture-design-main .process .type .nagetive:hover {
  opacity: 0.6;
}

.architecture-design-main .process .type .active {
  opacity: 1;
  cursor: pointer;
}

.architecture-design-main .process .title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  margin-top: 84px;
  margin-bottom: 120px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;

  white-space: nowrap;
}
html[lang="zh-TW"] .architecture-design-main .process .title {
  margin-top: 178px;
  margin-bottom: 118px;
  font-size: 17px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 3px;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .architecture-design-main .process .title {
    margin-top: 78px;
    margin-bottom: 32px;
  }
}
.architecture-design-main .process .title svg {
  display: none;
}
@media (max-width: 900px) {
  .architecture-design-main .process .title {
    margin-top: 78px;
    margin-bottom: 32px;
    justify-content: space-between;
  }
  .architecture-design-main .process .title svg {
    display: block;
    width: 100%;
  }
}

.architecture-design-main .process .main-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 650px;
  width: 650px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .architecture-design-main .process .main-image {
    display: none;
  }
}

.architecture-design-main .process .main-image .process-circle {
  width: 670px;
  height: 670px;
  aspect-ratio: 1/1;
}

.architecture-design-main .process .main-image .icon {
  position: absolute;
  transition: all 0.15s ease-in-out;
  display: flex;
  flex-direction: column;
}
.architecture-design-main .process .main-image .icon a {
  display: flex;
  justify-content: center;
}
.architecture-design-main .process .main-image .icon a img {
  width: 100px;
  height: 100px;
}
.architecture-design-main .process .main-image .icon .icon-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 19.2px;
  font-style: normal;
  font-weight: 700;
  line-height: 33.6px;
  text-align: center;
}
.architecture-design-main .process .main-image .icon.icon8 .icon-title {
  font-size: var(--Font-Size-Body-1, 16px);
  /* font-weight: 400; */
  line-height: 140%;
  letter-spacing: 0.5px;
}
html[lang="zh-TW"]
  .architecture-design-main
  .process
  .main-image
  .icon.icon8
  .icon-title {
  font-size: 17px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1px;
  text-align: left;
}
html[lang="zh-TW"]
  .architecture-design-main
  .process
  .main-image
  .icon.icon8
  .icon-title
  h3 {
  font-size: 34px;
  /* font-weight: 400; */
  line-height: 150%;
  letter-spacing: 1px;
}
.architecture-design-main .process .main-image .icon:hover a {
  opacity: 0.6;
}
.architecture-design-main .process .main-image .icon1 {
  top: -9%;
  left: 41%;
}
.architecture-design-main .process .main-image .icon2 {
  top: 7%;
  right: 3%;
}
.architecture-design-main .process .main-image .icon3 {
  top: 45%;
  right: -10%;
}
.architecture-design-main .process .main-image .icon4 {
  bottom: -5%;
  right: 17%;
}
.architecture-design-main .process .main-image .icon5 {
  bottom: -5%;
  left: 9%;
}
.architecture-design-main .process .main-image .icon6 {
  top: 45%;
  left: -10%;
}
.architecture-design-main .process .main-image .icon7 {
  top: 7%;
  left: 5%;
}

html[lang="zh-TW"] .architecture-design-main .process .main-image .icon1 {
  top: -9%;
  left: 42.5%;
}
html[lang="zh-TW"] .architecture-design-main .process .main-image .icon2 {
  top: 5%;
  right: 6%;
}
html[lang="zh-TW"] .architecture-design-main .process .main-image .icon3 {
  top: 45%;
  right: -14%;
}
html[lang="zh-TW"] .architecture-design-main .process .main-image .icon4 {
  bottom: -7.5%;
  right: 16%;
}
html[lang="zh-TW"] .architecture-design-main .process .main-image .icon5 {
  bottom: -7.5%;
  left: 11%;
}
html[lang="zh-TW"] .architecture-design-main .process .main-image .icon6 {
  top: 45%;
  left: -8.5%;
}
html[lang="zh-TW"] .architecture-design-main .process .main-image .icon7 {
  top: 5%;
  left: 6%;
}

.architecture-design-main .process .process-stage-items {
  width: 100%;
  margin-bottom: 100px;
  margin-top: 168px;
  position: relative;
  display: flex;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .architecture-design-main .process .process-stage-items {
    display: none;
  }
}

.architecture-design-main .process .process-stage-items .process-stages {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 25%;
}
@media (max-width: 1024px) {
  .architecture-design-main .process .process-stage-items .process-stages {
    margin-left: 0;
  }
}

.architecture-design-main .process .process-stage-items .process-stage {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  gap: 30px;
  padding-top: 200px;
  position: relative;
}
html[lang="zh-TW"]
  .architecture-design-main
  .process
  .process-stage-items
  .process-stage {
  padding-top: 199px;
}
@media (max-width: 1024px) {
  .architecture-design-main .process .process-stage-items .process-stage {
    padding-top: 120px;
    gap: 12px;
  }
}

.architecture-design-main .process .process-stage-items .process-stage .left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.process .process-stage-items .process-stage#stage-2 .right {
  --image-line-h: 100vh !important;
}
.process .process-stage-items .process-stage .right {
  position: relative;
  /* padding-right: 2.5%; */
  display: flex;
  justify-content: flex-end;
  gap: 110px;
  min-height: var(--image-line-h, 1px);
  overflow: visible;
}
@media (max-width: 1024px) {
  .process .process-stage-items .process-stage .right {
    gap: 0px;
    padding-right: 0;
    max-width: 45%;
  }
}

/* 零尺寸 sticky 錨點 */
.right .il-anchor {
  position: sticky;
  top: 5vh;
  width: 0;
  height: 1px;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

/* 真正內容：絕對定位到右側，尺寸你自己控制 */
.right .il-anchor .il-canvas {
  position: absolute;
  right: 2.5%;
  top: 0; /* 以錨點為 0,0；往下位移就加 translateY */
  /* transform: translateY(-215px); */
  pointer-events: auto; /* 內容要能點到 */
  display: flex;
  gap: 100px;
}
@media (max-width: 1750px) {
  .right .il-anchor .il-canvas {
    gap: 12px;
  }
}
@media (max-width: 1024px) {
  .right .il-anchor .il-canvas {
    top: -200px;
  }
}

.right .il-canvas .image-line {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* 專門負責黏住的外層 */
.process .process-stage-items .process-stage .right .li-stick-wrap {
  position: sticky;
  top: var(--il-top, 25vh); /* 先給預設 25vh；JS 會寫更精準的值 */
  right: 2.5%;
  align-self: flex-end; /* 與右邊對齊，保留你的視覺位置 */
  display: flex;
  gap: 120px; /* 兩條圖列之間的距離 */
}

.process .process-stage-items .process-stage .right .image-line.image-line-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 36px;
  /* position: absolute;
  top: 10%;
  right: 2.5%; */
}
@media (max-width: 1440px) {
  .process .process-stage-items .process-stage .right .image-line.image-line-2 {
    display: none;
  }
}

.process .process-stage-items .process-stage .right .image-line.image-line-1 {
  display: flex;
  flex-direction: column;
  /* justify-content: center;
  align-items: center; */
  margin-top: 135px;
}

.process-stage .right .image-line .image-line__item {
  opacity: 0.05;
  transition: opacity 0.5s ease;
}
.process-stage .right .image-line .image-line__item.is-active {
  opacity: 1;
  z-index: 10;
}

.architecture-design-main
  .process
  .process-stage-items
  .process-stage
  .right
  .image-line.image-line-1
  .image-line__item {
  margin-top: -120px;
  max-width: 360px;
  aspect-ratio: 1 / 1;
}
@media (max-width: 1600px) {
  .architecture-design-main
    .process
    .process-stage-items
    .process-stage
    .right
    .image-line.image-line-1
    .image-line__item {
    margin-top: -60px;
  }
}

.architecture-design-main
  .process
  .process-stage-items
  .process-stage
  .right
  .image-line.image-line-1
  .image-line__item:first-child {
  z-index: 4;
}

.architecture-design-main
  .process
  .process-stage-items
  .process-stage
  .right
  .image-line.image-line-1
  .image-line__item:nth-child(2) {
  z-index: 3;
}
.architecture-design-main
  .process
  .process-stage-items
  .process-stage
  .right
  .image-line.image-line-1
  .image-line__item:nth-child(3) {
  z-index: 2;
}

.architecture-design-main .process .process-stage-items .process-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.architecture-design-main
  .process
  .process-stage-items
  .process-stage:first-child
  .process-header,
.architecture-design-main
  .process
  .process-stage-items
  .process-stage:nth-child(2)
  .process-header,
.architecture-design-main
  .process
  .process-stage-items
  .process-stage:nth-child(3)
  .process-header {
  margin-bottom: 160px;
}
html[lang="zh-TW"]
  .architecture-design-main
  .process
  .process-stage-items
  .process-stage:first-child
  .process-header,
html[lang="zh-TW"]
  .architecture-design-main
  .process
  .process-stage-items
  .process-stage:nth-child(2)
  .process-header,
html[lang="zh-TW"]
  .architecture-design-main
  .process
  .process-stage-items
  .process-stage:nth-child(3)
  .process-header {
  margin-bottom: 90px;
}
@media (max-width: 1024px) {
  .architecture-design-main
    .process
    .process-stage-items
    .process-stage:first-child
    .process-header,
  .architecture-design-main
    .process
    .process-stage-items
    .process-stage:nth-child(2)
    .process-header,
  .architecture-design-main
    .process
    .process-stage-items
    .process-stage:nth-child(3)
    .process-header {
    margin-bottom: 50px;
  }
}

.architecture-design-main
  .process
  .process-stage-items
  .process-header
  .process-stage__stage {
  width: 109px;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;

  white-space: nowrap;
}
html[lang="zh-TW"]
  .architecture-design-main
  .process
  .process-stage-items
  .process-header
  .process-stage__stage {
  font-size: 17px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 3px;
}

.architecture-design-main
  .process
  .process-stage-items
  .process-header
  .process-stage__title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.75px;
  margin-bottom: 30px;
}
@media (max-width: 1440px) {
  .architecture-design-main
    .process
    .process-stage-items
    .process-header
    .process-stage__title {
    font-size: 60px;
  }
}
@media (max-width: 1024px) {
  .architecture-design-main
    .process
    .process-stage-items
    .process-header
    .process-stage__title {
    font-size: 48px;
  }
}

.architecture-design-main .process .process-stage-items .process-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  margin-bottom: 160px;
  /* margin-top: 30px; */
}
html[lang="zh-TW"]
  .architecture-design-main
  .process
  .process-stage-items
  .process-detail {
  margin-bottom: 51px;
  gap: 16px;
}
@media (max-width: 1024px) {
  .architecture-design-main .process .process-stage-items .process-detail {
    margin-bottom: 40px;
  }
}

.architecture-design-main
  .process
  .process-stage-items
  .process-detail
  .process-detail__title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H4, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}

.architecture-design-main
  .process
  .process-stage-items
  .process-detail
  .process-detail__desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  width: 100%;
  max-width: 580px;

  z-index: 10;
}
html[lang="zh-TW"]
  .architecture-design-main
  .process
  .process-stage-items
  .process-detail
  .process-detail__desc {
  font-size: 17px;
  line-height: 150%;
  letter-spacing: 0px;
  text-align: justify;
}
html[lang="zh-TW"]
  .architecture-design-main
  .process
  .process-stage-items
  .process-detail
  .process-detail__desc.pc {
  display: block;
}
html[lang="zh-TW"]
  .architecture-design-main
  .process
  .process-stage-items
  .process-detail
  .process-detail__desc.mb {
  display: none;
}
@media (max-width: 1660px) {
  html[lang="zh-TW"]
    .architecture-design-main
    .process
    .process-stage-items
    .process-detail
    .process-detail__desc.pc {
    display: none;
  }
  html[lang="zh-TW"]
    .architecture-design-main
    .process
    .process-stage-items
    .process-detail
    .process-detail__desc.mb {
    display: block;
  }
}

/* 外層：右側內容維持全寬，不被左邊擠壓 */
.process-stage-items {
  position: relative;
  overflow: visible;
}

/* 零寬 sticky 覆蓋層：不佔空間、但能黏在視窗 */
.process-dial-stick {
  position: sticky;
  top: 25vh;
  width: 0;
  height: 1px;
  pointer-events: none;
  z-index: 1;
  min-height: 1px;
  overflow: visible;
  display: block;
}

/* 當到達底部時，JS 會加上 is-bottom → 改成貼在 .process 底 */
.process-dial-stick.is-bottom {
  position: absolute; /* 退出 sticky */
  top: calc(100% - var(--dial-h, 0px)); /* 鎖到底（減去轉盤高度） */
  left: var(--abs-left, 0px); /* 保持原本水平位置 */
}

/* 盤本體：給尺寸，並用 transform 把它推到視窗內側
   （負值向左推，可讓左側超出畫面；超出視窗自然被隱藏） */
.process-dial {
  --spin-ms: 700ms; /* 轉動時間 */
  --spin-ease: cubic-bezier(0.22, 1, 0.36, 1); /* 手感佳的 ease-out */
  --dial-angle: 0deg; /* JS 會動態改 */
  --r: 325px;
  position: relative;
  width: 650px;
  aspect-ratio: 1 / 1;
  transform: translateX(-84%);
}
@media (max-width: 1024px) {
  .process-dial {
    display: none;
  }
}

.process-dial::before {
  content: "";
  width: 100%;
  height: 135%;
  background-color: #fff;
  z-index: 2;
  display: block;
  position: absolute;
  top: -100px;
  left: -170px;
}

/* 外圈跟節點（沿用你的） */
.process-dial .dial-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(var(--dial-angle));
  transform-origin: 50% 50%;
  pointer-events: none;
  transition: transform var(--spin-ms) var(--spin-ease);
  will-change: transform;
}
/* 整個節點繞圓轉動 */
.process-dial .dial-item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
    rotate(calc(var(--a) * 1deg + var(--dial-angle)))
    translate(0, calc(-1 * var(--r)));
  transform-origin: 50% 50%;
  transition: transform var(--spin-ms) var(--spin-ease);
  will-change: transform;
}

/* item-content：保持整體朝上（防倒轉） */
.process-dial .dial-item .item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(calc(-1 * (var(--a) * 1deg + var(--dial-angle))));
  transform-origin: center;
  text-align: center;
}
.process-dial .dial-item .item-content span {
  margin-top: 12px;

  color: var(--Dark-BG, #363130);
  text-align: center;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}

/* icon 不跟著 item-content 一起反轉 */
.process-dial .dial-item .item-content svg {
  transform: none !important;
}

.architecture-design-main {
  overflow: visible !important;
  transform: none !important;
}

/* 右側欄（與左側流程內容同高同捲） */
.side-rail-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20vh; /* 控制各張圖出現的間距/時機 */
}

/* 每張圖自己 sticky 在同一高度 */
.side-sticky {
  position: sticky;
  top: 25vh; /* 黏住高度 */
  margin: 0;
  align-self: flex-end; /* 貼齊右側 */
  transform: translateX(calc(var(--rail-x, 0) * -1)); /* 推到內容區外 */
  pointer-events: none;
}

.side-sticky img {
  width: 149px; /* 個別調整尺寸 */
  height: auto;
  object-fit: contain;
}

/* 同做法 A 的 rail-x 計算 */
:root {
  --content-max: 1200px;
  --rail-gap: 40px;
}
@media (min-width: 1280px) {
  .side-rail-col {
    --rail-x: calc((100vw - var(--content-max)) / 2 - var(--rail-gap));
  }
}
@media (max-width: 1279px) {
  .side-rail-col {
    --rail-x: -16px;
  } /* 負值表示往左退進內容裡一點 */
}

.architecture-design-main
  .process
  .process-stage-items
  .process-stage
  .right
  .process-stage__image {
  max-width: 508px;
  max-height: 361px;
  aspect-ratio: 508 / 361;
}
@media (max-width: 1440px) {
  .architecture-design-main
    .process
    .process-stage-items
    .process-stage
    .right
    .process-stage__image {
    max-width: 408px;
    max-height: 261px;
  }
}

.architecture-design-main
  .process
  .process-stage-items
  .process-stage
  .right
  .process-stage__image
  img {
  opacity: 0;
  border-radius: 24px;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

/* 當進入畫面時加上 .is-visible */
.architecture-design-main
  .process
  .process-stage-items
  .process-stage
  .right
  .process-stage__image.is-visible
  img {
  opacity: 1;
  transform: translateY(0);
}

.process-stages .image-line__item > img {
  width: auto;
  height: auto;
  max-width: 360px;
  max-height: 360px;
  object-fit: contain !important;
}
@media (max-width: 1600px) {
  .process-stages .image-line__item > img {
    max-width: 210px;
    max-height: 210px;
  }
}
@media (max-width: 1440px) {
  .process-stages .image-line__item > img {
    max-width: 280px;
    max-height: 280px;
  }
}

.architecture-design-main .process .process-stage-items_mobile {
  display: none;
}
@media (max-width: 900px) {
  .architecture-design-main .process .process-stage-items_mobile {
    display: block;
  }
  .process-stage-items_mobile .process-stage-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .process-stage-items_mobile .process-stage-wrap .stage-item {
    display: flex;
    width: 100%;
    padding: 24px 8px 0 8px;
    flex-direction: column;
    align-items: center;
    gap: 32px;

    border-bottom: 0.5px solid var(--Lines, #c8c8ca);
  }
  .process-stage-items_mobile .process-stage-wrap .stage-item.is-open {
    padding-bottom: 24px;
  }
  .process-stage-items_mobile .process-stage-wrap .stage-item .title-block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    align-self: stretch;
    cursor: pointer;
  }
  .process-stage-items_mobile
    .process-stage-wrap
    .stage-item
    .title-block
    .mobile-title-icon {
    width: 36px;
    height: 36px;
  }
  .process-stage-items_mobile
    .process-stage-wrap
    .stage-item
    .title-block
    .stage-title {
    flex: 1 0 0;

    color: var(--Dark-BG, #363130);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: var(--Font-Size-H5, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    display: flex;
    gap: 8px;
  }
  .process-stage-items_mobile
    .process-stage-wrap
    .stage-item
    .title-block
    .stage-mobile-icon {
    display: flex;
    width: 33px;
    height: 34px;
    /* padding: 8.535px 7.799px 9.465px 8px; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .process-stage-items_mobile
    .process-stage-wrap
    .stage-item
    .title-block
    .stage-mobile-icon
    img {
    width: 17.2px;
    height: 16px;
  }
  .process-stage-items_mobile .process-stage-wrap .stage-item .detail {
    width: 100%;
    display: flex;
    padding-left: 56px;
    flex-direction: column;
    gap: 32px;
  }
  .process-stage-items_mobile .process-stage-wrap .stage-item .process-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    align-self: stretch;
  }
  .process-stage-items_mobile
    .process-stage-wrap
    .stage-item
    .detail
    .process-detail__title {
    color: var(--Dark-BG, #363130);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.15px;
  }
  .process-stage-items_mobile
    .process-stage-wrap
    .stage-item
    .detail
    .process-detail__desc {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;
  }

  /* icon 預設狀態：只顯示 default，隱藏 active */
  .process-stage-items_mobile .stage-item .mobile-icon.default {
    display: block;
  }
  .process-stage-items_mobile .stage-item .mobile-icon.active {
    display: none;
  }

  /* 當 stage-item 展開 (有 is-open) 時：顯示 active、隱藏 default */
  .process-stage-items_mobile .stage-item.is-open .mobile-icon.default {
    display: none;
  }
  .process-stage-items_mobile .stage-item.is-open .mobile-icon.active {
    display: block;
  }

  /* detail 手風琴動畫用 */
  .process-stage-items_mobile .stage-item .detail {
    overflow: hidden;
    max-height: 0; /* 搭配 JS 修改 */
    transition: max-height 0.3s ease;
  }
}

.architecture-design-main .architecture-design-bg {
  border-radius: 60px 60px 0 0;
  background: var(--Main-Bg, #f6f4f4);
}
.architecture-design-main .architecture-design {
  width: 100%;
  padding: 30px 7.813% 94.21px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .architecture-design-main .architecture-design {
    padding: 30px 150px 94.21px 150px;
  }
}
@media (max-width: 900px) {
  .architecture-design-main .architecture-design {
    border-radius: 0;
    background: var(--White, #fff);
  }
}
@media (max-width: 525px) {
  .architecture-design-main .architecture-design {
    border-radius: 0;
    padding: 15px 8px 40px 8px;
  }
}

.architecture-design-main .architecture-design .type {
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 525px) {
  .architecture-design-main .architecture-design .type {
    border-radius: 0;
    padding: 16px 4px;
    gap: 32px;
    font-size: var(--Font-Size-Body-1, 16px);
  }
}

.architecture-design-main .architecture-design .type .nagetive {
  cursor: pointer;
  opacity: 0.4;
}
.architecture-design-main .architecture-design .type .nagetive:hover {
  opacity: 0.6;
}

.architecture-design-main .architecture-design .type .active {
  opacity: 1;
  cursor: pointer;
}

.architecture-design-main .architecture-design .architecture-design-section {
  padding-left: 27%;
  padding-right: 1%;
  /* margin-bottom: 100px; */
  margin-top: 160px;
}
html[lang="zh-TW"]
  .architecture-design-main
  .architecture-design
  .architecture-design-section {
  padding-left: 22.5%;
  padding-right: 0%;
}
@media (max-width: 900px) {
  .architecture-design-main .architecture-design .architecture-design-section {
    padding: 0;
    margin-bottom: 0px;
    margin-top: 5px;
  }
}
@media (max-width: 575px) {
  html[lang="zh-TW"]
    .architecture-design-main
    .architecture-design
    .architecture-design-section {
    padding-left: 0%;
    padding-right: 0%;
  }
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 159px;
  max-width: 1190px;
}
@media (max-width: 525px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items {
    gap: 40px;
  }
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .arch-design-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 40px;
}
@media (max-width: 525px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item {
    gap: 32px;
  }
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .arch-design-item__title-block {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .arch-design-item__title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.75px;
}
@media (max-width: 768px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__title {
    padding: 0 8px;
  }
}
@media (max-width: 525px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__title {
    font-size: 36px;
    letter-spacing: 0px;
  }
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .arch-design-item__title-block
  .arch-design-item__title-icon {
  width: 34.67px;
  height: 33.25px;
}
@media (max-width: 900px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__title-block
    .arch-design-item__title-icon {
    width: 17.2px;
    height: 16px;
    object-fit: contain;
  }
  html[lang="zh-TW"]
    .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__title-block
    .arch-design-item__title-icon {
    display: none;
  }
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .svg-line {
  max-width: 100%;
}
@media (max-width: 768px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .svg-line {
    display: none;
  }
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .pc-line {
  width: 100%;
  margin-top: -40px;
}
@media (max-width: 900px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .pc-line {
    display: none;
  }
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .arch-design-item__desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}

@media (max-width: 768px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__desc {
    padding: 0 8px;
  }
}
@media (max-width: 525px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__desc {
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    letter-spacing: 0.25px;
  }
  html[lang="zh-TW"]
    .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__desc
    .mb-go {
    font-size: var(--Font-Size-H6, 20px);
    line-height: 140%;
    letter-spacing: 0.15px;
  }
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .arch-design-item__desc
  a:hover {
  text-decoration: underline;
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .arch-design-item__images {
  display: flex;
  width: 100%;
  max-height: 580px;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;

  margin-top: 80px;
}
html[lang="zh-TW"]
  .architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .arch-design-item__images {
  margin-top: 36px;
}
@media (max-width: 1440px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__images {
    gap: 15px;
  }
}
@media (max-width: 525px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__images {
    gap: 4px;
    margin-top: 7px;
  }
  html[lang="zh-TW"]
    .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__images {
    margin-top: 7px;
  }
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .arch-design-item__image {
  max-height: 580px;
  flex: 1;
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .arch-design-item__image
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-height: 580px;
  border-radius: 24px;

  aspect-ratio: 1 / 1;
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .more-btn {
  display: flex;
  width: 258px;
  padding: 21px;
  justify-content: center;
  align-items: center;
  border-radius: 56px;
  background: var(--Headlines, #13120c);
  margin-top: 19px;
}
html[lang="zh-TW"]
  .architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .more-btn {
  padding: 19.25px;
}
@media (max-width: 525px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .more-btn {
    width: 87.3%;
    margin: 0 auto;
  }
  html[lang="zh-TW"]
    .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .more-btn {
    padding: 18px;
  }
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .more-btn
  p {
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  width: 70%;
}
html[lang="zh-TW"]
  .architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .more-btn
  p {
  font-family: "Noto Sans TC";
  font-size: 22px;
  letter-spacing: 3px;
}
@media (max-width: 768px) {
  html[lang="zh-TW"]
    .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .more-btn
    p {
    font-size: 16px;
  }
}

/* Commercial */
.architecture-design-child-main-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.architecture-design-child-main {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.architecture-design-child-main .header {
  width: 100%;
  padding: 147px 7.813% 88px 7.813%;
}
@media (min-width: 1921px) {
  .architecture-design-child-main .header {
    padding: 147px 150px 88px 150px;
  }
}
@media (max-width: 1024px) {
  .architecture-design-child-main .header {
    padding-bottom: 60px;
  }
}
@media (max-width: 768px) {
  .architecture-design-child-main .header {
    padding: 138px 8px 43px 8px;
  }
}
@media (max-width: 525px) {
  .architecture-design-child-main .header {
    padding-bottom: 32px;
  }
}

.architecture-design-child-main .header .hero {
  border-radius: 24px;
}
.architecture-design-child-main .header .hero img {
  border-radius: 24px;
}
@media (max-width: 525px) {
  .architecture-design-child-main .header .bread {
    padding-top: 0;
    margin-top: -4px;
  }

  .architecture-design-child-main .header .hero {
    height: 240px;
    border-radius: 18px;
  }
  .architecture-design-child-main .header .hero img {
    height: 240px;
    border-radius: 18px;
  }
}

.architecture-design-child-main .header .main-content__title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 122px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
html[lang="zh-TW"]
  .architecture-design-child-main
  .header
  .main-content__title {
  font-size: 100px;
}
@media (max-width: 1480px) {
  .architecture-design-child-main .header .main-content__title {
    font-size: 100px;
  }
}
@media (max-width: 768px) {
  html[lang="zh-TW"]
    .architecture-design-child-main
    .header
    .main-content__title,
  .architecture-design-child-main .header .main-content__title {
    padding: 0 8px;
    font-size: 66px;
    letter-spacing: 0px;
  }
}
@media (max-width: 525px) {
  html[lang="zh-TW"]
    .architecture-design-child-main
    .header
    .main-content__title,
  .architecture-design-child-main .header .main-content__title {
    padding-top: 0;
    font-size: 36px;
  }
}

.architecture-design-child-main .header .main-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 122px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}

.architecture-design-child-main .content {
  width: 100%;
  padding: 0 7.813% 68px 7.813%;
  display: flex;
  gap: 60px;
}
@media (min-width: 1921px) {
  .architecture-design-child-main .content {
    padding: 0 150px 68px 150px;
  }
}
@media (max-width: 1024px) {
  .architecture-design-child-main .content {
    flex-direction: column;
    padding: 0 7.813% 80px 7.813%;
  }
}
@media (max-width: 525px) {
  .architecture-design-child-main .content {
    padding: 0 8px 56px 8px;
  }
}

.architecture-design-child-main .content .side-list {
  position: sticky;
  top: 5%;
  left: 5%;

  max-height: 625px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 59px 0;
  border-top: 1px solid #c8c8ca;
  border-bottom: 1px solid #c8c8ca;
  gap: 30px;
}
@media (max-width: 1024px) {
  .architecture-design-child-main .content .side-list {
    display: none;
  }
}

.architecture-design-child-main .content .side-list .side-list__item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 149px;
  gap: 40px;
  flex-shrink: 0;
}

.architecture-design-child-main
  .content
  .side-list
  .side-list__item
  .side-list__image {
  width: 230px;
  height: 149px;
}

.architecture-design-child-main
  .content
  .side-list
  .side-list__item
  .side-list__image
  img {
  display: block;
  width: 230px;
  height: 149px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}

.architecture-design-child-main
  .content
  .side-list
  .side-list__item
  .side-list__title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 22px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

.architecture-design-child-main .content .main-content {
  flex: 2;
  padding-top: 60px;
}
@media (max-width: 525px) {
  .architecture-design-child-main .content .main-content {
    padding-top: 0;
    margin-bottom: 30px;
  }
}

.architecture-design-child-main .content .main-content .main-content__desc1.pc,
.architecture-design-child-main .content .main-content .main-content__desc2.pc {
  display: block;
}
.architecture-design-child-main .content .main-content .main-content__desc1.mb,
.architecture-design-child-main .content .main-content .main-content__desc2.mb {
  display: none;
}
@media (max-width: 768px) {
  .architecture-design-child-main
    .content
    .main-content
    .main-content__desc1.pc,
  .architecture-design-child-main
    .content
    .main-content
    .main-content__desc2.pc {
    display: none;
  }
  .architecture-design-child-main
    .content
    .main-content
    .main-content__desc1.mb,
  .architecture-design-child-main
    .content
    .main-content
    .main-content__desc2.mb {
    display: block;
  }
}
.architecture-design-child-main .content .main-content .main-content__desc1 {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 48px;
}
html[lang="zh-TW"]
  .architecture-design-child-main
  .content
  .main-content
  .main-content__desc1 {
  font-size: var(--Font-Size-H6, 20px);
}
@media (max-width: 768px) {
  .architecture-design-child-main .content .main-content .main-content__desc1 {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}
@media (max-width: 525px) {
  .architecture-design-child-main .content .main-content .main-content__desc1 {
    font-size: var(--Font-Size-Body-2, 14px);
    margin-bottom: 24px;
    padding: 0 8px;
  }
}

.architecture-design-child-main .content .main-content .main-content__image {
  width: 100%;
  margin-bottom: 74px;
}
@media (max-width: 525px) {
  .architecture-design-child-main .content .main-content .main-content__image {
    margin-bottom: 32px;
  }
}

.architecture-design-child-main
  .content
  .main-content
  .main-content__image
  img {
  width: 100%;
  height: 100%;
  max-width: 1190px;
  max-height: 962px;
  object-fit: contain;
  object-position: center;
  border-radius: 24px;
}

.architecture-design-child-main .content .main-content .main-content__subtitle {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  margin-bottom: 20px;
}
@media (max-width: 525px) {
  .architecture-design-child-main
    .content
    .main-content
    .main-content__subtitle {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-Body-1, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.5px;
    padding: 0 8px;
  }
}

.architecture-design-child-main .content .main-content .main-content__desc2 {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 108px;
}
html[lang="zh-TW"]
  .architecture-design-child-main
  .content
  .main-content
  .main-content__desc2 {
  font-size: 20px;
  margin-bottom: 68px;
}
@media (max-width: 525px) {
  .architecture-design-child-main .content .main-content .main-content__desc2 {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;
    margin-bottom: 24px;
    padding: 0 8px;
  }
  html[lang="zh-TW"]
    .architecture-design-child-main
    .content
    .main-content
    .main-content__desc1,
  html[lang="zh-TW"]
    .architecture-design-child-main
    .content
    .main-content
    .main-content__desc2 {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
    margin-bottom: 24px;
  }
}

.four-grid {
  display: grid;
  grid-template-columns: 1fr 204px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "main t1"
    "main t2"
    "main t3";
  gap: 8px 16px;
}
@media (min-width: 1920px) {
  .four-grid {
    grid-template-columns: 1fr 244px;
  }
}
@media (max-width: 1550px) {
  .four-grid {
    grid-template-columns: 1fr 164px;
  }
}
@media (max-width: 1024px) {
  .four-grid {
    grid-template-columns: 1fr 124px;
  }
}
@media (max-width: 525px) {
  .four-grid {
    display: none;
  }
}

.img {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-main {
  grid-area: main;
  /* aspect-ratio: 950 / 643; */
}

.img-t1 {
  grid-area: t1;
  aspect-ratio: 224 / 198;
}

.img-t2 {
  grid-area: t2;
  aspect-ratio: 224 / 198;
}

.img-t3 {
  grid-area: t3;
  aspect-ratio: 224 / 198;
}

.architecture-design-child-main .content .main-content .left-right-image-item {
  display: none;
}
@media (max-width: 525px) {
  .architecture-design-child-main
    .content
    .main-content
    .left-right-image-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
  }
  .architecture-design-child-main
    .content
    .main-content
    .left-right-image-item
    .left-image,
  .architecture-design-child-main
    .content
    .main-content
    .left-right-image-item
    .right-image {
    flex: 1;
  }
  .architecture-design-child-main
    .content
    .main-content
    .left-right-image-item
    .left-image
    img,
  .architecture-design-child-main
    .content
    .main-content
    .left-right-image-item
    .right-image
    img {
    height: 204px;
    border-radius: 24px;
  }
}

@media (max-width: 768px) {
  .architecture-design-child-main .resources {
    display: none;
  }
}

.related-projects {
  display: none;
}
@media (max-width: 768px) {
  /* 區塊外框 */
  .related-projects {
    width: 100%;
    display: block;
  }

  .related-projects .title {
    padding: 0 8px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    white-space: nowrap;
    margin-bottom: 16px;

    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;
  }

  .related-projects__inner {
    width: 100%;
    margin: 0 auto;
  }

  /* Swiper 容器本身 */
  .related-projects .swiper {
    width: 100%;
  }

  /* 讓每個 slide 高度由內容撐開，不要被 Swiper 預設影響 */
  .related-projects .swiper-slide {
    height: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .related-projects .swiper-slide > a {
    width: 100%;
  }
  /* 卡片本體 */
  .related-card {
    overflow: hidden;

    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    flex-shrink: 0;
    border-radius: 24px;
    background: var(--White, #fff);
    height: 432px;
  }

  /* 圖片區 */
  .related-card__image {
    position: relative;
    width: 100%;
    height: 303px;
    border-radius: 18px; /* 圓角給容器 */
    overflow: hidden; /* 超出就剪掉，確保弧線乾淨 */
  }
  .related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填滿 + 平均裁切 */
    border-radius: 0; /* ❗ 不要再多一層圓角 */
    display: block;
    object-position: bottom;
  }
  .works-single .main .related-card__image img {
    border-radius: 0;
  }
  .related-card__image svg {
    position: absolute;
    top: 16px;
    left: 16px;
  }

  /* 下方標題 + 箭頭 */
  .related-card_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 16px 16px;
    gap: 44px;
    align-self: stretch;
    min-height: 0px;
    margin: auto 0;
  }
  .related-card__title {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: var(--Font-Size-H6, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.15px;
  }

  .related-card_bottom a {
    display: inline-flex;
    align-items: center;
  }

  /* SVG 不要太大 */
  .related-card_bottom svg {
    width: 28px;
    height: 28px;
  }
}

/* Works Page*/
.works-main-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.works-main {
  width: 100%;
  padding: 115px 7.813% 68px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
html[lang="zh-TW"] .works-main {
  padding: 135px 7.813% 68px 7.813%;
}
@media (min-width: 1921px) {
  .works-main {
    padding: 115px 150px 68px 150px;
  }
  html[lang="zh-TW"] .works-main {
    padding: 135px 150px 68px 150px;
  }
}
@media (max-width: 525px) {
  .works-main {
    padding: 134px 8px 3px 8px;
  }
  html[lang="zh-TW"] .works-main {
    padding: 134px 8px 3px 8px;
  }
}

.works-main .header {
  width: 100%;
}
.tax-works-category .bread {
  padding-top: 50px;
  padding-bottom: 0;
}
.post-type-archive-works .bread {
  padding-top: 12px;
  padding-bottom: 53px;
}
html[lang="zh-TW"] .works-main .header .title-block {
  display: flex;
  align-items: center;
  gap: 54px;
}

.works-main .header .main-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 122px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
html[lang="zh-TW"] .works-main .header .main-title {
  font-family: "Noto Sans TC";
  font-size: 100px;

  white-space: nowrap;
}
@media (max-width: 1480px) {
  .works-main .header .main-title,
  html[lang="zh-TW"] .works-main .header .main-title {
    font-size: 78px;
  }
}
@media (max-width: 768px) {
  .works-main .header .main-title,
  html[lang="zh-TW"] .works-main .header .main-title {
    font-size: 66px;
    line-height: 140%;
    letter-spacing: 0.25px;

    padding: 0 8px;
  }
}
@media (max-width: 525px) {
  .works-main .header .main-title,
  html[lang="zh-TW"] .works-main .header .main-title {
    font-size: 36px;
  }
}
.works-main .header .zh-line {
  display: none;
}
html[lang="zh-TW"] .works-main .header .zh-line {
  display: block;
}
.works-main .header .subtitle {
  display: none;
}
html[lang="zh-TW"] .works-main .header .subtitle {
  display: block;

  color: var(--Headlines, #13120c);
  font-family: "Noto Sans TC";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1px;

  width: 16%;
}
@media (max-width: 1900px) {
  html[lang="zh-TW"] .works-main .header .subtitle {
    width: auto;
  }
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .works-main .header .subtitle {
    display: none;
  }
  html[lang="zh-TW"] .works-main .header .zh-line {
    display: none;
  }
}

@media (max-width: 600px) {
  .works-main .header .bread {
    padding-top: 0;
    padding-bottom: 33px;
    margin-top: -8px;
  }
}
@media (max-width: 475px) {
  html[lang="zh-TW"] .works-main .header .bread {
    padding-bottom: 0;
  }
}

.works-main .pinterest {
  width: 100%;
  margin-bottom: 68px;
}
@media (max-width: 1024px) {
  .works-main .pinterest {
    margin-bottom: 100px;
  }
}
@media (max-width: 600px) {
  .works-main .pinterest {
    margin-bottom: 19px;
  }
}

.works-main .pinterest .pinterest-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 21px;
}
html[lang="zh-TW"] .works-main .pinterest .pinterest-top {
  margin-bottom: 24px;
}
@media (max-width: 600px) {
  .works-main .pinterest .pinterest-top {
    margin-bottom: -12px;
  }
  html[lang="zh-TW"] .works-main .pinterest .pinterest-top {
    margin-top: 33px;
    margin-bottom: -12px;
  }
}

.works-main .pinterest .pinterest-top .type {
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 1024px) {
  .works-main .pinterest .pinterest-top .type {
    gap: 28px;
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  .works-main .pinterest .pinterest-top .type {
    width: 100%;
    gap: 0;
    justify-content: space-between;
    padding: 0 8px;

    font-size: var(--Font-Size-Body-2, 14px);
    line-height: 120%;
  }
}

@media (max-width: 475px) {
  #pinterestFilters .word-works {
    display: none;
  }
}

.works-main .pinterest .pinterest-top .type .nagetive {
  opacity: 0.6;
}

.works-main .pinterest .pinterest-top .type .nagetive:hover {
  opacity: 0.9;
}

.works-main .pinterest .pinterest-top .type .active {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 600px) {
  .works-main .pinterest .pinterest-top .type .active {
    font-weight: 700;
    transform: translateY(-3px);
  }
}

.works-main .pinterest .pinterest-top .mode {
  display: flex;
  align-items: flex-start;
  justify-content: end;
  gap: 32px;
}
html[lang="zh-TW"] .works-main .pinterest .pinterest-top .mode {
  gap: 13.8px;
  align-items: center;
}

.works-main .pinterest .pinterest-top .mode .zn-title {
  display: none;
}

html[lang="zh-TW"] .works-main .pinterest .pinterest-top .mode .zn-title {
  display: block;
  color: var(--Headlines, #13120c);
  font-family: "Noto Sans TC";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.15px;

  margin-right: 18px;
}

@media (max-width: 850px) {
  .works-main .pinterest .pinterest-top .mode {
    display: none;
  }
}

.works-main .pinterest .pinterest-top .mode .mode-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.works-main .pinterest .pinterest-top .mode .mode-item {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  line-height: 140%;
  letter-spacing: 0.15px;
}

html[lang="zh-TW"] .works-main .pinterest .pinterest-top .mode .switch-list,
html[lang="zh-TW"]
  .works-main
  .pinterest
  .pinterest-top
  .mode
  .switch-thumbnails {
  display: none;
}

/* 通用卡片 */
.pin-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}
@media (max-width: 768px) {
  .pin-card {
    border-radius: 18px;
  }
}

html[lang="zh-TW"] .pin-card:hover .pin {
  transform: translateY(-21%);
}
.pin-card:hover .pin {
  transform: translateY(-20%);
}
.pin-card:hover .pin-cap {
  opacity: 1;
}

.pin-card.is-long-text:hover .pin {
  transform: translateY(-27%);
}

.pin-card.height2:hover .pin {
  transform: translateY(-9.5%);
}
html[lang="zh-TW"] .pin-card.height2:hover .pin {
  transform: translateY(-10.5%);
}
.pin-card.height2.is-long-text:hover .pin {
  transform: translateY(-10.6%);
}
@media (max-width: 1680px) {
  .pin-card:hover .pin {
    transform: translateY(-22%);
  }
  html[lang="zh-TW"] .pin-card:hover .pin {
    transform: translateY(-23%);
  }
  .pin-card.is-long-text:hover .pin {
    transform: translateY(-30%);
  }
  html[lang="zh-TW"] .pin-card.height2:hover .pin {
    transform: translateY(-11%);
  }
}
@media (max-width: 1450px) {
  html[lang="zh-TW"] .pin-card:hover .pin {
    transform: translateY(-27%);
  }
  html[lang="zh-TW"] .pin-card.height2:hover .pin {
    transform: translateY(-13%);
  }
  .pin-card.height2:hover .pin {
    transform: translateY(-10.5%);
  }
  .pin-card.is-long-text:hover .pin {
    transform: translateY(-34%);
  }
}
@media (max-width: 1280px) {
  .pin-card:hover .pin {
    transform: translateY(-24%);
  }
  .pin-card.is-long-text:hover .pin {
    transform: translateY(-31%);
  }
  html[lang="zh-TW"] .pin-card:hover .pin {
    transform: translateY(-30%);
  }
  html[lang="zh-TW"] .pin-card.height2:hover .pin {
    transform: translateY(-14.5%);
  }
}

@media (max-width: 1033px) {
  .pin-card.height2:hover .pin {
    transform: translateY(-12.5%);
  }
}
@media (max-width: 900px) {
  .pin-card:hover .pin {
    transform: translateY(-25%);
  }
  html[lang="zh-TW"] .pin-card:hover .pin {
    transform: translateY(-26%);
  }
  html[lang="zh-TW"] .pin-card.height2:hover .pin {
    transform: translateY(-12.5%);
  }
}
@media (max-width: 830px) {
  .pin-card.is-long-text:hover .pin {
    transform: translateY(-41%);
  }
}
@media (max-width: 768px) {
  .pin-card.is-long-text:hover .pin {
    transform: translateY(-27%);
  }
  html[lang="zh-TW"] .pin-card.is-long-text:hover .pin {
    transform: translateY(-21%);
  }
}
@media (max-width: 600px) {
  html[lang="zh-TW"] .pin-card:hover .pin,
  .pin-card:hover .pin {
    transform: translateY(0%);
  }
  html[lang="zh-TW"] .pin-card.height2:hover .pin,
  .pin-card.height2:hover .pin {
    transform: translateY(0%);
  }
  html[lang="zh-TW"] .pin-card.is-long-text:hover .pin,
  .pin-card.is-long-text:hover .pin {
    transform: translateY(0%);
  }
}

.pin-card .pin {
  display: block;
  transition: transform 0.5s ease;
  border-radius: 24px;
  height: 100%;
}
.pin-card .pin .pin-img {
  height: 100%;
}

.pin-card .pin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  border-radius: 24px;
}
@media (max-width: 768px) {
  .pin-card .pin img {
    border-radius: 18px;
  }
}

.pin-cap {
  width: 100%;
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5s ease;

  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: 140%;
  letter-spacing: 0.15px;
  color: var(--Headlines, #13120c);
  padding: 16px;
}
html[lang="zh-TW"] .pin-cap {
  font-family: "Noto Sans TC";
  font-size: 24px;
  font-weight: 400;
  line-height: 150%; /* 36px */
  letter-spacing: 1px;
}
@media (max-width: 1280px) {
  .pin-cap,
  html[lang="zh-TW"] .pin-cap {
    font-size: 18px;
  }
}
@media (max-width: 900px) {
  .pin-cap,
  html[lang="zh-TW"] .pin-cap {
    font-size: 16px;
    padding: 0 16px;
  }
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .pin-cap {
    font-size: 16px;
  }
  .pin-card.is-long-text .pin-cap,
  html[lang="zh-TW"] .pin-card.is-long-text .pin-cap {
    font-size: 12px;
  }
}
@media (max-width: 600px) {
  .pin-cap,
  html[lang="zh-TW"] .pin-cap {
    opacity: 1;
    position: static;
    padding: 16px;
    gap: 16px;
    font-size: var(--Font-Size-H6, 20px);
    font-weight: 400;
  }
}

.pin-cap .left {
  display: flex;
  flex-direction: column;
}
.pin-cap a {
  width: 24px;
  height: 24px;
  padding-top: 2px;
}
@media (max-width: 600px) {
  .pin-cap .left .pin-cat {
    display: none;
  }
}

/* 兩欄/三欄佈局容器預設間距 */
.case {
  display: grid;
  gap: 30px;
  margin-block: 30px;
}
@media (max-width: 1440px) {
  .case {
    gap: 24px !important;
    margin-block: 24px;
  }
}
@media (max-width: 1024px) {
  .case {
    gap: 18px !important;
    margin-block: 18px;
  }
}
@media (max-width: 800px) {
  .case {
    gap: 12px !important;
    margin-block: 12px;
  }
}
@media (max-width: 600px) {
  .case {
    gap: 6px !important;
    margin-block: 6px;
  }
}

/* Left Right（左寬右短）left_right_1 */
.case-left-right-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三欄 */
  gap: 30px;
}

.case-left-right-1 .pin-left {
  grid-column: 1 / span 2; /* 佔左邊兩欄 */
}

.case-left-right-1 .pin-right {
  grid-column: 3; /* 右側整欄 */
}

/* Left Right（左短右寬）left_right_2 */

.case-left-right-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三欄 */
  gap: 30px;
}

.case-left-right-2 .pin-left {
  grid-column: 1 / span 1;
}
.case-left-right-2 .pin-right {
  grid-column: 2 / span 2; /* 或 2 / -1 */
}

/* Left1 Right3（左1長，右上2短、右下1寬）left1_right3_1 */
.case-left1-right3-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三欄 */
  grid-template-rows: repeat(2, auto); /* 兩列 */
  gap: 30px;
}

.case-left1-right3-1 .img1 {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* Left1 Right3（左1長，右上2短、右下1寬）left1_right3_1 */
.case-left1-right3-1-g-3x2 {
  --gap: 30px;
  --cols: 3;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);

  /* 單格高度 = 單格寬 * 477 / 520 */
  grid-auto-rows: calc(((100% - (var(--gap) * 2)) / 3) * 477 / 520);
}

/* 佔位 */
.case-left1-right3-1 .p-left {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.case-left1-right3-1 .p-rt1 {
  grid-column: 2;
  grid-row: 1;
}
.case-left1-right3-1 .p-rt2 {
  grid-column: 3;
  grid-row: 1;
}
.case-left1-right3-1 .p-rbottom {
  grid-column: 2 / span 2;
  grid-row: 2;
}

/* Left1 Right3（左1長，右上1寬、右下2短）left1_right3_2 */
.case-left1-right3-2.g-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/* 佔位： */
.case-left1-right3-2 .p-left {
  grid-column: 1;
  grid-row: 1 / span 2;
} /* 左整欄跨兩列 */
.case-left1-right3-2 .p-rtop {
  grid-column: 2 / span 2;
  grid-row: 1;
} /* 右上跨兩欄 */
.case-left1-right3-2 .p-rb1 {
  grid-column: 2;
  grid-row: 2;
} /* 右下左 */
.case-left1-right3-2 .p-rb2 {
  grid-column: 3;
  grid-row: 2;
} /* 右下右 */

/* Left3 Right1（左上 2 短、左下 1 寬；右 1 長）left3_right1_1 */
.case-left3-right1-1.g-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/* 佔位區 */
.case-left3-right1-1 .p-lt1 {
  grid-column: 1;
  grid-row: 1;
} /* 左上1 */
.case-left3-right1-1 .p-lt2 {
  grid-column: 2;
  grid-row: 1;
} /* 左上2 */
.case-left3-right1-1 .p-lbottom {
  grid-column: 1 / span 2;
  grid-row: 2;
} /* 左下橫跨兩欄 */
.case-left3-right1-1 .p-right {
  grid-column: 3;
  grid-row: 1 / span 2;
} /* 右整高 */

/* Left3 Right1_2（左上1寬、左下2短、右1長） */
.case-left3-right1-2.g-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/* 左上寬（跨兩欄） */
.case-left3-right1-2 .p-ltop {
  grid-column: 1 / span 2;
  grid-row: 1;
}

/* 左下1、左下2 */
.case-left3-right1-2 .p-lb1 {
  grid-column: 1;
  grid-row: 2;
}
.case-left3-right1-2 .p-lb2 {
  grid-column: 2;
  grid-row: 2;
}

/* 右側長圖（跨兩列） */
.case-left3-right1-2 .p-right {
  grid-column: 3;
  grid-row: 1 / span 2;
  gap: 30px;
}

/* Row3（3短橫排） */
.case-row3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Left1 Right4（左1長、右 4 短 2x2） */
.case-left1-right4.g-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/* 左一長 */
.case-left1-right4 .p-left {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* 右側四格（2×2） */
.case-left1-right4 .p-r1 {
  grid-column: 2;
  grid-row: 1;
}
.case-left1-right4 .p-r2 {
  grid-column: 3;
  grid-row: 1;
}
.case-left1-right4 .p-r3 {
  grid-column: 2;
  grid-row: 2;
}
.case-left1-right4 .p-r4 {
  grid-column: 3;
  grid-row: 2;
}

/* Left2 Middle1 Right2（左2短(直排) + 中1長 + 右2短(直排)） */
.case-left2-middle1-right2.g-5x2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/* 左兩小（直排） */
.case-left2-middle1-right2 .p-l1 {
  grid-column: 1;
  grid-row: 1;
}
.case-left2-middle1-right2 .p-l2 {
  grid-column: 1;
  grid-row: 2;
}

/* 中間高圖（跨兩列） */
.case-left2-middle1-right2 .p-mid {
  grid-column: 2 / span 3;
  grid-row: 1 / span 2;
}

/* 右兩小（直排） */
.case-left2-middle1-right2 .p-r1 {
  grid-column: 5;
  grid-row: 1;
}
.case-left2-middle1-right2 .p-r2 {
  grid-column: 5;
  grid-row: 2;
}

/* Left4 Right1（左 4 短 2x2、右 1 長 */
.case-left4-right1.g-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 左2 + 右1 */
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/* 左四（2x2） */
.case-left4-right1 .p-l1 {
  grid-column: 1;
  grid-row: 1;
}
.case-left4-right1 .p-l2 {
  grid-column: 2;
  grid-row: 1;
}
.case-left4-right1 .p-l3 {
  grid-column: 1;
  grid-row: 2;
}
.case-left4-right1 .p-l4 {
  grid-column: 2;
  grid-row: 2;
}

/* 右一長（跨兩列） */
.case-left4-right1 .p-right {
  grid-column: 3;
  grid-row: 1 / span 2;
}

/*  Left1 RightContact（左 1 寬、右 contact 卡） */

.case-left1-rightcontact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* 左圖 */
.case-left1-rightcontact .pin-left {
  grid-column: 1 / span 2;
}

/* 右 Contact 卡 */
.case-left1-rightcontact .contact-card {
  grid-column: 3;
}

.contact-card .pinterest-card {
  position: relative;
}

.contact-card .pinterest-card .contact-inner img {
  border-radius: 24px;
  /* max-height: 530px; */
}

.contact-card .pinterest-card .deco-dot {
  position: absolute;
  top: 16px;
  left: 16px;
}
@media (max-width: 1024px) {
  .contact-card .pinterest-card .deco-dot {
    top: 12px;
    left: 12px;
    width: 10px;
    height: 10px;
  }
}

.contact-card .pinterest-card .contact-text {
  position: absolute;
  top: 21%;
  left: 16px;
  color: var(--White, #fff);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.75px;
}
html[lang="zh-TW"] .contact-card .pinterest-card .contact-text {
  font-family: var(--Font-Family-Title, "Rethink Sans") !important;
}
@media (max-width: 1800px) {
  .contact-card .pinterest-card .contact-text {
    top: 20%;
  }
}
@media (max-width: 1600px) {
  .contact-card .pinterest-card .contact-text {
    font-size: 66px;
    top: 15%;
  }
}
@media (max-width: 1440px) {
  .contact-card .pinterest-card .contact-text {
    font-size: 50px;
  }
}
@media (max-width: 1220px) {
  .contact-card .pinterest-card .contact-text {
    font-size: 46px;
  }
}
@media (max-width: 1100px) {
  .contact-card .pinterest-card .contact-text {
    top: 19%;
    left: 12px;
    font-size: 38px;
  }
}
@media (max-width: 1024px) {
  .contact-card .pinterest-card .contact-text {
    font-size: 32px;
  }
}
@media (max-width: 800px) {
  .contact-card .pinterest-card .contact-text {
    top: 16%;
    font-size: 28px;
  }
}
@media (max-width: 660px) {
  .contact-card .pinterest-card .contact-text {
    top: 20%;
    font-size: 24px;
  }
}

.contact-card .pinterest-card .link {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  bottom: 11%;
  left: 16px;
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
@media (max-width: 1024px) {
  .contact-card .pinterest-card .link {
    left: 12px;
    bottom: 10%;
    font-size: 10px;
  }
  .contact-card .pinterest-card .link svg {
    width: 16px;
    height: 16px;
  }
}

/* LeftContact Right1（左 contact 卡、右 1 寬） */
.case-leftcontact-right1 {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 左窄右寬 */
  grid-template-rows: 1fr;
  gap: 24px;
}

/* 左 contact 卡 */
.case-leftcontact-right1 .contact-card {
  grid-column: 1 / span 1;
}

/* 右圖（寬） */
.case-leftcontact-right1 .pin-right {
  grid-column: 2 / span 2;
}

.pin-grid .pin svg {
  display: none;
}

.pin-grid .case.case-mobile-only {
  display: none;
}

.pin-grid-wrap--mobile {
  display: none;
}

@media (max-width: 600px) {
  .pin-grid-wrap--desktop {
    display: none;
  }

  .pin-grid-wrap--mobile {
    display: block;
  }
}
/* 手機版：把 Pinterest Grid 改成「單欄卡片列表」 */
@media (max-width: 600px) {
  .pin-grid {
    display: flex;
    width: 100%;
    padding-top: 13px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
  }

  .pin-grid .case {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .pin-grid .case.case-mobile-only {
    display: block;
  }

  .pin-grid .pin-card {
    width: 100%;
    height: auto;

    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    flex-shrink: 0;
    align-self: stretch;

    border-radius: 24px;
    background: var(--White, #fff);
  }

  .pin-grid .pinterest-item.contact-card {
    display: none;
  }

  /* 原本 height2 只是拉高兩格，手機不用固定高度 */
  .pin-grid .pin-card.height2 {
    height: auto;
  }

  /* 卡片裡圖片全寬，保持比例 */
  .pin-grid .pin {
    display: block;
    height: auto;
    width: 100%;
    position: relative;
  }
  .pin-grid .pin img {
    height: 331px;
  }
  .pin-grid .pin svg {
    display: block;
    position: absolute;
    top: 16px;
    left: 16px;
  }

  .pin-grid .p-left,
  .pin-grid .p-right,
  .pin-grid .p-l1,
  .pin-grid .p-l2,
  .pin-grid .p-l3,
  .pin-grid .p-l4,
  .pin-grid .p-r1,
  .pin-grid .p-r2,
  .pin-grid .p-r3,
  .pin-grid .p-r4,
  .pin-grid .p-ltop,
  .pin-grid .p-lbottom,
  .pin-grid .p-mid,
  .pin-grid .p-rt1,
  .pin-grid .p-rt2,
  .pin-grid .p-rbottom,
  .pin-grid .p-lt1,
  .pin-grid .p-lt2,
  .pin-grid .p-rb1,
  .pin-grid .p-rb2 {
    grid-area: auto;
    /* 如果原本有 position / top / left 可視情況也清掉 */
    position: static;
  }
}

/* mode按鈕 */
.mode .mode-item.is-active {
  opacity: 1;
  font-weight: 500;
}

.mode .mode-item:not(.is-active) {
  opacity: 0.6;
  font-weight: 400;
}

.mode .mode-item:not(.is-active):hover {
  opacity: 0.8;
}

@media (min-width: 768px) {
  .site .tax-works-main .pinterest .pinterest-top {
    display: none;
  }
}
/* ====== LIST 模式 ====== */
.pinterest-list.is-list {
  margin-bottom: 190px;
}
@media (max-width: 768px) {
  .pinterest-list.is-list {
    margin-bottom: 25px;
    padding: 0 8px;
  }
}

.pinterest-list.is-list .pin-list-head {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}

/* 每一列（用整張卡當一列） */
.pinterest-list.is-list .pin-list-row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  gap: 16px;
  padding: 12px 0;
  position: static !important;
  width: 100% !important;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #c8c8ca;
}

.pinterest-list.is-list .pin-list-row:last-child {
  border-bottom: none;
}

.pinterest-list.is-list .pin-list-row span {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  border-radius: 0px;
  box-shadow: none;
}
@media (max-width: 768px) {
  .pinterest-list.is-list .pin-list-row span {
    font-size: 16px;
  }
}

.pinterest-list.is-list .pin-list-head .th-status,
.pinterest-list.is-list .pin-list-row .td-status {
  text-align: end;
}

/* Contact 卡在 List 模式：顯示成一列（Name 欄顯示文字） */
.pinterest-list.is-list .pinterest-item.contact-card .pinterest-card {
  grid-template-columns: 140px 1fr 1fr 120px;
}
.pinterest-list.is-list .pinterest-item.contact-card .pinterest-cap {
  display: inline-block !important;
  grid-column: 2 / 3;
}

@media (max-width: 1024px) {
  .pinterest-list.is-list .pin-list-head,
  .pinterest-list.is-list .pin-list-row {
    grid-template-columns: 120px 1fr 1fr 120px; /* N° / Name / Year */
  }
}
@media (max-width: 768px) {
  .pinterest-list.is-list .pin-list-head,
  .pinterest-list.is-list .pin-list-row {
    grid-template-columns: 0.5fr 1fr 1fr 0.5fr; /* N° / Name / Year */
  }
}

.pinterest-list.is-list .pinterest-item .pinterest-card .contact-inner {
  position: absolute;
  top: 0;
  left: 0;
}

.pinterest-list.is-list .pinterest-item .pinterest-card .contact-text {
  color: var(--White, #fff);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 86.4px */
  letter-spacing: -0.75px;

  z-index: 10;
}

/* Careers Page */
.careers-main-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.careers-main {
  width: 100%;
  padding: 98px 7.813% 37px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
html[lang="zh-TW"] .careers-main {
  padding: 113px 7.813% 37px 7.813%;
}
@media (min-width: 1921px) {
  .careers-main {
    padding: 98px 150px 37px 150px;
  }
  html[lang="zh-TW"] .careers-main {
    padding: 113px 150px 37px 150px;
  }
}
@media (max-width: 1800px) {
  .careers-main {
    padding: 98px 7.813% 37px 7.813%;
  }
}
@media (max-width: 768px) {
  .careers-main {
    padding: 46px 8px 0px 8px;
  }
}
@media (max-width: 525px) {
  .careers-main {
    padding: 0px 8px;
  }
  html[lang="zh-TW"] .careers-main {
    padding: 0px 8px;
  }
}

.careers-main .bread {
  padding-top: 0;
}

.careers-main .careers-header {
  width: 100%;
}
@media (max-width: 768px) {
  .careers-main .careers-header {
    white-space: normal;
    padding-top: 134px;
  }
  html[lang="zh-TW"] .careers-main .careers-header {
    padding-top: 136px;
  }
}
.careers-header .side-list.mb {
  display: none;
}
@media (max-width: 768px) {
  .careers-header .side-list.mb {
    width: 100%;
    display: flex;
    padding: 18.5px 8px 0px 8px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
  }
  .careers-header .side-list.mb a {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0.5px;
  }

  .careers-header .side-list.mb a {
    opacity: 0.6;
  }
  .careers-header .side-list.mb a.is-active {
    opacity: 1;
  }
}
@media (max-width: 600px) {
  .careers-header .side-list.mb a {
    font-size: 15px;
  }
}

.careers-main .careers-header .mb-title {
  display: none;
}
@media (max-width: 768px) {
  .careers-main .careers-header .mb-title {
    display: block;

    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;

    padding: 0 8px;
  }
}

.careers-main .careers-header .title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: "Rethink Sans";
  font-size: 122px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
@media (max-width: 1710px) {
  .careers-main .careers-header .title {
    font-size: 120px;
  }
}
@media (max-width: 1500px) {
  .careers-main .careers-header .title {
    font-size: 100px;
  }
}
@media (max-width: 1250px) {
  .careers-main .careers-header .title {
    font-size: 84px;
  }
}
@media (max-width: 1115px) {
  .careers-main .careers-header .title {
    font-size: 72px;
  }
}
@media (max-width: 900px) {
  .careers-main .careers-header .title {
    font-size: 60px;
  }
}
@media (max-width: 768px) {
  .careers-main .careers-header .title {
    font-size: 72px;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  .careers-main .careers-header .title.pc {
    display: none;
  }
}

.careers-main .careers-header .bottom-title {
  display: flex;
  justify-content: end;
}
@media (max-width: 1115px) {
  .careers-main .careers-header .bottom-title {
    margin-top: 24px;
  }
}
@media (max-width: 768px) {
  .careers-main .careers-header .top-title,
  .careers-main .careers-header .bottom-title {
    display: inline;
    margin: 0;
    padding: 0;
  }
  .careers-main .careers-header .top-title::after {
    content: " "; /* 加一個空白讓英文正確銜接 */
  }

  .careers-main .bread {
    padding-bottom: 24px;
  }
}

.careers-main .careers-hero {
  width: 100%;
}
@media (max-width: 768px) {
  .careers-main .careers-hero {
    margin-top: 20.5px;
  }
  .careers-main .careers-hero img,
  .careers-main .careers-hero video {
    border-radius: 18px;
  }
}
.careers-main .careers-hero .hero {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 900px;
  overflow: hidden;
  border-radius: 24px;
}
.careers-main .careers-hero img,
.careers-main .careers-hero video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 24px;
}

/* yt版影片 */
.careers-main .careers-hero .hero-video {
  /* margin-bottom: 60px; */
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.careers-main .careers-hero .hero-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 24px;
}

.careers-main .careers-content {
  display: flex;
  width: 100%;
  padding-top: 127px;
  margin-bottom: 104px;
}
@media (max-width: 1024px) {
  .careers-main .careers-content {
    margin-bottom: 236px;
    padding-top: 66px;
  }
}
@media (max-width: 768px) {
  .careers-main .careers-content {
    display: flex;
    padding: 34px 4px 69px 8px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-bottom: 0px;
  }
}
@media (max-width: 475px) {
  .careers-main .careers-content {
    padding: 0px 4px 69px 8px;
    margin-top: 42px;
  }
}

.careers-main .careers-content .side-list {
  position: sticky;
  top: 15%;
  height: 100%;
  margin-left: 7.5%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-end;
  gap: 60px;
}
html[lang="zh-TW"] .careers-main .careers-content .side-list {
  width: 275px;
  padding: 60px 12px 60px 0;
  gap: 45px;
  border-top: 1px solid #c8c8ca;
  border-bottom: 1px solid #c8c8ca;
}
@media (max-width: 1024px) {
  .careers-main .careers-content .side-list {
    margin-left: 0;
  }
}
@media (max-width: 768px) {
  .careers-main .careers-content .side-list {
    display: none;
  }
}
.careers-main .careers-content .side-list a {
  opacity: 0.6;
}
.careers-main .careers-content .side-list a.is-active {
  opacity: 1;
}

.careers-main .careers-content .side-list a .item {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.15px;
  text-wrap: nowrap;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
@media (max-width: 1440px) {
  .careers-main .careers-content .side-list a .item {
    font-size: 26px;
  }
}
@media (max-width: 850px) {
  .careers-main .careers-content .side-list a .item {
    font-size: 22px;
  }
}

.careers-main .careers-content .side-list a.is-active .item {
  opacity: 1;
}

.careers-main .careers-content .careers-content-center {
  /* width: 100%; */
  margin-left: 10%;
  flex: 1;
}
@media (max-width: 1024px) {
  .careers-main .careers-content .careers-content-center {
    margin-left: 3.33%;
  }
}
.careers-main .careers-content .careers-content-center .title.mb {
  display: none;
}
@media (max-width: 768px) {
  .careers-main .careers-content .careers-content-center {
    margin-left: 0%;
  }

  .careers-main .careers-content .careers-content-center .title.mb {
    display: inline;

    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Title, "Rethink Sans") !important;
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;

    margin-bottom: 16px;
  }
  .careers-main .careers-content .careers-content-center .top-title:after {
    content: " ";
  }
}
@media (max-width: 525px) {
  .careers-main .careers-content .careers-content-center .title.mb {
    font-size: 36px;
  }
}

.careers-middle-top {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 120px;
  /* margin-bottom: 120px; */
}
@media (max-width: 1024px) {
  .careers-middle-top {
    gap: 40px;
    margin-bottom: 0;
  }
}
@media (max-width: 768px) {
  .careers-middle-top {
    gap: 41px;
    margin-bottom: 41px;
    margin-top: 32px;
  }
}
@media (max-width: 525px) {
  .careers-middle-top {
    margin-top: 16px;
    margin-bottom: 52px;
  }
}
@media (max-width: 525px) {
  .careers-middle-top svg {
    display: none;
  }
}

.careers-middle-top-header {
  display: flex;
  padding: 0 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
@media (max-width: 768px) {
  .careers-middle-top-header {
    padding: 0;
  }
}
@media (max-width: 525px) {
  .careers-middle-top-header {
    gap: 16px;
  }
}

.careers-middle-top-header .title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.75px;
}
@media (max-width: 1440px) {
  .careers-middle-top-header .title {
    font-size: 50px;
  }
}
@media (max-width: 1024px) {
  .careers-middle-top-header .title {
    font-size: 44px;
  }
}
@media (max-width: 768px) {
  .careers-middle-top-header#imo-team .title {
    display: none;
  }
  .careers-middle-top-header .title {
    font-size: var(--Font-Size-H4, 34px);
    font-size: 46px;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}
@media (max-width: 768px) {
  .careers-middle-top-header .title {
    font-size: var(--Font-Size-H4, 34px);
  }
}

.careers-middle-top-header .desc.pc {
  display: block;
}
.careers-middle-top-header .desc.mb {
  display: none;
}
@media (max-width: 768px) {
  .careers-middle-top-header .desc.pc {
    display: none;
  }
  .careers-middle-top-header .desc.mb {
    display: block;
  }
}
.careers-middle-top-header .desc {
  width: 100%;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 1440px) {
  .careers-middle-top-header .desc {
    font-size: 16px;
  }
}
@media (max-width: 1160px) {
  .careers-middle-top-header .desc {
    width: auto;
    font-size: 14px;
  }
}
@media (max-width: 1080px) {
  .careers-middle-top-header .desc {
    font-size: 13px;
  }
}
@media (max-width: 768px) {
  .careers-middle-top-header .desc {
    width: 100%;
    font-size: var(--Font-Size-Body-1, 16px);
    line-height: 140%; /* 22.4px */
    letter-spacing: 0.5px;
  }
}

.careers-middle-top-header .desc p {
  white-space: nowrap;
}
@media (max-width: 768px) {
  .careers-middle-top-header .desc p {
    white-space: normal;
  }
}

.careers-middle-top svg {
  max-width: 100%;
}

.careers-middle-bottom {
  width: 100%;
}

.accordion {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 575px) {
  .accordion {
    padding-bottom: 28px;
    border-bottom: 0.5px solid #c8c8ca;
  }
  .page-template-about .accordion {
    padding-bottom: 0;
    border-bottom: none;
  }
  .page-template-about
    .organization-items
    .accordion
    .accordion__item:first-child.active {
    background: #f6f4f4;
    border-radius: 0px;
  }
}

.accordion__item {
  width: 94.5%;
  border-bottom: 1px solid #c8c8ca;
  padding: 52px 0;
  transition: all 1s ease;
}
@media (max-width: 1440px) {
  .accordion__item {
    padding: 36px 0;
  }
}
@media (max-width: 1024px) {
  .accordion__item {
    padding: 24px 0;
  }
}
.page-template-careers .accordion__item:first-child .accordion__title {
  /* display: none; */
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.75px;
}
@media (max-width: 1440px) {
  .page-template-careers .accordion__item:first-child .accordion__title {
    font-size: 50px;
  }
}
@media (max-width: 1024px) {
  .page-template-careers .accordion__item:first-child .accordion__title {
    font-size: 44px;
  }
}

.page-template-about .accordion__item:first-child {
  display: none;
}
.accordion.awards-accordion {
  margin-top: 155px;
  height: auto;
}
.page-template-about .awards-accordion .accordion__item:first-child {
  display: list-item;
  width: 100%;
  border-top: 1px solid #c8c8ca;
}
@media (max-width: 768px) {
  .page-template-about .accordion__item:first-child {
    display: block;
  }
}
@media (max-width: 475px) {
  .accordion.awards-accordion {
    margin-top: 32px;
  }
  .page-template-careers .accordion__item:first-child .accordion__title {
    font-size: 34px;
  }
}

.page-template-careers .accordion__item:first-child {
  border-radius: 0px;
  padding: 0;
  /* border-top: 0.5px solid #c8c8ca; */
}
@media (max-width: 1024px) {
  .accordion__item {
    padding: 32px 0px;
  }
}
@media (max-width: 768px) {
  .accordion__item {
    padding: 40px 8px;
    width: 100%;
  }
  .accordion__item:first-child {
    padding: 40px 8px;
    width: 100%;
  }
}
@media (max-width: 525px) {
  .accordion__item {
    padding: 24px 0px;
    border-bottom: 0.5px solid #c8c8ca;
  }
  .accordion__item.active {
    padding: 24px 8px;
  }
  .accordion__item:first-child {
    padding: 24px 0px;
    border-top: 0.5px solid #c8c8ca;
  }
}

.accordion__item.active {
  background: rgba(19, 18, 12, 0.8);
  border-radius: 16px;

  /* margin-top: 52px; */
  /* padding: 24px 8px; */
}
@media (max-width: 768px) {
  .page-template-about .accordion__item.active {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.page-template-careers .accordion__item:first-child.active,
.page-template-careers .accordion__item:last-child.active,
.page-template-careers .accordion__item:nth-child(8).active,
.page-template-careers .accordion__item:nth-child(18).active {
  background: var(--Main-Bg, #f6f4f4);
  opacity: 1;
  border-bottom: none;
  padding: 120px 0 68px 0;

  margin-top: 0;
}
@media (max-width: 768px) {
  .page-template-careers .accordion__item:first-child.active,
  .page-template-careers .accordion__item:last-child.active,
  .page-template-careers .accordion__item:nth-child(8).active,
  .page-template-careers .accordion__item:nth-child(18).active {
    padding: 52px 0 0px 0;
  }
}

.accordion__item.default-title {
  background: none;
  border-radius: 0;
}

.accordion__header {
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0 30px;
  cursor: pointer;
}
@media (max-width: 1440px) {
  .accordion__header {
    width: 92%;
  }
}
@media (max-width: 768px) {
  .accordion__header {
    padding: 0;
  }
}

.accordion__title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
html[lang="zh-TW"] .accordion__title {
  font-size: 48px;
  line-height: 150%;
  letter-spacing: -1px;
}
@media (max-width: 1440px) {
  .accordion__title {
    font-size: 34px;
  }
}
@media (max-width: 1024px) {
  .accordion__title {
    font-size: 30px;
  }
}
@media (max-width: 768px) {
  .accordion__title {
    padding-left: 8px;
  }
  .accordion__item.active .accordion__title {
    padding-left: 0px;
  }
}
@media (max-width: 525px) {
  .accordion__title {
    color: var(--Dark-BG, #363130);
    font-size: var(--Font-Size-H5, 24px);
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  html[lang="zh-TW"] .accordion__title {
    font-size: 24px;
    line-height: 140%;
    letter-spacing: 0px;
  }
}

.accordion__item:first-child.active .accordion__title {
  color: var(--Headlines, #13120c);
}

.accordion.awards-accordion
  .accordion__item:first-child.active
  .accordion__title,
.accordion__item.active .accordion__title {
  color: var(--White, #fff);
}

.accordion__item.default-title .accordion__title {
  color: var(--Headlines, #13120c);
}
@media (max-width: 525px) {
  .accordion__item.active.default-title .accordion__title {
    font-size: 34px;
  }
  .accordion__item.active .accordion__title {
    font-size: 24px;
  }
}

.accordion__icons {
  width: 35px;
  height: 33px;
  position: relative;
}
.accordion__icons img {
  width: 35px;
  height: 33px;
  position: relative;
  border-radius: 0px;
}
@media (max-width: 1024px) {
  .accordion__icons {
    width: 28px;
    height: 26px;
  }
  .accordion__icons img {
    width: 28px;
    height: 26px;
  }
}
@media (max-width: 525px) {
  .accordion__icons {
    width: 17px;
    height: 16px;
  }
  .accordion__icons img {
    width: 17px;
    height: 16px;
  }
}

.accordion__icons img {
  transition: transform 1s ease;
}

.accordion__icons .icon-active {
  display: none;
}

.accordion__item.active .accordion__icons .icon-default {
  transform: rotate(180deg);
  display: none;
}

.accordion__item.active .accordion__icons .icon-active {
  display: block;
}

.accordion__item.active .accordion__content {
  display: block;
}

.accordion__content {
  display: none;
  padding: 30px;
  color: var(--Light-Text, rgba(255, 255, 255, 0.75));
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 1440px) {
  .accordion__content {
    font-size: 16px;
  }
}
@media (max-width: 1160px) {
  .accordion__content {
    font-size: 14px;
  }
}
@media (max-width: 1080px) {
  .accordion__content {
    font-size: 13px;
  }
}
@media (max-width: 768px) {
  .accordion__content {
    padding: 16px 0 24px 0;
  }
}
@media (max-width: 475px) {
  .accordion__content {
    padding: 16px 0 24px 0;
    font-size: var(--Font-Size-Body-1, 16px);
    line-height: 140%; /* 22.4px */
    letter-spacing: 0.5px;
  }
}

/* 預設顯示 PC */
.accordion__content .content-mb {
  display: none;
}

@media (max-width: 768px) {
  .accordion__content .content-pc {
    display: none;
  }
  .accordion__content .content-mb {
    display: block;
  }
}

.accordion__item.active .accordion__content {
  display: block;
}

.accordion__item.default-title .accordion__content {
  color: #484740;
}

.accordion__item.active .accordion__content a {
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;

  display: flex;
  align-items: center;
}
html[lang="zh-TW"] .accordion__item.active .accordion__content a {
  font-weight: 700;
  font-size: 24px;
  line-height: 150%;
  letter-spacing: 1px;
}
.accordion__item.active .accordion__content a img {
  width: 22px;
  height: 22px;
  margin-left: 8px;
}
@media (max-width: 768px) {
  .accordion__item.active .accordion__content a {
    display: flex;
    /* justify-content: center; */
  }
  html[lang="zh-TW"] .accordion__item.active .accordion__content a {
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.25px;
  }
}

.accordion__item.default-title .accordion__content a {
  color: var(--Headlines, #13120c);
  display: flex;
  align-items: center;
}
.accordion__item.default-title .accordion__content a img {
  width: 22px;
  height: 22px;
}

@media (min-width: 769px) {
  .accordion-item--partners {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .accordion-item--partners {
    display: block;
  }
}

.careers-middle-bottom .office {
  width: 100%;
  margin-top: 120px;
  /* margin-bottom: 473px; */
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0 30px;
}
@media (max-width: 1024px) {
  .careers-middle-bottom .office {
    margin-top: 60px;
  }
}
@media (max-width: 768px) {
  .careers-middle-bottom .office {
    margin-top: 52px;
    /* margin-bottom: 80px; */
    padding: 0;
  }
}

.careers-middle-bottom .office .title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.75px;
}
@media (max-width: 1440px) {
  .careers-middle-bottom .office .title {
    font-size: 50px;
  }
}
@media (max-width: 1024px) {
  .careers-middle-bottom .office .title {
    font-size: 44px;
  }
}
@media (max-width: 768px) {
  .careers-middle-bottom .office .title {
    font-size: 52px;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}
@media (max-width: 525px) {
  .careers-middle-bottom .office .title {
    font-size: var(--Font-Size-H4, 34px);
  }
}

/* 容器：三欄、三列，同高 */
.office-grid {
  display: grid;
  /* 左、中為彈性寬；右側縮圖欄可依設計調整寬度 */
  grid-template-columns: 1fr 1fr 0.3068fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 8px 16px;

  max-height: 424px;
}
@media (max-width: 1024px) {
  .office-grid {
    gap: 8px;
  }
}
.office-grid img {
  border-radius: 24px;
}
@media (max-width: 1024px) {
  .office-grid img {
    border-radius: 18px;
  }
}

.tile {
  overflow: hidden;
  position: relative;
  /* width: 489px; */
  /* max-height: 424px; */
}

.tile img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 版位對應 */
.tile-left {
  grid-column: 1;
  grid-row: 1 / -1;
  /* aspect-ratio: 489 / 424; */
}

/* 跨 3 列 → 高度 = 右側 3 張總和 */
.tile-main {
  grid-column: 2;
  grid-row: 1 / -1;
}

/* 同上 */
.tile-s1 {
  grid-column: 3;
  grid-row: 1;
  /* width: 150px; */
  /* max-height: calc((424px - 32px) / 3); */
}

.tile-s2 {
  grid-column: 3;
  grid-row: 2;
  /* width: 150px; */
  /* max-height: calc((424px - 32px) / 3); */
}

.tile-s3 {
  grid-column: 3;
  grid-row: 3;
  /* width: 150px; */
  /* max-height: calc((424px - 32px) / 3); */
}

@media (max-width: 768px) {
  .office-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .office-grid .tile-left {
    display: none;
  }
  .office-grid .tile-main {
    width: 100%;
    max-height: none;
  }
  .office-grid .tile-main img {
    border-radius: 0;
  }
  .office-grid .tile-s1,
  .office-grid .tile-s2,
  .office-grid .tile-s3 {
    width: calc((100% - 8px) / 3);
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: none;
  }
  .careers-main .resources {
    display: none;
  }
}

/* Extra! Page */

.extra-main {
  width: 100%;
}

.extra-main img {
  border-radius: 16px;
}

.extra-main .header-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.extra-main .header {
  width: 100%;
  padding: 114px 7.813% 0 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
html[lang="zh-TW"] .extra-main .header {
  padding: 138px 7.813% 0 7.813%;
}
@media (min-width: 1921px) {
  .extra-main .header {
    padding: 114px 150px 0 150px;
  }
  html[lang="zh-TW"] .extra-main .header {
    padding: 138px 150px 0 150px;
  }
}
@media (max-width: 1200px) {
  .extra-main .header {
    padding: 68px 7.813% 0 7.813%;
  }
}
@media (max-width: 475px) {
  .extra-main .header {
    padding: 134px 8px 0px 8px;
  }
  html[lang="zh-TW"] .extra-main .header {
    padding: 134px 8px 0px 8px;
  }
}
.extra-main .header .title-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-left: -8px;
}

.extra-main .header .left {
  display: flex;
  align-items: center;
  gap: 50px;
}
@media (max-width: 768px) {
  .extra-main .header .left {
    flex-direction: column;
    align-items: start;
    gap: 0;
  }
}

.extra-main .header .right {
  width: 18.5%;
}
@media (max-width: 1440px) {
  .extra-main .header .right {
    width: 30%;
  }
}
@media (max-width: 768px) {
  .extra-main .header .right {
    display: none;
  }
}

.extra-main .header .main-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 136px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
html[lang="zh-TW"] .extra-main .header .main-title {
  font-size: 100px;
}

@media (max-width: 1480px) {
  .extra-main .header .main-title {
    font-size: 100px;
  }
}
@media (max-width: 475px) {
  .extra-main .header .main-title {
    font-size: 36px;
    line-height: 140%;
    letter-spacing: 0.25px;
    padding: 0 13px;
  }
  html[lang="zh-TW"] .extra-main .header .main-title {
    font-size: 36px;
    line-height: 140%; /* 50.4px */
    letter-spacing: 0.25px;
  }
}
.extra-main .header .zh-line {
  display: none;
}
html[lang="zh-TW"] .extra-main .header .zh-line {
  display: block;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .extra-main .header .zh-line {
    display: none;
  }
}
.extra-main .header .sub-title.pc {
  width: auto;
  color: var(--Headlines, #13120c);
  font-family: "Noto Sans TC";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1px;
}
@media (max-width: 1500px) {
  .extra-main .header .sub-title.pc {
    width: 50%;
    font-size: 20px;
  }
}
.extra-main .header .sub-title.mb {
  display: none;
}
@media (max-width: 768px) {
  .extra-main .header .sub-title.pc {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .extra-main .header .sub-title.pc {
    display: none;
  }
  .extra-main .header .sub-title.mb {
    display: block;
    color: var(--Headlines, #13120c);
    font-family: "Noto Sans TC";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 1px;

    padding: 0 8px;
  }
}

.extra-main .header .bread {
  padding-top: 0;
}
@media (max-width: 768px) {
  .extra-main .header .bread {
    padding-bottom: 0;
    padding-top: 25px;
  }
}
@media (max-width: 575px) {
  .extra-main .header .bread {
    padding-bottom: 27px;
    padding-top: 0;
    margin-top: -8px;
  }
}

.web_search {
  border-bottom: 1px solid var(--Light-BG, #e5e5e5);
  width: 100%;
}

.web_search .web_search-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.web_search .web_search-field input {
  width: 100%;
  margin-right: 16px;
  padding: 6px;
  border: none;
  background: var(--Main-Bg, #f6f4f4);
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}

.web_search .web_search-field input:focus-visible {
  outline: 2px solid #484740;
  outline-offset: 0px;
  border-radius: 8px;
}

.extra-main .block-title {
  text-align: start;
  width: 10.2%;
  margin-right: 5.3%;
  text-wrap: nowrap;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.15px;
}
html[lang="zh-TW"] .extra-main .block-title {
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 6px;
}

@media (max-width: 475px) {
  .extra-main .block-title {
    width: 100%;
    font-size: var(--Font-Size-H5, 24px);
    margin-left: 8px;
  }
  html[lang="zh-TW"] .extra-main .block-title {
    font-size: var(--Font-Size-H5, 24px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 33.6px */
    letter-spacing: 0px;
  }
}

.extra-main .latest-article-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.extra-main .latest-article {
  width: 100%;
  padding: 30px 7.813% 55px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .extra-main .latest-article {
    padding: 30px 150px 55px 150px;
  }
}
@media (max-width: 575px) {
  .extra-main .latest-article {
    padding: 24px 8px 32px 8px;
  }
}

.extra-main .latest-article-block {
  display: flex;
}
@media (max-width: 1550px) {
  .extra-main .latest-article-block {
    flex-direction: column;
    gap: 24px;
  }
}

.extra-main .latest-article-block .latest-card-main {
  flex: 1;
  padding-right: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1400px) {
  .extra-main .latest-article-block .latest-card-main {
    padding-right: 0;
  }
}

.extra-main .latest-article-block .latest-card-main .latest-card-cover {
  width: 100%;
  /* height: 748px; */
  aspect-ratio: 1106 / 748;
}
@media (max-width: 575px) {
  .extra-main .latest-article-block .latest-card-main .latest-card-cover {
    height: auto;
  }
}

.extra-main .latest-article-block .latest-card-main .latest-card-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  align-items: stretch;
}

.extra-main
  .latest-article-block
  .latest-card-main
  .latest-card-body
  .latest-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H4, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
@media (max-width: 1024px) {
  .extra-main
    .latest-article-block
    .latest-card-main
    .latest-card-body
    .latest-card-title {
    font-size: 28px;
  }
}
@media (max-width: 475px) {
  .extra-main .latest-article-block .latest-card-main .latest-card-body {
    padding: 0 8px;
  }
  .extra-main
    .latest-article-block
    .latest-card-main
    .latest-card-body
    .latest-card-title {
    font-size: var(--Font-Size-H5, 24px);
  }
  .extra-main
    .latest-article-block
    .latest-card-main
    .latest-card-body
    .latest-card-desc {
    font-size: var(--Font-Size-Body-2, 14px);
  }
  .extra-main
    .latest-article-block
    .latest-card-main
    .latest-card-body
    .latest-card-date {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

.extra-main
  .latest-article-block
  .latest-card-main
  .latest-card-body
  .latest-card-desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}

.extra-main
  .latest-article-block
  .latest-card-main
  .latest-card-body
  .latest-card-date {
  margin-top: 24px;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 768px) {
  .extra-main
    .latest-article-block
    .latest-card-main
    .latest-card-body
    .latest-card-date {
    margin-top: 8px;

    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: 14px;
    line-height: 150%;
  }
  html[lang="zh-TW"]
    .extra-main
    .latest-article-block
    .latest-card-main
    .latest-card-body
    .latest-card-date {
    font-family: "Noto Sans TC";
    font-size: 14px;
    line-height: 150%;
  }
}

.extra-main .more-btn {
  margin-top: 68px;
  margin-left: 15.5%;
  display: flex;
  width: 210px;
  padding: 24px;
  justify-content: center;
  align-items: center;
  border-radius: 56px;
  background: var(--Headlines, #13120c);

  display: flex;
  gap: 16px;
}
html[lang="zh-TW"] .extra-main .more-btn {
  padding: 19px;
}
@media (max-width: 1500px) {
  .extra-main .more-btn {
    margin-left: 0;
    margin-top: 18px;
  }
}
@media (max-width: 575px) {
  .extra-main .more-btn {
    width: 77.2%;
    margin: 0 auto;
    margin-top: 32px;
  }
  html[lang="zh-TW"] .extra-main .more-btn {
    padding: 20px;
  }
}
@media (max-width: 525px) {
  .extra-main .more-btn {
    padding: 21px;
  }
}

.extra-main .more-btn p {
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  /* width: 70%; */
}
@media (max-width: 525px) {
  .extra-main .more-btn {
    letter-spacing: 1px;
    font-weight: 400;
  }
}
html[lang="zh-TW"] .extra-main .more-btn p {
  font-family: "Noto Sans TC";
  font-size: 22px;
  font-weight: 400;
  width: 70%;
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .extra-main .more-btn p {
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.25px;
  }
}

.extra-main .latest-article-block .latest-card-sub-section {
  flex: 0.3;
  padding-left: 30px;
  border-left: 1px solid #c8c8ca;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 1550px) {
  .extra-main .latest-article-block .latest-card-sub-section {
    border-left: none;
    padding-left: 0;
    flex-direction: row;
  }
}
@media (max-width: 575px) {
  .extra-main .latest-article-block .latest-card-sub-section {
    flex-direction: column;
    gap: 0;
  }
}

.extra-main .latest-article-block .latest-card-sub-section .latest-card-sub {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 575px) {
  .extra-main .latest-article-block .latest-card-sub-section .latest-card-sub {
    flex-direction: row;
    padding: 24px 0;
    border-top: 1px solid #c8c8ca;
  }
  .extra-main
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub:nth-child(2) {
    padding-bottom: 0;
  }
  .extra-main
    .latest-article.is-open
    .latest-card-sub-section
    .latest-card-sub:nth-child(2) {
    padding-bottom: 24px;
  }
}

.extra-main
  .latest-article-block
  .latest-card-sub-section
  .latest-card-sub.is-hidden,
.extra-main .style1 .style1-card-sub-section .style1-card-sub.is-hidden,
.extra-main .style2 .style2-article-more .style2-more-item.is-hidden {
  display: none;
}

.extra-main
  .latest-article-block
  .latest-card-sub-section
  .latest-card-sub
  .latest-card-cover {
  width: 100%;
  /* height: 299px; */
  aspect-ratio: 329 / 269;
}
@media (max-width: 575px) {
  .extra-main
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub
    .latest-card-cover {
    width: 112px;
    height: 106px;
  }
}

.extra-main
  .latest-article-block
  .latest-card-sub-section
  .latest-card-sub
  .latest-card-body {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 768px) {
  .extra-main
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub
    .latest-card-body {
    flex: 1;
    justify-content: space-between;
  }
}

.extra-main
  .latest-article-block
  .latest-card-sub-section
  .latest-card-sub
  .latest-card-body
  .latest-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
@media (max-width: 1024px) {
  .extra-main
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub
    .latest-card-body
    .latest-card-title {
    font-size: var(--Font-Size-H6, 20px);
    letter-spacing: 0.15px;
  }
}

.extra-main
  .latest-article-block
  .latest-card-sub-section
  .latest-card-sub
  .latest-card-body
  .latest-card-date {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 575px) {
  .extra-main
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub
    .latest-card-body
    .latest-card-date {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

/* 外層容器：統一左右 padding + gap */
.extra-main .latest-article-more {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding-left: 15.5%;
  /* margin-top: 88px; */
  box-sizing: border-box;
}
/* 給 data-more 的容器在展開時加 padding */
.latest-article-more.has-more-padding {
  margin-top: 88px !important;
}
@media (max-width: 1400px) {
  .extra-main .latest-article-more {
    padding-left: 0;
  }
}
@media (max-width: 575px) {
  .extra-main .latest-article-more {
    margin-top: 0;
    flex-direction: column;
    gap: 24px;
  }
  .latest-article-more.has-more-padding {
    margin-top: 0px !important;
  }
}

/* 四張卡片等寬（不用 nth-child 控制 padding） */
.extra-main .latest-article-more .latest-more-item {
  /* flex: 1 1 calc(25% - 30px);  */
  /* max-width: 318.14px; */
  width: calc(25% - 23px);
  min-height: 460px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;

  border-right: 1px solid #c8c8ca;
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  padding-right: 30px;
}
/* 每 4 個一組的第 4 個拿掉右框 */
.extra-main .latest-article-more .latest-more-item:nth-child(4n) {
  border-right: 0 !important;
}
@media (max-width: 1024px) {
  .extra-main .latest-article-more .latest-more-item {
    width: calc(50% - 16px);
  }
}
@media (max-width: 768px) {
  .extra-main .latest-article-more .latest-more-item {
    min-height: 0;
  }
}
@media (max-width: 575px) {
  .extra-main .latest-article-more .latest-more-item {
    width: 100%;
    padding-right: 0;
    border-right: none;
    min-height: 0;
  }
}

.extra-main .latest-article-more .latest-more-item .latest-card-sub {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  max-width: 333px;
  border-radius: 16px;
  transition: all 0.2s ease-in-out;
}
@media (max-width: 1024px) {
  .extra-main .latest-article-more .latest-more-item .latest-card-sub {
    max-width: 100%;
    gap: 24px;
  }
  .extra-main
    .latest-article-more
    .latest-more-item
    .latest-card-sub
    .style2-card-sub {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
  }
}
@media (max-width: 575px) {
  .extra-main .latest-article-more .latest-more-item .latest-card-sub {
    flex-direction: row;
    gap: 16px;
    padding-top: 24px;
    border-radius: 0;
    border-top: 0.5px solid #c8c8ca;
  }
  .extra-main
    .latest-article-more
    .latest-more-item
    .latest-card-sub
    .style2-card-sub {
    flex-direction: row;
    gap: 16px;
  }
}

.extra-main .latest-article-more .latest-more-item:hover .latest-card-sub {
  transform: translateY(-4px);
}

.extra-main .latest-article-more .latest-more-item .latest-card-cover {
  width: 100%;
  aspect-ratio: 329 / 269;
}

.extra-main .latest-article-more .latest-more-item .latest-card-cover img {
  height: 222px;
  /* width: 333px; */
}
@media (max-width: 1024px) {
  .extra-main .latest-article-more .latest-more-item .latest-card-cover img {
    height: 333px;
  }
}
@media (max-width: 768px) {
  .extra-main .latest-article-more .latest-more-item .latest-card-cover img {
    height: 222px;
  }
}
@media (max-width: 575px) {
  .extra-main .latest-article-more .latest-more-item .latest-card-cover img {
    width: 112px;
    height: 106px;
  }
}

.extra-main .latest-article-more .latest-more-item .latest-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;
}

.extra-main
  .latest-article-more
  .latest-more-item
  .latest-card-body
  .latest-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  margin-top: 16px;
}
@media (max-width: 1024px) {
  .extra-main
    .latest-article-more
    .latest-more-item
    .latest-card-body
    .latest-card-title {
    font-size: var(--Font-Size-H6, 20px);
    letter-spacing: 0.15px;
    margin-top: 0;
  }
}

.extra-main
  .latest-article-more
  .latest-more-item
  .latest-card-body
  .latest-card-date {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 1024px) {
  .extra-main
    .latest-article-more
    .latest-more-item
    .latest-card-body
    .latest-card-date {
    font-size: 16px;
  }
}

/* 過渡淡入 */
.latest-more-item {
  will-change: transform, opacity;
}

article.is-extended {
  transition:
    opacity 300ms ease,
    transform 300ms ease;
}
article.will-fade-in {
  opacity: 0;
  transform: translateY(8px);
}
article.faded-in {
  opacity: 1;
  transform: translateY(0);
}

.extra-main .style1-bg {
  background: var(--White, #fff);
}
.extra-main .style1 {
  width: 100%;
  padding: 68px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .extra-main .style1 {
    padding: 68px 150px;
  }
}
@media (max-width: 575px) {
  .extra-main .style1 {
    background: var(--Main-Bg, #f6f4f4);
    padding: 32px 8px 32px 8px;
  }
}

.extra-main .style1-block {
  display: flex;
}
@media (max-width: 1550px) {
  .extra-main .style1-block {
    flex-direction: column;
    gap: 24px;
  }
}

.extra-main .style1-block .style1-card-item {
  flex: 1;
}

.extra-main .style1-block .style1-card-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  flex-shrink: 0;
  padding-right: 30px;
  height: 100%;
}
@media (max-width: 1400px) {
  .extra-main .style1-block .style1-card-main {
    padding-right: 0;
  }
}

.extra-main .style1-block .style1-card-main .style1-card-cover {
  width: 100%;
  aspect-ratio: 717 / 435;
}
@media (max-width: 575px) {
  .extra-main .style1-block .style1-card-main .style1-card-cover {
    min-height: 0;
  }
}

.extra-main .style1-block .style1-card-main .style1-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 67px;
}
@media (max-width: 575px) {
  .extra-main .style1-block .style1-card-main .style1-card-body {
    gap: 16px;
    padding: 0 8px;
  }
}

.extra-main
  .style1-block
  .style1-card-main
  .style1-card-body
  .style1-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H4, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
@media (max-width: 1024px) {
  .extra-main
    .style1-block
    .style1-card-main
    .style1-card-body
    .style1-card-title {
    font-size: 28px;
  }
}
.extra-main
  .style1-block
  .style1-card-main
  .style1-card-body
  .style1-card-date {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 575px) {
  .extra-main
    .style1-block
    .style1-card-main
    .style1-card-body
    .style1-card-title {
    font-size: var(--Font-Size-H5, 24px);
  }
  .extra-main
    .style1-block
    .style1-card-main
    .style1-card-body
    .style1-card-date {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

.extra-main .style1-block .style1-card-sub-section {
  flex: 1;
  display: flex;
}
@media (max-width: 575px) {
  .extra-main .style1-block .style1-card-sub-section {
    flex-direction: column;
  }
}

.extra-main
  .style1-block
  .style1-card-sub-section
  .style1-card-sub-item:nth-child(1),
.extra-main
  .style1-block
  .style1-card-sub-section
  .style1-card-sub-item:nth-child(2) {
  flex: 1;
}

.extra-main .style1-block .style1-card-sub {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  gap: 16px;
  flex: 0.5;
  padding: 0 30px;
  border-left: 1px solid #c8c8ca;
}
@media (max-width: 1550px) {
  .extra-main .style1-block .style1-card-sub:first-child {
    border-left: none;
    padding-left: 0;
  }
}
@media (max-width: 575px) {
  .extra-main .style1-block .style1-card-sub {
    flex-direction: row;
    border-left: none;
    padding: 24px 0;
    border-top: 1px solid #c8c8ca;
  }
  .extra-main .style1 .style1-block .style1-card-sub:nth-child(2) {
    padding-bottom: 0;
  }
  .extra-main .style1.is-open .style1-block .style1-card-sub:nth-child(2) {
    padding-bottom: 24px;
  }
}

.extra-main .style1-block .style1-card-sub:nth-child(2) {
  padding-right: 0;
}

.extra-main .style1-block .style1-card-sub .style1-card-cover {
  width: 100%;
  /* height: 269px; */
  aspect-ratio: 329 / 269;
}
@media (max-width: 575px) {
  .extra-main .style1-block .style1-card-sub .style1-card-cover {
    width: 112px;
    height: 106px;
  }
}

.extra-main .style1-block .style1-card-sub .style1-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  height: 100%;
}
.extra-main
  .style1-block
  .style1-card-sub
  .style1-card-body
  .style1-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
@media (max-width: 1024px) {
  .extra-main
    .style1-block
    .style1-card-sub
    .style1-card-body
    .style1-card-title {
    font-size: 20px;
  }
}
.extra-main .style1-block .style1-card-sub .style1-card-body .style1-card-desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 575px) {
  .extra-main
    .style1-article-more
    .style1-card-sub
    .style1-card-body
    .style1-card-desc {
    display: none;
  }
}
.extra-main .style1-block .style1-card-sub .style1-card-body .style1-card-date {
  margin-top: 24px;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 575px) {
  .extra-main .style1-block .style1-card-sub .style1-card-body {
    flex: 1;
    height: auto;
  }
  .extra-main
    .style1-block
    .style1-card-sub
    .style1-card-body
    .style1-card-title {
    font-size: var(--Font-Size-H6, 20px);
    letter-spacing: 0.15px;
  }
  .extra-main
    .style1-block
    .style1-card-sub
    .style1-card-body
    .style1-card-date {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
    margin-top: 0;
  }
}

.extra-main .style2-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.extra-main .style2 {
  width: 100%;
  padding: 68px 7.813% 68px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .extra-main .style2 {
    padding: 68px 150px;
  }
}
@media (max-width: 575px) {
  .extra-main .style2 {
    padding: 32px 8px 32px 8px;
  }
  .extra-main .style2#works {
    background: var(--White, #fff);
  }
}

.extra-main .style2-block {
  width: 100%;
  display: flex;
}
@media (max-width: 1400px) {
  .extra-main .style2-block {
    flex-direction: column;
    gap: 24px;
  }
}

/* 外層區塊（你圖中選到的是 div.style2-more-item，但我們要罩在整個 row 容器上） */
.style2-article-more {
  position: relative;
  overflow: hidden; /* 關鍵：讓遮罩能裁切 */
}

/* 遮掉最右邊那條線 */
.style2-article-more::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: #f6f4f4; /* 換成你該區塊背景色 */
  pointer-events: none;
  z-index: 5;
}
@media (max-width: 575px) {
  .style2-article-more::after {
    width: 0;
  }
}

/* 外層容器：統一左右 padding + gap */
.extra-main .style2-block .style2-article-more {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
@media (max-width: 575px) {
  .extra-main .style2-block .style2-article-more {
    flex-direction: column;
    margin: 0 4px;
    gap: 0;
  }
}

/* 四張卡片等寬（不用 nth-child 控制 padding） */
.extra-main .style2-block .style2-article-more .style2-more-item {
  /* flex: 1 1 calc(25% - 30px); */
  /* max-width: 318.14px; */
  width: calc(25% - 23px);
  min-height: 460px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;

  border-right: 1px solid #c8c8ca;
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  padding-right: 30px;
}
@media (max-width: 1024px) {
  .extra-main .style2-block .style2-article-more .style2-more-item {
    width: calc(50% - 16px);
  }
}
@media (max-width: 768px) {
  .extra-main .style2-block .style2-article-more .style2-more-item {
    min-height: 0px;
  }
}
@media (max-width: 575px) {
  .extra-main .style2-block .style2-article-more .style2-more-item {
    width: 100%;
    border-right: none;
    padding-right: 0;
  }
}

.extra-main .style2-block .style2-article-more .style2-more-item:nth-child(4n) {
  /* border-right: none;
  padding-right: 0; */
}

.extra-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-sub {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-width: 333px;
  border-radius: 16px;
  transition: all 0.2s ease-in-out;
  width: 100%;
}
@media (min-width: 1921px) {
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-sub {
    max-width: 100%;
  }
}
@media (max-width: 1024px) {
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-sub {
    max-width: 100%;
  }
}
@media (max-width: 575px) {
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-sub {
    flex-direction: row;
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid #c8c8ca;
    /* align-items: center; */
    border-radius: 0px;
  }
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item:nth-child(4)
    .style2-card-sub {
    padding-bottom: 0;
  }
  .extra-main
    .style2.is-open
    .style2-block
    .style2-article-more
    .style2-more-item:nth-child(4)
    .style2-card-sub {
    padding-bottom: 24px;
  }
}

.extra-main
  .style2-block
  .style2-article-more
  .style2-more-item:hover
  .style2-card-sub {
  /* transform: translateY(-4px); */
}

.extra-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-cover {
  width: 100%;
  aspect-ratio: 329 / 269;
}
@media (max-width: 575px) {
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-cover {
    width: 112px;
    height: 106px;
  }
}

.extra-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-cover
  img {
  /* height: auto;
    width: 100%; */
}
@media (min-width: 1921px) {
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-cover
    img {
    height: auto;
    width: 100%;
    aspect-ratio: 329 / 269;
  }
}
@media (max-width: 1024px) {
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-cover
    img {
    height: 333px;
  }
}
@media (max-width: 575px) {
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-cover
    img {
    width: 112px;
    height: 106px;
  }
}

.extra-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;
}
.extra-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-body
  .style2-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;

  margin-top: 16px;
}
@media (max-width: 1024px) {
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-body
    .style2-card-title {
    font-size: 20px;
  }
}
@media (max-width: 475px) {
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-body
    .style2-card-title {
    font-size: var(--Font-Size-H6, 20px);
    letter-spacing: 0.15px;
    margin-top: 0;
  }
}

.extra-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-body
  .style2-card-date {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 1024px) {
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-body
    .style2-card-date {
    font-size: 16px;
  }
}
@media (max-width: 475px) {
  .extra-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-body
    .style2-card-date {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

.extra-main .interviews-block {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 48px 7.813% 68px 7.813%;
  display: flex;
  gap: 101px;
}

.extra-main .works-block {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 48px 7.813% 68px 7.813%;
  display: flex;
  gap: 101px;
}

.extra-main .resources {
  display: none;
}

/* Extra Single */

.extra-single-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.extra-single {
  width: 100%;
  padding: 77px 7.813% 68px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
html[lang="zh-TW"] .extra-single {
  padding: 135px 7.813% 68px 7.813%;
}
@media (min-width: 1921px) {
  .extra-single {
    padding: 77px 150px 68px 150px;
  }
  html[lang="zh-TW"] .extra-single {
    padding: 135px 150px 68px 150px;
  }
}
@media (max-width: 575px) {
  .extra-single {
    padding: 144px 8px 32px 8px;
  }
  html[lang="zh-TW"] .extra-single {
    padding: 147px 8px 32px 8px;
  }
}

.extra-single .bread {
  padding-top: 0;
  padding-bottom: 69px;
}

@media (max-width: 475px) {
  .extra-single .bread {
    /* margin-top: -13px; */
    padding: 0 8px 22px 8px;
  }
}

.extra-single .extra-main {
  display: flex;
  position: relative;
}
.extra-single .middle .extra-single .extra-main .left {
  display: block;
}
@media (max-width: 1024px) {
  .extra-single .extra-main section.left {
    display: none;
  }
}

.extra-single .extra-main .left .float-social-media {
  position: sticky;
  top: 96px;
  height: max-content;
  align-self: start;
  z-index: 3;
}

.extra-single .left .heateor_sss_sharing_ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.extra-single .left .heateor_sss_sharing_ul a.heateor_sss_facebook {
  order: 1;
}

.extra-single .left .heateor_sss_sharing_ul a.heateor_sss_button_instagram {
  order: 2;
}

.extra-single .left .heateor_sss_sharing_ul a.heateor_sss_button_twitter {
  order: 3;
}

.extra-single .left .heateor_sss_sharing_ul a.heateor_sss_button_threads {
  order: 4;
}

.extra-single .left .heateor_sss_sharing_ul a.heateor_sss_more {
  order: 5;
}

/* 先隱藏原本的 SVG / 字型 icon */
.extra-single .extra-main .left a.heateor_sss_facebook svg,
.extra-single .extra-main .left a.heateor_sss_facebook .heateor_sss_svg,
.extra-single .extra-main .left a.heateor_sss_facebook span,
.extra-single .extra-main .left a.heateor_sss_more svg,
.extra-single .extra-main .left a.heateor_sss_more .heateor_sss_svg,
.extra-single .extra-main .left a.heateor_sss_more span,
.extra-single .extra-main .left a.heateor_sss_button_instagram svg,
.extra-single .extra-main .left a.heateor_sss_button_instagram .heateor_sss_svg,
.extra-single .extra-main .left a.heateor_sss_button_instagram span,
.extra-single .extra-main .left a.heateor_sss_button_threads svg,
.extra-single .extra-main .left a.heateor_sss_button_threads .heateor_sss_svg,
.extra-single .extra-main .left a.heateor_sss_button_threads span,
.extra-single .extra-main .left a.heateor_sss_button_twitter svg,
.extra-single .extra-main .left a.heateor_sss_button_twitter .heateor_sss_svg,
.extra-single .extra-main .left a.heateor_sss_button_twitter span {
  display: none !important;
}

/* 統一每顆按鈕樣式 */
.extra-single .extra-main .left .heateor_sss_sharing_container a {
  width: 60px !important;
  height: 60px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 60px 60px !important;
  background-color: transparent !important;
  font-size: 0 !important; /* 移除字型 icon 佔位 */
  box-shadow: none !important;
  overflow: hidden !important; /* 防止內層東西撐開 */
}

.extra-single
  .extra-main
  .left
  .heateor_sss_sharing_container
  a.heateor_sss_facebook {
  background-image: url("/wp-content/uploads/2025/09/float_FB.svg") !important;
}

.extra-single
  .extra-main
  .left
  .heateor_sss_sharing_container
  a.heateor_sss_button_instagram {
  background-image: url("/wp-content/uploads/2025/09/float_IG.svg") !important;
}

.extra-single
  .extra-main
  .left
  .heateor_sss_sharing_container
  a.heateor_sss_button_twitter {
  background-image: url("/wp-content/uploads/2025/09/float_Twitter.svg") !important;
}

.extra-single
  .extra-main
  .left
  .heateor_sss_sharing_container
  a.heateor_sss_button_threads {
  background-image: url("/wp-content/uploads/2025/09/float_Threads.svg") !important;
}

.extra-single
  .extra-main
  .left
  .heateor_sss_sharing_container
  a.heateor_sss_more {
  background-image: url("/wp-content/uploads/2025/09/float_more.svg") !important;
}

.extra-single .extra-main .left .comment_svg {
  margin-top: 280px;
  position: sticky;
  top: 576px;
  height: max-content;
  align-self: start;
  z-index: 3;
}

.extra-single .middle {
  width: 52.5%;
  margin: 0 60px 0 89px;
}
@media (max-width: 1024px) {
  .extra-single .middle {
    width: auto;
    margin: 0 60px 0 0px;
    flex: 1;
  }
}
@media (max-width: 768px) {
  .extra-single .middle {
    margin: 0;
  }
}

.extra-single .middle header {
  width: 100%;
  border-bottom: 1px solid #c8c8ca;
  padding-bottom: 8px;
  margin-bottom: 60px;
}
@media (max-width: 768px) {
  .extra-single .middle header {
    margin-bottom: 27px;
  }
}

.extra-single .extra-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  margin-bottom: 24px;
}
@media (max-width: 525px) {
  .extra-single .extra-title {
    font-size: 28px;
    line-height: 140%;
    padding: 0 8px;
  }
}

.extra-single .extra-subtitle {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 30px;
}
@media (max-width: 525px) {
  .extra-single .extra-subtitle {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.5px;
    padding: 0 8px;
  }
}

.extra-single .extra-hero img {
  border-radius: 24px;
}

.extra-single .extra-hero .extra-hero-desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
  margin-top: 8px;
  /* margin-bottom: 30px; */
}
@media (max-width: 525px) {
  .extra-single .extra-hero .extra-hero-desc {
    font-size: var(--Font-Size-xs, 10px);
    line-height: 16px;
    letter-spacing: 0.4px;
  }
}

.extra-single .extra-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}
.extra-single .extra-meta .meta-author {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
.extra-single .extra-meta .meta-date {
  color: var(--Headlines, #13120c);
  text-align: right;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 525px) {
  .extra-single .extra-meta {
    padding: 0 8px;
  }
  .extra-single .extra-meta .meta-author {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
  .extra-single .extra-meta .meta-date {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

.extra-single .middle .page-content {
  width: 100%;
  padding-bottom: 25px;
  border-bottom: 1px solid #c8c8ca;
}
@media (max-width: 525px) {
  .extra-single .middle .page-content {
    padding-bottom: 0;
    border-bottom: none;
  }
}

.extra-single .middle .page-content .pc-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: "Rethink Sans";
  font-size: var(--Font-Size-H1, 96px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
  margin-bottom: 40px;
}

.extra-single .middle .page-content .pc-description {
  color: var(--Body-text, #484740);
  font-family: "Noto Sans TC";
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-top: 40px;
  /* margin-bottom: 48px; */
  white-space: pre-wrap;
  margin-top: 24px;
}
@media (max-width: 768px) {
  .extra-single .middle .page-content .pc-description {
    margin-top: 16px;
    font-size: var(--Font-Size-Body-1, 16px);
  }
  .extra-single .middle .page-content .pc-description h3,
  .extra-single .middle .page-content .pc-description h4,
  .extra-single .middle .page-content .pc-description h5 {
    font-size: var(--Font-Size-H5, 24px);
  }
}

.extra-single .pc-description p {
  overflow-wrap: anywhere; /* 現代瀏覽器 */
  word-break: break-all; /* 備用：老一點的 / 某些瀏覽器 */
}

.extra-single .middle .page-content .pc-description-0 iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 16px;
}

.extra-single .middle .page-content .pc-description-2 iframe {
  aspect-ratio: 34 / 9;
  display: block;
}

.extra-single .middle .page-content .pc-description-3 iframe,
.extra-single .middle .page-content .pc-description-4 iframe {
  aspect-ratio: 16 / 13;
  display: block;
}

.extra-single .middle .page-content .pc-description a {
  color: var(--Accent, #e8b65f);
  font-family: "Noto Sans TC";
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  text-decoration: none;
}

.extra-single .middle .page-content .pc-description a:hover {
  text-decoration: underline;
}

.extra-single .middle .page-content .pc-sub-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H4, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
  margin-bottom: 6px;
  margin-top: 68px;
}

.extra-single .middle .page-content .pc-image {
  width: 100%;
  margin-top: 30px;
}
@media (max-width: 768px) {
  .extra-single .middle .page-content .pc-lr-images {
    margin-top: 8px;
  }
}

.extra-single .middle .page-content .pc-lr-images {
  width: 100%;
  display: flex;
  gap: 30px;
  margin-top: 30px;
}
@media (max-width: 768px) {
  .extra-single .middle .page-content .pc-lr-images {
    gap: 8px;
    margin-top: 8px;
  }
}
@media (max-width: 525px) {
  .extra-single .middle .page-content .pc-lr-images {
    gap: 4px;
    margin-top: 4px;
  }
}

.extra-single .middle .page-content .pc-lr-images img {
  aspect-ratio: 1/1;
}

.extra-single .middle .page-content .pc-lr-images .left,
.extra-single .middle .page-content .pc-lr-images .right {
  flex: 1 1 0;
  border-radius: 32px;
  display: flex;
}

.extra-single .middle .page-content .pc-lr-texts {
  width: 100%;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 60px;
  display: flex;
  gap: 30px;
}
@media (max-width: 1024px) {
  .extra-single .middle .page-content .pc-lr-texts {
    gap: 15px;
  }
}

.extra-single .middle .page-content .pc-lr-texts .left {
  width: 50%;
}

.extra-single .middle .page-content .pc-lr-texts .right {
  width: 50%;
}

.extra-single .middle .page-content .pc-four-images-group {
  width: 100%;
  /* height: 610px; */
  display: flex;
  gap: 22px;
  margin-top: 30px;
}
@media (max-width: 1024px) {
  .extra-single .middle .page-content .pc-three-images-group {
    gap: 15px;
    margin-top: 15px;
  }
}

.extra-single .middle .page-content .pc-four-images-group .left-main {
  flex: 1;
}

.extra-single .middle .page-content .pc-four-images-group .left-main .left {
  width: 100%;
}

.extra-single .middle .page-content .pc-four-images-group .right {
  flex: 0.234;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.extra-single .middle .page-content .pc-four-images-group .right figure {
  flex: 1;
}

.extra-single .middle .page-content .pc-three-images-group {
  width: 100%;
  height: 870px;
  display: flex;
  gap: 30px;
}
@media (max-width: 1024px) {
  .extra-single .middle .page-content .pc-three-images-group {
    gap: 15px;
  }
}

.extra-single .middle .page-content .pc-three-images-group .left-main {
  flex: 1;
}

.extra-single .middle .page-content .pc-three-images-group .left-main .left {
  width: 100%;
}

.extra-single .middle .page-content .pc-three-images-group .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 1024px) {
  .extra-single .middle .page-content .pc-three-images-group .right {
    gap: 15px;
  }
}

.extra-single .middle .page-content .pc-three-images-row-group {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 1024px) {
  .extra-single .middle .page-content .pc-three-images-row-group {
    margin-top: 15px;
    gap: 15px;
  }
}
@media (max-width: 768px) {
  .extra-single .middle .page-content .pc-three-images-row-group {
    margin-top: 8px;
    gap: 8px;
  }
}
@media (max-width: 525px) {
  .extra-single .middle .page-content .pc-three-images-row-group {
    margin-top: 4px;
    gap: 4px;
  }
}

.extra-single .middle .page-content .pc-three-images-row-group div {
  height: 266px;
  flex: 1;
}
@media (max-width: 1900px) {
  .extra-single .middle .page-content .pc-three-images-row-group div {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

.extra-single .middle .page-content .pc-image-desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
  margin-top: 8px;
}

.extra-single .middle .social-media {
  margin-top: 42px;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 18px;
}

.extra-single .middle .extra-author-block {
  width: 100%;
  display: flex;
  gap: 50px;
  margin-top: 75px;
}
@media (max-width: 525px) {
  .extra-single .middle .extra-author-block {
    gap: 24px;
    padding-left: 7px;
  }
}

.extra-single .middle .extra-author-block .author-img img {
  border-radius: 50%;
  width: 120px;
  height: auto;
  aspect-ratio: 1 / 1;
}
@media (max-width: 525px) {
  .extra-single .middle .extra-author-block .author-img img {
    width: 90px;
  }
}

.extra-single .middle .extra-author-block .author-info {
  display: flex;
  flex-direction: column;
}

.extra-single .middle .extra-author-block .author-info .author-name {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 525px) {
  .extra-single .middle .extra-author-block .author-info .author-name {
    font-size: var(--Font-Size-H6, 20px);
    font-weight: 400;
  }
}

.extra-single .middle .extra-author-block .author-info .author-block {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 525px) {
  .extra-single .middle .extra-author-block .author-info .author-block {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

.extra-single
  .middle
  .extra-author-block
  .author-info
  .author-block
  .author-major {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;

  opacity: 0.6;
}

.extra-single .middle .extra-author-block .author-info .author-intro {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;

  display: -webkit-box;
  -webkit-line-clamp: 2; /* 顯示3行 */
  -webkit-box-orient: vertical;

  overflow: hidden;
}

.extra-single .right {
  width: 32%;
}
@media (max-width: 768px) {
  .extra-single .right {
    display: none;
  }
}

.extra-single .right .link-list {
  width: 100%;
  padding: 30px 0;
  border-top: 1px solid #c8c8ca;
  border-bottom: 1px solid #c8c8ca;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.extra-single .right .link-list .main-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.15px;
}

.extra-single .right .extra-link-list .link-item {
  width: 100%;
}

.extra-single .right .extra-link-list .link-item a {
  width: 100%;
  display: flex;
  align-items: center;
}
@media (max-width: 1300px) {
  .extra-single .right .extra-link-list .link-item a {
    flex-direction: column;
    gap: 18px;
  }
}

.extra-single .right .extra-link-list .link-item .rank {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  margin-right: 16px;
}

.extra-single .right .extra-link-list .link-item .image {
  margin-right: 40px;
  max-width: 229px;
  max-height: 116px;
  object-fit: cover; /* 讓圖片自動裁切填滿容器 */
  object-position: center; /* 保持居中對齊 */
  border-radius: 8px;
}
@media (max-width: 1440px) {
  .extra-single .right .extra-link-list .link-item .image {
    margin-right: 18px;
  }
}
@media (max-width: 1300px) {
  .extra-single .right .extra-link-list .link-item .image {
    max-width: 100%;
    max-height: 222px;
  }
}

.extra-single .right .extra-link-list .link-item .title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  flex: 1;
}
@media (max-width: 1440px) {
  .extra-single .right .extra-link-list .link-item .title {
    font-size: 20px;
  }
}

.extra-single .right .extra-recommend {
  width: 100%;
  margin-top: 30px;
}

.extra-single .right .extra-recommend .card-img {
  width: 100%;
  border-radius: 24px;
}

.extra-single .right .extra-recommend .card-title {
  padding: 0 15px;
  margin-top: 20px;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
.extra-single .right .extra-recommend .card-desc {
  padding: 0 15px;
  margin-top: 16px;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}

/* 1) 先把單篇內容區塊上可能殘留的固定高度與滾動關掉 */
.single,
.extra-single .pc-description,
.extra-single .pc-description .page-content,
.extra-single .post_text,
.extra-single .post_text_inner,
.extra-single .wp-block-embed,
.extra-single .wp-block-embed__wrapper {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 2) 讓 Gutenberg 的 embed 走固定寬高比容器（16:9，可視需要覆寫） */
.extra-single .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.extra-single .wp-block-embed__wrapper iframe,
.extra-single .wp-block-embed__wrapper embed,
.extra-single .wp-block-embed__wrapper object {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* 3) 之前若有寫到通用 iframe 高度，這裡順手蓋掉 */
.extra-single .pc-description iframe,
.extra-single .post_text iframe {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  border: 0;
}

/* 4) 如果某些貼文不是 16:9，可以在該 <figure> 加 class 來覆寫比例 */
.extra-single .wp-block-embed.is-4-3 .wp-block-embed__wrapper {
  aspect-ratio: 4 / 3;
}
.extra-single .wp-block-embed.is-1-1 .wp-block-embed__wrapper {
  aspect-ratio: 1 / 1;
}

#stream-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 12px 0;
  color: #666;
  font-size: 14px;
  transition: opacity 0.25s ease;
  /* background: var(--Main-Bg, #f6f4f4); */
}
#stream-loading[hidden] {
  display: none;
}
#stream-loading .spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.55);
  animation: spin 800ms linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Extra Author Taxonomy*/

@media (max-width: 575px) {
  .extra-author-main {
    padding-top: 150px;
  }
}
.extra-author-main img {
  border-radius: 16px;
}

.extra-author-main .block-title {
  text-align: center;
  width: 16.4%;
  margin-right: 4%;
  text-wrap: nowrap;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.15px;

  margin-top: -12px;
}
@media (max-width: 575px) {
  .extra-author-main .block-title {
    font-size: var(--Font-Size-H5, 24px);
    margin-top: 0px;
    padding: 0 8px;
  }
}

.extra-author-main .bread {
  background: var(--Main-Bg, #f6f4f4);
  padding-top: 135px;
  padding-bottom: 80px;
  padding-left: 7.813%;
}
@media (max-width: 768px) {
  .extra-author-main .bread {
    padding: 0 16px;
  }
}

.extra-author-main .extra-author-block {
  width: 100%;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  gap: 153px;
  background: var(--Main-Bg, #f6f4f4);
  padding-bottom: 69px;
  padding-left: 11.25%;
}
@media (max-width: 1200px) {
  .extra-author-main .extra-author-block {
    gap: 60px;
  }
}
@media (max-width: 768px) {
  .extra-author-main .extra-author-block {
    flex-direction: column;
    gap: 10px;
    padding: 0 16px 32px 16px;
  }
}

.extra-author-main .extra-author-block .author-img img {
  border-radius: 50%;
  width: 240px;
  height: auto;
  aspect-ratio: 1 / 1;
}
@media (max-width: 525px) {
  .extra-author-main .extra-author-block .author-img img {
    width: 120px;
  }
}

.extra-author-main .extra-author-block .author-info {
  display: flex;
  flex-direction: column;
  width: 59%;
}
@media (max-width: 768px) {
  .extra-author-main .extra-author-block .author-info {
    width: 100%;
    align-items: center;
  }
}

.extra-author-main .extra-author-block .author-info .author-name {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H3, 48px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 768px) {
  .extra-author-main .extra-author-block .author-info .author-name {
    text-align: center;
    font-size: var(--Font-Size-H5, 24px);
  }
}

.extra-author-main .extra-author-block .author-info .author-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 42px;
}
@media (max-width: 525px) {
  .extra-author-main .extra-author-block .author-info .author-block {
    margin-bottom: 24px;
  }
}

.extra-author-main
  .extra-author-block
  .author-info
  .author-block
  .author-major {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 525px) {
  .extra-author-main
    .extra-author-block
    .author-info
    .author-block
    .author-major {
    font-size: var(--Font-Size-Body-1, 16px);
    letter-spacing: 0.5px;
  }
}

@media (max-width: 525px) {
  .extra-author-main
    .extra-author-block
    .author-info
    .author-block
    .author-instagram {
    display: none;
  }
}

.extra-author-main .extra-author-block .author-info .author-block a {
  display: none;
}

.extra-author-main .extra-author-block .author-info .author-intro {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 525px) {
  .extra-author-main .extra-author-block .author-info .author-intro {
    color: var(--Dark-BG, #363130);
    font-size: var(--Font-Size-Body-1, 16px);
    letter-spacing: 0.5px;
  }
}

.extra-author-main .latest-article {
  width: 100%;
  background: #fff;
  padding: 68px 7.813% 55px 7.813%;
}
@media (max-width: 475px) {
  .extra-author-main .latest-article {
    padding: 32px 8px 55px 8px;
    background: var(--Main-Bg, #f6f4f4);
  }
}

.extra-author-main .latest-article-block {
  display: flex;
}
@media (max-width: 1550px) {
  .extra-author-main .latest-article-block {
    flex-direction: column;
    gap: 24px;
  }
}

.extra-author-main .latest-article-block .latest-card-main {
  flex: 1;
  padding-right: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1400px) {
  .extra-author-main .latest-article-block .latest-card-main {
    padding-right: 0;
  }
}

.extra-author-main .latest-article-block .latest-card-main .latest-card-cover {
  width: 100%;
  /* height: 748px; */
  aspect-ratio: 1106 / 748;
}
@media (max-width: 575px) {
  .extra-author-main
    .latest-article-block
    .latest-card-main
    .latest-card-cover {
    height: auto;
  }
}

.extra-author-main .latest-article-block .latest-card-main .latest-card-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  align-items: stretch;
}

.extra-author-main
  .latest-article-block
  .latest-card-main
  .latest-card-body
  .latest-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H4, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
@media (max-width: 475px) {
  .extra-author-main
    .latest-article-block
    .latest-card-main
    .latest-card-body
    .latest-card-title {
    font-size: var(--Font-Size-H5, 24px);
    padding: 0 8px;
  }
  .extra-author-main
    .latest-article-block
    .latest-card-main
    .latest-card-body
    .latest-card-desc {
    font-size: var(--Font-Size-Body-2, 14px);
  }
  .extra-author-main
    .latest-article-block
    .latest-card-main
    .latest-card-body
    .latest-card-date {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

.extra-author-main
  .latest-article-block
  .latest-card-main
  .latest-card-body
  .latest-card-desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}

.extra-author-main
  .latest-article-block
  .latest-card-main
  .latest-card-body
  .latest-card-date {
  margin-top: 24px;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 768px) {
  .extra-author-main
    .latest-article-block
    .latest-card-main
    .latest-card-body
    .latest-card-date {
    font-size: 14px;
    line-height: 150%;
    margin-top: 8px;
  }
  html[lang="zh-TW"]
    .extra-author-main
    .latest-article-block
    .latest-card-main
    .latest-card-body
    .latest-card-date {
    font-family: "Noto Sans TC";
    font-size: 14px;
    line-height: 150%;
  }
}

.extra-author-main .more-btn {
  margin-left: 20%;
  display: flex;
  width: 210px;
  padding: 24px;
  justify-content: center;
  align-items: center;
  border-radius: 56px;
  background: var(--Headlines, #13120c);
}
html[lang="zh-TW"] .extra-author-main .more-btn {
  padding: 25px 24px;
}
@media (max-width: 1400px) {
  .extra-author-main .more-btn {
    margin-left: 0;
    margin-top: 18px;
  }
}
@media (max-width: 575px) {
  .extra-author-main .more-btn {
    width: 80%;
    margin: 0 auto;
    margin-top: 32px;
  }
  html[lang="zh-TW"] .extra-author-main .more-btn {
    padding: 20px 24px;
  }
}

.extra-author-main .more-btn p {
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  width: 70%;
}
html[lang="zh-TW"] .extra-author-main .more-btn p {
  font-weight: 700;
  font-size: 22px;
  line-height: 100%;
  letter-spacing: 3px;
}
@media (max-width: 575px) {
  html[lang="zh-TW"] .extra-author-main .more-btn p {
    font-size: var(--Font-Size-Body-2, 14px);
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.25px;
  }
}
.extra-author-main .latest-article-block .latest-card-sub-section {
  flex: 0.3;
  padding-left: 30px;
  border-left: 1px solid #c8c8ca;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 1400px) {
  .extra-author-main .latest-article-block .latest-card-sub-section {
    border-left: none;
    padding-left: 0;
    flex-direction: row;
  }
}
@media (max-width: 575px) {
  .extra-author-main .latest-article-block .latest-card-sub-section {
    flex-direction: column;
    gap: 0;
  }
}

.extra-author-main
  .latest-article-block
  .latest-card-sub-section
  .latest-card-sub {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 575px) {
  .extra-author-main
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub {
    flex-direction: row;
    padding: 24px 0;
    border-top: 1px solid #c8c8ca;
  }
  .extra-author-main
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub:nth-child(2) {
    padding-bottom: 0;
  }
  .extra-author-main
    .latest-article.is-open
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub:nth-child(2) {
    padding-bottom: 24px;
  }
}

.extra-author-main
  .latest-article-block
  .latest-card-sub-section
  .latest-card-sub.is-hidden,
.extra-author-main .style1 .style1-card-sub-section .style1-card-sub.is-hidden,
.extra-author-main .style2 .style2-article-more .style2-more-item.is-hidden {
  display: none;
}

.extra-author-main
  .latest-article-block
  .latest-card-sub-section
  .latest-card-sub
  .latest-card-cover {
  width: 100%;
  /* height: 299px; */
  aspect-ratio: 329 / 269;
}
@media (max-width: 575px) {
  .extra-author-main
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub
    .latest-card-cover {
    width: 112px;
    height: 106px;
  }
}

.extra-author-main
  .latest-article-block
  .latest-card-sub-section
  .latest-card-sub
  .latest-card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 768px) {
  .extra-author-main
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub
    .latest-card-body {
    flex: 1;
    justify-content: space-between;
  }
}

.extra-author-main
  .latest-article-block
  .latest-card-sub-section
  .latest-card-sub
  .latest-card-body
  .latest-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
@media (max-width: 575px) {
  .extra-author-main
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub
    .latest-card-body
    .latest-card-title {
    font-size: var(--Font-Size-H6, 20px);
    letter-spacing: 0.15px;
  }
}

.extra-author-main
  .latest-article-block
  .latest-card-sub-section
  .latest-card-sub
  .latest-card-body
  .latest-card-date {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 575px) {
  .extra-author-main
    .latest-article-block
    .latest-card-sub-section
    .latest-card-sub
    .latest-card-body
    .latest-card-date {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

/* 外層容器：統一左右 padding + gap */
.extra-author-main .latest-article-more {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding-left: 20.2%;
  margin-top: 68px;
  box-sizing: border-box;
}
@media (max-width: 1400px) {
  .extra-author-main .latest-article-more {
    padding-left: 0;
  }
}
@media (max-width: 575px) {
  .extra-author-main .latest-article-more {
    margin-top: 0;
    flex-direction: column;
    gap: 0;
  }
}

/* 四張卡片等寬（不用 nth-child 控制 padding） */
.extra-author-main .latest-article-more .latest-more-item {
  /* flex: 1 1 calc(25% - 30px);  */
  /* max-width: 318.14px; */
  width: calc(25% - 23px);
  min-height: 460px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;

  border-right: 1px solid #c8c8ca;
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  padding-right: 30px;
}
/* 每一列第 4 個（4、8、12...）不要右邊框 */
.extra-author-main .latest-article-more .latest-more-item:nth-child(4n) {
  border-right: 0 !important;
}
@media (max-width: 1024px) {
  .extra-author-main .latest-article-more .latest-more-item {
    width: calc(50% - 16px);
  }
}
@media (max-width: 768px) {
  .extra-author-main .latest-article-more .latest-more-item {
    width: 100%;
    padding-right: 0px;
    border-right: none;
    min-height: 0px;
  }
}

.extra-author-main .latest-article-more .latest-more-item .latest-card-sub {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  max-width: 333px;
  border-radius: 16px;
  transition: all 0.2s ease-in-out;
}
@media (max-width: 1024px) {
  .extra-author-main .latest-article-more .latest-more-item .latest-card-sub {
    max-width: 100%;
  }
  .extra-author-main
    .latest-article-more
    .latest-more-item
    .latest-card-sub
    .style2-card-sub {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
@media (max-width: 768px) {
  .extra-author-main .latest-article-more .latest-more-item .latest-card-sub {
    flex-direction: row;
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid #c8c8ca;
    border-radius: 0px;
  }
  .extra-author-main
    .latest-article-more
    .latest-more-item
    .latest-card-sub
    .style2-card-sub {
    flex-direction: row;
    gap: 16px;
    /* padding: 24px 0; */
    /* border-top: 1px solid #c8c8ca; */
  }
}

.extra-author-main
  .latest-article-more
  .latest-more-item:hover
  .latest-card-sub {
  transform: translateY(-4px);
}

.extra-author-main .latest-article-more .latest-more-item .latest-card-cover {
  width: 100%;
  aspect-ratio: 329 / 269;
}

.extra-author-main
  .latest-article-more
  .latest-more-item
  .latest-card-cover
  img {
  /* height: 222px; */
  /* width: 333px; */
}
@media (max-width: 1024px) {
  .extra-author-main
    .latest-article-more
    .latest-more-item
    .latest-card-cover
    img {
    height: 333px;
  }
}
@media (max-width: 768px) {
  .extra-author-main
    .latest-article-more
    .latest-more-item
    .latest-card-cover
    img {
    width: 112px;
    height: 106px;
  }
}

.extra-author-main .latest-article-more .latest-more-item .latest-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;
}

.extra-author-main
  .latest-article-more
  .latest-more-item
  .latest-card-body
  .latest-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  margin-top: 16px;
}
@media (max-width: 1024px) {
  .extra-author-main
    .latest-article-more
    .latest-more-item
    .latest-card-body
    .latest-card-title {
    font-size: 20px;
  }
}
@media (max-width: 1768px) {
  .extra-author-main
    .latest-article-more
    .latest-more-item
    .latest-card-body
    .latest-card-title {
    margin-top: 0px;
  }
}

.extra-author-main
  .latest-article-more
  .latest-more-item
  .latest-card-body
  .latest-card-date {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 768px) {
  html[lang="zh-TW"]
    .extra-author-main
    .latest-article-more
    .latest-more-item
    .latest-card-body
    .latest-card-date {
    font-family: "Noto Sans TC";
    font-size: 14px;
    line-height: 150%;
  }
  .extra-author-main
    .latest-article-more
    .latest-more-item
    .latest-card-body
    .latest-card-date {
    font-size: 14px;
    line-height: 150%;
  }
}

/* 過渡淡入 */
.latest-more-item {
  will-change: transform, opacity;
}

article.is-extended {
  transition:
    opacity 300ms ease,
    transform 300ms ease;
}
article.will-fade-in {
  opacity: 0;
  transform: translateY(8px);
}
article.faded-in {
  opacity: 1;
  transform: translateY(0);
}

.extra-author-main .style1 {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 68px 7.813% 68px 7.813%;
}
@media (max-width: 575px) {
  .extra-author-main .style1 {
    padding: 32px 8px 32px 8px;
  }
}

.extra-author-main .style1-block {
  display: flex;
}
@media (max-width: 1400px) {
  .extra-author-main .style1-block {
    flex-direction: column;
    gap: 24px;
  }
}

.extra-author-main .style1-block .style1-card-item {
  flex: 1;
}

.extra-author-main .style1-block .style1-card-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  flex-shrink: 0;
  padding-right: 30px;
  height: 100%;
}
@media (max-width: 1400px) {
  .extra-author-main .style1-block .style1-card-main {
    padding-right: 0;
  }
}

.extra-author-main .style1-block .style1-card-main .style1-card-cover {
  width: 100%;
  /* min-height: 435px;
  height: 100%; */
  aspect-ratio: 717 / 435;
}
@media (max-width: 575px) {
  .extra-author-main .style1-block .style1-card-main .style1-card-cover {
    min-height: 0;
  }
}

.extra-author-main .style1-block .style1-card-main .style1-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 67px;
}
@media (max-width: 575px) {
  .extra-author-main .style1-block .style1-card-main .style1-card-body {
    gap: 16px;
  }
}

.extra-author-main
  .style1-block
  .style1-card-main
  .style1-card-body
  .style1-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H4, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
.extra-author-main
  .style1-block
  .style1-card-main
  .style1-card-body
  .style1-card-date {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 575px) {
  .extra-author-main
    .style1-block
    .style1-card-main
    .style1-card-body
    .style1-card-title {
    font-size: var(--Font-Size-H5, 24px);
  }
  .extra-author-main
    .style1-block
    .style1-card-main
    .style1-card-body
    .style1-card-date {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

.extra-author-main .style1-block .style1-card-sub-section {
  flex: 1;
  display: flex;
}
@media (max-width: 575px) {
  .extra-author-main .style1-block .style1-card-sub-section {
    flex-direction: column;
  }
}

.extra-author-main
  .style1-block
  .style1-card-sub-section
  .style1-card-sub-item:nth-child(1),
.extra-author-main
  .style1-block
  .style1-card-sub-section
  .style1-card-sub-item:nth-child(2) {
  flex: 1;
}

.extra-author-main .style1-block .style1-card-sub {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  gap: 16px;
  flex: 0.5;
  padding: 0 30px;
  border-left: 1px solid #c8c8ca;
}
@media (max-width: 1400px) {
  .extra-author-main .style1-block .style1-card-sub:first-child {
    border-left: none;
    padding-left: 0;
  }
}
@media (max-width: 575px) {
  .extra-author-main .style1-block .style1-card-sub {
    flex-direction: row;
    border-left: none;
    padding: 24px 0;
    border-top: 1px solid #c8c8ca;
  }
  .extra-author-main .style1-block .style1-card-sub:nth-child(2) {
    padding-bottom: 0;
  }
  .extra-author-main
    .style1.is-open
    .style1-block
    .style1-card-sub
    .style1-card-sub:nth-child(2) {
    padding-bottom: 24px;
  }
}

.extra-author-main .style1-block .style1-card-sub:nth-child(2) {
  padding-right: 0;
}

.extra-author-main .style1-block .style1-card-sub .style1-card-cover {
  width: 100%;
  /* height: 269px; */
  aspect-ratio: 329 / 269;
}
@media (max-width: 575px) {
  .extra-author-main .style1-block .style1-card-sub .style1-card-cover {
    width: 112px;
    height: 106px;
  }
}

.extra-author-main .style1-block .style1-card-sub .style1-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  height: 100%;
}
.extra-author-main
  .style1-block
  .style1-card-sub
  .style1-card-body
  .style1-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
.extra-author-main
  .style1-block
  .style1-card-sub
  .style1-card-body
  .style1-card-desc {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}
.extra-author-main
  .style1-article-more
  .style1-card-sub
  .style1-card-body
  .style1-card-desc {
  /* display: none; */
}
.extra-author-main
  .style1-block
  .style1-card-sub
  .style1-card-body
  .style1-card-date {
  margin-top: 24px;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 575px) {
  .extra-author-main .style1-block .style1-card-sub .style1-card-body {
    flex: 1;
    height: auto;
  }
  .extra-author-main
    .style1-block
    .style1-card-sub
    .style1-card-body
    .style1-card-title {
    font-size: var(--Font-Size-H6, 20px);
    letter-spacing: 0.15px;
  }
  .extra-author-main
    .style1-block
    .style1-card-sub
    .style1-card-body
    .style1-card-date {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
    margin-top: 0;
  }
}

.extra-author-main .style2 {
  width: 100%;
  background: var(--White, #fff);
  padding: 68px 7.813% 68px 7.813%;
}
@media (max-width: 575px) {
  .extra-author-main .style2 {
    padding: 32px 8px 32px 8px;
    background: var(--Main-Bg, #f6f4f4);
  }
}

.extra-author-main .style2-block {
  width: 100%;
  display: flex;
}
@media (max-width: 1400px) {
  .extra-author-main .style2-block {
    flex-direction: column;
    gap: 24px;
  }
}

/* 外層容器：統一左右 padding + gap */
.extra-author-main .style2-block .style2-article-more {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.extra-author-main .style2-block .style2-article-more::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: #fff;
  pointer-events: none;
  z-index: 5;
}
@media (max-width: 575px) {
  .extra-author-main .style2-block .style2-article-more {
    flex-direction: column;
    margin: 0 4px;
    gap: 0;
  }
  .extra-author-main .style2-block .style2-article-more::after {
    width: 0;
  }
}

/* 四張卡片等寬（不用 nth-child 控制 padding） */
.extra-author-main .style2-block .style2-article-more .style2-more-item {
  /* flex: 1 1 calc(25% - 30px); */
  /* max-width: 318.14px; */
  width: calc(25% - 23px);
  min-height: 460px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;

  border-right: 1px solid #c8c8ca;
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  padding-right: 30px;
}
@media (max-width: 1024px) {
  .extra-author-main .style2-block .style2-article-more .style2-more-item {
    width: calc(50% - 16px);
  }
}
@media (max-width: 575px) {
  .extra-author-main .style2-block .style2-article-more .style2-more-item {
    width: 100%;
    border-right: none;
    padding-right: 0;
    min-height: 0px;
  }
}

.extra-author-main
  .style2-block
  .style2-article-more
  .style2-more-item:nth-child(4n) {
  /* border-right: none;
  padding-right: 0; */
}

.extra-author-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-sub {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-width: 333px;
  border-radius: 16px;
  transition: all 0.2s ease-in-out;
  width: 100%;
}
@media (max-width: 1024px) {
  .extra-author-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-sub {
    max-width: 100%;
  }
}
@media (max-width: 575px) {
  .extra-author-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-sub {
    flex-direction: row;
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid #c8c8ca;
    /* align-items: center; */
    border-radius: 0px;
  }
  .extra-author-main
    .style2-block
    .style2-article-more
    .style2-more-item:nth-child(4)
    .style2-card-sub {
    padding-bottom: 0;
  }
  .extra-author-main
    .style2.is-open
    .style2-block
    .style2-article-more
    .style2-more-item:nth-child(4)
    .style2-card-sub {
    padding-bottom: 24px;
  }
}

.extra-author-main
  .style2-block
  .style2-article-more
  .style2-more-item:hover
  .style2-card-sub {
  transform: translateY(-4px);
}

.extra-author-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-cover {
  width: 100%;
  aspect-ratio: 329 / 269;
}
@media (max-width: 575px) {
  .extra-author-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-cover {
    width: 112px;
    height: 106px;
  }
}

.extra-author-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-cover
  img {
  height: 100%;
  width: 100%;
}
@media (max-width: 1024px) {
  .extra-author-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-cover
    img {
    height: 333px;
  }
}
@media (max-width: 575px) {
  .extra-author-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-cover
    img {
    width: 112px;
    height: 106px;
  }
}

.extra-author-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;
}
.extra-author-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-body
  .style2-card-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;

  margin-top: 16px;
}
@media (max-width: 1024px) {
  .extra-author-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-body
    .style2-card-title {
    font-size: 22px;
  }
}
@media (max-width: 475px) {
  .extra-author-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-body
    .style2-card-title {
    font-size: var(--Font-Size-H6, 20px);
    letter-spacing: 0.15px;
    margin-top: 0;
  }
}

.extra-author-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-body
  .style2-card-date {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;

  opacity: 0.6;
}
@media (max-width: 1024px) {
  .extra-author-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-body
    .style2-card-date {
    font-size: 16px;
  }
}
@media (max-width: 475px) {
  .extra-author-main
    .style2-block
    .style2-article-more
    .style2-more-item
    .style2-card-body
    .style2-card-date {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

/* Works Single */
@media (max-width: 768px) {
  .single-works .site-header {
    padding: 64px 16px 0 16px;
  }
}

.works-single-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.works-single {
  width: 100%;
  padding: 68px 7.813% 61px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
.works-single .bread {
  padding-top: 68px;
}
@media (min-width: 1921px) {
  .works-single {
    padding: 68px 150px 61px 150px;
  }
}
@media (max-width: 1024px) {
  .works-single {
    padding: 0px 7.813% 68px 7.813%;
  }
}
@media (max-width: 768px) {
  .works-single {
    padding: 100px 8px 32px 8px;
  }
  .works-single .bread {
    padding-top: 36px;
  }
}
@media (max-width: 525px) {
  .works-single .bread {
    padding-bottom: 9px;
  }
}
.works-single .hero {
  width: 100%;
  margin-bottom: 136px;
  aspect-ratio: 1800 / 895;
}
@media (max-width: 1024px) {
  .works-single .hero {
    margin-bottom: 32px;
  }
}
.works-single .hero img {
  border-radius: 24px;
  object-position: bottom;
}
@media (max-width: 515px) {
  .works-single .hero img {
    height: 240px;
  }
}

.works-single .main {
  display: flex;
  gap: 60px;
}
@media (max-width: 1024px) {
  .works-single .main {
    flex-direction: column;
    gap: 0;
  }
}
.works-single .main img {
  border-radius: 24px;
  object-position: bottom;
  transition: transform 0.3s ease;
}
@media (max-width: 1024px) {
  .works-single .main img {
    border-radius: 18px;
  }
}

.works-single .main .side {
  width: 29.9%;
}
.works-single .main .mb-side {
  display: none;
}
@media (max-width: 1024px) {
  .works-single .main .side {
    display: none;
  }
  .works-single .main .mb-side {
    display: block;
    margin-top: 26px;
  }
}
.works-single .project-information {
  width: 100%;
  padding: 60px 0 80px 0;
  border-top: 1px solid #c8c8ca;
  border-bottom: 1px solid #c8c8ca;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 1024px) {
  .works-single .project-information {
    border-top: none;
    border-bottom: none;
    gap: 32px;
    padding: 0;
  }
}
@media (max-width: 768px) {
  .works-single .project-information {
    gap: 16px;
    padding: 0 8px;
  }
}
@media (max-width: 525px) {
  .works-single .project-information {
    gap: 8px;
  }
}

.works-single .project-information .project-info-header {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  text-transform: uppercase;
  margin-bottom: 32px;
}
html[lang="zh-TW"] .works-single .project-information .project-info-header {
  font-size: 26px;
  line-height: 150%;
}

.works-single .project-information .project-info-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  align-self: stretch;
}
html[lang="zh-TW"] .works-single .project-information .project-info-item {
  gap: 6px;
}
@media (max-width: 1024px) {
  .works-single .project-information .project-info-item {
    flex-direction: column;
  }
}
@media (max-width: 475px) {
  .works-single .project-information .project-info-item {
    gap: 4px;
  }
}

.works-single .project-information .project-info-item .title {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  text-wrap: nowrap;
}
html[lang="zh-TW"]
  .works-single
  .project-information
  .project-info-item
  .title {
  font-size: 17px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 3px;
}
@media (max-width: 475px) {
  .works-single .project-information .project-info-item .title {
    font-size: 12px;
  }
  html[lang="zh-TW"]
    .works-single
    .project-information
    .project-info-item
    .title {
    font-size: 14px;
    line-height: 150%; /* 21px */
    letter-spacing: 3px;
  }
}

.works-single .project-information .project-info-item .desc {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
html[lang="zh-TW"] .works-single .project-information .project-info-item .desc {
  font-size: 17px;
  line-height: 150%;
  letter-spacing: 1px;
}
@media (max-width: 475px) {
  .works-single .project-information .project-info-item .desc {
    font-size: 16px;
    letter-spacing: 0.5px;
  }
  html[lang="zh-TW"]
    .works-single
    .project-information
    .project-info-item
    .desc {
    font-size: 16px;
    line-height: 140%; /* 22.4px */
    letter-spacing: 0.5px;
  }
}

.works-single .project-information .project-info-item .team-mb {
  display: none;
}
@media (max-width: 475px) {
  .works-single .project-information .project-info-item .team-pc {
    display: none;
  }
  .works-single .project-information .project-info-item .team-mb {
    display: block;
  }
}

.works-single .link-list {
  position: sticky;
  top: 5%;
  left: 5%;

  width: 100%;
  padding: 60px 0 80px 0;
  border-top: 1px solid #c8c8ca;
  border-bottom: 1px solid #c8c8ca;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.works-single .link-list a {
  width: 100%;
}

.works-single .link-list .link-item {
  display: flex;
  height: 149px;
  align-items: center;
  /* justify-content: center; */
  gap: 40px;
  flex-shrink: 0;
  align-self: stretch;
}

.works-single .link-list .link-item img {
  width: 42%;
  aspect-ratio: 230 / 149;
}
@media (max-width: 1440px) {
  .works-single .link-list .link-item img {
    width: 60%;
  }
}
.works-single .link-list .link-item .link-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.works-single .link-list .link-item .link-meta .title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
@media (max-width: 1440px) {
  .works-single .link-list .link-item .link-meta .title {
    font-size: 20px;
  }
}

.works-single .link-list .link-item .link-meta .year {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
}

.works-single .main .page-content {
  /* padding-bottom: 25px; */
  /* border-bottom: 1px solid #c8c8ca; */
  flex: 1;
}
@media (max-width: 1024px) {
  .works-single .main .page-content {
    border-bottom: none;
  }
}
.works-single .main .page-content .pc-sm-title {
  display: none;
  color: var(--Headlines, #13120c);
  font-family: "Noto Sans TC";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.15px;

  margin-bottom: 37px;
  margin-top: -8px;
}
html[lang="zh-TW"] .works-single .main .page-content .pc-sm-title {
  display: block;
  padding: 0 8px;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .works-single .main .page-content .pc-sm-title {
    font-size: 16px;
    margin-bottom: 4px;
    padding: 0 8px;
  }
}
.works-single .main .page-content .pc-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: "Rethink Sans" !important;
  font-size: 96px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
  margin-bottom: 40px;
  margin-top: -21px;
}
@media (max-width: 1440px) {
  .works-single .main .page-content .pc-title {
    font-size: 80px;
  }
}
@media (max-width: 1024px) {
  .works-single .main .page-content .pc-title {
    font-size: 72px;
  }
}
@media (max-width: 768px) {
  .works-single .main .page-content .pc-title {
    font-size: 68px;
  }
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-title {
    font-size: 36px;
    margin-bottom: 32px;
    letter-spacing: 0;
    margin-top: 0px;
    padding: 0 8px;
  }
}

.works-single .main .page-content .pc-content-sm-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: "Rethink Sans" !important;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -1px;
  margin: 20px 0;
}

.works-single .main .page-content .pc-content-sm-title .sm-title-mb {
  display: none;
}
.works-single .main .page-content .pc-content-sm-title .sm-title-pc {
  display: block;
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-content-sm-title {
    font-size: var(--Font-Size-H4, 34px);
    line-height: 140%;
    letter-spacing: 0.25px;
    padding-left: 8px;
  }
  html[lang="zh-TW"] .works-single .main .page-content .pc-content-sm-title {
    font-size: 24px;
  }
  .works-single .main .page-content .pc-content-sm-title .sm-title-pc {
    display: none;
  }
  .works-single .main .page-content .pc-content-sm-title .sm-title-mb {
    display: block;
  }
}

.works-single .main .page-content .pc-description {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans") !important;
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 60px;
  /* padding-left: 28px; */

  margin-top: 8px;
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-description {
    padding: 0 8px;
    margin-bottom: 23px;
    font-size: 12px;
  }
  html[lang="zh-TW"] .works-single .main .page-content .pc-description {
    font-size: 14px;
    line-height: 150%; /* 21px */
    letter-spacing: 3px;
  }
}

.works-single .main .page-content .pc-description-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 30px;

  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans") !important;
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 60px;
  margin-top: 30px;
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-description-block {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
    flex-direction: column;
    padding: 0 8px;
  }
}

.works-single .main .page-content .pc-image {
  width: 100%;
  margin-top: 60px;
  aspect-ratio: 1190 / 962;
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-image {
    margin-top: 0;
    aspect-ratio: 377 / 303;
  }
}

.works-single .main .page-content .pc-image-height {
  width: 100%;
  margin-top: 60px;
  aspect-ratio: 1190 / 1487;
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-image-height {
    margin-top: 0;
    aspect-ratio: 377 / 471;
  }
}

.works-single .main .page-content .pc-lr-images {
  width: 100%;
  display: flex;
  gap: 30px;
  margin-top: 30px;
}
@media (max-width: 1024px) {
  .works-single .main .page-content .pc-lr-images {
    gap: 8px;
    margin-top: 8px;
  }
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-lr-images {
    gap: 4px;
    margin: 4px 0;
  }
}

.works-single .main .page-content .pc-lr-images-rect .left,
.works-single .main .page-content .pc-lr-images-rect .right {
  border-radius: 32px;
  flex: 1;
  aspect-ratio: 580 / 725;
}

.works-single .main .page-content .pc-lr-images-rect {
  width: 100%;
  display: flex;
  gap: 30px;
  margin-top: 30px;
}
@media (max-width: 1024px) {
  .works-single .main .page-content .pc-lr-images-rect {
    gap: 8px;
    margin-top: 8px;
  }
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-lr-images-rect {
    gap: 4px;
    margin-top: 4px;
  }
}

.works-single .main .page-content .pc-lr-images .left,
.works-single .main .page-content .pc-lr-images .right {
  border-radius: 32px;
  flex: 1;
  aspect-ratio: 1 / 1;
}

.works-single .main .page-content .pc-lr-texts {
  width: 100%;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans") !important;
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 60px;
  margin-top: 30px;
  display: flex;
  gap: 30px;
}
.works-single .main .page-content .pc-lr-texts ul {
  list-style: disc;
  padding-left: 40px;
}
@media (max-width: 1024px) {
  .works-single .main .page-content .pc-lr-texts {
    flex-direction: column;
    margin-bottom: 24px;
  }
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-lr-texts {
    margin-top: 24px;
    font-size: var(--Font-Size-Body-2, 14px);
    padding: 0 8px;
    gap: 0;
    letter-spacing: 0.25px;
  }
  .works-single .main .page-content .pc-lr-texts ul {
    padding-left: 25px;
  }
}
/* 預設：不動任何文章（pc 顯示、mb 隱藏） */
.works-single .main .page-content .pc-lr-texts.mb {
  display: none;
}

/* ✅ 只有該篇文章有 mobile layout（has-mb-lr）才在 475px 以下切換 */
@media (max-width: 475px) {
  .works-single .main .page-content .has-mb-lr .pc-lr-texts.pc,
  .works-single .main .page-content .has-mb-lr .pc-description-block {
    display: none;
  }
  .works-single .main .page-content .has-mb-lr .pc-lr-texts.mb {
    display: flex;
  }
}

.works-single .main .page-content .pc-lr-texts .left {
  width: 50%;
}
.works-single .main .page-content .pc-lr-texts .right {
  width: 50%;
}
@media (max-width: 1024px) {
  .works-single .main .page-content .pc-lr-texts .right,
  .works-single .main .page-content .pc-lr-texts .left {
    width: 100%;
  }
}

.works-single .main .page-content .pc-four-images-group {
  width: 100%;
  /* height: 610px; */
  display: flex;
  gap: 16px;
  margin-top: 30px;
}
@media (max-width: 1024px) {
  .works-single .main .page-content .pc-four-images-group {
    flex-direction: column;
    gap: 4px;
  }
}

.works-single .main .page-content .pc-four-images-group .left-main {
  display: flex;
  flex: 1;
}

.works-single .main .page-content .pc-four-images-group .left-main .left {
  display: flex;
  flex: 1;
  aspect-ratio: 377 / 303;
  max-height: 546.3px;
}
.works-single .main .page-content .pc-four-images-group .left-main .left a {
  display: flex;
  flex: 1;
  aspect-ratio: 377 / 303;
}

.works-single .main .page-content .pc-four-images-group .right {
  flex: 0.234;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  max-height: 546.3px;
}
.works-single .main .page-content .pc-four-images-group .right .right1,
.works-single .main .page-content .pc-four-images-group .right .right2,
.works-single .main .page-content .pc-four-images-group .right .right3 {
  height: auto;
  aspect-ratio: 224 / 198;
  max-height: calc((100% - 16px) / 3);
}
@media (max-width: 1024px) {
  .works-single .main .page-content .pc-four-images-group .right {
    flex: 1;
    flex-direction: row;
    gap: 4px;
  }
  .works-single .main .page-content .pc-four-images-group .right .right1,
  .works-single .main .page-content .pc-four-images-group .right .right2,
  .works-single .main .page-content .pc-four-images-group .right .right3 {
    flex: 0.333;
  }
}

.pc-four-images-group,
.pc-four-images-group .left-main,
.pc-four-images-group .right {
  padding: 0;
}

.pc-four-images-group figure {
  margin: 0;
}

.works-single .main .page-content .pc-three-images-group {
  width: 100%;
  height: 870px;
  display: flex;
  gap: 30px;
  align-items: stretch;
  margin-top: 30px;
}
@media (max-width: 768px) {
  .works-single .main .page-content .pc-three-images-group {
    gap: 4px;
    height: 500px;
  }
}
@media (max-width: 475px) {
  .works-single .main .page-content .pc-three-images-group {
    height: 276px;
  }
  .works-single .main .page-content .pc-three-images-group.height {
    height: 370px;
  }
}

.works-single .main .page-content .pc-three-images-group.height {
  width: 100%;
  height: 1160px;
  display: flex;
  gap: 30px;
  align-items: stretch;
  margin-top: 30px;
}
@media (max-width: 768px) {
  .works-single .main .page-content .pc-three-images-group.height {
    gap: 4px;
    height: 100%;
  }
}

.works-single .main .page-content .pc-three-images-group .left-main {
  flex: 1;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .works-single .main .page-content .pc-three-images-group .left-main {
    aspect-ratio: 61/91;
  }
  .works-single .main .page-content .pc-three-images-group.width .left-main {
    aspect-ratio: 221/276;
  }
  .works-single .main .page-content .pc-three-images-group.height .left-main {
    aspect-ratio: 185/370;
  }
}

.works-single .main .page-content .pc-three-images-group .left-main .left {
  width: 100%;
  height: 100%;
}

.works-single .main .page-content .pc-three-images-group .right {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}
.works-single .main .page-content .pc-three-images-group.width .right {
  height: 100%;
  flex: 0.67;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}
@media (max-width: 768px) {
  .works-single .main .page-content .pc-three-images-group .right {
    gap: 4px;
  }
  .works-single .main .page-content .pc-three-images-group.height .right,
  .works-single .main .page-content .pc-three-images-group.width .right {
    gap: 6px;
  }
}

.works-single .main .page-content .pc-three-images-group .right .right1,
.works-single .main .page-content .pc-three-images-group .right .right2 {
  /* height: 48.5%; */
  border-radius: 32px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .works-single .main .page-content .pc-three-images-group .right .right1,
  .works-single .main .page-content .pc-three-images-group .right .right2 {
    aspect-ratio: 47/34;
  }
  .works-single
    .main
    .page-content
    .pc-three-images-group.height
    .right
    .right1,
  .works-single
    .main
    .page-content
    .pc-three-images-group.height
    .right
    .right2 {
    aspect-ratio: 185/182;
  }
  .works-single .main .page-content .pc-three-images-group.width .right .right1,
  .works-single
    .main
    .page-content
    .pc-three-images-group.width
    .right
    .right2 {
    aspect-ratio: 150/137.5;
  }
}

.works-single .main .page-content .pc-three-images-group .right .right1 a,
.works-single .main .page-content .pc-three-images-group .right .right2 a {
  width: 100%;
  height: 100%;
}

.pc-three-images-group .left figure {
  margin: 0;
  flex: 1;
  display: flex;
  aspect-ratio: 2 / 3;
  border-radius: 24px;
}

.pc-three-images-group .right div {
  margin: 0;
  flex: 1;
  display: flex;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
}

.works-single .main .page-content .pc-three-images-row-group {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
}

.works-single .main .page-content .pc-three-images-row-group div {
  height: 266px;
  flex: 1;
}

.works-single .main .page-content .pc-lr-image-description {
  display: flex;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans") !important;
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 60px;

  margin-top: 8px;
}

.works-single .main .page-content .pc-lr-image-description .left {
  flex: 1;
  /* padding-left: 28px; */
}

.works-single .main .page-content .pc-lr-image-description .right {
  flex: 1;
  padding-left: 28px;
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-lr-image-description {
    display: block;
    font-size: 12px;
  }
  .works-single .main .page-content .pc-lr-image-description .left,
  .works-single .main .page-content .pc-lr-image-description .right {
    display: inline;
    padding-left: 0;
  }
  .works-single .main .page-content .pc-lr-image-description .left > *,
  .works-single .main .page-content .pc-lr-image-description .right > * {
    display: inline;
    margin: 0;
    white-space: normal;
  }
  .works-single .main .page-content .pc-lr-image-description .left::after {
    content: " & ";
    display: inline;
    margin: 0 0.25em;
  }
}

.works-single .main .page-content .pc-four-image-description {
  display: flex;
  justify-content: space-between;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans") !important;
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 60px;
  /* padding-left: 28px; */

  margin-top: 8px;
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-lr-image-description {
    display: block;
    font-size: 12px;
    margin-bottom: 32px;
    padding: 0 8px;
  }
  html[lang="zh-TW"]
    .works-single
    .main
    .page-content
    .pc-lr-image-description {
    font-size: 14px;
    line-height: 150%; /* 21px */
    letter-spacing: 3px;
  }
  .works-single .main .page-content .pc-lr-image-description .left,
  .works-single .main .page-content .pc-lr-image-description .right {
    display: inline;
    padding-left: 0;
  }
  .works-single .main .page-content .pc-lr-image-description .left > *,
  .works-single .main .page-content .pc-lr-image-description .right > * {
    display: inline;
    margin: 0;
    white-space: normal;
  }
  .works-single .main .page-content .pc-lr-image-description .left::after {
    content: " & ";
    display: inline;
    margin: 0 0.25em;
  }
  html[lang="zh-TW"]
    .works-single
    .main
    .page-content
    .pc-lr-image-description
    .left::after {
    margin: 0;
  }
}

.works-single .main .page-content .pc-four-image-description .left {
  flex: 1;
}

.works-single .main .page-content .pc-four-image-description .right {
  flex: 0.234;
  padding-left: 24px;
}
@media (max-width: 525px) {
  .works-single .main .page-content .pc-four-image-description {
    display: block;
    font-size: 12px;
    margin-bottom: 32px;
    padding: 0 8px;
  }
  html[lang="zh-TW"]
    .works-single
    .main
    .page-content
    .pc-four-image-description {
    font-size: 14px;
    line-height: 150%; /* 21px */
    letter-spacing: 3px;
  }
  .works-single .main .page-content .pc-four-image-description .left,
  .works-single .main .page-content .pc-four-image-description .right {
    display: inline;
    padding-left: 0;
  }
  .works-single .main .page-content .pc-four-image-description .left > *,
  .works-single .main .page-content .pc-four-image-description .right > * {
    display: inline;
    margin: 0;
    white-space: normal;
  }
  .works-single .main .page-content .pc-four-image-description .left::after {
    content: " & ";
    display: inline;
    margin: 0 0.25em;
  }
}

.works-single .main .page-content .pc-three-image-description {
  display: flex;
  justify-content: space-between;
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Title, "Rethink Sans") !important;
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 60px;
  /* padding-left: 28px; */

  margin-top: 8px;
}

.works-single .main .page-content .pc-three-image-description .left {
  flex: 0.5;
}

.works-single .main .page-content .pc-three-image-description .right {
  padding-left: 36px;
  flex: 0.5;
}

@media (max-width: 525px) {
  .works-single .main .page-content .pc-three-image-description {
    display: block;
    font-size: 12px;
    margin-bottom: 32px;
    padding: 0 8px;
  }
  .works-single .main .page-content .pc-three-image-description .left,
  .works-single .main .page-content .pc-three-image-description .right {
    display: inline;
    padding-left: 0;
  }
  .works-single .main .page-content .pc-three-image-description .left > *,
  .works-single .main .page-content .pc-three-image-description .right > * {
    display: inline;
    margin: 0;
    white-space: normal;
  }
  .works-single .main .page-content .pc-three-image-description .left::after {
    content: " & ";
    display: inline;
    margin: 0 0.25em;
  }
}

.works-single .gallery-block .social-media {
  /* margin-top: 417px; */
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 18px;
}
@media (max-width: 1024px) {
  .works-single .gallery-block .social-media {
    margin-top: 28px;
  }
}

/* 全螢幕背景（暗色） */
.zoom-dialog {
  border: none;
  padding: 0;
  background: transparent;
  display: none; /* 關閉時不顯示（避免覆蓋 UA 的 display:none 規則） */
}

/* ✅ 只有開啟時才置中、鋪滿點擊區域 */
.zoom-dialog[open] {
  display: flex;
  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;
  margin: auto;
}

/* 背景遮罩 */
.zoom-dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
}

/* 圖片維持原本大小（或略做上限），點一下可關閉 */
.zoom-dialog img {
  width: auto;
  height: auto;
  max-width: 80vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  display: block;
  cursor: zoom-out; /* 提示可點一下關閉 */
}

/* 讓游標提示可點放大 */
.zoomable {
  cursor: zoom-in;
}

/* ================================
   自訂 Sassy Social Share Icon 樣式
   只顯示 Facebook 與 More，套用自家 SVG
   ================================ */

/* 先隱藏原本的 SVG / 字型 icon */
.extra-single .extra-main .middle a.heateor_sss_facebook svg,
.extra-single .extra-main .middle a.heateor_sss_facebook .heateor_sss_svg,
.extra-single .extra-main .middle a.heateor_sss_more svg,
.extra-single .extra-main .middle a.heateor_sss_more .heateor_sss_svg,
.extra-single .extra-main .middle a.heateor_sss_facebook span,
.extra-single .extra-main .middle a.heateor_sss_more span {
  display: none !important;
}

/* 統一每顆按鈕樣式 */
.extra-single .extra-main .middle .heateor_sss_sharing_container a {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 29px 29px !important;
  background-color: transparent !important;
  font-size: 0 !important; /* 移除字型 icon 佔位 */
  box-shadow: none !important;
  overflow: hidden !important; /* 防止內層東西撐開 */
}

.extra-single
  .extra-main
  .middle
  .heateor_sss_sharing_container
  a.heateor_sss_facebook {
  background-image: url("/wp-content/uploads/2025/09/facebook-icon.svg") !important;
}

.extra-single
  .extra-main
  .middle
  .heateor_sss_sharing_container
  a.heateor_sss_more {
  background-image: url("/wp-content/uploads/2025/09/more-sharing-icon.svg") !important;
}

/* 先隱藏原本的 SVG / 字型 icon */
.works-single .gallery-block a.heateor_sss_facebook svg,
.works-single .gallery-block a.heateor_sss_facebook .heateor_sss_svg,
.works-single .gallery-block a.heateor_sss_more svg,
.works-single .gallery-block a.heateor_sss_more .heateor_sss_svg,
.works-single .gallery-block a.heateor_sss_facebook span,
.works-single .gallery-block a.heateor_sss_more span {
  display: none !important;
}

/* 統一每顆按鈕樣式 */
.works-single .gallery-block .heateor_sss_sharing_container a {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 29px 29px !important;
  background-color: transparent !important;
  font-size: 0 !important; /* 移除字型 icon 佔位 */
  box-shadow: none !important;
  overflow: hidden !important; /* 防止內層東西撐開 */
}

.works-single .gallery-block a.heateor_sss_facebook {
  background-image: url("/wp-content/uploads/2025/09/facebook-icon.svg") !important;
}

.works-single .gallery-block a.heateor_sss_more {
  background-image: url("/wp-content/uploads/2025/09/more-sharing-icon.svg") !important;
}

/* Contact Page */
.contact-main-bg {
  background: var(--Main-Bg, #f6f4f4);
}
.contact-main {
  width: 100%;
  padding: 114px 7.813% 50px 7.813%;
  max-width: 1920px;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .contact-main {
    padding: 114px 150px 50px 150px;
  }
}
@media (max-width: 1300px) {
  html[lang="zh-TW"] .contact-main {
    padding: 98px 7.813% 50px 7.813%;
  }
}
@media (max-width: 768px) {
  .contact-main {
    background: #fff;
    padding: 0;
  }
  html[lang="zh-TW"] .contact-main {
    padding: 0;
  }
  .contact-main .header {
    background: var(--Main-Bg, #f6f4f4);
    padding-top: 68px;
  }
}
@media (max-width: 525px) {
  .contact-main .header {
    padding-top: 134px;
  }
}

.contact-main .header .bread {
  padding-top: 8px;
  padding-bottom: 51px;
}
html[lang="zh-TW"] .contact-main .header .bread {
  padding-top: 14px;
  padding-bottom: 54px;
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .contact-main .header .bread {
    padding-top: 14px;
    padding-bottom: 31px;
  }
}

html[lang="zh-TW"] .contact-main .header .title-block {
  display: flex;
  align-items: center;
  gap: 54px;
  background: var(--Main-Bg, #f6f4f4);
}
.contact-main .header .main-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 122px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
html[lang="zh-TW"] .contact-main .header .main-title {
  font-family: "Noto Sans TC";
  font-size: 140px;
}
@media (max-width: 1480px) {
  .contact-main .header .main-title {
    font-size: 100px;
  }
}
@media (max-width: 1200px) {
  html[lang="zh-TW"] .contact-main .header .main-title {
    font-size: 72px;
  }
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .contact-main .header .main-title,
  .contact-main .header .main-title {
    font-size: 72px;
    line-height: 140%;
    letter-spacing: 0.25px;
    padding: 0 16px;
    background: var(--Main-Bg, #f6f4f4);
  }

  .contact-main .header .bread {
    padding-top: 0;
    padding-left: 16px;
    padding-right: 16px;
    background: var(--Main-Bg, #f6f4f4);
    padding-bottom: 32px;
  }
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .contact-main .header .main-title,
  .contact-main .header .main-title {
    font-size: 36px;
  }
}
.contact-main .header .zh-line,
.contact-main .header .subtitle {
  display: none;
}
html[lang="zh-TW"] .contact-main .header .zh-line {
  display: block;
}
html[lang="zh-TW"] .contact-main .header .subtitle {
  display: block;
  color: var(--Headlines, #13120c);
  font-family: "Noto Sans TC";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1px;

  max-width: 45%;
  padding-top: 15px;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .contact-main .header .zh-line,
  html[lang="zh-TW"] .contact-main .header .subtitle {
    display: none;
  }
}

.contact-main .main.pc {
  width: 100%;
  display: flex;
  gap: 135px;
}
@media (max-width: 768px) {
  .contact-main .main.pc {
    display: none;
  }
}
.contact-main .main.pc .left {
  width: 35%;
}

.contact-main .main.pc .barcelona {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* margin-top: 51px; */
}

.contact-main .main.pc .taipei {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 60px;
  margin-bottom: 112px;
}

.contact-main .main.pc .title {
  color: var(--Body-text, #484740);
  font-family: "Noto Sans TC";
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 3px;
}

.contact-main .main.pc .info {
  display: flex;
  flex-direction: column;
  color: var(--Headlines, #13120c);
  font-family: "Noto Sans TC";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1px;
  max-width: 513px;
}

.contact-main .main.pc label {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-main .main.pc .name {
  margin-bottom: 56px;
  border-bottom: 1px solid #c8c8ca;
}

.contact-main .main.pc label.email {
  margin-bottom: 56px;
  border-bottom: 1px solid #c8c8ca;
  width: 235%;
}
@media (max-width: 1700px) {
  .contact-main .main.pc label.email {
    width: 220%;
  }
}
@media (max-width: 1400px) {
  .contact-main .main.pc label.email {
    width: 205%;
  }
}
@media (max-width: 1100px) {
  .contact-main .main.pc label.email {
    width: 190%;
  }
}
@media (max-width: 900px) {
  .contact-main .main.pc label.email {
    width: 175%;
  }
}

.contact-main .main.pc .name p,
.contact-main .main.pc .email p {
  color: var(--Body-text, #484740);
  font-family: "Noto Sans TC";
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 3px;
}

.contact-main .main.pc .name input,
.contact-main .main.pc .email input,
.contact-main .main.pc .name input::placeholder,
.contact-main .main.pc .email input::placeholder {
  color: var(--Body-text, #484740);
  font-family: "Noto Sans TC";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1px;

  border: none;
  background: var(--Main-Bg, #f6f4f4);

  width: 100%;
  padding-bottom: 16px;
}
.contact-main .main.pc .email input,
.contact-main .main.pc .email input::placeholder {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  line-height: 140%;
}

.contact-main .main.pc .name input:focus-visible,
.contact-main .main.pc .email input:focus-visible {
  outline: 2px solid #484740;
  outline-offset: 0px;
  border-radius: 12px;
}

.contact-main .main.pc .right {
  position: relative;
  flex: 1 0 0;
  max-width: 100%;
}

.contact-main .main.pc .right .wpcf7-form-control.wpcf7-wrap {
  width: 100%;
}

.contact-main .main.pc .right .wpcf7-form-control.wpcf7-textarea {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 555px !important;
  background-color: rgba(200, 200, 202, 0.3) !important;
  /* opacity: 0.3 !important; */
  border-radius: 24px;
  all: unset;
  resize: none;
  display: block;
  border-radius: 24px;
  padding: 24px;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
html[lang="zh-TW"]
  .contact-main
  .main.pc
  .right
  .wpcf7-form-control.wpcf7-textarea {
  min-height: 525px !important;
}

.contact-main .main.pc .right .submit-wrap {
  position: absolute;
  bottom: 25px;
  right: 0;
  display: flex;
  width: 258px;
  height: 70px;
  padding: 0 27px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 56px;
  border: 1px solid var(--Lines, #c8c8ca);
  cursor: pointer;
}

.contact-main .main.pc .right .submit-wrap input {
  position: relative;
  background-color: #f6f4f4;
  border: none;
  color: var(--Headlines, #13120c);
  text-align: center;
  font-family: "Noto Sans TC";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
}
.contact-main .main.pc .right .submit-wrap.zh input {
  font-family: "Noto Sans TC";
  font-size: 22px;
}

.contact-main .main.mb {
  display: none;
}
.contact-main .main.mb .bottom label input::placeholder,
.contact-main .main.mb .bottom label textarea::placeholder {
  color: var(--Headlines, #13120c);
}
@media (max-width: 768px) {
  .contact-main .main.mb {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 42px; */
    align-self: stretch;
  }
  .contact-main .main.mb .top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;

    padding: 0 8px;
    background: var(--Main-Bg, #f6f4f4);
  }
  .contact-main .main.mb .top .place {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 0 8px;
  }
  .contact-main .main.mb .top .place .title {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: var(--Font-Size-Body-2, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  html[lang="zh-TW"] .contact-main .main.mb .top .place .title {
    font-weight: 500;
    line-height: 150%; /* 21px */
    letter-spacing: 3px;
  }
  .contact-main .main.mb .top .place .info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .contact-main .main.mb .top .place .info .contact-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
  .contact-main .main.mb .top .place .info .contact-row span {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Title, "Rethink Sans");
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.15px;
  }
  .contact-main .main.mb .top .place .info .contact-row div {
    display: flex;
    /* align-items: center; */
    gap: 8px;
  }
  .contact-main .main.mb .top .middle-map {
    width: 100%;
    aspect-ratio: 377 / 256;
    border-radius: 18px;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .contact-main .main.mb .bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    align-self: stretch;

    padding: 0 8px;
    background: #fff;
    padding-top: 42px;
  }
  .contact-main .main.mb .bottom label {
    flex: 1;
    display: flex;
    padding: 0 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  .contact-main .main.mb .bottom label p {
    color: var(--Body-text, #484740);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.4px;
  }
  .contact-main .main.mb .bottom label span {
    width: 100%;
    border-bottom: 1px solid #c8c8ca;
  }
  .contact-main .main.mb .bottom label input {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.5px;

    width: 100%;
    border: none;
    background: #fff;
    padding-bottom: 16px;
  }
  .contact-main .main.mb .bottom label input:focus-visible,
  .contact-main .main.mb .bottom label textarea:focus-visible {
    outline: none;
  }
  .contact-main .main.mb .bottom label textarea {
    color: var(--Headlines, #13120c);
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.5px;

    width: 100%;
    border: none;

    height: 53px;
  }
  html[lang="zh-TW"] .contact-main .main.mb .bottom label textarea {
    height: 30px;
  }
  .contact-main .main.mb .bottom .submit-wrap {
    display: flex;
    justify-content: center;
    width: 87.27%;
    padding: 20px 10px;
    align-items: center;
    gap: 12px;

    border-radius: 56px;
    background: var(--Headlines, #13120c);

    margin-top: 10px;
    margin-bottom: 43.5px;
    margin-left: auto;
    margin-right: auto;
  }
  .contact-main .main.mb .bottom .submit-wrap input {
    border: none;

    color: var(--White, #fff);
    text-align: center;
    font-family: var(--Font-Family-Body, "Rethink Sans");
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.25px;
    text-transform: uppercase;

    background: var(--Headlines, #13120c);
  }
}
@media (max-width: 525px) {
  .contact-main .main.mb .bottom label p {
    font-size: var(--Font-Size-xs, 10px);
  }
  .contact-main .main.mb .bottom label input {
    font-size: var(--Font-Size-Body-1, 16px);
  }
  .contact-main .main.mb .bottom label textarea {
    font-size: var(--Font-Size-Body-1, 16px);
  }
  .contact-main .main.mb .bottom .submit-wrap input {
    font-size: var(--Font-Size-Body-2, 14px);
  }
}

.wpcf7-spinner {
  display: none;
}

.wpcf7 form .wpcf7-response-output {
  display: none !important;
}

/* Search Page */

.search-main {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 48px 7.813% 50px 7.813%;
}

.search-main .page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-main .page-title {
  color: var(--Headlines, #13120c);
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}

.search-main article {
  width: 100%;
  border-bottom: 1px solid #c8c8ca;
  padding: 16px 0;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

.search-main .custom-pagination {
  margin-top: 20px;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 140%;
}

.search-main .web_search {
  width: 15%;
}

.comments {
  width: 100%;
  margin-top: 40px;
}
@media (max-width: 525px) {
  .comments {
    border-top: 1px solid #c8c8ca;
    /* border-bottom: 1px solid #c8c8ca; */
    /* padding-bottom: 32px; */
  }
}

.comments .comments-area {
  width: 100%;
}
@media (max-width: 525px) {
  .comments .comments-area {
    padding: 0 8px;
  }
}

.comments .comments-area .comments-title {
  padding: 40px 0;
  display: flex;
  justify-content: space-between;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 525px) {
  .comments .comments-area .comments-title {
    padding: 34px 0px;

    font-size: var(--Font-Size-Body-1, 16px);
    font-weight: 700;
  }
}

.comments .comment-list .cmt {
  margin: 16px 0;
}

.comments .comment-list .children {
  width: 100%;
  padding-left: 4.44%;
}

.comments .comment-list .children .cmt {
  margin: 12px 0;
}

.comments .comment-list .children .cmt__body {
  padding-left: 83px;
}

.comments .comment-list .cmt__head {
  display: flex;
  gap: 23px;
}

.comments .comment-list .cmt__head .cmt__avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.comments .comment-list .cmt__head .cmt__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.comments .comment-list .cmt__head .cmt__info .cmt__author {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@media (max-width: 525px) {
  .comments .comment-list .cmt__head .cmt__info .cmt__author {
    font-size: var(--Font-Size-Body-1, 16px);
    font-weight: 700;
  }
}

.comments .comment-list .cmt__head .cmt__info .cmt__time {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.comments .comment-list .cmt__body {
  padding-left: 83px;
  margin-top: 12px;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: var(--Font-Size-H5, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

.comments .comment-list .cmt__body .cmt__actions {
  display: flex;
  gap: 12px;
  font-size: var(--Font-Size-Body-1, 16px);
  color: var(--Body-text, #484740);
}

.comments .comment-list .cmt__body .cmt__actions .comment-edit-link:hover,
.comments .comment-list .cmt__body .cmt__actions .comment-reply-link:hover {
  color: var(--Headlines, #13120c);
  font-weight: 600;
}

.comments .comment-respond {
  width: 100%;
  margin-top: 30px;
}

.comments .comment-respond .comment-reply-title {
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}

.comments .comment-respond .comment-form {
  width: 100%;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.comments .comment-respond .comment-form .comment-notes,
.comments .comment-respond .comment-form .comment-form-cookies-consent {
  display: none;
}

.comments .comment-respond .comment-form .cmt-form-field textarea {
  padding: 12px;
  width: 98%;
  margin: 12px 1%;
  background-color: rgba(200, 200, 202, 0.3);
  border: none;
  border-radius: 16px;

  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

.comments
  .comment-respond
  .comment-form
  .cmt-form-field
  textarea:focus-visible {
  outline: 2px solid #484740;
  outline-offset: 0px;
  border-radius: 12px;
}

.comments .comment-respond .comment-form .form-submit {
  position: relative;
  display: flex;
  width: 228px;
  height: 60px;
  padding: 0 20px;
  margin-top: 12px;
  align-self: flex-end;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 56px;
  border: 1px solid var(--Lines, #c8c8ca);

  color: var(--Headlines, #13120c);
  text-align: center;
  font-family: "Noto Sans TC";
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.35 ease;
}

.comments .comment-respond .comment-form .form-submit:hover {
  background-color: var(--Lines, #c8c8ca);
}

.comments .comment-respond .comment-form .form-submit::before {
  content: "";
  position: absolute;
  right: 250px;
  top: 50%;
  transform: translateY(-50%);
  width: 692px;
  max-width: 100%;
  height: 1px;
  background-color: var(--Lines, #c8c8ca);
  /* opacity: 0.8; */
}

.comments .no-comments {
  color: var(--Body-text, #484740);
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}

/* 子留言容器的淡入小動畫（展開時每個 li 輕微浮現） */
.replies-panel .children > li {
  animation: replies-fade 0.28s ease both;
}
@keyframes replies-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 收合狀態下隱藏查看更多留言（不佔空間、不被點擊） */
.is-collapsed .replies-toggle-wrap {
  opacity: 0;
  pointer-events: none;
  height: 0;
  margin: 0;
  overflow: hidden;
  transition:
    opacity 0.3s ease,
    height 0.3s ease,
    margin 0.3s ease;
}

/* 展開後再出現 */
.replies-toggle-wrap {
  opacity: 1;
  pointer-events: auto;
  height: auto;
  margin-top: 12px;
  transition:
    opacity 0.3s ease,
    height 0.3s ease,
    margin 0.3s ease;
}

/* 「查看所有留言 / 收起留言」按鈕 */
.replies-toggle {
  margin-top: 20px;
  padding: 5px 0;
  color: var(--Headlines, #13120c);
  font-size: 14px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.replies-toggle:hover {
  text-decoration: underline;
  color: var(--Headlines, #13120c);
}

/* 折疊狀態：只顯示最新一則（第 1 個 li），隱藏其餘 & 隱藏回覆清單與表單 */
.comments-area.is-collapsed .comment-list > li:not(:first-child) {
  display: none;
}
.comments-area.is-collapsed .comment-list > li:first-child .children {
  display: none;
}
.comments-area.is-collapsed #respond {
  display: none;
}

/* 膠囊按鈕（依你現有風格，可微調） */
.comments-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 24px 0;
  padding: 22px 0;
  border-radius: 9999px;
  background: var(--Headlines, #13120c);
  color: var(--White, #fff);
  text-align: center;
  font-family: var(--Font-Family-Body, "Rethink Sans");
  font-size: var(--Font-Size-Body-2, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
html[lang="zh-TW"] .comments-toggle {
  font-weight: 700;
  font-size: 22px;
  line-height: 100%;
  letter-spacing: 3px;
  padding: 19px 0;
}
@media (max-width: 525px) {
  html[lang="zh-TW"] .comments-toggle {
    font-size: var(--Font-Size-Body-2, 14px);
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.25px;
    padding: 20px 0;
  }
}
.comments-toggle:hover {
  opacity: 0.9;
}

.comments-toggle .plus {
  font-weight: 600;
}

/* 可動畫的容器：高度與透明度過渡 */
.comments-area .comments-panel {
  overflow: hidden;
  transition:
    max-height 400ms ease,
    opacity 300ms ease;
  will-change: max-height, opacity;
}

/* 初始：收合狀態只露出第一則留言的高度；隱藏其餘與回覆清單、表單 */
.comments-area.is-collapsed .comments-panel {
  opacity: 1; /* 仍可見，但只顯示上半段 */
}
.comments-area.is-collapsed .comment-list > li:not(:first-child) {
  display: block;
} /* 讓 JS 控高度，不用 display:none */
.comments-area.is-collapsed .comment-list > li:first-child .children {
  display: none;
} /* 第一則的子回覆先收起 */

/* 展開後：讓子項有淡入 */
.comments-area:not(.is-collapsed) .comment-list > li {
  animation: cmt-fadein 280ms ease both;
}
@keyframes cmt-fadein {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 按鈕展開時加一點視覺狀態 */
.comments-toggle[aria-expanded="true"] .plus {
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

/* 統一縮圖格 */
.lg-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lg-grid a.thumb {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.lg-grid a.thumb img {
  width: 240px;
  height: 160px;
  object-fit: cover;
  display: block;
}

/* 第 3 張上的 +N 遮罩 */
.lg-grid .thumb .lg-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-weight: 700;
  font-size: 28px;
}

/* 想隱藏但仍讓 lightGallery 收錄，用 display:none 也可以（LG 會照樣抓到 DOM） */
.lg-grid a.thumb.is-hidden {
  display: none;
}

/* 讓所有中文頁面的 body 套字體 */
body:lang(zh),
html[lang^="zh"] body {
  font-family: "Noto Sans TC" !important;
}

/* 如果 theme 內很多文字沒被 lang 繼承，再用通殺確保所有文字改變 */
body:lang(zh) *,
html[lang^="zh"] body * {
  font-family: "Noto Sans TC" !important;
}

.gallery-block {
  margin-top: 167px;
  padding-bottom: 24px;
  border-bottom: 1px solid #c8c8ca;
  display: flex;
  flex-direction: column;
  /* gap: 417px; */
}
@media (max-width: 768px) {
  .gallery-block {
    border-bottom: none;
    margin-bottom: 8px;
    margin-top: 32px;
  }
}
.gallery-top.has-gallery {
  margin-bottom: 417px;
}
@media (max-width: 768px) {
  .gallery-top.has-gallery {
    margin-bottom: 89px;
  }
}
.gallery-title {
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-weight: 500;
  font-size: 28px;
  line-height: 140%;
  letter-spacing: 0;
  text-transform: uppercase;

  margin-bottom: 52px;
}
.gallery {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 14px;
}
@media (max-width: 768px) {
  .gallery-title {
    margin-bottom: 32px;
    padding: 0 8px;
  }
  .gallery {
    padding: 0 8px;
    gap: 16px 6px;
  }
}

.gallery .gallery-item {
  width: calc((100% - 70px) / 6);
  aspect-ratio: 1 / 1;
  border-radius: 24px;
}
@media (max-width: 768px) {
  .gallery .gallery-item {
    width: calc((100% - 18px) / 4);
  }
}
.gallery .gallery-item img {
  border-radius: 24px;
}

.award-list-word {
  list-style-position: outside;
  padding-left: 0;
}

.award-list-word li {
  padding-left: 3.7em; /* 控制換行後的對齊位置 */
  text-indent: -3.7em; /* 把年份拉回左邊 */
  margin-bottom: 0.2em;
}

/* 1) 讓外層整串文字（包含 " / " 的文字節點）消失 */
#breadcrumbs > span {
  font-size: 0;
}

/* 2) 把真正的麵包屑文字字級救回來 */
#breadcrumbs > span > span,
#breadcrumbs > span > span a {
  font-size: 14px;
}
@media (max-width: 525px) {
  #breadcrumbs > span > span,
  #breadcrumbs > span > span a {
    font-size: 8px;
  }
}

/* 3) 用 CSS 自己加分隔符號，並控制左右間距 */
#breadcrumbs > span > span:not(:first-of-type)::before {
  content: "/";
  display: inline-block;
  margin: 0 4px;
  color: #484740;
}

.slug-privacy-policy {
  padding: 120px 7.813%;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-style: normal;
  font-weight: 400;
  line-height: 140%;

  background: var(--Main-Bg, #f6f4f4);
}
.slug-privacy-policy p {
  margin-bottom: 24px;
}