.u-section-1 {
  background-image: url("images/2026_.png");
  background-position: 50% 50%;
  background-size: cover;
  aspect-ratio: 1550 / 1000; /* 完全比照圖片比例，區塊高度會跟著寬度自動換算，圖片不會被裁掉 */
}

.u-section-1 .u-sheet-1 {
  min-height: 0; /* 高度交給上面的 aspect-ratio 決定，不再用寫死的像素高度卡住 */
}

.u-section-1 .u-layout-wrap-1 {
  pointer-events: auto;
  width: 1234px;
  margin: 170px -570px 60px auto;
}

.u-section-1 .u-layout-cell-1 {
  min-height: 737px;
  pointer-events: auto;
  --animation-custom_in-translate_x: 300px;
  --animation-custom_in-scale: 1;
  --animation-custom_in-translate_y: 0px;
}

.u-section-1 .u-container-layout-1 {
  padding: 0;
}

@media (max-width: 1199px) {
  .u-section-1 .u-sheet-1 {
    min-height: 0;
  }

  .u-section-1 .u-layout-cell-1 {
    background-position: 50% 50%;
  }
}

@media (max-width: 991px) {
  .u-section-1 .u-sheet-1 {
    min-height: 0;
  }

  .u-section-1 .u-layout-cell-1 {
    background-position: 4.82% 50%;
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-sheet-1 {
    min-height: 0;
  }

  .u-section-1 .u-layout-wrap-1 {
    width: 540px;
    margin-right: 0;
  }

  .u-section-1 .u-layout-cell-1 {
    min-height: 323px;
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-layout-wrap-1 {
    width: 340px;
  }

  .u-section-1 .u-layout-cell-1 {
    min-height: 203px;
  }
} .u-section-2 {
  filter: none;
  position: relative;
  overflow: hidden;
  background: #04122c; /* 影片載入前的保底底色 */
}

.u-section-2 .u-sheet-1 {
  min-height: 914px;
}

.u-section-2 .u-text-1 {
  margin: 50px 280px 60px 0;
}

@media (max-width: 1199px) {
  .u-section-2 .u-sheet-1 {
    min-height: 697px;
  }

  .u-section-2 .u-text-1 {
    margin-right: -94px;
  }
}

@media (max-width: 991px) {
  .u-section-2 .u-sheet-1 {
    min-height: 573px;
  }
}

@media (max-width: 767px) {
  .u-section-2 .u-sheet-1 {
    min-height: 472px;
  }
}

@media (max-width: 575px) {
  .u-section-2 .u-sheet-1 {
    min-height: 359px;
  }
}.u-section-3 .u-sheet-1 {
  min-height: 1765px;
}

.u-section-3 .u-text-1 {
  margin: 51px 280px 0 0;
}

.u-section-3 .u-image-1 {
  width: 160px;
  height: 160px;
  margin: 44px 932px 0 48px;
}

.u-section-3 .u-image-2 {
  width: 160px;
  height: 160px;
  margin: -160px auto 0 263px;
}

.u-section-3 .u-image-3 {
  width: 160px;
  height: 160px;
  margin: -160px auto 0 478px;
}

.u-section-3 .u-image-4 {
  width: 160px;
  height: 160px;
  margin: -160px 287px 0 auto;
}

.u-section-3 .u-image-5 {
  width: 160px;
  height: 160px;
  margin: -160px 72px 0 auto;
}

.u-section-3 .u-slider-1 {
  min-height: 1271px;
  margin-bottom: 4px;
  margin-top: 24px;
  height: auto;
}

.u-section-3 .u-carousel-indicators-1 {
  position: absolute;
  bottom: 10px;
}

.u-section-3 .u-carousel-item-1 {
  margin-top: 0;
}

.u-section-3 .u-container-layout-1 {
  padding: 30px 50px;
}

.u-section-3 .u-layout-wrap-1 {
  margin-top: 0;
  margin-bottom: 0;
}

.u-section-3 .u-layout-cell-1 {
  min-height: 1158px;
}

.u-section-3 .u-container-layout-2 {
  padding: 19px 30px 18px;
}

.u-section-3 .u-text-2 {
  margin: 12px 0 0;
}

.u-section-3 .u-text-3 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-4 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-5 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-6 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-7 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-8 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-9 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-10 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-11 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-12 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-carousel-item-2 {
  margin-top: 0;
}

.u-section-3 .u-container-layout-3 {
  padding: 30px 50px;
}

.u-section-3 .u-layout-wrap-2 {
  margin: 0 auto 0 0;
}

.u-section-3 .u-layout-cell-2 {
  min-height: 1336px;
}

.u-section-3 .u-container-layout-4 {
  padding: 29px 30px 30px;
}

.u-section-3 .u-text-13 {
  margin-bottom: 0;
  margin-top: 0;
}

.u-section-3 .u-text-14 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-15 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-16 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-17 {
  margin: 20px 0 0;
}

.u-section-3 .u-text-18 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-19 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-20 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-21 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-22 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-23 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-24 {
  margin: 20px 0 0;
}

.u-section-3 .u-carousel-item-3 {
  margin-top: 0;
}

.u-section-3 .u-container-layout-5 {
  padding: 30px 50px;
}

.u-section-3 .u-layout-wrap-3 {
  margin: 0 auto 0 0;
}

.u-section-3 .u-layout-cell-3 {
  min-height: 1336px;
}

.u-section-3 .u-container-layout-6 {
  padding: 29px 30px 30px;
}

.u-section-3 .u-text-25 {
  margin-bottom: 0;
  margin-top: 0;
}

.u-section-3 .u-text-26 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-27 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-28 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-29 {
  margin: 20px 0 0;
}

.u-section-3 .u-text-30 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-31 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-32 {
  margin: 20px 0 0;
}

.u-section-3 .u-text-33 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-34 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-35 {
  margin: 20px auto 0 0;
}

.u-section-3 .u-text-36 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-37 {
  margin: 20px 0 0;
}

.u-section-3 .u-carousel-item-4 {
  margin-top: 0;
}

.u-section-3 .u-container-layout-7 {
  padding: 30px 50px;
}

.u-section-3 .u-layout-wrap-4 {
  margin: 0 auto 0 0;
}

.u-section-3 .u-layout-cell-4 {
  min-height: 1336px;
}

.u-section-3 .u-container-layout-8 {
  padding: 29px 30px 30px;
}

.u-section-3 .u-text-38 {
  margin-bottom: 0;
  margin-top: 0;
}

.u-section-3 .u-text-39 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-40 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-41 {
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0;
}

.u-section-3 .u-text-42 {
  margin: 20px 0 0;
}

.u-section-3 .u-carousel-item-5 {
  margin-top: 0;
}

.u-section-3 .u-container-layout-9 {
  padding: 30px 50px;
}

.u-section-3 .u-layout-wrap-5 {
  margin-top: 0;
  margin-bottom: 0;
}

.u-section-3 .u-layout-cell-5 {
  min-height: 1124px;
}

.u-section-3 .u-container-layout-10 {
  padding: 0 29px;
}

.u-section-3 .u-text-43 {
  margin: 31px 1px 0;
}

.u-section-3 .u-text-44 {
  margin: 20px auto 0 1px;
}

.u-section-3 .u-text-45 {
  margin: 20px auto 0 1px;
}

.u-section-3 .u-text-46 {
  margin: 20px 1px 0;
}

.u-section-3 .u-text-47 {
  margin: 20px 1px 0;
}

.u-section-3 .u-text-48 {
  margin: 20px auto 0 1px;
}

.u-section-3 .u-text-49 {
  margin: 28px 746px 0 0;
}

.u-section-3 .u-text-50 {
  margin: 20px auto 0 1px;
}

.u-section-3 .u-text-51 {
  margin: 20px auto 0 1px;
}

.u-section-3 .u-text-52 {
  margin: 20px auto 0 1px;
}

.u-section-3 .u-text-53 {
  margin: 20px auto 0 1px;
}

.u-section-3 .u-carousel-control-1 {
  width: 50px;
  height: 50px;
}

.u-section-3 .u-carousel-control-2 {
  width: 50px;
  height: 50px;
}

@media (max-width: 1199px) {
  .u-section-3 .u-text-1 {
    margin-right: -95px;
  }

  .u-section-3 .u-image-1 {
    margin-right: 780px;
    margin-left: 0;
  }

  .u-section-3 .u-carousel-item-1 {
    margin-top: initial;
  }

  .u-section-3 .u-layout-cell-1 {
    min-height: 955px;
  }

  .u-section-3 .u-carousel-item-2 {
    margin-top: initial;
  }

  .u-section-3 .u-layout-wrap-2 {
    margin-right: initial;
    margin-left: initial;
  }

  .u-section-3 .u-layout-cell-2 {
    min-height: 1102px;
  }

  .u-section-3 .u-carousel-item-3 {
    margin-top: initial;
  }

  .u-section-3 .u-layout-wrap-3 {
    margin-right: initial;
    margin-left: initial;
  }

  .u-section-3 .u-layout-cell-3 {
    min-height: 1102px;
  }

  .u-section-3 .u-carousel-item-4 {
    margin-top: initial;
  }

  .u-section-3 .u-layout-wrap-4 {
    margin-right: initial;
    margin-left: initial;
  }

  .u-section-3 .u-layout-cell-4 {
    min-height: 1102px;
  }

  .u-section-3 .u-carousel-item-5 {
    margin-top: initial;
  }

  .u-section-3 .u-layout-cell-5 {
    min-height: 927px;
  }

  .u-section-3 .u-text-46 {
    margin-right: 0;
  }

  .u-section-3 .u-text-47 {
    margin-right: 0;
  }

  .u-section-3 .u-text-49 {
    margin-right: 546px;
  }
}

@media (max-width: 991px) {
  .u-section-3 .u-image-1 {
    margin-right: 560px;
  }

  .u-section-3 .u-container-layout-1 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .u-section-3 .u-layout-cell-1 {
    min-height: 100px;
  }

  .u-section-3 .u-container-layout-3 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .u-section-3 .u-layout-cell-2 {
    min-height: 100px;
  }

  .u-section-3 .u-container-layout-5 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .u-section-3 .u-layout-cell-3 {
    min-height: 100px;
  }

  .u-section-3 .u-container-layout-7 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .u-section-3 .u-layout-cell-4 {
    min-height: 100px;
  }

  .u-section-3 .u-container-layout-9 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .u-section-3 .u-layout-cell-5 {
    min-height: 100px;
  }

  .u-section-3 .u-text-49 {
    margin-right: 366px;
  }
}

@media (max-width: 767px) {
  .u-section-3 .u-image-1 {
    margin-right: 380px;
  }

  .u-section-3 .u-image-3 {
    margin-left: 380px;
  }

  .u-section-3 .u-container-layout-1 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-container-layout-2 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-container-layout-3 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-container-layout-4 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-container-layout-5 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-container-layout-6 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-container-layout-7 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-container-layout-8 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-container-layout-9 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-container-layout-10 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-3 .u-text-49 {
    margin-right: 264px;
  }
}

@media (max-width: 575px) {
  .u-section-3 .u-image-1 {
    margin-right: 180px;
  }

  .u-section-3 .u-image-2 {
    margin-left: 180px;
  }

  .u-section-3 .u-image-3 {
    margin-left: 180px;
  }

  .u-section-3 .u-image-4 {
    margin-right: 180px;
  }

  .u-section-3 .u-text-49 {
    margin-right: 64px;
  }
}.u-section-4 .u-sheet-1 {
  min-height: 1645px;
}

.u-section-4 .u-text-1 {
  margin: 50px 0 0;
}

.u-section-4 .u-text-2 {
  font-size: 3rem;
  margin: 205px 769px 0 0;
}

.u-section-4 .u-slider-1 {
  min-height: 458px;
  margin-top: 132px;
  margin-bottom: 60px;
  height: auto;
}

.u-section-4 .u-carousel-indicators-1 {
  position: absolute;
  bottom: 10px;
}

.u-section-4 .u-container-layout-1 {
  padding: 30px 50px;
}

.u-section-4 .u-container-layout-2 {
  padding: 30px 50px;
}

.u-section-4 .u-container-layout-3 {
  padding: 30px 50px;
}

.u-section-4 .u-container-layout-4 {
  padding: 30px 50px;
}

.u-section-4 .u-container-layout-5 {
  padding: 30px 50px;
}

.u-section-4 .u-carousel-control-1 {
  width: 50px;
  height: 50px;
}

.u-section-4 .u-carousel-control-2 {
  width: 50px;
  height: 50px;
}

@media (max-width: 1199px) {
  .u-section-4 .u-text-1 {
    margin-top: 607px;
  }

  .u-section-4 .u-text-2 {
    margin-top: -345px;
    margin-right: 569px;
  }

  .u-section-4 .u-slider-1 {
    margin-top: 1019px;
    margin-bottom: -299px;
  }
}

@media (max-width: 991px) {
  .u-section-4 .u-text-1 {
    margin-top: 709px;
  }

  .u-section-4 .u-text-2 {
    margin-top: -448px;
    margin-right: 349px;
  }

  .u-section-4 .u-slider-1 {
    margin-top: 1122px;
    margin-bottom: -401px;
  }

  .u-section-4 .u-container-layout-1 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .u-section-4 .u-container-layout-2 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .u-section-4 .u-container-layout-3 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .u-section-4 .u-container-layout-4 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .u-section-4 .u-container-layout-5 {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 767px) {
  .u-section-4 .u-text-1 {
    margin-top: 888px;
  }

  .u-section-4 .u-text-2 {
    margin-top: -732px;
    margin-right: 169px;
  }

  .u-section-4 .u-slider-1 {
    margin-top: 1301px;
    margin-bottom: -580px;
  }

  .u-section-4 .u-container-layout-1 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-4 .u-container-layout-2 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-4 .u-container-layout-3 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-4 .u-container-layout-4 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-4 .u-container-layout-5 {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 575px) {
  .u-section-4 .u-text-1 {
    margin-top: 1247px;
  }

  .u-section-4 .u-text-2 {
    margin-top: -1038px;
    margin-right: 0;
  }

  .u-section-4 .u-slider-1 {
    margin-top: 1659px;
    margin-bottom: -939px;
  }
}.u-section-5 .u-sheet-1 {
  min-height: 50vw;
}

.u-section-5 .u-text-1 {
  margin: 50px 0 0;
}

.u-section-5 .u-layout-wrap-1 {
  margin-top: 179px;
  margin-bottom: 0;
}

.u-section-5 .u-layout-cell-1 {
  min-height: 400px;
}

.u-section-5 .u-container-layout-1 {
  padding: 0;
}

.u-section-5 .u-custom-html-1 {
  height: auto;
  min-height: 323px;
  margin: 53px 138px 0 -313px;
}

.u-section-5 .u-layout-cell-2 {
  min-height: 400px;
}

.u-section-5 .u-container-layout-2 {
  padding: 30px 0;
}

.u-section-5 .u-custom-html-2 {
  height: auto;
  min-height: 323px;
  margin: 0 148px 0 -88px;
}

.u-section-5 .u-layout-cell-3 {
  min-height: 400px;
}

.u-section-5 .u-container-layout-3 {
  padding: 30px 0;
}

.u-section-5 .u-custom-html-3 {
  height: auto;
  min-height: 323px;
  margin: 0 -77px 0 137px;
}

.u-section-5 .u-text-2 {
  font-size: 1.875rem;
  margin: -200px -266px 0 968px;
}

.u-section-5 .u-text-3 {
  font-size: 1.875rem;
  width: 438px;
  margin: -66px auto 0;
}

.u-section-5 .u-text-4 {
  font-size: 1.875rem;
  margin: -66px 957px 60px -255px;
}

@media (max-width: 1199px) {
  .u-section-5 .u-layout-wrap-1 {
    margin-top: 660px;
    position: relative;
  }

  .u-section-5 .u-layout-cell-1 {
    min-height: 330px;
  }

  .u-section-5 .u-custom-html-1 {
    margin-right: 0;
    margin-left: 0;
  }

  .u-section-5 .u-layout-cell-2 {
    min-height: 330px;
  }

  .u-section-5 .u-custom-html-2 {
    margin-right: 0;
    margin-left: 0;
  }

  .u-section-5 .u-layout-cell-3 {
    min-height: 330px;
  }

  .u-section-5 .u-custom-html-3 {
    margin-right: 0;
    margin-left: 0;
  }

  .u-section-5 .u-text-2 {
    margin-left: 768px;
  }

  .u-section-5 .u-text-4 {
    margin-right: 757px;
  }
}

@media (max-width: 991px) {
  .u-section-5 .u-layout-wrap-1 {
    margin-top: 577px;
  }

  .u-section-5 .u-layout-cell-1 {
    min-height: 253px;
  }

  .u-section-5 .u-layout-cell-2 {
    min-height: 253px;
  }

  .u-section-5 .u-layout-cell-3 {
    min-height: 253px;
  }

  .u-section-5 .u-text-2 {
    margin-left: 548px;
  }

  .u-section-5 .u-text-4 {
    margin-right: 537px;
  }
}

@media (max-width: 767px) {
  .u-section-5 .u-layout-wrap-1 {
    margin-top: -800px;
  }

  .u-section-5 .u-layout-cell-1 {
    min-height: 569px;
  }

  .u-section-5 .u-layout-cell-2 {
    min-height: 569px;
  }

  .u-section-5 .u-layout-cell-3 {
    min-height: 569px;
  }

  .u-section-5 .u-text-2 {
    margin-left: 368px;
  }

  .u-section-5 .u-text-4 {
    margin-right: 357px;
  }
}

@media (max-width: 575px) {
  .u-section-5 .u-layout-wrap-1 {
    margin-top: -215px;
  }

  .u-section-5 .u-layout-cell-1 {
    min-height: 358px;
  }

  .u-section-5 .u-layout-cell-2 {
    min-height: 358px;
  }

  .u-section-5 .u-layout-cell-3 {
    min-height: 358px;
  }

  .u-section-5 .u-text-2 {
    margin-right: 0;
    margin-left: 0;
  }

  .u-section-5 .u-text-3 {
    width: 340px;
  }

  .u-section-5 .u-text-4 {
    margin-right: 0;
    margin-left: 0;
  }
}.u-section-6 .u-sheet-1 {
  min-height: 806px;
}

.u-section-6 .u-list-1 {
  margin: 0 auto 0 0;
}

.u-section-6 .u-repeater-1 {
  --gap: 10px;
  grid-auto-columns: 100%;
  grid-template-columns: repeat(1, 100%);
  min-height: 118px;
}

.u-section-6 .u-container-layout-1 {
  padding: 12px 10px;
}

.u-section-6 .u-text-1 {
  font-size: 3rem;
  margin: 0 754px 0 0;
}

.u-section-6 .u-custom-html-1 {
  height: auto;
  min-height: 323px;
  margin: -30px 46px 0 -46px;
}

.u-section-6 .u-custom-html-2 {
  height: auto;
  min-height: 323px;
  margin: -323px -632px 0 632px;
}

.u-section-6 .u-text-2 {
  font-size: 1.875rem;
  margin: 17px -114px 0 720px;
}

.u-section-6 .u-text-3 {
  font-size: 1.875rem;
  margin: -46px 640px 0 -34px;
}

.u-section-6 .u-text-4 {
  font-size: 1.875rem;
  margin: 35px -26px 0 632px;
}

.u-section-6 .u-text-5 {
  font-size: 1.875rem;
  margin: -51px 643px 60px -37px;
}

@media (max-width: 1199px) {
  .u-section-6 .u-list-1 {
    margin-right: initial;
    margin-left: initial;
  }

  .u-section-6 .u-repeater-1 {
    grid-template-columns: 100%;
  }

  .u-section-6 .u-text-1 {
    margin-right: 554px;
  }

  .u-section-6 .u-custom-html-1 {
    margin-right: 0;
    margin-left: 0;
  }

  .u-section-6 .u-custom-html-2 {
    margin-right: 0;
    margin-left: 0;
  }

  .u-section-6 .u-text-2 {
    margin-left: 520px;
  }

  .u-section-6 .u-text-3 {
    margin-right: 440px;
  }

  .u-section-6 .u-text-4 {
    margin-left: 432px;
  }

  .u-section-6 .u-text-5 {
    margin-right: 443px;
  }
}

@media (max-width: 991px) {
  .u-section-6 .u-repeater-1 {
    grid-auto-columns: calc(100% - 0px);
  }

  .u-section-6 .u-text-1 {
    margin-right: 334px;
  }

  .u-section-6 .u-text-2 {
    margin-left: 300px;
  }

  .u-section-6 .u-text-3 {
    margin-right: 220px;
  }

  .u-section-6 .u-text-4 {
    margin-left: 212px;
  }

  .u-section-6 .u-text-5 {
    margin-right: 223px;
  }
}

@media (max-width: 767px) {
  .u-section-6 .u-text-1 {
    margin-right: 154px;
  }

  .u-section-6 .u-text-2 {
    margin-left: 120px;
  }

  .u-section-6 .u-text-3 {
    margin-right: 40px;
  }

  .u-section-6 .u-text-4 {
    margin-left: 32px;
  }

  .u-section-6 .u-text-5 {
    margin-right: 43px;
  }
}

@media (max-width: 575px) {
  .u-section-6 .u-text-1 {
    margin-right: 0;
  }

  .u-section-6 .u-text-2 {
    font-size: 1.5rem;
    margin-right: 0;
    margin-left: 0;
  }

  .u-section-6 .u-text-3 {
    font-size: 1.5rem;
    margin-right: 0;
    margin-left: 0;
  }

  .u-section-6 .u-text-4 {
    font-size: 1.5rem;
    margin-right: 0;
    margin-left: 0;
  }

  .u-section-6 .u-text-5 {
    font-size: 1.5rem;
    margin-right: 0;
    margin-left: 0;
  }
}.u-section-7 .u-sheet-1 {
  min-height: 806px;
}

.u-section-7 .u-list-1 {
  margin-top: 0;
  margin-bottom: 0;
}

.u-section-7 .u-repeater-1 {
  --gap: 10px;
  grid-auto-columns: 100%;
  grid-template-columns: repeat(1, 100%);
  min-height: 118px;
}

.u-section-7 .u-container-layout-1 {
  padding: 12px 10px;
}

.u-section-7 .u-text-1 {
  font-size: 3rem;
  margin: 0 754px 0 0;
}

.u-section-7 .u-custom-html-1 {
  height: auto;
  min-height: 323px;
  margin: -30px 46px 0 -46px;
}

.u-section-7 .u-custom-html-2 {
  height: auto;
  min-height: 323px;
  margin: -323px -632px 0 632px;
}

.u-section-7 .u-text-2 {
  font-size: 1.875rem;
  margin: 24px 640px 0 -34px;
}

.u-section-7 .u-text-3 {
  font-size: 1.875rem;
  margin: -86px -34px 0 646px;
}

.u-section-7 .u-text-4 {
  font-size: 1.875rem;
  margin: 57px -37px 0 643px;
}

.u-section-7 .u-text-5 {
  font-size: 1.875rem;
  margin: -53px 643px 60px -37px;
}

@media (max-width: 1199px) {
  .u-section-7 .u-repeater-1 {
    grid-template-columns: 100%;
  }

  .u-section-7 .u-text-1 {
    margin-right: 554px;
  }

  .u-section-7 .u-custom-html-1 {
    width: 940px;
    margin-left: 100px;
    margin-right: 100px;
  }

  .u-section-7 .u-custom-html-2 {
    width: 940px;
    margin-right: 0;
    margin-left: 100px;
  }

  .u-section-7 .u-text-2 {
    margin-top: 23px;
    margin-right: 440px;
    margin-left: 37px;
  }

  .u-section-7 .u-text-3 {
    margin-top: -46px;
    margin-left: 446px;
  }

  .u-section-7 .u-text-4 {
    margin-top: -16px;
    margin-left: 443px;
  }

  .u-section-7 .u-text-5 {
    margin-right: 443px;
  }
}

@media (max-width: 991px) {
  .u-section-7 .u-repeater-1 {
    grid-auto-columns: calc(100% - 0px);
  }

  .u-section-7 .u-text-1 {
    margin-right: 334px;
  }

  .u-section-7 .u-custom-html-1 {
    width: 720px;
    margin-left: 210px;
    margin-right: 210px;
  }

  .u-section-7 .u-custom-html-2 {
    width: 720px;
    margin-left: 210px;
  }

  .u-section-7 .u-text-2 {
    margin-right: 220px;
  }

  .u-section-7 .u-text-3 {
    margin-left: 226px;
  }

  .u-section-7 .u-text-4 {
    margin-left: 223px;
  }

  .u-section-7 .u-text-5 {
    margin-right: 223px;
  }
}

@media (max-width: 767px) {
  .u-section-7 .u-text-1 {
    margin-right: 154px;
  }

  .u-section-7 .u-custom-html-1 {
    width: 540px;
    margin-left: 300px;
    margin-right: 300px;
  }

  .u-section-7 .u-custom-html-2 {
    width: 540px;
    margin-left: 300px;
  }

  .u-section-7 .u-text-2 {
    margin-top: -16px;
    margin-right: 40px;
  }

  .u-section-7 .u-text-3 {
    margin-top: -7px;
    margin-left: 46px;
  }

  .u-section-7 .u-text-4 {
    margin-left: 46px;
  }

  .u-section-7 .u-text-5 {
    margin-right: 43px;
  }
}

@media (max-width: 575px) {
  .u-section-7 .u-text-1 {
    margin-right: 0;
  }

  .u-section-7 .u-custom-html-1 {
    width: 340px;
    margin-left: 400px;
    margin-right: 400px;
  }

  .u-section-7 .u-custom-html-2 {
    width: 340px;
    margin-left: 400px;
  }

  .u-section-7 .u-text-2 {
    font-size: 1.5rem;
    margin-top: 37px;
    margin-right: 0;
  }

  .u-section-7 .u-text-3 {
    font-size: 1.5rem;
    margin-top: -119px;
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-7 .u-text-4 {
    font-size: 1.5rem;
    margin-top: 30px;
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-7 .u-text-5 {
    font-size: 1.5rem;
    margin-top: -27px;
    margin-left: 0;
    margin-right: 0;
  }
}.u-section-8 .u-sheet-1 {
  min-height: 806px;
}

.u-section-8 .u-list-1 {
  margin: 0 auto 0 0;
}

.u-section-8 .u-repeater-1 {
  --gap: 10px;
  grid-auto-columns: 100%;
  grid-template-columns: repeat(1, 100%);
  min-height: 118px;
}

.u-section-8 .u-container-layout-1 {
  padding: 12px 10px;
}

.u-section-8 .u-text-1 {
  font-size: 3rem;
  margin: 0 754px 0 0;
}

.u-section-8 .u-custom-html-1 {
  height: auto;
  min-height: 323px;
  margin: -30px 46px 0 -46px;
}

.u-section-8 .u-custom-html-2 {
  height: auto;
  min-height: 323px;
  margin: -323px -632px 0 632px;
}

.u-section-8 .u-text-2 {
  font-size: 1.875rem;
  margin: 37px 643px 0 -37px;
}

.u-section-8 .u-text-3 {
  font-size: 1.875rem;
  margin: -132px -28px 0 634px;
}

.u-section-8 .u-text-4 {
  font-size: 1.875rem;
  margin: 70px 639px 0 -32px;
}

.u-section-8 .u-text-5 {
  font-size: 1.875rem;
  margin: -56px -26px 60px 632px;
}

@media (max-width: 1199px) {
  .u-section-8 .u-list-1 {
    margin-right: initial;
    margin-left: initial;
  }

  .u-section-8 .u-repeater-1 {
    grid-template-columns: 100%;
  }

  .u-section-8 .u-text-1 {
    margin-right: 554px;
  }

  .u-section-8 .u-custom-html-1 {
    width: 940px;
    margin-left: 100px;
    margin-right: 100px;
  }

  .u-section-8 .u-custom-html-2 {
    margin-left: 100px;
    width: 940px;
    margin-right: 0;
  }

  .u-section-8 .u-text-2 {
    margin-right: 443px;
    margin-left: 37px;
  }

  .u-section-8 .u-text-3 {
    margin-left: 434px;
  }

  .u-section-8 .u-text-4 {
    margin-top: 82px;
    margin-right: 439px;
  }

  .u-section-8 .u-text-5 {
    margin-top: -53px;
    margin-left: 432px;
  }
}

@media (max-width: 991px) {
  .u-section-8 .u-repeater-1 {
    grid-auto-columns: calc(100% - 0px);
  }

  .u-section-8 .u-text-1 {
    margin-right: 334px;
  }

  .u-section-8 .u-custom-html-1 {
    width: 720px;
    margin-left: 210px;
    margin-right: 210px;
  }

  .u-section-8 .u-custom-html-2 {
    width: 720px;
    margin-left: 210px;
  }

  .u-section-8 .u-text-2 {
    margin-right: 223px;
  }

  .u-section-8 .u-text-3 {
    margin-left: 214px;
  }

  .u-section-8 .u-text-4 {
    margin-right: 219px;
  }

  .u-section-8 .u-text-5 {
    margin-left: 212px;
  }
}

@media (max-width: 767px) {
  .u-section-8 .u-text-1 {
    margin-right: 154px;
  }

  .u-section-8 .u-custom-html-1 {
    width: 540px;
    margin-left: 300px;
    margin-right: 300px;
  }

  .u-section-8 .u-custom-html-2 {
    width: 540px;
    margin-left: 300px;
  }

  .u-section-8 .u-text-2 {
    margin-right: 43px;
  }

  .u-section-8 .u-text-3 {
    margin-left: 34px;
  }

  .u-section-8 .u-text-4 {
    margin-right: 39px;
  }

  .u-section-8 .u-text-5 {
    margin-left: 32px;
  }
}

@media (max-width: 575px) {
  .u-section-8 .u-text-1 {
    margin-right: 0;
  }

  .u-section-8 .u-custom-html-1 {
    width: 340px;
    margin-left: 400px;
    margin-right: 400px;
  }

  .u-section-8 .u-custom-html-2 {
    width: 340px;
    margin-left: 400px;
  }

  .u-section-8 .u-text-2 {
    margin-right: 0;
    font-size: 1.5rem;
  }

  .u-section-8 .u-text-3 {
    margin-left: 0;
    margin-right: 0;
    font-size: 1.5rem;
  }

  .u-section-8 .u-text-4 {
    font-size: 1.5rem;
    margin-top: 95px;
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-8 .u-text-5 {
    font-size: 1.5rem;
    margin-top: -79px;
    margin-left: 0;
    margin-right: 0;
  }
} .u-section-9 {
  background-image: url("images/86841965-552b-8b29-5ee1-1a5d2aacba73.png");
  background-position: 50% 50%;
}

.u-section-9 .u-sheet-1 {
  min-height: 1377px;
}

.u-section-9 .u-text-1 {
  margin: 50px 0 60px;
}

@media (max-width: 1199px) {
  .u-section-9 .u-sheet-1 {
    min-height: 1135px;
  }
}

@media (max-width: 991px) {
  .u-section-9 .u-sheet-1 {
    min-height: 869px;
  }
}

@media (max-width: 767px) {
  .u-section-9 .u-sheet-1 {
    min-height: 652px;
  }
}

@media (max-width: 575px) {
  .u-section-9 .u-sheet-1 {
    min-height: 411px;
  }
}
/* ===== 引號裝飾圖示（教授語錄區塊） ===== */
.u-quote-icon {
  width: 32px;
  height: auto;
  opacity: .85;
  margin-bottom: 8px;
}

.u-quote-icon-center {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.u-quote-icon-right {
  margin-left: auto;
  margin-right: 0;
  display: block;
}

/* ===== 輪播箭頭圖示 ===== */
.u-carousel-arrow-icon {
  width: 40px;
  height: 40px;
}

.u-carousel-arrow-icon-prev {
  transform: scaleX(-1); /* 素材本身是朝右的箭頭，左邊用鏡像翻過來 */
}

/* 五個主題圖示可點擊切換下方輪播 */
.u-topic-icon {
  cursor: pointer;
  transition: transform .2s;
}

.u-topic-icon:hover {
  transform: scale(1.08);
}

/* ===== 人生續寫輪播：得獎者訪談表格 ===== */
.u-life-story {
  padding: 30px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

/* 輪播容器固定高度，內容用捲動處理，這樣不管哪一頁文字多少，
   上一頁/下一頁箭頭的垂直位置都不會因為內容高度不同而跑掉 */
#carousel-9c92 .u-carousel-inner,
#carousel-9c92 .u-carousel-item,
#carousel-9c92 .u-container-layout {
  height: 560px;
}

.u-life-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.u-life-table colgroup col {
  width: 50%; /* 固定兩欄各半，不隨文字內容改變 */
}

.u-life-table th,
.u-life-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: .95rem;
  line-height: 1.7;
  word-break: break-word; /* 欄寬固定，文字換行不撐開欄位 */
  overflow-wrap: break-word;
}

.u-life-table tr:first-child th {
  font-weight: 700;
  color: #5c7bf0; /* 跟主題色一致，可依實際色票調整 */
  border-bottom: 2px solid #5c7bf0;
}

.u-life-table th[colspan="2"] {
  font-weight: 700;
  color: #5c7bf0;
  background: rgba(92,123,240,.06);
  border-bottom: none;
  padding-bottom: 6px;
}

.u-life-table td[colspan="2"] {
  padding-top: 4px;
}

.u-life-table tr:last-child td {
  border-bottom: none;
}

.u-life-note {
  margin-top: 12px;
  font-size: .85rem;
  opacity: .7;
  text-align: right;
}

@media (max-width: 767px) {
  #carousel-9c92 .u-carousel-inner,
  #carousel-9c92 .u-carousel-item,
  #carousel-9c92 .u-container-layout {
    height: 480px;
  }

  .u-life-table th,
  .u-life-table td {
    font-size: .85rem;
    padding: 10px 10px;
  }
}

/* ===== 人生續寫：中間大兩側小的頭像選擇器 ===== */
.u-life-coverflow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 900px;
  margin: 40px auto 0;
  padding: 0 10px;
}

.u-life-coverflow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex: 1;
  min-height: 260px;
}

.u-life-thumb {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: width .3s ease, height .3s ease, box-shadow .3s ease;
}

.u-life-thumb-center {
  width: 220px;
  height: 220px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  z-index: 3;
}

.u-life-thumb-near {
  width: 130px;
  height: 130px;
  opacity: .75;
  z-index: 2;
}

.u-life-thumb-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .35s ease;
}

.u-life-thumb-photo-old {
  opacity: 0;
}

.u-life-thumb:hover .u-life-thumb-photo-new {
  opacity: 0;
}

.u-life-thumb:hover .u-life-thumb-photo-old {
  opacity: 1;
}

.u-life-thumb-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 6px 4px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: .8rem;
  text-align: center;
  box-sizing: border-box;
}

.u-life-thumb-near .u-life-thumb-caption {
  font-size: .7rem;
  padding: 4px 2px;
}

.u-life-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.u-life-arrow img {
  width: 100%;
  height: 100%;
}

.u-life-arrow-prev img {
  transform: scaleX(-1);
}

/* 固定不動的文字框，內容跟著選中的人變化 */
.u-life-panel {
  max-width: 900px;
  margin: 30px auto 0;
  padding: 20px;
  min-height: 420px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  box-sizing: border-box;
  overflow-y: auto;
}

@media (max-width: 767px) {
  .u-life-coverflow {
    gap: 10px;
    min-height: 180px;
  }

  .u-life-thumb-center {
    width: 140px;
    height: 140px;
  }

  .u-life-thumb-near {
    width: 80px;
    height: 80px;
  }

  .u-life-arrow {
    width: 28px;
    height: 28px;
  }

  .u-life-panel {
    min-height: 360px;
    padding: 14px;
  }
}

/* ===== 進化的語文教育：3D 書封式（coverflow）影片選擇器 ===== */
.u-video-ring-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 0 10px;
}

.u-video-ring-scene {
  flex: 1;
  height: 420px;
  perspective: 1400px;
  position: relative;
  overflow: visible;
}

.u-video-ring {
  position: absolute;
  top: 0;
  left: 50%;
  width: 420px;
  height: 100%;
  margin-left: -210px;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y; /* 保留垂直滑動(捲頁)，水平交給拖拉手勢 */
}

.u-video-ring-wrap.u-video-ring-grabbing .u-video-ring {
  cursor: grabbing;
}

.u-video-ring-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform .5s cubic-bezier(.22, .8, .32, 1), opacity .4s ease;
  opacity: .55;
}

.u-video-ring-dragging .u-video-ring-item {
  transition: none; /* 拖拉當下即時跟手，放開才恢復動畫 */
}

.u-video-ring-item-active {
  opacity: 1;
}

.u-video-ring-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  background: #000;
}

.u-video-ring-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.u-video-ring-caption {
  margin-top: 14px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

.u-video-ring-item:not(.u-video-ring-item-active) .u-video-ring-caption {
  font-size: .85rem;
  opacity: .7;
}

@media (max-width: 767px) {
  .u-video-ring-scene {
    height: 260px;
    perspective: 900px;
  }

  .u-video-ring,
  .u-video-ring-item {
    width: 240px;
    margin-left: -120px;
  }

  .u-video-ring-caption {
    font-size: .8rem;
  }

  .u-life-arrow {
    width: 30px;
    height: 30px;
  }
}

/* ===== 教授語錄區塊的 6 支影片，尺寸統一跟輪播影片區中間大影片一致 ===== */
iframe[width="560"] {
  width: 420px !important;
  height: 236px !important; /* 16:9 */
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  max-width: 100%;
}

@media (max-width: 767px) {
  iframe[width="560"] {
    width: 100% !important;
    max-width: 340px;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
}

/* ===== 全站字體：GenWanMin2TW（源界圓明體）===== */
@font-face {
  font-family: "GenWanMin2TW";
  src: url("fonts/GenWanMin2TW-EL.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GenWanMin2TW";
  src: url("fonts/GenWanMin2TW-L.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GenWanMin2TW";
  src: url("fonts/GenWanMin2TW-R.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GenWanMin2TW";
  src: url("fonts/GenWanMin2TW-M.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GenWanMin2TW";
  src: url("fonts/GenWanMin2TW-SB.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html, body, * {
  font-family: "GenWanMin2TW", "Microsoft JhengHei", sans-serif !important;
}

/* 標題稍微用重一點的字重，跟內文的細字重拉出層次 */
h1, h2, h3, .u-text-1 {
  font-weight: 600;
}

/* ===== 創作平台流變：背景影片 + 遮罩 + 文字圖左滑入 ===== */

/* 影片跟文字圖包在同一層 stage 裡，一起縮放/位移，維持兩者的相對位置不變。
   要整體再往左/右移動，只要調這裡的 translateX 百分比就好（正值=往右，負值=往左）；
   SHIFT 越大，記得 width/height 的縮放比例也要跟著加大，才不會在邊緣露出空白。 */
.u-section-2-stage {
  position: absolute;
  top: -8%;
  left: -8%;
  width: 116%;
  height: 116%;
  transform: translateX(4%); /* 整體往右移動一點；改這個數字調整幅度 */
}

.u-section-2-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.u-section-2-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* 淡淡壓暗，方便看清文字，不要可以再調低透明度或整段刪掉 */
  z-index: 1;
  pointer-events: none;
}

.u-section-2 .u-sheet-1 {
  position: relative;
  z-index: 20;
}

.u-section-2-text-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 2400px); /* 放大兩倍：90%→180%，1200px→2400px */
  height: auto;
  transform: translate(-150%, -50%); /* 初始藏在畫面左側外面 */
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.22, .8, .32, 1), opacity 1.1s ease;
  z-index: 2;
  pointer-events: none;
}

.u-section-2-text-slide.u-in-view {
  transform: translate(-49%, -50%); /* 在 stage 裡置中（跟著 stage 一起往右移動） */
  opacity: 1;
}

@media (max-width: 767px) {
  .u-section-2-text-slide {
    width: 190%;
  }
}

/* ===== 人生續寫 → 教授語錄 共用背景（bg3-4.png），讓中間這幾個區塊視覺上連成一片 ===== */
.u-shared-bg-wrap {
  position: relative;
  overflow: hidden;
}

.u-shared-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.u-shared-bg-content {
  position: relative;
  z-index: 1;
}

#block-13 .u-carousel-inner p {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* 子標題字體與空白大小 */
#block-13 .u-text-2,
#block-13 .u-text-9,
#block-13 .u-text-13,
#block-13 .u-text-18,
#block-13 .u-text-25,
#block-13 .u-text-32,
#block-13 .u-text-38,
#block-13 .u-text-40,
#block-13 .u-text-43,
#block-13 .u-text-49 {
    font-size: 35px !important;
}

#block-13 .u-carousel-inner .u-text-9,
#block-13 .u-carousel-inner .u-text-13,
#block-13 .u-carousel-inner .u-text-18,
#block-13 .u-carousel-inner .u-text-25,
#block-13 .u-carousel-inner .u-text-32,
#block-13 .u-carousel-inner .u-text-38,
#block-13 .u-carousel-inner .u-text-40,
#block-13 .u-carousel-inner .u-text-43,
#block-13 .u-carousel-inner .u-text-49 {
    margin-top: 35px !important;
}

/* 希國不換行 */
.u-text-49 {
  white-space: nowrap; /* 強制這段文字絕對不換行 */
}

/* 輪播影片下方字體大小 */
.u-video-ring-caption {
  color: #FFFFFF;
  font-size: 35px;
}

@media (max-width: 768px) {
  .u-video-ring-caption {
    font-size: 25px;
  }
}
/* ===== 星空留言牆 =====
   直接疊在「星海互動牆」這張圖（block-18）上，天空的部分用來放星星留言。
   手動放置版本：點「我要留言」按鈕 -> 輸入文字 -> 點畫面任一處放置 -> 存進資料庫
   （先不做動畫，方便確認邊界跟位置） */
.u-section-9 {
  position: relative;
}

.u-star-wall-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5; /* 蓋在背景圖上，但標題文字(u-sheet-1)如果要蓋在最上面，把它的 z-index 設更高 */
}

.u-star-wall-write-btn {
  position: absolute;
  left: 30px;
  bottom: 30px;
  width: 160px;
  height: auto;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 20;
  transition: transform .2s;
}

.u-star-wall-write-btn:hover {
  transform: scale(1.05);
}

.u-star-wall-write-btn img {
  width: 100%;
  height: auto;
  display: block;
}

.u-star {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-left: -20px; /* 讓點擊座標對準星星中心，不是左上角 */
  margin-top: -20px;
  background-image: url("images/star.png");
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 10;
}

.u-star-tooltip {
  position: absolute;
  display: none;
  min-width: 160px;
  max-width: 260px;
  background: rgba(255,255,255,.95);
  color: #333;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  font-size: .85rem;
  line-height: 1.6;
  z-index: 30;
  pointer-events: none;
}

.u-star-wall-write-btn {
    width: 500px;
    height: auto !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 10px !important;
    transform: translateX(300px) !important;
}
/* ===== 2026 手機版最終修正：覆蓋 Nicepage 舊的固定像素排版 ===== */
@media (max-width: 767px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .u-sheet { width:auto !important; max-width:none !important; margin-left:16px !important; margin-right:16px !important; }

  /* 人生續寫 */
  .u-section-4 .u-sheet-1 { min-height:0 !important; }
  .u-section-4 .u-text-1,
  .u-section-4 .u-text-2,
  .u-section-4 .u-slider-1 { margin-left:0 !important; margin-right:0 !important; }
  .u-section-4 .u-text-1 { margin-top:36px !important; }
  .u-section-4 .u-text-2 { margin-top:18px !important; font-size:2rem !important; text-align:center; }
  .u-section-4 .u-slider-1 { margin-top:24px !important; margin-bottom:30px !important; min-height:0 !important; }
  .u-life-coverflow-wrap { width:100%; max-width:100%; gap:6px; padding:0; margin-top:18px; box-sizing:border-box; overflow:hidden; touch-action:pan-y; }
  .u-life-coverflow { gap:8px; min-width:0; min-height:170px; overflow:hidden; }
  .u-life-thumb-center { width:132px; height:132px; }
  .u-life-thumb-near { width:72px; height:72px; }
  .u-life-thumb-far { width:46px; height:46px; opacity:.35; }
  .u-life-thumb-caption { font-size:.68rem; }
  .u-life-arrow { width:38px !important; height:38px !important; }
  .u-life-panel { width:100%; max-width:100%; min-height:0; max-height:62svh; margin-top:16px; padding:12px; overflow:auto; -webkit-overflow-scrolling:touch; }
  .u-life-table { table-layout:fixed; }
  .u-life-table th,.u-life-table td { padding:8px 6px; font-size:.82rem; line-height:1.7; overflow-wrap:anywhere; }

  /* 進化的語文教育影片 */
  .u-section-5 .u-sheet-1 { min-height:0 !important; }
  .u-section-5 .u-layout-wrap-1 { margin:20px 0 0 !important; }
  .u-section-5 .u-layout-cell-1,.u-section-5 .u-layout-cell-2,.u-section-5 .u-layout-cell-3 { min-height:0 !important; }
  .u-section-5 .u-custom-html-1,.u-section-5 .u-custom-html-2,.u-section-5 .u-custom-html-3 { width:100% !important; max-width:100% !important; min-height:0 !important; margin:0 !important; }
  .u-section-5 .u-text-2,.u-section-5 .u-text-3,.u-section-5 .u-text-4 { width:100% !important; margin:12px 0 22px !important; font-size:1rem !important; text-align:center; }
  .u-video-ring-wrap { width:100%; max-width:100%; gap:4px; padding:0; margin-top:18px; overflow:hidden; touch-action:pan-y; }
  .u-video-ring-scene { min-width:0; height:270px; perspective:800px; overflow:visible; touch-action:pan-y; }
  .u-video-ring,.u-video-ring-item { width:min(68vw,280px); margin-left:calc(min(68vw,280px) / -2); }
  .u-video-ring-caption { font-size:16px !important; line-height:1.45; margin-top:9px; }

  /* 星空留言牆 */
  .u-section-9 { min-height:100svh; overflow:hidden; background-position:center center; background-size:cover; }
  .u-star-wall-container { width:100%; height:100%; overflow:hidden; }
  .u-star { width:30px; height:30px; margin-left:-15px; margin-top:-15px; }
  .u-star-tooltip { min-width:0; width:min(72vw,260px); max-width:72vw; font-size:.82rem; box-sizing:border-box; }
  .u-star-wall-write-btn { left:auto !important; right:14px !important; bottom:14px !important; width:min(46vw,190px) !important; transform:none !important; }
}


/* ===== 手機版 Step 1：社會共命題五個按鈕 3+2 橫向排列 ===== */
@media (max-width: 767px) {
  #block-13 .u-sheet-1 {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 12px !important;
    align-items: start !important;
  }

  /* 標題橫跨整列 */
  #block-13 .u-text-1 {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* 五個主題按鈕：上排 3 顆、下排 2 顆 */
  #block-13 .u-topic-icon {
    position: static !important;
    float: none !important;
    width: min(24vw, 86px) !important;
    height: min(24vw, 86px) !important;
    max-width: 86px !important;
    max-height: 86px !important;
    margin: 0 auto !important;
    align-self: center !important;
    justify-self: center !important;
    object-fit: contain !important;
  }

  #block-13 .u-image-1 {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
  }

  #block-13 .u-image-2 {
    grid-column: 3 / span 2 !important;
    grid-row: 2 !important;
  }

  #block-13 .u-image-3 {
    grid-column: 5 / span 2 !important;
    grid-row: 2 !important;
  }

  #block-13 .u-image-4 {
    grid-column: 2 / span 2 !important;
    grid-row: 3 !important;
  }

  #block-13 .u-image-5 {
    grid-column: 4 / span 2 !important;
    grid-row: 3 !important;
  }

  /* 輪播內容放到按鈕下方並橫跨整個寬度 */
  #block-13 .u-slider-1,
  #block-13 #carousel-7a12 {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
}


/* =========================================================
   STEP 2｜人生續寫手機版
   設計：主角 + 明確「下一位」預告，不再塞三顆造成裁切
   ========================================================= */
@media (max-width: 767px) {
  #block-21 {
    overflow: hidden !important;
  }

  #lifeCoverflowWrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 230px !important;
    margin: 18px auto 0 !important;
    padding: 14px 2px 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #lifeCoverflow {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 170px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* 手機只顯示「目前這位」+「下一位」 */
  #lifeCoverflow .u-life-thumb {
    display: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  #lifeCoverflow .u-life-thumb-center,
  #lifeCoverflow .u-life-thumb-next {
    display: block !important;
  }

  #lifeCoverflow .u-life-thumb-center {
    width: 148px !important;
    height: 148px !important;
    opacity: 1 !important;
    z-index: 3 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
  }

  #lifeCoverflow .u-life-thumb-next {
    position: relative !important;
    width: 88px !important;
    height: 88px !important;
    opacity: .82 !important;
    z-index: 2 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
  }

  /* 下一位標籤，讓使用者一眼知道還能繼續看 */
  #lifeCoverflow .u-life-thumb-next::before {
    content: "下一位";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #1f5794;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    white-space: nowrap;
    z-index: 6;
    box-shadow: 0 2px 7px rgba(0,0,0,.12);
  }

  #lifeCoverflow .u-life-thumb-caption {
    font-size: 12px !important;
    line-height: 1.25 !important;
    padding: 5px 3px !important;
  }

  #lifeCoverflow .u-life-thumb-next .u-life-thumb-caption {
    font-size: 10px !important;
    padding: 4px 2px !important;
  }

  #lifePrev,
  #lifeNext {
    position: relative !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    z-index: 10 !important;
  }

  #lifePrev img,
  #lifeNext img {
    width: 22px !important;
    height: 22px !important;
  }

  .u-life-mobile-progress {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 90px);
    color: rgba(255,255,255,.88);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .02em;
    text-align: center;
    pointer-events: none;
  }

  /* 下方資料卡不再被固定高度壓住 */
  #lifePanel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin-top: 8px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
}

/* iPhone SE / 小螢幕再縮一階，仍完整顯示兩位 */
@media (max-width: 360px) {
  #lifeCoverflowWrap {
    gap: 3px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #lifeCoverflow {
    gap: 12px !important;
  }

  #lifeCoverflow .u-life-thumb-center {
    width: 128px !important;
    height: 128px !important;
  }

  #lifeCoverflow .u-life-thumb-next {
    width: 70px !important;
    height: 70px !important;
  }

  #lifePrev,
  #lifeNext {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
}


/* =========================================================
   STEP 3｜進化的語文教育影片輪播・手機版
   設計：完整主影片 + 右側下一支預告；桌機仍維持 3D coverflow
   ========================================================= */
@media (max-width: 767px) {
  #block-14 {
    overflow: hidden !important;
  }

  #videoRingWrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 285px !important;
    margin: 20px auto 0 !important;
    padding: 10px 0 42px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
  }

  #videoRingPrev,
  #videoRingNext {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    z-index: 30 !important;
  }

  #videoRingPrev img,
  #videoRingNext img {
    width: 22px !important;
    height: 22px !important;
  }

  #videoRingScene {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 235px !important;
    perspective: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  #videoRing {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transform-style: flat !important;
    overflow: visible !important;
  }

  #videoRing .u-video-ring-item {
    display: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 0 !important;
    transform: translateY(-50%) !important;
    transform-origin: center center !important;
    transition: transform .28s ease, opacity .28s ease !important;
    pointer-events: none !important;
  }

  /* 目前影片：完整顯示 */
  #videoRing .u-video-ring-item-active {
    display: block !important;
    left: 0 !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    pointer-events: auto !important;
  }

  /* 下一支：只露右邊一角，明確提示可繼續滑 */
  #videoRing .u-video-ring-item-next {
    display: block !important;
    left: calc(100% - 15px) !important;
    width: 74% !important;
    opacity: .58 !important;
    transform: translateY(-50%) scale(.84) !important;
    transform-origin: left center !important;
    z-index: 4 !important;
    pointer-events: none !important;
    filter: brightness(.82) !important;
  }

  #videoRing .u-video-ring-item-next::before {
    content: "下一支";
    position: absolute;
    top: -25px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: #1f5794;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0 2px 7px rgba(0,0,0,.12);
  }

  #videoRing .u-video-ring-frame {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #000 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
  }

  #videoRing .u-video-ring-frame iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  #videoRing .u-video-ring-caption {
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 4px 0 !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  #videoRing .u-video-ring-item-next .u-video-ring-caption {
    font-size: 11px !important;
    text-align: left !important;
  }

  .u-video-mobile-progress {
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 86px);
    color: rgba(255,255,255,.9);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }
}

@media (max-width: 360px) {
  #videoRingWrap {
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    min-height: 260px !important;
    gap: 3px !important;
  }

  #videoRingPrev,
  #videoRingNext {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  #videoRingScene {
    height: 215px !important;
  }

  #videoRing .u-video-ring-item {
    width: calc(100% - 20px) !important;
  }
}


/* =========================================================
   STEP 4｜下方專訪影片：手機版一支影片配一段文字
   順序：影片 1 → 引言 1 → 講者 1 → 影片 2 → 引言 2 → 講者 2
   桌機版完全不改
   ========================================================= */
@media (max-width: 767px) {
  #block-16,
  #block-17,
  #block-15 {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-top: 34px !important;
    padding-bottom: 48px !important;
  }

  #block-16 > .u-sheet,
  #block-17 > .u-sheet,
  #block-15 > .u-sheet {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* 區塊小標題 */
  #block-16 .u-list-1,
  #block-17 .u-list-1,
  #block-15 .u-list-1 {
    order: 0 !important;
    width: 100% !important;
    margin: 0 0 26px !important;
  }

  #block-16 .u-text-1,
  #block-17 .u-text-1,
  #block-15 .u-text-1 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  /* 配對順序：第一支影片 */
  #block-16 .u-custom-html-1,
  #block-17 .u-custom-html-1,
  #block-15 .u-custom-html-1 {
    order: 1 !important;
  }

  /* 第一支影片引言 */
  #block-16 .u-text-2,
  #block-17 .u-text-2,
  #block-15 .u-text-2 {
    order: 2 !important;
  }

  /* 第一支影片講者 */
  #block-16 .u-text-4,
  #block-17 .u-text-4,
  #block-15 .u-text-4 {
    order: 3 !important;
  }

  /* 第二支影片 */
  #block-16 .u-custom-html-2,
  #block-17 .u-custom-html-2,
  #block-15 .u-custom-html-2 {
    order: 4 !important;
    margin-top: 52px !important;
  }

  /* 第二支影片引言 */
  #block-16 .u-text-3,
  #block-17 .u-text-3,
  #block-15 .u-text-3 {
    order: 5 !important;
  }

  /* 第二支影片講者 */
  #block-16 .u-text-5,
  #block-17 .u-text-5,
  #block-15 .u-text-5 {
    order: 6 !important;
  }

  /* 影片統一為手機寬度、16:9 */
  #block-16 .u-custom-html-1,
  #block-16 .u-custom-html-2,
  #block-17 .u-custom-html-1,
  #block-17 .u-custom-html-2,
  #block-15 .u-custom-html-1,
  #block-15 .u-custom-html-2 {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  #block-16 .u-custom-html-1 iframe,
  #block-16 .u-custom-html-2 iframe,
  #block-17 .u-custom-html-1 iframe,
  #block-17 .u-custom-html-2 iframe,
  #block-15 .u-custom-html-1 iframe,
  #block-15 .u-custom-html-2 iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    transform: none !important;
    border: 0 !important;
  }

  /* 引言：緊接影片下方 */
  #block-16 .u-text-2,
  #block-16 .u-text-3,
  #block-17 .u-text-2,
  #block-17 .u-text-3,
  #block-15 .u-text-2,
  #block-15 .u-text-3 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 0 4px !important;
    transform: none !important;
    position: static !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  /* 講者：右對齊，接在引言之後 */
  #block-16 .u-text-4,
  #block-16 .u-text-5,
  #block-17 .u-text-4,
  #block-17 .u-text-5,
  #block-15 .u-text-4,
  #block-15 .u-text-5 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 4px !important;
    transform: none !important;
    top: auto !important;
    position: static !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 390px) {
  #block-16 > .u-sheet,
  #block-17 > .u-sheet,
  #block-15 > .u-sheet {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  #block-16 .u-text-2,
  #block-16 .u-text-3,
  #block-17 .u-text-2,
  #block-17 .u-text-3,
  #block-15 .u-text-2,
  #block-15 .u-text-3 {
    font-size: 18px !important;
  }

  #block-16 .u-text-4,
  #block-16 .u-text-5,
  #block-17 .u-text-4,
  #block-17 .u-text-5,
  #block-15 .u-text-4,
  #block-15 .u-text-5 {
    font-size: 15px !important;
  }
}


/* =========================================================
   STEP 5｜修正第一支影片引言左偏
   ========================================================= */
@media (max-width: 767px) {
  body #block-16 > .u-sheet > .u-text-2,
  body #block-16 > .u-sheet > .u-text-3,
  body #block-17 > .u-sheet > .u-text-2,
  body #block-17 > .u-sheet > .u-text-3,
  body #block-15 > .u-sheet > .u-text-2,
  body #block-15 > .u-sheet > .u-text-3 {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
    text-indent: 0 !important;
  }
}


/* =========================================================
   STEP 6｜星海互動牆手機版
   1. 原本「我要留言」圖片按鈕移到左下角
   2. 標題/說明文字提升到最上層並加半透明底色
   3. 文字層 pointer-events:none，星星即使在文字後方仍可點擊
   ========================================================= */
@media (max-width: 767px) {
  #block-18 {
    position: relative !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  /* 星星互動層 */
  #block-18 #starWallContainer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 20 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  #block-18 .u-star {
    z-index: 30 !important;
    pointer-events: auto !important;
  }

  /* 標題文字層最高，但讓點擊穿透，避免擋住後面的星星 */
  #block-18 > .u-sheet {
    position: relative !important;
    z-index: 60 !important;
    pointer-events: none !important;
  }

  #block-18 > .u-sheet .u-text-1 {
    position: relative !important;
    z-index: 61 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 34px auto 0 !important;
    padding: 22px 18px 24px !important;
    box-sizing: border-box !important;

    /* 讓文字不會被星星視覺干擾 */
    background: rgba(20, 78, 142, 0.78) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    color: #d8e7f8 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.15);
    pointer-events: none !important;
  }

  #block-18 > .u-sheet .u-text-1 span {
    color: #d8e7f8 !important;
  }

  /* 原本的圖片按鈕：改到左下角，維持原圖、不重畫 */
  #block-18 #starWallWriteBtn {
    position: absolute !important;
    left: 16px !important;
    right: auto !important;
    bottom: 18px !important;
    width: min(42vw, 175px) !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 80 !important;
    pointer-events: auto !important;
  }

  #block-18 #starWallWriteBtn img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* 留言 tooltip 必須比星星與標題都高 */
  #block-18 .u-star-tooltip {
    z-index: 90 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 390px) {
  #block-18 > .u-sheet .u-text-1 {
    margin-top: 26px !important;
    padding: 18px 14px 20px !important;
    border-radius: 15px !important;
  }

  #block-18 #starWallWriteBtn {
    left: 12px !important;
    bottom: 14px !important;
    width: min(44vw, 160px) !important;
  }
}


/* =========================================================
   STEP 7｜星海互動牆再修正
   - 文字框往上：距離頁面頂端約一行標題高度
   - 星星完全避開文字框
   - 星星避開畫面邊緣，避免被裁切
   ========================================================= */
@media (max-width: 767px) {
  #block-18 > .u-sheet .u-text-1 {
    /* 約等於一行「星海互動牆」標題的高度 */
    margin-top: calc(1.15em + env(safe-area-inset-top, 0px)) !important;
  }

  /* 留一點內縮，讓最邊緣星星也不會被裁掉 */
  #block-18 #starWallContainer {
    overflow: hidden !important;
  }

  #block-18 .u-star {
    width: 28px !important;
    height: 28px !important;
    margin-left: -14px !important;
    margin-top: -14px !important;
  }
}


/* =========================================================
   STEP 8｜首屏主視覺、手機自動播放、全站華康中黑體
   ========================================================= */

/* 使用者提供的 TTC：部署時請把「中黑體.ttc」放在 index.html 同層 */
@font-face {
  font-family: "UDN-DFHeiBold";
  src:
    local("華康粗黑體"),
    local("DFHeiBold-B5"),
    local("華康粗黑體(P)"),
    local("DFPHeiBold-B5"),
    url("粗黑體.ttc") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

html,
body,
.u-body,
button,
input,
textarea,
select,
h1, h2, h3, h4, h5, h6,
p, span, div, a, th, td {
  font-family:
    "UDN-DFHeiBold",
    "華康粗黑體",
    "DFHeiBold-B5",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif !important;
}

@media (max-width: 767px) {
  /* 1. 第一區主視覺：
     手機不再用 100svh + cover 強裁切，而是照原圖 1550:1000 完整顯示。 */
  body #block-1 {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1550 / 1000 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-color: #ffffff;
    overflow: hidden !important;
  }

  body #block-1 .u-sheet-1,
  body #block-1 .u-layout-wrap-1,
  body #block-1 .u-layout,
  body #block-1 .u-layout-row,
  body #block-1 .u-layout-cell-1,
  body #block-1 .u-container-layout-1 {
    min-height: 0 !important;
    height: 100% !important;
  }

  body #block-1 .u-sheet-1 {
    width: 100% !important;
    margin: 0 !important;
  }

  body #block-1 .u-layout-wrap-1 {
    width: 100% !important;
    margin: 0 !important;
  }

  /* 2. 創作平台流變背景影片：
     保留 autoplay / muted / playsinline，移除所有可控制的 UI 與點擊。 */
  body #block-20 .u-section-2-video-bg {
    pointer-events: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  body #block-20 video::-webkit-media-controls,
  body #block-20 video::-webkit-media-controls-enclosure,
  body #block-20 video::-webkit-media-controls-panel,
  body #block-20 video::-webkit-media-controls-play-button,
  body #block-20 video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
  }
}


/* =========================================================
   STEP 9｜創作平台流變手機版重新排版
   標題在上 → 影片在下；不再以 absolute 背景疊在標題上
   ========================================================= */
@media (max-width: 767px) {
  body #block-20 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 34px 0 42px !important;
    background: #04122c !important;
    overflow: hidden !important;
  }

  /* 標題先出現 */
  body #block-20 > .u-sheet {
    order: 1 !important;
    position: relative !important;
    z-index: 30 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 18px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body #block-20 > .u-sheet .u-text-1 {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
  }

  /* 影片移到標題下方，使用原本空白區域 */
  body #block-20 > .u-section-2-stage {
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: calc(100% - 28px) !important;
    max-width: 760px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;

    margin: 38px auto 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    z-index: 10 !important;
    background: #020d20 !important;
  }

  body #block-20 > .u-section-2-stage .u-section-2-video-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* 時間軸文字圖仍跟影片疊在同一個畫面中 */
  body #block-20 > .u-section-2-stage .u-section-2-text-slide {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
    /* 保留 JS / 原動畫切換 transform 的空間 */
  }

  body #block-20 > .u-section-2-video-overlay {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body #block-20 {
    padding-top: 28px !important;
    padding-bottom: 34px !important;
  }

  body #block-20 > .u-sheet {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  body #block-20 > .u-section-2-stage {
    width: calc(100% - 20px) !important;
    margin-top: 30px !important;
  }
}


/* =========================================================
   STEP 10｜星海文字框上移 + 大字統一橘色粗體
   ========================================================= */
@media (max-width: 767px) {
  /* 1) 星海文字框固定靠近頁面頂端：
        只保留約一行「星海互動牆」標題高度的上距離 */
  body #block-18 {
    position: relative !important;
  }

  body #block-18 > .u-sheet {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 16px !important;
    padding: 0 !important;
    z-index: 60 !important;
    pointer-events: none !important;
  }

  body #block-18 > .u-sheet .u-text-1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin:
      calc(1.15em + env(safe-area-inset-top, 0px))
      0
      0 !important;
    transform: none !important;
  }

  /* 2) 所有「比內文大的層級」：粗體 + #E34401
        內文、姓名職稱、說明文字維持原本顏色。 */
  body h1,
  body h2,
  body .u-section-2 .u-text-1,
  body .u-section-3 .u-text-1,
  body .u-section-4 .u-text-1,
  body .u-section-5 .u-text-1,
  body .u-section-6 .u-text-1,
  body .u-section-7 .u-text-1,
  body .u-section-8 .u-text-1,
  body .u-section-9 .u-text-1 {
    font-weight: 900 !important;
    color: #E34401 !important;
  }

  /* h1 / 大標題裡的內文 span 不跟著變橘色 */
  body #block-20 .u-text-1 span,
  body #block-13 .u-text-1 span,
  body #block-21 .u-text-1 span,
  body #block-14 .u-text-1 span,
  body #block-18 .u-text-1 span {
    font-weight: 400 !important;
    color: #d8e7f8 !important;
  }

  /* 影片專訪區的引言其實是內容，不視為標題，保留白色 */
  body #block-16 .u-text-2,
  body #block-16 .u-text-3,
  body #block-16 .u-text-4,
  body #block-16 .u-text-5,
  body #block-17 .u-text-2,
  body #block-17 .u-text-3,
  body #block-17 .u-text-4,
  body #block-17 .u-text-5,
  body #block-15 .u-text-2,
  body #block-15 .u-text-3,
  body #block-15 .u-text-4,
  body #block-15 .u-text-5 {
    color: #ffffff !important;
    font-weight: 400 !important;
  }
}

@media (max-width: 390px) {
  body #block-18 > .u-sheet {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  body #block-18 > .u-sheet .u-text-1 {
    margin-top:
      calc(1.05em + env(safe-area-inset-top, 0px))
      !important;
  }
}


/* =========================================================
   STEP 11｜全裝置標題字體 / 橘色 / 暖橘光暈
   - 手機與桌機一起套用
   - 指定三區：「帶得走的能力」「給孩子的一段話」「20年的意義」
   ========================================================= */

/* 全站桌機 + 手機都使用使用者提供的華康粗黑體 */
html,
body,
.u-body,
button,
input,
textarea,
select,
h1, h2, h3, h4, h5, h6,
p, span, div, a, th, td {
  font-family:
    "UDN-DFHeiBold",
    "華康粗黑體",
    "DFHeiBold-B5",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif !important;
}

/* 主要區塊標題：桌機與手機統一為橘色粗體。
   暖橘光暈用 #f9b67d，深藍背景上比純黑陰影更有主視覺一致性。 */
body #block-13 .u-text-1,
body #block-21 .u-text-1,
body #block-14 .u-text-1,
body #block-16 .u-text-1,
body #block-17 .u-text-1,
body #block-15 .u-text-1,
body #block-18 .u-text-1 {
  font-weight: 900 !important;
  color: #E34401 !important;
  text-shadow:
    0 0 5px rgba(249, 182, 125, .82),
    0 0 12px rgba(249, 182, 125, .46) !important;
}

/* 三個指定標題再明確鎖定，避免 Nicepage 原規則覆蓋：
   block-16 = 帶得走的能力
   block-17 = 給孩子的一段話
   block-15 = 20年的意義 */
body #block-16 .u-text-1,
body #block-17 .u-text-1,
body #block-15 .u-text-1 {
  color: #E34401 !important;
  font-weight: 900 !important;
}

/* 標題中的說明內文仍維持內文字色與一般字重，
   不讓整段說明一起變成橘色。 */
body #block-13 .u-text-1 span,
body #block-21 .u-text-1 span,
body #block-14 .u-text-1 span,
body #block-18 .u-text-1 span {
  color: #d8e7f8 !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

/* 三個專訪區的標題若 Nicepage 拆成 span，仍保持橘色粗體 */
body #block-16 .u-text-1 span,
body #block-17 .u-text-1 span,
body #block-15 .u-text-1 span {
  color: #E34401 !important;
  font-weight: 900 !important;
  text-shadow:
    0 0 5px rgba(249, 182, 125, .82),
    0 0 12px rgba(249, 182, 125, .46) !important;
}


/* =========================================================
   STEP 13｜修正 Nicepage 專訪區跑版 + 指定三標題橘色
   ========================================================= */

/* 直接掛在 HTML 實際標題元素上的專用 class，
   避免 Nicepage 的 .u-text-N / inline color 把顏色蓋回藍色。 */
html body .udn-orange-section-title,
html body .udn-orange-section-title *,
html body .udn-orange-section-title a,
html body .udn-orange-section-title span {
  color: #E34401 !important;
  -webkit-text-fill-color: #E34401 !important;
  font-family:
    "UDN-DFHeiBold",
    "華康粗黑體",
    "DFHeiBold-B5",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif !important;
  font-weight: 900 !important;
  text-shadow:
    0 3px 0 #10286c,
    0 5px 10px rgba(16, 40, 108, .55) !important;
}

/* 桌機版三個專訪區回歸 Nicepage 原本的座標與高度系統。
   不再用 flex / auto-height 去重排它們。 */
@media (min-width: 768px) {
  body #block-16,
  body #block-17,
  body #block-15,
  body #block-16 > .u-sheet,
  body #block-17 > .u-sheet,
  body #block-15 > .u-sheet {
    /* 不在這裡覆蓋 Nicepage 的 height / min-height / position */
  }

  body #block-16 .u-custom-html-1,
  body #block-16 .u-custom-html-2,
  body #block-17 .u-custom-html-1,
  body #block-17 .u-custom-html-2,
  body #block-15 .u-custom-html-1,
  body #block-15 .u-custom-html-2,
  body #block-16 .u-text-2,
  body #block-16 .u-text-3,
  body #block-16 .u-text-4,
  body #block-16 .u-text-5,
  body #block-17 .u-text-2,
  body #block-17 .u-text-3,
  body #block-17 .u-text-4,
  body #block-17 .u-text-5,
  body #block-15 .u-text-2,
  body #block-15 .u-text-3,
  body #block-15 .u-text-4,
  body #block-15 .u-text-5 {
    /* Step 13 不新增任何桌機位置覆蓋 */
  }
}

/* 手機仍保留 Step 11 已完成的「影片 → 引言 → 講者」垂直閱讀版型。 */


/* =========================================================
   STEP 14｜橘色標題深藍陰影 + 桌機輪播下移
   ========================================================= */

/* 所有已指定的橘色大標題：#E34401 + #10286c 陰影 */
html body .udn-orange-section-title,
html body .udn-orange-section-title *,
html body #block-13 .u-text-1,
html body #block-21 .u-text-1,
html body #block-14 .u-text-1,
html body #block-16 .u-text-1,
html body #block-17 .u-text-1,
html body #block-15 .u-text-1 {
  color: #E34401 !important;
  -webkit-text-fill-color: #E34401 !important;
  font-weight: 900 !important;
  text-shadow:
    2px 2px 0 #10286c,
    3px 3px 5px rgba(16, 40, 108, .48) !important;
}

/* 說明內文仍維持原本顏色，不跟著橘色 */
html body #block-13 .u-text-1 span,
html body #block-21 .u-text-1 span,
html body #block-14 .u-text-1 span {
  color: #d8e7f8 !important;
  -webkit-text-fill-color: #d8e7f8 !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

/* 桌機：不再硬改 Nicepage section 高度。
   將「進化的語文教育」這組輪播整體往下，
   利用原本難以安全移除的留白，避免畫面上重下空。 */
@media (min-width: 768px) {
  body #block-14 .u-gallery-1,
  body #block-14 .u-carousel,
  body #block-14 .video-ring,
  body #block-14 [class*="carousel"] {
    transform: translateY(70px) !important;
  }

  /* 若實際輪播由自訂 JS 直接掛在 section 內，補抓主要互動容器 */
  body #block-14 > .u-sheet > .u-custom-html,
  body #block-14 > .u-sheet > [class*="custom-html"] {
    transform: translateY(70px) !important;
  }
}

/* 手機不下移，維持目前已調好的閱讀節奏 */
@media (max-width: 767px) {
  body #block-14 .u-gallery-1,
  body #block-14 .u-carousel,
  body #block-14 .video-ring,
  body #block-14 [class*="carousel"],
  body #block-14 > .u-sheet > .u-custom-html,
  body #block-14 > .u-sheet > [class*="custom-html"] {
    transform: none !important;
  }
}


/* =========================================================
   STEP 15｜AI 輪播區：整組下移 + 刪除輪播下方假空白
   ========================================================= */

/* 桌機：
   Nicepage 原本 #block-14 的 .u-sheet-1 使用 min-height:50vw，
   這正是輪播下方大空白的主要來源。
   改成內容高度，並把整個輪播往下約半個可視頁面。 */
@media (min-width: 768px) {
  html body #block-14 {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 56px !important;
  }

  html body #block-14 > .u-sheet,
  html body #block-14 > .u-sheet-1 {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  html body #block-14 #videoRingWrap {
    /* 約半個頁面，但限制上下限，避免超大螢幕移得太誇張 */
    margin-top: clamp(220px, 42vh, 430px) !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }

  html body #block-14 #videoRingScene {
    margin-bottom: 0 !important;
  }
}

/* 手機：
   不做半頁下移，但同樣取消 Nicepage 的 50vw 最低高度，
   避免輪播與下一區之間出現額外空白。 */
@media (max-width: 767px) {
  html body #block-14 {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 28px !important;
  }

  html body #block-14 > .u-sheet,
  html body #block-14 > .u-sheet-1 {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  html body #block-14 #videoRingWrap {
    margin-bottom: 0 !important;
  }
}


/* =========================================================
   STEP 16｜「進化的語文教育」標題區與上一個 slider 拉開距離
   ========================================================= */

/* 桌機：整段標題＋說明往下約 1/4 個可視頁面。
   這裡用 padding-top 製造真正的區塊間距，不用 transform，
   因此不會留下錯誤的佔位或再次破壞 Nicepage 後續排版。 */
@media (min-width: 768px) {
  html body #block-14 {
    padding-top: 25vh !important;
  }

  /* Step 15 已經把輪播本身往下約半頁。
     這次新增的是「區塊開頭」的 1/4 頁間距，
     標題、說明、輪播會一起保持正常文流。 */
}

/* 手機同樣與上一個 slider 做區隔，但避免 25vh 在長手機上過大。 */
@media (max-width: 767px) {
  html body #block-14 {
    padding-top: clamp(90px, 18vh, 150px) !important;
  }
}


/* =========================================================
   STEP 17｜AI 影片輪播往上移約 1/5 頁
   ========================================================= */

/* Step 16/15 原本桌機輪播 margin-top 約 42vh。
   往上移 1/5 可視頁面（20vh）後，改為約 22vh。
   仍保留標題與輪播之間的清楚間距。 */
@media (min-width: 768px) {
  html body #block-14 #videoRingWrap {
    margin-top: clamp(110px, 22vh, 230px) !important;
  }
}

/* 手機也往上縮短約 1/5 頁的視覺距離，但不使用負位移，
   避免和上方文字重疊。 */
@media (max-width: 767px) {
  html body #block-14 #videoRingWrap {
    margin-top: clamp(24px, 6vh, 54px) !important;
  }
}


/* =========================================================
   STEP 18｜桌機人生續寫 + 星海互動牆桌機樣式修正
   ========================================================= */
.u-life-mobile-progress { display:none !important; }
@media (max-width:767px){ .u-life-mobile-progress{display:block !important;} }

@media (min-width:768px){
  html body #lifeCoverflowWrap{display:flex !important;align-items:center !important;justify-content:center !important;gap:16px !important;max-width:900px !important;margin-left:auto !important;margin-right:auto !important;overflow:visible !important;}
  html body #lifeCoverflow{display:flex !important;align-items:center !important;justify-content:center !important;gap:24px !important;flex:1 1 auto !important;min-width:0 !important;overflow:visible !important;transform:none !important;}
  html body #lifeCoverflow .u-life-thumb-center{width:220px !important;height:220px !important;}
  html body #lifeCoverflow .u-life-thumb-near{width:130px !important;height:130px !important;}
  html body #lifeCoverflow .u-life-thumb-far{display:none !important;}

  html body #block-18{position:relative !important;}
  html body #block-18 > .u-sheet{position:relative !important;z-index:60 !important;pointer-events:none !important;}
  html body #block-18 > .u-sheet .u-text-1{position:relative !important;z-index:61 !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;color:#E34401 !important;-webkit-text-fill-color:#E34401 !important;font-weight:900 !important;text-shadow:2px 2px 0 #10286c,3px 3px 5px rgba(16,40,108,.48) !important;pointer-events:none !important;}
  html body #block-18 > .u-sheet .u-text-1 span{color:#d8e7f8 !important;-webkit-text-fill-color:#d8e7f8 !important;font-weight:400 !important;text-shadow:none !important;}
  html body #block-18 #starWallContainer{z-index:20 !important;pointer-events:auto !important;}
  html body #block-18 .u-star{z-index:30 !important;pointer-events:auto !important;}
  html body #block-18 .u-star-tooltip{z-index:90 !important;}
}


/* =========================================================
   STEP 19｜人生續寫桌機 + 星海文字牆最終樣式覆蓋
   ========================================================= */

/* 手機專用進度提示：桌機永遠不顯示 */
html body .u-life-mobile-progress {
  display: none !important;
}
@media (max-width: 767px) {
  html body .u-life-mobile-progress {
    display: block !important;
  }
}

/* 桌機人生續寫：中央大、左右兩側小，保持置中 */
@media (min-width: 768px) {
  html body #block-21 #lifeCoverflowWrap {
    width: 100% !important;
    max-width: 900px !important;
    margin: 38px auto 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body #block-21 #lifeCoverflow {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 260px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body #block-21 #lifeCoverflow .u-life-thumb-center {
    width: 220px !important;
    height: 220px !important;
    opacity: 1 !important;
    z-index: 3 !important;
  }

  html body #block-21 #lifeCoverflow .u-life-thumb-near {
    width: 130px !important;
    height: 130px !important;
    opacity: .75 !important;
    z-index: 2 !important;
  }

  html body #block-21 #lifeCoverflow .u-life-thumb-far,
  html body #block-21 #lifeCoverflow .u-life-thumb-next {
    display: none !important;
  }
}

/* 星海互動牆：桌機、手機文字都統一為原本淺藍色 + 淺黃光暈 */
html body #block-18 > .u-sheet .u-text-1,
html body #block-18 > .u-sheet .u-text-1 * {
  color: #a0c2e8 !important;
  -webkit-text-fill-color: #a0c2e8 !important;
  text-shadow:
    0 0 5px rgba(249, 182, 125, .95),
    0 0 12px rgba(249, 182, 125, .68),
    0 0 20px rgba(249, 182, 125, .38) !important;
}

/* 標題粗體、說明內文維持一般字重 */
html body #block-18 > .u-sheet .u-text-1 {
  font-weight: 900 !important;
}
html body #block-18 > .u-sheet .u-text-1 span {
  font-weight: 400 !important;
}

/* 桌機：不要框，只保留文字與光暈 */
@media (min-width: 768px) {
  html body #block-18 > .u-sheet .u-text-1 {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* 手機：保留原本半透明框 */
@media (max-width: 767px) {
  html body #block-18 > .u-sheet .u-text-1 {
    background: rgba(20, 78, 142, .78) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
}


/* =========================================================
   STEP 20｜桌機星海文字牆光暈降低透明度
   手機版維持 Step 19，不做改動
   ========================================================= */
@media (min-width: 768px) {
  html body #block-18 > .u-sheet .u-text-1,
  html body #block-18 > .u-sheet .u-text-1 * {
    /* 同樣使用 #f9b67d，但透明度明顯降低，
       避免桌機大字出現過厚的奶白色暈邊。 */
    text-shadow:
      0 0 4px rgba(249, 182, 125, .38),
      0 0 10px rgba(249, 182, 125, .20),
      0 0 18px rgba(249, 182, 125, .10) !important;
  }

  html body #block-18 > .u-sheet .u-text-1 span {
    text-shadow:
      0 0 3px rgba(249, 182, 125, .28),
      0 0 8px rgba(249, 182, 125, .14) !important;
  }
}


/* =========================================================
   STEP 22｜只放大手機版「社會共命題」五個按鈕 1.5 倍
   桌機完全不動
   ========================================================= */
@media (max-width: 767px) {
  /* 原本是 min(24vw, 86px)，直接乘 1.5：
     24vw -> 36vw；86px -> 129px */
  html body #block-13 .u-topic-icon {
    width: min(36vw, 129px) !important;
    height: min(36vw, 129px) !important;
    max-width: 129px !important;
    max-height: 129px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  /* 仍維持 3 + 2 排列，但放大後需要較大的列距 */
  html body #block-13 .u-sheet-1 {
    column-gap: 4px !important;
    row-gap: 24px !important;
  }

  /* 輪播跟五顆按鈕保持安全距離 */
  html body #block-13 .u-slider-1,
  html body #block-13 #carousel-7a12 {
    margin-top: 18px !important;
  }
}


/* =========================================================
   STEP 23｜手機版社會共命題按鈕改為原尺寸 1.25 倍
   桌機完全不動
   ========================================================= */
@media (max-width: 767px) {
  html body #block-13 .u-topic-icon {
    width: min(30vw, 107.5px) !important;
    height: min(30vw, 107.5px) !important;
    max-width: 107.5px !important;
    max-height: 107.5px !important;
  }

  /* 1.25 倍後不需要 Step 22 那麼大的列距，稍微收回 */
  html body #block-13 .u-sheet-1 {
    row-gap: 18px !important;
  }
}


/* =========================================================
   STEP 25｜手機三個子標題：像示意圖一樣貼在影片上方
   ========================================================= */
@media (max-width: 767px) {

  /* 三區標題本身不要再被 Nicepage 的絕對 margin 撐開 */
  html body #block-16 .udn-orange-section-title,
  html body #block-17 .udn-orange-section-title,
  html body #block-15 .udn-orange-section-title,
  html body #block-16 .u-text-1,
  html body #block-17 .u-text-1,
  html body #block-15 .u-text-1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 0 36px 0 !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;

    text-align: center !important;
  }

  /* 第一支影片直接接在標題下方，不再帶任何上方位移 */
  html body #block-16 .u-custom-html-1,
  html body #block-17 .u-custom-html-1,
  html body #block-15 .u-custom-html-1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: calc(100% - 24px) !important;
    max-width: 620px !important;
    margin: 0 auto !important;
  }

  /* iframe 本身不再有額外 margin */
  html body #block-16 .u-custom-html-1 iframe,
  html body #block-17 .u-custom-html-1 iframe,
  html body #block-15 .u-custom-html-1 iframe {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* 保留標題前面的呼吸空間，但不讓「標題 → 影片」被拉遠 */
  html body #block-16,
  html body #block-17,
  html body #block-15 {
    padding-top: 54px !important;
  }
}


/* =========================================================
   STEP 26｜手機星海 tooltip 自動換邊 + 不超出畫面
   ========================================================= */
@media (max-width: 767px) {
  html body #block-18 .u-star-tooltip {
    width: min(76vw, 280px) !important;
    max-width: calc(100% - 20px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    z-index: 120 !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   STEP 27｜星海留言 tooltip 永遠蓋在標題卡上方
   ========================================================= */
html body #block-18 {
  position: relative !important;
}

html body #block-18 > .u-star-tooltip {
  position: absolute !important;
  z-index: 300 !important;
  pointer-events: none !important;
}

/* 手機標題卡維持原本視覺層級，但低於 tooltip */
@media (max-width: 767px) {
  html body #block-18 > .u-sheet {
    z-index: 60 !important;
  }

  html body #block-18 > .u-star-tooltip {
    z-index: 300 !important;
    width: min(76vw, 280px) !important;
    max-width: calc(100% - 20px) !important;
  }
}


/* =========================================================
   STEP 28｜新留言星星登場動畫
   放大 → 閃一下 → 發光停半秒 → 光消失 + 回原尺寸
   ========================================================= */

/* transform 用 scale，不改 left/top，所以星星最後仍停在伺服器指定座標 */
html body #block-18 .u-star.u-star-new-arrival {
  z-index: 140 !important;
  animation: udnStarArrival 1.55s cubic-bezier(.22,.8,.24,1) both !important;
  transform-origin: center center !important;
  will-change: transform, opacity, filter;
}

@keyframes udnStarArrival {
  /* 先放大出現 */
  0% {
    transform: scale(2.15);
    opacity: 0;
    filter:
      drop-shadow(0 0 0 rgba(255, 225, 95, 0))
      brightness(1);
  }

  12% {
    transform: scale(2.15);
    opacity: 1;
    filter:
      drop-shadow(0 0 8px rgba(255, 225, 95, .65))
      brightness(1.25);
  }

  /* 閃一下 */
  20% {
    opacity: .22;
    transform: scale(2.05);
  }

  28% {
    opacity: 1;
    transform: scale(2.05);
    filter:
      drop-shadow(0 0 12px rgba(255, 225, 95, .95))
      drop-shadow(0 0 24px rgba(249, 182, 125, .78))
      brightness(1.7);
  }

  /* 發光停留約半秒 */
  60% {
    opacity: 1;
    transform: scale(2.05);
    filter:
      drop-shadow(0 0 12px rgba(255, 225, 95, .95))
      drop-shadow(0 0 24px rgba(249, 182, 125, .78))
      brightness(1.7);
  }

  /* 光消失，回到原本大小 */
  100% {
    transform: scale(1);
    opacity: 1;
    filter:
      drop-shadow(0 0 0 rgba(255, 225, 95, 0))
      brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #block-18 .u-star.u-star-new-arrival {
    animation-duration: .2s !important;
  }
}


/* =========================================================
   STEP 29｜桌機星星 Y 安全帶 + 新星發光停 1 秒再漸退
   ========================================================= */

html body #block-18 .u-star.u-star-new-arrival {
  animation-duration: 2.45s !important;
  animation-timing-function: cubic-bezier(.22,.8,.24,1) !important;
}

@keyframes udnStarArrival {
  /* 放大出現 */
  0% {
    transform: scale(2.15);
    opacity: 0;
    filter:
      drop-shadow(0 0 0 rgba(255, 225, 95, 0))
      brightness(1);
  }

  9% {
    transform: scale(2.15);
    opacity: 1;
    filter:
      drop-shadow(0 0 8px rgba(255, 225, 95, .65))
      brightness(1.25);
  }

  /* 閃一下 */
  15% {
    opacity: .20;
    transform: scale(2.08);
  }

  21% {
    opacity: 1;
    transform: scale(2.05);
    filter:
      drop-shadow(0 0 12px rgba(255, 225, 95, .98))
      drop-shadow(0 0 26px rgba(249, 182, 125, .82))
      brightness(1.75);
  }

  /* 發光狀態維持約 1 秒 */
  62% {
    opacity: 1;
    transform: scale(2.05);
    filter:
      drop-shadow(0 0 12px rgba(255, 225, 95, .98))
      drop-shadow(0 0 26px rgba(249, 182, 125, .82))
      brightness(1.75);
  }

  /* 接著漸進消失光暈、縮回原大小 */
  78% {
    opacity: 1;
    transform: scale(1.65);
    filter:
      drop-shadow(0 0 9px rgba(255, 225, 95, .62))
      drop-shadow(0 0 18px rgba(249, 182, 125, .48))
      brightness(1.48);
  }

  90% {
    opacity: 1;
    transform: scale(1.20);
    filter:
      drop-shadow(0 0 4px rgba(255, 225, 95, .25))
      drop-shadow(0 0 8px rgba(249, 182, 125, .18))
      brightness(1.18);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    filter:
      drop-shadow(0 0 0 rgba(255, 225, 95, 0))
      brightness(1);
  }
}


/* =========================================================
   STEP 31｜手機版專訪文字配對修正
   block-16 / block-17 前後對調；block-15 維持原本
   ========================================================= */
@media (max-width: 767px) {

  /* 帶得走的能力 */
  html body #block-16 .u-custom-html-1 { order: 1 !important; }
  html body #block-16 .u-text-3        { order: 2 !important; }
  html body #block-16 .u-text-5        { order: 3 !important; }

  html body #block-16 .u-custom-html-2 { order: 4 !important; }
  html body #block-16 .u-text-2        { order: 5 !important; }
  html body #block-16 .u-text-4        { order: 6 !important; }

  /* 給孩子的一段話 */
  html body #block-17 .u-custom-html-1 { order: 1 !important; }
  html body #block-17 .u-text-3        { order: 2 !important; }
  html body #block-17 .u-text-5        { order: 3 !important; }

  html body #block-17 .u-custom-html-2 { order: 4 !important; }
  html body #block-17 .u-text-2        { order: 5 !important; }
  html body #block-17 .u-text-4        { order: 6 !important; }

  /* 20年的意義：維持原配對 */
  html body #block-15 .u-custom-html-1 { order: 1 !important; }
  html body #block-15 .u-text-2        { order: 2 !important; }
  html body #block-15 .u-text-4        { order: 3 !important; }

  html body #block-15 .u-custom-html-2 { order: 4 !important; }
  html body #block-15 .u-text-3        { order: 5 !important; }
  html body #block-15 .u-text-5        { order: 6 !important; }
}