@charset "UTF-8";
.newsArea .plusArrow, .aboutArea .Txt .itemBox .item, .popWindowArea .close::before, .popWindowArea .close::after, .popWindowArea .close {
  transition: all 0.5s ease-in-out;
}

.popWindowArea {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 100vh;
  /*以防有不支援dvh的瀏覽器*/
  height: 100dvh;
  line-height: 1.8;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.7s;
}
.popWindowArea .popWindowMask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: all 0.7s;
}
.popWindowArea .popWindowBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
  width: 800px;
  max-width: 90%;
  height: auto;
  max-height: 85vh;
  opacity: 0;
  background-color: #fff;
  transition: all 0.7s;
}
.popWindowArea .popWindowContent {
  height: 100%;
  overflow-y: auto;
  overflow-x: clip;
}
.popWindowArea .popWindowContent p:last-child {
  margin-bottom: 0;
}
.popWindowArea img {
  display: block;
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
}
.popWindowArea .Txt {
  padding: 30px;
}
.popWindowArea .close {
  width: 46px;
  height: 46px;
  background-color: #1265D3;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.popWindowArea .close::before, .popWindowArea .close::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 23px;
  width: 25px;
  height: 1px;
  background-color: #fff;
}
.popWindowArea .close::before {
  transform: rotate(45deg);
}
.popWindowArea .close::after {
  transform: rotate(-45deg);
}
@media (min-width: 1181px) {
  .popWindowArea .close:hover {
    background-color: #1265D3;
  }
  .popWindowArea .close:hover::before {
    transform: rotate(-30deg);
  }
  .popWindowArea .close:hover::after {
    transform: rotate(30deg);
  }
}
.popWindowArea.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.popWindowArea.show .popWindowMask,
.popWindowArea.show .popWindowBox {
  opacity: 1;
}
.popWindowArea.show .popWindowBox {
  transform: translate(-50%, -50%);
}
@media (max-width: 1180px) {
  .popWindowArea .popWindowContent {
    max-height: calc(100vh - 150px);
    /*以防有不支援dvh的瀏覽器*/
    max-height: calc(100dvh - 150px);
  }
}

.outerWrap {
  padding-top: 0;
}
@media (max-width: 500px) {
  .outerWrap {
    padding-top: 35px;
  }
}

.mainArea {
  padding: 0;
}

.bannerArea {
  position: relative;
  height: 100dvh;
  background-image: url("../../images/tw/bn_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
}
@media (max-width: 1180px) {
  .bannerArea {
    background-size: cover;
  }
}
@media (max-width: 650px) {
  .bannerArea {
    height: 85dvh;
  }
}
@media (max-width: 768px) {
  .bannerArea {
    height: auto;
    padding: 90px 0 50px;
  }
}
.bannerArea .bannerBox {
  position: relative;
}
.bannerArea .bannerList {
  position: relative;
  z-index: 1;
}
.bannerArea .bannerList.slick-dotted {
  margin-bottom: 0;
}
@media (max-width: 1180px) {
  .bannerArea .bannerList {
    height: 100dvh;
  }
  .bannerArea .bannerList .slick-list,
  .bannerArea .bannerList .slick-track {
    height: 100%;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerList {
    height: auto;
  }
  .bannerArea .bannerList .slick-list,
  .bannerArea .bannerList .slick-track {
    height: auto;
  }
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem {
    display: flex !important;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerItem {
    height: auto;
  }
}
.bannerArea .bannerItem .bannerVisual {
  position: absolute;
  right: 0;
  bottom: -22%;
  width: 1150px;
  aspect-ratio: 1150/862;
  pointer-events: none;
  z-index: 1;
}
.bannerArea .bannerItem .bannerVisual .bannerVisualInner {
  position: relative;
  width: 100%;
  height: 100%;
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .bannerVisual .bannerVisualInner {
    position: absolute;
    top: 10%;
    left: 50%;
    height: auto;
    aspect-ratio: 1150/862;
    transform: translateX(-50%);
  }
}
@media (max-width: 960px) {
  .bannerArea .bannerItem .bannerVisual .bannerVisualInner {
    top: 15%;
  }
}
@media (max-width: 1600px) {
  .bannerArea .bannerItem .bannerVisual {
    width: 65vw;
    bottom: -19%;
  }
}
@media (max-width: 1420px) {
  .bannerArea .bannerItem .bannerVisual {
    width: 72vw;
    right: -5%;
    bottom: -20%;
  }
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .bannerVisual {
    position: relative;
    right: auto;
    bottom: auto;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    aspect-ratio: auto;
    overflow: hidden;
  }
}
@media (max-width: 660px) {
  .bannerArea .bannerItem .bannerVisual {
    width: 125%;
    margin-left: -12.5%;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .bannerVisual {
    display: none;
  }
}
.bannerArea .bannerItem .bannerVisual .bannerPhoneAnimation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bannerArea .bannerItem .bannerVisual .bannerPhoneAnimation svg {
  width: 100% !important;
  height: 100% !important;
}
.bannerArea .bannerItem .bannerVisual .bannerInvestAnimation {
  position: absolute;
  top: -5%;
  left: 16%;
  width: 26%;
  aspect-ratio: 802/659;
  animation: bannerInvestFloat 4s ease-in-out infinite;
}
.bannerArea .bannerItem .bannerVisual .bannerInvestAnimation svg {
  width: 100% !important;
  height: 100% !important;
}
.bannerArea .bannerItem .bannerVisual .bannerRiskAnimation {
  position: absolute;
  top: -11%;
  right: 21%;
  width: 21%;
  aspect-ratio: 625/638;
  animation: bannerRiskFloat 4.5s ease-in-out infinite;
}
.bannerArea .bannerItem .bannerVisual .bannerRiskAnimation svg {
  width: 100% !important;
  height: 100% !important;
}
.bannerArea .bannerItem .bannerVisual .bannerSoundAnimation {
  position: absolute;
  bottom: 48%;
  right: 14%;
  width: 18%;
  aspect-ratio: 483/553;
  animation: bannerSoundFloat 4s ease-in-out infinite;
}
.bannerArea .bannerItem .bannerVisual .bannerSoundAnimation svg {
  width: 100% !important;
  height: 100% !important;
}
.bannerArea .bannerItem .bannerVisual .bannerMessageAnimation {
  position: absolute;
  bottom: 36%;
  left: 18%;
  width: 20%;
  aspect-ratio: 688/678;
  animation: bannerMessageFloat 4.2s ease-in-out infinite;
}
.bannerArea .bannerItem .bannerVisual .bannerMessageAnimation svg {
  width: 100% !important;
  height: 100% !important;
}
.bannerArea .bannerItem .bannerVisual .bannerMenAnimation {
  position: absolute;
  bottom: 28%;
  left: 4%;
  width: 11%;
  aspect-ratio: 483/855;
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .bannerVisual .bannerMenAnimation {
    display: none;
  }
}
.bannerArea .bannerItem .bannerVisual .bannerMenAnimation svg {
  width: 100% !important;
  height: 100% !important;
}
.bannerArea .bannerItem .bannerVisual .warn {
  position: absolute;
  z-index: 10;
  top: 12%;
  right: 17%;
  width: 10.6%;
  animation: badgeFloat 5.4s ease-in-out infinite;
}
.bannerArea .bannerItem .bannerVisual .warn img {
  display: block;
  width: 100%;
}
.bannerArea .bannerItem .bannerVisual .protection {
  position: absolute;
  z-index: 10;
  top: 25%;
  left: 24%;
  width: 5.4%;
  animation: badgeFloat 6.6s -2.4s ease-in-out infinite;
}
.bannerArea .bannerItem .bannerVisual .protection img {
  display: block;
  width: 100%;
}
.bannerArea .bannerItem .bannerVisual .women {
  position: absolute;
  z-index: 10;
  right: 18%;
  bottom: 25%;
  transform-origin: bottom center;
  animation: characterSway 5.9s -1.3s ease-in-out infinite;
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .bannerVisual .women {
    display: none;
  }
}
.bannerArea .bannerItem .bannerVisual .women img {
  display: block;
  width: 100%;
}
.bannerArea .bannerItem .Txt {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  height: 100dvh;
  padding: 0 50px;
  align-items: flex-start !important;
}
.bannerArea .bannerItem .Txt .textBox {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 50%;
  width: 100%;
}
@media (max-width: 1600px) {
  .bannerArea .bannerItem .Txt .textBox {
    max-width: 46%;
  }
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .Txt .textBox {
    max-width: 100%;
    flex: 0 0 auto;
    padding-top: 12vh;
    text-align: center;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt .textBox {
    padding-top: 5vh;
  }
}
.bannerArea .bannerItem .Txt .decoTitle {
  color: #1265D3;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 33.6px */
  letter-spacing: 2.88px;
  margin-bottom: 10px;
  opacity: 0;
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .Txt .decoTitle {
    font-size: 20px;
    letter-spacing: 1.5px;
  }
}
@media (max-width: 800px) {
  .bannerArea .bannerItem .Txt .decoTitle {
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  .bannerArea .bannerItem .Txt .decoTitle {
    display: none;
  }
}
.bannerArea .bannerItem .Txt .title {
  color: #000;
  font-size: 56px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 78.4px */
  letter-spacing: 1.68px;
  opacity: 0;
}
@media (max-width: 1700px) {
  .bannerArea .bannerItem .Txt .title {
    font-size: 50px;
  }
}
@media (max-width: 1310px) {
  .bannerArea .bannerItem .Txt .title {
    font-size: 45px;
    margin-top: 0;
  }
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .Txt .title {
    font-size: 40px;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt .title {
    font-size: 30px;
    letter-spacing: 0px;
  }
}
.bannerArea .bannerItem .Txt .subtitle {
  color: #1265D3;
  font-size: 56px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 78.4px */
  letter-spacing: 1.68px;
  margin-top: 10px;
  opacity: 0;
}
@media (max-width: 1700px) {
  .bannerArea .bannerItem .Txt .subtitle {
    font-size: 50px;
  }
}
@media (max-width: 1310px) {
  .bannerArea .bannerItem .Txt .subtitle {
    font-size: 45px;
    margin-top: 0;
  }
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .Txt .subtitle {
    font-size: 40px;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt .subtitle {
    font-size: 30px;
    letter-spacing: 0px;
  }
}
.bannerArea .bannerItem .Txt .text {
  color: #333;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 28.8px */
  letter-spacing: 0.96px;
  margin-top: 10px;
  opacity: 0;
}
@media (max-width: 1700px) {
  .bannerArea .bannerItem .Txt .text {
    width: 80%;
  }
}
@media (max-width: 800px) {
  .bannerArea .bannerItem .Txt .text {
    font-size: 14px;
    width: 100%;
  }
}
.bannerArea .bannerItem .Txt .scroll {
  opacity: 0;
  display: flex;
  align-items: center;
  color: #1265D3;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1px;
  margin-top: 45px;
}
.bannerArea .bannerItem .Txt .scroll .icon {
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1265D3;
  border-radius: 50%;
  margin-left: 15px;
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt .scroll .icon {
    width: 24px;
    height: 24px;
    margin-left: 10px;
  }
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .Txt .scroll {
    font-size: 18px;
    margin-top: 25px;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt .scroll {
    font-size: 15px;
    margin-top: 18px;
  }
}
@media (max-width: 1440px) {
  .bannerArea .bannerItem .Txt {
    padding: 20px 20px 85px;
  }
}
@media (max-width: 1180px) {
  .bannerArea .bannerItem .Txt {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center !important;
    height: auto;
    flex: 0 0 auto;
    padding: 0 20px;
  }
}
@media (max-width: 768px) {
  .bannerArea .bannerItem .Txt {
    padding: 0 16px;
  }
}
@media (max-width: 640px) {
  .bannerArea .bannerItem .Img {
    padding-bottom: 75%;
  }
}
@media (max-width: 480px) {
  .bannerArea .bannerItem .Img {
    padding-bottom: 100%;
  }
}
.bannerArea {
  /*
   * banner 文字進場改由 public/js/banner-text.js（GSAP）驅動，
   * 這裡只負責「動畫開始前的隱藏狀態」與逐字拆解所需的結構樣式。
   *
   * .is-bannerRevealed 由 JS 加上，代表該元素已交由 GSAP 控制可見度；
   * GSAP 未載入或使用者開啟減少動態時，JS 也會補上這個 class 讓文字直接顯示，
   * 因此不會發生文字永遠停在 opacity:0 的情況。
   */
}
.bannerArea .Txt .decoTitle.is-bannerRevealed,
.bannerArea .Txt .title.is-bannerRevealed,
.bannerArea .Txt .subtitle.is-bannerRevealed,
.bannerArea .Txt .text.is-bannerRevealed,
.bannerArea .Txt .scroll.is-bannerRevealed {
  opacity: 1;
}
.bannerArea .Txt .bannerCharMask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.bannerArea .Txt .bannerCharMask.is-space {
  white-space: pre;
}
.bannerArea .Txt .bannerChar {
  display: inline-block;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .bannerArea .Txt .decoTitle,
  .bannerArea .Txt .title,
  .bannerArea .Txt .subtitle,
  .bannerArea .Txt .text,
  .bannerArea .Txt .scroll {
    opacity: 1;
  }
}
.bannerArea .slick-arrow {
  top: 80%;
  left: auto;
}
.bannerArea .slick-arrow.slick-prev {
  right: 110px;
}
.bannerArea .slick-arrow.slick-next {
  right: 50px;
}
@media (max-width: 1180px) {
  .bannerArea .slick-arrow {
    display: none !important;
  }
}
.bannerArea .slick-dots {
  bottom: 50%;
  right: 50px;
  transform: translateY(50%);
}
@media (max-width: 1180px) {
  .bannerArea .slick-dots {
    bottom: 20px;
    right: auto;
    left: 50%;
    width: auto;
    transform: translateX(-50%);
  }
  .bannerArea .slick-dots.vertical {
    display: flex;
    flex-direction: row;
  }
  .bannerArea .slick-dots li {
    margin: 0 4px;
  }
}

@keyframes bannerInvestFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}
@keyframes bannerRiskFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(14px);
  }
}
@keyframes bannerSoundFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@keyframes bannerMessageFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
/*
 * 角色裝飾圖的輕微搖擺（.women02／.woker／.workMen02）
 *
 * 這三張都是站在 ImgBox 邊緣的直立人物（以 <img> 載入，SVG 內部無法選取，
 * 因此只能整張動）。用 transform-origin: bottom center 讓旋轉軸落在腳底，
 * 看起來像重心輕微轉移；若改用上下浮動會變成人物在半空漂浮，不自然。
 *
 * 幅度取 2.6deg：人物高度 219～327px，換算頭部左右位移約 10～15px，
 * 擺動看得出來但腳底仍穩在原位。三個角色的 duration 與 delay 各自錯開，
 * 避免同步擺動顯得機械。
 *
 * 中段插入不同的 cubic-bezier，讓來回不是等速的正弦波（沿用本檔
 * floatIconMark／floatIconProtect 既有的做法）。
 */
@keyframes characterSway {
  0% {
    transform: rotate(-2.6deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1);
  }
  38% {
    transform: rotate(2.1deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  62% {
    transform: rotate(2.6deg);
    animation-timing-function: cubic-bezier(0.35, 0, 0.45, 1);
  }
  100% {
    transform: rotate(-2.6deg);
  }
}
/*
 * banner 徽章類小圖（.warn／.protection）的漂浮。
 * 這兩個是懸空的圖示（非人物），可以自由上下飄並帶一點旋轉，
 * 幅度比人物大；.warn 是警示標誌，給它稍快的節奏。
 */
@keyframes badgeFloat {
  0% {
    transform: translateY(0) rotate(-3deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.35, 1);
  }
  35% {
    transform: translateY(-14px) rotate(2.5deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  68% {
    transform: translateY(-6px) rotate(3.5deg);
    animation-timing-function: cubic-bezier(0.35, 0, 0.45, 1);
  }
  100% {
    transform: translateY(0) rotate(-3deg);
  }
}
/*
 * 坐姿插畫（.learnAreaOuter .sitDeco）的起伏。
 * 上下位移為主、輕微傾斜為輔，兩者週期不同步，避免看起來像單純的整體浮動。
 */
@keyframes sitDecoBob {
  0% {
    transform: translateY(0) rotate(-0.8deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.35, 1);
  }
  30% {
    transform: translateY(-5px) rotate(0.5deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  55% {
    transform: translateY(-2px) rotate(1deg);
    animation-timing-function: cubic-bezier(0.35, 0, 0.45, 1);
  }
  78% {
    transform: translateY(-4px) rotate(0.2deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.4, 1);
  }
  100% {
    transform: translateY(0) rotate(-0.8deg);
  }
}
.aboutArea {
  padding: 190px 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #D2E5FF 133.63%);
}
@media (max-width: 1440px) {
  .aboutArea {
    padding: 140px 0;
  }
}
@media (max-width: 1180px) {
  .aboutArea {
    padding: 110px 0;
  }
}
@media (max-width: 960px) {
  .aboutArea {
    padding: 80px 0;
  }
}
@media (max-width: 768px) {
  .aboutArea {
    padding: 60px 0;
  }
}
.aboutArea .wrap {
  max-width: 1600px;
}
.aboutArea .aboutBox {
  display: flex;
  align-items: flex-start;
}
@media (max-width: 960px) {
  .aboutArea .aboutBox {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.aboutArea .Img {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  max-width: 680px;
}
@media (max-width: 1440px) {
  .aboutArea .Img {
    max-width: 560px;
  }
}
@media (max-width: 1180px) {
  .aboutArea .Img {
    max-width: 45%;
  }
}
@media (max-width: 960px) {
  .aboutArea .Img {
    max-width: 500px;
    margin: 0 auto 30px;
  }
}
@media (max-width: 768px) {
  .aboutArea .Img {
    max-width: 100%;
    margin-bottom: 20px;
  }
}
.aboutArea .Img img {
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
}
.aboutArea .Img {
  /*
   * ── 整組進場的時間軸 ──
   *
   * 由 .Img 上的 class 一路推進，讓點陣、軌道環、三個節點共用同一條
   * 時間軸，而不是各自為政（先前節點沒有進場動畫，會在點陣還在淡入時
   * 就全亮，看起來像先有結論才有底圖）。
   *
   *   .is-armed    全部歸零：點陣透明、環未畫、節點縮小透明
   *   .is-entering 點陣由 core_01 往外逐點浮現
   *   .is-drawing  軌道環開始畫線（與點陣尾段重疊，不留空檔）
   *   .is-cores    三個節點依 01→02→03 彈入
   *   .is-entered  全部定裝，釋放 animation 實例
   *
   * 實際時間點見 public/js/taiwan-map.js 的 STEPS。
   */
}
.aboutArea .Img.is-armed .core {
  opacity: 0;
  transform: scale(0.82);
}
.aboutArea .Img .core {
  transition: opacity 0.5s ease-out, transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.aboutArea .Img.is-cores .core, .aboutArea .Img.is-entered .core {
  opacity: 1;
  transform: scale(1);
}
.aboutArea .Img {
  /* 三個節點錯開，形成 01 → 02 → 03 的落點節奏 */
}
.aboutArea .Img.is-cores .core_01 {
  transition-delay: 0s;
}
.aboutArea .Img.is-cores .core_02 {
  transition-delay: 0.13s;
}
.aboutArea .Img.is-cores .core_03 {
  transition-delay: 0.26s;
}
.aboutArea .Img {
  /* 減少動態：節點直接就位（JS 在此模式下不掛任何 class） */
}
@media (prefers-reduced-motion: reduce) {
  .aboutArea .Img .core {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}
.aboutArea .Img {
  /*
   * 台灣點陣圖：inline SVG（見 partials/taiwan_svg.blade.php）。
   * 尺寸行為需與原本的 <img> 一致。
   *
   * ── 動畫設計與效能約束 ──
   * 每顆 <circle> 身上帶兩個產生時就算好的 CSS 變數：
   *   --ed 進場延遲（1282 顆都有）
   *   --wd 常駐擴散波延遲（僅 342 顆 .tw-live 有）
   * 兩者皆依該點到波源（core_01，viewBox 座標約 612,343）的距離換算，
   * 因此不需要任何 JS 逐點計算，HTML 一送到就能開始跑。
   *
   * 只動 opacity：走合成執行緒，不觸發 layout／paint／re-raster。
   * 刻意不動 r（會強制每幀重新光柵化）與 transform（1282 個圖層過重）。
   *
   * 實測（Chrome CDP，240 幀取樣）：
   *   6x CPU 節流，全部 1282 顆循環 → 48.4ms/幀、189/240 掉幀
   *   6x CPU 節流，342 顆循環       → 16.6ms/幀、0 掉幀（等同靜態）
   * 故常駐波只讓四分之一的點參與；點陣密度夠高，視覺上仍讀成整片在呼吸。
   *
   * 進場與常駐波不同時執行：JS 在進場結束後才掛上 .is-live 交棒，
   * 兩段成本不疊加。捲出視窗時移除 .is-live 暫停，不在畫面外燒 CPU。
   */
}
.aboutArea .Img .taiwanMap {
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
  /* 軌道環的畫線過渡；實際的 dashoffset 由 .Img 上的狀態 class 驅動 */
}
.aboutArea .Img .taiwanMap .tw-ring {
  transition: stroke-dashoffset 1.15s cubic-bezier(0.33, 0, 0.2, 1);
}
.aboutArea .Img .taiwanMap {
  /*
   * 減少動態：直接顯示完成狀態。
   * JS 在此模式下不會掛任何 class，這裡只需保證「無 class」時就是完成態。
   */
}
@media (prefers-reduced-motion: reduce) {
  .aboutArea .Img .taiwanMap circle {
    opacity: 1;
    animation: none;
  }
  .aboutArea .Img .taiwanMap .tw-ring {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
}
.aboutArea .Img {
  /*
   * 以下狀態規則掛在 .Img 上（class 由 taiwan-map.js 加在 .Img），
   * 因為軌道環在 SVG 內、三個節點在 SVG 外，共同祖先只有 .Img。
   */
  /*
   * 預設可見。藏起來的責任交給 JS 加的 .is-armed——
   * 若 JS 沒載入或出錯，點陣就是一張靜態圖，不會整片空白。
   */
}
.aboutArea .Img.is-armed .taiwanMap circle {
  opacity: 0;
}
.aboutArea .Img {
  /*
   * 軌道環：進場時由 stroke-dashoffset 畫出來。
   * 兩條環長度分別約 1501 / 1473（getTotalLength 實測），
   * dasharray 取 1600 一次涵蓋，不必逐條精算。
   */
}
.aboutArea .Img.is-armed .taiwanMap .tw-ring {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
}
.aboutArea .Img.is-drawing .taiwanMap .tw-ring, .aboutArea .Img.is-entered .taiwanMap .tw-ring {
  stroke-dasharray: 1600;
  stroke-dashoffset: 0;
}
.aboutArea .Img {
  /* 外圈粗光暈晚一點起跑，讓細線先成形 */
}
.aboutArea .Img.is-drawing .taiwanMap .tw-ring--2 {
  transition-delay: 0.18s;
}
.aboutArea .Img {
  /*
   * 進場：由波源往外逐點浮現，只跑一次。
   *
   * fill-mode 用 forwards 而非 both：動畫結束後停在 opacity:1，
   * 即使 JS 的收尾 setTimeout 沒跑到（分頁被切到背景、腳本出錯），
   * 點陣仍會停在看得見的狀態，不會整片空白。
   * .is-entered 只是把 animation 實例釋放掉，不負責「讓它可見」。
   */
}
.aboutArea .Img.is-entering .taiwanMap circle {
  animation: taiwanDotEnter 0.75s ease-out var(--ed, 0s) forwards;
}
.aboutArea .Img {
  /*
   * 進場結束後改掛 .is-entered，用靜態 opacity 定住，
   * 讓 1282 個 animation 實例全部釋放掉。
   */
}
.aboutArea .Img.is-entered .taiwanMap circle {
  opacity: 1;
  animation: none;
}
.aboutArea .Img {
  /* 常駐擴散波：只有四分之一的點參與 */
}
.aboutArea .Img.is-entered.is-live .taiwanMap .tw-live {
  animation: taiwanDotWave 2.8s linear var(--wd, 0s) infinite;
}
.aboutArea .Img {
  /*
   * 手機只做進場、不跑常駐波。
   * 實測 10x 節流（低階手機）下連 342 顆循環都會掉到 30fps，
   * 而進場是一次性的，掉幾幀不影響觀感。
   */
}
@media (max-width: 768px) {
  .aboutArea .Img.is-entered.is-live .taiwanMap .tw-live {
    animation: none;
  }
}
.aboutArea .Img {
  /*
   * 三個節點圓。
   *
   * 進場順序刻意排在點陣與軌道環之後——節點是「結論」，
   * 底圖與連線先成形，節點才落定，敘事才對。
   * 先前沒有進場動畫，導致節點在點陣還在淡入時就已經全亮，
   * 視覺上像是先有結論才有底圖。
   *
   * 由 .Img 上的 class 控制，時序與 taiwanMap 同一條時間軸
   * （見 public/js/taiwan-map.js）。
   */
}
.aboutArea .Img .core {
  position: absolute;
  will-change: transform;
  width: 18.8%;
}
.aboutArea .Img .core img {
  display: block;
  width: 100%;
  height: auto;
}
.aboutArea .Img .core.core_01 {
  right: 0;
  bottom: 43%;
}
.aboutArea .Img .core.core_02 {
  top: 12%;
  left: 9%;
}
.aboutArea .Img .core.core_03 {
  bottom: 25%;
  left: 22%;
}
.aboutArea .Txt {
  width: 100%;
  margin-bottom: 40px;
  padding-left: 86px;
  padding-right: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 24px;
}
@media (max-width: 768px) {
  .aboutArea .Txt {
    display: block;
  }
}
.aboutArea .Txt .titleBox {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  text-align: left;
  margin-bottom: 0;
}
.aboutArea .Txt .aboutMoreLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  grid-column: 2;
  grid-row: 1;
  flex: 0 0 auto;
  min-width: 180px;
  min-height: 64px;
  margin-top: 6px;
  border-radius: 999px;
  background-color: #1265D3;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
}
.aboutArea .Txt .aboutMoreLink i {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (min-width: 1181px) {
  .aboutArea .Txt .aboutMoreLink:hover {
    color: #fff;
    background-color: #0f53ad;
    transform: translateY(-2px);
  }
}
@media (max-width: 768px) {
  .aboutArea .Txt .aboutMoreLink {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 164px;
    min-height: 52px;
    margin: 28px auto 0;
    font-size: 14px;
  }
}
.aboutArea .Txt .text,
.aboutArea .Txt .textEditor,
.aboutArea .Txt .itemBox {
  grid-column: 1/-1;
}
.aboutArea .Txt .subtitle {
  color: #1265D3;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
}
.aboutArea .Txt .title {
  color: #1265D3;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 1.2px;
}
.aboutArea .Txt .title span {
  color: #000;
}
.aboutArea .Txt .title::after {
  content: "";
  width: 80px;
  height: 2px;
  display: block;
  background-color: #1265D3;
  margin: 35px 0;
}
@media (max-width: 1180px) {
  .aboutArea .Txt .title {
    font-size: 34px;
  }
  .aboutArea .Txt .title::after {
    margin: 25px 0;
  }
}
@media (max-width: 960px) {
  .aboutArea .Txt .title::after {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 768px) {
  .aboutArea .Txt .title {
    font-size: 26px;
  }
  .aboutArea .Txt .title::after {
    width: 60px;
    margin: 18px auto;
  }
}
.aboutArea .Txt .text {
  color: #666;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 28.8px */
  letter-spacing: 0.96px;
}
.aboutArea .Txt .btnBox {
  margin-top: 40px;
}
@media (max-width: 1440px) {
  .aboutArea .Txt {
    padding-left: 50px;
    padding-right: 0;
  }
}
@media (max-width: 1180px) {
  .aboutArea .Txt {
    padding-left: 30px;
  }
}
@media (max-width: 960px) {
  .aboutArea .Txt {
    width: 100%;
    max-width: 680px;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
  .aboutArea .Txt .titleBox {
    text-align: left;
  }
}
@media (max-width: 768px) {
  .aboutArea .Txt .btnBox {
    margin-top: 20px;
  }
}
.aboutArea .Txt .itemBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
  text-align: left;
}
@media (max-width: 1180px) {
  .aboutArea .Txt .itemBox {
    gap: 15px;
    margin-top: 30px;
  }
}
@media (max-width: 480px) {
  .aboutArea .Txt .itemBox {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 25px;
  }
}
.aboutArea .Txt .itemBox .item {
  padding: 30px;
  border-radius: 12px;
  border: 1px solid transparent;
  background-color: #fff;
  /*
   * %ts 的 transition: all .5s 會和 GSAP 每幀寫入的 transform／opacity 打架，
   * 造成進場拖慢、節奏糊掉，因此只讓 border-color 保留過渡（hover 效果需要），
   * transform 與 opacity 交給 GSAP 全權處理。
   * 隱藏狀態見檔案末端的「區塊進場動畫」段落。
   */
  transition-property: border-color;
}
.aboutArea .Txt .itemBox .item .itemTitle {
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 25.2px */
  letter-spacing: 1.08px;
}
.aboutArea .Txt .itemBox .item .itemTitle::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 18px 0;
  background-color: #1265D3;
}
.aboutArea .Txt .itemBox .item .itemText {
  color: #333;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
  letter-spacing: 0.96px;
}
.aboutArea .Txt .itemBox .item.current {
  border-color: #1265D3;
}
@media (min-width: 1181px) {
  .aboutArea .Txt .itemBox .item:hover {
    border-color: #1265D3;
  }
}
@media (max-width: 1180px) {
  .aboutArea .Txt .itemBox .item {
    padding: 24px 20px;
  }
  .aboutArea .Txt .itemBox .item .itemTitle::after {
    margin: 14px 0;
  }
}
@media (max-width: 768px) {
  .aboutArea .Txt .itemBox .item {
    padding: 20px;
  }
  .aboutArea .Txt .itemBox .item .itemTitle {
    font-size: 17px;
  }
  .aboutArea .Txt .itemBox .item .itemTitle::after {
    margin: 12px 0;
  }
  .aboutArea .Txt .itemBox .item .itemText {
    font-size: 15px;
    line-height: 1.8;
  }
}

/*
 * 台灣點陣圖的兩段動畫。
 *
 * 兩者都只動 opacity —— 這是唯一能完全交給合成執行緒、
 * 不觸發 layout／paint 的屬性，也是 1282 個元素能負擔得起的前提。
 */
/* 進場：淡入到底，跑完由 JS 換 class 停掉 */
@keyframes taiwanDotEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*
 * 常駐擴散波。
 *
 * 只動 opacity。曾改用 filter: brightness 讓波峰能「比鄰居更亮」，
 * 但實測 filter 會脫離純合成路徑：
 *     6x 節流 → 5～6 幀掉幀；10x 節流 → 82/240 掉幀
 *     同樣點數改回 opacity → 兩者皆 0 掉幀
 * 效果的一點點加分不值得這個代價，因此維持 opacity。
 *
 * 波形設計成「由 1 往下凹再回來」而不是「由暗往上衝」：
 * 這四分之一的點絕大多數時間必須與不參與的點同為 opacity:1，
 * 否則靜止時會看出一片不規則的斑點。
 * 凹陷幅度只取到 0.62，掃過去像一道陰影推移，不會閃爍刺眼。
 */
@keyframes taiwanDotWave {
  0%, 10% {
    opacity: 1;
  }
  18% {
    opacity: 0.62;
  }
  28%, 100% {
    opacity: 1;
  }
}
.blockArea {
  padding-top: 156px;
}
@media (max-width: 1180px) {
  .blockArea {
    padding-top: 100px;
  }
}
@media (max-width: 768px) {
  .blockArea {
    padding-top: 70px;
  }
}
.blockArea .title {
  position: relative;
  color: #000;
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 56px */
  letter-spacing: 1.2px;
  padding-bottom: 88px;
}
@media (max-width: 1180px) {
  .blockArea .title {
    font-size: 32px;
  }
}
@media (max-width: 768px) {
  .blockArea .title {
    font-size: 26px;
    letter-spacing: 0.8px;
  }
}
.blockArea .title span {
  color: #1265D3;
}
.blockArea .title:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 43px;
  transform: translateX(-50%);
  width: 340px;
  max-width: 100%;
  height: 1px;
  background: linear-gradient(to right, rgba(18, 101, 211, 0) 0%, rgba(18, 101, 211, 0.35) 30%, rgba(18, 101, 211, 0.35) 70%, rgba(18, 101, 211, 0) 100%);
}
.blockArea .title:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 43px;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background-color: #1265D3;
  z-index: 1;
}
@media (max-width: 768px) {
  .blockArea .title {
    padding-bottom: 62px;
  }
  .blockArea .title:after {
    width: 240px;
    bottom: 30px;
  }
  .blockArea .title:before {
    width: 60px;
    bottom: 30px;
  }
}
.blockArea .text {
  color: #333;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 177.778% */
  letter-spacing: 1.08px;
}
@media (max-width: 1180px) {
  .blockArea .text {
    font-size: 16px;
    line-height: 30px;
  }
}
@media (max-width: 768px) {
  .blockArea .text {
    font-size: 15px;
    line-height: 28px;
    letter-spacing: 0.9px;
    text-align: justify;
  }
}

.soundArea {
  position: relative;
  padding-top: 130px;
}
.soundArea .gridDeco {
  position: absolute;
  z-index: 0;
  width: 192px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.soundArea .gridDeco img {
  display: block;
  max-width: 100%;
}
@media (max-width: 1500px) {
  .soundArea .gridDeco {
    width: 150px;
  }
}
@media (max-width: 960px) {
  .soundArea .gridDeco {
    display: none;
  }
}
@media (max-width: 960px) {
  .soundArea {
    padding: 80px 0;
  }
}
@media (max-width: 768px) {
  .soundArea {
    padding: 60px 0 0;
  }
}
.soundArea .wrap {
  position: relative;
  z-index: 1;
  max-width: 1250px;
  padding: 0 25px;
}
.soundArea .soundBox {
  display: flex;
  align-items: center;
  gap: clamp(45px, 7vw, 100px);
}
@media (max-width: 960px) {
  .soundArea .soundBox {
    flex-direction: column;
    gap: 40px;
  }
  .soundArea .soundBox .ImgBox {
    order: 1;
  }
  .soundArea .soundBox .Txt {
    order: 2;
  }
}
.soundArea .Txt {
  width: auto;
  flex: 1 1 0;
}
@media (max-width: 960px) {
  .soundArea .Txt {
    width: 100%;
    max-width: 620px;
  }
}
.soundArea .Txt .titleBox {
  text-align: left;
}
.soundArea .Txt .titleBox .title {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.2px;
  margin-bottom: 30px;
}
.soundArea .Txt .titleBox .title span {
  border-top: 1px solid #1265D3;
  border-bottom: 1px solid #1265D3;
  padding: 10px 0;
}
@media (max-width: 768px) {
  .soundArea .Txt .titleBox .title {
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }
  .soundArea .Txt .titleBox .title span {
    padding: 8px 0;
  }
}
.soundArea .Txt .titleBox .text {
  color: #333;
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 28.8px */
  letter-spacing: 0.96px;
}
@media (max-width: 768px) {
  .soundArea .Txt .titleBox .text {
    font-size: 15px;
    letter-spacing: 0.6px;
    text-align: justify;
  }
}
.soundArea .Txt .itemBox {
  margin-top: 52px;
  text-align: left;
}
@media (max-width: 960px) {
  .soundArea .Txt .itemBox {
    margin-top: 44px;
  }
}
@media (max-width: 768px) {
  .soundArea .Txt .itemBox {
    margin-top: 36px;
  }
}
.soundArea .Txt .itemBox .itemList {
  margin: 0;
  padding: 0;
  list-style: none;
}
.soundArea .Txt .itemBox .item {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 70px;
  border-bottom: 1px solid #d9d9d9;
}
@media (max-width: 768px) {
  .soundArea .Txt .itemBox .item {
    gap: 14px;
    min-height: 62px;
    padding: 12px 0;
  }
}
.soundArea .Txt .itemBox .number {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #1265D3;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
@media (max-width: 768px) {
  .soundArea .Txt .itemBox .number {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    font-size: 15px;
  }
}
.soundArea .Txt .itemBox .itemText {
  color: #333;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.08px;
}
@media (max-width: 768px) {
  .soundArea .Txt .itemBox .itemText {
    font-size: 16px;
  }
}
.soundArea .ImgBox {
  position: relative;
  width: 50%;
  max-width: 560px;
  aspect-ratio: 1/1.04;
  flex: 1 1 0;
  border-radius: 34px;
  background-color: #F3F3F3;
}
.soundArea .ImgBox .js-homeSoundAnimation,
.soundArea .ImgBox .js-homeSoundAnimation svg {
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 960px) {
  .soundArea .ImgBox {
    width: 100%;
    max-width: 620px;
  }
}
@media (max-width: 768px) {
  .soundArea .ImgBox {
    border-radius: 24px;
  }
}
.soundArea .ImgBox .women02 {
  position: absolute;
  width: 62px;
  bottom: -62px;
  right: -29px;
  z-index: 10;
  transform-origin: bottom center;
  animation: characterSway 6.2s ease-in-out infinite;
}
.soundArea .ImgBox .women02 img {
  display: block;
  max-width: 100%;
}
@media (max-width: 960px) {
  .soundArea .ImgBox .women02 {
    width: 52px;
    bottom: -40px;
    right: -18px;
  }
}
@media (max-width: 768px) {
  .soundArea .ImgBox .women02 {
    width: 32px;
    bottom: -20px;
    right: -6px;
  }
}

.messageArea {
  position: relative;
  padding-top: 180px;
}
.messageArea .gridDeco {
  position: absolute;
  z-index: 0;
  width: 269px;
  right: 0;
  top: 0;
  pointer-events: none;
}
.messageArea .gridDeco img {
  display: block;
  max-width: 100%;
}
@media (max-width: 1500px) {
  .messageArea .gridDeco {
    width: 210px;
  }
}
@media (max-width: 960px) {
  .messageArea .gridDeco {
    display: none;
  }
}
@media (max-width: 960px) {
  .messageArea {
    padding: 80px 0;
  }
}
@media (max-width: 768px) {
  .messageArea {
    padding: 60px 0 0;
  }
}
.messageArea .wrap {
  position: relative;
  z-index: 1;
  max-width: 1250px;
  padding: 0 25px;
}
.messageArea .messageBox {
  display: flex;
  align-items: center;
  gap: clamp(45px, 7vw, 100px);
}
@media (max-width: 960px) {
  .messageArea .messageBox {
    flex-direction: column;
    gap: 40px;
  }
  .messageArea .messageBox .ImgBox {
    order: 1;
  }
  .messageArea .messageBox .Txt {
    order: 2;
  }
}
.messageArea .Txt {
  width: auto;
  flex: 1 1 0;
}
@media (max-width: 960px) {
  .messageArea .Txt {
    width: 100%;
    max-width: 620px;
  }
}
.messageArea .Txt .titleBox {
  text-align: left;
}
.messageArea .Txt .titleBox .title {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.2px;
  margin-bottom: 30px;
}
.messageArea .Txt .titleBox .title span {
  border-top: 1px solid #1265D3;
  border-bottom: 1px solid #1265D3;
  padding: 10px 0;
}
@media (max-width: 768px) {
  .messageArea .Txt .titleBox .title {
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }
  .messageArea .Txt .titleBox .title span {
    padding: 8px 0;
  }
}
.messageArea .Txt .titleBox .text {
  color: #333;
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 28.8px */
  letter-spacing: 0.96px;
}
@media (max-width: 768px) {
  .messageArea .Txt .titleBox .text {
    font-size: 15px;
    letter-spacing: 0.6px;
    text-align: justify;
  }
}
.messageArea .Txt .itemBox {
  margin-top: 52px;
  text-align: left;
}
@media (max-width: 960px) {
  .messageArea .Txt .itemBox {
    margin-top: 44px;
  }
}
@media (max-width: 768px) {
  .messageArea .Txt .itemBox {
    margin-top: 36px;
  }
}
.messageArea .Txt .itemBox .itemList {
  margin: 0;
  padding: 0;
  list-style: none;
}
.messageArea .Txt .itemBox .item {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 70px;
  border-bottom: 1px solid #d9d9d9;
}
@media (max-width: 768px) {
  .messageArea .Txt .itemBox .item {
    gap: 14px;
    min-height: 62px;
    padding: 12px 0;
  }
}
.messageArea .Txt .itemBox .number {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #1265D3;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
@media (max-width: 768px) {
  .messageArea .Txt .itemBox .number {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    font-size: 15px;
  }
}
.messageArea .Txt .itemBox .itemText {
  color: #333;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.08px;
}
@media (max-width: 768px) {
  .messageArea .Txt .itemBox .itemText {
    font-size: 16px;
  }
}
.messageArea .ImgBox {
  position: relative;
  width: 50%;
  max-width: 560px;
  aspect-ratio: 1/1.04;
  flex: 1 1 0;
  border-radius: 34px;
  background-color: #F3F3F3;
}
.messageArea .ImgBox .js-homeMessageAnimation,
.messageArea .ImgBox .js-homeMessageAnimation svg {
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 960px) {
  .messageArea .ImgBox {
    width: 100%;
    max-width: 620px;
  }
}
@media (max-width: 768px) {
  .messageArea .ImgBox {
    border-radius: 24px;
  }
}
.messageArea .ImgBox .woker {
  position: absolute;
  width: 185px;
  left: -70px;
  bottom: -152px;
  z-index: 10;
  transform-origin: bottom center;
  animation: characterSway 7.4s -2.1s ease-in-out infinite;
}
.messageArea .ImgBox .woker img {
  display: block;
  max-width: 100%;
}
@media (max-width: 960px) {
  .messageArea .ImgBox .woker {
    width: 150px;
    left: -40px;
    bottom: -46px;
  }
}
@media (max-width: 768px) {
  .messageArea .ImgBox .woker {
    width: 78px;
    left: -12px;
    bottom: -24px;
  }
}

.accountArea {
  position: relative;
  overflow-x: clip;
  padding-top: 180px;
  padding-bottom: 160px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(210, 229, 255, 0.6509803922) 100%);
}
.accountArea .gridDeco {
  position: absolute;
  z-index: 0;
  width: 184px;
  left: -50px;
  top: 60px;
  pointer-events: none;
}
.accountArea .gridDeco img {
  display: block;
  max-width: 100%;
}
@media (max-width: 1500px) {
  .accountArea .gridDeco {
    width: 145px;
    left: -40px;
  }
}
@media (max-width: 960px) {
  .accountArea .gridDeco {
    display: none;
  }
}
@media (max-width: 960px) {
  .accountArea {
    padding: 80px 0;
  }
}
@media (max-width: 768px) {
  .accountArea {
    padding: 60px 0;
  }
}
.accountArea .wrap {
  position: relative;
  z-index: 1;
  max-width: 1250px;
  padding: 0 25px;
}
.accountArea .accountBox {
  display: flex;
  align-items: center;
  gap: clamp(45px, 7vw, 100px);
}
@media (max-width: 960px) {
  .accountArea .accountBox {
    flex-direction: column;
    gap: 40px;
  }
  .accountArea .accountBox .ImgBox {
    order: 1;
  }
  .accountArea .accountBox .Txt {
    order: 2;
  }
}
.accountArea .Txt {
  width: auto;
  flex: 1 1 0;
}
@media (max-width: 960px) {
  .accountArea .Txt {
    width: 100%;
    max-width: 620px;
  }
}
.accountArea .Txt .titleBox {
  text-align: left;
}
.accountArea .Txt .titleBox .title {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.2px;
  margin-bottom: 30px;
}
.accountArea .Txt .titleBox .title span {
  border-top: 1px solid #1265D3;
  border-bottom: 1px solid #1265D3;
  padding: 10px 0;
}
@media (max-width: 768px) {
  .accountArea .Txt .titleBox .title {
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }
  .accountArea .Txt .titleBox .title span {
    padding: 8px 0;
  }
}
.accountArea .Txt .titleBox .text {
  color: #333;
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 28.8px */
  letter-spacing: 0.96px;
}
@media (max-width: 768px) {
  .accountArea .Txt .titleBox .text {
    font-size: 15px;
    letter-spacing: 0.6px;
    text-align: justify;
  }
}
.accountArea .itemBox {
  margin-top: 52px;
  text-align: left;
}
@media (max-width: 960px) {
  .accountArea .itemBox {
    margin-top: 44px;
  }
}
@media (max-width: 768px) {
  .accountArea .itemBox {
    margin-top: 36px;
  }
}
.accountArea .itemBox .itemList {
  margin: 0;
  padding: 0;
  list-style: none;
}
.accountArea .itemBox .item {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 70px;
  border-bottom: 1px solid #d9d9d9;
}
@media (max-width: 768px) {
  .accountArea .itemBox .item {
    gap: 14px;
    min-height: 62px;
    padding: 12px 0;
  }
}
.accountArea .itemBox .number {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #1265D3;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
@media (max-width: 768px) {
  .accountArea .itemBox .number {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    font-size: 15px;
  }
}
.accountArea .itemBox .itemText {
  color: #333;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.08px;
}
@media (max-width: 768px) {
  .accountArea .itemBox .itemText {
    font-size: 16px;
  }
}
.accountArea .ImgBox {
  position: relative;
  width: 50%;
  max-width: 560px;
  aspect-ratio: 1/1.04;
  flex: 1 1 0;
  border-radius: 34px;
  background-color: #F3F3F3;
}
.accountArea .ImgBox .js-homeAccountAnimation,
.accountArea .ImgBox .js-homeAccountAnimation svg {
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 960px) {
  .accountArea .ImgBox {
    width: 100%;
    max-width: 620px;
  }
}
@media (max-width: 768px) {
  .accountArea .ImgBox {
    border-radius: 24px;
  }
}
.accountArea .ImgBox .women02 {
  position: absolute;
  width: 62px;
  bottom: -112px;
  right: -47px;
  z-index: 10;
}
.accountArea .ImgBox .women02 img {
  display: block;
  max-width: 100%;
}
@media (max-width: 960px) {
  .accountArea .ImgBox .women02 {
    width: 52px;
    bottom: -40px;
    right: -22px;
  }
}
@media (max-width: 768px) {
  .accountArea .ImgBox .women02 {
    width: 32px;
    bottom: -20px;
    right: -8px;
  }
}
.accountArea .ImgBox .workMen02 {
  position: absolute;
  width: 95px;
  left: -48px;
  bottom: -77px;
  z-index: 10;
  transform-origin: bottom center;
  animation: characterSway 6.8s -4.3s ease-in-out infinite;
}
.accountArea .ImgBox .workMen02 img {
  display: block;
  max-width: 100%;
}
@media (max-width: 960px) {
  .accountArea .ImgBox .workMen02 {
    width: 80px;
    left: -30px;
    bottom: -24px;
  }
}
@media (max-width: 768px) {
  .accountArea .ImgBox .workMen02 {
    width: 46px;
    left: -10px;
    bottom: -13px;
  }
}

.newsArea {
  padding: 50px 0;
}
.newsArea .newsBox {
  position: relative;
  padding: 20px 0;
}
.newsArea .slick-list {
  padding: 30px 0;
}
@media (max-width: 1180px) {
  .newsArea .slick-list {
    padding: 0;
  }
}
.newsArea .slick-slide:not(.slick-active) {
  pointer-events: none;
  transition: all 0.3s ease;
}
.newsArea .newsItem {
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 30px 0;
}
.newsArea .newsItem::before {
  content: "";
  width: 0;
  height: 1px;
  background-color: #1265D3;
  position: absolute;
  right: 0;
  bottom: -1px;
  transition: all 1s ease;
}
@media (min-width: 1181px) {
  .newsArea .newsItem:hover::before {
    width: 100%;
    left: 0;
    right: auto;
  }
  .newsArea .newsItem:hover .Img {
    visibility: visible;
    opacity: 1;
    transform: translateX(0px);
  }
  .newsArea .newsItem:hover .title a {
    color: #1265D3;
  }
  .newsArea .newsItem:hover .plusArrow {
    border-color: #1265D3;
    background-color: #1265D3;
  }
  .newsArea .newsItem:hover .plusArrow i {
    color: #fff;
  }
}
@media (max-width: 1180px) {
  .newsArea .newsItem {
    padding: 20px 0;
  }
}
@media (max-width: 480px) {
  .newsArea .newsItem {
    padding: 15px 0;
  }
}
.newsArea .item {
  position: relative;
  cursor: pointer;
}
.newsArea .Img {
  width: 320px;
  display: block;
  position: absolute;
  right: 200px;
  top: -60px;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transform: translateX(-20px);
  transition: all 0.5s ease;
  z-index: 9;
}
.newsArea .Img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
@media (max-width: 960px) {
  .newsArea .Img {
    display: none;
  }
}
.newsArea .Txt {
  display: flex;
  position: relative;
}
@media (max-width: 480px) {
  .newsArea .Txt {
    flex-direction: column;
  }
}
.newsArea .newsInfoBox {
  border-right: 1px solid #ccc;
  padding: 0 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.newsArea .newsInfoBox .dateBox {
  text-align: center;
}
.newsArea .newsInfoBox .dateBox .date {
  font-size: 50px;
  font-weight: bold;
  line-height: 1.2;
}
.newsArea .newsInfoBox .dateBox .year {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
@media (max-width: 1440px) {
  .newsArea .newsInfoBox {
    padding: 0 30px;
  }
}
@media (max-width: 1180px) {
  .newsArea .newsInfoBox {
    padding: 0 20px;
  }
  .newsArea .newsInfoBox .dateBox .date {
    font-size: 44px;
  }
  .newsArea .newsInfoBox .dateBox .year {
    font-size: 13px;
    letter-spacing: 0.3px;
  }
}
@media (max-width: 640px) {
  .newsArea .newsInfoBox {
    padding: 0 10px;
  }
  .newsArea .newsInfoBox .dateBox .date {
    font-size: 40px;
  }
  .newsArea .newsInfoBox .dateBox .year {
    font-size: 12px;
    letter-spacing: 0px;
  }
}
@media (max-width: 480px) {
  .newsArea .newsInfoBox {
    width: 100%;
    border: none;
    padding: 0 10px 5px;
  }
  .newsArea .newsInfoBox .dateBox {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .newsArea .newsInfoBox .dateBox .date {
    font-size: 14px;
    letter-spacing: 0px;
    line-height: 1.2;
    font-weight: 500;
  }
  .newsArea .newsInfoBox .dateBox .date::before {
    content: ".";
  }
  .newsArea .newsInfoBox .dateBox .year {
    font-size: 14px;
    letter-spacing: 0px;
    line-height: 1.2;
  }
}
.newsArea .textBox {
  height: 110px;
  width: 100%;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 50px;
}
@media (max-width: 1440px) {
  .newsArea .textBox {
    padding: 0 60px 0 30px;
  }
}
@media (max-width: 1180px) {
  .newsArea .textBox {
    height: 100px;
    padding: 0 30px;
  }
}
@media (max-width: 768px) {
  .newsArea .textBox {
    height: 95px;
    padding: 0 0px 0 20px;
  }
}
@media (max-width: 480px) {
  .newsArea .textBox {
    height: 90px;
    padding: 0 10px;
  }
}
.newsArea .textBox .classTitle {
  min-width: 86px;
  height: 25px;
  align-items: center;
  background-color: #1265D3;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  justify-content: center;
  margin-bottom: 10px;
  padding: 0 15px;
}
@media (max-width: 1180px) {
  .newsArea .textBox .classTitle {
    margin-bottom: 5px;
  }
}
@media (max-width: 768px) {
  .newsArea .textBox .classTitle {
    margin-bottom: 0px;
  }
}
.newsArea .textBox .title {
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 400;
  margin-bottom: 5px;
  padding-right: 100px;
}
.newsArea .textBox .title.ellipsis {
  height: 45px;
  overflow: hidden;
}
@media (max-width: 1440px) {
  .newsArea .textBox .title {
    padding-right: 0;
  }
}
@media (max-width: 1180px) {
  .newsArea .textBox .title {
    margin-bottom: 0;
  }
  .newsArea .textBox .title.ellipsis {
    height: 40px;
  }
}
@media (max-width: 768px) {
  .newsArea .textBox .title.ellipsis {
    height: 36px;
  }
}
.newsArea .textBox .text {
  color: #5C5C5C;
  font-size: clamp(14px, 0.8vw, 16px);
  line-height: 1.5;
}
.newsArea .textBox .text.ellipsis {
  height: 22px;
  overflow: hidden;
}
.newsArea .plusArrow {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  right: 50px;
  top: 50%;
  margin-top: -25px;
}
.newsArea .plusArrow i {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.1);
}
@media (max-width: 1440px) {
  .newsArea .plusArrow {
    right: 0px;
  }
}
@media (max-width: 1180px) {
  .newsArea .plusArrow {
    display: none;
  }
}
.newsArea .linkWrap {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.linkArea {
  padding: 160px 0;
  text-align: center;
  overflow: hidden;
  background-color: #fff;
}
@media (max-width: 1180px) {
  .linkArea {
    padding: 100px 0;
  }
}
@media (max-width: 768px) {
  .linkArea {
    padding: 70px 0;
  }
}
.linkArea .wrap {
  max-width: 100%;
  padding: 0;
}
.linkArea .titleBox {
  margin-bottom: 70px;
}
@media (max-width: 1180px) {
  .linkArea .titleBox {
    margin-bottom: 50px;
  }
}
@media (max-width: 768px) {
  .linkArea .titleBox {
    margin-bottom: 36px;
  }
}
.linkArea .titleBox .title {
  position: relative;
  color: #000;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 56px */
  letter-spacing: 1.2px;
  padding-bottom: 40px;
}
@media (max-width: 1180px) {
  .linkArea .titleBox .title {
    font-size: 32px;
  }
}
.linkArea .titleBox .title:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 340px;
  max-width: 100%;
  height: 1px;
  background-color: #CFD6DE;
}
.linkArea .titleBox .title:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background-color: #1265D3;
  z-index: 1;
}
@media (max-width: 768px) {
  .linkArea .titleBox .title {
    font-size: 26px;
    letter-spacing: 0.8px;
    padding-bottom: 22px;
  }
  .linkArea .titleBox .title:after {
    width: 240px;
  }
  .linkArea .titleBox .title:before {
    width: 60px;
  }
}
.linkArea .logoMarquee {
  --logo-gap: clamp(56px, 8vw, 160px);
  display: grid;
  gap: 22px;
  width: 100%;
}
@media (max-width: 768px) {
  .linkArea .logoMarquee {
    --logo-gap: 46px;
    gap: 16px;
  }
}
.linkArea .logoMarqueeRow {
  overflow: hidden;
}
.linkArea .logoMarqueeTrack {
  display: flex;
  width: max-content;
  will-change: transform;
}
.linkArea .linkList {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  width: max-content;
  margin: 0;
  padding: 0 var(--logo-gap) 0 0;
  list-style: none;
}
.linkArea .linkItem {
  flex: 0 0 clamp(180px, 17vw, 290px);
}
@media (max-width: 768px) {
  .linkArea .linkItem {
    flex-basis: 150px;
  }
}
.linkArea .item,
.linkArea .Img,
.linkArea .Img a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 112px;
}
@media (max-width: 768px) {
  .linkArea .item,
  .linkArea .Img,
  .linkArea .Img a {
    height: 72px;
  }
}
.linkArea .Img {
  margin: 0;
}
.linkArea .Img img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.32);
  transition: filter 0.25s ease, transform 0.25s ease;
}
@media (min-width: 1181px) {
  .linkArea .linkItem a:hover img {
    filter: none;
    transform: scale(1.04);
  }
}

.learnAreaOuter {
  position: relative;
  scroll-margin-top: 180px;
}
@media (max-width: 1180px) {
  .learnAreaOuter {
    scroll-margin-top: 100px;
  }
}
@media (max-width: 768px) {
  .learnAreaOuter {
    scroll-margin-top: 80px;
  }
}
.learnAreaOuter .sitDeco {
  position: absolute;
  z-index: 2;
  width: 113px;
  top: -150px;
  right: 171px;
  pointer-events: none;
  /*
   * 坐姿角色的輕微起伏。
   *
   * 這裡刻意不用 .women02 那組 characterSway（腳底為軸的左右擺動）：
   * 那是給站姿人物的，坐著的角色以底部為軸左右轉會像椅子在翻。
   * 改成上下小幅起伏 + 極輕微傾斜，像坐著時的重心微調與呼吸。
   *
   * 幅度壓在 5px／1deg：這張圖騎在藍色區塊的上緣（top 為負值），
   * 位移太大會讓她看起來浮離邊緣、失去「坐在上面」的感覺。
   */
  transform-origin: bottom center;
  animation: sitDecoBob 5.6s ease-in-out infinite;
}
.learnAreaOuter .sitDeco img {
  display: block;
  max-width: 100%;
}
@media (max-width: 1500px) {
  .learnAreaOuter .sitDeco {
    width: 104px;
    top: -138px;
    right: 90px;
  }
}
@media (max-width: 1180px) {
  .learnAreaOuter .sitDeco {
    width: 90px;
    top: -120px;
    right: 30px;
  }
}
@media (max-width: 960px) {
  .learnAreaOuter .sitDeco {
    width: 76px;
    top: -101px;
    right: 24px;
  }
}
@media (max-width: 768px) {
  .learnAreaOuter .sitDeco {
    width: 58px;
    top: -78px;
    right: 14px;
  }
}
@media (max-width: 480px) {
  .learnAreaOuter .sitDeco {
    width: 46px;
    top: -62px;
    right: 10px;
  }
}

.learnArea {
  position: relative;
  height: 708px;
  max-height: 708px;
  overflow: hidden;
  padding: 0;
  background: #1265d3 url("../../images/tw/grid_center.png") center/cover no-repeat;
}
@media (max-width: 1180px) {
  .learnArea {
    height: 708px;
    max-height: 708px;
    padding: 60px 0 0;
  }
}
@media (max-width: 768px) {
  .learnArea {
    height: 600px;
    max-height: 600px;
    padding: 40px 0 0;
  }
}
@media (max-width: 600px) {
  .learnArea {
    height: 600px;
    max-height: 600px;
  }
}
@media (max-width: 480px) {
  .learnArea {
    padding: 32px 0 0;
  }
}
.learnArea {
  cursor: url("../../images/tw/sight_cursor.svg") 56 56, auto;
}
.learnArea .wrap {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 1400px;
  padding: 0 40px;
}
@media (max-width: 768px) {
  .learnArea .wrap {
    padding: 0 20px;
  }
}
.learnArea .learnBox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 425px) minmax(0, 1fr);
  grid-template-areas: "textOne phone textTwo";
  align-items: center;
  gap: clamp(28px, 5vw, 88px);
  height: 100%;
  min-height: 0;
}
@media (max-width: 1180px) {
  .learnArea .learnBox {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "textOne" "textTwo" "phone";
    justify-items: center;
    align-items: start;
    align-content: start;
    gap: 24px;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .learnArea .learnBox {
    gap: 18px;
  }
}
.learnArea .learnText {
  position: absolute;
  z-index: 1;
  color: #fff;
  max-width: 470px;
}
@media (max-width: 1180px) {
  .learnArea .learnText {
    position: static;
    max-width: 640px;
    width: 100%;
  }
}
.learnArea .learnText.one {
  left: 0;
}
@media (max-width: 1180px) {
  .learnArea .learnText.one {
    grid-area: textOne;
  }
}
.learnArea .learnText.two {
  max-width: 420px;
  right: 0;
  bottom: 16%;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%; /* 44.8px */
  letter-spacing: 1.68px;
}
@media (max-width: 1180px) {
  .learnArea .learnText.two {
    grid-area: textTwo;
    max-width: 640px;
    right: auto;
    bottom: auto;
    font-size: 20px;
    letter-spacing: 1px;
  }
}
@media (max-width: 768px) {
  .learnArea .learnText.two {
    font-size: 16px;
    letter-spacing: 0.5px;
  }
}
.learnArea .learnTitle {
  margin: 0 0 14px;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
@media (max-width: 1440px) {
  .learnArea .learnTitle {
    font-size: 32px;
  }
}
@media (max-width: 1180px) {
  .learnArea .learnTitle {
    font-size: 28px;
  }
}
@media (max-width: 768px) {
  .learnArea .learnTitle {
    font-size: 22px;
    margin-bottom: 8px;
  }
}
.learnArea .learnDescription {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
@media (max-width: 1440px) {
  .learnArea .learnDescription {
    font-size: 22px;
  }
}
@media (max-width: 1180px) {
  .learnArea .learnDescription {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  .learnArea .learnDescription {
    font-size: 16px;
    line-height: 1.7;
  }
}
.learnArea .ImgBox {
  grid-area: phone;
  justify-self: center;
  align-self: start;
  width: 425px;
  max-width: 100%;
  margin-top: 140px;
  aspect-ratio: 425/849;
  background: url("../../images/tw/phone_white.svg") center/contain no-repeat;
  position: relative;
}
@media (max-width: 1180px) {
  .learnArea .ImgBox {
    grid-area: phone;
    align-self: start;
    width: 340px;
    height: auto;
    min-height: 679px;
    margin-top: 10px;
  }
}
@media (max-width: 768px) {
  .learnArea .ImgBox {
    width: 310px;
    min-height: 619px;
    margin-top: 6px;
  }
}
@media (max-width: 600px) {
  .learnArea .ImgBox {
    width: 285px;
    min-height: 569px;
  }
}
@media (max-width: 480px) {
  .learnArea .ImgBox {
    width: 262px;
    min-height: 523px;
  }
}
@media (max-width: 390px) {
  .learnArea .ImgBox {
    width: 240px;
    min-height: 479px;
  }
}
.learnArea .ImgBox .floatIcon {
  position: absolute;
  will-change: transform;
}
.learnArea .ImgBox .floatIcon img {
  max-width: 100%;
  display: block;
}
.learnArea .ImgBox .floatIcon.mark {
  width: 144px;
  left: -15%;
  top: 2%;
  /* 彈跳由內層 img 負責，外層不再做等速浮動 */
  animation: none;
}
@media (max-width: 1180px) {
  .learnArea .ImgBox .floatIcon.mark {
    width: 100px;
    left: -27%;
  }
}
.learnArea .ImgBox .floatIcon.mark {
  /* 持續彈跳：落下 → 觸底壓扁 → 彈起拉長，循環不休息 */
}
.learnArea .ImgBox .floatIcon.mark img {
  transform-origin: 50% 100%;
  will-change: transform;
  animation: markBounce 1.15s infinite;
}
.learnArea .ImgBox .floatIcon.protect {
  width: 71px;
  bottom: 37%;
  right: -4%;
  animation: floatIconProtect 4.3s 0.6s infinite;
}
@media (max-width: 1180px) {
  .learnArea .ImgBox .floatIcon.protect {
    width: 56px;
    bottom: 46%;
    right: -27%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .learnArea .ImgBox .floatIcon.mark, .learnArea .ImgBox .floatIcon.protect {
    animation: none;
  }
  .learnArea .ImgBox .floatIcon.mark img {
    transform: none;
    animation: none;
  }
  .learnArea .ImgBox .floatIcon {
    will-change: auto;
  }
}
@keyframes floatIconMark {
  0% {
    transform: translateY(-9px);
    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  }
  42% {
    transform: translateY(9px);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4);
  }
  58% {
    transform: translateY(4px);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  100% {
    transform: translateY(-9px);
  }
}
.learnArea .ImgBox {
  /*
   * 警示符號的彈跳。重點在模擬重力，而不是等速上下：
   *   落下用 cubic-bezier(0.5, 0, 1, 1)（加速），
   *   彈起用 cubic-bezier(0, 0, 0.4, 1)（減速），
   * 兩段配上觸底瞬間的壓扁（squash）與起跳的拉長（stretch），
   * 才會讀成「有重量的東西在彈」而不是「圖片在飄」。
   *
   * transform-origin 設 50% 100%：壓扁時底邊不動，符合觸地行為。
   * 位移 -26px 比原本的 ±9px 浮動大上約三倍，遠看也很明顯。
   */
}
@keyframes markBounce {
  0% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: cubic-bezier(0, 0, 0.4, 1);
  }
  /* 起跳：稍微拉長 */
  8% {
    transform: translateY(-10px) scale(0.96, 1.05);
  }
  /* 最高點：回到正常比例，短暫滯空 */
  38% {
    transform: translateY(-26px) scale(1, 1);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
  }
  /* 落下加速，接近地面前拉長 */
  72% {
    transform: translateY(-4px) scale(0.97, 1.04);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
  }
  /* 觸底：壓扁 */
  80% {
    transform: translateY(0) scale(1.12, 0.88);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
  }
  /* 回彈成形，帶一點過衝 */
  89% {
    transform: translateY(-3px) scale(0.98, 1.02);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
@keyframes floatIconProtect {
  0% {
    transform: translateY(-6px);
    animation-timing-function: cubic-bezier(0.7, 0, 0.4, 1);
  }
  33% {
    transform: translateY(7px);
    animation-timing-function: cubic-bezier(0.3, 0, 0.7, 0.35);
  }
  52% {
    transform: translateY(-2px);
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.4, 1);
  }
  76% {
    transform: translateY(5px);
    animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  }
  100% {
    transform: translateY(-6px);
  }
}
.learnArea .ImgBox .phoneScreen {
  position: absolute;
  inset: 3.3% 6.2% 2.8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 12% 12% 9% 9%;
  overflow: hidden;
  text-align: center;
  cursor: auto;
}
.learnArea .ImgBox .phoneScreenTitle {
  margin: 80px 0 0;
  color: #111;
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: 0.06em;
}
@media (max-width: 1180px) {
  .learnArea .ImgBox .phoneScreenTitle {
    margin-top: 60px;
    font-size: 18px;
  }
}
@media (max-width: 768px) {
  .learnArea .ImgBox .phoneScreenTitle {
    margin-top: 44px;
  }
}
@media (max-width: 480px) {
  .learnArea .ImgBox .phoneScreenTitle {
    margin-top: 34px;
  }
}
.learnArea .ImgBox .phoneChallengeWrap {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 41%;
  aspect-ratio: 1;
  margin-top: 50px;
}
.learnArea .ImgBox .phoneChallengeWrap[href] {
  cursor: pointer;
}
.learnArea .ImgBox .phoneChallengeWrap::before, .learnArea .ImgBox .phoneChallengeWrap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: clamp(3px, 0.6vw, 6px) solid #d4e3fb;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  animation: phoneChallengeRipple 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.learnArea .ImgBox .phoneChallengeWrap::after {
  animation-delay: 1.2s;
}
.learnArea .ImgBox .phoneChallengeButton {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: clamp(5px, 0.85vw, 9px) solid #d4e3fb;
  border-radius: 50%;
  background-color: #1265d3;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.learnArea .ImgBox .phoneChallengeButton span {
  font-size: clamp(12px, 1vw, 16px);
}
.learnArea .ImgBox .phoneChallengeButton em {
  width: 89px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  font-size: clamp(12px, 1vw, 16px);
  font-style: normal;
  text-align: center;
}
@keyframes phoneChallengeRipple {
  0% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
}
.learnArea .ImgBox .phoneScreenDescription {
  width: 100%;
  margin: 50px 0 0;
  color: #666;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 28.8px */
  letter-spacing: 0.96px;
  padding: 0 40px;
}
@media (max-width: 1180px) {
  .learnArea .ImgBox .phoneScreenDescription {
    margin-top: 32px;
    padding: 0 26px;
    font-size: 13px;
    letter-spacing: 0.5px;
  }
}
@media (max-width: 768px) {
  .learnArea .ImgBox .phoneScreenDescription {
    margin-top: 24px;
    padding: 0 20px;
    font-size: 12px;
    line-height: 1.7;
  }
}
.learnArea::before, .learnArea::after {
  position: absolute;
  z-index: 0;
  color: #0E59BD;
  font-size: 130px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 182px */
  letter-spacing: 3.9px;
  text-transform: uppercase;
  pointer-events: none;
  will-change: transform;
}
@media (max-width: 1600px) {
  .learnArea::before, .learnArea::after {
    font-size: 100px;
  }
}
@media (max-width: 1440px) {
  .learnArea::before, .learnArea::after {
    font-size: 80px;
  }
}
@media (max-width: 1180px) {
  .learnArea::before, .learnArea::after {
    font-size: 62px;
    letter-spacing: 2px;
  }
}
.learnArea::before {
  content: "THINKING";
  left: max(3vw, 32px);
  bottom: 20%;
  transform: translate3d(calc(var(--decoShift, 0px) * -1), 0, 0);
}
@media (max-width: 1180px) {
  .learnArea::before {
    left: -2vw;
    bottom: 4%;
  }
}
.learnArea::after {
  content: "LEARNING";
  right: max(3vw, 32px);
  top: 22%;
  transform: translate3d(var(--decoShift, 0px), 0, 0);
}
@media (max-width: 1180px) {
  .learnArea::after {
    right: -2vw;
    top: 3%;
  }
}

.youtubeArea {
  padding-top: 60px;
}
.youtubeArea .wrap {
  max-width: 100%;
}
.youtubeArea .youtubeItem {
  width: 100%;
}
.youtubeArea .youtubeFrame {
  position: relative;
  width: 100%;
  /*
   * 容器不再固定比例，高度由封面圖本身決定，整張圖完整顯示不裁切。
   * aspect-ratio 僅作為圖片載入前的佔位（避免 CLS），數值對齊後台
   * config/unit/home_video/image.php 的裁切尺寸 1680x720；
   * 後台若改裁切尺寸，這裡的佔位比例要一併更新。
   */
  aspect-ratio: 1680/720;
  overflow: hidden;
  border-radius: 60px;
  background: transparent;
  transform: translateZ(0);
}
@media (max-width: 768px) {
  .youtubeArea .youtubeFrame {
    border-radius: 10px;
  }
}
.youtubeArea .youtubeFrame .youtubeCover {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s ease;
}
.youtubeArea .youtubeFrame {
  /*
   * 滑到封面任一處（不只按鈕本身）就一起有反應：封面微放大、播放鈕跟著放大。
   * 放大倍率刻意與 .youtubePlay 自身的 hover 相同，
   * 滑鼠從封面移到按鈕上時才不會再跳動一次。
   * 這裡不覆寫 background，否則會蓋掉按鈕的漸層而變成一塊平面色。
   */
}
@media (min-width: 1181px) {
  .youtubeArea .youtubeFrame:hover .youtubeCover {
    transform: scale(1.03);
  }
  .youtubeArea .youtubeFrame:hover .youtubePlay {
    transform: translate(-50%, -50%) scale(1.09);
  }
}
.youtubeArea {
  /*
   * 播放鈕：置中疊在封面圖上，點擊以 TitanGallery lightbox 播放影片。
   * 用 button 而非 a，因為它不是連結、而是開啟彈窗的動作（鍵盤與螢幕報讀器行為也較正確）。
   */
}
.youtubeArea .youtubePlay {
  --playSize: clamp(64px, 6.5vw, 96px);
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--playSize);
  height: var(--playSize);
  padding: 0;
  border: clamp(4px, 0.55vw, 7px) solid #d4e3fb;
  border-radius: 50%;
  background-color: #1265D3;
  box-shadow: 0 14px 34px rgba(4, 42, 94, 0.42);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
  /*
   * 兩圈擴散波（::before 與 ::after 錯開半個週期），
   * 與 .phoneChallengeWrap 同一套節奏，維持首頁互動語彙一致。
   * 圓環畫在按鈕外圍，因此用較大的尺寸並置中。
   */
}
.youtubeArea .youtubePlay::before, .youtubeArea .youtubePlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  animation: youtubePlayRipple 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.youtubeArea .youtubePlay::after {
  animation-delay: 1.4s;
}
@media (min-width: 1181px) {
  .youtubeArea .youtubePlay:hover {
    transform: translate(-50%, -50%) scale(1.09);
    box-shadow: 0 18px 42px rgba(4, 42, 94, 0.5);
  }
  .youtubeArea .youtubePlay:hover .youtubePlayIcon {
    transform: scale(1.08);
  }
}
.youtubeArea .youtubePlay:active {
  transform: translate(-50%, -50%) scale(1.02);
}
.youtubeArea .youtubePlay:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .youtubeArea .youtubePlay::before, .youtubeArea .youtubePlay::after {
    animation: none;
  }
}
.youtubeArea {
  /*
   * 白色三角形播放圖示。
   * 用 clip-path 裁切實心方塊，而非 border 疊三角形：
   * 尺寸可直接用 --playSize 換算、放大時邊緣也比 border 作法平順。
   */
}
.youtubeArea .youtubePlayIcon {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(var(--playSize) * 0.21);
  height: calc(var(--playSize) * 0.24);
  margin-left: calc(var(--playSize) * 0.035);
  background-color: #fff;
  clip-path: polygon(8% 0%, 100% 50%, 8% 100%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes youtubePlayRipple {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.75;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.75);
    opacity: 0;
  }
}

.videoArea {
  position: relative;
  padding: 160px 0 140px;
  background: linear-gradient(180deg, #fff 0%, #eef6ff 100%);
  overflow: hidden;
}
.videoArea .happy {
  position: absolute;
  z-index: 1;
  width: 85px;
  left: 30px;
  bottom: 60px;
  pointer-events: none;
  transform-origin: bottom center;
  animation: characterSway 7.1s -3.5s ease-in-out infinite;
}
.videoArea .happy img {
  display: block;
  max-width: 100%;
}
@media (max-width: 1500px) {
  .videoArea .happy {
    width: 70px;
    left: 12px;
    bottom: 40px;
  }
}
@media (max-width: 1180px) {
  .videoArea .happy {
    display: none;
  }
}
@media (max-width: 1180px) {
  .videoArea {
    padding: 70px 0;
  }
}
@media (max-width: 768px) {
  .videoArea {
    padding: 56px 0;
  }
}
.videoArea .wrap {
  max-width: 1300px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
@media (max-width: 768px) {
  .videoArea .wrap {
    display: block;
  }
}
.videoArea .titleBox {
  margin-bottom: 28px;
  grid-column: 1;
  grid-row: 1;
}
@media (max-width: 768px) {
  .videoArea .titleBox {
    margin-bottom: 20px;
  }
}
.videoArea .titleBox .title {
  margin: 0;
  color: #000;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 56px */
  letter-spacing: 2.4px;
}
@media (max-width: 768px) {
  .videoArea .titleBox .title {
    font-size: 28px;
    letter-spacing: 0.04em;
  }
}
.videoArea .titleBox .text {
  margin: 22px 0 0;
  color: #666;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 177.778% */
  letter-spacing: 1.08px;
  text-align: left;
}
@media (max-width: 768px) {
  .videoArea .titleBox .text {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.75;
  }
}
.videoArea .videoTitleRow {
  display: flex;
  align-items: center;
  gap: 46px;
}
@media (max-width: 1180px) {
  .videoArea .videoTitleRow {
    gap: 28px;
  }
}
@media (max-width: 768px) {
  .videoArea .videoTitleRow {
    display: block;
  }
}
.videoArea .videoTitleLine {
  position: relative;
  height: 1px;
  flex: 1;
  background-color: #d9dfe8;
  overflow: hidden;
}
.videoArea .videoTitleLine::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 100%;
  background-color: #1265D3;
}
@media (max-width: 768px) {
  .videoArea .videoTitleLine {
    display: block;
    width: 100%;
    margin-top: 14px;
  }
}
.videoArea .videoMoreLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 180px;
  min-height: 64px;
  flex: 0 0 auto;
  grid-column: 2;
  grid-row: 1;
  margin-left: 46px;
  border-radius: 999px;
  background-color: #1265D3;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.videoArea .videoMoreLink i {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (min-width: 1181px) {
  .videoArea .videoMoreLink:hover {
    color: #fff;
    background-color: #0f53ad;
    transform: translateY(-2px);
  }
}
@media (max-width: 1180px) {
  .videoArea .videoMoreLink {
    margin-left: 28px;
  }
}
@media (max-width: 768px) {
  .videoArea .videoMoreLink {
    min-width: 164px;
    min-height: 52px;
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin: 28px auto 0;
    font-size: 14px;
  }
}
.videoArea .videoClassBox {
  margin-bottom: 20px;
  grid-column: 1/-1;
}
@media (max-width: 768px) {
  .videoArea .videoClassBox {
    margin-bottom: 16px;
  }
}
.videoArea .videoClassBox .classLink {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 768px) {
  .videoArea .videoClassBox .classLink {
    gap: 8px;
  }
}
.videoArea .videoClassBox .classTrigger {
  min-height: 44px;
  padding: 8px 20px;
  border: 1px solid #dde3ec;
  border-radius: 999px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.videoArea .videoClassBox .classTrigger.current {
  border-color: #dbeaff;
  background-color: #dbeaff;
  color: #1265D3;
}
@media (max-width: 768px) {
  .videoArea .videoClassBox .classTrigger {
    min-height: 40px;
    padding: 7px 15px;
    font-size: 14px;
  }
}
.videoArea .videoBox {
  padding: 0;
  grid-column: 1/-1;
  min-width: 0;
}
.videoArea .videoList {
  margin: 0 -19px;
}
@media (max-width: 768px) {
  .videoArea .videoList {
    margin: 0 -10px;
  }
}
.videoArea .slick-list {
  padding: 0;
}
.videoArea .slick-track {
  display: flex;
}
.videoArea .slick-slide {
  height: auto;
  margin: 0 19px;
}
@media (max-width: 768px) {
  .videoArea .slick-slide {
    margin: 0 10px;
  }
}
.videoArea .slick-slide > div,
.videoArea .slick-slide .videoItem,
.videoArea .slick-slide .item {
  height: 100%;
}
.videoArea .videoItem {
  padding: 0;
  border: 0;
}
.videoArea .videoItem::before {
  display: none;
}
.videoArea .item {
  display: flex;
  height: 100%;
  flex-direction: column;
  cursor: pointer;
}
.videoArea .Img {
  position: relative;
  top: auto;
  right: auto;
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  visibility: visible;
  border-radius: 20px;
  opacity: 1;
  transform: none;
  aspect-ratio: 1.55/1;
}
@media (max-width: 768px) {
  .videoArea .Img {
    border-radius: 14px;
  }
}
.videoArea .Img a,
.videoArea .Img img {
  display: block;
  width: 100%;
  height: 100%;
}
.videoArea .Img img {
  max-width: none;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.videoArea .Txt {
  display: block;
  padding: 24px 20px 8px;
}
@media (max-width: 768px) {
  .videoArea .Txt {
    padding: 20px 8px 6px;
  }
}
.videoArea .Txt .date {
  display: block;
  margin-bottom: 12px;
  color: #1265D3;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1.3;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .videoArea .Txt .date {
    margin-bottom: 8px;
    font-size: 13px;
  }
}
.videoArea .Txt .title {
  margin: 0 0 10px;
  overflow: hidden;
  color: #000;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (max-width: 1180px) {
  .videoArea .Txt .title {
    font-size: 18px;
  }
}
.videoArea .Txt .text {
  display: -webkit-box;
  margin: 0;
  color: #666;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 28.8px */
  letter-spacing: 0.96px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (max-width: 768px) {
  .videoArea .Txt .text {
    font-size: 15px;
    line-height: 1.65;
  }
}
.videoArea .linkWrap {
  z-index: 2;
}
.videoArea .slick-arrow {
  z-index: 3;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 18px rgba(30, 64, 175, 0.14);
  font-size: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.videoArea .slick-arrow::before {
  display: none;
}
.videoArea .slick-arrow span {
  display: block;
  width: 16px;
  height: 16px;
  border-top: 2px solid #1265D3;
  border-right: 2px solid #1265D3;
}
.videoArea .slick-arrow.slick-prev {
  left: -94px;
}
@media (max-width: 1360px) {
  .videoArea .slick-arrow.slick-prev {
    left: -45px;
  }
}
@media (max-width: 1180px) {
  .videoArea .slick-arrow.slick-prev {
    left: -10px;
  }
}
.videoArea .slick-arrow.slick-prev span {
  margin-left: 23px;
  transform: rotate(-135deg);
}
.videoArea .slick-arrow.slick-next {
  right: -94px;
}
@media (max-width: 1360px) {
  .videoArea .slick-arrow.slick-next {
    right: -45px;
  }
}
@media (max-width: 1180px) {
  .videoArea .slick-arrow.slick-next {
    right: -10px;
  }
}
.videoArea .slick-arrow.slick-next span {
  margin-left: 17px;
  transform: rotate(45deg);
}
@media (min-width: 1181px) {
  .videoArea .slick-arrow:hover {
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.22);
  }
}
@media (min-width: 1181px) {
  .videoArea:hover .videoItem:hover .Img img {
    transform: scale(1.04);
  }
}

/* ==========================================================================
   區塊進場動畫（public/js/section-reveal.js）

   涵蓋 aboutArea／blockArea／soundArea／messageArea／accountArea／learnArea。
   這裡只負責「動畫開始前的隱藏狀態」與逐行拆解所需的結構樣式，
   實際位移與時間軸由 GSAP + ScrollTrigger 控制。

   .is-revealed 由 JS 加上，代表該元素已交由 GSAP 接手可見度；
   GSAP 未載入或使用者開啟減少動態時，JS 也會補上這個 class 讓內容直接顯示，
   因此不會發生文字永遠停在 opacity:0 的情況。
   ========================================================================== */
.revealLineMask {
  display: block;
  overflow: hidden;
}

.revealLine {
  display: block;
  will-change: transform;
}

.aboutArea .Txt > .title,
.aboutArea .Txt > .text,
.aboutArea .Txt > .textEditor,
.aboutArea .Txt .titleBox > .decoTitle,
.aboutArea .Txt .titleBox > .title,
.aboutArea .Txt .titleBox > .subtitle,
.aboutArea .Txt .titleBox > .text,
.aboutArea .Txt .itemBox > .item,
.blockArea .Txt > .title,
.blockArea .Txt > .text,
.blockArea .Txt > .textEditor,
.blockArea .Txt .titleBox > .decoTitle,
.blockArea .Txt .titleBox > .title,
.blockArea .Txt .titleBox > .subtitle,
.blockArea .Txt .titleBox > .text,
.blockArea .Txt .itemBox > .item,
.soundArea .Txt > .title,
.soundArea .Txt > .text,
.soundArea .Txt > .textEditor,
.soundArea .Txt .titleBox > .decoTitle,
.soundArea .Txt .titleBox > .title,
.soundArea .Txt .titleBox > .subtitle,
.soundArea .Txt .titleBox > .text,
.soundArea .Txt .itemBox > .item,
.messageArea .Txt > .title,
.messageArea .Txt > .text,
.messageArea .Txt > .textEditor,
.messageArea .Txt .titleBox > .decoTitle,
.messageArea .Txt .titleBox > .title,
.messageArea .Txt .titleBox > .subtitle,
.messageArea .Txt .titleBox > .text,
.messageArea .Txt .itemBox > .item,
.accountArea .Txt > .title,
.accountArea .Txt > .text,
.accountArea .Txt > .textEditor,
.accountArea .Txt .titleBox > .decoTitle,
.accountArea .Txt .titleBox > .title,
.accountArea .Txt .titleBox > .subtitle,
.accountArea .Txt .titleBox > .text,
.accountArea .Txt .itemBox > .item {
  opacity: 0;
}
.aboutArea .Txt > .title.is-revealed,
.aboutArea .Txt > .text.is-revealed,
.aboutArea .Txt > .textEditor.is-revealed,
.aboutArea .Txt .titleBox > .decoTitle.is-revealed,
.aboutArea .Txt .titleBox > .title.is-revealed,
.aboutArea .Txt .titleBox > .subtitle.is-revealed,
.aboutArea .Txt .titleBox > .text.is-revealed,
.aboutArea .Txt .itemBox > .item.is-revealed,
.blockArea .Txt > .title.is-revealed,
.blockArea .Txt > .text.is-revealed,
.blockArea .Txt > .textEditor.is-revealed,
.blockArea .Txt .titleBox > .decoTitle.is-revealed,
.blockArea .Txt .titleBox > .title.is-revealed,
.blockArea .Txt .titleBox > .subtitle.is-revealed,
.blockArea .Txt .titleBox > .text.is-revealed,
.blockArea .Txt .itemBox > .item.is-revealed,
.soundArea .Txt > .title.is-revealed,
.soundArea .Txt > .text.is-revealed,
.soundArea .Txt > .textEditor.is-revealed,
.soundArea .Txt .titleBox > .decoTitle.is-revealed,
.soundArea .Txt .titleBox > .title.is-revealed,
.soundArea .Txt .titleBox > .subtitle.is-revealed,
.soundArea .Txt .titleBox > .text.is-revealed,
.soundArea .Txt .itemBox > .item.is-revealed,
.messageArea .Txt > .title.is-revealed,
.messageArea .Txt > .text.is-revealed,
.messageArea .Txt > .textEditor.is-revealed,
.messageArea .Txt .titleBox > .decoTitle.is-revealed,
.messageArea .Txt .titleBox > .title.is-revealed,
.messageArea .Txt .titleBox > .subtitle.is-revealed,
.messageArea .Txt .titleBox > .text.is-revealed,
.messageArea .Txt .itemBox > .item.is-revealed,
.accountArea .Txt > .title.is-revealed,
.accountArea .Txt > .text.is-revealed,
.accountArea .Txt > .textEditor.is-revealed,
.accountArea .Txt .titleBox > .decoTitle.is-revealed,
.accountArea .Txt .titleBox > .title.is-revealed,
.accountArea .Txt .titleBox > .subtitle.is-revealed,
.accountArea .Txt .titleBox > .text.is-revealed,
.accountArea .Txt .itemBox > .item.is-revealed {
  opacity: 1;
}

.aboutArea .Txt > .aboutMoreLink {
  opacity: 0;
}
.aboutArea .Txt > .aboutMoreLink.is-revealed {
  opacity: 1;
}

.learnArea .learnText > .learnTitle,
.learnArea .learnText > .learnDescription {
  opacity: 0;
}
.learnArea .learnText > .learnTitle.is-revealed,
.learnArea .learnText > .learnDescription.is-revealed {
  opacity: 1;
}

.aboutArea .Txt .title::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--drawDuration, 0.5s) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.aboutArea .Txt .title.is-drawn::after {
  transform: scaleX(1);
}
@media (max-width: 960px) {
  .aboutArea .Txt .title::after {
    transform-origin: center center;
  }
}

.videoArea .titleBox .title,
.videoArea .titleBox .text,
.videoArea .videoTitleLine,
.videoArea .videoMoreLink,
.videoArea .classBox,
.videoArea .videoBox {
  opacity: 0;
}
.videoArea .titleBox .title.is-revealed,
.videoArea .titleBox .text.is-revealed,
.videoArea .videoTitleLine.is-revealed,
.videoArea .videoMoreLink.is-revealed,
.videoArea .classBox.is-revealed,
.videoArea .videoBox.is-revealed {
  opacity: 1;
}
.videoArea .videoTitleLine {
  transform-origin: left center;
}
.videoArea {
  /*
   * 類別切換（AJAX）時的淡出淡入，時間需與 home_news_video.js 的
   * FADE_DURATION 一致。進場動畫由 GSAP 以行內 opacity 收尾，
   * 行內樣式權重高於 class，因此淡出這一格必須用 !important 才蓋得過。
   */
}
.videoArea .videoBox {
  transition: opacity 0.3s ease;
}
.videoArea .videoBox.is-switching {
  opacity: 0 !important;
}

.linkArea .titleBox .title {
  opacity: 0;
}
.linkArea .titleBox .title.is-revealed {
  opacity: 1;
}

/*
 * cyberdayFooter：兩段文字逐行上掀，165 專線整塊進場。
 *
 * 這段刻意寫在 home.scss 而不是 master.scss——footer 雖然全站共用，
 * 但 section-reveal.js 只在首頁載入。若把 opacity:0 寫進 master.css，
 * 其他 29 個頁面沒有 JS 會解除隱藏，footer 文字就永遠不見了。
 * home.css 只在首頁引入，隱藏與解除隱藏的範圍才會一致。
 */
.cyberdayFooter .cyberdayFooterTitle,
.cyberdayFooter .cyberdayFooterDescription,
.cyberdayFooter .cyberdayFooterHotline p:not(.cyberdayFooterDeco) {
  opacity: 0;
}
.cyberdayFooter .cyberdayFooterTitle.is-revealed,
.cyberdayFooter .cyberdayFooterDescription.is-revealed,
.cyberdayFooter .cyberdayFooterHotline p:not(.cyberdayFooterDeco).is-revealed {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cyberdayFooter .cyberdayFooterTitle,
  .cyberdayFooter .cyberdayFooterDescription,
  .cyberdayFooter .cyberdayFooterHotline p:not(.cyberdayFooterDeco) {
    opacity: 1;
  }
  .aboutArea .Txt > .title,
  .aboutArea .Txt > .text,
  .aboutArea .Txt > .textEditor,
  .aboutArea .Txt .titleBox > .decoTitle,
  .aboutArea .Txt .titleBox > .title,
  .aboutArea .Txt .titleBox > .subtitle,
  .aboutArea .Txt .titleBox > .text,
  .aboutArea .Txt .itemBox > .item,
  .blockArea .Txt > .title,
  .blockArea .Txt > .text,
  .blockArea .Txt > .textEditor,
  .blockArea .Txt .titleBox > .decoTitle,
  .blockArea .Txt .titleBox > .title,
  .blockArea .Txt .titleBox > .subtitle,
  .blockArea .Txt .titleBox > .text,
  .blockArea .Txt .itemBox > .item,
  .soundArea .Txt > .title,
  .soundArea .Txt > .text,
  .soundArea .Txt > .textEditor,
  .soundArea .Txt .titleBox > .decoTitle,
  .soundArea .Txt .titleBox > .title,
  .soundArea .Txt .titleBox > .subtitle,
  .soundArea .Txt .titleBox > .text,
  .soundArea .Txt .itemBox > .item,
  .messageArea .Txt > .title,
  .messageArea .Txt > .text,
  .messageArea .Txt > .textEditor,
  .messageArea .Txt .titleBox > .decoTitle,
  .messageArea .Txt .titleBox > .title,
  .messageArea .Txt .titleBox > .subtitle,
  .messageArea .Txt .titleBox > .text,
  .messageArea .Txt .itemBox > .item,
  .accountArea .Txt > .title,
  .accountArea .Txt > .text,
  .accountArea .Txt > .textEditor,
  .accountArea .Txt .titleBox > .decoTitle,
  .accountArea .Txt .titleBox > .title,
  .accountArea .Txt .titleBox > .subtitle,
  .accountArea .Txt .titleBox > .text,
  .accountArea .Txt .itemBox > .item {
    opacity: 1;
  }
  .aboutArea .Txt > .aboutMoreLink {
    opacity: 1;
  }
  .learnArea .learnText > .learnTitle,
  .learnArea .learnText > .learnDescription {
    opacity: 1;
  }
  .videoArea .titleBox .title,
  .videoArea .titleBox .text,
  .videoArea .videoTitleLine,
  .videoArea .videoMoreLink,
  .videoArea .classBox,
  .videoArea .videoBox {
    opacity: 1;
  }
  .linkArea .titleBox .title {
    opacity: 1;
  }
  .aboutArea .Txt .title::after {
    transform: scaleX(1);
    transition: none;
  }
  .bannerArea .bannerItem .bannerVisual .warn,
  .bannerArea .bannerItem .bannerVisual .protection,
  .bannerArea .bannerItem .bannerVisual .women,
  .soundArea .ImgBox .women02,
  .messageArea .ImgBox .woker,
  .accountArea .ImgBox .workMen02,
  .learnAreaOuter .sitDeco,
  .videoArea .happy {
    animation: none;
    transform: none;
  }
}