@charset "utf-8";

/* ========================================================================== 
   共用設定
   ========================================================================== */
:root {
  --activity-font-sans:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang TC",
    "Microsoft JhengHei",
    "Noto Sans TC",
    sans-serif;
  --activity-stage-width: 1920;
  --activity-hero-height: 1059;
  --activity-sky: #9be9f5;
  --activity-focus: #ffea00;
}

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

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: #333;
  background: var(--activity-sky);
  font-family: var(--activity-font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

/* ========================================================================== 
   全站活動主選單
   ========================================================================== */
.has-activity-nav {
  padding-top: 50px;
}

.activity-site-nav {
  z-index: 2000;
  min-height: 50px;
  padding: 0;
  background: linear-gradient(to bottom, #fff 0%, #fff 10%, #dafef9 100%);
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
}

.activity-site-nav__inner {
  width: min(100%, 1400px);
  min-height: 50px;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.activity-site-nav__brand {
  display: flex;
  height: 50px;
  align-items: center;
  margin: 0;
  padding: 5px 0;
}

.activity-site-nav__brand img {
  display: block;
  width: auto;
  max-width: min(32vw, 320px);
  height: 40px;
}

.activity-site-nav__list .nav-link {
  display: flex;
  min-width: 9rem;
  height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  color: #155f60;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  transition: color .2s ease, background-color .2s ease;
}

.activity-site-nav__list .nav-link:hover,
.activity-site-nav__list .nav-link:focus-visible {
  color: #fff;
  background-color: #1b7c7c;
}

.activity-site-nav__list .nav-link.active {
  color: #fff;
  background-color: #006d6c;
}

.activity-site-nav__list .nav-link:focus-visible {
  outline: 3px solid var(--activity-focus);
  outline-offset: -3px;
}

.activity-site-nav__toggler {
  border: 2px solid #1b7c7c;
  padding: .25rem .45rem;
}

.activity-site-nav__toggler:focus {
  box-shadow: 0 0 0 .2rem rgb(27 124 124 / 30%);
}

@media (max-width: 767.98px) {
  .has-activity-nav { padding-top: 58px; }

  .activity-site-nav,
  .activity-site-nav__inner { min-height: 58px; }

  .activity-site-nav__inner {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .activity-site-nav__brand {
    height: 58px;
    padding: 8px 0;
  }

  .activity-site-nav__brand img {
    max-width: min(70vw, 270px);
    height: 38px;
  }

  .activity-site-nav__collapse {
    margin-right: -1rem;
    margin-left: -1rem;
    background: #fff;
    box-shadow: 0 6px 10px rgb(0 0 0 / 18%);
  }

  .activity-site-nav__list .nav-link {
    width: 100%;
    min-width: 0;
    height: 60px;
    border-top: 1px solid #c9e5e2;
    font-size: 1.25rem;
  }
}

main {
  position: relative;
  width: 100%;
}

img {
  display: block;
}

a {
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  color: #fff;
  background: #075ea8;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  color: #fff;
  outline: 3px solid var(--activity-focus);
  transform: translateY(0);
}

.activity-layer {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ========================================================================== 
   01 主視覺區（Figma 可視舞台：1920 × 1059）
   ========================================================================== */
.hero-section {
  position: relative;
  z-index: 2;
  overflow: visible;
  background: var(--activity-sky);
}

.hero-animate-stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 1000;
  overflow: visible;
  isolation: isolate;
}

.hero-animate-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero-animate-grass-left,
.hero-animate-grass-right {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.hero-animate-grass-left {
  bottom: -12.5%;
  left: 0;
  width: 12%;
}

.hero-animate-grass-right {
  right: 0;
  bottom: -12.5%;
  width: 13%;
}

.hero-static-stage {
  display: none;
}

.hero-stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 1000;
  overflow: visible;
  isolation: isolate;
}

.hero-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("../images/source/home-bg-full.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  pointer-events: none;
}

.hero-title {
  position: absolute;
  z-index: 5;
  top: 6.33%;
  left: 20.47%;
  width: 55.16%;
  margin: 0;
  transform-origin: 50% 65%;
  animation: hero-title-bounce 1.15s cubic-bezier(0.22, 0.8, 0.28, 1) 0.12s both;
}

.hero-title img {
  width: 100%;
  height: auto;
}

.hero-bird {
  z-index: 6;
  top: 7.35%;
  left: 63.71%;
  width: 8.14%;
  animation: hero-bird-arrive 0.65s ease-out 0.62s both;
}

.hero-station {
  z-index: 3;
  top: 30.84%;
  left: 68.96%;
  width: 21.85%;
}

.hero-station-building {
  width: 100%;
  height: auto;
}

.hero-station-board {
  position: absolute;
  z-index: 2;
  right: 15%;
  bottom: -24%;
  width: 60%;
  height: auto;
  transform-origin: 50% 100%;
}

.hero-grass {
  z-index: 2;
}

.hero-grass-left {
  bottom: -12.5%;
  left: 0;
  width: 12%;
}

.hero-grass-right {
  right: 0;
  bottom: -8.5%;
  width: 16%;
}

.hero-character {
  z-index: 4;
  pointer-events: auto;
  transform-origin: 50% 100%;
  animation-name: hero-character-pop;
  animation-duration: 0.78s;
  animation-timing-function: cubic-bezier(0.2, 0.82, 0.25, 1.16);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.hero-character-orange {
  top: 50.81%;
  left: 27.34%;
  width: 13.08%;
  animation-delay: 0.4s;
}

.hero-character-green {
  z-index: 5;
  top: 39.83%;
  left: 39.88%;
  width: 19.48%;
  animation-delay: 0.28s;
}

.hero-character-pink {
  top: 52.08%;
  left: 58.38%;
  width: 10.81%;
  animation-delay: 0.52s;
}

.hero-character:hover {
  animation-name: hero-character-pop, hero-character-hover-zoom;
  animation-duration: 0.78s, 0.52s;
  animation-timing-function:
    cubic-bezier(0.2, 0.82, 0.25, 1.16),
    cubic-bezier(0.22, 0.82, 0.3, 1.2);
  animation-delay: 0s, 0s;
  animation-iteration-count: 1, 1;
  animation-fill-mode: both, none;
}

@keyframes hero-character-pop {
  0% {
    opacity: 0;
    transform: translateY(24%) scale(0.08);
  }
  66% {
    opacity: 1;
    transform: translateY(-2%) scale(1.15);
  }
  84% {
    transform: translateY(1%) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hero-character-hover-zoom {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-1.5%) scale(1.075);
  }
}

@keyframes hero-title-bounce {
  0% {
    opacity: 0;
    transform: translateY(-10%) scale(0.88);
  }
  52% {
    opacity: 1;
    transform: translateY(0) scale(1.035);
  }
  68% {
    transform: translateY(-2.5%) scale(1);
  }
  82% {
    transform: translateY(0.8%) scale(1);
  }
  92% {
    transform: translateY(-0.7%) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hero-bird-arrive {
  0% {
    opacity: 0;
    transform: translateY(-18%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========================================================================== 
   02 學習補給站介紹（PC 舞台：1920 × 615）
   ========================================================================== */
.welcome-section {
  position: relative;
  z-index: 1;
  overflow: visible;
  background: #8198e8;
}

.welcome-stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 615;
  overflow: visible;
}

.welcome-background-clip {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.welcome-background-clip::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30%;
  background: #86deee;
  content: "";
}

.welcome-background-image {
  position: absolute;
  top: -172.2%;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.welcome-title {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 27.76%;
  width: 44.43%;
  margin: 0;
}

.welcome-title img {
  width: 100%;
  height: auto;
}

.welcome-message {
  position: absolute;
  z-index: 2;
  top: 34%;
  left: 21.9%;
  width: 53.65%;
  aspect-ratio: 1640 / 617;
}

.welcome-message-picture,
.welcome-message-cloud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 94%;
}

.welcome-message-cloud {
  pointer-events: none;
  user-select: none;
}

.welcome-message p {
  position: absolute;
  z-index: 1;
  top: 21%;
  right: 16.5%;
  left: 16.5%;
  margin: 0;
  color: #3f3f3f;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.015em;
}

.welcome-character {
  position: absolute;
  z-index: 4;
  top: 58%;
  left: 12.8%;
  width: 10.8%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ========================================================================== 
   03 身分限定活動（PC 舞台：1920 × 1155）
   ========================================================================== */
.benefits-section {
  position: relative;
  background: #869dee;
}

.section-transition {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 1920px;
  height: auto;
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
}

.section-transition-top { background: #86deee; }
.section-transition-bottom { background: #8198e8; }

.benefits-layout.container-xxl {
  position: relative;
  z-index: 2;
  max-width: 1500px;
  padding-top: 2.5rem;
  padding-bottom: clamp(6rem, 8vw, 9.5rem);
}

.benefits-title {
  position: relative;
  z-index: 4;
  width: min(50%, 900px);
  margin: 0 auto;
}

.benefits-title img {
  width: 100%;
  height: auto;
}

.benefits-copy {
  position: relative;
  z-index: 2;
  width: 70%;
  min-height: 5.5rem;
  margin: -0.2rem auto 0;
  padding: 1.25rem 1.5rem 1.25rem 5rem;
  border-radius: 999px;
  background: #fff;
  transform: rotate(-2.07deg);
  transform-origin: 50% 50%;
}

.benefits-copy::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 3px solid #fff;
  border-radius: inherit;
  content: "";
  transform: translate(14px, 18px);
}

.benefits-copy p {
  margin: 0;
  color: #333;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
}

.benefits-copy strong {
  font-size: 120%;
  margin-right: 0.35em;
  color: #d41469;
  font-weight: 800;
}

.benefits-copy-wrap {
  position: relative;
  z-index: 3;
  min-height: 8rem;
}

.benefits-guide {
  position: absolute;
  z-index: 4;
  bottom: 3rem;
  left: 14%;
  width: 11.5%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.activity-card {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  border-radius: 1.5rem;
  transform-origin: 50% 50%;
  transition: transform 0.25s ease;
}

.benefits-cards-row {
  margin-top: 5.25rem;
}

.activity-card-column {
  position: relative;
}

.activity-card-art {
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  animation: activity-card-attention 8s ease-in-out infinite;
  transition: filter 0.25s ease;
}

.activity-card-school .activity-card-art {
  animation-delay: 2s;
}

.activity-card-character {
  position: absolute;
  z-index: 2;
  top: 34%;
  left: 78%;
  width: 27%;
  height: auto;
  pointer-events: none;
  transform-origin: 50% 100%;
}

.activity-card-character-green {
  top: 36%;
  left: 75%;
  width: 36%;;
}

/* ========================================================================== 
   04 AI 活動挑戰賽
   ========================================================================== */
.rewards-section {
  position: relative;
  overflow: hidden;
  background: #86deee url("../images/section04-bg.png") center top / cover no-repeat;
}

.rewards-layout.container-xxl {
  position: relative;
  max-width: 1500px;
  padding-top: 3.5rem;
  padding-bottom: 6rem;
}

.rewards-heading-wrap {
  position: relative;
}

.rewards-title {
  width: min(50%, 900px);
  margin: 0 auto 0.5rem;
}

.rewards-title img {
  display: block;
  width: 100%;
  height: auto;
}

.rewards-guide {
  position: absolute;
  z-index: 4;
  top: 30%;
  right: 15%;
  width: 10.5%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.rewards-copy-wrap {
  position: relative;
  min-height: 7.5rem;
}

.rewards-copy {
  position: relative;
  z-index: 2;
  width: 70%;
  min-height: 5.5rem;
  margin: -0.25rem auto 0;
  padding: 1.2rem 3.5rem;
  border-radius: 999px;
  background: #fff;
  transform: rotate(-2.07deg);
  transform-origin: 50% 50%;
}

.rewards-copy::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 3px solid #fff;
  border-radius: inherit;
  content: "";
  transform: translate(14px, 18px);
}

.rewards-copy p {
  margin: 0;
  padding-right:11%;
  color: #333;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

.rewards-cards-row {
  margin-top: 4.75rem;
}

.reward-card-column {
  position: relative;
}

.reward-card {
  overflow: hidden;
  border-radius: 1.35rem;
}

.reward-card-ai .activity-card-art {
  animation-delay: 4s;
}

.reward-card-points .activity-card-art {
  animation-delay: 6s;
}

/* ========================================================================== 
   05 返回中小企業網路大學校
   ========================================================================== */
.home-link-section {
  position: relative;
  min-height: clamp(20rem, 28vw, 46rem);
  overflow: hidden;
  background: #86deee;
}

.home-link-layout.container-xxl {
  position: relative;
  z-index: 3;
  max-width: 1500px;
  padding-top: clamp(7rem, 6vw, 10rem);
}

.home-link-wrap {
  position: relative;
  width: min(50%, 920px);
  margin: 0 auto;
}

.home-link-button {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  border-radius: 999px;
  transform-origin: 50% 50%;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.home-link-button img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  animation: home-link-attention 4s ease-in-out infinite;
}

.home-link-button:hover,
.home-link-button:focus-visible {
  filter: brightness(1.06) drop-shadow(0 0.75rem 0.9rem rgb(35 46 111 / 28%));
  transform: translateY(-0.5rem) scale(1.025);
}

.home-link-button:focus-visible {
  outline: 4px solid var(--activity-focus);
  outline-offset: 0.5rem;
}

.home-link-button:hover img,
.home-link-button:focus-visible img {
  animation-play-state: paused;
}

.home-link-character {
  position: absolute;
  z-index: 3;
  bottom: -34%;
  left: -25%;
  width: 28%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.home-grass {
  position: absolute;
  z-index: 1;
  bottom: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.home-grass-left {
  left: 0;
  width: min(25%, 400px);
}

.home-grass-right {
  right: 0;
  width: min(25%, 400px);
}

.activity-card:hover .activity-card-art,
.activity-card:focus-visible .activity-card-art {
  animation-play-state: paused;
}

.activity-card:hover,
.activity-card:focus-visible {
  transform: translateY(-0.5rem) scale(1.025);
}

.activity-card:hover .activity-card-art,
.activity-card:focus-visible .activity-card-art {
  filter: brightness(1.07) drop-shadow(0 0.75rem 0.9rem rgb(35 46 111 / 30%));
}

.activity-card:hover .activity-card-character,
.activity-card:focus-visible .activity-card-character {
  animation: activity-character-hop 0.58s cubic-bezier(0.2, 0.82, 0.25, 1.2);
}

.activity-card:focus-visible {
  outline: 4px solid var(--activity-focus);
  outline-offset: 0.5rem;
}

@keyframes activity-card-attention {
  0%,
  3%,
  7%,
  11%,
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgb(255 234 0 / 0%));
  }
  5%,
  9% {
    transform: scale(1.065);
    filter: brightness(1.12) drop-shadow(0 0 1.1rem rgb(255 234 0 / 85%));
  }
}

@keyframes home-link-attention {
  0%,
  10%,
  22.5%,
  25%,
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgb(255 234 0 / 0%));
  }
  5%,
  16.25% {
    transform: scale(1.065);
    filter: brightness(1.12) drop-shadow(0 0 1.1rem rgb(255 234 0 / 85%));
  }
}

@keyframes activity-character-hop {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  42%,
  70% {
    transform: translateY(-8%) rotate(-3deg) scale(1.04);
  }
}

/* Bootstrap 5.3：lg 以下；手機／平板版將在 PC 首頁確認後設計 */
@media (max-width: 991.98px) {
  .hero-stage {
    aspect-ratio: 4 / 3;
  }

  .hero-background {
    background-position: center top;
    background-size: 136% auto;
  }

  .hero-title { top: 4.5%; left: 14%; width: 72%; }
  .hero-bird { top: 12%; right: 2%; left: auto; width: 8%; }
  .hero-station { top: 38%; right: 2%; left: auto; width: 30%; }
  .hero-character-orange { top: 54%; left: 17%; width: 19%; }
  .hero-character-green { top: 42%; left: 36%; width: 27%; }
  .hero-character-pink { top: 56%; left: 62%; width: 16%; }
  .hero-grass-left { bottom: -8%; width: 18%; }
  .hero-grass-right { bottom: -9%; width: 24%; }

  .welcome-stage {
    aspect-ratio: 991 / 500;
  }

  .welcome-background-clip {
    background: #86deee;
  }

  .welcome-background-clip::after { height: 30%; }

  .welcome-background-image {
    display: none;
  }

  .welcome-title {
    top: 3%;
    left: 16%;
    width: 68%;
  }

  .welcome-message {
    top: 26%;
    left: 13%;
    width: 74%;
  }

  .welcome-message p {
    top: 18%;
    right: 10%;
    left: 12%;
    font-size: 1.25rem;
  }

  .welcome-character {
    top: 48%;
    left: 2%;
    width: 16%;
  }

  .benefits-layout.container-xxl {
    max-width: 940px;
    padding-top: 2.75rem;
    padding-bottom: 6rem;
  }
  .benefits-title { width: min(74%, 720px); }
  .benefits-copy-wrap { min-height: 7rem; }
  .benefits-copy { width: 88%; min-height: 5.75rem; padding: 1rem 1.5rem 1rem 7.5rem; }
  .benefits-copy p { font-size: clamp(1rem, 1.8vw, 1.125rem); }
  .benefits-guide { bottom: 1.25rem; left: 0; width: 15%; }
  .benefits-cards-row { margin-top: 3.5rem; }
  .activity-card-column { width: 45%; }

  .rewards-layout.container-xxl {
    max-width: 940px;
    padding-top: 3rem;
    padding-bottom: 6rem;
  }
  .rewards-title { width: 72%; }
  .rewards-guide { top: 52%; right: 6%; width: 12%; }
  .rewards-copy { width: 86%; padding: 1rem 2.5rem; }
  .rewards-copy p { font-size: clamp(1rem, 1.9vw, 1.2rem); }
  .rewards-cards-row { margin-top: 3.75rem; }
  .reward-card-column { width: 45%; }

  .home-link-section { min-height: clamp(20rem, 36vw, 24rem); }
  .home-link-layout.container-xxl { padding-top: 5rem; }
  .home-link-wrap { width: min(56%, 600px); }
  .home-link-character { bottom: -34%; left: -23%; width: 30%; }
  .home-grass-left { width: 23%; }
  .home-grass-right { width: 25%; }
}

@media (max-width: 767.98px) {
  .hero-animate-stage {
    display: none;
  }

  .hero-static-stage {
    display: block;
  }

  .hero-stage {
    aspect-ratio: 4 / 3.65;
  }

  .hero-background {
    background-size: 175% auto;
  }

  .hero-title { top: 4%; left: 8%; width: 84%; }
  .hero-bird { top: 31%; right: 3%; left: auto; width: 8%; }
  .hero-station { top: 40%; right: 0; width: 36%; }
  .hero-character-orange { top: 55%; left: 10%; width: 23%; }
  .hero-character-green { top: 42%; left: 31%; width: 34%; }
  .hero-character-pink { top: 57%; left: 61%; width: 20%; }
  .hero-grass-left { bottom: 1%; width: 16%; }
  .hero-grass-right { bottom: 1%; width: 22%; }

  .welcome-stage {
    aspect-ratio: 767 / 620;
  }

  .welcome-title {
    top: 4%;
    left: 9%;
    width: 82%;
  }

  .welcome-message {
    top: 27%;
    left: 7%;
    width: 86%;
  }

  .welcome-message p {
    top: 19%;
    right: 9%;
    left: 15%;
    font-size: clamp(1rem, 2.7vw, 1.25rem);
  }

  .welcome-character {
    top: 56%;
    left: 0;
    width: 20%;
  }

  .benefits-layout.container-xxl {
    max-width: 720px;
    padding-top: 2.5rem;
    padding-bottom: 5rem;
  }
  .benefits-title { width: 88%; }
  .benefits-copy-wrap { min-height: 8rem; }
  .benefits-copy {
    width: 88%;
    min-height: 6.5rem;
    padding: 1rem 2rem 1rem 5rem;
    border-radius: 2.4rem;
  }
  .benefits-copy p {
    font-size: clamp(1rem, 2.65vw, 1.2rem);
    line-height: 1.55;
    text-align: left;
  }
  .benefits-guide { bottom: 0.4rem; left: 1%; width: 15%; }
  .benefits-cards-row { margin-top: 3rem; }
  .activity-card-column { width: 84%; }
  .activity-card-column + .activity-card-column { margin-top: 4rem; }
  .activity-card-character { width: 27%; }
  .activity-card-character-green { width: 34%; left: 72%; top: 41%;}

  .rewards-layout.container-xxl {
    max-width: 720px;
    padding-top: 2.5rem;
    padding-bottom: 5rem;
  }
  .rewards-title { width: 86%; }
  .rewards-guide { top: 75%; right: 0.5%; width: 16%; }
  .rewards-copy-wrap { min-height: 8.5rem; }
  .rewards-copy {
    width: 88%;
    min-height: 6.5rem;
    padding: 1rem 2rem;
    border-radius: 2.4rem;
  }
  .rewards-copy p { font-size: clamp(1rem, 2.65vw, 1.2rem); line-height: 1.5; }
  .rewards-cards-row { margin-top: 3rem; }
  .reward-card-column { width: 84%; }
  .reward-card-column + .reward-card-column { margin-top: 3rem; }

  .home-link-section { min-height: 20rem; }
  .home-link-layout.container-xxl { padding-top: 4.5rem; }
  .home-link-wrap { width: 65%; }
  .home-link-character { bottom: -38%; left: -23%; width: 33%; }
  .home-grass-left { width: 20%; }
  .home-grass-right { width: 22%; }
}

@media (max-width: 575.98px) {
  main {
    overflow: hidden;
  }
  .hero-stage {
    aspect-ratio: 430 / 620;
  }

  .hero-background {
    background-size: 286% auto;
  }

  .hero-title { top: 8%; left: 1%; width: 98%; }
  .hero-bird { top: 3%; right: 0%; left: auto; width: 20%; }
  .hero-station { top: 48%; right: 0%; width: 36%; }
  .hero-character-orange { top: 64%; left: 4%; width: 30%; }
  .hero-character-green { top: 50%; left: 28%; width: 44%; }
  .hero-character-pink { top: 66%; left: 65%; width: 24%; }
  .hero-grass-left { bottom: 2%; width: 16%; }
  .hero-grass-right { bottom: 2%; width: 18%; }

  .welcome-stage {
    aspect-ratio: 430 / 650;
  }

  .welcome-title {
    top: 3%;
    left: 3%;
    width: 94%;
  }

  .welcome-message {
    top: 25%;
    left: 1%;
    width: 98%;
    height: auto;
    aspect-ratio: 920 / 1000;
    background: transparent;
  }

  .welcome-message p {
    top: 43%;
    right: 14%;
    left: 16%;
    font-size: 1.375rem;
    line-height: 1.55;
    letter-spacing: 0;
    transform: translateY(-50%);
  }

  .welcome-character {
    top: 75%;
    left: 0;
    width: 30%;
  }

  .benefits-layout.container-xxl {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
  .benefits-title { width: 100%; }
  .benefits-copy-wrap { min-height: 11.5rem; }
  .benefits-copy {
    width: 90%;
    min-height: 9.5rem;
    margin-top: 1rem;
    padding: 1.1rem 1.5rem;
    border-radius: 2rem;
  }
  .benefits-copy::after { border-width: 2px; transform: translate(7px, 9px); }
  .benefits-copy p { font-size: 1.375rem; line-height: 1.5; }
  .benefits-copy strong { display: block; margin: 0 0 0.2rem; }
  .benefits-guide { display: none; }
  .benefits-cards-row { margin-top: 2.1rem; }
  .activity-card-column { width: 94%; }
  .activity-card-column + .activity-card-column { margin-top: 2.75rem; }
  .activity-card { border-radius: 0.9rem; }

  .rewards-layout.container-xxl {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
  .rewards-title { width: 100%; }
  .rewards-guide { display: none; }
  .rewards-copy-wrap { min-height: 12rem; }
  .rewards-copy {
    width: 90%;
    margin-top: 1rem;
    padding: 1.1rem 1.5rem;
    border-radius: 2rem;
  }
  .rewards-copy::after { border-width: 2px; transform: translate(7px, 9px); }
  .rewards-copy p { font-size: 1.375rem; line-height: 1.5; padding-right: 3%;}
  .rewards-cards-row { margin-top: 2rem; }
  .reward-card-column { width: 94%; }
  .reward-card-column + .reward-card-column { margin-top: 2.5rem; }
  .reward-card { border-radius: 0.9rem; }

  .home-link-section { min-height: 12rem; }
  .home-link-layout.container-xxl { padding-top: 4rem; }
  .home-link-wrap { width: 85%; margin-left: 15%; }
  .home-link-character { bottom: -47%; left: -20%; width: 38%; }
  .home-grass-left { width: 18%; }
  .home-grass-right { width: 20%; }
}

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

  .hero-title,
  .hero-bird,
  .hero-character,
  .hero-character:hover {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .hero-animate-stage {
    display: none;
  }

  .hero-static-stage {
    display: block;
  }

  .activity-card,
  .activity-card:hover,
  .activity-card:focus-visible {
    transition: none;
    transform: none;
  }

  .activity-card-art,
  .activity-card-character,
  .activity-card:hover .activity-card-character,
  .activity-card:focus-visible .activity-card-character {
    animation: none;
    transition: none;
  }

  .home-link-button,
  .home-link-button img,
  .home-link-button:hover,
  .home-link-button:focus-visible,
  .home-link-button:hover img,
  .home-link-button:focus-visible img {
    animation: none;
    transition: none;
    transform: none;
  }

  .skip-link {
    transition: none;
  }
}

/* 內頁固定返回活動首頁按鈕 */
.activity-back-home {
    position: fixed;
    z-index: 1000;
    bottom: max(1rem, env(safe-area-inset-bottom));
    right: max(1rem, env(safe-area-inset-right));
    display: block;
    width: clamp(6.25rem, calc(10.76vw + 1.085rem), 10.5rem);
    border-radius: 50%;
    transform-origin: 50% 50%;
    transition: filter 0.22s ease, transform 0.22s ease;
}

@media (min-width: 1400px) {
    .activity-back-home {
        width: 150px;
    }
}

.activity-back-home img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0.22rem 0.42rem rgb(24 68 112 / 24%));
    transform-origin: 50% 50%;
    animation: activity-back-home-attention 8s ease-in-out infinite;
}

@keyframes activity-back-home-attention {
    0%,
    12.5%,
    100% {
        transform: scale(1);
        filter: brightness(1)
            drop-shadow(0 0.22rem 0.42rem rgb(24 68 112 / 24%));
    }

    6.25% {
        transform: scale(1.065);
        filter: brightness(1.12)
            drop-shadow(0 0 1.1rem rgb(255 234 0 / 85%))
            drop-shadow(0 0.22rem 0.42rem rgb(24 68 112 / 24%));
    }
}

.activity-back-home:hover,
.activity-back-home:focus-visible {
    filter: brightness(1.08) drop-shadow(0 0.65rem 0.7rem rgb(24 88 83 / 30%));
    transform: translateY(-0.35rem) scale(1.08);
}

.activity-back-home:hover img,
.activity-back-home:focus-visible img {
    animation-play-state: paused;
}

.activity-back-home:focus-visible {
    outline: 4px solid var(--activity-focus);
    outline-offset: 0.3rem;
}

@media (max-width: 767.98px) {
    .activity-back-home {
        bottom: max(1rem, env(safe-area-inset-bottom));
        right: max(1rem, env(safe-area-inset-right));
        width: 100px;
        max-width: calc(100vw - 2rem);
        transform-origin: 100% 100%;
    }

    .activity-back-home img {
        transform-origin: 100% 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .activity-back-home,
    .activity-back-home img,
    .activity-back-home:hover,
    .activity-back-home:focus-visible,
    .activity-back-home:hover img,
    .activity-back-home:focus-visible img {
        animation: none;
        transition: none;
        transform: none;
    }
}

/* ========================================================================== 
   學習任務大冒險｜01 主視覺（PC）
   1920px 底圖為原寸；獨立 PNG 為設計尺寸的 1.5 倍輸出。
   ========================================================================== */
.adventure-page {
  background: #40ccb2;
}

.adventure-hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #40ccb2;
}

.adventure-hero-stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 995;
  overflow: hidden;
  isolation: isolate;
}

.adventure-hero-animate,
.adventure-hero-static {
  position: absolute;
  z-index: 0;
  inset: 0;
}

.adventure-hero-animate-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.adventure-hero-static {
  display: none;
}

.adventure-hero-bg,
.adventure-hero-leaves,
.adventure-hero-subtitle,
.adventure-character,
.adventure-hero-transition,
.adventure-hero-transition img {
  display: block;
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.adventure-hero-bg {
  z-index: 0;
  inset: 0;
  width: 100%;
}

.adventure-hero-title {
  position: absolute;
  z-index: 2;
  top: 2.2%;
  left: 50%;
  width: min(46.3542%, 890px);
  margin: 0;
  transform: translateX(-50%);
  transform-origin: 50% 70%;
  animation: adventure-title-arrive 0.9s cubic-bezier(0.2, 0.85, 0.3, 1.25) both;
}

.adventure-hero-title img {
  display: block;
  width: 100%;
  height: auto;
}

.adventure-hero-characters {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.adventure-character {
  transform-origin: 50% 100%;
  animation: adventure-character-arrive 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}

.adventure-character-pink {
  top: 40.5%;
  left: 26%;
  width: 15%;
  animation-delay: 0.22s;
}

.adventure-character-green {
  top: 34%;
  left: 40.5%;
  width: 18%;
  animation-delay: 0.34s;
}

.adventure-character-orange {
  top: 43.5%;
  left: 57%;
  width: 16%;
  animation-delay: 0.46s;
}

.adventure-hero-leaves {
  z-index: 3;
  top: 63.5%;
  left: 49%;
  width: 77%;
  max-width: 1481px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: adventure-leaves-sway 1.5s ease-out 0.2s both;
}

.adventure-hero-transition {
  z-index: 4;
  top: 76.1%;
  left: 0;
  width: 100%;
}

.adventure-hero-transition img {
  position: static;
  width: 100%;
}

.adventure-hero-subtitle {
  z-index: 5;
  top: 84.6%;
  left: 50%;
  width: min(36.0417%, 692px);
  border-radius: 999px;
  pointer-events: auto;
  transform: translateX(-50%);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.adventure-hero-subtitle img {
  display: block;
  width: 100%;
  height: auto;
}

.adventure-hero-subtitle:hover,
.adventure-hero-subtitle:focus-visible {
  filter: brightness(1.06) drop-shadow(0 0.5rem 0.7rem rgb(0 91 96 / 25%));
  transform: translateX(-50%) scale(1.035);
}

.adventure-hero-subtitle:focus-visible {
  outline: 4px solid var(--activity-focus);
  outline-offset: 0.35rem;
}

.adventure-process-section {
  scroll-margin-top: 1rem;
}

@keyframes adventure-title-arrive {
  0% { opacity: 0; transform: translateX(-50%) scale(0.82); }
  72% { opacity: 1; transform: translateX(-50%) scale(1.035); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes adventure-character-arrive {
  0% { opacity: 0; transform: scale(0.35); }
  75% { opacity: 1; transform: scale(1.045); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes adventure-leaves-sway {
  0% { transform: translateX(-50%) rotate(0deg); }
  18% { transform: translateX(-50%) rotate(-1.2deg); }
  38% { transform: translateX(-50%) rotate(0.95deg); }
  57% { transform: translateX(-50%) rotate(-0.65deg); }
  74% { transform: translateX(-50%) rotate(0.4deg); }
  88% { transform: translateX(-50%) rotate(-0.18deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

/* ========================================================================== 
   學習任務大冒險｜02 新會員專屬任務（PC）
   ========================================================================== */
.adventure-process-section {
  position: relative;
  z-index: 0;
  padding-bottom: 0;
  overflow: hidden;
  background-color: #ffead5;
  background-image: url("../images/adventure/bg_02.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1920px auto;
}

.adventure-process-layout.container-xxl {
  --bs-gutter-x: 3rem;
  width: min(100%, 1360px);
  max-width: 1360px;
  padding-top: 4rem;
  padding-bottom: 12%;
}

.adventure-process-title {
  width: min(55%, 881px);
  margin: 0;
  padding-bottom: 2rem;
}

.adventure-process-title img {
  display: block;
  width: 100%;
  height: auto;
}

.adventure-process-list {
  margin: 2.15rem 0 0;
  padding: 0;
  list-style: none;
}

.adventure-process-item {
  position: relative;
  padding: 0 1.9rem 0 3.4rem;
}

.adventure-process-card {
  position: relative;
  display: flex;
  min-height: 7rem;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.2rem 1rem 3.2rem;
  border: 2px solid #292929;
  border-radius: 1.15rem;
  background: #fbd2c8;
}

.adventure-process-card::after,
.adventure-process-card::before {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  transform: translateX(-50%);
}

.adventure-process-card::after {
  z-index: 0;
  bottom: -1.8rem;
  border-top: 1.8rem solid #292929;
  border-right: 1rem solid transparent;
  border-left: 1rem solid transparent;
}

.adventure-process-card::before {
  z-index: 1;
  bottom: -1.6rem;
  border-top: 1.65rem solid #fbd2c8;
  border-right: 0.87rem solid transparent;
  border-left: 0.87rem solid transparent;
}

.adventure-process-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -3.45rem;
  display: grid;
  width: 6rem;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #292929;
  border-radius: 50%;
  background: #eeeeec;
  transform: translateY(-50%);
}

.adventure-process-icon img {
  width: auto;
  max-width: 60%;
  max-height: 60%;
}

.adventure-process-card h3 {
  margin: 0;
  color: #303030;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.adventure-process-scale {
  position: relative;
  width: calc(100% - 2.5rem);
  margin: 2rem auto 0;
  aspect-ratio: 1553 / 115;
}

.adventure-process-bar {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
}

.adventure-process-fill {
  position: absolute;
  z-index: 1;
  top: 34.7%;
  left: 1.574%;
  width: 88.76%;
  height: 23.46%;
  border-radius: 999px;
  background: #ffbfd8;
  box-shadow: inset 0 0.12rem 0.2rem rgb(255 255 255 / 55%);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  animation: adventure-progress-run 7.5s ease-in-out infinite;
}

@keyframes adventure-progress-run {
  0%, 13.333% { opacity: 1; transform: scaleX(0); }
  32% { opacity: 1; transform: scaleX(0.1231); }
  48% { opacity: 1; transform: scaleX(0.4104); }
  64% { opacity: 1; transform: scaleX(0.7146); }
  80%, 86.667% { opacity: 1; transform: scaleX(0.985); }
  93.333%, 99.9% { opacity: 0; transform: scaleX(1); }
  100% { opacity: 1; transform: scaleX(0); }
}

.adventure-process-percent-50 {
  animation: adventure-percent-pop-50 7.5s ease-in-out infinite;
}

.adventure-process-percent-70 {
  animation: adventure-percent-pop-70 7.5s ease-in-out infinite;
}

.adventure-process-percent-90 {
  animation: adventure-percent-pop-90 7.5s ease-in-out infinite;
}

.adventure-process-percent-100 {
  animation: adventure-percent-pop-100 7.5s ease-in-out infinite;
}

@keyframes adventure-percent-pop-50 {
  0%, 28%, 36%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  32% { transform: translateX(-50%) translateY(-12%) scale(1.2); }
}

@keyframes adventure-percent-pop-70 {
  0%, 44%, 52%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  48% { transform: translateX(-50%) translateY(-12%) scale(1.2); }
}

@keyframes adventure-percent-pop-90 {
  0%, 60%, 68%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  64% { transform: translateX(-50%) translateY(-12%) scale(1.2); }
}

@keyframes adventure-percent-pop-100 {
  0%, 76%, 84%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  80% { transform: translateX(-50%) translateY(-12%) scale(1.2); }
}

@media (max-width: 998px) {
  .adventure-process-fill,
  .adventure-process-percent {
    animation: none;
  }

  .adventure-process-fill {
    opacity: 1;
    transform: scaleX(1);
  }
}

.adventure-process-percent {
  position: absolute;
  z-index: 2;
  top: 6%;
  height: auto;
  transform: translateX(-50%);
}

.adventure-process-percent-50 {
  left: 12.5%;
  height: 85%;
}

.adventure-process-percent-70 {
  left: 38%;
  height: 85%;
}

.adventure-process-percent-90 {
  left: 65%;
  height: 85%;
}

.adventure-process-percent-100 {
  left: 89%;
  height: 85%;
}

.adventure-process-mobile-percent {
  display: none;
}

/* ========================================================================== 
   學習任務大冒險｜03 活動參與資格（PC）
   ========================================================================== */
.adventure-score-section {
  position: relative;
  z-index: 1;
  overflow: visible;
  background-color: #80d9c3;
  background-image: url("../images/adventure/bg_03.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  padding: 0 0 50px;
}

.adventure-score-layout.container-xxl {
  --bs-gutter-x: 3rem;
  width: min(100%, 1400px);
  max-width: 1400px;
  padding-bottom: 5.5rem;
}

.adventure-score-heading {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 7rem;
  grid-template-columns: 40% 60%;
  align-items: center;
  width: min(88%, 1400px);
  margin: 0 auto;
  border: 3px solid #006f73;
  border-radius: 4rem;
  color: #fff;
  background: #06a5a3;
  box-shadow: 10px 10px 0 rgba(0, 95, 98, 0.3);
  transform: translateY(-50%);
}

.adventure-score-heading-character {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: -1%;
  width: 16%;
  height: auto;
  pointer-events: none;
}

.adventure-score-heading h2 {
  position: relative;
  z-index: 3;
  text-shadow: 2px 2px 5px #00000090;
  margin: 0;
  padding-left: 30%;
  font-size: clamp(1.65rem, 2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  width: 100%;
}

.adventure-score-heading-special {
  display: flex;
  min-height: 5.6rem;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  padding: 0.6rem 2rem;
  border-radius: 3rem;
  background: #fff;
}

.adventure-score-heading-special img {
  display: block;
  height: 48px;
}

.adventure-score-content {
  position: relative;
  display: flex;
  z-index: 2;
  align-items: flex-end;
  margin-right: auto;
  margin-left: auto;
  max-width: 1100px;
}

.adventure-score-qualification {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 26rem;
  align-items: center;
  justify-content: center;
}

.adventure-score-qualification-link {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
}

.adventure-score-qualification-link:focus-visible {
  outline: 4px solid var(--activity-focus);
  outline-offset: 0.35rem;
}

.adventure-score-qualification-art {
  position: relative;
  z-index: 2;
  width: min(80%, 306.67px);
  height: auto;
  margin-bottom: 1.5rem;
  transform-origin: 50% 50%;
  animation: home-link-attention 4s ease-in-out infinite;
}

.adventure-score-qualification-link:hover .adventure-score-qualification-art,
.adventure-score-qualification-link:focus-visible .adventure-score-qualification-art {
  animation-play-state: paused;
}

.adventure-score-arrow {
  position: absolute;
  z-index: 0;
  width: 15.75rem;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.adventure-score-arrow-start {
  top: 64%;
  right: -3.5rem;
  transform: translateY(-50%);
}

.adventure-score-tasks {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-left: 2rem;
  list-style: none;
}
.adventure-score-task{
  padding: 1rem 0;
}
.adventure-score-task + .adventure-score-task {
  margin-top: 2.35rem;
}

.adventure-score-task-main,
.adventure-score-gift {
  position: relative;
}

.adventure-score-card {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 6rem;
  align-items: center;
  justify-content: center;
  margin-right: 1.1rem;
  padding: 1.25rem 2rem;
  border: 2px solid #3b3b3b;
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 7px 7px 0 rgba(30, 93, 89, 0.18);
}

.adventure-score-card h3 {
  margin: 0;
  color: #333;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.adventure-score-card h3 span{
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  font-size: 130%;
}
.adventure-score-gem {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: auto;
  height: 2.5rem;
  transform: translateY(-50%);
}

.adventure-score-gem-start {
  right: auto;
  left: 1rem;
}

.adventure-score-arrow-reward {
  top: 50%;
  right: -8.2rem;
  transform: translateY(-50%);
}

.adventure-score-gift {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
}

.adventure-score-gift > picture:first-child {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 356px);
  height: auto;
}

.adventure-score-gift > picture:first-child img {
  display: block;
  width: 100%;
  height: auto;
}

.adventure-score-coins {
  position: absolute;
  z-index: 3;
  right: -4rem;
  bottom: -2.2rem;
  width: 9.5rem;
  height: auto;
  pointer-events: none;
}

/* Bootstrap 5.3 responsive breakpoints */
@media (max-width: 1399.98px) {
  .adventure-hero-title { width: 49%; }
  .adventure-hero-leaves { width: 82%; }
  .adventure-hero-subtitle { width: 39%; }

  .adventure-process-layout.container-xxl {
    --bs-gutter-x: 2.5rem;
    width: min(100%, 1360px);
  }

  .adventure-process-item {
    padding-right: 1.45rem;
    padding-left: 3rem;
  }

  .adventure-process-icon {
    left: -3rem;
    width: 6rem;
  }

  .adventure-score-layout.container-xxl {
    --bs-gutter-x: 2.5rem;
    width: min(100%, 1360px);
  }

  .adventure-score-heading h2 { padding-left: 8rem; }
  .adventure-score-card { min-height: 8rem; }
  .adventure-score-arrow { width: 13.5rem; }
  .adventure-score-coins { right: -0.5rem; width: 8.5rem; }
}

@media (max-width: 1199.98px) {
  .adventure-hero-title {
    top: 2.8%;
    width: 53%;
  }

  .adventure-character-pink {
    top: 37%;
    left: 23.5%;
    width: 17.5%;
  }

  .adventure-character-green {
    top: 33.5%;
    left: 39.5%;
    width: 20.5%;
  }

  .adventure-character-orange {
    top: 39.4%;
    left: 58.2%;
    width: 18.4%;
  }

  .adventure-hero-leaves { width: 89%; }
  .adventure-hero-subtitle { width: 43%; }

  .adventure-process-layout.container-xxl {
    --bs-gutter-x: 2rem;
    padding-top: 4.5rem;
    padding-bottom: 8rem;
  }

  .adventure-process-title { width: 60%; }
  .adventure-process-item {
    padding-right: 1rem;
    padding-left: 2.55rem;
  }

  .adventure-process-card {
    min-height: 7.25rem;
    padding-right: 0.75rem;
    padding-left: 2.7rem;
  }

  .adventure-process-icon {
    left: -2.55rem;
    width: 5.1rem;
  }

  .adventure-process-scale {
    width: calc(100% - 1rem);
    margin-top: 1.25rem;
  }

  .adventure-score-section { min-height: 43rem; }

  .adventure-score-layout.container-xxl {
    --bs-gutter-x: 2rem;
    padding-bottom: 4.5rem;
  }

  .adventure-score-heading {
    min-height: 6.7rem;
  }

  .adventure-score-heading-character { width: 17.5%; }

  .adventure-score-heading-special {
    min-height: 4.9rem;
    padding-right: 1.4rem;
    padding-left: 1.4rem;
  }

  .adventure-score-content { margin-top: 1.25rem; }
  .adventure-score-qualification { min-height: 25rem; }
  .adventure-score-card {
    min-height: 7.25rem;
    padding-right: 4.8rem;
    padding-left: 1.25rem;
  }

  .adventure-score-card-gem-start {
    padding-right: 1.25rem;
    padding-left: 4.8rem;
  }

  .adventure-score-card h3 { font-size: clamp(1.75rem, 1.85vw, 2rem); }
  .adventure-score-gem { right: 1.25rem; height: 3rem; }
  .adventure-score-gem-start { right: auto; left: 1.25rem; }
  .adventure-score-arrow { width: 11.5rem; }
  .adventure-score-arrow-start { right: -4.5rem; }
  .adventure-score-arrow-reward { right: -6rem; }
  .adventure-score-gift > picture:first-child { width: min(100%, 300px); }
  .adventure-score-coins { bottom: -2rem; width: 7.5rem; }
}

@media (max-width: 991.98px) {
  .adventure-hero-stage {
    aspect-ratio: 1920 / 995;
  }

  .adventure-hero-bg {
    width: 108%;
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
  }

  .adventure-hero-title {
    top: 3%;
    width: 59%;
  }

  .adventure-character-pink {
    top: 39%;
    left: 20.5%;
    width: 20.5%;
  }

  .adventure-character-green {
    top: 35.5%;
    left: 38%;
    width: 24%;
  }

  .adventure-character-orange {
    top: 41%;
    left: 59.5%;
    width: 21.5%;
  }

  .adventure-hero-leaves {
    top: 65%;
    width: 101%;
  }

  .adventure-hero-transition { top: 78.5%; }
  .adventure-hero-subtitle {
    top: 86%;
    width: 50%;
  }

  .adventure-process-section {
    min-height: 0;
    background-position: center top;
    background-size: cover;
  }

  .adventure-process-layout.container-xxl {
    --bs-gutter-x: 3rem;
    padding-top: 4rem;
    padding-bottom: 15rem;
  }

  .adventure-process-title { width: 72%; }

  .adventure-process-list {
    position: relative;
    row-gap: 7rem;
    margin-top: 2rem;
  }

  .adventure-process-list > .adventure-process-item {
    position: relative;
    z-index: 1;
    width: 50%;
    padding-right: 1.5rem;
    padding-left: 3.5rem;
  }

  .adventure-process-item:nth-child(1)::after,
  .adventure-process-item:nth-child(3)::after {
    position: absolute;
    z-index: -1;
    bottom: -5.5rem;
    left: 1rem;
    width: calc(200% - 2rem);
    height: 5.25rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    content: "";
    pointer-events: none;
  }

  .adventure-process-item:nth-child(1)::after {
    background-image: url("../images/adventure/process-per-bar_md01.svg");
  }

  .adventure-process-item:nth-child(3)::after {
    background-image: url("../images/adventure/process-per-bar_md02.svg");
  }

  .adventure-process-card {
    min-height: 7.5rem;
    padding: 1rem 1rem 1rem 3rem;
  }

  .adventure-process-icon {
    left: -3rem;
    width: 6rem;
  }

  .adventure-process-card h3 {
    font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  }

  .adventure-process-scale { display: none; }

  .adventure-process-mobile-percent {
    position: absolute;
    z-index: 2;
    bottom: -5.9rem;
    left: 50%;
    display: block;
    width: auto;
    height: 5.25rem;
    transform: translateX(-50%);
  }

  .adventure-score-section { min-height: 40rem; }

  .adventure-score-layout.container-xxl {
    --bs-gutter-x: 1.5rem;
    padding-bottom: 4rem;
  }

  .adventure-score-heading {
    width: 95%;
    min-height: 6rem;
    grid-template-columns: 35% 65%;
  }

  .adventure-score-heading h2 {
    padding-left: 5.25rem;
    font-size: 1.3rem;
  }

  .adventure-score-heading-special {
    min-height: 4.3rem;
    margin-right: 0.5rem;
    padding: 0.5rem 1rem;
  }

  .adventure-score-content { margin-top: 1rem; }
  .adventure-score-qualification { width: 32%; min-height: 23rem; }
  .adventure-score-tasks { width: 68%; }
  .adventure-score-qualification-art { width: min(82%, 245px); }
  .adventure-score-task-main { width: 66.6667%; }
  .adventure-score-gift { width: 33.3333%; padding-left: 0.5rem; }
  .adventure-score-card {
    min-height: 6.5rem;
    margin-right: 0.6rem;
    border-radius: 0.9rem;
  }

  .adventure-score-card h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); }
  .adventure-score-task + .adventure-score-task { margin-top: 1.75rem; }
  .adventure-score-arrow { width: 9rem; }
  .adventure-score-arrow-start { right: -3.5rem; }
  .adventure-score-arrow-reward { right: -4.75rem; }
  .adventure-score-gift > picture:first-child { width: min(100%, 230px); }
  .adventure-score-coins { right: -0.25rem; bottom: -1.6rem; width: 6rem; }
}

@media (max-width: 767.98px) {
  .adventure-hero-animate {
    display: none;
  }

  .adventure-hero-static {
    display: block;
  }

  .adventure-hero-stage {
    aspect-ratio: 4 / 3;
  }

  .adventure-hero-bg {
    width: 144%;
  }

  .adventure-hero-title {
    top: 4%;
    width: 72%;
  }

  .adventure-character-pink {
    top: 40.5%;
    left: 12.5%;
    width: 27%;
  }

  .adventure-character-green {
    top: 37%;
    left: 34.5%;
    width: 32%;
  }

  .adventure-character-orange {
    top: 42%;
    left: 62%;
    width: 28%;
  }

  .adventure-hero-leaves {
    top: 66%;
    width: 130%;
  }

  .adventure-hero-transition { top: 79.5%; }
  .adventure-hero-subtitle {
    top: 87%;
    width: 65%;
  }

  .adventure-process-title { width: 82%; }

  .adventure-process-list > .adventure-process-item {
    padding-right: 1.15rem;
    padding-left: 3.1rem;
  }

  .adventure-process-card {
    min-height: 7rem;
    padding-left: 2.65rem;
  }

  .adventure-process-icon {
    left: -2.65rem;
    width: 5.3rem;
  }

  .adventure-process-card h3 {
    font-size: clamp(1.12rem, 3.25vw, 1.4rem);
  }

  .adventure-score-section {
    min-height: 0;
    background-size: auto 36rem;
    margin-top: 10%;
  }

  .adventure-score-layout.container-xxl {
    --bs-gutter-x: 2rem;
    padding-bottom: 5rem;
  }

  .adventure-score-heading {
    display: flex;
    width: 100%;
    min-height: 9rem;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 2.5rem;
  }
.adventure-score-heading-special img{
  margin-left: 15%;
  width: 75%;
}

  .adventure-score-heading-character {
    bottom: 0;
    left: -4%;
    width: 25%;
  }

  .adventure-score-heading h2 {
    margin-bottom: 0.45rem;
    padding-left: 0;
    font-size: 1.75rem;
    text-align: center;
  }

  .adventure-score-heading-special {
    min-height: 4rem;
    margin: 0;
    padding: 0.55rem 0.9rem;
  }

  .adventure-score-content { margin-top: 0; }

  .adventure-score-qualification {
    width: 100%;
    min-height: 23rem;
  }

  .adventure-score-qualification-art { width: min(48%, 200px); }
  .adventure-score-tasks { width: 100%; }

  .adventure-score-arrow-start {
    top: 73%;
    right: 50.5%;
    bottom: 0;
    width: auto;
    height: 3rem;
    transform: translateX(50%) rotate(90deg);
  }
.adventure-score-tasks {
    padding-left: 0;
}
  .adventure-score-task-main { width: 68%; }
  .adventure-score-gift { width: 32%; }
  .adventure-score-card { min-height: 6.5rem; }
  .adventure-score-card h3 { font-size: clamp(1.05rem, 3.15vw, 1.35rem); }
  .adventure-score-gem { height: 2.7rem; }
  .adventure-score-arrow-reward { right: -4.5rem; width: 8rem; }
  .adventure-score-gift > picture:first-child { width: min(100%, 300px); }
}

@media (max-width: 575.98px) {
  .adventure-hero-stage {
    aspect-ratio: 4 / 5;
    min-height: 28rem;
  }

  .adventure-hero-bg {
    width: auto;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .adventure-hero-title {
    top: 4.5%;
    width: 92%;
  }

  .adventure-character-pink {
    top: 50%;
    left: 1%;
    width: 28%;
  }

  .adventure-character-green {
    top: 39%;
    left: 29.5%;
    width: 40%;
  }

  .adventure-character-orange {
    top: 52%;
    left: 69%;
    width: 30%;
  }

  .adventure-hero-leaves {
    top: 67%;
    width: 170%;
  }

  .adventure-hero-transition {
    top: 80%;
    width: 150%;
    left: 50%;
    transform: translateX(-50%);
  }

  .adventure-hero-subtitle {
    top: 86%;
    width: 92%;
  }

  .adventure-process-section {
    background-position: 52% top;
  }

  .adventure-process-layout.container-xxl {
    --bs-gutter-x: 1.5rem;
    padding-top: 3rem;
    padding-bottom: 10rem;
  }

  .adventure-process-title { width: 100%; }

  .adventure-process-list {
    position: relative;
    row-gap: 1.5rem;
    margin-top: 1.5rem;
    padding-right: 25%;
  }

  .adventure-process-list::after {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 25%;
    background-image: url("../images/adventure/process-per-bar_xs.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    content: "";
    pointer-events: none;
  }

  .adventure-process-list > .adventure-process-item {
    width: 100%;
    min-height: 5rem;
    padding-right: 0;
    padding-left: 3.5rem;
  }

  .adventure-process-item:nth-child(1)::after,
  .adventure-process-item:nth-child(3)::after {
    display: none;
  }

  .adventure-process-card {
    width: 100%;
    height: 5rem;
    min-height: 5rem;
    padding: 0.8rem 1.5rem 0.8rem 3.5rem;
    border-radius: 1rem;
  }

  .adventure-process-icon {
    left: -2.75rem;
    width: 5.5rem;
  }

  .adventure-process-card h3 {
    font-size: clamp(1.25rem, 5vw, 1.55rem);
  }

  .adventure-process-card h3 br {
    display: none;
  }

  .adventure-process-card::after,
  .adventure-process-card::before {
    top: 50%;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
  }

  .adventure-process-card::after {
    right: -1.8rem;
    border-top: 1rem solid transparent;
    border-right: 0;
    border-bottom: 1rem solid transparent;
    border-left: 1.8rem solid #292929;
  }

  .adventure-process-card::before {
    right: -1.58rem;
    border-top: 0.87rem solid transparent;
    border-right: 0;
    border-bottom: 0.87rem solid transparent;
    border-left: 1.6rem solid #fbd2c8;
  }

  .adventure-process-mobile-percent {
    z-index: 2;
    top: 50%;
    right: -32%;
    bottom: auto;
    left: auto;
    width: 24%;
    height: auto;
    transform: translateY(-50%);
  }

  .adventure-score-layout.container-xxl {
    --bs-gutter-x: 1.5rem;
    padding-bottom: 4.5rem;
  }

  .adventure-score-heading {
    width: 100%;
    min-height: fit-content;
    padding: 0.5rem;
    border-width: 2px;
    border-radius: 2rem;
    box-shadow: 6px 7px 0 rgba(0, 95, 98, 0.3);
  }

  .adventure-score-heading-character { 
    width: 8.25rem;
    bottom: 66.5%;
    left: -8.5%;
  }
  .adventure-score-heading h2 { 
    font-size: 1.75rem; 
    padding-left: 2rem;
  }
  .adventure-score-heading-special { 
    min-height: 3.25rem; 
    padding: 1.25rem 0.25rem;
    border-radius: 0 25px 25px 25px; 
  }
.adventure-score-heading-special img {
        margin: 0;
        width: 100%;
    }
  .adventure-score-content {
    align-items: stretch;
    margin-top: -3.5rem;
  }

  .adventure-score-qualification {
    display: block;
    min-height: 0;
    padding-bottom: 3rem;
  }

  .adventure-score-qualification-link {
    width: 100%;
  }

  .adventure-score-qualification-art { 
    width: 90%;
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .adventure-score-arrow-start {
    top: auto;
    right: 50%;
    bottom: 2%;
    height: 8rem;
    transform: translateX(50%) rotate(90deg) scale(0.4);
  }

  .adventure-score-task {
    display: flex;
    min-width: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .adventure-score-tasks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
  }

  .adventure-score-task + .adventure-score-task { margin-top: 0; }
  .adventure-score-task-main,
  .adventure-score-gift { width: 100%; }

  .adventure-score-task-main {
    display: flex;
    flex: 1 1 auto;
    margin-top: 0;
  }

  .adventure-score-card {
    width: 90%;
    min-height: 8.5rem;
    height: 100%;
    margin: 0 auto;
    padding: 1rem 0.5rem;
  }

  .adventure-score-card h3 { font-size: clamp(1.5rem, 4.8vw, 1.75rem); }
  .adventure-score-gem { 
    display: none;
  }
.adventure-score-card h3 span {
    margin-right: 0.125rem;
    margin-left: 0.125rem;
    font-size: 130%;
}
  .adventure-score-arrow-reward {
    display: none;
  }

  .adventure-score-gift {
    min-height: 0;
    padding: 0;
    margin-top: -0.5rem;
    margin-bottom: 0;
  }

  .adventure-score-gift > picture:first-child {
    width: 90%;
    max-width: none;
    margin: 0 auto;
  }
  .adventure-score-coins { right: 0; bottom: -2rem; width: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .adventure-process-fill,
  .adventure-process-percent {
    animation: none;
  }

  .adventure-process-fill {
    opacity: 1;
    transform: scaleX(1);
  }

  .adventure-hero-animate {
    display: none;
  }

  .adventure-hero-static {
    display: block;
  }

  .adventure-hero-title,
  .adventure-character,
  .adventure-hero-leaves {
    opacity: 1;
    animation: none;
  }
}

/* ========================================================================== 
   學習任務大冒險｜04 AI 完訓證書加碼任務
   此區使用獨立命名，避免影響已確認的第三區樣式。
   ========================================================================== */
.adventure-steps-section {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-color: #ffeedb;
  background-image: url("../images/adventure/bg_04.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

.adventure-steps-layout.container-xxl {
  --bs-gutter-x: 3rem;
  position: relative;
  width: min(100%, 1300px);
  max-width: 1300px;
  padding-top: 8rem;
  padding-bottom: 6.5rem;
}

.adventure-bonus-notice {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(100%, 1680px);
  min-height: 5.5rem;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 1rem 2.5rem 1rem 8%;
  border: 4px solid #008f98;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0.7rem 0.75rem 0 rgba(0, 92, 98, 0.24);
}

.adventure-bonus-clock {
  position: absolute;
  z-index: 2;
  bottom: -2rem;
  left: -3rem;
  width: min(9rem, 15%);
  height: auto;
  pointer-events: none;
}

.adventure-bonus-notice p {
  margin: 0;
  color: #333;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.adventure-bonus-notice strong {
  color: #f15a35;
  font-weight: 800;
}

.adventure-bonus-notice a,
.adventure-bonus-notice a:hover,
.adventure-bonus-notice a:focus-visible {
  color: #f15a35;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.16em;
}

.adventure-bonus-notice a:hover {
  color: #7f210f;
}

.adventure-bonus-notice a:focus-visible {
  border-radius: 0.2em;
  outline: 3px solid var(--activity-focus);
  outline-offset: 0.18em;
}

.adventure-step-list {
  position: relative;
  z-index: 1;
  margin: 0.5rem auto 0;
  padding: 0 5% 0 0;
  list-style: none;
  max-width: 1150px;
}

.adventure-step-item {
  --step-shape: polygon(10% 0, 100% 0, 88% 100%, 0 100%);
  position: relative;
  min-height: 18.7rem;
  padding: 0 0.65rem;
  margin-bottom: -2rem;
}

.adventure-step-item:nth-child(3n + 1) {
  --step-number-left: 3.25rem;
}

.adventure-step-item:nth-child(2),
.adventure-step-item:nth-child(5) {
  --step-shape: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  --step-number-left: 2rem;
}

.adventure-step-item:nth-child(3),
.adventure-step-item:nth-child(6) {
  --step-shape: polygon(0 0, 76% 0, 100% 100%, 12% 100%);
  --step-number-left: 0.15rem;
}

.adventure-step-item:nth-child(4) {
  --step-shape: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  --step-number-left: 2.4rem;
}

.adventure-step-art {
  --adventure-step-shift: 1.25rem;
  display: block;
  width: min(90%, 320px);
  height: auto;
  margin: 0 auto;
  cursor: default;
  transform: translateY(var(--adventure-step-shift));
}

.adventure-step-label {
  position: absolute;
  z-index: 2;
  right: 0.65rem;
  bottom: 0;
  left: 0.65rem;
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem 0.75rem 4.6rem;
  overflow: visible;
  background: transparent;
  isolation: isolate;
}

.adventure-step-label::after,
.adventure-step-label::before {
  position: absolute;
  clip-path: var(--step-shape);
  content: "";
}

.adventure-step-label::after {
  z-index: 0;
  inset: 0;
  background: #363636;
}

.adventure-step-label::before {
  z-index: 1;
  inset: 2px;
  background: #fff;
}

.adventure-step-item:nth-child(4) .adventure-step-label::after,
.adventure-step-item:nth-child(4) .adventure-step-label::before {
  border-radius: 2.4rem 0 0 2.4rem;
}

.adventure-step-label p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #333;
  font-size: clamp(1.5rem, 1.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  padding-right: 8%;
}

.adventure-step-number {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0rem;
  display: grid;
  width: 5rem;
  height: 5rem;
  box-sizing: border-box;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #087d78;
  border-radius: 50%;
  color: #fff;
  background: #05a49d;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  font-size: 3.5rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  transform: translateY(-50%);
}

.adventure-step-finish {
  position: absolute;
  z-index: 3;
  right: -4.5%;
  bottom: 3.5rem;
  width: 16%;
  height: auto;
  cursor: default;
}

/* PC 三欄時讓相鄰步驟底框彼此銜接，圖片與數字仍留在原欄位基準。 */
@media (min-width: 992px) {
  .adventure-step-label {
    right: -2rem;
  }

  .adventure-step-item:nth-child(3n) .adventure-step-label {
    right: -2rem;
  }

  .adventure-step-item:nth-child(3n + 1) .adventure-step-label {
    z-index: 1;
  }

  .adventure-step-item:nth-child(3n + 2) .adventure-step-label {
    z-index: 2;
  }

  .adventure-step-item:nth-child(3n) .adventure-step-label {
    z-index: 3;
  }
}

@media (max-width: 1399.98px) {
  .adventure-steps-layout.container-xxl {
    --bs-gutter-x: 2.5rem;
    padding-top: 7.5rem;
  }

  .adventure-bonus-notice { padding-left: 9.5rem; }

  .adventure-step-list { padding-right: 5rem; }
  .adventure-step-item { min-height: 17rem; }
  .adventure-step-label { min-height: 4.1rem; padding-left: 4.2rem; }
  .adventure-step-number { width: 3.7rem; height: 3.7rem; font-size: 2.5rem; }
  .adventure-step-finish { right: -2rem; width: 14rem; }
}

@media (max-width: 1199.98px) {
  .adventure-bonus-notice {
    width: 92%;
    min-height: 6.5rem;
    padding-right: 2rem;
    padding-left: 8.5rem;
  }

  .adventure-bonus-notice p {
    font-size: 1.375rem;
  }

  .adventure-bonus-clock {
    left: -2rem;
    width: 9rem;
    bottom: -1.25rem;
  }
  .adventure-step-list { margin-top: 3.75rem; padding-right: 4rem; }
  .adventure-step-item { min-height: 15rem; }
  .adventure-step-label { min-height: 3.8rem; padding: 0.6rem 1rem 0.6rem 3.8rem; }
  .adventure-step-label p { font-size: clamp(0.95rem, 1.55vw, 1.2rem); }
  .adventure-step-number { width: 3.3rem; height: 3.3rem; font-size: 2.15rem; }
  .adventure-step-finish { 
    width: 10rem;
    right:0;
    bottom: 11.5%;
  }
}

@media (max-width: 991.98px) {
  .adventure-steps-layout.container-xxl {
    --bs-gutter-x: 2rem;
    padding-top: 7rem;
    padding-bottom: 5rem;
  }

  .adventure-bonus-notice p {
    font-size: 1.25rem;
  }

  .adventure-step-list {
    margin-top: 4rem;
    padding-right: 0;
  }

  .adventure-step-item {
    min-height: 18rem;
  }

  .adventure-step-item:nth-child(odd) {
    --step-shape: polygon(10% 0, 94% 0, 100% 100%, 0 100%);
  }

  .adventure-step-item:nth-child(even) {
    --step-shape: polygon(6% 0, 90% 0, 100% 100%, 0 100%);
  }

  .adventure-step-item:nth-child(4) .adventure-step-label::after,
  .adventure-step-item:nth-child(4) .adventure-step-label::before {
    border-radius: 0;
  }

  .adventure-step-label { min-height: 4.2rem; }
  .adventure-step-label p { font-size: clamp(1rem, 2.2vw, 1.3rem); }
  .adventure-step-number { width: 3.63rem; height: 3.63rem; font-size: 2.4rem; }

  .adventure-step-finish {
    width: 17%;
    right: 0;
    bottom: 9%;   
  }
}

@media (max-width: 767.98px) {
  .adventure-steps-layout.container-xxl {
    --bs-gutter-x: 1.5rem;
    padding-top: 6.5rem;
  }

  .adventure-bonus-notice {
    width: 94%;
    min-height: 0;
    align-items: flex-start;
    padding: 2.5rem 1.5rem 1.5rem;
    border-radius: 2rem;
    box-shadow: 0.45rem 0.55rem 0 rgba(0, 92, 98, 0.24);
  }

  .adventure-bonus-clock {
    top: -4.5rem;
    bottom: auto;
    left: 50%;
    width: 7rem;
    transform: translateX(-50%);
  }
  .adventure-bonus-notice p {
    font-size: 1.25rem;
    line-height: 1.65;
  }
  .adventure-step-finish {
    width: 27%;
    right: 0;
    bottom: 4%;   
  }
  .adventure-step-item { min-height: 16rem; }
}

@media (max-width: 575.98px) {
  .adventure-steps-layout.container-xxl {
    --bs-gutter-x: 1.5rem;
    padding-top: 5rem;
    padding-bottom: 4rem;
  }

  .adventure-bonus-notice {
    width: 96%;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .adventure-bonus-notice p {
    font-size: 1.65rem;
    text-align: justify;
  }

  .adventure-step-list { margin-top: 0; width: 75%;}

  .adventure-step-item {
    --adventure-step-shift: 2.5rem;
    --step-shape: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
    min-height: 0;
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 0;
  }

  .adventure-step-item:nth-child(n) {
    --step-shape: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  }

  .adventure-step-item + .adventure-step-item {
    margin-top: -3rem;
  }

  .adventure-step-art {
    --adventure-step-shift: 2.5rem;
    width: min(75%, 300px);
  }
  .adventure-step-label {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    min-height: 5rem;
    margin-top: var(--adventure-step-shift);
    padding: 0.6rem 0.5rem;
  }
  .adventure-step-label p {
    width: 100%;
    padding-right: 0;
    font-size: 1.375rem;
    text-align: center;
  }
  .adventure-step-number { 
    left: 0;
    top: -1rem;
    width: 4rem;
    height: 4rem;
    font-size: 3rem;
  }
  .adventure-step-finish { 
    
        position: relative;
        width: min(65%, 250px);
        margin-top:2rem;
        margin-right: auto;
        margin-left: auto;
  }
}

/* ========================================================================== 
   學習任務大冒險｜05 注意事項與網大首頁連結
   ========================================================================== */
.adventure-final-section {
  position: relative;
  z-index: 1;
  padding: 0;
  overflow: hidden;
  background-color: #7dd5c4;
  background-image: url("../images/adventure/bg_05.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

.adventure-final-layout.container-xxl {
  --bs-gutter-x: 3rem;
  position: relative;
  width: min(100%, 1300px);
  max-width: 1300px;
  padding-top: 16%;
  padding-bottom: 4.5rem;
}

.adventure-final-content {
  position: relative;
  z-index: 2;
}

.adventure-final-notice {
  padding: 0 1.5rem 2.25rem;
}

.adventure-final-notice h2 {
  display: flex;
  align-items: center;
  margin: 0 0 2rem;
  color: #333;
  font-size: clamp(2rem, 2.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
}

.adventure-final-notice h2 img {
  width: 3.875rem;
  height: auto;
  margin-right: 0.75rem;
}

.adventure-final-copy p {
  margin: 0;
  color: #28504b;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
}

.adventure-final-copy p + p {
  margin-top: 0.35rem;
}

.adventure-final-character {
    position: absolute;
    right: 6%;
    bottom: -15%;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.adventure-final-character img {
  display: block;
  width: min(100%, 650px);
  height: auto;
}

.adventure-learning-button {
  position: relative;
  z-index: 4;
  display: block;
  width: min(78%, 1200px);
  margin: 1rem auto 0;
  border-radius: 999px;
  transition: filter 0.22s ease, transform 0.22s ease;
}

.adventure-learning-button img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  animation: home-link-attention 4s ease-in-out infinite;
}

.adventure-learning-button:hover,
.adventure-learning-button:focus-visible {
  filter: brightness(1.06) drop-shadow(0 0.75rem 0.9rem rgb(24 88 83 / 28%));
  transform: translateY(-0.4rem) scale(1.025);
}

.adventure-learning-button:focus-visible {
  outline: 4px solid var(--activity-focus);
  outline-offset: 0.5rem;
}

.adventure-learning-button:hover img,
.adventure-learning-button:focus-visible img {
  animation-play-state: paused;
}

@media (max-width: 1399.98px) {
  .adventure-final-layout.container-xxl {
    --bs-gutter-x: 2.5rem;
    padding-top: 14rem;
  }

  .adventure-final-notice { padding-bottom: 1.5rem; }
  .adventure-final-notice h2 { margin-bottom: 1.5rem; }
  .adventure-learning-button { width: min(82%, 1100px); }
}

@media (max-width: 1199.98px) {
  .adventure-final-section { 
  background-image: url("../images/adventure/bg_05-md.png");
   }

  .adventure-final-layout.container-xxl {
    --bs-gutter-x: 2rem;
    padding-top: 11.5rem;
    padding-bottom: 4rem;
  }

  .adventure-final-notice h2 { font-size: 2rem; }
  .adventure-final-copy p { font-size: 1.125rem; }
  .adventure-learning-button { width: min(86%, 980px); }
}

@media (max-width: 991.98px) {
  .adventure-final-layout.container-xxl {
    --bs-gutter-x: 1.5rem;
    padding-top: 9rem;
  }

  .adventure-final-notice { width: 50%; padding-right: 0.75rem; }
  .adventure-final-character { width: 40%; }
  .adventure-final-notice h2 { margin-bottom: 1rem; font-size: 1.75rem; }
  .adventure-final-notice h2 img { width: 3.25rem; }
  .adventure-learning-button { width: 92%; margin-top: 0.5rem; }
}

@media (max-width: 767.98px) {
  .adventure-final-section {
    min-height: 0;
    background-position: center top;
    background-size: cover;
  }

  .adventure-final-layout.container-xxl {
    padding-top: 8rem;
    padding-bottom: 4rem;
  }

  .adventure-final-content { align-items: center !important; }
  .adventure-final-notice { width: fit-content; margin-right: auto; margin-left; padding: 5rem 1.5rem 1rem; }
  .adventure-final-character { 
    position: relative;
    width: 100%;
    right: -1%;
  }
  .adventure-final-character img{ 
    position: relative;
    width: min(100%, 430px);
    margin-right: auto;
    margin-left: auto;
    right: -1%;
  }
  .adventure-final-notice h2 { font-size: 1.5rem; }
  .adventure-final-notice h2 img { width: 2.8rem; }
  .adventure-final-copy p { line-height: 1.6; }
  .adventure-learning-button { width: 96%; margin-top: 1rem; }
}

@media (max-width: 575.98px) {
  .adventure-final-section {
    background-image: none;
    background-color: #80D9C3;
  }
  .adventure-final-layout.container-xxl {
    --bs-gutter-x: 1.5rem;
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }

  .adventure-final-notice,
  .adventure-final-character {
 position: relative;
        width: 85%;
        margin-right: auto;
        margin-left: auto;
  }

  .adventure-final-notice {
    padding: 0 0.5rem;
    width: 100%;
  }

  .adventure-final-notice h2 {
    margin-bottom: 1rem;
    font-size: 1.65rem;
  }

  .adventure-final-copy p {
    font-size: 1.125rem;
    text-align: left;
  }

  .adventure-final-character img {
    width: min(95%, 420px);
    margin-top: 1.5rem;
  }

  .adventure-learning-button {
    width: 100%;
    margin-top: -0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adventure-score-qualification-art,
  .adventure-score-qualification-link:hover .adventure-score-qualification-art,
  .adventure-score-qualification-link:focus-visible .adventure-score-qualification-art {
    animation: none;
  }

  .adventure-hero-subtitle,
  .adventure-hero-subtitle:hover,
  .adventure-hero-subtitle:focus-visible {
    transition: none;
    transform: translateX(-50%);
  }

  .adventure-learning-button,
  .adventure-learning-button img,
  .adventure-learning-button:hover,
  .adventure-learning-button:focus-visible,
  .adventure-learning-button:hover img,
  .adventure-learning-button:focus-visible img {
    animation: none;
    transition: none;
    transform: none;
  }
}
/* ========================================================================== 
   Back to School - hero (desktop)
   ========================================================================== */

.back-to-school-page {
    background-color: #c4e5f6;
    overflow-x: clip;
    overflow-y: visible;
}

.bts-hero-section {
    position: relative;
    z-index: 2;
    height: min(43.75vw, 840px);
    min-height: 600px;
    overflow: visible;
}

.bts-hero-stage {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    overflow: visible;
    isolation: isolate;
}

.bts-hero-animate {
    position: relative;
    width: 100%;
    max-width: 1920px;
    aspect-ratio: 1920 / 916;
    overflow: hidden;
}

.bts-hero-animate-frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.bts-hero-static {
    display: none;
}

.bts-hero-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background: url("../images/back-to-school/bg_01.png") no-repeat center top / 100% auto;
    pointer-events: none;
}

.bts-layer {
    position: absolute;
    display: block;
    height: auto;
    user-select: none;
    pointer-events: none;
}

.bts-buildings {
    z-index: 1;
    top: auto;
    bottom: 0;
    left: 23.4%;
    width: 76.72%;
    max-width: 1472.67px;
}

.bts-character-pink {
    z-index: 2;
    top: 34%;
    left: 79%;
    width: 18%;
    max-width: 340px;
}

.bts-hero-title {
    position: absolute;
    z-index: 3;
    top: 2.25%;
    left: 10.5%;
    width: min(53.594%, 1029px);
    margin: 0;
    transform-origin: 50% 60%;
    animation: bts-title-arrive 0.75s 0.15s cubic-bezier(.2, .9, .32, 1.28) both;
}

.bts-hero-title img {
    display: block;
    width: 100%;
    height: auto;
}

.bts-character {
    transform-origin: 50% 100%;
    animation: bts-character-arrive 0.68s cubic-bezier(.18, .9, .32, 1.28) both;
}

.bts-character-orange {
    z-index: 4;
    top: 51%;
    left: 27%;
    width: 24%;
    max-width: 468px;
    animation-delay: 0.48s;
}

.bts-character-mini {
    z-index: 5;
    top: 81%;
    left: 47%;
    width: 10.5%;
    max-width: 198px;
    animation-delay: 0.66s;
}

.bts-character-green {
    z-index: 4;
    top: 50%;
    left: 54%;
    width: 32%;
    max-width: 625px;
    animation-delay: 0.82s;
}

.bts-section-02 {
    position: relative;
    z-index: 1;
    min-height: 0;
    overflow: hidden;
    background-color: #84DBFF;
    background-image: url("../images/back-to-school/bg_02.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
}

/* NB / compact desktop */
@media (max-width: 1399.98px) {
    .bts-hero-section {
        height: clamp(600px, 48vw, 680px);
    }

    .bts-buildings {
        left: 18%;
        width: 84%;
    }

    .bts-hero-title {
        left: 7%;
        width: min(59%, 826px);
    }

    .bts-character-pink {
        left: auto;
        right: 2%;
        width: 20%;
    }

    .bts-character-orange {
        left: 25%;
        width: 27%;
    }

    .bts-character-mini {
        left: 45%;
        width: 11.5%;
    }

    .bts-character-green {
        left: 52.5%;
        width: 35%;
    }
}

/* Tablet landscape / Bootstrap lg boundary */
@media (max-width: 1199.98px) {
    .bts-hero-section {
        height: clamp(580px, 57vw, 650px);
        min-height: 0;
    }

    .bts-hero-title {
        top: 1%;
        left: 2%;
        width: min(60%, 755px);
    }

    .bts-buildings {
        left: 10%;
        width: 96%;
    }

    .bts-character-pink {
        top: 35%;
        right: 1%;
        width: 22%;
    }

    .bts-character-orange {
        top: 51%;
        left: 16%;
        width: 30%;
    }

    .bts-character-mini {
        top: 82%;
        left: 42%;
        width: 12%;
    }

    .bts-character-green {
        top: 50%;
        left: 47%;
        width: 40%;
    }
}

/* Tablet portrait / Bootstrap md boundary */
@media (max-width: 991.98px) {
    .bts-hero-section {
        height: clamp(560px, 72vw, 650px);
    }

    .bts-hero-background {
        background-position: center top;
        background-size: cover;
    }

    .bts-hero-title {
        top: 4%;
        left: 5%;
        width: 68%;
    }

    .bts-buildings {
        left: 2%;
        width: 112%;
    }

    .bts-character-pink {
        top: 39%;
        right: 0;
        width: 25%;
    }

    .bts-character-orange {
        top: auto;
        bottom: 2%;
        left: 10%;
        width: 34%;
    }

    .bts-character-mini {
        top: auto;
        bottom: -2%;
        left: 37%;
        width: 13%;
    }

    .bts-character-green {
        top: auto;
        bottom: -7%;
        left: 45%;
        width: 45%;
    }
}

/* Mobile landscape / Bootstrap sm boundary */
@media (max-width: 767.98px) {
      .bts-hero-background {
      background: url("../images/back-to-school/bg_01-xs.png") no-repeat 48% top / 100% auto;

    }
    .bts-hero-section {
        height: clamp(570px, 114vw, 760px);
    }

    .bts-hero-title {
        top: 3.5%;
        left: 6%;
        width: 88%;
    }

    .bts-buildings {
        left: -7%;
        width: 125%;
    }

    .bts-character-pink {
        top: auto;
        right: 0;
        bottom: 14.5%;
        width: 28%;
    }

    .bts-character-orange {
        bottom: 0;
        left: 0;
        width: 38;
    }

    .bts-character-mini {
        bottom: -2%;
        left: 30%;
        width: 16%;
    }

    .bts-character-green {
        right: 10%;
        bottom: -5%;
        left: auto;
        width: 54%;
    }
}

/* Mobile portrait */
@media (max-width: 575.98px) {
  

    .bts-hero-section {
        height: clamp(540px, 148vw, 680px);
    }

    .bts-section-02 {
        min-height: 280px;
    }

    .bts-hero-title {
        top: 5%;
        left: 1%;
        width: 98%;
    }

    .bts-buildings {
        left: -25%;
        width: 165%;
    }

    .bts-character-pink {
        right: -5%;
        bottom: 13%;
        width: 33%;
    }

    .bts-character-orange {
        bottom: 1%;
        left: -4%;
        width: 40%;
    }

    .bts-character-mini {
        bottom: -1.5%;
        left: 25%;
        width: 18%;
    }

    .bts-character-green {
        right: 8%;
        bottom: -4%;
        width: 60%;
    }
}

@keyframes bts-title-arrive {
    0% {
        opacity: 0;
        transform: translateY(-18px) scale(.9) rotate(-1.5deg);
    }
    70% {
        opacity: 1;
        transform: translateY(4px) scale(1.025) rotate(.35deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes bts-character-arrive {
    0% {
        opacity: 0;
        transform: translateY(42px) scale(.72);
    }
    72% {
        opacity: 1;
        transform: translateY(-5px) scale(1.025);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bts-hero-title,
    .bts-character {
        animation: none;
    }
}

/* ========================================================================== 
   Back to School - 02 Notebook
   ========================================================================== */
.bts-section-02-title img {
    display: block;
    width: 100%;
    height: auto;
}

.bts-section-02-title picture {
    display: block;
}

.bts-notebook-frame {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.bts-notebook-words {
    position: absolute;
    z-index: 2;
    top: 19%;
    left: 16%;
    display: block;
    width: 44%;
    height: auto;
}

.bts-notebook-copy {
    position: absolute;
    z-index: 2;
    top: 18%;
    right: 39%;
    left: 17.5%;
    color: #333;
    font-weight: 600;
    line-height: 1.42;
    letter-spacing: 0.08em;
    display: none;
}

.bts-notebook-copy h3 {
    margin: 0 0 0.55em;
    color: #ea5f86;
    font-size: clamp(1.65rem, 2.25vw, 2.75rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.12em;
}

.bts-notebook-copy p {
    margin: 0 0 0.22em;
    font-size: clamp(1.05rem, 1.5vw, 1.75rem);
}

.bts-notebook-copy strong {
    display: inline-block;
    margin-left: 0.25em;
    padding: 0.05em 1.1em 0.12em;
    border-radius: 999px;
    color: #fff;
    background: #00c93f;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.bts-notebook-character {
    position: absolute;
    z-index: 3;
    top: 10.5%;
    right: 2.5%;
    width: 39%;
    height: auto;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 1199.98px) {
    .bts-notebook-copy {
        top: 17%;
        right: 38%;
        left: 16%;
    }

    .bts-notebook-copy h3 {
        font-size: clamp(1.35rem, 2.3vw, 2rem);
    }

    .bts-notebook-copy p {
        font-size: clamp(0.9rem, 1.55vw, 1.25rem);
    }
}

@media (max-width: 991.98px) {
    .bts-notebook-words {
        top: 18%;
        left: 16%;
        display: block;
        width: 48%;
        height: auto;
    }
    .bts-notebook-character {
        top: 16.5%;
        right: 2.5%;
        width: 35%;
    }
    .bts-notebook-copy h3 {
        margin-bottom: 0.35em;
        font-size: clamp(1.15rem, 2.7vw, 1.65rem);
    }

    .bts-notebook-copy p {
        font-size: clamp(0.78rem, 1.8vw, 1.05rem);
        line-height: 1.35;
    }
}

@media (max-width: 767.98px) {
    .bts-section-02 {
        min-height: 0;
        background-position: center top;
        background-size: cover;
    }

    .bts-section-02-title img {
        width: 90%;
        margin-left:auto;
        margin-right:auto;
    }
    .bts-notebook-copy {
        top: 15%;
        right: 37%;
        left: 15%;
        display: none;
        line-height: 1.3;
        letter-spacing: 0.025em;
    }

    .bts-notebook-words {
        top: 20%;
        left: 16%;
        display: block;
        width: 68%;
    }

    .bts-notebook-copy h3 {
        margin-bottom: 0.35em;
        font-size: clamp(1.05rem, 3.6vw, 1.4rem);
        letter-spacing: 0.05em;
    }

    .bts-notebook-copy p {
        margin-bottom: 0.18em;
        font-size: clamp(0.72rem, 2.25vw, 0.95rem);
    }

    .bts-notebook-copy strong {
        padding-right: 0.65em;
        padding-left: 0.65em;
    }

    .bts-notebook-character {
        top: 60.5%;
        right: 1.5%;
        width: 43%;
    }
}

@media (max-width: 575.98px) {
    .bts-section-02-title img {
        width: 100%;
    }
    .bts-notebook-copy {
        top: 14.5%;
        right: 38%;
        left: 14.5%;
    }

    .bts-notebook-copy h3 {
        font-size: clamp(0.95rem, 4.4vw, 1.2rem);
    }

    .bts-notebook-copy p {
        font-size: clamp(0.66rem, 2.75vw, 0.82rem);
    }

    .bts-notebook-copy strong {
        margin-left: 0;
        padding-right: 0.5em;
        padding-left: 0.5em;
    }

    .bts-notebook-character {
        top: 20%;
        right: 8%;
        width: 35%;
    }
}

/* Section 02 flow-layout:
   標題與 Notebook 由正常排版流撐高，僅螢幕內容維持絕對定位。 */
.bts-section-02 {
    min-height: 0;
    overflow: visible;
    background-color: #84dbff;
    background-position: center bottom;
    background-size: 100% auto;
}

.bts-section-02-stage {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: auto;
    padding-top: 0;
    padding-bottom: clamp(2.5rem, 3vw, 3.75rem);
    aspect-ratio: auto;
}

.bts-section-02-title {
    position: relative;
    z-index: 4;
    top: auto;
    left: auto;
    width: min(69.84%, 1341px);
    margin: 0 auto clamp(2.75rem, 4.2vw, 5rem);
}

.bts-notebook-composition {
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    width: min(70%, 1200px);
    margin: 0 auto;
    aspect-ratio: auto;
}

.bts-notebook-frame {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1199.98px) {
    .bts-section-02-stage {
        padding-top: clamp(3rem, 5vw, 4.5rem);
        padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
    }

    .bts-section-02-title {
        width: 80%;
        margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
    }

    .bts-notebook-composition {
        width: 86%;
    }
}

@media (max-width: 991.98px) {
    .bts-section-02-stage {
        padding-top: clamp(3.5rem, 7vw, 4.75rem);
    }

    .bts-section-02-title {
        width: 86%;
        margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
    }

    .bts-notebook-composition {
        width: 94%;
    }
}

@media (max-width: 767.98px) {
    .bts-section-02 {
        min-height: 0;
        background-position: center top;
        background-size: 130% auto;
    }

    .bts-section-02-stage {
        padding-top: clamp(3.75rem, 11vw, 5rem);
        padding-bottom: clamp(3rem, 8vw, 4rem);
    }

    .bts-section-02-title {
        width: 90%;
        margin-bottom: clamp(2.5rem, 8vw, 4rem);
    }

    .bts-notebook-composition {
        width: 96%;
    }

    .bts-notebook-frame {
        width: 100%;
        height: auto;
        aspect-ratio: 2204 / 1500;
        object-fit: fill;
    }
}

@media (max-width: 575.98px) {
    .bts-section-02-stage {
        padding-top: clamp(3.5rem, 13vw, 4.5rem);
        padding-bottom: clamp(3rem, 10vw, 4rem);
    }

    .bts-section-02-title {
        width: 94%;
        margin-bottom: clamp(2.25rem, 9vw, 3.25rem);
    }

    .bts-notebook-composition {
        width: 98%;
    }

    .bts-notebook-words {
        top: 17%;
        left: 12.5%;
        width: 76%;
    }

    .bts-notebook-character {
        top: 60%;
        right: 1%;
        width: 44%;
    }
}

/* ========================================================================== 
   Back to School - 03 活動參與資格與更新流程
   ========================================================================== */
.bts-qualification-section {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #84dbff;
    background-image: url("../images/back-to-school/bg_03.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

.bts-qualification-layout.container-xxl {
    --bs-gutter-x: 3rem;
    position: relative;
    z-index: 3;
    width: min(100%, 1300px);
    max-width: 1300px;
    padding-top: clamp(4rem, 5vw, 6rem);
    padding-bottom: clamp(7rem, 9vw, 10rem);
}

.bts-qualification-heading {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 35% 65%;
    align-items: center;
    width: min(95%, 1450px);
    min-height: 7rem;
    margin: 0 auto;
    border: 3px solid #342a8e;
    border-radius: 999px;
    background: #6557d8;
    box-shadow: 0 0.75rem 0 rgb(55 48 134 / 24%);
}

.bts-qualification-heading-character {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: -1%;
    width: min(17%, 225px);
    height: auto;
    pointer-events: none;
    user-select: none;
}

.bts-qualification-heading h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    padding-left: 45%;
    color: #fff;
    font-size: clamp(1.65rem, 2vw, 2.5rem);
    text-shadow: 2px 2px 5px #00000090;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

@media (min-width: 1400px) {
    .bts-qualification-heading h2 {
        font-size: 2rem;
    }
}

.bts-qualification-heading-special {
    display: flex;
    min-height: 5.25rem;
    align-items: center;
    justify-content: center;
    margin-right: 0.8rem;
    border-radius: 999px;
    background: #fff;
}

.bts-qualification-heading-special picture {
    display: block;
    width: 100%;
}

.bts-qualification-heading-special img {
    display: block;
    height: 48px;
    margin: 0 auto;
}

.bts-upgrade-flow {
    position: relative;
    z-index: 3;
    margin: 5rem auto 0;
    max-width: 1000px;
}

.bts-upgrade-step {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0 1.75rem;
}

.bts-upgrade-step > img,
.bts-upgrade-step > picture {
    display: block;
    width: min(100%, 443px);
    height: auto;
}

.bts-upgrade-step > picture img {
    display: block;
    width: 100%;
    height: auto;
}

.bts-upgrade-step-link {
    display: block;
    width: min(100%, 443px);
    border-radius: 1.5rem;
}

.bts-upgrade-step-link img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 50%;
    animation: home-link-attention 4s ease-in-out infinite;
}

.bts-upgrade-step-link:hover img,
.bts-upgrade-step-link:focus-visible img {
    animation-play-state: paused;
}

.bts-upgrade-step-link:focus-visible {
    outline: 4px solid var(--activity-focus);
    outline-offset: 0.35rem;
}

.bts-flow-connector {
    position: absolute;
    z-index: 5;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.bts-flow-connector img {
    display: block;
    width: 100%;
    height: auto;
}

.bts-flow-arrow {
    left: 34.5%;
    width: min(8.75%, 112px);
}

.bts-flow-send {
    left: 66.67%;
    width: min(8.5%, 112px);
}

.bts-purple-cloud {
    position: absolute;
    z-index: 1;
    bottom: -20%;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.bts-purple-cloud-left {
    left: -2px;
    bottom:-8%;
    width: min(34.5%, 915px);
}

.bts-purple-cloud-right {
    right: -2px;
    bottom:-8%;
    width: min(34.5%, 873px);
}

@media (max-width: 1199.98px) {
    .bts-qualification-layout.container-xxl {
        --bs-gutter-x: 2.5rem;
        padding-top: clamp(3.5rem, 5vw, 4.75rem);
        padding-bottom: clamp(6rem, 8vw, 8rem);
    }

    .bts-qualification-heading {
        width: 100%;
        min-height: 7rem;
    }

    .bts-qualification-heading h2 {
        padding-left: 45%;
        font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    }

    .bts-qualification-heading-special {
        min-height: 5.25rem;
        padding: 0.65rem 1.4rem;
    }


.bts-qualification-heading-special img {
    height: 40px;
    }
    .bts-upgrade-step {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media (max-width: 991.98px) {
    .bts-qualification-heading {
        width: 100%;
        grid-template-columns: 34% 66%;
    }

    .bts-qualification-heading-character {
        width: 20%;
    }

    .bts-qualification-heading h2 {
        padding-left: 43%;
        font-size: clamp(1.1rem, 2.35vw, 1.45rem);
    }
.bts-qualification-heading-special img {
    height: 33px;
    }
    .bts-upgrade-flow {
        margin-top: clamp(3.5rem, 6vw, 5rem);
    }

    .bts-flow-arrow {
        width: 8%;
    }

    .bts-flow-send {
        width: 6.5%;
    }
}

@media (max-width: 767.98px) {
    .bts-qualification-layout.container-xxl {
        --bs-gutter-x: 1.5rem;
        padding-top: 4rem;
        padding-bottom: 7rem;
    }

    .bts-qualification-heading {
        display: grid;
        width: 100%;
        min-height: 11rem;
        grid-template-columns: 1fr;
        padding: 1rem 0.7rem 0.7rem;
        border-radius: 2.25rem;
    }

    .bts-qualification-heading-character {
        top: -54.5%;
        bottom: auto;
        left: 0.5rem;
        width: min(30%, 150px);
    }

    .bts-qualification-heading h2 {
        align-self: center;
        min-height: 2.8rem;
        padding-left: 27%;
        font-size: clamp(1.15rem, 4.5vw, 1.6rem);
        text-align: center;
    }

    .bts-qualification-heading-special {
        min-height: 6.4rem;
        margin: 0;
        padding: 0.5rem;
        border-radius: 1.35rem;
    }

    .bts-qualification-heading-special img {
        width: min(100%, 565px);
        max-height: 5.25rem;
        height: unset;
    }

    .bts-upgrade-flow {
        margin-top: 2.5rem;
    }

    .bts-upgrade-step {
        padding: 0 12%;
    }

    .bts-upgrade-step > picture,
    .bts-upgrade-step-link {
        width: 90%;
    }

    .bts-flow-connector {
        position: relative;
        top: auto;
        left: auto;
        flex: 0 0 100%;
        width: 100%;
        height: 4.25rem;
        transform: none;
    }

    .bts-flow-arrow img {
        width: 4.025rem;
        transform: rotate(90deg);
    }

    .bts-flow-send img {
        width: 4.3125rem;
    }

    .bts-purple-cloud {
        bottom: -5%;
        width: 62%;
        opacity: 0.95;
    }

    .bts-purple-cloud-left {
        left: -23%;
    }

    .bts-purple-cloud-right {
        right: -22%;
    }
}

@media (max-width: 575.98px) {
    .bts-qualification-layout.container-xxl {
        padding-top: 3.5rem;
        padding-bottom: 6rem;
    }

    .bts-qualification-heading {
        width: 96%;
    }

    .bts-qualification-heading-character {
        top: -40.4%;
        left: -3.5%;
        width: 32.5%;
    }

    .bts-qualification-heading h2 {
        padding-left: 10%;
        font-size: 1.75rem;
    }

    .bts-upgrade-step {
        padding-right: 10%;
        padding-left: 10%;
    }

    .bts-purple-cloud {
        width: 72%;
    }
}

/* ========================================================================== 
   Back to School - 04 AI完訓證書加碼任務
   ========================================================================== */
.bts-training-section {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #eeebff;
    background-image: url("../images/back-to-school/bg_04.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

.bts-training-layout.container-xxl {
    --bs-gutter-x: 3rem;
    position: relative;
    width: min(100%, 1300px);
    max-width: 1300px;
    padding-top: clamp(5rem, 6vw, 7rem);
    padding-bottom: clamp(5rem, 6vw, 7rem);
}

.bts-training-bonus {
    position: relative;
    z-index: 3;
    display: flex;
    width: min(100%, 1680px);
    min-height: 5.5rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 1rem 2.5rem 1rem 5%;
    border: 4px solid #d73ee7;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0.7rem 0.75rem 0 rgb(64 56 103 / 20%);
}

.bts-training-bonus-robot {
    position: absolute;
    z-index: 2;
    bottom: -2rem;
    left: -3rem;
    width: min(9rem, 15%);
    height: auto;
    pointer-events: none;
}

.bts-training-bonus p {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.01em;
}

.bts-training-bonus strong {
    color: #f15a35;
    font-weight: 800;
}

.bts-training-bonus a,
.bts-training-bonus a:hover,
.bts-training-bonus a:focus-visible {
    color: #f15a35;
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.16em;
}

.bts-training-bonus a:hover {
    color: #72247f;
}

.bts-training-bonus a:focus-visible {
    border-radius: 0.2em;
    outline: 3px solid var(--activity-focus);
    outline-offset: 0.18em;
}

.bts-training-steps {
    position: relative;
    z-index: 2;
    margin: 2rem auto;
    padding: 0 5% 0 0;
    list-style: none;
    max-width: 1150px;
}

.bts-training-step {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0.75rem;
    margin-bottom: -1.25rem;
}

.bts-training-step-card {
    position: relative;
    width: min(100%, 433px);
}

.bts-training-step-card > img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.bts-training-step-card p {
    position: absolute;
    z-index: 2;
    right: 5%;
    bottom: 15.5%;
    left: 0;
    width: 100%;
    margin: 0;
    color: #333;
    font-size: clamp(1.5rem, 1.5vw, 1.75rem);
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.bts-training-reward {
    position: absolute;
    z-index: 4;
    right: -2%;
    bottom: 17%;
    display: block;
    width: min(17%, 275px);
    height: auto;
}

@media (max-width: 1399.98px) {
    .bts-training-layout.container-xxl {
        --bs-gutter-x: 2.5rem;
    }

    .bts-training-bonus {
        padding-left: 9.5rem;
    }
.bts-training-steps {
    margin: 2rem 4rem 2rem 0;
    padding: 0;
    list-style: none;
    max-width: 1000px;
}
    .bts-training-step-card p {
        font-size: clamp(0.95rem, 1.75vw, 1.5rem);
    }

    .bts-training-reward {
        right: 1%;
        width: min(16%, 275px);
    }
}

@media (max-width: 1199.98px) {
    .bts-training-layout.container-xxl {
        padding-top: clamp(4.5rem, 6vw, 6rem);
        padding-bottom: 5rem;
    }

    .bts-training-bonus {
        width: 92%;
        min-height: 6.5rem;
        padding-right: 2rem;
        padding-left: 8.5rem;
    }

    .bts-training-bonus-robot {
        left: -2rem;
        width: 9rem;
        bottom: -1.25rem;
    }

    .bts-training-bonus p {
        font-size: 1.375rem;
    }

    .bts-training-reward {
      width: min(14%, 275px);
    }
}

@media (max-width: 991.98px) {
    .bts-training-layout.container-xxl {
        --bs-gutter-x: 2rem;
    }

    .bts-training-bonus p {
        font-size: 1.25rem;
    }

    .bts-training-steps {
        margin-top: 4rem;
    }

    .bts-training-step {
        padding-bottom: 2.75rem;
    }

    .bts-training-step-card p {
        font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    }

    .bts-training-reward {
        width: min(28%, 200px);
        right: 0;
        bottom: 17.5%;
    }
}

@media (max-width: 767.98px) {
    .bts-training-layout.container-xxl {
        --bs-gutter-x: 1.5rem;
        padding-top: 6rem;
        padding-bottom: 4.5rem;
    }

    .bts-training-bonus {
        width: 94%;
        min-height: 0;
        align-items: flex-start;
        padding: 2.5rem 1.5rem 1.5rem;
        border-radius: 2rem;
        box-shadow: 0.45rem 0.55rem 0 rgb(64 56 103 / 20%);
    }

    .bts-training-bonus-robot {
        top: -4.5rem;
        bottom: auto;
        left: 50%;
        width: 7rem;
        transform: translateX(-50%);
    }

    .bts-training-bonus p {
        font-size: 1.375rem;
        line-height: 1.65;
    }

    .bts-training-steps {
        margin-top: 3.5rem;
    }

    .bts-training-step {
        padding: 0 8% 0;
    }

    .bts-training-step-card {
        width: min(75%, 450px);
    }

    .bts-training-step-card p {
        font-size: clamp(1.05rem, 4vw, 1.4rem);
    }

    .bts-training-reward {
        width: min(46%, 220px);
        bottom: 5.5%;
    }
}

@media (max-width: 575.98px) {
    .bts-training-layout.container-xxl {
        padding-top: 5.5rem;
        padding-bottom: 4rem;
    }

    .bts-training-bonus {
        width: 96%;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .bts-training-bonus p {
        font-size: 1.65rem;
        text-align: justify;
    }
    .bts-training-steps {
        margin-top: 3.5rem;
        margin: 2rem 0;
    }
    .bts-training-step {
        padding-right: 15px;
        padding-left: 15px;
        margin-bottom: -0.125rem;
    }

    .bts-training-step-card p {
        right: 0;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 1.375rem;
    }

    .bts-training-reward {
        position: relative;
        width: min(65%, 250px);
        margin-right: auto;
        margin-left: auto;
    }
}

/* ========================================================================== 
   Back to School - 05 注意事項與網大首頁連結
   ========================================================================== */
.bts-final-section {
    position: relative;
    padding-top: 2rem;
    z-index: 1;
    overflow: hidden;
    background-color: #c9e8fb;
    background-image: url("../images/back-to-school/bg_05.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

.bts-final-layout.container-xxl {
    --bs-gutter-x: 3rem;
    position: relative;
    z-index: 3;
    width: min(100%, 1320px);
    max-width: 1320px;
    padding-top: clamp(3rem, 4vw, 4.75rem);
    padding-bottom: clamp(4.5rem, 6vw, 6.5rem);
}

.bts-final-content {
    position: relative;
    z-index: 3;
}

.bts-final-character-column {
    display: flex;
    justify-content: center;
}

.bts-final-character {
    display: block;
    left: 2%;
    top: -15%;
    position: absolute;
    width: min(100%, 425px);
    height: auto;
}

.bts-final-notice {
    padding-right: 2rem;
    padding-left: 2rem;
}

.bts-final-notice h2 {
    margin: 0 0 clamp(1.5rem, 2.25vw, 2.5rem);
}

.bts-final-notice h2 img {
    display: block;
    width: min(40%, 320px);
    height: auto;
    margin: 0 auto;
}

.bts-final-notice p {
    margin: 0;
    color: #28504b;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.bts-home-button {
    position: relative;
    z-index: 4;
    display: block;
    width: min(78%, 1204px);
    margin: clamp(1.5rem, 2.5vw, 3rem) auto 0;
    border-radius: 999px;
    transform-origin: 50% 50%;
    transition: filter 0.22s ease, transform 0.22s ease;
}

.bts-home-button img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 50%;
    animation: home-link-attention 4s ease-in-out infinite;
}

.bts-home-button:hover,
.bts-home-button:focus-visible {
    filter: brightness(1.06) drop-shadow(0 0.75rem 0.9rem rgb(24 88 83 / 28%));
    transform: translateY(-0.4rem) scale(1.025);
}

.bts-home-button:focus-visible {
    outline: 4px solid var(--activity-focus);
    outline-offset: 0.5rem;
}

.bts-home-button:hover img,
.bts-home-button:focus-visible img {
    animation-play-state: paused;
}

.bts-footer-tree {
    position: absolute;
    z-index: 1;
    bottom: 0;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.bts-footer-tree-left {
    left: 0;
    width: min(20%, 513px);
}

.bts-footer-tree-right {
    right: 0;
    width: min(20%, 449px);
}
@media (max-width: 1399.98px) {
    .bts-final-content {
        padding-left: 15%;
    }
}

@media (max-width: 1199.98px) {
    .bts-final-layout.container-xxl {
        --bs-gutter-x: 2.5rem;
        padding-top: clamp(3rem, 5vw, 4rem);
        padding-bottom: 5rem;
    }
    .bts-final-content {
        padding-left: 25%;
    }
    .bts-final-notice h2 img {
        width: min(48%, 350px);
    }

    .bts-final-notice p {
        font-size: 1.125rem;
    }

    .bts-home-button {
        width: min(84%, 1100px);
    }
}

@media (max-width: 991.98px) {
    .bts-final-layout.container-xxl {
        --bs-gutter-x: 2rem;
        padding-bottom: 4.5rem;
    }

    .bts-final-character {
        width: min(75%, 380px);
        top: -25%;
    }

    .bts-final-notice {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .bts-final-notice h2 img {
        width: min(58%, 320px);
    }

    .bts-home-button {
        width: 90%;
    }
}

@media (max-width: 767.98px) {
    .bts-final-layout.container-xxl {
        --bs-gutter-x: 1.5rem;
        padding-top: 3.5rem;
        padding-bottom: 5rem;
    }

    .bts-final-content {
        --bs-gutter-y: 2rem;
        padding-left: 0;
    }

    .bts-final-character {
        width: min(74%, 430px);
        position: relative;
    }

    .bts-final-notice {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .bts-final-notice h2 {
        margin-bottom: 1.5rem;
    }

    .bts-final-notice h2 img {
        width: min(62%, 300px);
    }

    .bts-final-notice p {
        line-height: 1.6;
    }

    .bts-home-button {
        width: 94%;
        margin-top: 2.5rem;
    }

    .bts-footer-tree-left {
        left: -10%;
        width: 42%;
    }

    .bts-footer-tree-right {
        right: -9%;
        width: 38%;
    }
}

@media (max-width: 575.98px) {
    .bts-final-layout.container-xxl {
        padding-top: 1rem;
        padding-bottom: 3.5rem;
    }

    .bts-final-character {
      position: relative;
        width: min(95%, 420px);
    }

    .bts-final-notice h2 img {
        width: min(72%, 280px);
    }

    .bts-final-notice p {
        font-size: 1.125rem;
        text-align: left;
    }

    .bts-home-button {
        width: 98%;
        margin-top: -15px;
    }

    .bts-footer-tree-left {
        left: -18%;
        width: 55%;
    }

    .bts-footer-tree-right {
        right: -16%;
        width: 50%;
    }
}

@media (min-width: 768px) {
    .bts-hero-section {
        height: min(47.708333vw, 916px);
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    .bts-hero-animate {
        display: none;
    }

    .bts-hero-static {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bts-hero-animate {
        display: none;
    }

    .bts-hero-static {
        display: block;
    }

    .bts-upgrade-step-link img,
    .bts-upgrade-step-link:hover img,
    .bts-upgrade-step-link:focus-visible img {
        animation: none;
    }

    .bts-home-button,
    .bts-home-button img,
    .bts-home-button:hover,
    .bts-home-button:focus-visible,
    .bts-home-button:hover img,
    .bts-home-button:focus-visible img {
        animation: none;
        transition: none;
        transform: none;
    }
}