/**
 * NDHU Economics Website
 * Admission Family CSS
 * page-admission.css v7.7-test
 * Updated: 2026-09-06 (Asia/Taipei, UTC+8)
 *
 * Based on v7.4-test.
 *
 * Refinement v7.7
 * - Adds the 3+2 Five-Year B.A.–M.A. Program as an Admission-family page role.
 * - The new page has NO independent runtime CSS owner.
 * - All 3+2 page-role selectors live here in page-admission.css.
 * - Page Header geometry/typography remains owned by page-header.css.
 * - Shared typography continues to consume global --myfont-* semantic tokens.
 * - Responsive architecture follows the family 1025px Golden Base.
 */
.myadmission-page {
  --myadmission-navy: #2E4B70;
  --myadmission-navy-dark: #203750;
  --myadmission-gold: #B08F5A;
  --myadmission-ink: #32373C;
  --myadmission-muted: #68727D;
  --myadmission-line: #D9E0E6;
  --myadmission-soft: #F6F8FA;
  --myadmission-red: #C9655A;
  --myadmission-orange: #D98B3A;
  --myadmission-blue: #4C78A8;
  --myadmission-teal: #3F8B82;

  max-width: 132rem;
  margin: auto;
  color: var(--myadmission-ink);
  font-family: "Noto Sans TC", sans-serif;
  line-height: 1.8;
}

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

.myadmission-page img {
  max-width: 100%;
}

/* 招生正文另行控制閱讀寬度；不影響 Page Header。 */
.myadmission-content {
  width: min(calc(100% - 2.4rem), 120rem);
  margin: 0 auto;
  font-size: var(--myfont-body, 1.7rem);
}

/* =========================================================
   02. Intro
   ========================================================= */
.myadmission-hero {
  margin: 0 0 2.4rem;
  padding: 1.6rem 1.9rem;
  background: linear-gradient(135deg, #FFF9F0 0%, #FFFFFF 72%);
  border-left: 0.55rem solid var(--myadmission-gold);
  border-radius: 0 0.8rem 0.8rem 0;
}

.myadmission-hero p {
  max-width: 100rem;
  margin: 0;
  color: #4D555D;
  font-size: var(--myfont-body, 1.7rem);
  line-height: 1.8;
}

/* =========================================================
   03. Overview
   ========================================================= */
.myadmission-overview {
  margin-bottom: 2.8rem;
  padding: 2rem 2.2rem;
  background: #F7F9FB;
  border: 0.1rem solid var(--myadmission-line);
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.6rem rgba(32, 55, 80, 0.05);
}

.myadmission-overview .mysemantic-h2 {
  margin: 0 0 1.2rem;
  color: var(--myadmission-navy-dark);
  font-size: var(--myfont-feature-title, 2rem);
  font-weight: 700;
}

.myadmission-overview ul,
.myadmission-overview ol {
  margin: 0.5rem 0;
}

.myadmission-overview > ul {
  padding-left: 2.2rem;
}

.myadmission-overview li {
  margin-bottom: 0.45rem;
  font-size: var(--myfont-card-text, 1.6rem);
  line-height: 1.8;
}

/* =========================================================
   04. Four admission pathway cards
   ========================================================= */
.myadmission-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  margin-bottom: 2rem;
}

.myadmission-summary-card {
  --myadmission-card-color: var(--myadmission-blue);
  position: relative;
  display: flex;
  min-height: 13rem;
  padding: 1.6rem 1.5rem 1.5rem;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--myadmission-ink);
  text-decoration: none;
  background: #FFFFFF;
  border: 0.1rem solid var(--myadmission-line);
  border-top: 0.45rem solid var(--myadmission-card-color);
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.6rem rgba(32, 55, 80, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.myadmission-summary-card:hover,
.myadmission-summary-card:focus {
  color: var(--myadmission-ink);
  text-decoration: none;
  background: #FFFFFF;
  border-color: var(--myadmission-card-color);
  transform: translateY(-0.2rem);
  box-shadow: 0 0.8rem 2rem rgba(32, 55, 80, 0.12);
}

.myadmission-summary-card[data-method="stars"] { --myadmission-card-color: var(--myadmission-orange); }
.myadmission-summary-card[data-method="application"] { --myadmission-card-color: var(--myadmission-red); }
.myadmission-summary-card[data-method="distribution"] { --myadmission-card-color: var(--myadmission-blue); }
.myadmission-summary-card[data-method="transfer"] { --myadmission-card-color: var(--myadmission-teal); }

.myadmission-summary-icon {
  display: grid;
  width: 4.8rem;
  height: 4.8rem;
  margin-bottom: 1.4rem;
  place-items: center;
  color: #FFFFFF;
  background: var(--myadmission-card-color);
  border-radius: 50%;
  font-size: 2.2rem;
  line-height: 1;
  box-shadow: 0 0.45rem 1.1rem rgba(31, 50, 74, 0.16);
}

.myadmission-summary-card strong {
  margin-bottom: 0.3rem;
  font-size: var(--myfont-card-title, 1.8rem);
  line-height: 1.4;
}

/* English labels vary from one to two lines; reserve the same title block height
   so the timing/subtitle line aligns across all four pathway cards. */
.myadmission-page-en .myadmission-summary-card > strong {
  min-height: 2.8em;
}

.myadmission-summary-card > span:last-child {
  color: var(--myadmission-muted);
  font-size: var(--myfont-meta, 1.5rem);
}

.myadmission-summary-number {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  color: color-mix(in srgb, var(--myadmission-card-color) 24%, transparent);
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
}


/* =========================================================
   05. Quick navigation
   ========================================================= */
.myadmission-nav {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 3.2rem;
  padding: 1.1rem 1.3rem;
  flex-wrap: wrap;
  background: var(--myadmission-soft);
  border: 0.1rem solid var(--myadmission-line);
  border-radius: 1rem;
}

.myadmission-nav-label {
  margin-right: 0.3rem;
  color: var(--myadmission-navy-dark);
  font-size: var(--myfont-meta, 1.5rem);
  font-weight: 700;
}

.myadmission-nav a {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  color: var(--myadmission-navy);
  font-size: var(--myfont-action, 1.55rem);
  text-decoration: none;
  background: #FFFFFF;
  border: 0.1rem solid var(--myadmission-line);
  border-radius: 2rem;
}

.myadmission-nav a:hover,
.myadmission-nav a:focus {
  color: #FFFFFF;
  background: var(--myadmission-navy);
  border-color: var(--myadmission-navy);
}

/* =========================================================
   06. Admission sections
   ========================================================= */
.myadmission-section {
  --myadmission-section-color: var(--myadmission-blue);
  margin-bottom: 4.8rem;
  scroll-margin-top: 2rem;
}

#mystars { --myadmission-section-color: var(--myadmission-orange); }
#myapplication { --myadmission-section-color: var(--myadmission-red); }
#mydistribution { --myadmission-section-color: var(--myadmission-blue); }
#mytransfer { --myadmission-section-color: var(--myadmission-teal); }

.myadmission-section-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.4rem;
}

.myadmission-section-icon {
  display: grid;
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  place-items: center;
  color: #FFFFFF;
  background: var(--myadmission-section-color);
  border-radius: 50%;
  font-size: 1.8rem;
}

.myadmission-section-title .mysemantic-h2 {
  margin: 0;
  color: var(--myadmission-navy-dark);
  font-size: var(--myfont-section-title, 2.8rem);
  font-weight: 700;
  line-height: 1.35;
}

.myadmission-section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 0.1rem;
  margin-left: 0.4rem;
  background: linear-gradient(90deg, var(--myadmission-section-color), #DDE3E8 55%, transparent);
}

.myadmission-section > ol {
  margin: 1.4rem 0 1.8rem;
  padding: 1.35rem 1.8rem 1.35rem 4.2rem;
  background: color-mix(in srgb, var(--myadmission-section-color) 6%, #FFFFFF);
  border-left: 0.4rem solid var(--myadmission-section-color);
  border-radius: 0 0.8rem 0.8rem 0;
}

.myadmission-page .mynoteli {
  color: inherit;
  font-family: inherit;
  font-size: var(--myfont-card-text, 1.6rem);
  line-height: 1.9;
  list-style-type: cjk-ideographic;
}

/* English admission pathways use Arabic numerals; Chinese retains cjk-ideographic. */
.myadmission-page-en .mynoteli {
  list-style-type: decimal;
}

.myadmission-page .mynotelii {
  color: inherit;
  font-family: inherit;
  font-size: var(--myfont-meta, 1.5rem);
  line-height: 1.8;
}

/* =========================================================
   07. Tables
   ========================================================= */
.myadmission-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  background: #FFFFFF;
  border: 0.1rem solid var(--myadmission-line);
  border-radius: 0.8rem;
  box-shadow: 0 0.4rem 1.4rem rgba(32, 55, 80, 0.05);
  -webkit-overflow-scrolling: touch;
}

.myadmission-table-scroll:focus {
  outline: 0.3rem solid rgba(176, 143, 90, 0.35);
  outline-offset: 0.2rem;
}

.myadmission-table {
  width: 100%;
  min-width: 96rem;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: var(--myfont-meta, 1.5rem);
  line-height: 1.55;
  background: #FFFFFF;
  border-collapse: collapse;
}

.myadmission-table th,
.myadmission-table td {
  padding: 0.7rem 0.8rem;
  border: 0.1rem solid #D0D6DC;
  vertical-align: middle;
}

.myadmission-table th {
  color: var(--myadmission-navy-dark);
  font-weight: 700;
  text-align: center;
  background: #EEF2F5;
}

.myadmission-table tr:first-child > td,
.myadmission-table .school_title {
  background: #F3F5F7;
}

.myadmission-table .school_title,
.myadmission-table .colname,
.myadmission-table .gsdname {
  color: var(--myadmission-navy-dark);
  font-weight: 700;
}

.myadmission-table a {
  color: var(--myadmission-navy);
  font-weight: 600;
  text-decoration: underline;
}

.myadmission-table a:hover,
.myadmission-table a:focus {
  color: #FFFFFF;
  background: var(--myadmission-navy);
  text-decoration: none;
}

/* =========================================================
   08. Existing table utilities / structure preserved
   ========================================================= */
.mytable-left { text-align: left !important; }
.mytable-top { vertical-align: top !important; }
.mytable-left-top { text-align: left !important; vertical-align: top !important; }
.mytable-center { text-align: center !important; }
.mytable-wrap { overflow-wrap: anywhere; }
.mytable-code-label { width: 12rem; color: #CC0000; }
.mytable-code-value { width: 6rem; color: #CC0000; }
.myrow-small { height: 2rem; }
.myrow-compact { height: 2.5rem; }
.myrow-medium { height: 4rem; }
.myline-tight { line-height: 1.2; }

.mystars-school { width: 22rem; height: 6rem; }
.mystars-dept-name { font-size: var(--myfont-feature-title, 2rem); }
.mystars-test-head { width: 18rem; height: 3.5rem; }
.mystars-ranking-head { width: 60rem; }
.mystars-subject-head { width: 12rem; }
.mystars-requirement-head { width: 13.5rem; }
.mystars-ranking-list {
  padding-left: 0.9rem !important;
  text-align: left !important;
  line-height: 2.5rem;
}
.mystars-subject-list,
.mystars-requirement-list {
  min-width: 12rem;
  vertical-align: top !important;
  line-height: 2.8rem;
  white-space: nowrap;
}
.mystars-requirement-list {
  min-width: 13.5rem;
  font-size: 1.3rem;
}

.myapplication-table { min-width: 108rem; }
.myapplication-school { width: 18rem; height: 7rem; }
.myapp-stage1-head { width: 16.5rem; }
.myapp-stage2-head { width: 37.5rem; }
.myapp-tiebreak-head { width: 28rem; }
.myapp-subject-head { width: 14.5rem; }
.myapp-requirement-head,
.myapp-multiplier-head { width: 7.5rem; }
.myapp-gsat-head { width: 6rem; }
.myapp-weight-head,
.myapp-designated-weight-head { width: 5.9rem; }
.myapp-designated-head { width: 15.5rem; }
.myapp-designated-requirement-head { width: 4rem; }

.myapplication-screen-subjects,
.myapplication-screen-standard,
.myapplication-screen-ratio {
  padding-top: 0.65rem !important;
  vertical-align: top !important;
}

.myapplication-screen-subjects > div,
.myapplication-screen-standard > div,
.myapplication-screen-ratio > div {
  display: flex;
  min-height: 4.2rem;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  text-align: center;
}

.myapplication-screen-ratio > div { white-space: nowrap; }

.myapplication-total-weight {
  padding-top: 0.65rem !important;
  text-align: center !important;
  vertical-align: top !important;
}

.myapplication-total-weight-value {
  display: flex;
  min-height: 16.8rem;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

.myapplication-detail-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.myapplication-detail-label {
  flex: 0 0 9.5rem;
  font-weight: 600;
}

.myapplication-detail-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* =========================================================
   09. Back link
   ========================================================= */
.myadmission-back {
  margin: 1.3rem 0 0;
  text-align: right;
}

.myadmission-back a {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  color: var(--myadmission-navy);
  font-size: var(--myfont-action, 1.55rem);
  text-decoration: none;
  border-bottom: 0.2rem solid var(--myadmission-section-color);
}

.myadmission-back a:hover,
.myadmission-back a:focus {
  color: #FFFFFF;
  background: var(--myadmission-navy);
  border-bottom-color: var(--myadmission-navy);
}

/* =========================================================
   10. Responsive
   ========================================================= */
@media screen and (max-width: 900px) {
  .myadmission-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .myadmission-table-scroll::before {
    content: "表格可左右滑動查看完整內容";
    display: block;
    position: sticky;
    left: 0;
    padding: 0.8rem 1rem;
    color: var(--myadmission-muted);
    font-size: var(--myfont-meta, 1.5rem);
    text-align: center;
    background: #F4F7FA;
    border-bottom: 0.1rem solid var(--myadmission-line);
  }

  .myadmission-page-en .myadmission-table-scroll::before {
    content: "Swipe horizontally to view the full table.";
  }
}

@media screen and (max-width: 600px) {
  .myadmission-page {
    padding-right: 0.9rem;
    padding-left: 0.9rem;
  }

  .myadmission-hero {
    padding: 1.3rem 1.4rem;
  }

  .myadmission-overview {
    padding: 1.5rem 1.3rem;
  }

  .myadmission-summary {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .myadmission-summary-card {
    min-height: 11.5rem;
  }

  .myadmission-nav {
    align-items: stretch;
  }

  .myadmission-nav-label {
    width: 100%;
  }

  .myadmission-nav a {
    flex: 1 1 calc(50% - 0.8rem);
    text-align: center;
  }

  .myadmission-section {
    margin-bottom: 3.6rem;
  }

  .myadmission-section-title .mysemantic-h2 {
    font-size: var(--myfont-subsection-title, 2.4rem);
  }

  .myadmission-section > ol {
    padding: 1.15rem 1rem 1.15rem 4.8rem;
  }

  .myadmission-table {
    font-size: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .myadmission-summary-card {
    transition: none;
  }
}

/* =========================================================
   ADMISSION FAMILY｜Future Student
   Migrated from former page-future.css
   ========================================================= */
.myfuture-page {
  --myfuture-navy: #2E4B70;
  --myfuture-dark: #17324D;
  --myfuture-aqua: #38B8B2;
  --myfuture-teal: #2E9D82;
  --myfuture-coral: #E98662;
  --myfuture-text: #3D4852;
  --myfuture-muted: #667681;
  --myfuture-shadow: 0 .65rem 1.8rem rgba(31,83,105,.10);
  max-width: 132rem;
  margin: auto;
  color: var(--myfuture-text);
  font-family: "Noto Sans TC",sans-serif;
  line-height: 1.8;
}

.myfuture-page * {
  box-sizing: border-box;
}

.myfuture-page img {
  max-width: 100%;
}

.myfuture-section {
  padding: 5.8rem 3.2rem;
}

.myfuture-section+.myfuture-section {
  border-top: 1px solid var(--myfuture-line);
}

.myfuture-section-head {
  max-width: 88rem;
  margin: 0 auto 3.4rem;
  text-align: center;
}

.myfuture-section-head .mysemantic-h2,.myfuture-econ .mysemantic-h2,.myfuture-campus-intro .mysemantic-h2 {
  margin: .25rem 0 1.1rem;
  color: var(--myfuture-dark);
  font-family: "Noto Serif TC",serif;
  font-size: var(--myfont-section-title, 2.8rem);
  line-height: 1.35;
}

.myfuture-section-head>p:last-child {
  margin: 0;
  color: var(--myfuture-muted);
  font-size: 1.6rem;
}

.myfuture-eyebrow {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.myfuture-text-link {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  margin-top: .7rem;
  font-weight: 800;
  text-decoration: none;
}

.myfuture-econ {
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  gap: 4.2rem;
  align-items: center;
  background: linear-gradient(180deg,#E8F5F7 0%,#F4FAFB 48%,#FFFFFF 100%);
}

.myfuture-econ-copy>p {
  margin: 0 0 1.3rem;
  font-size: 1.55rem;
}

.myfuture-lead {
  color: var(--myfuture-dark);
  font-size: 1.9rem !important;
}

.myfuture-econ-core {
  padding: 1.25rem 1.45rem;
  border-left: .38rem solid var(--myfuture-aqua);
  background: #fff;
  box-shadow: var(--myfuture-shadow);
}

.myfuture-question-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1.25rem;
}

.myfuture-question {
  min-height: 12.5rem;
  padding: 1.8rem;
  border: 1px solid rgba(45,139,203,.15);
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: var(--myfuture-shadow);
}

.myfuture-question:nth-child(2n) {
  background: #F1FBFA;
}

.myfuture-question i {
  margin-bottom: .8rem;
  color: var(--myfuture-blue);
  font-size: 2.35rem;
}

.myfuture-question p {
  margin: 0;
  color: var(--myfuture-dark);
  font-size: clamp(2rem,1.7vw,2.3rem);
  font-weight: 800;
  line-height: 1.42;
}

.myfuture-question-wide {
  grid-column: 1/-1;
  min-height: 9rem;
}

.myfuture-feature-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.8rem;
}

.myfuture-feature-card {
  position: relative;
  min-height: 26rem;
  padding: 2.25rem 2rem;
  border: 1px solid var(--myfuture-line);
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: var(--myfuture-shadow);
  overflow: hidden;
}

.myfuture-feature-icon {
  display: inline-flex;
  width: 5rem;
  height: 5rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.3rem;
  border-radius: 50%;
  color: #fff;
  background: var(--myfuture-blue);
  font-size: 2rem;
}

.myfuture-feature-card:nth-child(2) .myfuture-feature-icon,.myfuture-feature-card:nth-child(5) .myfuture-feature-icon {
  background: var(--myfuture-aqua);
}

.myfuture-feature-card:nth-child(3) .myfuture-feature-icon,.myfuture-feature-card:nth-child(6) .myfuture-feature-icon {
  background: #DDA629;
}

.myfuture-feature-no {
  position: absolute;
  top: 1.6rem;
  right: 1.8rem;
  color: rgba(45,139,203,.16);
  font: 700 3.4rem Georgia;
}

.myfuture-feature-card .mysemantic-h3 {
  margin: 0 0 .8rem;
  color: var(--myfuture-dark);
  font-size: clamp(2rem,1.7vw,2.25rem);
  line-height: 1.35;
}

.myfuture-feature-card p {
  margin: 0;
  font-size: 1.5rem;
}

.myfuture-path {
  max-width: 98rem;
  margin: auto;
  text-align: center;
}

.myfuture-path-row {
  display: grid;
  gap: 1.5rem;
}

.myfuture-path-row-three {
  grid-template-columns: repeat(3,1fr);
}

.myfuture-path-node {
  position: relative;
  padding: 1.45rem 1.2rem;
  border: 1px solid var(--myfuture-line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 .35rem 1rem rgba(31,83,105,.06);
}

.myfuture-path-node i {
  display: block;
  margin-bottom: .45rem;
  color: var(--myfuture-aqua);
  font-size: 2rem;
}

.myfuture-path-node strong {
  display: block;
  color: var(--myfuture-dark);
  font-size: clamp(2rem,1.65vw,2.25rem);
}

.myfuture-path-node span {
  display: block;
  color: var(--myfuture-muted);
  font-size: 1.4rem;
}

.myfuture-path-node-main {
  max-width: 27rem;
  margin: auto;
}

.myfuture-path-node-main * {
  color: #fff !important;
}

.myfuture-path-node-highlight {
  border: 2px solid rgba(242,193,78,.7);
  background: #FFF8E5;
}

.myfuture-path-node-highlight:before {
  content: "▼ ▼";
  position: absolute;
  top: -2.3rem;
  left: 50%;
  transform: translateX(-50%);
  color: #D69A12;
}

.myfuture-path-node-cross:before {
  content: "← ←";
  position: absolute;
  left: -.2rem;
  top: 50%;
  transform: translate(-100%,-50%);
  color: var(--myfuture-aqua);
  font-weight: 800;
}

.myfuture-path-line {
  width: 2px;
  height: 2.6rem;
  margin: auto;
  background: linear-gradient(var(--myfuture-blue),var(--myfuture-aqua));
}

.myfuture-path-advanced {
  gap: .35rem;
  margin-top: 1.2rem;
}

.myfuture-path-arrow {
  color: var(--myfuture-teal);
  font-size: 2.2rem;
  line-height: 1;
}

.myfuture-path-node-small {
  width: 16rem;
  padding: .8rem;
}

.myfuture-note {
  max-width: 80rem;
  margin: 2.2rem auto 0;
  color: var(--myfuture-muted);
  font-size: 1.35rem;
  text-align: center;
}

.myfuture-career-section {
  overflow: hidden;
  background: linear-gradient(#FFF,#F4FBFA);
}

.myfuture-career-orbit {
  position: relative;
  width: min(92rem,100%);
  margin: auto;
}

.myfuture-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(45,139,203,.22);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

.myfuture-orbit-core,.myfuture-orbit-bubble {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 .8rem 2rem rgba(31,83,105,.14);
}

.myfuture-orbit-core {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
}

.myfuture-orbit-core strong {
  font: 700 3rem "Noto Serif TC",serif;
}

.myfuture-orbit-bubble {
  padding: 1.2rem;
  border: 3px solid #fff;
}

.myfuture-orbit-bubble .mysemantic-h3 {
  margin: .2rem 0 0;
  line-height: 1.25;
}

.myfuture-orbit-bubble p {
  margin: .2rem 0 0;
}

.myfuture-orbit-note {
  text-align: center;
  color: var(--myfuture-muted);
  font-size: 1.2rem;
}

.myfuture-voices-section {
  color: #fff;
  background: linear-gradient(135deg,#176C89,#244F75 55%,#17324D);
}

.myfuture-section-head-light .mysemantic-h2,.myfuture-section-head-light>p:last-child {
  color: #fff;
}

.myfuture-voices-layout {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(28rem,.75fr);
  gap: 2.2rem;
}

.myfuture-video {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 1.15rem;
  background: #000;
}

.myfuture-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.myfuture-quotes {
  display: grid;
  gap: 1rem;
}

.myfuture-quotes blockquote {
  position: relative;
  margin: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 1rem;
  background: rgba(255,255,255,.1);
}

.myfuture-quotes blockquote i {
  position: absolute;
  top: 1.55rem;
  left: 1.4rem;
  color: #FFE08A;
}

.myfuture-quotes blockquote p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem,1.6vw,2.15rem);
  font-weight: 700;
  line-height: 1.5;
}

.myfuture-quotes cite {
  color: rgba(255,255,255,.75);
  font-size: 1.2rem;
}

.myfuture-story-links {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.myfuture-story-links a {
  border-radius: 999px;
  text-decoration: none;
}

.myfuture-campus-section {
  background: #F4F7F4;
}

.myfuture-campus-intro {
  max-width: 92rem;
  margin: 0 auto 2.8rem;
  text-align: center;
}

.myfuture-campus-poem {
  color: var(--myfuture-blue);
  font: 400 clamp(1.7rem,2vw,2.2rem) "Noto Serif TC",serif;
}

.myfuture-gallery {
  max-width: 100rem;
  margin: auto;
}

.myfuture-gallery-stage {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #17324D;
}

.myfuture-gallery-stage>img {
  display: block;
  width: 100%;
  height: clamp(30rem,40vw,46rem);
  object-fit: cover;
}

.myfuture-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.4rem 2rem 1.6rem;
  color: #fff;
  background: linear-gradient(to top,rgba(10,28,44,.92),transparent);
}

.myfuture-gallery-caption strong {
  font: 700 2rem "Noto Serif TC",serif;
  margin-right: 1rem;
}

.myfuture-gallery-thumb {
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.myfuture-gallery-thumb img {
  display: block;
}

.myfuture-gallery-thumb.is-active {
  border-color: var(--myfuture-aqua);
}

.myfuture-next-section {
  background: #fff;
}

.myfuture-next-wrap {
  max-width: 104rem;
  margin: auto;
}

.myfuture-next {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--myfuture-line);
  border-radius: 1rem;
  background: linear-gradient(90deg,#F2FAFC,#F1FAF7);
}

.myfuture-next-scroll {
  display: flex;
  gap: .85rem;
  justify-content: center;
}

.myfuture-next a {
  display: inline-flex;
  min-width: 14rem;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.3rem;
  border-radius: 999px;
  color: var(--myfuture-dark);
  background: #fff;
  box-shadow: 0 .2rem .8rem rgba(31,83,105,.08);
  font-size: clamp(1.6rem,1.4vw,1.85rem);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.myfuture-next-hint {
  display: none;
  text-align: right;
  color: var(--myfuture-muted);
}

@media (max-width:900px) {
  .myfuture-econ {
    grid-template-columns: 1fr;
  }

  .myfuture-feature-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .myfuture-voices-layout {
    grid-template-columns: 1fr;
  }

}

@media (max-width:640px) {
  .myfuture-section {
    padding: 3.8rem 1.4rem;
  }

  .myfuture-section-head,.myfuture-campus-intro {
    text-align: left;
  }

  .myfuture-question-grid,.myfuture-feature-grid,.myfuture-path-row-three {
    grid-template-columns: 1fr;
  }

  .myfuture-question-wide {
    grid-column: auto;
  }

  .myfuture-path-node-cross:before {
    left: 50%;
    top: -1.8rem;
    transform: translateX(-50%);
  }

  .myfuture-career-orbit {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
  }

  .myfuture-orbit-ring {
    display: none;
  }

  .myfuture-orbit-core,.myfuture-orbit-bubble {
    position: static;
    width: auto !important;
    height: auto !important;
    min-height: 13rem;
    transform: none !important;
    border-radius: 1.2rem;
  }

  .myfuture-orbit-core {
    grid-column: 1/-1;
  }

  .myfuture-orbit-study {
    grid-column: 1/-1;
    max-width: 22rem !important;
    width: 100% !important;
    justify-self: center;
  }

  .myfuture-gallery-stage>img {
    height: 34rem;
  }

  .myfuture-gallery-thumbs {
    scrollbar-width: none;
  }

  .myfuture-next-hint {
    display: block;
  }

  .myfuture-next {
    scrollbar-width: none;
  }

  .myfuture-next-scroll {
    width: max-content;
    justify-content: flex-start;
  }

  .myfuture-next a {
    min-width: max-content;
    font-size: 1.65rem;
  }

}

.myfuture-feature-card:nth-child(1)::after {
  border-color: rgba(45,139,203,.11);
}

.myfuture-feature-card:nth-child(2)::after {
  border-color: rgba(56,184,178,.11);
}

.myfuture-feature-card:nth-child(3)::after {
  border-color: rgba(228,167,43,.13);
}

.myfuture-feature-card:nth-child(4)::after {
  border-color: rgba(233,134,98,.11);
}

.myfuture-feature-card:nth-child(5)::after {
  border-color: rgba(111,120,201,.11);
}

.myfuture-feature-card:nth-child(6)::after {
  border-color: rgba(77,154,99,.11);
}

.myfuture-path-node-main {
  border: 2px solid #62A7D8;
  background: #EFF7FC;
  box-shadow: 0 .35rem 1rem rgba(45,139,203,.08);
}

.myfuture-path-node-main i {
  display: inline-flex;
  width: 4.4rem;
  height: 4.4rem;
  align-items: center;
  justify-content: center;
  margin: 0 auto .55rem;
  border-radius: 50%;
  color: #fff !important;
  background: #2D8BCB;
}

.myfuture-path-node-main strong {
  color: #17324D !important;
}

.myfuture-path-node-main span {
  color: #667681 !important;
}

.myfuture-path-row-three:first-of-type .myfuture-path-node:nth-child(1) {
  border-color: #8BD8D1;
  background: #EAF9F7;
}

.myfuture-path-row-three:first-of-type .myfuture-path-node:nth-child(2) {
  border-color: #8FC4E7;
  background: #EDF6FC;
}

.myfuture-path-row-three:first-of-type .myfuture-path-node:nth-child(3) {
  border-color: #F1CE72;
  background: #FFF8E5;
}

.myfuture-path-row-three:nth-of-type(2) .myfuture-path-node:nth-child(1) {
  border-color: #F0A58A;
  background: #FDF0EB;
}

.myfuture-path-row-three:nth-of-type(2) .myfuture-path-node:nth-child(2) {
  border-color: #5FA8D8;
  background: #DDEFF9;
}

.myfuture-path-row-three:nth-of-type(2) .myfuture-path-node:nth-child(3) {
  border-color: #B9A7DF;
  background: #F2EDFA;
}

.myfuture-path-row-three:first-of-type .myfuture-path-node:nth-child(1) i {
  color: #2E9D82;
}

.myfuture-path-row-three:first-of-type .myfuture-path-node:nth-child(2) i {
  color: #2D8BCB;
}

.myfuture-path-row-three:first-of-type .myfuture-path-node:nth-child(3) i {
  color: #D69A12;
}

.myfuture-path-row-three:nth-of-type(2) .myfuture-path-node:nth-child(1) i {
  color: #D96944;
}

.myfuture-path-row-three:nth-of-type(2) .myfuture-path-node:nth-child(2) i {
  color: #247EB8;
}

.myfuture-path-row-three:nth-of-type(2) .myfuture-path-node:nth-child(3) i {
  color: #7564B5;
}

.myfuture-path-node-cross > i, .myfuture-path-node-highlight > i {
  transform-origin: center;
}

.myfuture-path-advanced {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.myfuture-orbit-ring {
  border-width: 2px;
  border-color: rgba(45,139,203,.34);
  z-index: 0;
}

.myfuture-orbit-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.myfuture-orbit-core {
  z-index: 4;
}

.myfuture-orbit-core span {
  font-weight: 800;
  line-height: 1.2;
}

.myfuture-orbit-core strong {
  line-height: 1.15;
}

.myfuture-orbit-bubble {
  z-index: 3;
}

.myfuture-orbit-bubble .mysemantic-h3 span {
  display: block;
  white-space: nowrap;
}

.myfuture-orbit-study i {
  font-size: 1.8rem;
}

.myfuture-quotes blockquote {
  padding-right: 4rem;
}

.myfuture-quotes .myfuture-quote-left {
  position: absolute;
  top: 1.55rem;
  left: 1.4rem;
}

.myfuture-quotes .myfuture-quote-right {
  position: absolute;
  right: 1.35rem;
  bottom: 1.3rem;
  left: auto;
  top: auto;
  color: #FFE08A;
  opacity: .9;
}

.myfuture-gallery-stage {
  border-radius: 1.1rem 1.1rem 0 0;
}

.myfuture-gallery-stage > img {
  border-radius: 0;
}

.myfuture-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(8,minmax(0,1fr));
  gap: 0;
  margin: 0;
  padding: 0;
}

.myfuture-gallery-thumb {
  position: relative;
  border: 0;
  border-radius: 0;
  opacity: .42;
  filter: saturate(.55) brightness(.86);
  transition: opacity .2s ease,filter .2s ease;
}

.myfuture-gallery-thumb img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.myfuture-gallery-thumb:first-child {
  border-radius: 0 0 0 1.1rem;
}

.myfuture-gallery-thumb:first-child img {
  border-radius: 0 0 0 1.1rem;
}

.myfuture-gallery-thumb:last-child {
  border-radius: 0 0 1.1rem 0;
}

.myfuture-gallery-thumb:last-child img {
  border-radius: 0 0 1.1rem 0;
}

.myfuture-gallery-thumb:hover, .myfuture-gallery-thumb:focus {
  opacity: .78;
  filter: saturate(.85) brightness(.95);
  transform: none;
}

.myfuture-gallery-thumb.is-active {
  opacity: 1;
  filter: none;
}

.myfuture-gallery-hint {
  margin: .8rem 0 0;
  text-align: center;
  color: #667681;
}

@media (max-width:640px) {
  .myfuture-path-node-cross::before, .myfuture-path-node-highlight::before {
    content: none !important;
  }

  .myfuture-orbit-core span {
    font-size: 2rem;
  }

  .myfuture-orbit-core strong {
    font-size: 2.8rem;
  }

  .myfuture-gallery-thumbs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 0;
  }

  .myfuture-gallery-thumb {
    flex: 0 0 9.4rem;
  }

  .myfuture-gallery-thumb:first-child, .myfuture-gallery-thumb:first-child img, .myfuture-gallery-thumb:last-child, .myfuture-gallery-thumb:last-child img {
    border-radius: 0;
  }

}

.myfuture-page {
  --myfuture-blue: #3F6FA6;
  --myfuture-green: #638C4B;
  --myfuture-yellow: #D5A73A;
  --myfuture-red: #C66E5A;
  --myfuture-purple: #7768A6;
  --myfuture-sky: #6F9CC5;
  --myfuture-paper: #FAFAF7;
  --myfuture-soft: #F2F5F0;
  --myfuture-line: #DDE3E1;
  --myfuture-accent: #3F6FA6;
}

.myfuture-eyebrow {
  color: var(--myfuture-purple);
}

.myfuture-question:nth-child(1) {
  background: #F1F6FB;
}

.myfuture-question:nth-child(1) i {
  color: var(--myfuture-blue);
}

.myfuture-question:nth-child(2) {
  background: #F1F6EE;
}

.myfuture-question:nth-child(2) i {
  color: var(--myfuture-green);
}

.myfuture-question:nth-child(3) {
  background: #FFF8E8;
}

.myfuture-question:nth-child(3) i {
  color: var(--myfuture-yellow);
}

.myfuture-question:nth-child(4) {
  background: #FBEFED;
}

.myfuture-question:nth-child(4) i {
  color: var(--myfuture-red);
}

.myfuture-question:nth-child(5) {
  background: #F3F0F8;
}

.myfuture-question:nth-child(5) i {
  color: var(--myfuture-purple);
}

.myfuture-econ-core {
  border-left-color: var(--myfuture-yellow);
}

.myfuture-text-link {
  color: var(--myfuture-blue);
}

.myfuture-feature-card:nth-child(1) .myfuture-feature-icon {
  background: #3F6FA6;
}

.myfuture-feature-card:nth-child(2) .myfuture-feature-icon {
  background: #638C4B;
}

.myfuture-feature-card:nth-child(3) .myfuture-feature-icon {
  background: #D5A73A;
}

.myfuture-feature-card:nth-child(4) .myfuture-feature-icon {
  background: #C66E5A;
}

.myfuture-feature-card:nth-child(5) .myfuture-feature-icon {
  background: #7768A6;
}

.myfuture-feature-card:nth-child(6) .myfuture-feature-icon {
  background: #5D87B4;
}

.myfuture-path-section {
  background: linear-gradient(180deg,#FAFBF8,#F3F6F2);
}

.myfuture-path-card-cross {
  background: #EEF5EA !important;
  border-color: #A9C49A !important;
}

.myfuture-path-card-cross i {
  color: #638C4B !important;
}

.myfuture-path-card-professional {
  background: #EDF3F9 !important;
  border-color: #9EBAD5 !important;
}

.myfuture-path-card-professional i {
  color: #3F6FA6 !important;
}

.myfuture-path-card-overseas {
  background: #FFF6E2 !important;
  border-color: #E5C676 !important;
}

.myfuture-path-card-overseas i {
  color: #C99315 !important;
}

.myfuture-path-card-employment {
  background: #FBEDE9 !important;
  border-color: #DDA38F !important;
}

.myfuture-path-card-employment i {
  color: #B95F49 !important;
}

.myfuture-path-card-fasttrack {
  background: #E1EDF7 !important;
  border-color: #719CC3 !important;
}

.myfuture-path-card-fasttrack i {
  color: #2F689B !important;
}

.myfuture-path-card-further {
  background: #F0EDF7 !important;
  border-color: #B0A5CD !important;
}

.myfuture-path-card-further i {
  color: #6E5C9E !important;
}

.myfuture-path-node-cross > i, .myfuture-path-node-highlight > i {
  transform: none !important;
}

.myfuture-path-advanced .myfuture-path-node-small {
  background: #E8F0F7 !important;
  border-color: #93B1CC !important;
}

.myfuture-path-advanced .myfuture-path-node-small:last-child {
  background: #DCE8F2 !important;
  border-color: #769DBE !important;
}

.myfuture-career-orbit {
  height: 70rem;
}

.myfuture-orbit-core {
  width: 15.5rem !important;
  height: 15.5rem !important;
  background: linear-gradient(145deg,#496F98,#365C86) !important;
}

.myfuture-orbit-core span {
  font-size: 2.55rem !important;
}

.myfuture-orbit-core strong {
  font-size: 3.05rem !important;
}

.myfuture-orbit-ring-one {
  width: 39rem !important;
  height: 39rem !important;
  border-color: rgba(63,111,166,.38) !important;
}

.myfuture-orbit-ring-two {
  width: 63rem !important;
  height: 63rem !important;
  border-color: rgba(99,140,75,.32) !important;
}

.myfuture-orbit-finance {
  width: 23rem !important;
  height: 23rem !important;
  left: 3% !important;
  top: 2% !important;
  background: #EAF1F8 !important;
  color: #315F8A !important;
}

.myfuture-orbit-industry {
  width: 20.5rem !important;
  height: 20.5rem !important;
  right: 4% !important;
  top: 3% !important;
  background: #EEF5EA !important;
  color: #547A3F !important;
}

.myfuture-orbit-public {
  width: 18.2rem !important;
  height: 18.2rem !important;
  left: 5% !important;
  bottom: 3% !important;
  background: #FFF5DF !important;
  color: #98711A !important;
}

.myfuture-orbit-data {
  width: 21.5rem !important;
  height: 21.5rem !important;
  right: 2% !important;
  bottom: 1% !important;
  background: #F0EDF7 !important;
  color: #665891 !important;
}

.myfuture-orbit-study {
  width: 17rem !important;
  height: 17rem !important;
  right: -1% !important;
  top: 40% !important;
  background: #F9ECE8 !important;
  color: #A45443 !important;
}

.myfuture-orbit-bubble .mysemantic-h3 {
  font-size: 2rem !important;
}

.myfuture-orbit-bubble p {
  font-size: 1.25rem !important;
}

.myfuture-quotes blockquote {
  padding: 1.5rem 1.6rem 1.35rem 1.6rem !important;
}

.myfuture-quote-text {
  position: relative;
  margin: 0 0 .45rem !important;
  color: #fff;
  font-size: clamp(1.9rem,1.6vw,2.15rem) !important;
  font-weight: 700;
  line-height: 1.5;
}

.myfuture-quote-text .myfuture-quote-left {
  position: absolute !important;
  left: 0 !important;
  top: .15rem !important;
}

.myfuture-quote-text .myfuture-quote-right {
  position: absolute !important;
  right: 0 !important;
  bottom: .05rem !important;
  left: auto !important;
  top: auto !important;
}

.myfuture-quotes blockquote > cite {
  display: block;
  padding-left: 2.4rem;
}

.myfuture-story-links a {
  color: #2E4B70 !important;
  background: #fff !important;
  border: 2px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.13);
  font-weight: 800;
  font-size: 1.4rem;
  padding: .9rem 1.35rem;
}

.myfuture-story-links a:hover, .myfuture-story-links a:focus {
  color: #fff !important;
  background: #3F6FA6 !important;
  border-color: #3F6FA6 !important;
}

.myfuture-gallery-thumb.is-active {
  box-shadow: inset 0 0 0 4px #3F6FA6 !important;
}

.myfuture-gallery-hint i {
  color: #3F6FA6 !important;
}

.myfuture-page .myfuture-next a:hover,
.myfuture-page .myfuture-next a:focus {
  color: #fff !important;
  background: #3F6FA6 !important;
}

.myfuture-page .myfuture-next a:hover i,
.myfuture-page .myfuture-next a:focus i,
.myfuture-page .myfuture-next a:hover span,
.myfuture-page .myfuture-next a:focus span {
  color: #fff !important;
}

@media (max-width:640px) {
  .myfuture-page .myfuture-head-kicker {
    transform: translateX(.65rem);
  }

  .myfuture-page .myfuture-head-desc {
    transform: translateX(-.4rem);
  }

  .myfuture-career-orbit {
    height: auto;
  }

  .myfuture-orbit-arrows, .myfuture-orbit-ring {
    display: none !important;
  }

  .myfuture-orbit-core, .myfuture-orbit-bubble {
    width: auto !important;
    height: auto !important;
  }

  .myfuture-orbit-core {
    min-height: 13rem;
  }

}

.myfuture-path-card-cross > i, .myfuture-path-card-professional > i, .myfuture-path-card-overseas > i, .myfuture-path-card-employment > i, .myfuture-path-card-fasttrack > i, .myfuture-path-card-further > i {
  display: inline-flex !important;
  width: 4.4rem !important;
  height: 4.4rem !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto .65rem !important;
  border-radius: 50%;
  font-size: 2.3rem !important;
}

.myfuture-path-card-cross > i {
  transform: rotate(180deg) !important;
  color: #fff !important;
  background: #2E9D82;
}

.myfuture-path-card-professional > i {
  color: #fff !important;
  background: #2D8BCB;
}

.myfuture-path-card-overseas > i {
  color: #fff !important;
  background: #D69A12;
}

.myfuture-path-card-employment > i {
  color: #fff !important;
  background: #D96944;
}

.myfuture-path-card-fasttrack > i {
  transform: rotate(90deg) !important;
  color: #fff !important;
  background: #247EB8;
}

.myfuture-path-card-further > i {
  color: #fff !important;
  background: #7564B5;
}

.myfuture-path-node-cross::before, .myfuture-path-node-highlight::before {
  content: none !important;
}

.myfuture-orbit-core-title {
  display: block;
  font-family: "Noto Serif TC",serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: .06em;
}

.myfuture-orbit-arrows {
  z-index: 2 !important;
}

.myfuture-orbit-arrows path {
  fill: none !important;
  stroke: #557A9A !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  marker-end: url(#myfuture-arrowhead);
}

.myfuture-orbit-arrows marker path {
  fill: #557A9A !important;
  stroke: none !important;
}

.myfuture-orbit-public p, .myfuture-orbit-study p {
  font-size: 1.25rem !important;
}

.myfuture-quote-text {
  padding: 0 !important;
}

.myfuture-quote-text > .myfuture-quote-left {
  position: static !important;
  display: inline-block;
  margin-right: .45rem;
  vertical-align: .08em;
}

.myfuture-quote-text span {
  display: inline;
}

.myfuture-quote-text span > .myfuture-quote-right {
  position: static !important;
  display: inline-block;
  margin-left: .22em;
  vertical-align: .02em;
  font-size: .82em;
}

.myfuture-page .myfuture-head-kicker {
  transform: translateX(1rem);
}

.myfuture-page .myfuture-head-desc {
  transform: translateX(-.65rem);
}

@media (max-width:640px) {
  .myfuture-path-card-cross > i {
    transform: rotate(180deg) !important;
  }

  .myfuture-path-card-fasttrack > i {
    transform: rotate(90deg) !important;
  }

}

.myfuture-orbit-bubble i {
  font-size: 2.75rem !important;
  margin-bottom: .38rem !important;
}

.myfuture-orbit-finance i, .myfuture-orbit-data i {
  font-size: 3rem !important;
}

.myfuture-orbit-finance .mysemantic-h3, .myfuture-orbit-data .mysemantic-h3 {
  font-size: 2.78rem !important;
}

.myfuture-orbit-industry .mysemantic-h3 {
  font-size: 2.58rem !important;
}

.myfuture-orbit-public .mysemantic-h3 {
  font-size: 2.42rem !important;
}

.myfuture-orbit-study .mysemantic-h3 {
  font-size: 2.18rem !important;
}

.myfuture-orbit-finance p, .myfuture-orbit-data p {
  font-size: 1.58rem !important;
}

.myfuture-orbit-industry p {
  font-size: 1.52rem !important;
}

.myfuture-orbit-public p {
  font-size: 1.42rem !important;
}

.myfuture-orbit-study p {
  font-size: 1.38rem !important;
}

.myfuture-orbit-core-title {
  font-size: 2.65rem !important;
}

.myfuture-orbit-core small {
  font-size: 1.05rem !important;
}

.myfuture-orbit-arrows {
  filter: drop-shadow(0 1px 1px rgba(23,50,77,.18)) !important;
}

.myfuture-orbit-arrows path {
  stroke-width: 2.7 !important;
}

@media (max-width:640px) {
  .myfuture-orbit-bubble i {
    font-size: 2.45rem !important;
  }

  .myfuture-orbit-bubble .mysemantic-h3, .myfuture-orbit-finance .mysemantic-h3, .myfuture-orbit-industry .mysemantic-h3, .myfuture-orbit-public .mysemantic-h3, .myfuture-orbit-data .mysemantic-h3, .myfuture-orbit-study .mysemantic-h3 {
    font-size: 2rem !important;
  }

  .myfuture-orbit-bubble p, .myfuture-orbit-finance p, .myfuture-orbit-industry p, .myfuture-orbit-public p, .myfuture-orbit-data p, .myfuture-orbit-study p {
    font-size: 1.25rem !important;
  }

}

.myfuture-page .myfuture-gallery-stage > img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: clamp(30rem, 40vw, 46rem) !important;
  object-fit: cover !important;
}

@media screen and (max-width: 640px) {
  .myfuture-page .myfuture-gallery-stage > img {
    height: 34rem !important;
  }

}

.myfuture-page .myfuture-orbit-bubble .mysemantic-h3 {
  line-height: 1.25 !important;
}

.myfuture-page .myfuture-gallery-thumbs {
  display: flex !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
}

.myfuture-page .myfuture-gallery-thumb {
  flex: 1 1 0 !important;
  min-width: 0;
}

.myfuture-page .myfuture-gallery-thumb img {
  width: 100% !important;
  aspect-ratio: 4/3;
  object-fit: cover !important;
}

@media (max-width:640px) {
  .myfuture-page .myfuture-gallery-thumbs {
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  .myfuture-page .myfuture-gallery-thumbs::-webkit-scrollbar {
    display: none;
  }

  .myfuture-page .myfuture-gallery-thumb {
    flex: 0 0 9.4rem !important;
  }

}

.myfuture-page .myfuture-orbit-bubble .mysemantic-h3 {
  max-width: 90%;
  text-align: center;
  overflow-wrap: normal;
  word-break: keep-all;
}

.myfuture-page .myfuture-orbit-bubble .mysemantic-h3 > span {
  display: block;
  white-space: nowrap;
}

html[lang="en"] .myfuture-page .myfuture-orbit-bubble .mysemantic-h3 {
  max-width: 88%;
  line-height: 1.12 !important;
  letter-spacing: -.015em;
}

html[lang="en"] .myfuture-page .myfuture-orbit-finance .mysemantic-h3 {
  font-size: 2.18rem !important;
}

html[lang="en"] .myfuture-page .myfuture-orbit-industry .mysemantic-h3 {
  font-size: 2.05rem !important;
}

html[lang="en"] .myfuture-page .myfuture-orbit-public .mysemantic-h3 {
  font-size: 1.82rem !important;
}

html[lang="en"] .myfuture-page .myfuture-orbit-data .mysemantic-h3 {
  font-size: 2.08rem !important;
}

html[lang="en"] .myfuture-page .myfuture-orbit-study .mysemantic-h3 {
  font-size: 1.72rem !important;
}

html[lang="en"] .myfuture-page .myfuture-orbit-bubble p {
  max-width: 88%;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}

@media (min-width:641px) and (max-width:900px) {
  .myfuture-page .myfuture-career-orbit {
    transform: scale(.88);
    transform-origin: top center;
    margin-bottom: -5rem;
  }

}

.myfuture-page .myfuture-section-head .mysemantic-h2, .myfuture-page .myfuture-econ .mysemantic-h2, .myfuture-page .myfuture-campus-intro .mysemantic-h2 {
  font-size: var(--myfont-section-title, 2.8rem) !important;
  line-height: 1.35 !important;
}

.myfuture-page .myfuture-question p {
  font-size: clamp(2rem,1.7vw,2.3rem) !important;
}

.myfuture-page .myfuture-feature-card .mysemantic-h3 {
  font-size: clamp(2rem,1.7vw,2.25rem) !important;
}

.myfuture-page .myfuture-path-node strong {
  font-size: clamp(2rem,1.65vw,2.25rem) !important;
}

.myfuture-page .myfuture-quotes blockquote p {
  font-size: clamp(1.9rem,1.6vw,2.15rem) !important;
}

.myfuture-page .myfuture-next a {
  font-size: clamp(1.6rem,1.4vw,1.85rem) !important;
}

.myfuture-page .myfuture-gallery-caption {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "title credit" "text credit";
  align-items: end;
  column-gap: 1.4rem;
  row-gap: .25rem;
}

.myfuture-page #myfuture-gallery-title {
  grid-area: title;
}

.myfuture-page #myfuture-gallery-text {
  grid-area: text;
}

.myfuture-page .myfuture-gallery-credit {
  grid-area: credit;
  justify-self: end;
  align-self: end;
  font-size: .86em;
  line-height: 1.35;
  font-weight: 400;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
}

@media (max-width:640px) {
  .myfuture-page .myfuture-gallery-caption {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "text" "credit";
  }

  .myfuture-page .myfuture-gallery-credit {
    font-size: .82em;
    margin-top: .2rem;
  }

}

.myfuture-page .myfuture-path-v17 {
  max-width: 110rem;
  margin: 2.8rem auto 0;
}

.myfuture-page .myfuture-path-degree {
  width: min(30rem,88%);
  margin: 0 auto;
  padding: 1.8rem 2rem;
  border-radius: 1.4rem;
  text-align: center;
  box-shadow: 0 .8rem 2rem rgba(23,50,77,.10);
}

.myfuture-page .myfuture-path-degree-main {
  color: #fff;
  background: linear-gradient(135deg,#1f6f9f,#2e8e78);
}

.myfuture-page .myfuture-path-degree i {
  display: flex;
  width: 4.8rem;
  height: 4.8rem;
  margin: 0 auto .7rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-size: 2.5rem;
}

.myfuture-page .myfuture-path-degree strong {
  display: block;
  font-size: 2.35rem !important;
  line-height: 1.2;
}

.myfuture-page .myfuture-path-degree span {
  display: block;
  margin-top: .45rem;
  font-size: 1.4rem;
  opacity: .92;
}

.myfuture-page .myfuture-path-study-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1.4rem;
  max-width: 88rem;
  margin: 2.6rem auto 0;
}

.myfuture-page .myfuture-path-study {
  min-height: 13rem;
  padding: 1.6rem 1.5rem;
  border-radius: 1.25rem;
  text-align: center;
  box-shadow: 0 .6rem 1.6rem rgba(23,50,77,.08);
}

.myfuture-page .myfuture-path-study i {
  display: flex;
  width: 4.4rem;
  height: 4.4rem;
  margin: 0 auto .7rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 2.25rem;
  color: #fff;
  background: rgba(0,0,0,.14);
}

.myfuture-page .myfuture-path-study strong {
  display: block;
  font-size: 2rem !important;
}

.myfuture-page .myfuture-path-study span {
  display: block;
  margin-top: .5rem;
  font-size: 1.35rem;
  line-height: 1.5;
}

.myfuture-page .myfuture-path-route-intro {
  margin: 3.4rem auto 1.6rem;
  text-align: center;
}

.myfuture-page .myfuture-path-route-intro span {
  display: inline-block;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  background: #eef4f7;
  color: #315066;
  font-size: 1.4rem;
  font-weight: 700;
}

.myfuture-page .myfuture-path-routes {
  display: grid;
  gap: 1.25rem;
}

.myfuture-page .myfuture-path-route {
  display: grid;
  grid-template-columns: 5rem minmax(0,1fr) minmax(18rem,24rem);
  align-items: center;
  gap: 1.2rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #dce5ea;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 .45rem 1.2rem rgba(23,50,77,.055);
}

.myfuture-page .myfuture-path-route:first-child {
  grid-template-columns: 5rem minmax(0,1fr);
}

.myfuture-page .myfuture-path-route-no {
  display: flex;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf3f6;
  color: #38576c;
  font-weight: 800;
  font-size: 1.45rem;
}

.myfuture-page .myfuture-path-route-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-width: 0;
}

.myfuture-page .myfuture-path-route-node {
  min-width: 10rem;
  padding: 1rem 1.3rem;
  border-radius: 1rem;
  background: #f5f8fa;
  text-align: center;
  color: #2f4757;
  font-size: 1.55rem;
  font-weight: 700;
  white-space: nowrap;
}

.myfuture-page .myfuture-path-route-master {
  background: #eaf2fb;
  color: #285b86;
}

.myfuture-page .myfuture-path-route-phd {
  background: #efeafd;
  color: #5f4e9c;
}

.myfuture-page .myfuture-path-route-job {
  background: #e8f6ef;
  color: #277257;
}

.myfuture-page .myfuture-path-route-arrow {
  color: #8da2af;
  font-size: 2.1rem;
  line-height: 1;
}

.myfuture-page .myfuture-path-fasttrack {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  grid-template-areas: "icon title" "icon desc";
  column-gap: .7rem;
  align-items: center;
  padding: .9rem 1rem;
  border-radius: 1rem;
  background: #eef6fb;
  color: #35677f;
}

.myfuture-page .myfuture-path-fasttrack i {
  grid-area: icon;
  display: flex;
  width: 3.6rem;
  height: 3.6rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2e7fa9;
  color: #fff;
  font-size: 1.7rem;
  transform: rotate(90deg);
}

.myfuture-page .myfuture-path-fasttrack strong {
  grid-area: title;
  font-size: 1.5rem !important;
}

.myfuture-page .myfuture-path-fasttrack span {
  grid-area: desc;
  margin-top: .1rem;
  font-size: 1.2rem;
  line-height: 1.35;
  color: #587687;
}

@media (max-width:640px) {
  .myfuture-page .myfuture-path-study-grid {
    grid-template-columns: 1fr;
    max-width: 34rem;
    gap: .9rem;
  }

  .myfuture-page .myfuture-path-study {
    min-height: auto;
  }

  .myfuture-page .myfuture-path-route {
    grid-template-columns: 1fr !important;
    gap: .8rem;
    padding: 1.1rem;
  }

  .myfuture-page .myfuture-path-route-no {
    margin: 0 auto;
  }

  .myfuture-page .myfuture-path-route-flow {
    flex-direction: column;
    gap: .45rem;
  }

  .myfuture-page .myfuture-path-route-arrow {
    transform: rotate(90deg);
    font-size: 1.8rem;
  }

  .myfuture-page .myfuture-path-route-node {
    width: min(28rem,92%);
    min-width: 0;
  }

  .myfuture-page .myfuture-path-fasttrack {
    width: min(28rem,92%);
    margin: .3rem auto 0;
  }

}

.myfuture-page .myfuture-path-v17 {
  display: none !important;
}

.myfuture-page .myfuture-path-map-v18 {
  position: relative;
  width: min(100%,100rem);
  margin: 2.8rem auto 0;
}

.myfuture-page .myfuture-path-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}

.myfuture-page .myfuture-path-lines line {
  stroke: #2d6f93;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.myfuture-page .myfuture-path-lines .myfuture-path-arrowline {
  marker-end: url(#myfuture-arrow-v18);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

.myfuture-page .myfuture-path-lines marker path {
  fill: #2d6f93;
}

.myfuture-page .myfuture-path-node-v18 {
  position: absolute;
  width: 20rem;
  min-height: 12.5rem;
  padding: 1.5rem 1.4rem;
  border: 1px solid rgba(44,71,92,.12);
  border-radius: 1.35rem;
  text-align: center;
  box-shadow: 0 .7rem 1.7rem rgba(30,55,75,.09);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.myfuture-page .myfuture-path-node-v18 i {
  display: flex;
  width: 4.7rem;
  height: 4.7rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: .7rem;
  font-size: 2.35rem;
  color: #fff;
}

.myfuture-page .myfuture-path-node-v18 strong {
  display: block;
  font-size: 2.05rem !important;
  line-height: 1.2;
}

.myfuture-page .myfuture-path-node-v18 span {
  display: block;
  margin-top: .45rem;
  font-size: 1.3rem;
  line-height: 1.45;
}

.myfuture-page .myfuture-path-professional-v18 {
  left: 40%;
  top: 2.5rem;
  background: #f7efd9;
  color: #7a5b1f;
}

.myfuture-page .myfuture-path-professional-v18 i {
  background: #d4a12d;
}

.myfuture-page .myfuture-path-cross-v18 {
  left: 3%;
  top: 23.5rem;
  background: #F6E1E7;
  color: #9A5265;
}

.myfuture-page .myfuture-path-cross-v18 i {
  background: #B23E50;
}

.myfuture-page .myfuture-path-bachelor-v18 {
  left: 40%;
  top: 23rem;
  background: #edf3fb;
  color: #355f8c;
}

.myfuture-page .myfuture-path-bachelor-v18 i {
  background: #4a79b8;
}

.myfuture-page .myfuture-path-overseas-v18 {
  right: 3%;
  top: 23.5rem;
  background: #eef5e8;
  color: #55743a;
}

.myfuture-page .myfuture-path-overseas-v18 i {
  background: #6f9b4f;
}

.myfuture-page .myfuture-path-master-v18 {
  right: 15%;
  top: 43.5rem;
  background: #E3F2F8;
  color: #2D6F88;
}

.myfuture-page .myfuture-path-master-v18 i {
  background: #4B93AE;
}

.myfuture-page .myfuture-path-phd-v18 {
  right: 38%;
  top: 63rem;
  background: #f2eaf7;
  color: #6b4c7e;
}

.myfuture-page .myfuture-path-phd-v18 i {
  background: #8b68a3;
}

.myfuture-page .myfuture-path-job-v18 {
  left: 5%;
  top: 57rem;
  width: 21rem;
  background: #f7ece8;
  color: #8a4f3e;
}

.myfuture-page .myfuture-path-job-v18 i {
  background: #c8654d;
}

.myfuture-page .myfuture-path-fastlabel-v18 {
  margin-top: .65rem !important;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: 1.18rem !important;
  font-weight: 700;
}

.myfuture-page .myfuture-path-mobile-v18 {
  display: none;
}

@media (max-width:1024px) {
  .myfuture-page .myfuture-path-map-v18 {
    display: none;
  }

  .myfuture-page .myfuture-path-mobile-v18 {
    display: block;
    margin-top: 2.2rem;
  }

  .myfuture-page .myfuture-path-mobile-stage {
    display: grid;
    gap: 1.2rem;
    max-width: 76rem;
    margin: 0 auto;
  }

  .myfuture-page .myfuture-path-mobile-node,
  .myfuture-page .myfuture-path-mobile-mini {
    border-radius: 1.15rem;
    border: 1px solid rgba(44,71,92,.12);
    box-shadow: 0 .55rem 1.35rem rgba(30,55,75,.08);
    text-align: center;
  }

  .myfuture-page .myfuture-path-mobile-node {
    padding: 1.3rem 1.2rem;
  }

  .myfuture-page .myfuture-path-mobile-node i,
  .myfuture-page .myfuture-path-mobile-mini i {
    display: flex;
    width: 4rem;
    height: 4rem;
    margin: 0 auto .55rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 2rem;
  }

  .myfuture-page .myfuture-path-mobile-node strong,
  .myfuture-page .myfuture-path-mobile-mini strong {
    display: block;
    font-size: 1.8rem !important;
  }

  .myfuture-page .myfuture-path-mobile-node span {
    display: block;
    margin-top: .35rem;
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .myfuture-page .myfuture-path-mobile-study {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .8rem;
  }

  .myfuture-page .myfuture-path-mobile-mini {
    padding: 1.05rem 1rem;
  }

  .myfuture-page .myfuture-path-mobile-route {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .8rem;
  }

  .myfuture-page .myfuture-path-mobile-legend {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .45rem .8rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: #f7f9fa;
    color: #536875;
    font-size: 1.15rem;
    line-height: 1.4;
    text-align: center;
  }
}

@media (max-width:640px) {
  .myfuture-page .myfuture-path-mobile-stage {
    max-width: 34rem;
  }

  .myfuture-page .myfuture-path-mobile-study,
  .myfuture-page .myfuture-path-mobile-route,
  .myfuture-page .myfuture-path-mobile-legend {
    grid-template-columns: 1fr;
  }

  .myfuture-page .myfuture-path-mobile-legend {
    text-align: left;
  }
}

.myfuture-page .myfuture-path-map-v18 {
  height: 82rem !important;
}

.myfuture-page .myfuture-path-lines {
  height: 72rem !important;
}

.myfuture-page .myfuture-path-section > .myfuture-note {
  margin-top: 2.8rem !important;
}

.myfuture-page .myfuture-path-fastlabel-v18 {
  background: rgba(75,147,174,.14) !important;
  color: #2D6F88 !important;
}

@media (max-width:1024px) {
  .myfuture-page .myfuture-path-mobile-bachelor {
    background: #edf3fb !important;
    color: #355f8c !important;
  }

  .myfuture-page .myfuture-path-mobile-bachelor i {
    background: #4a79b8 !important;
  }

  .myfuture-page .myfuture-path-mobile-professional {
    background: #f7efd9 !important;
    color: #7a5b1f !important;
  }

  .myfuture-page .myfuture-path-mobile-professional i {
    background: #d4a12d !important;
  }

  .myfuture-page .myfuture-path-mobile-cross {
    background: #F6E1E7 !important;
    color: #9A5265 !important;
  }

  .myfuture-page .myfuture-path-mobile-cross i {
    background: #B23E50 !important;
  }

  .myfuture-page .myfuture-path-mobile-overseas {
    background: #eef5e8 !important;
    color: #55743a !important;
  }

  .myfuture-page .myfuture-path-mobile-overseas i {
    background: #6f9b4f !important;
  }

  .myfuture-page .myfuture-path-mobile-master {
    background: #E3F2F8 !important;
    color: #2D6F88 !important;
  }

  .myfuture-page .myfuture-path-mobile-master i {
    background: #4B93AE !important;
  }

  .myfuture-page .myfuture-path-mobile-phd {
    background: #f2eaf7 !important;
    color: #6b4c7e !important;
  }

  .myfuture-page .myfuture-path-mobile-phd i {
    background: #8b68a3 !important;
  }

  .myfuture-page .myfuture-path-mobile-job {
    background: #f7ece8 !important;
    color: #8a4f3e !important;
  }

  .myfuture-page .myfuture-path-mobile-job i {
    background: #c8654d !important;
  }

}

html[lang="en"] .myfuture-page .myfuture-path-node-v18 {
  width: 22rem;
  padding: 1.35rem 1.2rem;
}

html[lang="en"] .myfuture-page .myfuture-path-node-v18 strong {
  font-size: 1.82rem !important;
  line-height: 1.15 !important;
}

html[lang="en"] .myfuture-page .myfuture-path-node-v18 span {
  font-size: 1.16rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

html[lang="en"] .myfuture-page .myfuture-path-fastlabel-v18 {
  font-size: 1.02rem !important;
}

html[lang="en"] .myfuture-page .myfuture-orbit-bubble .mysemantic-h3 {
  max-width: 86% !important;
  line-height: 1.08 !important;
  letter-spacing: -.015em;
}

html[lang="en"] .myfuture-page .myfuture-orbit-bubble .mysemantic-h3 > span {
  display: block;
  white-space: nowrap;
}


html[lang="en"] .myfuture-page .myfuture-orbit-industry .mysemantic-h3 {
  font-size: 2.02rem !important;
}

html[lang="en"] .myfuture-page .myfuture-orbit-public .mysemantic-h3 {
  font-size: 1.76rem !important;
}

html[lang="en"] .myfuture-page .myfuture-orbit-data .mysemantic-h3 {
  font-size: 1.98rem !important;
}

html[lang="en"] .myfuture-page .myfuture-orbit-study .mysemantic-h3 {
  font-size: 1.68rem !important;
}

html[lang="en"] .myfuture-page .myfuture-orbit-bubble p {
  max-width: 84% !important;
  font-size: 1.12rem !important;
  line-height: 1.22 !important;
  overflow-wrap: anywhere;
}

html[lang="en"] .myfuture-page .myfuture-orbit-core-title {
  font-size: 2.2rem !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

html[lang="en"] .myfuture-page .myfuture-orbit-core small {
  max-width: 82%;
  text-align: center;
  line-height: 1.15;
}

html[lang="en"] .myfuture-page .myfuture-feature-card .mysemantic-h3 {
  line-height: 1.25 !important;
}

html[lang="en"] .myfuture-page .myfuture-next a {
  white-space: nowrap;
}

@media (max-width:640px) {
  html[lang="en"] .myfuture-page .myfuture-path-mobile-node strong, html[lang="en"] .myfuture-page .myfuture-path-mobile-mini strong {
    font-size: 1.62rem !important;
    line-height: 1.2 !important;
  }

  html[lang="en"] .myfuture-page .myfuture-path-mobile-node span {
    overflow-wrap: anywhere;
  }

  html[lang="en"] .myfuture-page .myfuture-orbit-bubble .mysemantic-h3, html[lang="en"] .myfuture-page .myfuture-orbit-finance .mysemantic-h3, html[lang="en"] .myfuture-page .myfuture-orbit-industry .mysemantic-h3, html[lang="en"] .myfuture-page .myfuture-orbit-public .mysemantic-h3, html[lang="en"] .myfuture-page .myfuture-orbit-data .mysemantic-h3, html[lang="en"] .myfuture-page .myfuture-orbit-study .mysemantic-h3 {
    max-width: 100% !important;
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }

  html[lang="en"] .myfuture-page .myfuture-orbit-bubble .mysemantic-h3 > span {
    white-space: normal;
  }

  html[lang="en"] .myfuture-page .myfuture-orbit-bubble p {
    max-width: 100% !important;
    font-size: 1.18rem !important;
  }

}

@media (min-width:641px) {
  html[lang="en"] .myfuture-page .myfuture-next-scroll {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: .85rem;
  }

  html[lang="en"] .myfuture-page .myfuture-next a {
    min-width: 0 !important;
    width: 100%;
    white-space: normal !important;
    text-align: center;
    line-height: 1.2;
    padding: 1rem .8rem;
  }

  html[lang="en"] .myfuture-page .myfuture-next a span {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
  }

}

@media (max-width:640px) {
  html[lang="en"] .myfuture-page .myfuture-next-scroll {
    display: flex;
    width: max-content;
  }

  html[lang="en"] .myfuture-page .myfuture-next a {
    min-width: max-content !important;
    width: auto;
    white-space: nowrap !important;
  }

}


/* =========================================================
 * Career Pathways v1.0 | 2026-08-12
 * UCAN 七組職涯導向；僅作用於未來學生頁。
 * ========================================================= */
.myfuture-page .myfuture-career-section {
  background: linear-gradient(180deg,#fff,#f5f8f6);
}
.myfuture-page .myfuture-career-program {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  max-width: 92rem;
  margin: 0 auto 2.4rem;
  padding: 1.55rem 1.8rem;
  border: 1px solid #d9e3e0;
  border-radius: 1.3rem;
  background: #fff;
  box-shadow: 0 .5rem 1.4rem rgba(31,83,105,.07);
}
.myfuture-page .myfuture-career-program-icon {
  flex: 0 0 5.2rem;
  display: flex;
  width: 5.2rem;
  height: 5.2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--myfuture-blue);
  font-size: 2.35rem;
}
.myfuture-page .myfuture-career-program span { display:block; color:var(--myfuture-purple); font-size:1.15rem; font-weight:800; letter-spacing:.08em; }
.myfuture-page .myfuture-career-program strong { display:block; margin:.15rem 0 .2rem; color:var(--myfuture-dark); font:700 2.25rem/1.3 "Noto Serif TC",serif; }
.myfuture-page .myfuture-career-program p { margin:0; color:var(--myfuture-muted); font-size:1.35rem; }
.myfuture-page .myfuture-career-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; max-width:112rem; margin:0 auto; }
.myfuture-page .myfuture-career-card { --mycareer-accent:#3F6FA6; --mycareer-soft:#EEF4FA; overflow:hidden; border:1px solid #dce4e2; border-radius:1.25rem; background:#fff; box-shadow:0 .55rem 1.45rem rgba(31,83,105,.075); }
.myfuture-page .myfuture-career-card-head { position:relative; display:flex; min-height:8.2rem; align-items:center; gap:1rem; padding:1.4rem 4.8rem 1.4rem 1.5rem; background:var(--mycareer-soft); border-bottom:3px solid var(--mycareer-accent); }
.myfuture-page .myfuture-career-card-head > i { display:flex; flex:0 0 4.2rem; width:4.2rem; height:4.2rem; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:var(--mycareer-accent); font-size:1.9rem; }
.myfuture-page .myfuture-career-card-head .mysemantic-h3 { margin:0; color:var(--myfuture-dark); font:700 2.05rem/1.3 "Noto Serif TC",serif; }
.myfuture-page .myfuture-career-no { position:absolute; right:1.3rem; top:1rem; color:var(--mycareer-accent); opacity:.32; font:700 2.8rem/1 Georgia,serif; }
.myfuture-page .myfuture-career-card-body { padding:1.4rem 1.55rem 1.55rem; }
.myfuture-page .myfuture-career-card-body > div { padding:.9rem 0; border-bottom:1px solid #e7ecea; }
.myfuture-page .myfuture-career-card-body > div:first-child { padding-top:0; }
.myfuture-page .myfuture-career-card-body > div:last-child { padding-bottom:0; border-bottom:0; }
.myfuture-page .myfuture-career-card .mysemantic-h4 { margin:0 0 .35rem; color:var(--mycareer-accent); font-size:1.35rem; font-weight:800; }
.myfuture-page .myfuture-career-card p { margin:0; font-size:1.35rem; line-height:1.65; }
.myfuture-page .myfuture-career-card p + p { margin-top:.25rem; }
.myfuture-page .myfuture-career-ucan { background:linear-gradient(90deg,var(--mycareer-soft),rgba(255,255,255,0)); margin:.15rem -.55rem 0; padding:.9rem .55rem !important; }
.myfuture-page .myfuture-career-jobs p { color:var(--myfuture-dark); font-weight:700; }
.myfuture-page .myfuture-career-research { --mycareer-accent:#7768A6; --mycareer-soft:#F3F0F8; }
.myfuture-page .myfuture-career-finance { --mycareer-accent:#3F6FA6; --mycareer-soft:#EDF3F9; }
.myfuture-page .myfuture-career-data { --mycareer-accent:#5D87B4; --mycareer-soft:#EEF4F9; }
.myfuture-page .myfuture-career-industry { --mycareer-accent:#638C4B; --mycareer-soft:#F1F6EE; }
.myfuture-page .myfuture-career-market { --mycareer-accent:#C28E23; --mycareer-soft:#FFF8E8; }
.myfuture-page .myfuture-career-public { --mycareer-accent:#B96753; --mycareer-soft:#FBEFED; }
.myfuture-page .myfuture-career-health { --mycareer-accent:#9A5265; --mycareer-soft:#F7EDF0; }
.myfuture-page .myfuture-career-note { max-width:96rem; margin:2rem auto 0; color:var(--myfuture-muted); font-size:1.25rem; text-align:center; }
@media (max-width:800px) {
  .myfuture-page .myfuture-career-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .myfuture-page .myfuture-career-program { align-items:flex-start; padding:1.3rem; }
  .myfuture-page .myfuture-career-program-icon { flex-basis:4.4rem; width:4.4rem; height:4.4rem; font-size:2rem; }
  .myfuture-page .myfuture-career-program strong { font-size:1.9rem; }
  .myfuture-page .myfuture-career-card-head { min-height:7.4rem; padding:1.2rem 4.2rem 1.2rem 1.25rem; }
  .myfuture-page .myfuture-career-card-head .mysemantic-h3 { font-size:1.85rem; }
  .myfuture-page .myfuture-career-card-body { padding:1.2rem 1.3rem 1.35rem; }
  .myfuture-page .myfuture-career-note { text-align:left; }
}


/* =========================================================
   v3.4｜UCAN expandable mapping + Economics vertical gradient
   ========================================================= */
.myfuture-page .myfuture-career-jobs .mysemantic-h4 {
  margin-bottom: .45rem;
}

.myfuture-page .myfuture-ucan-detail {
  margin-top: .1rem;
  border: 1px solid color-mix(in srgb, var(--mycareer-accent) 24%, #dce4e2);
  border-radius: .85rem;
  background: #fff;
  overflow: hidden;
}

.myfuture-page .myfuture-ucan-detail summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1rem;
  color: var(--mycareer-accent);
  background: var(--mycareer-soft);
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.myfuture-page .myfuture-ucan-detail summary::-webkit-details-marker { display:none; }
.myfuture-page .myfuture-ucan-detail summary::after {
  content: "＋";
  margin-left: auto;
  font-size: 1.35rem;
  line-height: 1;
}
.myfuture-page .myfuture-ucan-detail[open] summary::after { content:"−"; }

.myfuture-page .myfuture-ucan-table-wrap {
  overflow-x: auto;
  padding: .8rem;
}

.myfuture-page .myfuture-ucan-table {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  background: #fff;
  font-size: 1.2rem;
  line-height: 1.5;
}

.myfuture-page .myfuture-ucan-table th,
.myfuture-page .myfuture-ucan-table td {
  padding: .65rem .75rem;
  border: 1px solid #dfe6e4;
  text-align: left;
  vertical-align: top;
}

.myfuture-page .myfuture-ucan-table th {
  color: var(--myfuture-dark);
  background: #f6f8f8;
  font-weight: 800;
}

.myfuture-page .myfuture-ucan-table td:last-child {
  color: var(--myfuture-dark);
  font-weight: 700;
}

@media (max-width:640px) {
  .myfuture-page .myfuture-ucan-detail summary { font-size: 1.2rem; }
  .myfuture-page .myfuture-ucan-table-wrap::after {
    content: "可左右滑動查看完整對照";
    display: block;
    margin-top: .45rem;
    color: var(--myfuture-muted);
    font-size: 1.05rem;
    text-align: right;
  }

  .myfuture-page-en .myfuture-ucan-table-wrap::after {
    content: "Swipe horizontally to view the full comparison.";
  }
}


/* =========================================================
   v3.5｜Section eyebrow enlarged + Next Step hover contrast
   ========================================================= */

/* =========================================================
   ADMISSION FAMILY｜Freshman / New Student
   Migrated from former page-freshman.css
   ========================================================= */
.myfreshman-page{
  --myfresh-blue:#2D8BCB;
  --myfresh-teal:#38AFA9;
  --myfresh-yellow:#D49A19;
  --myfresh-coral:#D9775B;
  --myfresh-purple:#7568B7;
  --myfresh-green:#4B9460;
  --myfresh-sky:#5E9FCB;
  --myfresh-ink:#243746;
  --myfresh-muted:#667783;
  --myfresh-paper:#FCFCF9;
  --myfresh-soft:#F5F7F6;
  --myfresh-line:#DDE4E5;
  --myfresh-white:#FFFFFF;
  --myfresh-shadow:0 10px 26px rgba(36,55,70,.08);
  color:var(--myfresh-ink);
}

.myfreshman-page *{ box-sizing:border-box; }
.myfreshman-page img{ max-width:100%; height:auto; }
.myfreshman-page a{ overflow-wrap:anywhere; }

.myfreshman-section{
  max-width:1180px;
  margin:0 auto;
  padding:4.3rem 2.2rem;
}
.myfreshman-section + .myfreshman-section{ padding-top:2.4rem; }
.myfreshman-section-head{
  max-width:820px;
  margin:0 auto 2.3rem;
  text-align:center;
}
.myfreshman-eyebrow{
  margin:0 0 .55rem;
  color:var(--myfresh-purple);
  font-family:"Noto Sans TC",sans-serif;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.12em;
}
.myfreshman-section-head .mysemantic-h2{
  margin:.15rem 0 .8rem;
  color:var(--myfresh-ink);
  font-size:2.55rem;
  line-height:1.25;
}
.myfreshman-section-head > p:last-child{
  margin:0;
  color:var(--myfresh-muted);
  font-size:1.58rem;
  line-height:1.75;
}

/* =========================================================
   01｜Page Header: Admission family
   - Classification header 仍依 Design Guide v2.8。
   - 正文視覺改用「未來學生」彩色語言。
   ========================================================= */
/* =========================================================
   02｜Welcome
   ========================================================= */
.myfreshman-welcome{
  padding-top:3.4rem;
  padding-bottom:2.4rem;
  text-align:center;
}
.myfreshman-welcome-inner{
  max-width:920px;
  margin:0 auto;
}
.myfreshman-welcome .mysemantic-h2{
  margin:0 0 1rem;
  color:var(--myfresh-ink);
  font-size:2.65rem;
  line-height:1.3;
}
.myfreshman-welcome p{
  margin:0 auto;
  max-width:820px;
  color:#556873;
  font-size:1.68rem;
  line-height:1.85;
}
.myfreshman-welcome-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.8rem 1rem;
  margin-top:1.55rem;
}
.myfreshman-welcome-links a{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.68rem 1rem;
  border:1px solid #DDE2E4;
  border-radius:999px;
  background:#fff;
  color:#4B6070;
  text-decoration:none;
  font-size:1.38rem;
  transition:.2s ease;
}
.myfreshman-welcome-links a:hover,
.myfreshman-welcome-links a:focus{
  transform:translateY(-1px);
  border-color:#AABAC4;
  background:#F7F9FA;
  color:#243746;
}

/* =========================================================
   03｜NOW: auto priority alert
   ========================================================= */
.myfreshman-now-wrap{
  padding:1.4rem 2.2rem 4.6rem;
}
.myfreshman-alert{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid #D5E2E9;
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 18%, rgba(56,175,169,.15) 0 9%, transparent 9.5%),
    radial-gradient(circle at 85% 75%, rgba(212,154,25,.12) 0 13%, transparent 13.5%),
    linear-gradient(135deg,#F3F8FC 0%,#FAFCF7 100%);
  box-shadow:var(--myfresh-shadow);
}
.myfreshman-alert::before{
  content:"";
  position:absolute;
  top:0;left:0;bottom:0;
  width:7px;
  background:linear-gradient(180deg,var(--myfresh-blue),var(--myfresh-teal));
}
.myfreshman-alert-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2rem;
  align-items:center;
  padding:2.5rem 3rem 2.5rem 3.3rem;
}
.myfreshman-alert-label{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 .7rem;
  color:var(--myfresh-blue);
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:.05em;
}
.myfreshman-alert-date{
  margin:0 0 .25rem;
  color:var(--myfresh-coral);
  font-size:2.2rem;
  font-weight:900;
  line-height:1.2;
}
.myfreshman-alert .mysemantic-h2{
  margin:.2rem 0 .75rem;
  color:var(--myfresh-ink);
  font-size:2.65rem;
  line-height:1.25;
}
.myfreshman-alert-text{
  margin:0;
  max-width:730px;
  color:#526875;
  font-size:1.55rem;
  line-height:1.7;
}
.myfreshman-alert-status{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:1rem;
  padding:.42rem .78rem;
  border-radius:999px;
  background:#FFF3E4;
  color:#9B5B14;
  font-size:1.3rem;
  font-weight:800;
}
.myfreshman-alert-actions{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  min-width:220px;
}
.myfreshman-alert-actions .mybtn{
  width:100%;
  text-align:center;
  justify-content:center;
}
.myfreshman-alert-complete{
  padding:2.8rem 3rem;
  text-align:center;
}
.myfreshman-alert-complete i{
  color:var(--myfresh-green);
  font-size:3.3rem;
}
.myfreshman-alert-complete .mysemantic-h2{
  margin:.8rem 0 .5rem;
}

/* =========================================================
   04｜Timeline
   ========================================================= */
.myfreshman-timeline-box{
  max-width:1120px;
  margin:2.1rem auto 0;
  padding:2rem 2rem 1.7rem;
  border:1px solid var(--myfresh-line);
  border-radius:18px;
  background:#fff;
}
.myfreshman-timeline-heading{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:end;
  margin-bottom:1.4rem;
}
.myfreshman-timeline-heading .mysemantic-h3{
  margin:0;
  color:var(--myfresh-ink);
  font-size:2rem;
}
.myfreshman-timeline-heading p{
  margin:0;
  color:var(--myfresh-muted);
  font-size:1.25rem;
}
.myfreshman-timeline{
  display:flex;
  gap:0;
  overflow-x:auto;
  padding:.5rem .25rem .8rem;
  scrollbar-width:thin;
}
.myfreshman-timeline-item{
  position:relative;
  flex:1 0 170px;
  min-width:170px;
  padding:0 .7rem;
  text-align:center;
}
.myfreshman-timeline-item::before{
  content:"";
  position:absolute;
  z-index:0;
  top:21px;
  left:0;
  right:0;
  height:3px;
  background:#D9E1E5;
}
.myfreshman-timeline-item:first-child::before{ left:50%; }
.myfreshman-timeline-item:last-child::before{ right:50%; }
.myfreshman-timeline-dot{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  margin:0 auto .8rem;
  border:5px solid #fff;
  border-radius:50%;
  background:var(--myfresh-blue);
  box-shadow:0 0 0 2px #B9CBD8;
  color:#fff;
}
.myfreshman-timeline-item:nth-child(2n) .myfreshman-timeline-dot{ background:var(--myfresh-teal); }
.myfreshman-timeline-item:nth-child(3n) .myfreshman-timeline-dot{ background:var(--myfresh-yellow); }
.myfreshman-timeline-date{
  display:block;
  color:#4C6170;
  font-size:1.28rem;
  font-weight:800;
}
.myfreshman-timeline-title{
  display:block;
  margin:.25rem auto 0;
  max-width:150px;
  color:var(--myfresh-ink);
  font-size:1.38rem;
  line-height:1.4;
}
.myfreshman-timeline-item.is-next .myfreshman-timeline-dot{
  box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(217,119,91,.55);
  background:var(--myfresh-coral);
}
.myfreshman-timeline-item.is-next .myfreshman-timeline-title{ font-weight:900; }

/* =========================================================
   05｜Checklist cards
   ========================================================= */
.myfreshman-checklist-section{
  background:linear-gradient(180deg,#FBFCFA,#F3F7F5);
}
.myfreshman-task-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.35rem;
}
.myfreshman-task{
  position:relative;
  overflow:hidden;
  min-height:250px;
  padding:1.65rem 1.55rem 1.5rem;
  border:1px solid var(--myfresh-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 7px 20px rgba(36,55,70,.055);
}
.myfreshman-task::after{
  content:"";
  position:absolute;
  right:-2rem;
  bottom:-2.3rem;
  width:8rem;
  height:8rem;
  border:1.4rem solid rgba(45,139,203,.06);
  border-radius:50%;
  pointer-events:none;
}
.myfreshman-task:nth-child(2)::after{ border-color:rgba(56,175,169,.07); }
.myfreshman-task:nth-child(3)::after{ border-color:rgba(212,154,25,.08); }
.myfreshman-task:nth-child(4)::after{ border-color:rgba(217,119,91,.07); }
.myfreshman-task:nth-child(5)::after{ border-color:rgba(117,104,183,.07); }
.myfreshman-task:nth-child(6)::after{ border-color:rgba(75,148,96,.07); }
.myfreshman-task-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}
.myfreshman-task-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:16px;
  color:#fff;
  background:var(--myfresh-blue);
  font-size:2rem;
}
.myfreshman-task:nth-child(2) .myfreshman-task-icon{ background:var(--myfresh-teal); }
.myfreshman-task:nth-child(3) .myfreshman-task-icon{ background:var(--myfresh-yellow); }
.myfreshman-task:nth-child(4) .myfreshman-task-icon{ background:var(--myfresh-coral); }
.myfreshman-task:nth-child(5) .myfreshman-task-icon{ background:var(--myfresh-purple); }
.myfreshman-task:nth-child(6) .myfreshman-task-icon{ background:var(--myfresh-green); }
.myfreshman-task-no{
  color:#B8C3C8;
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:.08em;
}
.myfreshman-task .mysemantic-h3{
  margin:1.15rem 0 .55rem;
  color:var(--myfresh-ink);
  font-size:1.85rem;
  line-height:1.3;
}
.myfreshman-task p{
  margin:0 0 .85rem;
  color:#5C707B;
  font-size:1.4rem;
  line-height:1.65;
}
.myfreshman-task-date{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  margin:.15rem 0 .9rem;
  padding:.3rem .68rem;
  border-radius:999px;
  background:#F0F4F6;
  color:#526773;
  font-size:1.18rem;
  font-weight:800;
}
.myfreshman-task-link{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:#315F7F;
  font-size:1.35rem;
  font-weight:800;
  text-decoration:none;
}
.myfreshman-task-link:hover,
.myfreshman-task-link:focus{ text-decoration:underline; }

/* =========================================================
   06｜Transition
   ========================================================= */
.myfreshman-transition{
  max-width:960px;
  margin:3.7rem auto 1rem;
  padding:2rem 2rem;
  text-align:center;
  border-top:1px solid #DCE3E6;
  border-bottom:1px solid #DCE3E6;
}
.myfreshman-transition strong{
  display:block;
  margin-bottom:.4rem;
  color:var(--myfresh-ink);
  font-size:2.15rem;
}
.myfreshman-transition span{
  color:var(--myfresh-muted);
  font-size:1.5rem;
  line-height:1.6;
}

/* =========================================================
   07｜Learning feature
   ========================================================= */
.myfreshman-learning-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(270px,.7fr);
  gap:1.4rem;
}
.myfreshman-learning-feature{
  padding:2rem;
  border:1px solid #CEDDE7;
  border-radius:20px;
  background:linear-gradient(140deg,#F1F7FB,#FFFFFF 58%);
}
.myfreshman-feature-label{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  color:var(--myfresh-blue);
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:.06em;
}
.myfreshman-learning-feature .mysemantic-h3{
  margin:.65rem 0 .7rem;
  font-size:2.2rem;
}
.myfreshman-learning-feature > p{
  margin:0 0 1.4rem;
  color:#5A6F7A;
  font-size:1.48rem;
  line-height:1.75;
}
.myfreshman-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem;
  margin:1.35rem 0 1.55rem;
  counter-reset:myfreshstep;
}
.myfreshman-step{
  position:relative;
  min-height:115px;
  padding:1.25rem 1rem 1rem 3.25rem;
  border:1px solid #D8E3E9;
  border-radius:14px;
  background:#fff;
}
.myfreshman-step::before{
  counter-increment:myfreshstep;
  content:counter(myfreshstep);
  position:absolute;
  top:1rem;left:1rem;
  display:grid;
  place-items:center;
  width:1.65rem;height:1.65rem;
  border-radius:50%;
  background:var(--myfresh-blue);
  color:#fff;
  font-weight:900;
  font-size:1.05rem;
}
.myfreshman-step strong{
  display:block;
  margin-bottom:.25rem;
  color:var(--myfresh-ink);
  font-size:1.35rem;
}
.myfreshman-step span{
  color:#657883;
  font-size:1.2rem;
  line-height:1.45;
}
.myfreshman-action-row{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}
.myfreshman-action-row .mybtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.myfreshman-support-stack{
  display:grid;
  gap:1rem;
}
.myfreshman-support-card{
  display:block;
  padding:1.45rem 1.4rem;
  border:1px solid var(--myfresh-line);
  border-radius:16px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:.2s ease;
}
.myfreshman-support-card:hover,
.myfreshman-support-card:focus{
  transform:translateY(-2px);
  box-shadow:var(--myfresh-shadow);
}
.myfreshman-support-card i{
  margin-right:.5rem;
  color:var(--myfresh-purple);
}
.myfreshman-support-card strong{
  display:block;
  margin-bottom:.3rem;
  font-size:1.5rem;
}
.myfreshman-support-card span{
  color:var(--myfresh-muted);
  font-size:1.25rem;
  line-height:1.5;
}

/* =========================================================
   08｜Department / Life / Explore cards
   ========================================================= */
.myfreshman-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.1rem;
}
.myfreshman-info-card{
  display:flex;
  flex-direction:column;
  min-height:220px;
  padding:1.5rem;
  border:1px solid var(--myfresh-line);
  border-radius:18px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:.2s ease;
}
.myfreshman-info-card:hover,
.myfreshman-info-card:focus{
  transform:translateY(-2px);
  box-shadow:var(--myfresh-shadow);
}
.myfreshman-info-icon{
  display:grid;
  place-items:center;
  width:50px;height:50px;
  margin-bottom:1rem;
  border-radius:16px;
  background:#EEF5FB;
  color:var(--myfresh-blue);
  font-size:2rem;
}
.myfreshman-info-card:nth-child(2) .myfreshman-info-icon{ background:#EAF7F5;color:var(--myfresh-teal); }
.myfreshman-info-card:nth-child(3) .myfreshman-info-icon{ background:#FFF6DF;color:var(--myfresh-yellow); }
.myfreshman-info-card:nth-child(4) .myfreshman-info-icon{ background:#FCEDE8;color:var(--myfresh-coral); }
.myfreshman-info-card .mysemantic-h3{
  margin:0 0 .55rem;
  font-size:1.62rem;
  line-height:1.35;
}
.myfreshman-info-card p{
  margin:0;
  color:#61747E;
  font-size:1.28rem;
  line-height:1.6;
}
.myfreshman-info-card .myfreshman-card-more{
  margin-top:auto;
  padding-top:1rem;
  color:#436A83;
  font-size:1.2rem;
  font-weight:800;
}

.myfreshman-dept-contact{
  margin-top:1.4rem;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.8rem;
  padding:1.2rem 1.35rem;
  border-radius:16px;
  background:#F6F8F8;
}
.myfreshman-dept-contact div{
  min-width:0;
}
.myfreshman-dept-contact b{
  display:block;
  margin-bottom:.2rem;
  color:#435A67;
  font-size:1.15rem;
}
.myfreshman-dept-contact span,
.myfreshman-dept-contact a{
  color:#273F4B;
  font-size:1.25rem;
  line-height:1.45;
}

/* =========================================================
   09｜Student survival helpers
   ========================================================= */
.myfreshman-helper-section{
  background:linear-gradient(180deg,#FBFBF7,#F6F5EF);
}
.myfreshman-helper-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.myfreshman-helper{
  position:relative;
  padding:1.55rem 1.55rem 1.45rem 5.3rem;
  border:1px solid #E3E2D9;
  border-radius:16px;
  background:#fff;
}
.myfreshman-helper > i{
  position:absolute;
  top:1.45rem;left:1.45rem;
  display:grid;
  place-items:center;
  width:2.9rem;height:2.9rem;
  border-radius:14px;
  background:#EDF5FB;
  color:var(--myfresh-blue);
  font-size:1.55rem;
}
.myfreshman-helper:nth-child(2) > i{ background:#FFF5DA;color:var(--myfresh-yellow); }
.myfreshman-helper:nth-child(3) > i{ background:#EEF7EC;color:var(--myfresh-green); }
.myfreshman-helper:nth-child(4) > i{ background:#F4EEFB;color:var(--myfresh-purple); }
.myfreshman-helper .mysemantic-h3{
  margin:0 0 .45rem;
  font-size:1.55rem;
}
.myfreshman-helper p{
  margin:0 0 .65rem;
  color:#5F727C;
  font-size:1.25rem;
  line-height:1.62;
}
.myfreshman-helper-links{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .8rem;
}
.myfreshman-helper-links a{
  color:#356984;
  font-size:1.2rem;
  font-weight:700;
}

/* =========================================================
   10｜Digital campus
   ========================================================= */
.myfreshman-digital-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.myfreshman-digital-card{
  display:block;
  min-height:175px;
  padding:1.35rem;
  border:1px solid var(--myfresh-line);
  border-radius:16px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:.2s ease;
}
.myfreshman-digital-card:hover,
.myfreshman-digital-card:focus{
  transform:translateY(-2px);
  box-shadow:var(--myfresh-shadow);
}
.myfreshman-digital-card i{
  margin-bottom:.8rem;
  color:var(--myfresh-blue);
  font-size:2.1rem;
}
.myfreshman-digital-card:nth-child(2) i{ color:var(--myfresh-teal); }
.myfreshman-digital-card:nth-child(3) i{ color:var(--myfresh-green); }
.myfreshman-digital-card:nth-child(4) i{ color:var(--myfresh-purple); }
.myfreshman-digital-card:nth-child(5) i{ color:var(--myfresh-coral); }
.myfreshman-digital-card:nth-child(6) i{ color:var(--myfresh-yellow); }
.myfreshman-digital-card .mysemantic-h3{
  margin:0 0 .4rem;
  font-size:1.45rem;
}
.myfreshman-digital-card p{
  margin:0;
  color:#60737E;
  font-size:1.22rem;
  line-height:1.55;
}

/* =========================================================
   11｜Four-year explore links
   ========================================================= */
.myfreshman-explore-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.75rem;
}
.myfreshman-explore{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:135px;
  padding:1rem .65rem;
  border:1px solid var(--myfresh-line);
  border-radius:16px;
  background:#fff;
  color:var(--myfresh-ink);
  text-align:center;
  text-decoration:none;
  transition:.2s ease;
}
.myfreshman-explore:hover,
.myfreshman-explore:focus{ transform:translateY(-2px);box-shadow:var(--myfresh-shadow); }
.myfreshman-explore i{ margin-bottom:.65rem;font-size:2rem; }
.myfreshman-explore:nth-child(1) i{ color:var(--myfresh-yellow); }
.myfreshman-explore:nth-child(2) i{ color:var(--myfresh-blue); }
.myfreshman-explore:nth-child(3) i{ color:var(--myfresh-green); }
.myfreshman-explore:nth-child(4) i{ color:var(--myfresh-purple); }
.myfreshman-explore:nth-child(5) i{ color:var(--myfresh-coral); }
.myfreshman-explore:nth-child(6) i{ color:var(--myfresh-teal); }
.myfreshman-explore strong{ font-size:1.28rem; }

/* =========================================================
   12｜Need help
   ========================================================= */
.myfreshman-help-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.38fr);
  gap:1.2rem;
  padding:1.8rem;
  border:1px solid #D6E1E7;
  border-radius:18px;
  background:linear-gradient(135deg,#F5F9FB,#FAFAF7);
}
.myfreshman-help-list{
  display:grid;
  gap:.65rem;
}
.myfreshman-help-row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:1rem;
  align-items:start;
  padding:.65rem 0;
  border-bottom:1px solid #E2E7E9;
}
.myfreshman-help-row:last-child{ border-bottom:0; }
.myfreshman-help-row strong{ color:#405967; }
.myfreshman-help-row span{ color:#5F737E; }
.myfreshman-help-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:1.4rem;
  border-radius:15px;
  background:#fff;
}
.myfreshman-help-cta i{ color:var(--myfresh-teal);font-size:2rem; }
.myfreshman-help-cta strong{ margin:.6rem 0 .35rem;font-size:1.5rem; }
.myfreshman-help-cta p{ margin:0 0 1rem;color:#657883;line-height:1.55; }

/* =========================================================
   13｜GO Toolbox
   ========================================================= */
.myfreshman-toolbox-section{ padding-bottom:5.5rem; }
.myfreshman-toolbox{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.myfreshman-tool-group{
  padding:1.3rem;
  border:1px solid var(--myfresh-line);
  border-radius:17px;
  background:#fff;
}
.myfreshman-tool-group .mysemantic-h3{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0 0 .8rem;
  padding-bottom:.7rem;
  border-bottom:2px solid #E8EEF0;
  font-size:1.5rem;
}
.myfreshman-tool-group:nth-child(1) .mysemantic-h3 i{ color:var(--myfresh-blue); }
.myfreshman-tool-group:nth-child(2) .mysemantic-h3 i{ color:var(--myfresh-teal); }
.myfreshman-tool-group:nth-child(3) .mysemantic-h3 i{ color:var(--myfresh-coral); }
.myfreshman-tool-group:nth-child(4) .mysemantic-h3 i{ color:var(--myfresh-purple); }
.myfreshman-tool-list{ display:grid;gap:.35rem; }
.myfreshman-tool{
  display:block;
  padding:.62rem .55rem;
  border-radius:10px;
  color:#294B60;
  text-decoration:none;
}
.myfreshman-tool:hover,
.myfreshman-tool:focus{ background:#F4F7F8;color:#163D55; }
.myfreshman-tool b{ display:block;font-size:1.27rem; }
.myfreshman-tool span{ display:block;margin-top:.12rem;color:#74838B;font-size:1.05rem;line-height:1.4; }

.myfreshman-end-cta{
  max-width:760px;
  margin:2.3rem auto 0;
  text-align:center;
}
.myfreshman-end-cta .mysemantic-h3{ margin:0 0 .45rem;font-size:1.8rem; }
.myfreshman-end-cta p{ margin:0 0 1rem;color:#677983; }

/* =========================================================
   14｜Utility states populated by JS
   ========================================================= */
.myfreshman-js-hidden{ display:none!important; }
.myfreshman-date-today{ background:#FDE9E3!important;color:#A94E38!important; }
.myfreshman-date-soon{ background:#FFF1D8!important;color:#9A6814!important; }

/* =========================================================
   15｜Responsive
   ========================================================= */
@media(max-width:980px){
  .myfreshman-task-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .myfreshman-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .myfreshman-digital-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .myfreshman-explore-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .myfreshman-toolbox{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .myfreshman-learning-layout{ grid-template-columns:1fr; }
  .myfreshman-dept-contact{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:720px){
  .myfreshman-section{ padding:3.2rem 1.35rem; }
  .myfreshman-section + .myfreshman-section{ padding-top:1.7rem; }
  .myfreshman-section-head .mysemantic-h2{ font-size:2.1rem; }
  .myfreshman-section-head > p:last-child{ font-size:1.4rem; }
  .myfreshman-welcome{ padding-top:2.7rem; }
  .myfreshman-welcome .mysemantic-h2{ font-size:2.15rem; }
  .myfreshman-welcome p{ font-size:1.45rem; }
  .myfreshman-now-wrap{ padding:1rem 1.15rem 3.3rem; }
  .myfreshman-alert-inner{ grid-template-columns:1fr;padding:2rem 1.6rem 1.7rem 1.9rem; }
  .myfreshman-alert .mysemantic-h2{ font-size:2.15rem; }
  .myfreshman-alert-date{ font-size:1.8rem; }
  .myfreshman-alert-actions{ min-width:0;width:100%; }
  .myfreshman-timeline-heading{ align-items:start;flex-direction:column; }

  /* 手機版時間軸改為垂直，不做橫向硬塞 */
  .myfreshman-timeline{
    display:block;
    overflow:visible;
    padding:.2rem 0 0;
  }
  .myfreshman-timeline-item{
    display:grid;
    grid-template-columns:48px 90px 1fr;
    align-items:center;
    min-width:0;
    padding:.65rem 0;
    text-align:left;
  }
  .myfreshman-timeline-item::before{
    top:-50%;bottom:-50%;left:22px;right:auto;
    width:3px;height:auto;
  }
  .myfreshman-timeline-item:first-child::before{ top:50%;left:22px; }
  .myfreshman-timeline-item:last-child::before{ bottom:50%;right:auto; }
  .myfreshman-timeline-dot{ width:38px;height:38px;margin:0; }
  .myfreshman-timeline-date{ font-size:1.2rem; }
  .myfreshman-timeline-title{ margin:0;max-width:none;font-size:1.3rem; }

  .myfreshman-steps{ grid-template-columns:1fr; }
  .myfreshman-helper-grid{ grid-template-columns:1fr; }
  .myfreshman-help-panel{ grid-template-columns:1fr; }
  .myfreshman-help-row{ grid-template-columns:1fr;gap:.25rem; }
}

@media(max-width:560px){
  .myfreshman-task-grid,
  .myfreshman-card-grid,
  .myfreshman-digital-grid,
  .myfreshman-explore-grid,
  .myfreshman-toolbox,
  .myfreshman-dept-contact{ grid-template-columns:1fr; }
  .myfreshman-task{ min-height:0; }
  .myfreshman-info-card{ min-height:0; }
  .myfreshman-helper{ padding-left:1.4rem;padding-top:4.8rem; }
  .myfreshman-helper > i{ top:1.2rem;left:1.35rem; }
  .myfreshman-welcome-links{ align-items:stretch;flex-direction:column; }
  .myfreshman-welcome-links a{ justify-content:center; }
}

@media(prefers-reduced-motion:reduce){
  .myfreshman-page *,
  .myfreshman-page *::before,
  .myfreshman-page *::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}


/* =========================================================
   v1.1｜2026-08-10｜新生入學指引修正
   ---------------------------------------------------------
   1. 新增重要提醒／待辦事項頁內快速導覽。
   2. 給新鮮人的話改為可捲動小視窗（modal）。
   3. Timeline 長標題不換行，必要時水平捲動。
   4. 選課系統連結置入 1/2/3/5/6 步驟方塊。
   5. 新增 115 學年度導師資訊與系辦提示。
   ========================================================= */

html:has(.myfreshman-page) {
  scroll-behavior: smooth;
}
.myfreshman-jump-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 .2rem;}
.myfreshman-jump-links a{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.1rem;border:1px solid #C9DDE8;border-radius:999px;background:#F2F8FC;color:#315F7F;font-size:1.35rem;font-weight:800;text-decoration:none;box-shadow:0 .25rem .7rem rgba(36,55,70,.05);}
.myfreshman-jump-links a:nth-child(2){border-color:#D9D2EB;background:#F7F4FC;color:#64578F;}
.myfreshman-jump-links a:hover,.myfreshman-jump-links a:focus{transform:translateY(-1px);box-shadow:var(--myfresh-shadow);}

.myfreshman-welcome-links button{display:inline-flex;align-items:center;gap:.55rem;padding:.68rem 1rem;border:1px solid #DDE2E4;border-radius:999px;background:#fff;color:#4B6070;text-decoration:none;font:inherit;font-size:1.38rem;cursor:pointer;transition:.2s ease;}
.myfreshman-welcome-links button:hover,.myfreshman-welcome-links button:focus{transform:translateY(-1px);border-color:#AABAC4;background:#F7F9FA;color:#243746;}

.myfreshman-timeline-item{flex-basis:200px;min-width:200px;}
.myfreshman-timeline-title{max-width:none;white-space:nowrap;}

.myfreshman-step{display:flex;flex-direction:column;}
.myfreshman-step-link{display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;margin-top:auto;padding-top:.7rem;color:#315F7F;font-size:1.16rem;font-weight:800;text-decoration:none;}
.myfreshman-step-link:hover,.myfreshman-step-link:focus{text-decoration:underline;}

.myfreshman-dept-note{max-width:880px;margin:1.45rem auto 1rem;padding:.85rem 1.1rem;border-left:4px solid var(--myfresh-teal);border-radius:0 10px 10px 0;background:#F0F8F6;color:#435D68;font-size:1.36rem;line-height:1.6;}
.myfreshman-dept-note i{margin-right:.4rem;color:var(--myfresh-teal);}
.myfreshman-advisors{margin:1.1rem auto 1.3rem;padding:1.35rem;border:1px solid var(--myfresh-line);border-radius:16px;background:#fff;}
.myfreshman-advisors .mysemantic-h3{margin:0 0 1rem;color:var(--myfresh-ink);font-size:1.55rem;}
.myfreshman-advisors .mysemantic-h3 i{color:var(--myfresh-purple);}
.myfreshman-advisor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;}
.myfreshman-advisor-grid div{padding:.85rem 1rem;border-radius:12px;background:#F7F8F8;}
.myfreshman-advisor-grid div:nth-child(2),.myfreshman-advisor-grid div:nth-child(5){background:#F1F7FB;}
.myfreshman-advisor-grid div:nth-child(3),.myfreshman-advisor-grid div:nth-child(6){background:#F7F3FB;}
.myfreshman-advisor-grid b{display:block;margin-bottom:.15rem;color:#455E6B;font-size:1.12rem;}
.myfreshman-advisor-grid span{color:#273F4B;font-size:1.25rem;line-height:1.5;}

/* 給新鮮人的話：長文適合 modal，不用小型 speech bubble，避免超長文字溢出。 */
.myfreshman-modal[hidden]{display:none!important;}
.myfreshman-modal{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:1.5rem;}
.myfreshman-modal-backdrop{position:absolute;inset:0;background:rgba(17,35,49,.58);backdrop-filter:blur(2px);}
.myfreshman-modal-dialog{position:relative;z-index:1;width:min(760px,calc(100vw - 2rem));max-height:min(78vh,760px);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.7);border-radius:20px;background:#fff;box-shadow:0 1.5rem 4rem rgba(0,0,0,.28);}
.myfreshman-modal-head{padding:1.8rem 4rem 1.15rem 2rem;border-bottom:1px solid #E3E8EA;background:linear-gradient(135deg,#F3F8FC,#FAF8F2);}
.myfreshman-modal-kicker{display:block;margin-bottom:.35rem;color:var(--myfresh-purple);font-size:1.05rem;font-weight:900;letter-spacing:.1em;}
.myfreshman-modal-head .mysemantic-h2{margin:0;color:var(--myfresh-ink);font-family:"Noto Serif TC",serif;font-size:2rem;line-height:1.3;}
.myfreshman-modal-head p{margin:.35rem 0 0;color:#657783;font-size:1.2rem;}
.myfreshman-modal-body{overflow-y:auto;padding:1.5rem 2rem 2rem;overscroll-behavior:contain;}
.myfreshman-modal-body p{margin:0 0 1rem;color:#3F505A;font-size:1.35rem;line-height:1.9;text-align:left;}
.myfreshman-modal-body p:last-child{margin-bottom:0;}
.myfreshman-modal-close{position:absolute;z-index:2;top:.9rem;right:.9rem;display:grid;place-items:center;width:2.6rem;height:2.6rem;border:0;border-radius:50%;background:#EEF2F4;color:#405563;font-size:1.4rem;cursor:pointer;}
.myfreshman-modal-close:hover,.myfreshman-modal-close:focus{background:#DFE7EB;color:#1F3542;}
body.myfreshman-modal-open{overflow:hidden;}

@media(max-width:720px){
  .myfreshman-timeline-title{white-space:normal;}
  .myfreshman-advisor-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .myfreshman-modal{padding:.7rem;align-items:end;}
  .myfreshman-modal-dialog{width:100%;max-height:88vh;border-radius:18px 18px 0 0;}
  .myfreshman-modal-head{padding:1.45rem 3.5rem 1rem 1.3rem;}
  .myfreshman-modal-body{padding:1.2rem 1.3rem 1.6rem;}
}
@media(max-width:560px){
  .myfreshman-jump-links{flex-direction:column;align-items:stretch;}
  .myfreshman-jump-links a{justify-content:center;}
  .myfreshman-welcome-links button{justify-content:center;}
  .myfreshman-advisor-grid{grid-template-columns:1fr;}
}

/* =========================================================
   v1.3｜2026-08-10｜Department note width
   ---------------------------------------------------------
   「有系上相關問題，不確定該找誰時，可以先問系辦。」
   與下方四欄系辦資訊使用相同全寬，視覺對齊。
   ========================================================= */
.myfreshman-page .myfreshman-dept-note{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}



/* =========================================================
   v1.4｜2026-08-10｜Department office assistants
   ---------------------------------------------------------
   中文註解：
   - 中英文共用。
   - 補充兩位系辦助理分工、電話與 Email。
   - 桌機雙欄，手機單欄。
   ========================================================= */
.myfreshman-assistant-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin:1rem 0 0;
}
.myfreshman-assistant-card{
  display:grid;
  gap:.3rem;
  padding:1.15rem 1.25rem;
  border:1px solid var(--myfresh-line);
  border-radius:.9rem;
  background:#fff;
}
.myfreshman-assistant-card b{
  color:var(--myfresh-ink);
  font-size:1.55rem;
}
.myfreshman-assistant-role{
  color:var(--myfresh-purple);
  font-weight:700;
}
.myfreshman-assistant-card a{
  color:var(--myfresh-blue);
  text-decoration:none;
}
.myfreshman-assistant-card a:hover,
.myfreshman-assistant-card a:focus{
  text-decoration:underline;
}
@media(max-width:640px){
  .myfreshman-assistant-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   v1.5｜2026-08-10｜English timeline text wrapping
   ---------------------------------------------------------
   中文註解：
   - 英文時程標題較長，桌機版不再強制單行。
   - 限制文字寬度並允許自然換行，避免相鄰項目文字重疊。
   - 中文版維持原有單行時間軸呈現。
   ========================================================= */
.myfreshman-page-en .myfreshman-timeline-title{
  max-width:17rem;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  margin-left:auto;
  margin-right:auto;
}

.myfreshman-page-en .myfreshman-timeline-item{
  flex-basis:20rem;
  min-width:20rem;
}



/* =========================================================
   v2.0｜2026-08-11｜學士班／研究所整合分流
   ---------------------------------------------------------
   - 初次進入不預設身分；先顯示兩張大型身分卡。
   - 選擇後才展開專屬內容與共通內容。
   - 支援學士班／研究所切換與 #undergraduate / #graduate。
   - 中英文仍共用同一份 CSS。
   ========================================================= */

/* hidden attribute must win over section / grid display rules */
.myfreshman-page [hidden]{
  display:none !important;
}

/* Role selector */
.myfreshman-role-selector{
  margin:2.4rem auto .4rem;
  max-width:900px;
}
.myfreshman-role-prompt{
  margin:0 0 1rem !important;
  color:var(--myfresh-ink) !important;
  font-size:1.48rem !important;
  font-weight:800;
}
.myfreshman-role-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem;
}
.myfreshman-role-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:220px;
  padding:1.65rem 1.7rem;
  border:1px solid var(--myfresh-line);
  border-radius:20px;
  background:#fff;
  color:var(--myfresh-ink);
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(36,55,70,.07);
  transition:.2s ease;
}
.myfreshman-role-card:hover,
.myfreshman-role-card:focus{
  transform:translateY(-3px);
  box-shadow:var(--myfresh-shadow);
  outline:none;
}
.myfreshman-role-card-undergrad{
  background:linear-gradient(145deg,#F2F8FC,#FFFFFF 65%);
  border-color:#C9DDE8;
}
.myfreshman-role-card-graduate{
  background:linear-gradient(145deg,#F7F3FB,#FFFFFF 65%);
  border-color:#D9D2EB;
}
.myfreshman-role-card[aria-pressed="true"]{
  box-shadow:0 0 0 3px rgba(45,139,203,.18),var(--myfresh-shadow);
}
.myfreshman-role-card-graduate[aria-pressed="true"]{
  box-shadow:0 0 0 3px rgba(117,104,183,.18),var(--myfresh-shadow);
}
.myfreshman-role-icon{
  display:grid;
  place-items:center;
  width:58px;height:58px;
  margin-bottom:1rem;
  border-radius:18px;
  background:var(--myfresh-blue);
  color:#fff;
  font-size:2.15rem;
}
.myfreshman-role-card-graduate .myfreshman-role-icon{
  background:var(--myfresh-purple);
}
.myfreshman-role-card strong{
  display:block;
  margin-bottom:.45rem;
  font-size:2rem;
  line-height:1.3;
}
.myfreshman-role-card > span:not(.myfreshman-role-icon){
  color:#5D707C;
  font-size:1.42rem;
  line-height:1.65;
}
.myfreshman-role-card em{
  margin-top:auto;
  padding-top:1rem;
  color:#315F7F;
  font-size:1.32rem;
  font-style:normal;
  font-weight:800;
}
.myfreshman-role-card-graduate em{ color:#665A91; }

/* Compact switch after selection */
.myfreshman-role-switch{
  max-width:760px;
  margin:.2rem auto 1.6rem;
  padding:.85rem 1rem;
  border:1px solid var(--myfresh-line);
  border-radius:14px;
  background:#F7F9F9;
  text-align:center;
}
.myfreshman-role-switch > span{
  display:block;
  margin-bottom:.55rem;
  color:#667783;
  font-size:1.22rem;
  font-weight:700;
}
.myfreshman-role-switch-buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.6rem;
}
.myfreshman-role-switch button{
  padding:.58rem .9rem;
  border:1px solid #D8E0E4;
  border-radius:999px;
  background:#fff;
  color:#455E6B;
  font-size:1.28rem;
  font-weight:800;
  cursor:pointer;
}
.myfreshman-role-switch button[aria-pressed="true"]{
  border-color:#AFC8D8;
  background:#EEF6FB;
  color:#245B7E;
}
.myfreshman-role-switch button[data-freshman-select="graduate"][aria-pressed="true"]{
  border-color:#CEC6E4;
  background:#F5F1FB;
  color:#63578C;
}

/* Message cards */
.myfreshman-messages-section{
  padding-top:1.6rem;
  padding-bottom:2.3rem;
}
.myfreshman-message-buttons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  max-width:960px;
  margin:0 auto;
}
.myfreshman-message-buttons[data-freshman-mode="graduate"]{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:700px;
}
.myfreshman-message-buttons button{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.25rem;
  min-height:135px;
  padding:1.25rem 1rem;
  border:1px solid var(--myfresh-line);
  border-radius:17px;
  background:#fff;
  color:var(--myfresh-ink);
  cursor:pointer;
  transition:.2s ease;
}
.myfreshman-message-buttons button:hover,
.myfreshman-message-buttons button:focus{
  transform:translateY(-2px);
  box-shadow:var(--myfresh-shadow);
}
.myfreshman-message-buttons button i{
  margin-bottom:.45rem;
  color:var(--myfresh-purple);
  font-size:2rem;
}
.myfreshman-message-buttons button strong{
  font-size:1.5rem;
}
.myfreshman-message-buttons button span{
  color:var(--myfresh-muted);
  font-size:1.22rem;
}

/* Graduate conditional items */
.myfreshman-conditional-box{
  margin:1.4rem 0 0;
  padding:1.3rem;
  border:1px dashed #CBD7DD;
  border-radius:16px;
  background:#FBFCFC;
}
.myfreshman-conditional-box .mysemantic-h3{
  margin:0 0 .9rem;
  color:var(--myfresh-ink);
  font-size:1.55rem;
}
.myfreshman-conditional-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.75rem;
}
.myfreshman-conditional-grid a{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:110px;
  padding:.85rem .6rem;
  border:1px solid #E2E7E9;
  border-radius:13px;
  background:#fff;
  color:var(--myfresh-ink);
  text-align:center;
  text-decoration:none;
}
.myfreshman-conditional-grid i{
  margin-bottom:.45rem;
  color:var(--myfresh-teal);
  font-size:1.6rem;
}
.myfreshman-conditional-grid strong{ font-size:1.3rem; }
.myfreshman-conditional-grid span{
  margin-top:.25rem;
  color:var(--myfresh-muted);
  font-size:1.12rem;
}

/* Graduate course shortcuts */
.myfreshman-grad-course-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;
  margin:1rem 0 1.25rem;
}
.myfreshman-grad-course-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.65rem .8rem;
  border:1px solid #D8D3E8;
  border-radius:12px;
  background:#F8F5FC;
  color:#62578B;
  font-size:1.28rem;
  font-weight:800;
  text-decoration:none;
}
.myfreshman-grad-course-links a:hover,
.myfreshman-grad-course-links a:focus{
  background:#F0EAF8;
}
.myfreshman-grad-fee-note{
  margin-top:1rem;
  padding:.85rem 1rem;
  border-left:4px solid var(--myfresh-yellow);
  border-radius:0 10px 10px 0;
  background:#FFF8E8;
  color:#5D573F;
  font-size:1.3rem;
  line-height:1.6;
}
.myfreshman-support-card-static{
  cursor:default;
}
.myfreshman-support-card-static:hover{
  transform:none;
  box-shadow:none;
}

/* Graduate advisor panel */
.myfreshman-advisor-grid-graduate{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Contact buttons */
.myfreshman-help-cta .mybtn + .mybtn{
  margin-top:.55rem;
}
.myfreshman-end-contact-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.65rem;
}

/* Toolbox readability: known issue fixed in v2.0 */
.myfreshman-tool b{
  font-size:1.34rem;
  line-height:1.4;
}
.myfreshman-tool span{
  margin-top:.18rem;
  color:#667983;
  font-size:1.18rem;
  line-height:1.55;
}

/* Tablet */
@media(max-width:980px){
  .myfreshman-conditional-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Mobile */
@media(max-width:720px){
  .myfreshman-role-grid,
  .myfreshman-message-buttons,
  .myfreshman-message-buttons[data-freshman-mode="graduate"]{
    grid-template-columns:1fr;
  }
  .myfreshman-role-card{ min-height:0; }
  .myfreshman-grad-course-links{ grid-template-columns:1fr; }
  .myfreshman-conditional-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .myfreshman-advisor-grid-graduate{ grid-template-columns:1fr; }
}
@media(max-width:480px){
  .myfreshman-conditional-grid{ grid-template-columns:1fr; }
}


/* =========================================================
   v2.1｜2026-08-11｜Regression correction
   ---------------------------------------------------------
   - 還原 v1.x 原有 typography 尺度，不因 v2.0 分流而全頁放大。
   - 恢復 component link / button / advisor link 樣式，避免瀏覽器預設
     藍色＋底線、visited 紫色＋底線。
   - 修正 Timeline 換行與疊字。
   - 強化身分切換 active state。
   - 研究所三卡置中；四個碩博課程連結移入「課程與修業規定」卡。
   ========================================================= */

/* Typography regression reset */
.myfreshman-role-card strong{ font-size:1.72rem; }
.myfreshman-role-card > span:not(.myfreshman-role-icon){ font-size:1.34rem; }
.myfreshman-role-card em{ font-size:1.24rem; }
.myfreshman-message-buttons button strong{ font-size:1.42rem; }
.myfreshman-message-buttons button span{ font-size:1.18rem; }
.myfreshman-conditional-grid strong{ font-size:1.22rem; }
.myfreshman-conditional-grid span{ font-size:1.08rem; }

/* Component links */
.myfreshman-page .myfreshman-task-link,
.myfreshman-page .myfreshman-task-link:visited,
.myfreshman-page .myfreshman-step-link,
.myfreshman-page .myfreshman-step-link:visited,
.myfreshman-page .myfreshman-helper-links a,
.myfreshman-page .myfreshman-helper-links a:visited,
.myfreshman-page .myfreshman-assistant-card a,
.myfreshman-page .myfreshman-assistant-card a:visited,
.myfreshman-page .myfreshman-advisors a,
.myfreshman-page .myfreshman-advisors a:visited,
.myfreshman-page .myfreshman-tool,
.myfreshman-page .myfreshman-tool:visited,
.myfreshman-page .myfreshman-grad-course-links a,
.myfreshman-page .myfreshman-grad-course-links a:visited{
  color:#315F7F;
  text-decoration:none;
}
.myfreshman-page .myfreshman-advisors a{ font-weight:800; }
.myfreshman-page .myfreshman-task-link:hover,
.myfreshman-page .myfreshman-task-link:focus,
.myfreshman-page .myfreshman-step-link:hover,
.myfreshman-page .myfreshman-step-link:focus,
.myfreshman-page .myfreshman-helper-links a:hover,
.myfreshman-page .myfreshman-helper-links a:focus,
.myfreshman-page .myfreshman-assistant-card a:hover,
.myfreshman-page .myfreshman-assistant-card a:focus,
.myfreshman-page .myfreshman-advisors a:hover,
.myfreshman-page .myfreshman-advisors a:focus{
  text-decoration:underline;
}

/* NOW button appearance */
.myfreshman-page .myfreshman-alert-actions .mybtn,
.myfreshman-page .myfreshman-alert-actions .mybtn:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  text-decoration:none;
}

/* Timeline */
.myfreshman-timeline-item{
  flex-basis:185px;
  min-width:185px;
}
.myfreshman-timeline-date{
  white-space:normal;
  line-height:1.35;
}
.myfreshman-timeline-title{
  max-width:165px;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  line-height:1.45;
  margin-left:auto;
  margin-right:auto;
}

/* Advisors */
.myfreshman-advisor-grid span{ line-height:1.7; }

/* Stronger active role */
.myfreshman-role-card-undergrad[aria-pressed="true"]{
  background:#DDEFFA;
  border-color:#8DBFDA;
  box-shadow:0 0 0 3px rgba(45,139,203,.28),var(--myfresh-shadow);
}
.myfreshman-role-card-graduate[aria-pressed="true"]{
  background:#E9E1F5;
  border-color:#B9AAD7;
  box-shadow:0 0 0 3px rgba(117,104,183,.28),var(--myfresh-shadow);
}
.myfreshman-role-switch button[aria-pressed="true"]{
  background:#DDEFFA;
  border-color:#8DBFDA;
  color:#174F72;
}
.myfreshman-role-switch button[data-freshman-select="graduate"][aria-pressed="true"]{
  background:#E9E1F5;
  border-color:#B9AAD7;
  color:#55497F;
}

/* Graduate 3-card row centered */
.myfreshman-page[data-freshman-current-mode="graduate"] .myfreshman-card-grid-role{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:880px;
  margin-left:auto;
  margin-right:auto;
}

/* Course links inside course/rules card */
.myfreshman-grad-course-links-card{
  margin:.9rem 0 0;
  grid-template-columns:1fr;
}
.myfreshman-grad-course-links-card a{
  justify-content:flex-start;
  min-height:38px;
  padding:.5rem .7rem;
  font-size:1.17rem;
}

/* Toolbox readability */
.myfreshman-tool b{ font-size:1.3rem; }
.myfreshman-tool span{
  font-size:1.13rem;
  line-height:1.5;
}

@media(max-width:720px){
  .myfreshman-timeline-item{
    min-width:0;
    flex-basis:auto;
  }
  .myfreshman-timeline-title{
    max-width:none;
    margin:0;
  }
  .myfreshman-page[data-freshman-current-mode="graduate"] .myfreshman-card-grid-role{
    grid-template-columns:1fr;
    max-width:none;
  }
}


/* =========================================================
   v2.2｜2026-08-11｜Layout / button / timeline refinement
   ---------------------------------------------------------
   1. Page 內自有按鈕樣式，不再依賴瀏覽器或全站 a 樣式。
   2. Welcome 區字級略縮小，避免本機檢視過度放大。
   3. Need Help 左欄補足可讀字級。
   4. Timeline 日期區／標題區固定垂直節奏，避免兩行日期造成錯位。
   5. 研究所 Explore 僅顯示：研究所獎助學金／碩士班海外學習／系友專區。
   ========================================================= */

/* 01｜Scoped buttons: ensure consistent appearance even if global link rules load later */
.myfreshman-page .mybtn,
.myfreshman-page .mybtn:link,
.myfreshman-page .mybtn:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:2.65rem;
  padding:.62rem 1rem;
  border:1px solid transparent;
  border-radius:.65rem;
  font-size:1.22rem;
  font-weight:800;
  line-height:1.25;
  text-decoration:none !important;
  cursor:pointer;
  transition:.18s ease;
}
.myfreshman-page .mybtn-blue,
.myfreshman-page .mybtn-blue:link,
.myfreshman-page .mybtn-blue:visited{
  border-color:#2D8BCB;
  background:#2D8BCB;
  color:#fff !important;
}
.myfreshman-page .mybtn-blue:hover,
.myfreshman-page .mybtn-blue:focus{
  border-color:#246F9F;
  background:#246F9F;
  color:#fff !important;
  text-decoration:none !important;
}
.myfreshman-page .mybtn-gray,
.myfreshman-page .mybtn-gray:link,
.myfreshman-page .mybtn-gray:visited{
  border-color:#CAD4D9;
  background:#F4F7F8;
  color:#405866 !important;
}
.myfreshman-page .mybtn-gray:hover,
.myfreshman-page .mybtn-gray:focus{
  border-color:#AEBEC6;
  background:#E8EEF1;
  color:#263F4D !important;
  text-decoration:none !important;
}

/* NOW actions: paired buttons */
.myfreshman-alert-actions{
  gap:.75rem;
}
.myfreshman-alert-actions .mybtn{
  min-width:13.5rem;
}

/* Help / bottom contact actions */
.myfreshman-help-cta .mybtn,
.myfreshman-end-contact-row .mybtn{
  width:auto;
  min-width:10.5rem;
}

/* 02｜Welcome typography: only the first area is reduced */
.myfreshman-welcome{
  padding-top:3rem;
}
.myfreshman-welcome .mysemantic-h2{
  font-size:2.25rem;
}
.myfreshman-welcome p{
  max-width:800px;
  font-size:1.48rem;
  line-height:1.8;
}
.myfreshman-welcome .myfreshman-eyebrow{
  font-size:1.25rem;
}
.myfreshman-role-switch{
  max-width:680px;
}
.myfreshman-role-switch > span{
  font-size:1.16rem;
}

/* 03｜Need Help readable text scale */
.myfreshman-help-row strong{
  font-size:1.3rem;
  line-height:1.55;
}
.myfreshman-help-row span{
  font-size:1.28rem;
  line-height:1.65;
}
.myfreshman-help-cta p{
  font-size:1.23rem;
}

/* 04｜Timeline vertical alignment
   Date area and title area reserve consistent heights so every title begins on same baseline.
*/
.myfreshman-timeline-item{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.myfreshman-timeline-date{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  min-height:3.45rem;
  padding:.1rem .2rem 0;
  text-align:center;
  white-space:normal;
}
.myfreshman-timeline-title{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  min-height:4.2rem;
  padding-top:.2rem;
  text-align:center;
}

/* 05｜Graduate Explore: exactly 3 centered cards */
.myfreshman-page[data-freshman-current-mode="graduate"] .myfreshman-explore-grid-role{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}

/* Make role-specific explore colors stable after hidden items are removed */
.myfreshman-page[data-freshman-current-mode="graduate"] .myfreshman-explore-grid-role
  > .myfreshman-explore:not([hidden]) i{
  color:var(--myfresh-purple);
}
.myfreshman-page[data-freshman-current-mode="graduate"] .myfreshman-explore-grid-role
  > .myfreshman-explore:not([hidden]):first-of-type i{
  color:var(--myfresh-yellow);
}

/* Mobile: timeline stays vertical; reset desktop reserved heights */
@media(max-width:720px){
  .myfreshman-welcome .mysemantic-h2{ font-size:2rem; }
  .myfreshman-welcome p{ font-size:1.4rem; }

  .myfreshman-timeline-item{
    display:grid;
    grid-template-columns:48px 90px 1fr;
    align-items:center;
  }
  .myfreshman-timeline-date,
  .myfreshman-timeline-title{
    display:block;
    width:auto;
    min-height:0;
    padding:0;
    text-align:left;
  }
  .myfreshman-page[data-freshman-current-mode="graduate"] .myfreshman-explore-grid-role{
    grid-template-columns:1fr;
    max-width:none;
  }
}


/* =========================================================
   v2.3｜2026-08-11｜Final minor refinements
   ---------------------------------------------------------
   1. 學士班 checklist 說明改為句號＋換行。
   2. 修正「專題演講與學術活動」多餘空白。
   3. 研究所 Explore 三卡恢復個別圖示色彩。
   4. Need Help CTA icon 與標題使用一致配色。
   ========================================================= */

/* 03｜Graduate Explore icon colors:
   研究所獎助學金＝yellow、碩士班海外學習＝blue、系友專區＝teal
*/
.myfreshman-page[data-freshman-current-mode="graduate"]
.myfreshman-explore-grid-role > .myfreshman-explore:not([hidden]) i{
  color:inherit;
}
.myfreshman-page[data-freshman-current-mode="graduate"]
.myfreshman-explore-grid-role > .myfreshman-explore[data-freshman-mode="graduate"]:nth-of-type(1) i{
  color:var(--myfresh-yellow);
}
.myfreshman-page[data-freshman-current-mode="graduate"]
.myfreshman-explore-grid-role > .myfreshman-explore[data-freshman-mode="graduate"]:nth-of-type(2) i{
  color:var(--myfresh-blue);
}
/* Alumni is the common card and remains teal in graduate mode. */
.myfreshman-page[data-freshman-current-mode="graduate"]
.myfreshman-explore-grid-role > .myfreshman-explore:not([data-freshman-mode]) i{
  color:var(--myfresh-teal);
}

/* 04｜Need Help icon and heading use the same ink color */
.myfreshman-help-cta i,
.myfreshman-help-cta strong{
  color:var(--myfresh-ink);
}


/* =========================================================
   v2.4｜2026-08-11｜Icon color specificity correction
   ========================================================= */

/* Need Help:
   only the standalone life-ring follows the heading ink color.
   Icons inside buttons inherit the button text color.
*/
.myfreshman-help-cta > i.fa-life-ring{
  color:var(--myfresh-ink);
}
.myfreshman-help-cta .mybtn i{
  color:inherit !important;
}
.myfreshman-help-cta .mybtn-blue i{
  color:#fff !important;
}

/* Graduate Explore:
   use semantic selectors rather than nth-of-type because hidden
   undergraduate cards remain in the DOM and affect element indexing.
*/
.myfreshman-page[data-freshman-current-mode="graduate"]
.myfreshman-explore[data-freshman-mode="graduate"] .fa-trophy{
  color:var(--myfresh-yellow) !important;
}
.myfreshman-page[data-freshman-current-mode="graduate"]
.myfreshman-explore[data-freshman-mode="graduate"] .fa-plane{
  color:var(--myfresh-blue) !important;
}
.myfreshman-page[data-freshman-current-mode="graduate"]
.myfreshman-explore:not([data-freshman-mode]) .fa-handshake-o{
  color:var(--myfresh-teal) !important;
}


/* =========================================================
   v2.5｜2026-08-11｜Typography normalization for Rpage
   ---------------------------------------------------------
   正式環境基準：
   html { font-size:62.5%; } → 1rem = 10px

   本區僅統一 font-size，不改動既有版面、間距與元件結構。
   目標：
   - 一般正文：約 17–18px
   - 輔助文字：約 15–16px
   - 卡片標題：約 18px
   - Section 標題：約 28px
   - 避免原先 12–14px 級文字在正式站過小。
   ========================================================= */

/* ---------- Global text rhythm ---------- */
.myfreshman-page{
  font-size:1.7rem;
}

/* Page / section headings */
.myfreshman-section-head .myfreshman-eyebrow{
  font-size:1.5rem;
}
.myfreshman-section-head .mysemantic-h2{
  font-size:2.8rem;
}
.myfreshman-section-head > p:last-child{
  font-size:1.7rem;
  line-height:1.8;
}

/* Welcome area: intentionally slightly more restrained than the rest */
.myfreshman-welcome .myfreshman-eyebrow{
  font-size:1.45rem;
}
.myfreshman-welcome .mysemantic-h2{
  font-size:2.8rem;
}
.myfreshman-welcome p{
  font-size:1.75rem;
  line-height:1.8;
}

/* Role selector */
.myfreshman-role-prompt{
  font-size:1.7rem !important;
}
.myfreshman-role-card strong{
  font-size:2rem;
}
.myfreshman-role-card > span:not(.myfreshman-role-icon){
  font-size:1.6rem;
}
.myfreshman-role-card em{
  font-size:1.5rem;
}
.myfreshman-role-switch > span{
  font-size:1.45rem;
}
.myfreshman-role-switch button{
  font-size:1.55rem;
}

/* Messages */
.myfreshman-message-buttons button strong{
  font-size:1.75rem;
}
.myfreshman-message-buttons button span{
  font-size:1.5rem;
}

/* NOW */
.myfreshman-alert-label{
  font-size:1.5rem;
}
.myfreshman-alert-date{
  font-size:2rem;
}
.myfreshman-alert .mysemantic-h2{
  font-size:2.8rem;
}
.myfreshman-alert-text{
  font-size:1.7rem;
  line-height:1.75;
}
.myfreshman-alert-status{
  font-size:1.5rem;
}
.myfreshman-page .mybtn,
.myfreshman-page .mybtn:link,
.myfreshman-page .mybtn:visited{
  font-size:1.55rem;
}

/* Timeline */
.myfreshman-timeline-date{
  font-size:1.5rem;
}
.myfreshman-timeline-title{
  font-size:1.6rem;
  line-height:1.5;
}

/* Checklist / task cards */
.myfreshman-task .mysemantic-h3{
  font-size:2rem;
}
.myfreshman-task-date{
  font-size:1.5rem;
}
.myfreshman-task p{
  font-size:1.65rem;
  line-height:1.7;
}
.myfreshman-task-link{
  font-size:1.5rem;
}

/* Conditional items */
.myfreshman-conditional-box .mysemantic-h3{
  font-size:1.9rem;
}
.myfreshman-conditional-grid strong{
  font-size:1.6rem;
}
.myfreshman-conditional-grid span{
  font-size:1.45rem;
}

/* Learning / study */
.myfreshman-feature-label{
  font-size:1.55rem;
}
.myfreshman-learning-feature .mysemantic-h3{
  font-size:2.3rem;
}
.myfreshman-learning-feature > p{
  font-size:1.7rem;
  line-height:1.75;
}
.myfreshman-step strong{
  font-size:1.75rem;
}
.myfreshman-step span{
  font-size:1.55rem;
  line-height:1.65;
}
.myfreshman-step-link{
  font-size:1.5rem;
}
.myfreshman-grad-course-links-card a{
  font-size:1.5rem;
}
.myfreshman-grad-fee-note{
  font-size:1.6rem;
}

/* Support / info cards */
.myfreshman-support-card strong,
.myfreshman-info-card .mysemantic-h3{
  font-size:1.8rem;
}
.myfreshman-support-card span,
.myfreshman-info-card p{
  font-size:1.6rem;
  line-height:1.65;
}
.myfreshman-card-more{
  font-size:1.5rem;
}

/* Department / advisors */
.myfreshman-dept-note{
  font-size:1.65rem;
}
.myfreshman-advisors .mysemantic-h3{
  font-size:1.9rem;
}
.myfreshman-advisor-grid b{
  font-size:1.5rem;
}
.myfreshman-advisor-grid span,
.myfreshman-advisor-grid a{
  font-size:1.6rem;
}

/* Office contact */
.myfreshman-dept-contact b,
.myfreshman-assistant-card b{
  font-size:1.55rem;
}
.myfreshman-dept-contact span,
.myfreshman-assistant-card span,
.myfreshman-assistant-card a{
  font-size:1.55rem;
}

/* Life / practical cards */
.myfreshman-life-card .mysemantic-h3,
.myfreshman-helper-card .mysemantic-h3,
.myfreshman-digital-card .mysemantic-h3{
  font-size:1.8rem;
}
.myfreshman-life-card p,
.myfreshman-helper-card p,
.myfreshman-digital-card p{
  font-size:1.6rem;
  line-height:1.65;
}

/* Explore */
.myfreshman-explore strong{
  font-size:1.6rem;
}

/* Need Help */
.myfreshman-help-row strong{
  font-size:1.65rem;
}
.myfreshman-help-row span{
  font-size:1.6rem;
}
.myfreshman-help-cta strong{
  font-size:1.8rem;
}
.myfreshman-help-cta p{
  font-size:1.6rem;
}

/* Toolbox */
.myfreshman-tool b{
  font-size:1.6rem;
}
.myfreshman-tool span{
  font-size:1.5rem;
  line-height:1.55;
}
.myfreshman-end-cta .mysemantic-h3{
  font-size:2.1rem;
}
.myfreshman-end-cta p{
  font-size:1.6rem;
}

/* Modal */
.myfreshman-modal-kicker{
  font-size:1.35rem;
}
.myfreshman-modal-head .mysemantic-h2{
  font-size:2.4rem;
}
.myfreshman-modal-head p{
  font-size:1.55rem;
}
.myfreshman-modal-body p{
  font-size:1.7rem;
  line-height:1.85;
}

/* ---------- Mobile refinement ---------- */
@media(max-width:720px){
  .myfreshman-section-head .mysemantic-h2{
    font-size:2.5rem;
  }
  .myfreshman-section-head > p:last-child{
    font-size:1.65rem;
  }

  .myfreshman-welcome .mysemantic-h2{
    font-size:2.5rem;
  }
  .myfreshman-welcome p{
    font-size:1.65rem;
  }

  .myfreshman-alert .mysemantic-h2{
    font-size:2.45rem;
  }
  .myfreshman-alert-text{
    font-size:1.65rem;
  }

  .myfreshman-timeline-date{
    font-size:1.45rem;
  }
  .myfreshman-timeline-title{
    font-size:1.55rem;
  }

  .myfreshman-task .mysemantic-h3,
  .myfreshman-learning-feature .mysemantic-h3{
    font-size:1.9rem;
  }

  .myfreshman-modal-body p{
    font-size:1.65rem;
  }
}


/* =========================================================
   v2.6｜Typography fine-tuning
   依正式 Rpage 1rem=10px 環境調整指定元件。
   僅調整以下三組入口/卡片的字級與 icon 尺寸。
   ========================================================= */

/* 1. 社群／圖資四個入口：
      文字與主要功能按鈕（例如「立即辦理網路註冊」）同級 */
.myfreshman-explore strong{
  font-size:1.55rem;
  line-height:1.5;
}

/* 2. 「第一次上課前，你可能……」四張資訊卡：
      小標題與「怎麼到東華」同級；說明文字亦與其說明同級 */
.myfreshman-helper-card .mysemantic-h3{
  font-size:1.8rem;
  line-height:1.45;
}

/* 3. 「讓你的東華生活更精采」主要入口：
      文字提高至一般功能卡標題層級，icon 同步放大 */
.myfreshman-life-card .mysemantic-h3{
  font-size:1.8rem;
  line-height:1.45;
}
.myfreshman-life-card .myfreshman-card-icon,
.myfreshman-life-card > i,
.myfreshman-life-card > .fa,
.myfreshman-life-card i.fa{
  font-size:3.4rem;
  line-height:1;
}

/* 若該組入口使用 explore 類型結構，亦同步放大 icon */
.myfreshman-explore i,
.myfreshman-explore .fa{
  font-size:2.6rem;
  line-height:1;
}

@media(max-width:720px){
  .myfreshman-explore strong{
    font-size:1.55rem;
  }
  .myfreshman-helper-card .mysemantic-h3,
  .myfreshman-life-card .mysemantic-h3{
    font-size:1.8rem;
  }
  .myfreshman-helper-card p{
    font-size:1.6rem;
  }
  .myfreshman-life-card .myfreshman-card-icon,
  .myfreshman-life-card > i,
  .myfreshman-life-card > .fa,
  .myfreshman-life-card i.fa{
    font-size:3.2rem;
  }
}


/* =========================================================
   v2.7｜2026-08-19｜Optional role filter + all-information default
   ---------------------------------------------------------
   1. 身分選擇由閱讀 Gate 改為選用篩選器。
   2. 預設顯示學士班、研究所與共通資訊。
   3. 新增「顯示全部資訊」控制與系上新生活動卡片。
   ========================================================= */
.myfreshman-role-all{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  margin:0 auto 1.2rem; padding:.75rem 1.25rem; border:1px solid #B8C8D0;
  border-radius:999px; background:#F4F7F8; color:#314D5C; font-weight:800; cursor:pointer;
}
.myfreshman-role-all[aria-pressed="true"]{
  background:#E7F1F5; border-color:#86AFC0; box-shadow:0 0 0 3px rgba(86,145,168,.18);
}
.myfreshman-page[data-freshman-current-mode="all"] .myfreshman-card-grid-role,
.myfreshman-page[data-freshman-current-mode="all"] .myfreshman-explore-grid-role{
  max-width:none;
}
.myfreshman-task-dept-event{ border-top:4px solid var(--myfresh-teal); }
@media(max-width:720px){
  .myfreshman-role-all{ width:100%; }
}


/* =========================================================
   v2.8｜2026-08-19｜Role-filter clarification
   - Welcome 區移除重複的「全部資訊」按鈕與非必要篩選標題。
   - 篩選說明改為小字附註；全部模式僅於身分切換列提供返回入口。
   ========================================================= */
.myfreshman-role-note{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.65;
  color:#6b7280;
}


/* =========================================================
   v2.9｜2026-08-19｜NOW dual-reminder logic
   - NOW 以一則主提醒為基本；若下一項與主提醒相距 7 天內，
     或下一項本身已進入 7 天預告期，則同步顯示第二則。
   ========================================================= */
.myfreshman-alert-inner-secondary{
  border-top:1px solid rgba(36,55,70,.12);
  background:rgba(255,255,255,.26);
}


/* =========================================================
   v2.10｜2026-08-19｜Live typography / maintenance cleanup
   - Live QA 確認角色篩選附註被 Welcome 一般段落字級覆蓋。
   - 提高 page-scoped selector specificity，僅縮小該附註，不影響 Welcome 正文。
   ========================================================= */
.myfreshman-page .myfreshman-welcome .myfreshman-role-selector .myfreshman-role-note{
  margin:0 0 10px !important;
  color:#6b7280 !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.65 !important;
}


/* =========================================================
   v2.13｜2026-08-19｜All-mode timeline merge / note styling
   - 全部模式 Timeline：共同事項去重後依日期排序。
   - 僅在 id、起訖日期與 dateText 一致時合併，避免誤併不同學制日期。
   - 身分篩選附註加入「＊」並改用柔和紫藍色。
   ========================================================= */
.myfreshman-page .myfreshman-welcome .myfreshman-role-selector .myfreshman-role-note{
  color:#6d6a98 !important;
}


/* =========================================================
   v2.13｜2026-08-19｜Timeline semantic chronological order
   - Timeline 不再一律依事件 start 排序。
   - 截止型事項依實際截止日（end）排序；起始／區間／單日事項依 start 排序。
   - 修正 all mode 出現 8/20、8/3、8/31、8/27 等視覺亂序。
   ========================================================= */


/* =========================================================
   v2.13｜2026-08-19｜Timeline audience badge + copy audit
   - All mode Timeline 顯示「全體新生／學士班／碩博班」audience badge。
   - 單一身分篩選模式不輸出 badge，避免資訊重複。
   - 事件標題移除可由 badge / 篩選狀態判讀的冗餘身分前綴。
   ========================================================= */
.myfreshman-timeline-audience{
  display:inline-block;
  width:max-content;
  max-width:100%;
  margin:0 auto 7px;
  padding:2px 8px;
  border:1px solid rgba(45,111,154,.20);
  border-radius:999px;
  background:rgba(45,111,154,.07);
  color:#496f89;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
  white-space:nowrap;
}

/* =========================================================
   ADMISSION FAMILY｜Graduate Admission Icons
   Migrated from former global style.css
   ========================================================= */
/* ================================================================
   碩、博士班招生圖示 Version 2.8（HTML 實體圖示）
   說明：
   1. 研究所招生頁不再依賴 ::before 產生圖示，避免 Rpage 後載入 CSS 覆蓋。
   2. 圖示直接寫在 HTML 中，因此線上與本機顯示一致。
   3. 停用研究所頁既有的摘要卡片及 section 標題偽元素圖示。
   ================================================================ */

/* 停用研究所頁舊的偽元素圖示 */


/* 摘要卡片中的實體圖示 */
.mygraduate-card-icon {
  display: block;
  margin-bottom: auto;
  font-size: 2rem;
  line-height: 1;
}

/* section 標題中的實體圖示 */
.mygraduate-section-icon {
  display: inline-block;
  margin-right: 0.55rem;
  font-size: 0.95em;
  line-height: 1;
  vertical-align: -0.05em;
}


/* =========================================================
   ADMISSION FAMILY｜Traffic Guide
   Migrated from former global style.css
   ========================================================= */
/* =========================================================
   招生交通指引頁
   所有自訂 class 均以 my 開頭，避免與系統樣式衝突
   ========================================================= */

.mytraffic-page {
  --mytraffic-navy: #2E4B70;
  --mytraffic-navy-dark: #25295E;
  --mytraffic-gold: #B08F5A;
  --mytraffic-soft: #F3F6F9;
  --mytraffic-line: #D7E0E8;
  --mytraffic-text: #41464B;
  width: min(100%, 118rem);
  margin: 0 auto;
  padding: clamp(1.2rem, 2.4vw, 3rem);
  color: var(--mytraffic-text);
  font-family: "Noto Sans TC", sans-serif;
  font-size: var(--myfont-body, 1.7rem);
  line-height: 1.8;
}

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

/* 頁首地址區 */
.mytraffic-intro {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 1.8rem;
  padding: clamp(1.6rem, 2.5vw, 2.6rem);
  background: linear-gradient(135deg, #F4F7FA 0%, #FFFFFF 68%);
  border-left: 0.55rem solid var(--mytraffic-navy);
  box-shadow: 0 0.8rem 2.4rem rgba(37, 41, 94, 0.08);
}

.mytraffic-intro-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 5.8rem;
  height: 5.8rem;
  color: #FFFFFF;
  background: var(--mytraffic-navy);
  border-radius: 50%;
  box-shadow: 0 0.5rem 1.4rem rgba(46, 75, 112, 0.28);
  font-size: 2.8rem;
}

.mytraffic-intro .mysemantic-h2 {
  margin: 0 0 0.4rem;
  color: var(--mytraffic-navy-dark);
  font-size: clamp(2rem, 2vw + 1rem, 2.8rem);
  font-weight: 700;
}

.mytraffic-intro p {
  margin: 0;
}

.mytraffic-intro p i {
  margin-right: 0.45rem;
  color: var(--mytraffic-gold);
}

/* 各大區段 */
.mytraffic-section {
  margin-top: clamp(3.6rem, 5vw, 6rem);
}

.mytraffic-title-icon {
  display: inline-grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  margin-right: 0.5em;
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 0.78em;
  vertical-align: 0.08em;
}

.mytraffic-icon-train { background: #2F6F8F; }
.mytraffic-icon-plane { background: #6D5EA8; }
.mytraffic-icon-car { background: #A45F3A; }

.mytraffic-lead {
  margin: 1.6rem 0 2rem;
  padding: 1.2rem 1.5rem;
  background: var(--mytraffic-soft);
  border-left: 0.35rem solid var(--mytraffic-gold);
}

.mytraffic-more {
  display: inline-block;
  margin-left: 0.4rem;
}

.mytraffic-more i {
  color: var(--mytraffic-gold);
}

/* 響應式媒體框 */
.mytraffic-embed {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #E7EBEF;
  border: 0.1rem solid var(--mytraffic-line);
  border-radius: 0.8rem;
  box-shadow: 0 0.7rem 2rem rgba(37, 41, 94, 0.08);
}

.mytraffic-embed::before {
  display: block;
  padding-top: 60%;
  content: "";
}

.mytraffic-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mytraffic-main-map::before,
.mytraffic-drive-map::before {
  padding-top: 48%;
}

/* 左側媒體＋右側交通方式 */
.mytraffic-layout {
  display: grid;
  grid-template-columns: minmax(28rem, 0.82fr) minmax(0, 1.38fr);
  gap: clamp(1.8rem, 3vw, 3rem);
  align-items: start;
}

.mytraffic-media-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 0.1rem solid var(--mytraffic-line);
  border-radius: 0.8rem;
  box-shadow: 0 0.6rem 1.8rem rgba(37, 41, 94, 0.07);
}

.mytraffic-media-head {
  padding: 0.9rem 1.2rem;
  color: #FFFFFF;
  background: var(--mytraffic-navy);
  font-weight: 700;
}

.mytraffic-media-head i {
  margin-right: 0.5rem;
  color: #F4D19A;
}

.mytraffic-media-card .mytraffic-embed {
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mytraffic-media-card .mytraffic-embed iframe {
  display: block;
  width: 100% !important;
  max-width: none !important;
}

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

/* 交通途徑卡片 */
.mytraffic-options {
  display: grid;
  gap: 1.4rem;
}

.mytraffic-option {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.5rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mytraffic-line);
  border-left: 0.45rem solid var(--mytraffic-navy);
  border-radius: 0.7rem;
  box-shadow: 0 0.4rem 1.4rem rgba(37, 41, 94, 0.06);
}

.mytraffic-option-taxi { border-left-color: #C9891B; }
.mytraffic-option-bus { border-left-color: #2F7D63; }
.mytraffic-option-bus-alt { border-left-color: #6D5EA8; }

.mytraffic-option-icon {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  color: #FFFFFF;
  background: var(--mytraffic-navy);
  border-radius: 50%;
  font-size: 2.3rem;
  box-shadow: 0 0.45rem 1.2rem rgba(37, 41, 94, 0.18);
}

.mytraffic-option-taxi .mytraffic-option-icon { background: #C9891B; }
.mytraffic-option-bus .mytraffic-option-icon { background: #2F7D63; }
.mytraffic-option-bus-alt .mytraffic-option-icon { background: #6D5EA8; }

.mytraffic-option-body .mysemantic-h3 {
  margin: 0 0 0.5rem;
  color: var(--mytraffic-navy-dark);
  font-size: 1.85rem;
  font-weight: 700;
}

.mytraffic-option-body > p {
  margin: 0 0 0.8rem;
}

.mytraffic-facts {
  margin: 0;
}



.mytraffic-facts > div {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.42rem 0;
  border-bottom: 0.1rem dashed #DFE4E9;
}

.mytraffic-facts > div:last-child {
  border-bottom: 0;
}

.mytraffic-facts dt,
.mytraffic-facts dd {
  margin: 0;
}

.mytraffic-facts dt {
    white-space: nowrap;
    color: var(--mytraffic-navy);
    font-weight: 700;
}

.mytraffic-facts dt i {
  width: 1.35em;
  color: var(--mytraffic-gold);
  text-align: center;
}

.mytraffic-link-row {
  margin-top: 0.8rem !important;
  padding-top: 0.8rem;
  border-top: 0.1rem solid #E3E7EB;
}

/* 校園平面圖 */
.mytraffic-campus-section {
  margin-top: clamp(3.2rem, 5vw, 5.5rem);
  padding: clamp(1.4rem, 2vw, 2.2rem);
  background: #F7F9FB;
  border: 0.1rem solid var(--mytraffic-line);
  border-radius: 0.8rem;
}

.mytraffic-campus-title {
  margin: 0 0 0.6rem;
  color: var(--mytraffic-navy-dark);
  font-size: clamp(1.9rem, 1.3vw + 1.2rem, 2.4rem);
  font-weight: 700;
}

.mytraffic-campus-title i {
  margin-right: 0.45rem;
  color: var(--mytraffic-gold);
}

.mytraffic-campus-note {
  margin: 0 0 1.2rem;
  color: #59626B;
}

.mytraffic-campus-note i {
  color: var(--mytraffic-navy);
}

.mytraffic-scroll-hint {
  display: none;
  margin: 0 0 0.8rem;
  padding: 0.7rem 1rem;
  color: #59626B;
  background: #EEF3F7;
  border-left: 0.3rem solid var(--mytraffic-gold);
  font-size: 1.35rem;
  text-align: center;
}

.mytraffic-scroll-hint i {
  margin-right: 0.45rem;
  color: var(--mytraffic-navy);
}

/* 外層只負責水平捲動；標記不以此外框作為百分比定位基準 */
.mytraffic-ndhu-map {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  background: #FFFFFF;
  border: 0.2rem solid var(--mytraffic-navy);
  border-radius: 0.8rem;
  box-shadow: 0 0.8rem 2.4rem rgba(37, 41, 94, 0.12);
  -webkit-overflow-scrolling: touch;
}

/* 圖片與標記共同置於同一畫布，百分比永遠相對於完整圖片計算 */
.mytraffic-map-canvas {
  position: relative;
  width: 100%;
  min-width: 0;
}

.mytraffic-ndhu-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 地圖標記：醒目圓形圖標＋高對比標籤 */
.mytraffic-marker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  z-index: 3;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0.25rem 0.35rem rgba(0, 0, 0, 0.32));
}

.mytraffic-marker-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(2.8rem, 3vw, 4.2rem);
  height: clamp(2.8rem, 3vw, 4.2rem);
  color: #FFFFFF;
  border: 0.25rem solid #FFFFFF;
  border-radius: 50%;
  font-size: clamp(1.3rem, 1.4vw, 2rem);
  box-shadow: 0 0 0 0.18rem rgba(37, 41, 94, 0.75);
}

.mytraffic-marker-bus {
  background: #147A63;
}

.mytraffic-marker-econ-icon {
  color: #5B3900;
  background: #FFD65A;
  box-shadow: 0 0 0 0.2rem #8A5A00, 0 0 1.4rem rgba(255, 196, 0, 0.95);
}

.mytraffic-marker-label {
  display: inline-block;
  padding: 0.35em 0.65em;
  color: #FFFFFF;
  background: rgba(20, 47, 78, 0.94);
  border: 0.18rem solid #FFFFFF;
  border-radius: 0.45rem;
  font-size: clamp(1.15rem, 1vw + 0.45rem, 1.55rem);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4);
}

.mytraffic-marker-label-econ {
  color: #2B2100;
  background: #FFD65A;
  border-color: #713F00;
  text-shadow: none;
}

/* 依原圖位置微調；日後可只修改 top / left 百分比 */
.mytraffic-marker-library { top: 55.5%; left: 45%; }
.mytraffic-marker-educ { top: 58.5%; left: 57.5%; }
.mytraffic-marker-indigenous { top: 76%; left: 57%; }
.mytraffic-marker-admin { top: 82%; left: 48%; }
.mytraffic-marker-door { top: 93%; left: 46%; }
.mytraffic-marker-econ { top: 62%; left: 42.5%; z-index: 5; }

.mytraffic-marker-library-en { top: 55.5%; left: 45.5%; }
.mytraffic-marker-educ-en { top: 57.5%; left: 61%; }
.mytraffic-marker-indigenous-en { top: 76%; left: 63%; }
.mytraffic-marker-admin-en { top: 82%; left: 53.5%; }
.mytraffic-marker-door-en { top: 93%; left: 49.5%; }
.mytraffic-marker-econ-en { top: 62%; left: 48.5%; z-index: 5; }

.mytraffic-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.8rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mytraffic-line);
}

.mytraffic-map-legend span {
  font-weight: 700;
}

.mytraffic-map-legend span:first-child i {
  color: #147A63;
}

.mytraffic-map-legend span:last-child i {
  color: #D29000;
}

/* 平板 */
@media screen and (max-width: 900px) {
  .mytraffic-layout {
    grid-template-columns: 1fr;
  }

  .mytraffic-media-card {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
  }

  .mytraffic-main-map::before,
  .mytraffic-drive-map::before {
    padding-top: 58%;
  }
}

/* 手機 */
@media screen and (max-width: 600px) {
  .mytraffic-page {
    padding: 1rem 0.8rem 2rem;
    font-size: 1.55rem;
  }

  .mytraffic-intro {
    align-items: flex-start;
    padding: 1.4rem;
  }

  .mytraffic-intro-icon {
    width: 4.6rem;
    height: 4.6rem;
    font-size: 2.2rem;
  }

  .mytraffic-section {
    margin-top: 3.6rem;
  }

  .mytraffic-option {
    grid-template-columns: 4.4rem minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1.2rem 1rem;
  }

  .mytraffic-option-icon {
    width: 4rem;
    height: 4rem;
    font-size: 1.8rem;
  }

  .mytraffic-facts > div {
    grid-template-columns: 1fr;
    gap: 0.1rem;
    padding: 0.55rem 0;
  }

  .mytraffic-main-map::before,
  .mytraffic-drive-map::before,
  .mytraffic-embed::before {
    padding-top: 72%;
  }

  .mytraffic-campus-section {
    padding: 1rem;
  }

  /* 手機版地圖卡片與 iframe 強制使用容器完整寬度 */
  .mytraffic-media-card {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .mytraffic-media-card .mytraffic-embed {
    width: 100%;
    min-width: 0;
  }

  .mytraffic-media-card .mytraffic-embed::before {
    padding-top: 62%;
  }

  .mytraffic-scroll-hint {
    display: block;
  }

  /*
    手機版將「圖片＋標記」畫布固定為 68rem；
    外層 .mytraffic-ndhu-map 負責左右滑動。
    因此所有 top／left 百分比都以完整 68rem 圖片為基準，
    不會再因手機可視寬度而位移。
  */
  .mytraffic-map-canvas {
    width: 68rem;
    min-width: 68rem;
  }

  .mytraffic-ndhu-img {
    width: 68rem;
    min-width: 68rem;
  }

  .mytraffic-marker {
    min-width: max-content;
  }

  .mytraffic-map-legend {
    display: grid;
    gap: 0.5rem;
  }
}

/* 超小螢幕 */
@media screen and (max-width: 380px) {
  .mytraffic-intro {
    display: block;
  }

  .mytraffic-intro-icon {
    margin-bottom: 1rem;
  }

  .mytraffic-option {
    grid-template-columns: 1fr;
  }

  .mytraffic-option-icon {
    margin-bottom: 0.2rem;
  }
}


/* =========================================================
   v7.1｜Semantic Typography Ownership
   Global Typography Source of Truth = style.css
   These rules own textual roles only; icons / diagrams / decorative numerals
   intentionally retain component-local sizing.
   ========================================================= */
.myadmission-page,
.myfuture-page,
.myfreshman-page,
.mytraffic-page {
  font-size: var(--myfont-body, 1.7rem);
}

.myadmission-page .mysemantic-h1,
.myfuture-page .mysemantic-h1,
.myfreshman-page .mysemantic-h1,
.mytraffic-page .mysemantic-h1 {
  font-size: var(--myfont-section-title, 2.8rem);
}

.myadmission-page .mysemantic-h2,
.myfuture-page .mysemantic-h2,
.myfreshman-page .mysemantic-h2,
.mytraffic-page .mysemantic-h2 {
  font-size: var(--myfont-section-title, 2.8rem);
}

.myadmission-page .mysemantic-h3,
.myfuture-page .mysemantic-h3,
.myfreshman-page .mysemantic-h3,
.mytraffic-page .mysemantic-h3 {
  font-size: var(--myfont-feature-title, 2rem);
}

.myadmission-page .mysemantic-h4,
.myfuture-page .mysemantic-h4,
.myfreshman-page .mysemantic-h4,
.mytraffic-page .mysemantic-h4 {
  font-size: var(--myfont-card-title, 1.8rem);
}

.myadmission-page .myadmission-summary-card > strong,
.myfuture-page .myfuture-path-node > strong,
.myfuture-page .myfuture-path-study > strong,
.myfuture-page .myfuture-path-node-v18 > strong,
.myfreshman-page .myfreshman-task-title,
.myfreshman-page .myfreshman-helper-card-title {
  font-size: var(--myfont-card-title, 1.8rem);
}

.myadmission-page .myadmission-nav a,
.myadmission-page .myadmission-back a,
.myfreshman-page .mybtn,
.myfuture-page .myfuture-next a {
  font-size: var(--myfont-action, 1.55rem);
}

.myadmission-page .myadmission-nav-label,
.myadmission-page .myadmission-table,
.myfreshman-page .myfreshman-eyebrow,
.myfuture-page .myfuture-eyebrow,
.mytraffic-page .mytraffic-kicker {
  font-size: var(--myfont-meta, 1.5rem);
}

/* Page Header is owned exclusively by page-header.css. */
.myadmission-page .mypagehead,
.myfuture-page .mypagehead,
.myfreshman-page .mypagehead,
.mytraffic-page .mypagehead {
  font-size: inherit;
}


/* =========================================================
   v7.1｜Feedback fixes 2026-09-06
   - Future Students section titles consume global section-title token.
   - English admission pathway lists use decimal numbering.
   - Mobile admission pathway lists reserve marker space away from accent border.
   ========================================================= */


/* =========================================================
   v7.4｜Graduate Admission English card alignment
   ---------------------------------------------------------
   The longest graduate pathway title spans three lines.
   Reserve that same title block height across all three cards.
   ========================================================= */
.mygraduate-admission.myadmission-page-en .myadmission-summary-card > strong {
  min-height: 4.2em;
}


/* =========================================================
   3+2 Five-Year B.A.–M.A. Program
   Admission-family page role
   ========================================================= */
.myfiveyear-page{
  --myfiveyear-navy:#0f3154;
  --myfiveyear-navy-2:#173e67;
  --myfiveyear-gold:#c49a43;
  --myfiveyear-gold-soft:#f4ead3;
  --myfiveyear-blue-soft:#eef4f8;
  --myfiveyear-line:#d7e0e8;
  --myfiveyear-ink:#243746;
  --myfiveyear-muted:#617383;
  max-width:1180px;
  margin:0 auto;
  color:var(--myfiveyear-ink);
}

.myfiveyear-page,
.myfiveyear-page *{box-sizing:border-box}

.myfiveyear-section,
.myfiveyear-intro{
  width:min(100% - 4rem, 1080px);
  margin:0 auto;
}

.myfiveyear-section{padding:6.4rem 0}
.myfiveyear-eyebrow{
  margin:0 0 .8rem;
  color:var(--myfiveyear-gold);
  font-size:var(--myfont-eyebrow);
  font-weight:700;
  letter-spacing:.12em;
}
.myfiveyear-section-head{max-width:760px;margin-bottom:3rem}
.myfiveyear-section-head > .mysemantic-h2,
.myfiveyear-display-title{
  margin:0 0 1.2rem;
  color:var(--myfiveyear-navy);
  font-size:var(--myfont-section-title);
  line-height:1.35;
}
.myfiveyear-section-head > p:last-child,
.myfiveyear-lead{
  margin:0;
  font-size:var(--myfont-body);
  line-height:1.9;
  color:var(--myfiveyear-muted);
}

/* Intro */
.myfiveyear-intro{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(260px,.72fr);
  gap:3.6rem;
  align-items:center;
  padding:5.6rem 0 6.2rem;
  border-bottom:1px solid var(--myfiveyear-line);
}
.myfiveyear-intro-copy{max-width:720px}
.myfiveyear-display-title{font-size:var(--myfont-section-title)}
.myfiveyear-lead{font-size:var(--myfont-body-important)}
.myfiveyear-intro-note{
  display:flex;
  gap:1rem;
  margin-top:2rem;
  padding:1.4rem 1.6rem;
  border-left:4px solid var(--myfiveyear-gold);
  background:#faf7f0;
  font-size:var(--myfont-card-text);
  line-height:1.75;
}
.myfiveyear-intro-note i{
  margin-top:.2rem;
  color:var(--myfiveyear-gold);
  font-size:2rem;
}
.myfiveyear-number-card{
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  align-content:center;
  padding:2.4rem;
  border:1px solid rgba(15,49,84,.15);
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(15,49,84,.98),rgba(23,62,103,.94));
  box-shadow:0 16px 36px rgba(15,49,84,.16);
  color:#fff;
}
.myfiveyear-number-main{
  font-family:"Noto Serif TC",serif;
  font-size:7.6rem;
  line-height:1;
  font-weight:700;
}
.myfiveyear-number-plus{
  margin:0 1rem;
  color:#dfbd73;
  font-size:4.8rem;
  font-weight:700;
}
.myfiveyear-number-label{
  flex:0 0 100%;
  margin-top:1.3rem;
  text-align:center;
  font-size:var(--myfont-card-text);
  letter-spacing:.03em;
}

/* Benefit cards */
.myfiveyear-benefit-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.6rem;
}
.myfiveyear-benefit-card{
  position:relative;
  min-height:245px;
  padding:2.2rem;
  border:1px solid var(--myfiveyear-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,49,84,.06);
}
.myfiveyear-benefit-card > i{
  display:inline-grid;
  place-items:center;
  width:4.6rem;height:4.6rem;
  margin-bottom:1.7rem;
  border-radius:50%;
  background:var(--myfiveyear-blue-soft);
  color:var(--myfiveyear-navy);
  font-size:2rem;
}
.myfiveyear-card-no{
  position:absolute;
  top:1.8rem;right:1.8rem;
  color:rgba(196,154,67,.62);
  font-size:var(--myfont-meta);
  font-weight:700;
  letter-spacing:.08em;
}
.myfiveyear-benefit-card .mysemantic-h3,
.myfiveyear-rule-card .mysemantic-h3,
.myfiveyear-step .mysemantic-h3,
.myfiveyear-detail-card .mysemantic-h3,
.myfiveyear-myth-card .mysemantic-h3{
  margin:0 0 .9rem;
  color:var(--myfiveyear-navy);
  font-size:var(--myfont-card-title);
  line-height:1.5;
}
.myfiveyear-benefit-card p,
.myfiveyear-rule-card p,
.myfiveyear-step p,
.myfiveyear-detail-card p,
.myfiveyear-myth-card p{
  margin:0;
  font-size:var(--myfont-card-text);
  line-height:1.8;
  color:var(--myfiveyear-muted);
}

/* Timeline */
.myfiveyear-path-section{
  width:100%;
  max-width:none;
  padding-left:max(2rem,calc((100% - 1080px)/2));
  padding-right:max(2rem,calc((100% - 1080px)/2));
  background:#f6f8fa;
}
.myfiveyear-path-section .myfiveyear-section-head{max-width:760px}
.myfiveyear-timeline{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:stretch;
  gap:1rem;
}
.myfiveyear-step{
  padding:2rem;
  border-top:4px solid var(--myfiveyear-gold);
  border-radius:0 0 14px 14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,49,84,.05);
}
.myfiveyear-step-year{
  display:inline-block;
  margin-bottom:.8rem;
  color:var(--myfiveyear-gold);
  font-size:var(--myfont-meta);
  font-weight:700;
}
.myfiveyear-arrow{
  align-self:center;
  color:#9bb0c2;
  font-size:2.4rem;
}
.myfiveyear-warning{
  display:flex;
  gap:1rem;
  margin-top:2rem;
  padding:1.4rem 1.6rem;
  border:1px solid #d8e2ea;
  border-radius:12px;
  background:#fff;
  font-size:var(--myfont-card-text);
  line-height:1.75;
}
.myfiveyear-warning i{margin-top:.2rem;color:var(--myfiveyear-navy);font-size:1.8rem}

/* Fit */
.myfiveyear-fit-section{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);
  gap:4rem;
  align-items:start;
}
.myfiveyear-fit-section .myfiveyear-section-head{margin:0}
.myfiveyear-checklist{
  list-style:none;
  padding:0;margin:0;
  display:grid;
  gap:1rem;
}
.myfiveyear-checklist li{
  display:flex;
  gap:1.2rem;
  align-items:flex-start;
  padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--myfiveyear-line);
  font-size:var(--myfont-card-text);
  line-height:1.7;
}
.myfiveyear-checklist i{
  margin-top:.25rem;
  color:var(--myfiveyear-gold);
}

/* Rules */
.myfiveyear-rules-section{
  width:100%;
  max-width:none;
  padding-left:max(2rem,calc((100% - 1080px)/2));
  padding-right:max(2rem,calc((100% - 1080px)/2));
  background:var(--myfiveyear-navy);
  color:#fff;
}
.myfiveyear-rules-section .myfiveyear-eyebrow{color:#e3c47d}
.myfiveyear-rules-section .mysemantic-h2{color:#fff}
.myfiveyear-rules-section .myfiveyear-section-head > p:last-child{color:#d5e0ea}
.myfiveyear-rule-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.5rem;
}
.myfiveyear-rule-card{
  padding:2rem;
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  background:rgba(255,255,255,.07);
}
.myfiveyear-rule-card > i{
  margin-bottom:1.4rem;
  color:#e3c47d;
  font-size:2.2rem;
}
.myfiveyear-rule-card .mysemantic-h3{color:#fff}
.myfiveyear-rule-card p{color:#e3ebf2}

/* Details */
.myfiveyear-detail-grid{display:grid;gap:1.4rem}
.myfiveyear-detail-card{
  display:grid;
  grid-template-columns:5.2rem 1fr;
  gap:1.6rem;
  padding:1.8rem 2rem;
  border:1px solid var(--myfiveyear-line);
  border-radius:14px;
  background:#fff;
}
.myfiveyear-detail-icon{
  display:grid;
  place-items:center;
  width:5.2rem;height:5.2rem;
  border-radius:14px;
  background:var(--myfiveyear-gold-soft);
  color:#8f6d26;
  font-size:2rem;
}

/* Myths */
.myfiveyear-myth-section{
  width:100%;
  max-width:none;
  padding-left:max(2rem,calc((100% - 1080px)/2));
  padding-right:max(2rem,calc((100% - 1080px)/2));
  background:#f8f6f1;
}
.myfiveyear-myth-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.6rem;
}
.myfiveyear-myth-card{
  padding:2.2rem;
  border-top:4px solid var(--myfiveyear-gold);
  background:#fff;
}
.myfiveyear-myth-label{
  display:inline-block;
  margin-bottom:1rem;
  color:#987328;
  font-size:var(--myfont-meta);
  font-weight:700;
}

/* CTA */
.myfiveyear-action-section{
  padding-top:6.8rem;
  padding-bottom:7.4rem;
}
.myfiveyear-action-copy{
  padding:3.2rem;
  border-radius:20px;
  background:linear-gradient(135deg,#0f3154,#173e67);
  color:#fff;
}
.myfiveyear-action-copy .mysemantic-h2{color:#fff}
.myfiveyear-action-copy > p{max-width:780px}
.myfiveyear-action-copy > p:not(.myfiveyear-eyebrow){color:#e0e8ef}
.myfiveyear-action-lead{
  margin:.4rem 0 1rem;
  font-size:var(--myfont-body-important);
  font-weight:700;
  color:#fff !important;
}
.myfiveyear-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
}
.myfiveyear-primary-link,
.myfiveyear-secondary-link{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  min-height:4.4rem;
  padding:1rem 1.4rem;
  border-radius:8px;
  text-decoration:none;
  font-size:var(--myfont-action);
  font-weight:700;
}
.myfiveyear-primary-link{
  background:#fff;
  color:var(--myfiveyear-navy);
}
.myfiveyear-secondary-link{
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
}
.myfiveyear-primary-link:hover,
.myfiveyear-primary-link:focus{
  background:#f4ead3;
  color:#0f3154;
  text-decoration:none;
}
.myfiveyear-secondary-link:hover,
.myfiveyear-secondary-link:focus{
  background:rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
}
.myfiveyear-fineprint{
  margin:1.6rem 0 0;
  font-size:var(--myfont-meta);
  line-height:1.7;
  opacity:.9;
}

/* English layout accommodations */
.myfiveyear-page-en .mypagehead-title{max-width:760px}
.myfiveyear-page-en .mypagehead-desc{max-width:760px}
.myfiveyear-page-en .myfiveyear-benefit-card{min-height:285px}

/* =========================
   RWD architecture < 1025px
   ========================= */
@media (max-width:1024px){
  .myfiveyear-section,
  .myfiveyear-intro{
    width:min(100% - 3rem, 920px);
  }
  .myfiveyear-intro{
    grid-template-columns:1fr 280px;
    gap:2.4rem;
  }
  .myfiveyear-benefit-grid,
  .myfiveyear-rule-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .myfiveyear-timeline{
    grid-template-columns:1fr 1fr;
    gap:1.4rem;
  }
  .myfiveyear-arrow{display:none}
  .myfiveyear-fit-section{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .myfiveyear-path-section,
  .myfiveyear-rules-section,
  .myfiveyear-myth-section{
    width:100%;
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
}

@media (max-width:640px){
  .myfiveyear-section{padding:4.6rem 0}
  .myfiveyear-section,
  .myfiveyear-intro{
    width:min(100% - 2.4rem, 100%);
  }
  .myfiveyear-intro{
    grid-template-columns:1fr;
    padding:4rem 0 4.6rem;
  }
  .myfiveyear-number-card{
    min-height:200px;
  }
  .myfiveyear-number-main{font-size:6rem}
  .myfiveyear-number-plus{font-size:3.6rem}
  .myfiveyear-benefit-grid,
  .myfiveyear-rule-grid,
  .myfiveyear-timeline,
  .myfiveyear-myth-grid{
    grid-template-columns:1fr;
  }
  .myfiveyear-benefit-card,
  .myfiveyear-page-en .myfiveyear-benefit-card{
    min-height:0;
  }
  .myfiveyear-detail-card{
    grid-template-columns:4.6rem 1fr;
    padding:1.5rem;
  }
  .myfiveyear-detail-icon{
    width:4.6rem;height:4.6rem;
  }
  .myfiveyear-action-copy{padding:2.2rem 1.8rem}
  .myfiveyear-actions{flex-direction:column}
  .myfiveyear-primary-link,
  .myfiveyear-secondary-link{
    justify-content:center;
    width:100%;
    text-align:center;
  }
}


/* =========================================================
   v7.6-test | 3+2 English layout balance refinements
   1) Let explanatory copy under WHY / PATH use the full content width.
   2) Replace the heavy full-navy application block with a light family surface.
   3) Reserve equal English benefit-card title depth so body copy aligns.
   ========================================================= */

/* English WHY / PATH: explanatory copy should not inherit the narrow 760px cap. */
.myfiveyear-page-en #why .myfiveyear-section-head,
.myfiveyear-page-en #path .myfiveyear-section-head{
  max-width:100%;
}

/* Application block: keep visual distinction without a sudden heavy navy field. */
.myfiveyear-rules-section{
  background:#eef3f7;
  color:var(--myfiveyear-ink);
}
.myfiveyear-rules-section .myfiveyear-eyebrow{
  color:var(--myfiveyear-gold);
}
.myfiveyear-rules-section .mysemantic-h2{
  color:var(--myfiveyear-navy);
}
.myfiveyear-rules-section .myfiveyear-section-head > p:last-child{
  color:var(--myfiveyear-muted);
}
.myfiveyear-rule-card{
  border:1px solid var(--myfiveyear-line);
  background:#fff;
  box-shadow:0 6px 18px rgba(15,49,84,.05);
}
.myfiveyear-rule-card > i{
  color:var(--myfiveyear-gold);
}
.myfiveyear-rule-card .mysemantic-h3{
  color:var(--myfiveyear-navy);
}
.myfiveyear-rule-card p{
  color:var(--myfiveyear-muted);
}

/* English benefit cards: equalize the title block so all descriptions start together. */
.myfiveyear-page-en .myfiveyear-benefit-card .mysemantic-h3{
  min-height:3.1em;
}


/* =========================================================
   v7.7-test | 3+2 English card alignment completion
   Complete role-based alignment for the remaining two 4-card groups:
   - How does 3+2 work? (timeline cards)
   - Eligibility and selection (rule cards)
   ========================================================= */

/* English timeline cards:
   reserve equal vertical slots for stage label and title,
   so explanatory copy begins on a common baseline. */
.myfiveyear-page-en .myfiveyear-step-year{
  display:block;
  min-height:2.8em;
}
.myfiveyear-page-en .myfiveyear-step .mysemantic-h3{
  min-height:3.1em;
}

/* English eligibility cards:
   icon already occupies a common visual slot; reserve equal title depth
   so each explanatory paragraph starts at the same vertical position. */
.myfiveyear-page-en .myfiveyear-rule-card .mysemantic-h3{
  min-height:3.1em;
}

/* Tablet/mobile: release reserved desktop alignment space once the
   four-card rows collapse and common baselines no longer add value. */
@media (max-width:1024px){
  .myfiveyear-page-en .myfiveyear-step-year,
  .myfiveyear-page-en .myfiveyear-step .mysemantic-h3,
  .myfiveyear-page-en .myfiveyear-rule-card .mysemantic-h3{
    min-height:0;
  }
}