:root {
      --forest: #284f3c;
      --forest-deep: #234333;
      --green: #4b7552;
      --green-hover: #3a6042;
      --ink: #344b3c;
      --muted: #6c7f6e;
      --line: #d7e2d0;
      --paper: #f9fcf5;
      --page: #eff5e9;
      --tint: #e8f1e0;
      --emphasis: #dfead5;
      --accent: #6a8c57;
      --banner-1-image: none;
      --banner-2-image: none;
      --banner-3-image: none;
      --pharmacist-image: none;
      --container: 1180px;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 98px
    }

    body {
      margin: 0;
      background: var(--page);
      color: var(--ink);
      font: 15px/1.9 "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
      -webkit-font-smoothing: antialiased
    }

    a {
      color: inherit;
      text-decoration: none
    }

    p,
    h1,
    h2,
    h3,
    figure {
      margin: 0
    }

    ul,
    ol {
      margin: 0;
      padding: 0
    }

    p {
      overflow-wrap: break-word
    }

    button,
    input,
    select,
    textarea {
      font: inherit
    }

    button {
      cursor: pointer;
      border: 0
    }

    a,
    button,
    summary,
    input,
    select,
    textarea {
      -webkit-tap-highlight-color: transparent
    }

    svg {
      display: block;
      width: 100%;
      height: 100%
    }

    img {
      display: block;
      max-width: 100%
    }

    a:focus-visible,
    button:focus-visible,
    summary:focus-visible,
    .table-scroll:focus-visible {
      outline: 3px solid var(--green);
      outline-offset: 5px
    }

    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--green);
      outline-offset: 2px
    }

    [hidden] {
      display: none !important
    }

    .container {
      width: calc(100% - 96px);
      max-width: var(--container);
      margin: 0 auto;
      min-width: 0
    }

    .skip-link {
      position: fixed;
      top: -100px;
      left: 15px;
      z-index: 100;
      background: var(--paper);
      padding: 12px 20px
    }

    .skip-link:focus {
      top: 10px
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      background: #f6faefef;
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(16px)
    }

    .header-inner {
      min-height: 82px;
      display: flex;
      align-items: center;
      gap: 30px
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 20px;
      letter-spacing: .7px;
      white-space: nowrap;
      font-weight: 750;
      color: var(--forest)
    }

    .brand-emblem {
      display: grid;
      place-items: center;
      width: 39px;
      height: 39px;
      padding: 5px;
      background: var(--forest);
      color: #e3eed5;
      border-radius: 8px
    }

    .desktop-nav {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 25px;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap
    }

    .desktop-nav a {
      position: relative;
      padding: 28px 0
    }

    .desktop-nav a:after {
      content: "";
      position: absolute;
      bottom: 19px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--green);
      transform: scaleX(0);
      transition: transform .2s
    }

    .desktop-nav a:hover:after,
    .desktop-nav a.is-active:after {
      transform: scaleX(1)
    }

    .header-cta {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 9px 16px;
      border: 1px solid #bed0b4;
      border-radius: 5px;
      color: var(--forest);
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap
    }

    .header-cta:hover {
      background: #e6eedc
    }

    .menu-toggle {
      display: none;
      width: 39px;
      height: 39px;
      background: transparent;
      padding: 7px
    }

    .menu-toggle span {
      display: block;
      height: 2px;
      width: 23px;
      background: var(--forest);
      margin: 5px 0
    }

    .mobile-nav {
      border-top: 1px solid var(--line);
      padding: 10px 25px 20px
    }

    .mobile-nav a {
      display: block;
      font-size: 14px;
      padding: 8px 0
    }

    .hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: linear-gradient(130deg, #e4eed9 0%, #eff5e6 46%, #dfead2 100%);
      text-align: center;
      color: var(--forest);
      border-bottom: 1px solid #d4e0cc
    }

    .hero-decoration {
      position: absolute;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background: radial-gradient(ellipse at 0% 100%, #cedeb945, transparent 48%), radial-gradient(ellipse at 100% 0%, #bfcfa338, transparent 45%)
    }

    .hero-decoration:before,
    .hero-decoration:after {
      position: absolute;
      content: "";
      width: 540px;
      height: 540px;
      border: 1px solid #9fb58c27;
      border-radius: 50%;
      top: -340px;
      right: -80px
    }

    .hero-decoration:after {
      width: 440px;
      height: 440px;
      top: auto;
      right: auto;
      left: -290px;
      bottom: -180px
    }

    .hero-content {
      padding-top: 48px;
      padding-bottom: 27px
    }

    .hero-stage {
      display: grid;
      place-items: center;
      min-height: 446px
    }

    .hero-slide {
      width: 100%
    }

    .banner-image {
      position: absolute;
      inset: 0;
      z-index: -1;
      background-size: cover;
      background-position: center;
      opacity: .24;
      pointer-events: none
    }

    .banner-image-1 {
      background-image: var(--banner-1-image)
    }

    .banner-image-2 {
      background-image: var(--banner-2-image)
    }

    .banner-image-3 {
      background-image: var(--banner-3-image)
    }

    .hero h1,
    .hero-title {
      font-size: clamp(37px, 4vw, 58px);
      line-height: 1.55;
      letter-spacing: 1px;
      font-weight: 700;
      max-width: 1100px;
      margin: 0 auto;
      color: var(--forest-deep)
    }

    .hero h1>span,
    .hero-title>span {
      display: block
    }

    .hero-title {
      font-size: clamp(35px, 3.7vw, 53px)
    }

    .hero-subtitle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin: 26px auto 0;
      max-width: 1000px
    }

    .hero-fact {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .2px;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      border: 1px solid #baceaa;
      padding: 7px 15px;
      border-radius: 5px;
      background: #f8fcf04d;
      color: #46653f
    }

    .fact-separator {
      display: none
    }

    .hero-secondary-line {
      font-size: 27px;
      letter-spacing: 1.5px;
      color: #5d7e48;
      line-height: 1.8;
      margin-top: 18px
    }

    .hero-actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 31px
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
      min-height: 52px;
      padding: 13px 26px;
      border-radius: 5px;
      font-size: 15px;
      line-height: 1.65;
      font-weight: 700;
      transition: background .18s, transform .18s
    }

    .button span {
      font-size: 20px;
      font-weight: 400;
      line-height: 1
    }

    .button:hover {
      transform: translateY(-2px)
    }

    .button-primary {
      background: var(--green);
      color: #fff
    }

    .button-primary:hover {
      background: var(--green-hover)
    }

    .button-outline {
      border: 1px solid #819d6c;
      color: var(--forest);
      background: #f9fcf340
    }

    .button-outline:hover {
      background: #f6faed
    }

    .carousel-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 17px;
      margin-top: 8px
    }

    .carousel-arrow,
    .carousel-pause {
      display: grid;
      place-items: center;
      width: 31px;
      height: 31px;
      background: transparent;
      color: #5e7a4e;
      border: 1px solid transparent;
      border-radius: 50%;
      font-size: 19px;
      line-height: 1
    }

    .carousel-arrow:hover,
    .carousel-pause:hover {
      background: #e0ebd4;
      border-color: #bed0ae
    }

    .carousel-pause {
      font-size: 15px;
      margin-left: 0
    }

    .carousel-dots {
      display: flex;
      gap: 9px;
      align-items: center
    }

    .carousel-dots button {
      position: relative;
      padding: 3px 11px 11px;
      background: none;
      color: #789067;
      font: 11px/1.5 Arial, sans-serif
    }

    .carousel-dots button:after {
      content: "";
      position: absolute;
      bottom: 3px;
      left: 3px;
      right: 3px;
      height: 2px;
      background: #b9cbaa;
      transition: background .2s
    }

    .carousel-dots button[aria-pressed=true] {
      color: var(--forest);
      font-weight: 700
    }

    .carousel-dots button[aria-pressed=true]:after {
      background: var(--green)
    }

    .highlights {
      background: #f6faee;
      border-bottom: 1px solid var(--line)
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      padding: 35px 0
    }

    .stat {
      text-align: center;
      padding: 0 22px;
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start
    }

    .stat:last-child {
      border-right: 0
    }

    .stat strong {
      display: block;
      color: var(--forest);
      font-size: 32px;
      font-weight: 750;
      line-height: 1.6;
      white-space: nowrap;
      letter-spacing: -1px
    }

    .stat.long-stat strong {
      font-size: 20px;
      letter-spacing: -.8px;
      line-height: 2.56
    }

    .stat p {
      font-size: 12px;
      line-height: 1.9;
      color: var(--muted);
      margin-top: 5px;
      max-width: 250px
    }

    .section {
      padding: 74px 0;
      background: var(--page)
    }

    .section-tint {
      background: var(--tint)
    }

    .section-emphasis {
      background: var(--emphasis)
    }

    .section-heading {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 32px
    }

    .section-index {
      display: grid;
      place-items: center;
      flex: none;
      width: 36px;
      height: 36px;
      border: 1px solid #a9bf96;
      border-radius: 50%;
      font: 12px/1 Arial, sans-serif;
      color: #66884e
    }

    .section-heading h2 {
      font-size: 31px;
      line-height: 1.5;
      letter-spacing: .8px;
      font-weight: 700;
      color: var(--forest)
    }

    h3 {
      font-size: 18px;
      line-height: 1.8;
      color: var(--forest);
      font-weight: 700;
      margin-bottom: 13px
    }

    .three-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 21px
    }

    .info-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 29px 26px
    }

    .card-icon {
      display: block;
      width: 33px;
      height: 33px;
      color: var(--green);
      margin-bottom: 21px
    }

    .info-card h3 {
      font-size: 19px;
      margin-bottom: 12px
    }

    .info-card p {
      font-size: 14px;
      line-height: 2;
      color: #657762
    }

    .notice {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 18px 21px;
      background: #f4f6e7;
      border: 1px solid #dbe1c5;
      border-radius: 6px;
      margin-top: 23px;
      font-size: 13px;
      line-height: 1.95;
      color: #6d7557
    }

    .notice p {
      flex: 1
    }

    .notice-icon {
      flex: none;
      display: grid;
      place-items: center;
      width: 18px;
      height: 18px;
      border: 1px solid #8e9b6f;
      border-radius: 50%;
      font: italic 12px/1 Georgia, serif;
      color: #6f7e50;
      margin-top: 4px
    }

    .audience-layout {
      display: grid;
      grid-template-columns: 1.12fr 1fr;
      gap: 43px;
      align-items: stretch
    }

    .audience-list {
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .audience-item {
      position: relative;
      padding: 26px 0 26px 51px;
      border-bottom: 1px solid #cfddc5
    }

    .audience-item:first-child {
      padding-top: 5px
    }

    .audience-item:last-child {
      border-bottom: 0;
      padding-bottom: 5px
    }

    .audience-item .card-icon {
      position: absolute;
      left: 0;
      top: 29px;
      width: 28px;
      height: 28px;
      margin: 0
    }

    .audience-item:first-child .card-icon {
      top: 8px
    }

    .audience-item p {
      font-size: 17px;
      font-weight: 600;
      color: #3f5b44;
      line-height: 2
    }

    .audience-photo {
      min-height: 355px;
      background: #dde8d4;
      border: 1px solid #d3e0c9;
      border-radius: 10px;
      overflow: hidden;
      background-image: var(--pharmacist-image);
      background-size: cover;
      background-position: center
    }

    .audience-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .requirements-intro {
      max-width: 1000px
    }

    .requirements-intro p {
      font-size: 14px;
      color: #647661;
      margin-top: 9px
    }

    .requirements-intro+.notice {
      margin-bottom: 29px
    }

    .table-scroll {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow-x: auto;
      background: var(--paper);
      width: 100%;
      min-width: 0
    }

    table {
      border-collapse: collapse;
      width: 100%;
      text-align: left;
      line-height: 1.95;
      font-size: 14px
    }

    th {
      padding: 14px 21px;
      background: #e1ebd7;
      color: var(--forest);
      font-weight: 700;
      font-size: 13px;
      line-height: 1.8;
      text-align: left;
      border-bottom: 1px solid var(--line)
    }

    td {
      padding: 18px 21px;
      color: #637460;
      border-bottom: 1px solid var(--line);
      vertical-align: top
    }

    td:first-child {
      color: #3c5840;
      font-weight: 600
    }

    th+th,
    td+td {
      border-left: 1px solid #dce6d4
    }

    tbody tr:last-child td {
      border-bottom: 0
    }

    tbody tr:nth-child(even) {
      background: #f0f6e9
    }

    .materials-table td:first-child {
      width: 25%
    }

    .process-subhead {
      display: flex;
      align-items: baseline;
      gap: 19px;
      margin-bottom: 24px
    }

    .process-subhead h3:first-child {
      font-size: 12px;
      font-weight: 500;
      color: #6a805c;
      border: 1px solid #b6cba8;
      padding: 2px 11px;
      border-radius: 4px;
      margin: 0
    }

    .process-subhead h3:last-child {
      margin: 0;
      font-size: 17px
    }

    .timeline {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 35px 35px;
      padding-top: 12px
    }

    .timeline li {
      border-top: 1px solid #bccfb0;
      padding-top: 29px;
      position: relative
    }

    .step-number {
      position: absolute;
      top: -15px;
      left: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--green);
      color: #fff;
      display: grid;
      place-items: center;
      box-shadow: 0 0 0 6px var(--tint);
      font: 11px/1 Arial, sans-serif
    }

    .timeline h3 {
      font-size: 16px;
      margin-bottom: 8px
    }

    .timeline p {
      font-size: 13px;
      color: #687b61;
      line-height: 2
    }

    .timeline-seven {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 36px 26px
    }

    .timeline-seven li:last-child {
      grid-column: span 2
    }

    .exam-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 28px 25px;
      display: flex;
      flex-direction: column
    }

    .exam-number {
      display: block;
      font: 35px/1 Arial, sans-serif;
      color: #b5c9a7;
      margin-bottom: 24px;
      letter-spacing: -1.5px
    }

    .exam-card h3 {
      font-size: 20px;
      line-height: 1.7;
      margin-bottom: 20px
    }

    .exam-english {
      display: block;
      margin-top: 7px;
      min-height: 43px;
      color: #7a8b70;
      font: 13px/1.7 Arial, sans-serif
    }

    .exam-card p {
      font-size: 13px;
      color: #65775e;
      line-height: 2
    }

    .exam-card .exam-format {
      border-top: 1px solid var(--line);
      padding-top: 16px;
      margin-top: 21px;
      color: #3e5e41;
      font-weight: 600
    }

    .schedule-callout {
      padding: 22px 27px;
      border-radius: 8px 8px 0 0;
      display: flex;
      gap: 24px;
      align-items: center;
      background: #d7e5ca;
      border: 1px solid #c4d5b6
    }

    .calendar-icon {
      flex: none;
      padding: 15px 13px;
      border: 1px solid #a9bf95;
      border-radius: 5px;
      font: 34px/1 Arial, sans-serif;
      color: #597648;
      letter-spacing: -1px
    }

    .schedule-callout h3 {
      color: var(--forest);
      font-size: 18px;
      margin-bottom: 5px
    }

    .schedule-callout p {
      font-size: 14px;
      color: #5a724f
    }

    .schedule-list {
      margin: 0;
      border: 1px solid var(--line);
      border-top: 0;
      border-radius: 0 0 8px 8px;
      overflow: hidden;
      background: var(--paper)
    }

    .schedule-list>div {
      display: grid;
      grid-template-columns: 210px 1fr;
      border-bottom: 1px solid var(--line)
    }

    .schedule-list>div:last-child {
      border-bottom: 0
    }

    .schedule-list dt,
    .schedule-list dd {
      padding: 17px 23px;
      font-size: 14px;
      line-height: 1.95;
      margin: 0
    }

    .schedule-list dt {
      font-weight: 600;
      color: var(--forest);
      background: #edf4e6
    }

    .schedule-list dd {
      border-left: 1px solid var(--line);
      color: #64765d
    }

    .rates-layout {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 43px;
      align-items: start
    }

    .rates-layout>div {
      min-width: 0
    }

    .rates-table {
      border-color: #c4d3b9
    }

    .rates-table th {
      background: #4b6e45;
      color: #f5faef;
      border-color: #668360;
      font-size: 12px;
      padding: 16px 14px;
      white-space: nowrap
    }

    .rates-table td {
      font-size: 12px;
      padding: 23px 14px;
      white-space: nowrap;
      border-color: #d5e0cc
    }

    .rates-table td:first-child {
      font-size: 12px
    }

    .rates-table td:nth-child(3) {
      color: #3d6434;
      font-weight: 750;
      background: #e6efdd80
    }

    .source-note {
      font-size: 11px;
      color: #78896b;
      margin-top: 16px
    }

    .difficulty h3 {
      font-size: 19px
    }

    .difficulty p {
      font-size: 13px;
      line-height: 2;
      color: #607454;
      margin-bottom: 12px
    }

    .difficulty p:last-child {
      margin-bottom: 0
    }

    .course-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 18px
    }

    .course-card {
      grid-column: span 2;
      padding: 25px;
      border: 1px solid var(--line);
      background: var(--paper);
      border-radius: 9px
    }

    .course-card:nth-child(n+4) {
      grid-column: span 3
    }

    .course-number {
      font: 12px/1 Arial, sans-serif;
      color: #769262;
      display: block;
      margin-bottom: 20px
    }

    .course-card h3 {
      font-size: 18px;
      margin-bottom: 10px
    }

    .course-card p {
      font-size: 13px;
      line-height: 2;
      color: #687a60
    }

    .teachers {
      margin-top: 31px;
      padding-top: 26px;
      border-top: 1px solid var(--line)
    }

    .teachers>h3 {
      font-size: 18px;
      margin-bottom: 19px
    }

    .teachers .info-card {
      padding: 24px;
      background: transparent
    }

    .teachers .card-icon {
      width: 27px;
      height: 27px;
      margin-bottom: 17px
    }

    .teachers .info-card h3 {
      font-size: 16px;
      margin-bottom: 8px
    }

    .teachers .info-card p {
      font-size: 13px
    }

    .fees-table td:first-child {
      width: 28%
    }

    .fees-table td:nth-child(2) {
      width: 19%;
      color: var(--forest);
      font-weight: 700;
      white-space: nowrap
    }

    .training-fee {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 21px 25px;
      background: #e6efdc;
      border-radius: 7px;
      margin-top: 21px
    }

    .training-fee h3 {
      margin: 0;
      font-size: 17px
    }

    .training-fee .button {
      font-size: 14px;
      min-height: 43px;
      padding: 9px 22px
    }

    .employer-bar {
      display: flex;
      gap: 4px;
      height: 46px;
      border-radius: 5px;
      overflow: hidden;
      margin: 20px 0;
      font: 13px/1 Arial, sans-serif;
      color: #fff
    }

    .employer-bar span {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      background: #4b7552
    }

    .employer-bar span:nth-child(2) {
      background: #7e9d69
    }

    .employer-bar span:nth-child(3) {
      background: #a6b77d;
      color: #344b2e
    }

    .employer-bar span:nth-child(4) {
      background: #c7d3a6
    }

    .employer-legend {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 25px;
      margin-bottom: 30px
    }

    .employer-legend p {
      font-size: 13px;
      color: #687a60;
      line-height: 2;
      position: relative;
      padding-left: 15px
    }

    .employer-legend p:before {
      content: "";
      position: absolute;
      top: 10px;
      left: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4b7552
    }

    .employer-legend p:nth-child(2):before {
      background: #7e9d69
    }

    .employer-legend p:nth-child(3):before {
      background: #a6b77d
    }

    .salary-table td:first-child {
      width: 57%
    }

    .salary-table td:nth-child(2) {
      font-family: Arial, "Microsoft YaHei", sans-serif;
      color: #41663a;
      font-weight: 700
    }

    .salary-table tbody tr:first-child td:nth-child(2) {
      font-size: 23px;
      line-height: 1.55;
      color: #4d783f
    }

    .career-notes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 42px;
      margin-top: 31px
    }

    .career-notes>div+div {
      border-left: 1px solid #c9d9bf;
      padding-left: 34px
    }

    .career-notes h3 {
      font-size: 17px
    }

    .career-notes p {
      font-size: 13px;
      line-height: 2;
      color: #687a60;
      margin-bottom: 10px
    }

    .comparison-table td:first-child {
      width: 20%;
      white-space: nowrap
    }

    .comparison-table td {
      padding: 16px 21px;
      font-size: 13px
    }

    .promises {
      margin-top: 29px
    }

    .promises h3 {
      font-size: 18px
    }

    .promises ul {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 11px 28px
    }

    .promises li {
      display: flex;
      gap: 10px;
      font-size: 14px;
      color: #64795b
    }

    .promises li span {
      color: var(--green);
      font-size: 17px
    }

    .faq-list {
      border-top: 1px solid #c6d7ba
    }

    .faq-item {
      border-bottom: 1px solid #cdddc2
    }

    .faq-item summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style: none;
      cursor: pointer;
      padding: 24px 4px;
      gap: 25px;
      font-size: 16px;
      line-height: 1.9;
      font-weight: 600;
      color: var(--forest)
    }

    .faq-item summary::-webkit-details-marker {
      display: none
    }

    .faq-plus {
      position: relative;
      flex: none;
      width: 22px;
      height: 22px;
      border: 1px solid #b8cca8;
      border-radius: 50%
    }

    .faq-plus:before,
    .faq-plus:after {
      position: absolute;
      content: "";
      width: 10px;
      height: 1px;
      left: 5px;
      top: 9px;
      background: var(--green)
    }

    .faq-plus:after {
      transform: rotate(90deg);
      transition: transform .15s
    }

    .faq-item[open] .faq-plus:after {
      transform: rotate(0)
    }

    .faq-answer {
      padding: 0 43px 25px 4px;
      max-width: 1100px
    }

    .faq-answer p {
      font-size: 14px;
      line-height: 2.1;
      color: #667b5c
    }

    .consultation {
      padding-top: 73px;
      padding-bottom: 70px;
      background: linear-gradient(115deg, #dce9ce, #e8f1dd)
    }

    .consultation-layout {
      display: grid;
      grid-template-columns: .95fr 1.2fr;
      gap: 82px;
      align-items: start
    }

    .consultation-copy {
      font-size: 34px;
      font-weight: 650;
      line-height: 1.8;
      letter-spacing: .4px;
      max-width: 380px;
      color: var(--forest)
    }

    .contact-details {
      font-style: normal;
      font-size: 13px;
      line-height: 2;
      display: grid;
      gap: 12px;
      margin-top: 29px;
      color: #687d5b
    }

    .contact-details .contact-phone {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: .3px;
      color: #426238
    }

    .contact-details a:hover {
      color: var(--forest-deep)
    }

    .qr-block {
      display: flex;
      align-items: flex-end;
      gap: 21px;
      margin-top: 26px
    }

    .qr-block img {
      padding: 5px;
      border-radius: 5px;
      background: #fff
    }

    .qr-block p {
      font-size: 13px;
      color: #6b805f;
      border-bottom: 1px solid #becfb0;
      padding-bottom: 8px
    }

    .consultation-form {
      padding: 31px;
      background: #f9fcf4;
      border: 1px solid #d6e1cb;
      border-radius: 11px;
      color: var(--ink)
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px 18px
    }

    .form-grid label {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.8;
      color: #5a7050;
      min-width: 0
    }

    .full-field {
      grid-column: 1/-1
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea {
      display: block;
      width: 100%;
      min-width: 0;
      border: 1px solid #d6e1cc;
      background: #f1f6ea;
      color: #344c35;
      border-radius: 4px;
      min-height: 43px;
      padding: 9px 11px;
      font-size: 14px;
      line-height: 1.65;
      font-weight: 400
    }

    .form-grid textarea {
      resize: vertical;
      min-height: 86px
    }

    .form-grid select {
      padding-right: 5px
    }

    .form-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
      margin-top: 23px
    }

    .form-actions .button {
      flex: 1;
      white-space: nowrap;
      font-size: 13px;
      gap: 15px;
      min-height: 46px;
      padding: 11px 18px
    }

    .form-secondary {
      color: var(--forest);
      background: transparent;
      border: 1px solid #b5c9a5
    }

    .form-secondary:hover {
      background: #ecf3e3
    }

    .site-footer {
      background: #e4eed9;
      border-top: 1px solid #ccdcbf;
      color: #7a8e6b;
      font-size: 12px
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
      padding-top: 24px;
      padding-bottom: 24px
    }

    .site-footer .brand {
      font-size: 16px;
      font-weight: 600
    }

    .site-footer .brand-emblem {
      width: 32px;
      height: 32px;
      border-radius: 6px
    }

    .footer-inner>a:last-child {
      flex: none;
      display: grid;
      place-items: center;
      width: 33px;
      height: 33px;
      border: 1px solid #b5caa4;
      border-radius: 50%;
      font-size: 18px
    }

    .mobile-cta {
      display: none
    }

    .keep-phrase {
      display: inline-block;
      white-space: nowrap
    }

    .consultation-copy {
      max-width: none
    }

    .audience-item p {
      text-wrap: balance
    }

    @media(min-width:1600px) {
      .hero-stage {
        min-height: 500px
      }

      .hero-content {
        padding-top: 55px
      }

      .hero h1 {
        font-size: 64px
      }
    }

    @media(max-width:1220px) {
      .container {
        width: calc(100% - 72px)
      }

      .header-inner {
        gap: 23px
      }

      .brand {
        font-size: 18px
      }

      .desktop-nav {
        gap: 18px;
        font-size: 12px
      }

      .header-cta {
        gap: 13px;
        font-size: 12px;
        padding: 9px 13px
      }

      .stat {
        padding-left: 18px;
        padding-right: 18px
      }

      .stat strong {
        font-size: 28px
      }

      .stat.long-stat strong {
        font-size: 17px;
        line-height: 2.63
      }

      .rates-layout {
        gap: 30px;
        grid-template-columns: 1.12fr 1fr
      }

      .rates-table td,
      .rates-table th {
        padding-left: 11px;
        padding-right: 11px
      }

      .consultation-layout {
        gap: 50px
      }

      .consultation-copy {
        font-size: 30px
      }
    }

    @media(max-width:1020px) {
      .desktop-nav {
        display: none
      }

      .header-inner {
        min-height: 73px
      }

      .header-cta {
        margin-left: auto
      }

      .menu-toggle {
        display: block
      }

      .hero-stage {
        min-height: 425px
      }

      .hero h1 {
        font-size: 45px
      }

      .hero-title {
        font-size: 40px
      }

      .hero-fact {
        font-size: 12px;
        padding: 7px 12px
      }

      .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px 0;
        padding: 30px 0
      }

      .stat:nth-child(2) {
        border-right: 0
      }

      .stat strong {
        font-size: 31px
      }

      .stat.long-stat strong {
        font-size: 21px;
        line-height: 2.35
      }

      .section {
        padding: 62px 0
      }

      .section-heading h2 {
        font-size: 28px
      }

      .three-grid {
        gap: 15px
      }

      .info-card {
        padding: 24px 20px
      }

      .info-card h3 {
        font-size: 17px
      }

      .info-card p {
        font-size: 13px
      }

      .audience-layout {
        gap: 29px
      }

      .audience-item {
        padding-left: 43px
      }

      .audience-item p {
        font-size: 15px
      }

      .audience-photo {
        min-height: 345px
      }

      .exam-card {
        padding: 25px 20px
      }

      .exam-card h3 {
        font-size: 18px
      }

      .exam-english {
        font-size: 12px
      }

      .rates-layout {
        grid-template-columns: 1fr
      }

      .rates-table td,
      .rates-table th {
        padding: 19px 20px;
        font-size: 14px
      }

      .rates-table td:first-child {
        font-size: 14px
      }

      .difficulty {
        border-top: 1px solid #c0d2b0;
        padding-top: 25px
      }

      .difficulty p {
        font-size: 14px
      }

      .timeline-seven {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .timeline-seven li:last-child {
        grid-column: span 3
      }

      .course-card {
        padding: 23px
      }

      .teachers .info-card {
        padding: 20px
      }

      .teachers .info-card h3 {
        font-size: 15px
      }

      .consultation-layout {
        grid-template-columns: .9fr 1.15fr;
        gap: 35px
      }

      .consultation-copy {
        font-size: 27px
      }

      .contact-details .contact-phone {
        font-size: 18px
      }

      .consultation-form {
        padding: 26px 23px
      }

      .form-grid {
        grid-template-columns: 1fr
      }

      .form-actions .button {
        width: 100%;
        flex: auto
      }
    }

    @media(max-width:760px) {
      html {
        scroll-padding-top: 81px
      }

      .container {
        width: calc(100% - 40px)
      }

      .header-inner {
        min-height: 68px;
        gap: 13px
      }

      .brand {
        font-size: 17px;
        gap: 8px;
        letter-spacing: .4px
      }

      .brand-emblem {
        width: 33px;
        height: 33px
      }

      .header-cta {
        font-size: 11px;
        padding: 7px 10px;
        gap: 7px
      }

      .header-cta span {
        display: none
      }

      .menu-toggle {
        width: 34px;
        padding: 5px
      }

      .menu-toggle span {
        width: 21px
      }

      .hero-content {
        padding-top: 23px;
        padding-bottom: 24px
      }

      .hero-stage {
        min-height: 470px
      }

      .hero h1 {
        font-size: clamp(27px, 6.7vw, 39px);
        line-height: 1.7;
        letter-spacing: 0
      }

      .hero-title {
        font-size: clamp(26px, 6.4vw, 38px);
        line-height: 1.75;
        letter-spacing: .3px
      }

      .hero-subtitle {
        margin-top: 22px;
        gap: 9px;
        max-width: 450px
      }

      .hero-fact {
        font-size: 11px;
        padding: 7px 12px;
        letter-spacing: 0
      }

      .hero-secondary-line {
        font-size: 22px;
        line-height: 1.9;
        margin-top: 17px;
        letter-spacing: .5px
      }

      .hero-actions {
        gap: 11px;
        margin-top: 26px
      }

      .hero-actions .button {
        font-size: 13px;
        gap: 14px;
        padding: 12px 16px;
        min-height: 48px
      }

      .carousel-controls {
        gap: 15px;
        margin-top: 1px
      }

      .hero-decoration:before {
        right: -270px;
        top: -390px
      }

      .stats-grid {
        padding: 28px 0;
        gap: 26px 0
      }

      .stat {
        padding: 0 13px
      }

      .stat strong {
        font-size: 25px;
        letter-spacing: -.7px;
        line-height: 1.65
      }

      .stat.long-stat strong {
        font-size: 16px;
        white-space: normal;
        line-height: 1.75
      }

      .stat p {
        font-size: 11px;
        line-height: 1.85;
        margin-top: 8px
      }

      .section {
        padding: 48px 0
      }

      .section-heading {
        gap: 12px;
        margin-bottom: 25px
      }

      .section-index {
        width: 31px;
        height: 31px;
        font-size: 11px
      }

      .section-heading h2 {
        font-size: 24px;
        letter-spacing: .3px
      }

      .three-grid {
        grid-template-columns: 1fr;
        gap: 14px
      }

      .info-card {
        padding: 25px
      }

      .info-card h3 {
        font-size: 18px
      }

      .info-card p {
        font-size: 14px
      }

      .card-icon {
        width: 29px;
        height: 29px;
        margin-bottom: 17px
      }

      .notice {
        padding: 16px;
        gap: 10px;
        font-size: 12px;
        line-height: 2;
        margin-top: 20px
      }

      .audience-layout {
        grid-template-columns: 1fr;
        gap: 28px
      }

      .audience-item {
        padding: 21px 0 21px 42px
      }

      .audience-item p {
        font-size: 16px;
        line-height: 2
      }

      .audience-item .card-icon {
        top: 25px
      }

      .audience-item:first-child .card-icon {
        top: 8px
      }

      .audience-photo {
        height: 300px;
        min-height: 0
      }

      .requirements-intro h3 {
        font-size: 17px
      }

      .requirements-intro p {
        font-size: 13px
      }

      .requirements-intro+.notice {
        margin-bottom: 25px
      }

      h3 {
        font-size: 17px
      }

      th {
        font-size: 12px;
        padding: 12px 14px
      }

      td {
        font-size: 13px;
        padding: 15px 14px
      }

      .materials-table td:first-child {
        width: 28%
      }

      .process-subhead {
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 24px
      }

      .process-subhead h3:first-child {
        font-size: 11px
      }

      .process-subhead h3:last-child {
        font-size: 16px
      }

      .timeline,
      .timeline-seven {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 2px;
        padding-left: 16px
      }

      .timeline li {
        border-top: 0;
        border-left: 1px solid #bdd0af;
        padding: 0 0 28px 28px;
        min-height: 95px
      }

      .timeline li:last-child {
        border-left-color: transparent;
        padding-bottom: 0
      }

      .timeline-seven li:last-child {
        grid-column: auto
      }

      .step-number {
        top: 0;
        left: -16px;
        width: 31px;
        height: 31px;
        box-shadow: 0 0 0 5px var(--tint)
      }

      .timeline h3 {
        font-size: 16px;
        padding-top: 1px;
        margin-bottom: 7px
      }

      .timeline p {
        font-size: 13px
      }

      .exam-card {
        padding: 26px
      }

      .exam-number {
        font-size: 30px;
        margin-bottom: 18px
      }

      .exam-card h3 {
        font-size: 20px;
        margin-bottom: 17px
      }

      .exam-english {
        font-size: 13px;
        min-height: 0;
        margin-top: 5px
      }

      .exam-card p {
        font-size: 14px
      }

      .exam-card .exam-format {
        margin-top: 19px
      }

      .schedule-callout {
        padding: 19px 17px;
        gap: 16px;
        align-items: flex-start
      }

      .calendar-icon {
        font-size: 26px;
        padding: 14px 10px
      }

      .schedule-callout h3 {
        font-size: 16px
      }

      .schedule-callout p {
        font-size: 12px;
        line-height: 2
      }

      .schedule-list>div {
        grid-template-columns: 112px 1fr
      }

      .schedule-list dt,
      .schedule-list dd {
        font-size: 12px;
        padding: 14px 13px
      }

      .rates-table table {
        min-width: 530px
      }

      .rates-table th,
      .rates-table td {
        padding: 19px 13px
      }

      .rates-table td:first-child {
        font-size: 13px
      }

      .source-note {
        font-size: 11px
      }

      .difficulty h3 {
        font-size: 18px
      }

      .difficulty p {
        font-size: 13px
      }

      .course-grid {
        grid-template-columns: 1fr;
        gap: 14px
      }

      .course-card,
      .course-card:nth-child(n+4) {
        grid-column: auto;
        padding: 24px
      }

      .course-number {
        margin-bottom: 16px
      }

      .course-card h3 {
        font-size: 18px
      }

      .course-card p {
        font-size: 14px
      }

      .teachers {
        padding-top: 23px;
        margin-top: 26px
      }

      .teachers>h3 {
        font-size: 17px
      }

      .teachers .info-card {
        padding: 23px
      }

      .teachers .info-card h3 {
        font-size: 17px
      }

      .teachers .info-card p {
        font-size: 14px
      }

      .fees-table table {
        min-width: 610px
      }

      .fees-table th,
      .fees-table td {
        padding: 15px
      }

      .training-fee {
        padding: 18px
      }

      .training-fee h3 {
        font-size: 15px
      }

      .training-fee .button {
        font-size: 12px;
        padding: 9px 13px;
        gap: 15px
      }

      .employer-bar {
        height: 38px;
        gap: 3px;
        font-size: 11px
      }

      .employer-legend {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 25px
      }

      .employer-legend p {
        font-size: 13px
      }

      .salary-table table {
        min-width: 590px
      }

      .salary-table tbody tr:first-child td:nth-child(2) {
        font-size: 20px
      }

      .career-notes {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 25px
      }

      .career-notes>div+div {
        border-left: 0;
        border-top: 1px solid #c9d9bf;
        padding: 23px 0 0
      }

      .career-notes h3 {
        font-size: 17px
      }

      .comparison-table table {
        min-width: 610px
      }

      .comparison-table td:first-child {
        width: 20%
      }

      .comparison-table td {
        font-size: 13px;
        padding: 15px
      }

      .promises h3 {
        font-size: 17px
      }

      .promises ul {
        grid-template-columns: 1fr;
        gap: 10px
      }

      .promises li {
        font-size: 13px
      }

      .faq-item summary {
        font-size: 14px;
        line-height: 2;
        padding: 21px 2px;
        gap: 15px
      }

      .faq-plus {
        width: 21px;
        height: 21px
      }

      .faq-plus:before,
      .faq-plus:after {
        width: 9px;
        left: 5px;
        top: 9px
      }

      .faq-answer {
        padding: 0 20px 22px 2px
      }

      .faq-answer p {
        font-size: 13px;
        line-height: 2.1
      }

      .consultation {
        padding-top: 48px;
        padding-bottom: 43px
      }

      .consultation-layout {
        grid-template-columns: 1fr;
        gap: 30px
      }

      .consultation-copy {
        font-size: 28px;
        max-width: none;
        line-height: 1.9
      }

      .contact-details {
        margin-top: 21px;
        gap: 9px;
        font-size: 13px
      }

      .contact-details .contact-phone {
        font-size: 20px
      }

      .qr-block {
        margin-top: 22px
      }

      .qr-block img {
        width: 114px;
        height: auto
      }

      .consultation-form {
        padding: 24px 21px
      }

      .form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px 13px
      }

      .form-grid label {
        font-size: 11px
      }

      .form-grid input,
      .form-grid select,
      .form-grid textarea {
        min-height: 44px;
        padding: 9px;
        font-size: 14px
      }

      .form-actions .button {
        width: auto;
        flex: 1;
        font-size: 12px;
        padding: 11px 12px;
        gap: 9px
      }

      .footer-inner {
        padding-top: 23px;
        padding-bottom: 24px;
        gap: 14px;
        flex-wrap: wrap
      }

      .site-footer .brand {
        font-size: 15px
      }

      .footer-inner>span {
        order: 3;
        flex-basis: 100%;
        font-size: 10px
      }

      .footer-inner>a:last-child {
        margin-left: auto
      }

      .site-footer {
        padding-bottom: 64px
      }

      .mobile-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 35;
        background: #f0f6e7;
        color: var(--forest);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -3px 12px #34552b13;
        border-top: 1px solid #cadcbb
      }

      .mobile-cta a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 57px;
        font-size: 11px;
        font-weight: 600
      }

      .mobile-cta a:last-child {
        background: var(--green);
        color: #fff
      }

      .mobile-cta a span {
        font-size: 18px
      }
    }

    @media(max-width:375px) {
      .container {
        width: calc(100% - 32px)
      }

      .brand {
        font-size: 15px
      }

      .brand-emblem {
        width: 29px;
        height: 29px
      }

      .header-inner {
        gap: 8px
      }

      .header-cta {
        font-size: 10px;
        padding: 6px 8px
      }

      .hero h1 {
        font-size: 26px
      }

      .hero-title {
        font-size: 25px
      }

      .hero-actions .button {
        font-size: 12px;
        padding: 11px 12px;
        gap: 9px
      }

      .stat {
        padding: 0 10px
      }

      .stat strong {
        font-size: 23px
      }

      .stat.long-stat strong {
        font-size: 15px
      }

      .form-grid {
        grid-template-columns: 1fr
      }

      .form-actions {
        flex-direction: column;
        align-items: stretch
      }

      .form-actions .button {
        width: 100%
      }

      .section-heading h2 {
        font-size: 22px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      *,
      *:before,
      *:after {
        transition: none !important;
        animation: none !important
      }
    }

    @media print {

      .site-header,
      .mobile-cta,
      .hero-actions,
      .carousel-controls,
      .consultation-form,
      .site-footer {
        display: none !important
      }

      .container {
        width: 100%
      }

      .section {
        padding: 25px 0
      }

      .hero {
        min-height: 280px;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact
      }

      .hero-content {
        padding: 20px 0
      }

      .hero-stage {
        min-height: 260px
      }

      .hero h1 {
        font-size: 30px
      }

      .table-scroll {
        overflow: visible
      }

      table {
        min-width: 0 !important
      }

      details:not([open]) .faq-answer {
        display: block
      }

      .consultation-layout {
        grid-template-columns: 1fr
      }

      .section-heading {
        break-after: avoid
      }

      .info-card,
      .exam-card,
      tr,
      .faq-item {
        break-inside: avoid
      }

      .hero-slide[hidden] {
        display: none !important
      }
    }

    /* 紧凑排版：收紧留白、卡片和表格间距，保留正文内容。 */
    @media screen {
      :root {
        --container: 1240px
      }

      html {
        scroll-padding-top: 84px
      }

      body {
        line-height: 1.75
      }

      .container {
        width: calc(100% - 80px)
      }

      .header-inner {
        min-height: 70px;
        gap: 24px
      }

      .desktop-nav a {
        padding: 21px 0
      }

      .desktop-nav a:after {
        bottom: 14px
      }

      .hero-content {
        padding-top: 24px;
        padding-bottom: 18px
      }

      .hero-stage {
        min-height: 330px
      }

      .hero h1 {
        font-size: clamp(36px, 3.65vw, 52px);
        line-height: 1.42
      }

      .hero-title {
        font-size: clamp(34px, 3.4vw, 48px);
        line-height: 1.45
      }

      .hero-subtitle {
        margin-top: 18px;
        gap: 8px
      }

      .hero-fact {
        padding: 5px 12px
      }

      .hero-secondary-line {
        font-size: 25px;
        line-height: 1.65;
        margin-top: 12px
      }

      .hero-actions {
        margin-top: 22px;
        gap: 13px
      }

      .button {
        min-height: 46px;
        padding: 10px 23px;
        gap: 22px
      }

      .carousel-controls {
        margin-top: 2px;
        gap: 14px
      }

      .stats-grid {
        padding: 23px 0
      }

      .stat {
        padding: 0 18px
      }

      .stat strong {
        font-size: 30px;
        line-height: 1.5
      }

      .stat.long-stat strong {
        font-size: 20px;
        line-height: 2.25
      }

      .stat p {
        line-height: 1.7;
        margin-top: 5px
      }

      .section,
      .consultation {
        padding: 43px 0
      }

      .section-heading {
        gap: 13px;
        margin-bottom: 22px
      }

      .section-heading h2 {
        font-size: 27px;
        line-height: 1.4;
        letter-spacing: .4px
      }

      .section-index {
        width: 32px;
        height: 32px;
        font-size: 11px
      }

      h3 {
        margin-bottom: 9px;
        line-height: 1.6
      }

      .three-grid {
        gap: 16px
      }

      .info-card {
        padding: 21px 22px;
        border-radius: 8px
      }

      .card-icon {
        width: 29px;
        height: 29px;
        margin-bottom: 13px
      }

      .info-card h3 {
        font-size: 18px;
        margin-bottom: 8px
      }

      .info-card p {
        line-height: 1.8
      }

      .notice {
        padding: 12px 16px;
        margin-top: 15px;
        gap: 10px;
        line-height: 1.8
      }

      .notice-icon {
        margin-top: 3px
      }

      .audience-layout {
        gap: 30px
      }

      .audience-item {
        padding: 17px 0 17px 44px
      }

      .audience-item .card-icon {
        top: 20px;
        width: 26px;
        height: 26px
      }

      .audience-item:first-child .card-icon {
        top: 7px
      }

      .audience-item p {
        font-size: 16px;
        line-height: 1.8
      }

      .audience-photo {
        min-height: 230px
      }

      .requirements-intro p {
        margin-top: 6px;
        line-height: 1.8
      }

      .requirements-intro+.notice {
        margin-bottom: 20px
      }

      table {
        line-height: 1.75
      }

      th {
        padding: 10px 16px;
        line-height: 1.65
      }

      td {
        padding: 11px 16px
      }

      .process-subhead {
        margin-bottom: 19px;
        gap: 15px
      }

      .timeline {
        gap: 27px 26px;
        padding-top: 11px
      }

      .timeline li {
        padding-top: 24px
      }

      .step-number {
        width: 27px;
        height: 27px;
        top: -14px;
        box-shadow: 0 0 0 5px var(--tint)
      }

      .timeline h3 {
        font-size: 15px;
        margin-bottom: 6px
      }

      .timeline p {
        line-height: 1.8
      }

      .timeline-seven {
        gap: 28px 22px
      }

      .exam-card {
        padding: 21px 22px
      }

      .exam-number {
        font-size: 27px;
        margin-bottom: 13px
      }

      .exam-card h3 {
        font-size: 18px;
        line-height: 1.55;
        margin-bottom: 13px
      }

      .exam-english {
        margin-top: 5px;
        min-height: 32px;
        line-height: 1.55
      }

      .exam-card p {
        line-height: 1.85
      }

      .exam-card .exam-format {
        padding-top: 11px;
        margin-top: 14px
      }

      .schedule-callout {
        padding: 15px 20px;
        gap: 18px
      }

      .calendar-icon {
        font-size: 28px;
        padding: 11px
      }

      .schedule-callout h3 {
        font-size: 17px;
        margin-bottom: 4px
      }

      .schedule-list dt,
      .schedule-list dd {
        padding: 11px 17px;
        line-height: 1.8
      }

      .rates-layout {
        gap: 30px
      }

      .rates-table th,
      .rates-table td {
        padding: 13px 14px
      }

      .source-note {
        margin-top: 10px
      }

      .difficulty h3 {
        font-size: 18px;
        margin-bottom: 10px
      }

      .difficulty p {
        line-height: 1.8;
        margin-bottom: 9px
      }

      .course-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 13px
      }

      .course-card,
      .course-card:nth-child(n+4) {
        grid-column: auto;
        padding: 18px
      }

      .course-number {
        margin-bottom: 12px
      }

      .course-card h3 {
        font-size: 17px;
        margin-bottom: 8px
      }

      .course-card p {
        line-height: 1.8
      }

      .teachers {
        margin-top: 22px;
        padding-top: 20px
      }

      .teachers>h3 {
        font-size: 17px;
        margin-bottom: 14px
      }

      .teachers .info-card {
        padding: 18px
      }

      .teachers .card-icon {
        width: 25px;
        height: 25px;
        margin-bottom: 11px
      }

      .teachers .info-card h3 {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 7px
      }

      .teachers .info-card p {
        line-height: 1.8
      }

      .training-fee {
        padding: 14px 18px;
        margin-top: 15px
      }

      .training-fee h3 {
        font-size: 16px
      }

      .training-fee .button {
        min-height: 39px;
        padding: 8px 17px
      }

      .employer-bar {
        height: 36px;
        margin: 14px 0
      }

      .employer-legend {
        gap: 20px;
        margin-bottom: 20px
      }

      .employer-legend p {
        line-height: 1.8
      }

      .employer-legend p:before {
        top: 9px
      }

      .salary-table tbody tr:first-child td:nth-child(2) {
        font-size: 21px
      }

      .career-notes {
        gap: 30px;
        margin-top: 22px
      }

      .career-notes>div+div {
        padding-left: 26px
      }

      .career-notes h3 {
        font-size: 16px;
        margin-bottom: 9px
      }

      .career-notes p {
        line-height: 1.8;
        margin-bottom: 7px
      }

      .comparison-table td {
        padding: 10px 16px
      }

      .promises {
        margin-top: 20px
      }

      .promises h3 {
        font-size: 17px;
        margin-bottom: 10px
      }

      .promises ul {
        gap: 8px 24px
      }

      .faq-item summary {
        padding: 15px 4px;
        font-size: 15px;
        line-height: 1.75;
        gap: 20px
      }

      .faq-answer {
        padding: 0 36px 17px 4px
      }

      .faq-answer p {
        line-height: 1.85
      }

      .consultation-layout {
        gap: 52px;
        grid-template-columns: .9fr 1.25fr
      }

      .consultation-copy {
        font-size: 29px;
        line-height: 1.65
      }

      .contact-details {
        gap: 9px;
        margin-top: 20px;
        line-height: 1.8
      }

      .contact-details .contact-phone {
        font-size: 20px
      }

      .qr-block {
        gap: 17px;
        margin-top: 20px
      }

      .qr-block img {
        width: 120px;
        height: auto
      }

      .consultation-form {
        padding: 23px
      }

      .form-grid {
        gap: 11px 15px
      }

      .form-grid label {
        gap: 4px
      }

      .form-grid input,
      .form-grid select,
      .form-grid textarea {
        min-height: 39px;
        padding: 7px 10px
      }

      .form-grid textarea {
        min-height: 66px
      }

      .form-actions {
        gap: 11px;
        margin-top: 16px
      }

      .form-actions .button {
        min-height: 42px;
        padding: 9px 16px
      }

      .footer-inner {
        padding-top: 17px;
        padding-bottom: 17px
      }
    }

    @media screen and (min-width:1600px) {
      .hero-stage {
        min-height: 350px
      }

      .hero-content {
        padding-top: 27px
      }

      .hero h1 {
        font-size: 56px
      }
    }

    @media screen and (max-width:1240px) {
      .container {
        width: calc(100% - 64px)
      }

      .stat strong {
        font-size: 27px
      }

      .stat.long-stat strong {
        font-size: 17px;
        line-height: 2.38
      }

      .course-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 14px
      }

      .course-card {
        grid-column: span 2
      }

      .course-card:nth-child(n+4) {
        grid-column: span 3
      }

      .consultation-layout {
        gap: 34px
      }
    }

    @media screen and (max-width:1020px) {
      .header-inner {
        min-height: 66px
      }

      .hero-stage {
        min-height: 310px
      }

      .hero h1 {
        font-size: 40px
      }

      .hero-title {
        font-size: 37px
      }

      .stats-grid {
        padding: 21px 0;
        gap: 19px 0
      }

      .stat.long-stat strong {
        font-size: 20px;
        line-height: 2.02
      }

      .section,
      .consultation {
        padding: 37px 0
      }

      .section-heading h2 {
        font-size: 26px
      }

      .info-card {
        padding: 19px
      }

      .info-card h3 {
        font-size: 17px
      }

      .audience-photo {
        min-height: 228px
      }

      .rates-layout {
        gap: 20px
      }

      .difficulty {
        padding-top: 18px
      }

      .teachers .info-card {
        padding: 16px
      }

      .consultation-copy {
        font-size: 25px
      }

      .consultation-layout {
        gap: 27px;
        grid-template-columns: .9fr 1.15fr
      }

      .consultation-form {
        padding: 20px
      }

      .contact-details .contact-phone {
        font-size: 18px
      }
    }

    @media screen and (max-width:760px) {
      html {
        scroll-padding-top: 74px
      }

      .container {
        width: calc(100% - 32px)
      }

      .header-inner {
        min-height: 62px;
        gap: 12px
      }

      .hero-content {
        padding-top: 17px;
        padding-bottom: 15px
      }

      .hero-stage {
        min-height: 325px
      }

      .hero h1 {
        font-size: clamp(26px, 6.55vw, 37px);
        line-height: 1.55
      }

      .hero-title {
        font-size: clamp(25px, 6.2vw, 35px);
        line-height: 1.6
      }

      .hero-subtitle {
        margin-top: 16px;
        gap: 7px
      }

      .hero-fact {
        font-size: 11px;
        padding: 5px 9px
      }

      .hero-secondary-line {
        font-size: 21px;
        line-height: 1.7;
        margin-top: 13px
      }

      .hero-actions {
        margin-top: 19px;
        gap: 10px
      }

      .hero-actions .button {
        min-height: 44px;
        padding: 10px 14px;
        gap: 12px
      }

      .carousel-controls {
        margin-top: 0;
        gap: 13px
      }

      .stats-grid {
        padding: 21px 0;
        gap: 19px 0
      }

      .stat {
        padding: 0 9px
      }

      .stat strong {
        font-size: 24px;
        line-height: 1.55
      }

      .stat.long-stat strong {
        font-size: 15px;
        line-height: 1.6;
        text-wrap: balance
      }

      .stat p {
        font-size: 11px;
        line-height: 1.65;
        margin-top: 6px
      }

      .section,
      .consultation {
        padding: 31px 0
      }

      .section-heading {
        gap: 10px;
        margin-bottom: 18px
      }

      .section-heading h2 {
        font-size: 23px;
        line-height: 1.45
      }

      .section-index {
        width: 29px;
        height: 29px
      }

      .three-grid {
        gap: 12px
      }

      .info-card,
      .teachers .info-card {
        display: grid;
        grid-template-columns: 27px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 7px;
        padding: 18px
      }

      .info-card .card-icon,
      .teachers .card-icon {
        grid-column: 1;
        grid-row: 1/3;
        width: 26px;
        height: 26px;
        margin: 3px 0 0
      }

      .info-card h3,
      .teachers .info-card h3 {
        grid-column: 2;
        font-size: 17px;
        margin: 0;
        line-height: 1.6
      }

      .info-card p,
      .teachers .info-card p {
        grid-column: 2;
        font-size: 14px;
        line-height: 1.8
      }

      .notice {
        padding: 11px 13px;
        gap: 9px;
        font-size: 12px;
        line-height: 1.8;
        margin-top: 14px
      }

      .audience-layout {
        gap: 19px
      }

      .audience-item {
        padding: 15px 0 15px 38px
      }

      .audience-item .card-icon {
        top: 18px;
        width: 24px;
        height: 24px
      }

      .audience-item:first-child .card-icon {
        top: 8px
      }

      .audience-item p {
        font-size: 15px;
        line-height: 1.8
      }

      .audience-photo {
        height: 160px;
        min-height: 0
      }

      .requirements-intro h3 {
        font-size: 16px;
        line-height: 1.65
      }

      .requirements-intro p {
        line-height: 1.8
      }

      .requirements-intro+.notice {
        margin-bottom: 18px
      }

      th {
        padding: 10px 12px
      }

      td {
        padding: 11px 12px
      }

      .process-subhead {
        margin-bottom: 18px;
        gap: 11px
      }

      .timeline,
      .timeline-seven {
        gap: 0;
        padding-top: 2px;
        padding-left: 14px
      }

      .timeline li {
        padding: 0 0 20px 24px;
        min-height: 0
      }

      .step-number {
        top: 0;
        left: -14px;
        width: 27px;
        height: 27px;
        font-size: 10px;
        box-shadow: 0 0 0 4px var(--tint)
      }

      .timeline h3 {
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 5px
      }

      .timeline p {
        font-size: 13px;
        line-height: 1.8
      }

      .exam-card {
        display: grid;
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 0 12px;
        padding: 19px
      }

      .exam-number {
        grid-column: 1;
        grid-row: 1;
        font-size: 24px;
        margin-top: 4px;
        margin-bottom: 0
      }

      .exam-card h3 {
        grid-column: 2;
        grid-row: 1;
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 13px
      }

      .exam-english {
        min-height: 0;
        font-size: 12px;
        line-height: 1.6;
        margin-top: 4px
      }

      .exam-card>p {
        grid-column: 1/-1;
        font-size: 14px;
        line-height: 1.8
      }

      .exam-card .exam-format {
        margin-top: 12px;
        padding-top: 10px
      }

      .schedule-callout {
        padding: 14px 13px;
        gap: 13px
      }

      .calendar-icon {
        font-size: 24px;
        padding: 10px 9px
      }

      .schedule-callout h3 {
        font-size: 15px
      }

      .schedule-callout p {
        font-size: 12px;
        line-height: 1.8
      }

      .schedule-list>div {
        grid-template-columns: 106px 1fr
      }

      .schedule-list dt,
      .schedule-list dd {
        padding: 11px 12px;
        font-size: 12px;
        line-height: 1.8
      }

      .rates-layout {
        gap: 18px
      }

      .rates-table th,
      .rates-table td {
        padding: 12px
      }

      .difficulty p {
        font-size: 13px;
        line-height: 1.8
      }

      .course-grid {
        grid-template-columns: 1fr;
        gap: 11px
      }

      .course-card,
      .course-card:nth-child(n+4) {
        grid-column: auto;
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 5px 11px;
        padding: 17px
      }

      .course-number {
        grid-column: 1;
        grid-row: 1/3;
        margin: 5px 0 0
      }

      .course-card h3 {
        grid-column: 2;
        font-size: 17px;
        line-height: 1.6;
        margin: 0
      }

      .course-card p {
        grid-column: 2;
        font-size: 14px;
        line-height: 1.8
      }

      .teachers {
        padding-top: 18px;
        margin-top: 20px
      }

      .teachers>h3 {
        font-size: 17px;
        margin-bottom: 13px
      }

      .fees-table th,
      .fees-table td {
        padding: 11px 13px
      }

      .training-fee {
        padding: 12px 14px;
        margin-top: 14px
      }

      .training-fee h3 {
        font-size: 15px
      }

      .training-fee .button {
        min-height: 38px;
        padding: 8px 12px;
        font-size: 12px
      }

      .employer-bar {
        height: 32px;
        margin: 12px 0
      }

      .employer-legend {
        gap: 8px;
        margin-bottom: 18px
      }

      .employer-legend p {
        line-height: 1.8
      }

      .career-notes {
        gap: 16px;
        margin-top: 19px
      }

      .career-notes>div+div {
        padding: 17px 0 0
      }

      .career-notes h3 {
        font-size: 16px
      }

      .comparison-table td {
        padding: 11px 13px
      }

      .promises {
        margin-top: 18px
      }

      .promises ul {
        gap: 7px
      }

      .faq-item summary {
        font-size: 14px;
        line-height: 1.8;
        padding: 14px 2px;
        gap: 14px
      }

      .faq-answer {
        padding: 0 17px 16px 2px
      }

      .faq-answer p {
        line-height: 1.85
      }

      .consultation-layout {
        grid-template-columns: 1fr;
        gap: 23px
      }

      .consultation-copy {
        font-size: 26px;
        line-height: 1.65
      }

      .contact-details {
        gap: 8px;
        margin-top: 16px;
        line-height: 1.8
      }

      .contact-details .contact-phone {
        font-size: 19px
      }

      .qr-block {
        gap: 16px;
        margin-top: 17px
      }

      .qr-block img {
        width: 100px
      }

      .consultation-form {
        padding: 18px
      }

      .form-grid {
        gap: 11px 13px
      }

      .form-grid label {
        gap: 5px
      }

      .form-grid input,
      .form-grid select,
      .form-grid textarea {
        min-height: 42px;
        padding: 8px 9px
      }

      .form-grid textarea {
        min-height: 68px
      }

      .form-actions {
        gap: 10px;
        margin-top: 15px
      }

      .form-actions .button {
        padding: 10px 11px;
        min-height: 44px;
        gap: 9px
      }

      .footer-inner {
        padding-top: 17px;
        padding-bottom: 17px;
        gap: 12px
      }

      .mobile-cta a {
        min-height: 53px
      }

      .site-footer {
        padding-bottom: 57px
      }
    }

    @media screen and (max-width:375px) {
      .hero h1 {
        font-size: 25px
      }

      .hero-title {
        font-size: 24px
      }

      .hero-actions .button {
        font-size: 12px;
        padding: 10px 12px;
        gap: 10px
      }

      .stat strong {
        font-size: 22px
      }

      .stat.long-stat strong {
        font-size: 15px
      }

      .section-heading h2 {
        font-size: 22px
      }
    }