: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;
}

body {
  /* max-width: 1920px; */
  margin: 0 auto;
}

* {
  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 */

.site-header {
  width: 100%;
  height: 66.6px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 19px 16px 19px 28px;
  background-color: var(--Main-Bg, #f6f4f4);
  transition: all 0.3s ease-in-out;

  /* position: sticky;
  top: 0;
  z-index: 1688; */
}
@media (min-width: 3800px) {
  .site-header {
    padding: 64px 24px 64px 24px;
  }
}
@media (max-width: 850px) {
  body.menu-open .site-header {
    height: auto;
    padding: 64px 16px 0 16px;
    background-color: var(--White, #fff);
  }
}
@media (max-width: 425px) {
  .site-header {
    height: auto;
    padding: 64px 16px 32px 16px;
    position: sticky;
    top: 0;
    z-index: 1688;
  }
}

.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%;
  }
}

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

.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: 850px) {
  .web_nav ul {
    display: none;
  }
}

.web_nav ul .accordion-item-li {
  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 {
  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: 940px) {
  .site .web_nav ul li span {
    font-size: 16px;
  }
}

.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;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@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;
}

.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: 93%;
  display: flex;
  padding: 24px 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 */
.home-header {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 48px 3.125% 24px 3.125%;
  position: relative;
}
html[lang="zh-TW"] .home-header {
  display: flex;
  align-items: center;
  gap: 54px;
  padding: 95px 3.125% 24px 3.125%;
}
@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: 425px) {
  .home-header {
    padding: 0px 16px 24px 16px;
  }
}

.home-header .zh-line {
  display: none;
}
html[lang="zh-TW"] .home-header .zh-line {
  display: block;
}
@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: 136px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
html[lang="zh-TW"] .home-header .title {
  width: auto;
}
.home-header .sub-title {
  position: absolute;
  top: 64%;
  left: 3.125%;
  color: var(--Body-text, #484740);
  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: 1850px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 100px;
  }
  .home-header .title {
    font-size: 116px;
  }
  .home-header .sub-title {
    top: 61%;
  }
}
@media (max-width: 1700px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 120px;
  }
}
@media (max-width: 1660px) {
  .home-header .title {
    font-size: 96px;
  }
  .home-header .sub-title {
    top: 57%;
  }
}
@media (max-width: 1520px) {
  .home-header .title {
    font-size: 82px;
  }
  html[lang="zh-TW"] .home-header .title {
    font-size: 92px;
  }
  .home-header .sub-title {
    top: 52%;
  }
}
@media (max-width: 1350px) {
  .home-header .title {
    font-size: 76px;
  }
  html[lang="zh-TW"] .home-header .title {
    font-size: 85px;
  }
  .home-header .sub-title {
    top: 55%;
    font-size: 28px;
  }
}
@media (max-width: 1280px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 72px;
  }
}
@media (max-width: 1180px) {
  .home-header .title {
    font-size: 66px;
  }
  .home-header .sub-title {
    top: 57%;
    font-size: 24px;
  }
}
@media (max-width: 1150px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 60px;
  }
}
@media (max-width: 1024px) {
  .home-header .title {
    font-size: 56px;
  }
  html[lang="zh-TW"] .home-header .title {
    font-size: 52px;
  }
  .home-header .sub-title {
    font-size: 20px;
  }
}
@media (max-width: 950px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 44px;
  }
}
@media (max-width: 850px) {
  .home-header .title {
    font-size: 48px;
  }
  .home-header .sub-title {
    top: 61%;
    font-size: 16px;
    line-height: 130%;
  }
}
@media (max-width: 790px) {
  html[lang="zh-TW"] .home-header .title {
    font-size: 42px;
  }
  .home-header .title {
    font-size: 60px;
  }
}
@media (max-width: 600px) {
  .home-header .title {
    font-size: 44px;
  }
}
@media (max-width: 425px) {
  .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: 36px;
    font-weight: 400;
    font-family: "Noto Sans TC";
    line-height: 150%;
    letter-spacing: 0.25px;
    padding-top: 0px;
  }
}

@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;
  }
  .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 {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 12px 3.125%;
}
@media (max-width: 425px) {
  .home-hero {
    padding: 12px 8px;
  }
}

.home-hero .hero {
  position: relative;
  border-radius: 24px;
  width: 100%;
  aspect-ratio: 1800/1012;
  background-size: contain;
  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;
  }
}

.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: 425px) {
  .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 {
  position: relative;
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  display: flex;
  justify-content: center;
  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;
}

@media (max-width: 768px) {
  .home-profile .title {
    width: fit-content;
    text-align: start;
    padding-left: 12px;
  }
}

.home-profile .profile {
  width: 100%;
  aspect-ratio: 1920/1080;
  background-size: 72% auto;
  background-repeat: no-repeat;
  background-position: center;
  padding: 68px 3.125%;
}
@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: 425px) {
  .home-profile .profile {
    background-position: center 10%;
    padding: 68px 16px 0 16px;
  }
  html[lang="zh-TW"] .home-profile .profile {
    padding: 31px 16px 0 16px;
  }
}

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

  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;
}
html[lang="zh-TW"] .home-profile .top-title {
  margin-top: 356px;

  font-size: var(--Font-Size-H4, 34px);
  letter-spacing: 0.25px;
}
@media (max-width: 768px) {
  .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: 620px) {
  .home-profile .top-title {
    font-size: 40px;
  }
}
@media (max-width: 425px) {
  .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;
  }
  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: 100px;
  color: var(--Headlines, #13120c);
  text-align: center;
  font-feature-settings: "liga" off;
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 120px;
  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";
  margin-top: 32px;
  font-size: 72px;
  letter-spacing: -0.75px;
}
@media (max-width: 1024px) {
  .home-profile .bottom-title {
    margin-top: 0px;
    font-size: 90px;
    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: 425px) {
  .home-profile .bottom-title {
    font-size: 34px;
    min-height: 88px;
  }
  html[lang="zh-TW"] .home-profile .bottom-title {
    margin-top: 21px;

    font-size: 34px;
    line-height: 150%;
    letter-spacing: 0.25px;
  }
}

.home-profile .steps-list {
  margin-top: 170px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
  align-self: stretch;
}
@media (max-width: 1024px) {
  .home-profile .steps-list {
    margin-top: 90px;
    flex-direction: column;
  }
}
@media (max-width: 425px) {
  .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;
}
@media (max-width: 425px) {
  .home-profile .steps {
    gap: 16px;
  }
}

.home-profile .steps .icon {
  width: 48px;
  height: 48px;
}
@media (max-width: 425px) {
  .home-profile .steps .icon {
    width: 26px;
    height: 26px;
  }
}
.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;
}
html[lang="zh-TW"] .home-profile .steps .desc {
  font-family: "Noto Sans TC";
  line-height: 150%;
}
@media (max-width: 425px) {
  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 {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 68px 3.125%;
  border-radius: 0 0 60px 60px;
}
@media (max-width: 768px) {
  .home-awards {
    border-radius: 0;
    padding: 64px 16px;
  }
}

.home-awards .head {
  display: flex;
  width: 100%;
  height: 22px;
  align-items: center;
  gap: 30px;
  flex-shrink: 0;
}

.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;
}

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

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

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

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

.home-awards .awards-list {
  width: 100%;
  padding: 64px 121px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 60px;
}
@media (max-width: 1440px) {
  .home-awards .awards-list {
    padding: 60px 4.2%;
  }
}
@media (max-width: 1024px) {
  .home-awards .awards-list {
    padding: 60px 0;
    gap: 30px;
  }
}
@media (max-width: 425px) {
  .home-awards .awards-list {
    padding: 30px 0;
    gap: 24px 12px;
    justify-content: space-between;
  }
}
@media (max-width: 350px) {
  .home-awards .awards-list {
    gap: 24px 4px;
  }
}

.home-awards .awards-list .award {
  width: auto;
  height: 113px;
  margin-right: 39px;
  cursor: pointer;

  transition: transform 0.3s ease;
}
.home-awards .awards-list .award:hover {
  transform: scale(1.05);
}

@media (max-width: 1024px) {
  .home-awards .awards-list .award {
    height: 70px;
    margin-right: 25px;
  }
}
@media (max-width: 768px) {
  .home-awards .awards-list .award {
    height: 52px;
    margin-right: 15px;
  }
}
@media (max-width: 425px) {
  .home-awards .awards-list .award {
    height: 35px;
    margin-right: 0;
  }
}

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

.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: 425px) {
  .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: 130px 3.125% 30px 3.125%;
}
.home-slider .swiper.overlap {
  overflow: hidden;
  padding: 20px 0;
  border-radius: 32px;
}
.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;
}

.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: 15%;
  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;
}

@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;
  }
  .home-slider-mobile .hsm-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-radius: 24px;
    background: var(--White, #fff);
    padding: 8px;
    margin-bottom: 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;
  }
}
@media (max-width: 425px) {
  .home-slider-mobile .hsm-all {
    padding: 16px 27px;
  }
  .home-slider-mobile .hsm-meta {
    padding: 4px 16px;
  }
}

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

.home-legacy {
  display: block;
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 68px 3.125%;
  border-radius: 60px 60px 0 0;

  padding-block: 68px;
  /* height: 120vh; */
}
@media (max-width: 768px) {
  .home-legacy {
    border-radius: 0;

    padding-block: 0;
    height: auto;
    padding: 68px 16px 0 16px;
  }
}

.home-legacy .header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 106px;
}
@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;
}

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

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

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

  position: sticky;
  top: 0;
  overflow: hidden;
}
@media (max-width: 425px) {
  .home-legacy .head {
    gap: 30px;
  }
}

html[lang="zh-TW"] .home-legacy .head .title-block {
  display: flex;
  align-items: center;
  gap: 37px;

  margin-top: 50px;
}
@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: var(--Font-Size-H1, 96px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
html[lang="zh-TW"] .home-legacy .head .strong-title {
  color: var(--Headlines, #13120c);
  font-family: "Noto Sans TC";
  font-size: 88px;
  line-height: 140%;
  letter-spacing: 0.25px;
  /* white-space: nowrap; */
}
@media (max-width: 1600px) {
  .home-legacy .head .strong-title,
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 72px;
  }
}
@media (max-width: 1200px) {
  .home-legacy .head .strong-title,
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 62px;
  }
}
@media (max-width: 1024px) {
  .home-legacy .head .strong-title,
  html[lang="zh-TW"] .home-legacy .head .strong-title {
    font-size: 48px;
    margin-top: 24px;
  }
}
@media (max-width: 425px) {
  .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;
  }
  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;

    white-space: normal;
  }
}
.home-legacy .head .zh-line {
  display: none;
}
html[lang="zh-TW"] .home-legacy .head .zh-line {
  display: block;
}
@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;
}
html[lang="zh-TW"] .home-legacy .head .subtitle.mb {
  display: none;
}
@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: 425px) {
  html[lang="zh-TW"] .home-legacy .head .subtitle.mb {
    font-family: "Noto Sans TC";
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.5px;
  }
}

/* 舞台：只決定這一帶的高度，別用 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: 425px) {
  .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: 425px) {
  .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: 425px) {
  .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: 2px;
}

@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: 425px) {
  .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 {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 68px 3.125%;
}

@media (max-width: 425px) {
  .home-clients {
    padding: 32px 3.125% 0 3.125%;
  }
}

.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;
}
.home-clients .mb-line {
  display: none;
}
@media (max-width: 425px) {
  .home-clients .mb-line {
    display: block;
  }
  .home-clients .pc-line {
    display: none;
  }
  .home-clients .pc-dot {
    display: none;
  }
}

.home-clients .clients-list {
  width: 100%;
  padding: 64px 6.25%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 47px;
}
@media (max-width: 1024px) {
  .home-clients .clients-list {
    padding: 64px 3.125%;
  }
}
@media (max-width: 768px) {
  .home-clients .clients-list {
    padding: 60px 30px;
    gap: 30px;
  }
}
@media (max-width: 425px) {
  .home-clients .clients-list {
    padding: 24px 0;
    gap: 25px;
    justify-content: space-between;
  }
}
@media (max-width: 330px) {
  .home-clients .clients-list {
    padding: 24px 0;
    gap: auto;
    justify-content: center;
  }
}

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

@media (max-width: 768px) {
  .home-clients .clients-list .client {
    max-width: 170px;
  }
}

@media (max-width: 425px) {
  .home-clients .clients-list .client {
    max-width: 90px;
    height: 50px;
    margin-right: 0;
  }
}

.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 {
  display: block;
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 68px 3.125%;
}
@media (max-width: 425px) {
  .home-resources {
    padding: 53px 8px 32px 8px;
  }
}

.home-resources .head {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 68px;
}
@media (max-width: 768px) {
  .home-resources .head {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 40px;
  }
}
@media (max-width: 425px) {
  .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 {
  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: 425px) {
  .home-resources .head .title {
    justify-content: start;
    padding: 0 8px;
  }
}

.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: 768px) {
  .home-resources .head .main-title {
    font-size: 72px;
    margin-top: 44px;
  }
}
@media (max-width: 425px) {
  .home-resources .head .main-title {
    font-size: var(--Font-Size-H4, 34px);
    padding: 0 8px;
  }
}

.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%;
}
@media (max-width: 768px) {
  .home-resources .head .sub-title {
    text-align: start;
  }
}
@media (max-width: 425px) {
  .home-resources .head .sub-title {
    padding: 0 8px;
  }
  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 3.125% 54px 3.125%;
}
.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;
}

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

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

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

.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;
}

.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: 15.8%;
  padding: 27px;
  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;
}
@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;
  }
  .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;
  }
}
@media (max-width: 425px) {
  .mobile-card .all-button-mb {
    padding: 16px 27px;
  }
}

/* Footer */
.site-footer {
  width: 100%;
  background: var(--Light-BG, #e5e5e5);
  padding: 68px 3.125%;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 32px 1.5%;
  }
}

@media (max-width: 425px) {
  .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: 425px) {
  .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: 425px) {
  .site-footer .footer_mobile_nav ul li {
    font-size: 14px;
  }
}

.site-footer .footer-main {
  width: 100%;
  border-radius: 24px;
  padding: 59px 24%;
  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: 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: 1024px) {
  .site-footer .footer-main .footer-title {
    font-size: 72px;
  }
}
@media (max-width: 768px) {
  .site-footer .footer-main .footer-title {
    font-size: 56px;
  }
}
@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);
}
@media (max-width: 425px) {
  .site-footer .footer-main .more-button {
    width: 80%;
    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: 425px) {
  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: 4px 4px 4px 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%;
}
@media (max-width: 1024px) {
  .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 {
  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: 425px) {
  .site-footer .footer-subscribe .email input {
    font-size: 18px;
  }
}

.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: 15%;
  padding: 16px;
  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;
  }
}

.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: 1440px) {
  .site-footer .footer-nav li a {
    font-size: 35px;
  }
}

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

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

.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%;
  }

  .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;
  }

  .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-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: 425px) {
  .site-footer .footer-bottom-mobile .footer-info .infos .info .title,
  .site-footer .footer-bottom-mobile .footer-info .infos .info .desc {
    font-size: 14px;
  }
  .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 {
  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;
}
.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 {
  width: 100%;
  border-radius: 0 0 60px 60px;
  padding: 80px 3.125% 68px 3.125%;
  background: var(--Main-Bg, #f6f4f4);
}
@media (max-width: 1024px) {
  .about-main .top {
    padding: 68px 3.125% 48px 3.125%;
    border-radius: 0px;
  }
}
@media (max-width: 425px) {
  .about-main .top {
    padding: 0 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: 23%;
}
@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: 425px) {
  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;
}
@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: 425px) {
  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: 136px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
@media (max-width: 1024px) {
  .about-main .top .main-title {
    font-size: 100px;
  }
}
@media (max-width: 768px) {
  .about-main .top .main-title {
    font-size: 72px;
  }
}
@media (max-width: 425px) {
  .about-main .top .main-title {
    font-size: 36px;
    letter-spacing: 0.25px;
    line-height: 140%;
  }
}

.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: 425px) {
  .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;
}
@media (max-width: 768px) {
  .about-main .service {
    margin-top: 40px;
  }
}
@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: 425px) {
  .about-main .service .service-intro {
    margin-top: 49px;
    gap: 32px;
  }
}

.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 {
  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: 768px) {
  .about-main .service .service-intro .service-title {
    font-size: 40px;
  }
}
@media (max-width: 425px) {
  .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-mb-line,
html[lang="zh-TW"] .about-main .service .service-intro .zh-mb-line {
  display: none;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .about-main .service .service-intro .zh-mb-line {
    display: block;
  }
}

.about-main .service .service-intro .service-images {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16.6%;
}
@media (max-width: 1640px) {
  .about-main .service .service-intro .service-images {
    padding: 0 10%;
  }
}
@media (max-width: 1440px) {
  .about-main .service .service-intro .service-images {
    padding: 0 5%;
  }
}
@media (max-width: 1200px) {
  .about-main .service .service-intro .service-images {
    padding: 0;
  }
}

.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: 425px) {
  .about-main .service .service-intro .service-images img {
    max-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 {
  width: 100%;
  padding: 0 18%;
  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: 1024px) {
  .about-main .service .service-intro .service-description {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .about-main .service .service-intro .service-description {
    font-size: var(--Font-Size-Body-1, 16px);
    letter-spacing: 0.5px;
    padding: 0 8px;
  }
}

.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;
  }
}

.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%;
}
@media (max-width: 1024px) {
  .about-main .service .service-intro .find-title {
    margin-bottom: 40px;
  }
}
@media (max-width: 425px) {
  .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: 60px;
}
html[lang="zh-TW"] .about-main .service .service-intro .find-desc .desc-group {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
@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: 425px) {
  .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: 425px) {
  .about-main .service .service-intro .find-desc img {
    width: 26px;
    height: 26px;
  }
}

.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;
}
@media (max-width: 425px) {
  .about-main .service .service-intro .find-desc .desc {
    font-size: var(--Font-Size-Body-2, 14px);
    letter-spacing: 0.25px;
  }
}

.about-main .more-btn {
  display: flex;
  width: 278px;
  padding: 27px;
  justify-content: center;
  align-items: center;
  border-radius: 56px;
  background: var(--Headlines, #13120c);
}
@media (max-width: 768px) {
  .about-main .more-btn.server {
    display: none;
  }
  .about-main .more-btn {
    margin: 0 auto;
  }
}

.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;
}
html[lang="zh-TW"] .about-main .service .service-intro .service-title {
  order: 2;
}
html[lang="zh-TW"] .about-main .service .service-intro .zh-mb-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;
}
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;
}

.about-main .middle {
  width: 100%;
  padding: 102px 11% 102px 3.125%;
}
@media (max-width: 1024px) {
  .about-main .middle {
    padding: 50px 3.125%;
    background: var(--Main-Bg, #f6f4f4);
  }
}
@media (max-width: 425px) {
  .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: 425px) {
  .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: 28.5%;
  margin-bottom: 152px;
}

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

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

.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: 425px) {
  .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;
}
@media (max-width: 768px) {
  .about-main .middle .awards-items .header .desc {
    padding: 0 8px;
  }
}

.about-main .middle .awards-items .award-video {
  margin-top: 82px;
  margin-bottom: 60px;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
@media (max-width: 768px) {
  .about-main .middle .awards-items .award-video {
    margin: 40px 0;
  }
}
@media (max-width: 425px) {
  .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%;
}
@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: 425px) {
  .about-main .middle .awards-items .mobile-award-icons {
    padding: 0;
    gap: 18px;
    justify-content: space-between;
  }
}

.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: 425px) {
  .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: 768px) {
  .about-main .middle .awards-list {
    margin-top: 32px;
    padding: 24px 0;
  }
}

.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: 425px) {
  .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: 27px;
  justify-content: center;
  align-items: center;
  border-radius: 56px;
  background: var(--Headlines, #13120c);
}
@media (max-width: 768px) {
  .about-main .middle .more-btn {
    width: 100%;
  }
}

.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%;
}
@media (max-width: 768px) {
  .about-main .middle .more-btn p {
    font-weight: 400;
  }
}

.twba-items {
  margin: -15px 11% 101px 28.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: 86px;
}
@media (max-width: 768px) {
  .twba-items .header {
    gap: 32px;
  }
}
@media (max-width: 425px) {
  .twba-items .header {
    gap: 16px;
  }
}

.twba-items .header .main-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%;
}
@media (max-width: 425px) {
  .twba-items .header .main-title {
    font-size: var(--Font-Size-H4, 34px);
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  html[lang="zh-TW"] .twba-items .header .main-title {
    font-family: "Noto Sans TC";
    font-size: 24px;
    line-height: 150%;
    letter-spacing: -1px;
  }
}

.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;
}
@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: 425px) {
  .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: 60%;
  margin: 0 auto;
}
@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: 425px) {
  .twba-items .twba-image img {
    margin-top: 40px;
  }
}

.about-main .bottom {
  width: 100%;
  padding: 102px 11% 102px 3.125%;
  background: var(--Main-Bg, #f6f4f4);
  border-radius: 60px 60px 0 0;
}
@media (max-width: 1024px) {
  .about-main .bottom {
    border-radius: 0;
    padding: 24px 3.125%;
  }
}
@media (max-width: 425px) {
  .about-main .bottom {
    padding: 24px 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;
  text-wrap: 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: 28.5%;
  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;
}
html[lang="zh-TW"] .about-main .bottom .organization-items .header {
  border-bottom: 1px solid var(--Lines, #c8c8ca);
}
@media (max-width: 1024px) {
  .about-main .bottom .organization-items .header {
    padding: 0;
  }
}
@media (max-width: 425px) {
  .about-main .bottom .organization-items .header {
    gap: 16px;
  }
}

.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: 425px) {
  .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: 174px;
}
@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: 425px) {
  .about-main .bottom .organization-items .header .mb-desc {
    font-size: var(--Font-Size-Body-1, 16px);
  }
}

.about-main .bottom .organization-items .partner-cards {
  width: 100%;
  max-width: 1190px;
  flex-shrink: 0;
}

/* 手風琴開合 */
.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;
}
@media (max-width: 768px) {
  .about-main .bottom .organization-items .partner-cards .partner-title {
    text-align: center;
  }
}

.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;
}
@media (max-width: 768px) {
  .about-main .bottom .organization-items .partner-cards .partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}

.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;
}
@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: 29px;
}
@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: 300;
  line-height: 140%;
  letter-spacing: 0.15px;
}
@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: 122px;
  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 {
  width: 100%;
  padding: 0px 3.125% 68px 3.125%;
  background: var(--Main-Bg, #f6f4f4);
}
html[lang="zh-TW"] .awards-main .header {
  padding: 58px 3.125% 68px 3.125%;
}
@media (max-width: 768px) {
  .awards-main .header.top {
    padding: 0px 3.125% 60px 3.125%;
  }
}
@media (max-width: 425px) {
  .awards-main .header.top {
    padding: 0px 8px 44px 8px;
  }
  .awards-main .header.twba {
    padding: 0;
  }
}

.awards-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;
}
@media (max-width: 1024px) {
  .awards-main .header .main-title {
    font-size: 100px;

    padding-top: 24px;
  }
}
@media (max-width: 768px) {
  .awards-main .header .main-title {
    font-size: 80px;
  }
}
@media (max-width: 425px) {
  .awards-main .header .main-title {
    font-size: 36px;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}

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

.awards-main .header .hero-video {
  margin-bottom: 60px;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
@media (max-width: 425px) {
  .awards-main .header .hero-video {
    padding-bottom: 76.1%;
  }
}

.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%;
  margin-bottom: 117px;
}
@media (max-width: 425px) {
  .awards-main .header .awards-section {
    margin-bottom: 0;
  }
}

.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: 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: 425px) {
  .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-main .header .awards-icons {
  display: flex;
  flex-wrap: wrap;
  width: 96%;
  justify-content: center;
  align-items: center;
  gap: 109px;
  margin-top: 135px;
}
@media (max-width: 768px) {
  .awards-main .header .awards-icons {
    width: 100%;
    justify-content: space-between;
    gap: 30px;
    margin-top: 60px;
  }
}
@media (max-width: 425px) {
  .awards-main .header .awards-icons {
    gap: 15px;
  }
}

.awards-main .header .awards-icons .awards-icon {
  height: 113px;
  width: auto;
  max-width: 230px;
}
@media (max-width: 768px) {
  .awards-main .header .awards-icons .awards-icon {
    height: 70px;
  }
}
@media (max-width: 425px) {
  .awards-main .header .awards-icons .awards-icon {
    height: 35px;
  }
}

.awards-main .header .awards-icons .awards-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.awards-main .awards-links {
  width: 100%;
  padding: 0 3.125% 68px 3.125%;
  background: var(--Main-Bg, #f6f4f4);
}
@media (max-width: 425px) {
  .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: -15px;
  margin-left: 28.5%;
  margin-bottom: 152px;
}
@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: 425px) {
  .awards-main .awards-links .awards-links-section {
    margin-bottom: 0px;
    margin-top: 56px;
  }
}

@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;
  margin-bottom: 30px;
}
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: 425px) {
  .awards-main .awards-links .main-title {
    color: var(--Dark-BG, #363130);
    font-size: var(--Font-Size-H5, 24px);
    margin-bottom: 16px;

    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: var(--Font-Size-H5, 24px);
  }
}

.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;
}
@media (max-width: 425px) {
  .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: 425px) {
  .awards-main .awards-links .awards-images {
    margin-top: 24px;
    margin-bottom: 49px;
  }
}
.awards-main .awards-links .awards-images img {
  flex: 1;
}

.awards-main .awards-links .pc-line {
  max-width: 100%;
}

/* IMO team */
.team-main {
  background: var(--Main-Bg, #f6f4f4);
}

.team-main .header {
  width: 100%;
  padding: 80px 3.125% 102px 3.125%;
}
@media (max-width: 768px) {
  .team-main .header {
    padding: 0px 3.125% 48px 3.125%;
  }
}
@media (max-width: 425px) {
  .team-main .header {
    padding: 0px 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: 136px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
@media (max-width: 1024px) {
  .team-main .header .main-title {
    font-size: 100px;
  }
}
@media (max-width: 768px) {
  .team-main .header .main-title {
    font-size: 80px;
    padding: 0 8px;
  }
}
@media (max-width: 425px) {
  .team-main .header .main-title {
    font-size: 36px;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}

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

.team-main .header .hero {
  width: 100%;
  border-radius: 24px;
}
@media (max-width: 425px) {
  .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 8.33% 100px 8.33%;
}
@media (max-width: 425px) {
  .team-main .team-intro {
    padding: 0 16px 40px 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: 425px) {
  .team-main .mb-intro {
    font-size: var(--Font-Size-H5, 24px);
  }
}

.team-main .intro {
  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;
}
@media (max-width: 768px) {
  .team-main .intro {
    color: var(--Body-text, #484740);
    font-size: 24px;
  }
}
@media (max-width: 425px) {
  .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: 425px) {
  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;
  }
}

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

.team-main .partner-card-items {
  width: 100%;
  padding: 0 8.33% 100px 8.33%;
}
@media (max-width: 768px) {
  .team-main .partner-card-items {
    padding: 0 6.125% 100px 6.125%;
  }
}
@media (max-width: 425px) {
  .team-main .partner-card-items {
    padding: 0 13px 100px 13px;
  }
}

.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;
  }

  .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: 0 16px;
  }

  .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: 92%;
    display: flex;
    padding: 24px 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: 425px) {
  .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: 78%;
    margin-bottom: 40px;
  }
}

.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: 1024px) {
  .team-main .partner-card-items .partner-card {
    flex-direction: column;
  }
}

.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;

  white-space: nowrap;
}

.team-main .partner-card-items .partner-card .partner-card__image {
  width: 300px;
  height: 300px;
  flex-shrink: 0;
  margin-left: 6.25%;
}
@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;
}

.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: 500;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-top: 40px;
}

.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;
}
@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: 425px) {
  .team-main .partner-card-items .team-card {
    padding: 24px 8px;
    flex-direction: column;
    align-items: start;
    gap: 24px;
  }
  .team-main .partner-card-items .team-card:first-child {
    margin-top: 76px;
  }
}

.team-main .partner-card-items .team-card .team-card__title {
  flex: 1;
  color: var(--Headlines, #13120c);
  font-family: var(--Font-Family-Title, "Rethink Sans");
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
@media (max-width: 425px) {
  .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: 425px) {
  .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 {
  width: 100%;
  border-radius: 0 0 60px 60px;
  padding: 88px 3.125% 68px 3.125%;
  background: var(--Main-Bg, #f6f4f4);
}
@media (max-width: 768px) {
  .architecture-design-main .header {
    padding: 0 8px 56px 8px;
    border-radius: 0;
  }
}

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: 136px;
  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: 1024px) {
  .architecture-design-main .header .main-title {
    font-size: 100px;
  }
  html[lang="zh-TW"] .architecture-design-main .header .main-title {
    padding: 0 8px;
    font-size: 72px;
  }
}
@media (max-width: 768px) {
  .architecture-design-main .header .main-title {
    font-size: 80px;
  }
}
@media (max-width: 425px) {
  .architecture-design-main .header .main-title {
    font-size: 36px;
    line-height: 140%;
    letter-spacing: 0.25px;
  }

  .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: 23%;

  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%;
}
@media (max-width: 425px) {
  .architecture-design-main .header .header-items {
    gap: 24px;
    padding: 40px 8px 24px 8px;
  }
}
.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: var(--Font-Size-H4, 34px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.25px;
}
@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: 425px) {
  .architecture-design-main .header .header-items .header-items__desc {
    font-size: var(--Font-Size-Body-1, 16px);
  }
}

.architecture-design-main .header .header-items .header-items__images {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16.6%;
}
@media (max-width: 1850px) {
  .architecture-design-main .header .header-items .header-items__images {
    padding: 0;
  }
}
@media (max-width: 425px) {
  .architecture-design-main .header .header-items .header-items__images {
    margin-bottom: 29px;
  }
}

.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: 425px) {
  .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 {
  width: 100%;
  padding: 30px 3.125% 100px 3.125%;
}
@media (max-width: 425px) {
  .architecture-design-main .process {
    padding: 30px 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: 425px) {
  .architecture-design-main .process .type {
    padding: 0 4px;

    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;
}
.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%;
  }
}
@media (max-width: 768px) {
  .architecture-design-main .process .title {
    display: none;
  }
}

.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.35s ease-in-out;
}
.architecture-design-main .process .main-image .icon:hover {
  transform: scale(1.05);
}
.architecture-design-main .process .main-image .icon1 {
  top: -9%;
  left: 36%;
}
.architecture-design-main .process .main-image .icon2 {
  top: 5%;
  right: 2%;
}
.architecture-design-main .process .main-image .icon3 {
  top: 45%;
  right: -13.5%;
}
.architecture-design-main .process .main-image .icon4 {
  bottom: -9.5%;
  right: 14%;
}
.architecture-design-main .process .main-image .icon5 {
  bottom: -9.5%;
  left: 8%;
}
.architecture-design-main .process .main-image .icon6 {
  top: 45%;
  left: -13.5%;
}
.architecture-design-main .process .main-image .icon7 {
  top: 5%;
  left: 4%;
}

html[lang="zh-TW"] .architecture-design-main .process .main-image .icon1 {
  top: -9%;
  left: 41%;
}
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: -16.5%;
}
html[lang="zh-TW"] .architecture-design-main .process .main-image .icon4 {
  bottom: -9.5%;
  right: 16%;
}
html[lang="zh-TW"] .architecture-design-main .process .main-image .icon5 {
  bottom: -9.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: 180px;
  position: relative;
}
@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 .right {
  position: relative;
  padding-right: 2.5%;
  display: flex;
  justify-content: flex-end;
  gap: 120px;
  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: 25vh; /* 或改成你要的基準線 */
  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: 120px;
}
@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;
}
@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;
}

.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;
}
@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: 136px;
  margin-top: 30px;
}
@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;
}

/* 外層：右側內容維持全寬，不被左邊擠壓 */
.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: 90%;
  height: 135%;
  background-color: #fff;
  z-index: 2;
  display: block;
  position: absolute;
  top: -100px;
  left: -100px;
}

/* 外圈跟節點（沿用你的） */
.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: 400;
  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;
}

.architecture-design-main
  .process
  .process-stage-items
  .process-stage
  .right
  .process-stage__image
  img {
  opacity: 0;
  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 .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 .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 {
  width: 100%;
  padding: 30px 3.125% 100px 3.125%;
  border-radius: 60px 60px 0 0;
  background: var(--Main-Bg, #f6f4f4);
}
@media (max-width: 900px) {
  .architecture-design-main .architecture-design {
    border-radius: 0;
    background: var(--White, #fff);
  }
}
@media (max-width: 425px) {
  .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: 425px) {
  .architecture-design-main .architecture-design .type {
    border-radius: 0;
    padding: 16px 4px;
    gap: 32px;
  }
}

.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 .type .active {
  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;
}

.architecture-design-main .architecture-design .architecture-design-section {
  padding-left: 28.5%;
  padding-right: 11%;
  margin-bottom: 100px;
  margin-top: 160px;
}
@media (max-width: 900px) {
  .architecture-design-main .architecture-design .architecture-design-section {
    padding: 0;
    margin-bottom: 0px;
    margin-top: 5px;
  }
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 163px;
}
@media (max-width: 425px) {
  .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: 425px) {
  .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 {
  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: 425px) {
  .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
  .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%;
}
@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: 425px) {
  .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;
  }
}

.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;
}
@media (max-width: 1440px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__images {
    gap: 15px;
  }
}
@media (max-width: 425px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .arch-design-item__images {
    gap: 4px;
  }
}

.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: 19 / 20;
}

.architecture-design-main
  .architecture-design
  .architecture-design-section
  .arch-design-items
  .more-btn {
  display: flex;
  width: 258px;
  padding: 24px;
  justify-content: center;
  align-items: center;
  border-radius: 56px;
  background: var(--Headlines, #13120c);
}
@media (max-width: 425px) {
  .architecture-design-main
    .architecture-design
    .architecture-design-section
    .arch-design-items
    .more-btn {
    width: 87%;
    margin: 0 auto;
  }
}

.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 {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
}

.architecture-design-child-main .header {
  width: 100%;
  padding: 0 3.125% 132px 3.125%;
}
@media (max-width: 1024px) {
  .architecture-design-child-main .header {
    padding-bottom: 60px;
  }
}
@media (max-width: 768px) {
  .architecture-design-child-main .header {
    padding: 0 8px 43px 8px;
  }
}
@media (max-width: 425px) {
  .architecture-design-child-main .header {
    padding-bottom: 32px;
  }
}

@media (max-width: 425px) {
  .architecture-design-child-main .header .bread {
    padding-top: 0;
    margin-top: -8px;
  }

  .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: 78px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
  padding-top: 40px;
}
@media (max-width: 768px) {
  .architecture-design-child-main .header .main-content__title {
    padding: 0 8px;
    font-size: 66px;
  }
}
@media (max-width: 425px) {
  .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: 136px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}

.architecture-design-child-main .content {
  width: 100%;
  padding: 0 3.125% 179px 3.125%;
  display: flex;
  gap: 60px;
}
@media (max-width: 1024px) {
  .architecture-design-child-main .content {
    flex-direction: column;
    padding: 0 3.125% 80px 3.125%;
  }
}
@media (max-width: 425px) {
  .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: 425px) {
  .architecture-design-child-main .content .main-content {
    padding-top: 0;
  }
}

.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: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 48px;
}
@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: 425px) {
  .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: 425px) {
  .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;
}

.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: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  margin-bottom: 20px;
}
@media (max-width: 425px) {
  .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: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 108px;
}
@media (max-width: 425px) {
  .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;
  }
}

.four-grid {
  display: grid;
  /* 左：自適應；右：固定縮圖欄寬（可依設計調整） */
  grid-template-columns: 1fr 224px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "main t1"
    "main t2"
    "main t3";
  gap: 16px;
}
@media (max-width: 425px) {
  .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;
}

.img-t1 {
  grid-area: t1;
}

.img-t2 {
  grid-area: t2;
}

.img-t3 {
  grid-area: t3;
}

.architecture-design-child-main .content .main-content .left-right-image-item {
  display: none;
}
@media (max-width: 425px) {
  .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;
  }
  .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;
  }
  .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 {
  width: 100%;
  padding: 48px 3.125% 68px 3.125%;
  background: var(--Main-Bg, #f6f4f4);
}
@media (max-width: 425px) {
  .works-main {
    padding: 0 8px 3px 8px;
  }
}

.works-main .header {
  width: 100%;
}

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: 136px;
  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: 1024px) {
  .works-main .header .main-title,
  html[lang="zh-TW"] .works-main .header .main-title {
    font-size: 80px;
  }
}
@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: 425px) {
  .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: 40px; */
    margin-top: -8px;
  }
}

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

.works-main .pinterest .pinterest-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 21px;
}
@media (max-width: 600px) {
  .works-main .pinterest .pinterest-top {
    margin-bottom: 0;
  }
}

.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 12px;

    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;
  }
}

.works-main .pinterest .pinterest-top .mode {
  display: flex;
  align-items: flex-start;
  justify-content: end;
  gap: 32px;
}
@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;
}

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

.pin-card:hover .pin {
  transform: translateY(-18%);
}
.pin-card:hover .pin-cap {
  opacity: 1;
}

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

.pin-card.height2:hover .pin {
  transform: translateY(-8.5%);
}
.pin-card.height2.is-long-text:hover .pin {
  transform: translateY(-10.6%);
}
@media (max-width: 1680px) {
  .pin-card:hover .pin {
    transform: translateY(-22%);
  }
  .pin-card.is-long-text:hover .pin {
    transform: translateY(-27%);
  }
}
@media (max-width: 1450px) {
  .pin-card.height2:hover .pin {
    transform: translateY(-10.5%);
  }
  .pin-card.is-long-text:hover .pin {
    transform: translateY(-31%);
  }
}
@media (max-width: 1280px) {
  .pin-card:hover .pin {
    transform: translateY(-24%);
  }
  .pin-card.is-long-text:hover .pin {
    transform: translateY(-44%);
  }
}
@media (max-width: 1280px) {
  .pin-card.is-long-text:hover .pin {
    transform: translateY(-33%);
  }
}
@media (max-width: 1033px) {
  .pin-card.height2:hover .pin {
    transform: translateY(-12.5%);
  }
}
@media (max-width: 900px) {
  .pin-card:hover .pin {
    transform: translateY(-25%);
  }
}
@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) {
  .pin-card:hover .pin {
    transform: translateY(0%);
  }
  .pin-card.height2:hover .pin {
    transform: translateY(0%);
  }
  .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: 1150px) {
  .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;
}
@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 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/* 佔位 */
.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: 25%;
  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;
}
@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: 60px;
  }
}
@media (max-width: 1330px) {
  .contact-card .pinterest-card .contact-text {
    font-size: 54px;
  }
}
@media (max-width: 1200px) {
  .contact-card .pinterest-card .contact-text {
    font-size: 46px;
  }
}
@media (max-width: 1024px) {
  .contact-card .pinterest-card .contact-text {
    top: 28%;
    left: 12px;
    font-size: 32px;
  }
}
@media (max-width: 728px) {
  .contact-card .pinterest-card .contact-text {
    top: 25%;
    font-size: 24px;
  }
}

.contact-card .pinterest-card .link {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  bottom: 15%;
  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;
}

/* 手機版：把 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 .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 .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;
}

.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 */
  }
}

.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 {
  width: 100%;
  padding: 48px 3.125% 37px 3.125%;
  background: var(--Main-Bg, #f6f4f4);
}
@media (max-width: 1800px) {
  .careers-main {
    padding: 88px 3.125% 37px 3.125%;
  }
}
@media (max-width: 768px) {
  .careers-main {
    padding: 46px 8px 0px 8px;
  }
}
@media (max-width: 425px) {
  .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;
  }
}
.careers-header .side-list.mb {
  display: none;
}
@media (max-width: 768px) {
  .careers-header .side-list.mb {
    width: 100%;
    display: flex;
    padding: 14px 8px 16px 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: 136px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1.5px;
}
@media (max-width: 1523px) {
  .careers-main .careers-header .title {
    font-size: 120px;
  }
}
@media (max-width: 1350px) {
  .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 img {
    border-radius: 18px;
  }
}

.careers-main .careers-content {
  display: flex;
  width: 100%;
  padding-top: 136px;
  margin-bottom: 473px;
}
@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 24px 8px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-bottom: 0px;
  }
}

.careers-main .careers-content .side-list {
  position: sticky;
  top: 15%;
  height: 100%;
  margin-left: 10%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-end;
  gap: 60px;
}
@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: 850px) {
  .careers-main .careers-content .side-list a .item {
    font-size: 24px;
  }
}

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

.careers-main .careers-content .careers-content-center {
  width: 100%;
  margin-left: 6.66%;
}
@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");
    font-size: 72px;
    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: 425px) {
  .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: 425px) {
  .careers-middle-top {
    margin-top: 16px;
  }
}

.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: 425px) {
  .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: 1024px) {
  .careers-middle-top-header .title {
    font-size: 50px;
  }
}
@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 {
  width: 58%;
  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) {
  .careers-middle-top-header .desc {
    width: auto;
  }
}
@media (max-width: 768px) {
  .careers-middle-top-header .desc {
    width: 100%;
  }
}

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

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

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

.accordion__item {
  width: 94.5%;
  border-bottom: 1px solid #c8c8ca;
  padding: 52px 0;
  transition: all 0.5s ease;
}
@media (max-width: 1024px) {
  .accordion__item {
    padding: 32px 0px;
  }
}
@media (max-width: 768px) {
  .accordion__item {
    padding: 40px 8px;
    width: 100%;
  }
}
@media (max-width: 425px) {
  .accordion__item {
    padding: 24px 0px;
    border-bottom: 0.5px solid #c8c8ca;
  }
  .accordion__item:first-child {
    /* border-top: 0.5px solid #c8c8ca; */
  }
}

.accordion__item.active {
  background: rgba(19, 18, 12, 0.8);
  border-radius: 16px;
}
@media (max-width: 768px) {
  .accordion__item.active {
    /* padding-left: 8px; */
  }
}
.accordion__item:first-child {
  border-radius: 0px;
}
.accordion__item:first-child.active {
  background: var(--Main-Bg, #f6f4f4);
  opacity: 1;
}

.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: 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%;
}
@media (max-width: 1024px) {
  .accordion__title {
    font-size: 34px;
  }
}
@media (max-width: 768px) {
  .accordion__title {
    padding-left: 8px;
  }
  .accordion__item.active .accordion__title {
    padding-left: 0px;
  }
}
@media (max-width: 425px) {
  .accordion__title {
    color: var(--Dark-BG, #363130);
    font-size: var(--Font-Size-H5, 24px);
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}

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

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

.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: 425px) {
  .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: 66px 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: 768px) {
  .accordion__content {
    padding: 16px 0 24px 0;
  }
}

.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: baseline;
}
.accordion__item.active .accordion__content a img {
  width: 22px;
  height: 22px;
}
@media (max-width: 768px) {
  .accordion__item.active .accordion__content a {
    display: flex;
    /* justify-content: center; */
  }
}

.accordion__item.default-title .accordion__content a {
  color: var(--Headlines, #13120c);
  display: flex;
  align-items: baseline;
}
.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: 1024px) {
  .careers-middle-bottom .office .title {
    font-size: 50px;
  }
}
@media (max-width: 768px) {
  .careers-middle-bottom .office .title {
    font-size: 52px;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
}
@media (max-width: 425px) {
  .careers-middle-bottom .office .title {
    font-size: var(--Font-Size-H4, 34px);
  }
}

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

/* 跨 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 {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 48px 3.125% 0 3.125%;
}
html[lang="zh-TW"] .extra-main .header {
  padding: 88px 3.125% 0 3.125%;
}
@media (max-width: 1200px) {
  .extra-main .header {
    padding: 68px 3.125% 0 3.125%;
  }
}
@media (max-width: 475px) {
  .extra-main .header {
    padding: 0px 8px 0px 8px;
  }
}
.extra-main .header .title-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.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;
}
@media (max-width: 475px) {
  .extra-main .header .main-title {
    font-size: 36px;
    line-height: 140%;
    letter-spacing: 0.25px;
    padding: 0 8px;
  }
}
.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: 30%;
  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%;
  }
}
.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: center;
  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;
}
@media (max-width: 475px) {
  .extra-main .block-title {
    font-size: var(--Font-Size-H5, 24px);
    margin-left: 8px;
  }
}

.extra-main .latest-article {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 48px 3.125% 55px 3.125%;
}
@media (max-width: 475px) {
  .extra-main .latest-article {
    padding: 30px 8px 8px 8px;
  }
}

.extra-main .latest-article-block {
  display: flex;
}
@media (max-width: 1400px) {
  .extra-main .latest-article-block {
    flex-direction: column;
    gap: 24px;
  }
}
@media (max-width: 425px) {
  .extra-main .latest-article-block {
    gap: 8px;
  }
}

.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;
}
@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
    .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);
}
@media (max-width: 1400px) {
  .extra-main .more-btn {
    margin-left: 0;
    margin-top: 18px;
  }
}
@media (max-width: 575px) {
  .extra-main .more-btn {
    width: 80%;
    margin: 0 auto;
    margin-top: 18px;
  }
}
@media (max-width: 425px) {
  .extra-main .more-btn {
    padding: 18px;
  }
}

.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: 425px) {
  .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: 16px;
  font-weight: 400;
  width: 70%;
}

.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: 1400px) {
  .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.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;
}
@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 30px 的距離改為 gap */
  padding-left: 15.5%;
  margin-top: 88px;
  box-sizing: border-box;
}
@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;
  }
}

/* 四張卡片等寬（不用 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;
}
@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%;
}

.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 {
  width: 100%;
  background: var(--White, #fff);
  padding: 48px 3.125% 68px 3.125%;
}
@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: 1400px) {
  .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%;
  min-height: 435px;
}
@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;
  }
}

.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: 1400px) {
  .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-block .style1-card-sub:nth-child(2) {
  padding-right: 0;
}

.extra-main .style1-block .style1-card-sub .style1-card-cover {
  width: 100%;
  height: 269px;
}
@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 {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 48px 3.125% 68px 3.125%;
}
@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;
  }
}

/* 外層容器：統一左右 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 (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:hover
  .style2-card-sub {
  transform: translateY(-4px);
}

.extra-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-cover {
  width: 100%;
}
@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: 222px;
  /* width: 333px; */
}
@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 3.125% 68px 3.125%;
  display: flex;
  gap: 101px;
}

.extra-main .works-block {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 48px 3.125% 68px 3.125%;
  display: flex;
  gap: 101px;
}

.extra-main .resources {
  display: none;
}

/* Extra Single */

.extra-single {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 0 3.125% 68px 3.125%;
}
@media (max-width: 425px) {
  .extra-single {
    padding: 0 8px 68px 8px;
  }
}

.extra-single .bread {
  padding-top: 58px;
}

@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;
}
@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: 425px) {
  .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: 425px) {
  .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: 425px) {
  .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: 425px) {
  .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: 425px) {
  .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;
}
@media (max-width: 768px) {
  .extra-single .middle .page-content .pc-description {
    margin-top: 16px;
  }
}

.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: 425px) {
  .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;
  }
}

.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: 425px) {
  .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: 425px) {
  .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: 425px) {
  .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: 425px) {
  .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;
}
@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: 24px;
}
@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*/

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

.extra-author-main .block-title {
  text-align: center;
  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;
}
@media (max-width: 425px) {
  .extra-author-main .block-title {
    font-size: var(--Font-Size-H5, 24px);
  }
}

.extra-author-main .bread {
  background: var(--Main-Bg, #f6f4f4);
  padding-top: 60px;
  padding-bottom: 80px;
  padding-left: 3.125%;
}
@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: 150px;
  background: var(--Main-Bg, #f6f4f4);
  padding-bottom: 69px;
}
@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;
  }
}

.extra-author-main .extra-author-block .author-img img {
  border-radius: 50%;
  width: 240px;
  height: auto;
  aspect-ratio: 1 / 1;
}
@media (max-width: 425px) {
  .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: 60%;
}
@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: 425px) {
  .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: 425px) {
  .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: 425px) {
  .extra-author-main
    .extra-author-block
    .author-info
    .author-block
    .author-instagram {
    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: 425px) {
  .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: var(--Main-Bg, #f6f4f4);
  padding: 48px 3.125% 55px 3.125%;
}
@media (max-width: 475px) {
  .extra-author-main .latest-article {
    padding: 48px 8px 55px 8px;
  }
}

.extra-author-main .latest-article-block {
  display: flex;
}
@media (max-width: 1400px) {
  .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;
}
@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);
  }
  .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-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);
}
@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: 18px;
  }
}

.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%;
}

.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.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;
}
@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 30px 的距離改為 gap */
  padding-left: 15.5%;
  margin-top: 88px;
  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;
}
@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%;
}

.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(--White, #fff);
  padding: 48px 3.125% 68px 3.125%;
}
@media (max-width: 575px) {
  .extra-author-main .style1 {
    background: var(--Main-Bg, #f6f4f4);
    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;
}
@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-right: 0;
}

.extra-author-main .style1-block .style1-card-sub .style1-card-cover {
  width: 100%;
  height: 269px;
}
@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(--Main-Bg, #f6f4f4);
  padding: 48px 3.125% 68px 3.125%;
}
@media (max-width: 575px) {
  .extra-author-main .style2 {
    padding: 32px 8px 32px 8px;
  }
  .extra-author-main .style2#works {
    background: var(--White, #fff);
  }
}

.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;
}
@media (max-width: 575px) {
  .extra-author-main .style2-block .style2-article-more {
    flex-direction: column;
    margin: 0 4px;
    gap: 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:hover
  .style2-card-sub {
  transform: translateY(-4px);
}

.extra-author-main
  .style2-block
  .style2-article-more
  .style2-more-item
  .style2-card-cover {
  width: 100%;
}
@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: 222px;
  /* width: 333px; */
}
@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 {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 68px 3.125%;
}
.works-single .bread {
  padding-top: 13px;
}
@media (max-width: 1024px) {
  .works-single {
    padding: 0px 3.125% 68px 3.125%;
  }
}
@media (max-width: 768px) {
  .works-single {
    padding: 0px 8px 32px 8px;
  }
  .works-single .bread {
    padding-top: 36px;
  }
}
@media (max-width: 425px) {
  .works-single .bread {
    padding-top: 24px;
    padding-bottom: 16px;
  }
}
.works-single .hero {
  width: 100%;
  margin-bottom: 158px;
  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: 28.5%;
}
.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: 24px;
  }
}
.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;
  }
}
@media (max-width: 425px) {
  .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;
}

.works-single .project-information .project-info-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  align-self: stretch;
}
@media (max-width: 1024px) {
  .works-single .project-information .project-info-item {
    flex-direction: column;
  }
}
.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;
}

.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%;
}

.works-single .link-list {
  position: sticky;
  top: 5%;
  left: 5%;

  width: 100%;
  padding: 60px 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: 250 / 150;
}
@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;
}
html[lang="zh-TW"] .works-single .main .page-content .pc-sm-title {
  display: block;
}
@media (max-width: 768px) {
  html[lang="zh-TW"] .works-single .main .page-content .pc-sm-title {
    font-size: 16px;
    margin-bottom: 4px;
  }
}
.works-single .main .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;
}
@media (max-width: 768px) {
  .works-single .main .page-content .pc-title {
    font-size: 68px;
  }
}
@media (max-width: 425px) {
  .works-single .main .page-content .pc-title {
    font-size: 36px;
    margin-bottom: 23px;
  }
}

.works-single .main .page-content .pc-description {
  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;
  padding-left: 28px;
}
@media (max-width: 425px) {
  .works-single .main .page-content .pc-description {
    padding: 0 8px;
    margin-bottom: 32px;
    font-size: 12px;
  }
}

.works-single .main .page-content .pc-image {
  width: 100%;
  margin-top: 60px;
}
@media (max-width: 425px) {
  .works-single .main .page-content .pc-image {
    margin-top: 0;
  }
}

.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: 425px) {
  .works-single .main .page-content .pc-lr-images {
    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");
  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;
}
@media (max-width: 1024px) {
  .works-single .main .page-content .pc-lr-texts {
    flex-direction: column;
    margin-bottom: 24px;
  }
}
@media (max-width: 425px) {
  .works-single .main .page-content .pc-lr-texts {
    margin-top: 16px;
  }
}
.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 {
  flex: 1;
}

.works-single .main .page-content .pc-four-images-group .left-main .left {
  flex: 1;
}

.works-single .main .page-content .pc-four-images-group .right {
  flex: 0.234;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.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: calc((100% - 16px) / 3);
  aspect-ratio: 1 / 1;
}
@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;
    aspect-ratio: 1 / 1;
  }
}

.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: 880px;
  display: flex;
  gap: 30px;
  align-items: stretch;
  margin-top: 30px;
}

.works-single .main .page-content .pc-three-images-group .left-main {
  width: 59.6%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
}

.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 .right .right1 {
  height: 48.5%;
  border-radius: 32px;
  overflow: hidden;
}

.works-single .main .page-content .pc-three-images-group .right .right2 {
  height: 48.5%;
  border-radius: 32px;
  overflow: hidden;
}

.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");
  font-size: var(--Font-Size-H6, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.15px;
  margin-bottom: 60px;
}

.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: 56px;
}
@media (max-width: 425px) {
  .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");
  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;
}
@media (max-width: 425px) {
  .works-single .main .page-content .pc-lr-image-description {
    display: block;
    font-size: 12px;
    margin-bottom: 32px;
    padding: 0 8px;
  }
  .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 .left {
  flex: 1;
}

.works-single .main .page-content .pc-four-image-description .right {
  flex: 0.234;
}
@media (max-width: 425px) {
  .works-single .main .page-content .pc-four-image-description {
    display: block;
    font-size: 12px;
    margin-bottom: 32px;
    padding: 0 8px;
  }
  .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");
  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;
}
@media (max-width: 425px) {
  .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 .main .page-content .pc-three-image-description .left {
  flex: 0.6;
}

.works-single .main .page-content .pc-three-image-description .right {
  padding-left: 90px;
  flex: 0.4;
}

.works-single .main .social-media {
  margin-top: 68px;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 18px;
}
@media (max-width: 1024px) {
  .works-single .main .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 .main a.heateor_sss_facebook svg,
.works-single .main a.heateor_sss_facebook .heateor_sss_svg,
.works-single .main a.heateor_sss_more svg,
.works-single .main a.heateor_sss_more .heateor_sss_svg,
.works-single .main a.heateor_sss_facebook span,
.works-single .main a.heateor_sss_more span {
  display: none !important;
}

/* 統一每顆按鈕樣式 */
.works-single .main .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 .main a.heateor_sss_facebook {
  background-image: url("/wp-content/uploads/2025/09/facebook-icon.svg") !important;
}

.works-single .main a.heateor_sss_more {
  background-image: url("/wp-content/uploads/2025/09/more-sharing-icon.svg") !important;
}

/* Contact Page */

.contact-main {
  width: 100%;
  background: var(--Main-Bg, #f6f4f4);
  padding: 48px 3.125% 50px 3.125%;
}
@media (max-width: 1300px) {
  html[lang="zh-TW"] .contact-main {
    padding: 98px 3.125% 50px 3.125%;
  }
}
@media (max-width: 768px) {
  .contact-main {
    background: #fff;
    padding: 0;
  }
}

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: 136px;
  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: 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);
  }
}
@media (max-width: 425px) {
  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%;
}
@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 {
  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);
  padding-bottom: 16px;

  width: 100%;
}
.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: 606px !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;
}

.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;
}
.contact-main .main.pc .right .submit-wrap.zh input {
  font-family: "Noto Sans TC";
  font-size: 22px;
}

.contact-main .main.mb {
  display: none;
}
@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;
  }
  .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;
  }
  .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 / 272;
    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;
  }
  .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;
  }
  .contact-main .main.mb .bottom .submit-wrap {
    display: flex;
    justify-content: center;
    width: 90%;
    padding: 24px 10px;
    align-items: center;
    gap: 12px;

    border-radius: 56px;
    background: var(--Headlines, #13120c);

    margin-top: 24px;
    margin-bottom: 34px;
    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: 425px) {
  .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 3.125% 50px 3.125%;
}

.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: 425px) {
  .comments {
    border-top: 1px solid #c8c8ca;
    border-bottom: 1px solid #c8c8ca;
    padding-bottom: 32px;
  }
}

.comments .comments-area {
  width: 100%;
}
@media (max-width: 425px) {
  .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: 425px) {
  .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: 425px) {
  .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: 24px 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;
}

.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;
}