.fouru-subsites {
  width: 100%;
  padding: 72px 24px;
  color: #263e44;
  font-family: "Noto Sans TC", sans-serif;
  background: #f3f8f7;
  position: relative;
}
.fouru-subsites-inner { max-width: 1080px; margin: 0 auto; }
.fouru-subsites-eyebrow { color: #386e73; font-size: 13px; letter-spacing: .18em; margin: 0 0 12px; }
.fouru-subsites h2 { margin: 0 0 32px; font-size: clamp(26px, 4vw, 36px); line-height: 1.4; letter-spacing: .06em; }
.fouru-subsites h2 span { display: inline-block; font-size: 17px; letter-spacing: .02em; font-weight: 400; }
.fouru-subsites-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.fouru-subsite-card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px; border: 1px solid #b8d6d7; border-top: 5px solid #79c0c5; border-radius: 20px; background: #fff; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.fouru-subsite-card:hover { color: inherit; border-color: #386e73; box-shadow: 0 8px 24px #263e4412; }
.fouru-subsite-card:focus-visible { outline: 3px solid #386e73; outline-offset: 5px; }
.fouru-subsite-card h3 { margin: 0 0 8px; font-size: 25px; line-height: 1.5; }
.fouru-subsite-card p { margin: 0 0 8px; font-size: 16px; line-height: 1.8; }
.fouru-subsite-card .fouru-subsite-en { color: #52666a; font-size: 14px; }
.fouru-subsite-link { color: #31666c; font-weight: 600; }
.fouru-subsite-link span[lang] { margin-left: 8px; font-size: 14px; }
@media (max-width: 600px) {
  .fouru-subsites { padding: 48px 20px; }
  .fouru-subsites h2 span { display: block; margin-top: 8px; }
  .fouru-subsite-card { padding: 24px; }
}