/* 全域設定 */
:root {
  --transition-long: all 1s ease-out;
  --fontZH: "Noto Sans TC";
  --fontEN: "Roboto";
  /******************************** Color ********************************/
  /* Primary基本的 */
  --primary: #f35f13;
  --lght-orange: #f68c20;
  --red: #e4352b;
  --gradient-orange: linear-gradient(180deg, #faa61a, #e9652d 74%, #e4352b);
  --gradient-yellow: linear-gradient(
    180deg,
    #fee7a0,
    #ffc100 20%,
    #ffc100 80%,
    #fee7a0
  );
  --shadow-orange: 0 1px 10px rgba(243, 111, 32, 0.8);
  /******************************** Grey & Text ********************************/
  /* Grey */
  --white: #fff;
  --gray100: #f2f2f2;
  --gray200: #e7e7e7;
  --gray300: #d4d4d4;
  --gray400: #bbbbbb;
  --gray500: #959595;
  --gray600: #6a6a6a;
  --gray700: #434343;
  --gray800: #2b2b2b;
  --black: #222222;
  /* Text */
  --txt900: #101828;
  --txt800: #2b2b2b;
  --txt600: #434343;
  --txt400: #777777;
  --txt300: #a8a8a8;
  --txt200: #d3d3d3;
  --txtBrand: var(--mainColor);
  /******************************** Head ********************************/
  --h1: 700 2.5rem/150% var(--fontZH);
  /* 主標題 */
  --h1_spacing: 2px;
  --h2: 700 2rem/135% var(--fontZH);
  /*副標題*/
  --h2_spacing: 0.04rem;
  --h3: 700 1.75rem/150% var(--fontZH);
  /*次要標題*/
  --h3_spacing: 2px;
  --h4: 700 1.5rem/135% var(--fontZH);
  /*小標題*/
  --h4_spacing: 0.03rem;
  --h5: 500 1.25rem/150% var(--fontZH);
  /*分類標題*/
  --h5_spacing: 1px;
  --discount: 400 1rem/150% var(--fontZH);
  --discount_spacing: 0px;
  --link: 400 1rem/150% var(--fontZH);
  --link_spacing: 0px;
  /******************************** Decoration & Body ********************************/
  /* Deco 尚不知用在哪*/
  --deco1: 700 4rem/120% var(--fontZH);
  --deco1_spacing: 0px;
  --deco2: 700 3.75rem/150% var(--fontZH);
  --deco2_spacing: 1px;
  --deco3: 700 2.5rem/120% var(--fontZH);
  --deco3_spacing: 2px;
  --deco4: 700 1.125rem/135% var(--fontZH);
  --deco4_spacing: 0px;
  --deco5: 500 1.25rem/150% var(--fontZH);
  /*Kit 沒有*/
  --deco5_spacing: 0.0125rem;
  /*Kit 沒有*/
  /* Body 尚不知用在哪*/
  --body1: 400 1.125rem/150% var(--fontZH);
  /* --body1_spacing:2px; 原始Kit*/
  --body1_spacing: 0.01em;
  --body2: 700 1rem/135% var(--fontZH);
  --body2_spacing: 0px;
  --body3: 400 1rem/150% var(--fontZH);
  --body3_spacing: 0px;
  --body4: 400 0.875rem/150% var(--fontZH);
  --body4_spacing: 0.00875em;
  /* Minimum */
  --minimum: 400 0.75rem/150% var(--fontZH);
  --minimum_spacing: 0px;
  /******************************** Button ********************************/
  /* ZH */
  --btnL-zh: 700 1rem/135% var(--fontZH);
  --btnL-zh_spacing: 0.03rem;
  --btnM-zh: 500 15px/135% var(--fontZH);
  --btnM-zh_spacing: 0.02813rem;
  --btnS-zh: 400 14px/150% var(--fontZH);
  --btnS-zh_spacing: 0.00875rem;
  /* EN */
  --btnL-en: 700 1rem/135% var(--fontEN);
  --btnL-en_spacing: 0px;
  --btnS-en: 700 12px/135% var(--fontEN);
  --btnS-en_spacing: 0px;
  /******************************** font size ********************************/
  --siza-content_title: 2.48rem;
  --siza-content_sub: 1.9rem;
  /******************************** RWD-手機 mod ********************************/
  --content_title-group_margin: -65px 0 40px 0;
  --mob-content_title-group_margin: -44px 0 5px 0;
  --web-carousel_padding: 4rem 8rem;
  --mob-carousel_padding: 3rem 3rem;
}
/********* 共用 *********/
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--fontEN), var(--fontZH), sans-serif;
  font-size: 16px;
  line-height: initial;
  color: var(--txt600);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
section {
  margin: 0 0 10rem 0;
}
.content_mob {
  display: none;
}
/* btn */
.btn-default {
  color: var(--white);
  font-weight: bold;
  display: inline-flex;
  width: fit-content;
  margin: 0 auto;
  border-radius: 15px;
  background: var(--gradient-orange);
  border: 2px solid #ff9800;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 4px 7px rgba(243, 111, 32, 0.5);
  border: 3px solid var(--primary);
  cursor: pointer;
}
.btn-default:hover {
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}
.btn-default:active {
  color: var(--white);
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(255, 152, 0, 0.3);
}
/* 共用 RWD-手機 */
@media (max-width: 768px) {
  section {
    margin: 0 0 7rem 0;
  }
  .content_web {
    display: none;
  }
  .content_mob {
    display: block;
  }
}
/********* app-download *********/
.app-download {
  position: fixed;
  z-index: 99;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.download-group {
  position: relative;
  min-height: 155px;
  background: var(--gradient-orange);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  width: 110px;
}
.download-qr {
  box-shadow: 0 7px 12px rgb(176 26 5 / 79%);
}
.download-btn {
  background: var(--gradient-yellow);
  font-size: 1.75rem;
  font-weight: bold;
  border-radius: 15px;
  padding: 0.7rem 2rem;
  white-space: nowrap;
  display: block;
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 0.3em;
}
.download-finger {
  position: absolute;
  bottom: 0;
  right: -17px;
  width: 34px;
}
/********* RWD *********/
@media (max-width: 768px) {
  .app-download {
    display: none;
  }
}
/********* top-menu *********/
header {
  height: initial;
  background: initial;
}
.top_navbar {
  padding: 2rem 2.5rem 1.5rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--lght-orange);
  position: relative;
  z-index: 10;
}
.top_navbar-brand {
  width: 200px;
  display: block;
}
.top_navbar-brand img {
  width: 100%;
}
.top_navbar-collapse {
  display: block;
}
/**/
.top_navbar-ul {
  display: flex;
  font: var(--h3);
  list-style: none;
}
.top_navbar-ul li a {
  padding: 0 20px;
  position: relative;
  color: var(--white);
}
.top_navbar-ul li a:after {
  content: " ";
  display: inline-block;
  width: 1px;
  border-right: 1px solid var(--white);
  position: absolute;
  padding: 3px 0;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  height: 16px;
}
.top_navbar-ul li:last-of-type a {
  padding-right: 0;
}
.top_navbar-ul li:last-of-type a:after {
  border-right: 0px solid var(--white);
}
/*手機版選單*/
.menuToggle {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.icon-menu {
  color: #fff; /* 白色 */
}
/*圖示*/
.icon-menu .line {
  transition:
    transform 0.3s ease,
    opacity 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.menuToggle.is-open .line1 {
  transform: translateY(7px) rotate(45deg);
}

.menuToggle.is-open .line2 {
  opacity: 0;
}

.menuToggle.is-open .line3 {
  transform: translateY(-7px) rotate(-45deg);
}
/* 共用 top-menu  RWD-手機 */
@media (max-width: 768px) {
  .top_navbar-brand {
    width: 160px;
  }
  .top_navbar-ul {
    display: none;
  }
  /*次選單*/
  .top_navbar-ul.is-open {
    display: block;
    position: absolute;
    top: 75px;
    right: 0;
    background: #fff;
    z-index: 99;
    width: 100%;
    padding: 1rem 2rem 1rem 2rem;
  }
  .top_navbar-ul li {
    margin-bottom: 0.5rem;
  }
  .top_navbar-ul li a {
    color: var(--color);
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    background: var(--gray100);
    justify-content: center;
    display: flex;
    font-size: 2rem;
  }
  .top_navbar-ul li:last-of-type a {
    padding-right: 1rem;
  }
  .menuOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 8;
  }
  /* 開啟狀態 */
  .menuOverlay.is-open {
    opacity: 1;
    visibility: visible;
  }
}
/********* Banner *********/
/**/
.pageBanner {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: url(../img/pgBanner-bg.png) no-repeat center bottom / cover;
  height: initial;
  overflow: hidden;
}
/**/
.banner_group {
  display: flex;
  position: relative;
  z-index: 5;
  width: 80%;
  margin: 0 auto;
  padding: 5rem 0;
}
.banner_title {
  width: 60%;
  text-align: center;
}
.banner_img {
  width: 40%;
}
.banner_title-logo {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  white-space: nowrap;
}
.banner_title-logo img {
  width: 70%;
}
.text-part {
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
}
.banner_title-sub {
  width: 75%;
  margin: 0 auto;
}
.banner_content {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.75rem;
  border: 3px solid var(--lght-orange);
  border-radius: 15px;
  padding: 2rem 4rem 10rem 4rem;
  font-weight: bold;
  background-color: var(--white);
  margin: 20px auto 0 auto;
  white-space: nowrap;
  position: relative;
  gap: 13px;
}
.banner_content > div:first-child {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  line-height: 1;
}
.banner_content_group {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  line-height: 1;
}
.point_50 {
  width: 80px;
  display: inline-block;
}
.banner_content-openpoint {
  width: 60px;
}
.banner_content img {
  width: 100%;
}
.banner_content-point {
  color: var(--primary);
}
/**/
.banner_content .banner_btn_group {
  position: absolute;
  bottom: -30px;
}
.banner_content .banner_btn {
  font-family: "Noto Sans TC", sans-serif;
  text-shadow: 1px 5px 1px rgb(163 61 0);
  font-weight: 900;
  font-size: 3rem;
  padding: 0.3rem 4rem 1rem 4rem;
  position: relative;
}
.btn_hand {
  width: 45px;
  position: absolute;
  bottom: -24px;
  right: -27px;
  animation: hand-move 3s infinite ease-in-out;
  filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black)
    drop-shadow(0 0 1px black);
  transform-origin: center bottom;
}
.btn_hand_light {
  width: 30px;
  position: absolute;
  bottom: 10px;
  right: 3px;
  filter: drop-shadow(5px 4px 2px rgba(255, 165, 0, 0.9)); /* 橙色陰影 */
  transform: scale(0);
  opacity: 0;
  animation: light-click 3s infinite ease-in-out;
  transform-origin: center center;
}
/* 手指移動 */
@keyframes hand-move {
  0% {
    transform: translate(0, 0) scale(1);
  }
  40% {
    transform: translate(-6px, -6px) scale(1); /* 左上移動 */
  }
  60% {
    transform: translate(-6px, -6px) scale(0.9); /* 模擬按壓 */
  }
  65% {
    transform: translate(-6px, -6px) scale(1); /* 彈回放大 */
  }
  70% {
    transform: translate(-6px, -6px) scale(1); /* 停留 */
  }
  100% {
    transform: translate(0, 0) scale(1); /* 回到原位 */
  }
}
/* 光芒 */
@keyframes light-click {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(0);
    opacity: 0; /* 不顯示 */
  }
  62% {
    transform: scale(1.2);
    opacity: 1; /* 模擬點擊 */
  }
  70% {
    transform: scale(1);
    opacity: 1; /* 短暫停留 */
  }
  85% {
    transform: scale(1);
    opacity: 0.2;
  }
  100% {
    transform: scale(0);
    opacity: 0; /* 消失 */
  }
}
/* 背景-甜甜圈 */
.pageBanner::before,
.pageBanner::after,
.pageBanner .container-fluid::before,
.pageBanner .container-fluid::after {
  content: "";
  position: absolute;
  transition: var(--transition-long);
  transition-delay: 0.5s;
}
/*甜甜圈-黃色*/
.pageBanner::before {
  z-index: 2;
  left: 50%;
  bottom: 20%;
  width: 120px;
  aspect-ratio: 1;
  background: url(../img/pgBanner-dot.png) no-repeat center/contain;
  opacity: 0;
  animation: decoMoving 3s cubic-bezier(0.5, 0, 0.5, 1) both infinite;
  animation-delay: 0.25s;
}
/*下方-圓弧*/
.pageBanner::after {
  background-image: initial;
}
.banner_bg {
  height: 30%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
}
.banner_bg::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 92px;
  top: -92px;
  background: url(../img/pgBanner-bottom.png) no-repeat center top / auto 100%;
}
/*甜甜圈-紫色*/
.pageBanner .container-fluid::before {
  left: 70%;
  bottom: 55%;
  width: 90px;
  aspect-ratio: 1;
  background: url(../img/pgBanner-dot2.png) no-repeat center/contain;
  opacity: 0;
  animation: decoMoving 3s cubic-bezier(0.5, 0, 0.5, 1) both infinite;
  animation-delay: 0.5s;
}
/*甜甜圈-粉色*/
.pageBanner .container-fluid::after {
  right: -5%;
  left: initial;
  bottom: 2%;
  width: clamp(120px, 40vw, 500px);
  aspect-ratio: 1;
  background: url(../img/pgBanner-dot3.png) no-repeat center/contain;
  opacity: 0;
  animation: decoMoving 3s cubic-bezier(0.5, 0, 0.5, 1) both infinite;
  animation-delay: 0.75s;
}
.animated.pageBanner::before,
.pageBanner .container-fluid::before,
.pageBanner .container-fluid::after {
  opacity: 1;
}
.animated.pageBanner::before {
  left: 4%;
  bottom: 0;
}
.animated.pageBanner .bnTitle__mj {
  opacity: 1;
}
.animated.pageBanner .bnTitle__sub {
  opacity: 1;
}

/*  RWD-手機 */
@media (max-width: 1500px) {
  /*甜甜圈-紫色*/
  .pageBanner .container-fluid::before {
    right: 34%;
    top: -5%;
    left: inherit;
  }
  /*甜甜圈-黃色*/
  .animated.pageBanner::before {
    left: 7%;
    bottom: 28%;
  }
  /*甜甜圈-粉色*/
  .pageBanner .container-fluid::after {
    right: -10%;
    bottom: 10%;
  }
}
@media (max-width: 768px) {
  .banner_group {
    width: 100%;
    flex-direction: column;
    gap: 50px;
    padding: 0rem 0;
  }
  .banner_title {
    width: 100%;
  }
  .text-part {
    font-size: 3rem;
  }
  .banner_title-logo img {
    width: 60%;
  }
  .banner_title-sub {
    margin: 15px auto 0 auto;
  }
  .banner_content {
    display: flex;
    width: 85%;
    white-space: normal;
    padding: 2rem 4rem 9rem 4rem;
    gap: 25px;
  }
  .banner_img {
    width: 93%;
    margin: 0 auto;
  }
  .banner_content > div:first-child {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .banner_content .banner_btn {
    font-size: 2.7rem;
    padding: 0.3rem 3rem 1rem 3rem;
  }
  /**/
  .banner_bg {
    height: 14%;
  }
  /*甜甜圈-紫色*/
  .pageBanner .container-fluid::before {
    right: -8%;
    top: -6%;
    left: inherit;
  }
  /*甜甜圈-黃色*/
  .animated.pageBanner::before {
    left: 1%;
    bottom: 18%;
  }
  /*甜甜圈-粉色*/
  .pageBanner .container-fluid::after {
    right: -31%;
    bottom: 17%;
    width: 60%;
  }
}

/********* content *********/
/* title */
.content_title-group {
  text-align: center;
  margin: 0 0 40px 0;
}
.content_title {
  background: var(--gradient-yellow);
  display: inline-block;
  padding: 2rem 3rem;
  border-radius: 25px;
  font-weight: bold;
  margin: 0 0 15px 0;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  font-size: var(--siza-content_title);
}
.content_title-group p {
  font-size: var(--siza-content_sub);
  font-weight: bold;
}
/********* member-exclusive 會員專屬 *********/
/* card */
.content_card-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5rem 4rem;
}
.card {
  background-color: var(--white);
  box-shadow: var(--shadow-orange);
  padding: 2rem 3rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.card-img {
  padding: 1rem 3rem;
  border-bottom: 2px solid var(--gray200);
}
.card-title {
  font-size: 2rem;
  font-weight: bold;
}
.card-content {
  font-size: 1.5rem;
  text-align: left;
  flex-grow: 1;
}
.card-btn {
  font-size: 2rem;
  padding: 1rem 1.75rem;
  text-align: center;
  margin-top: auto;
}
.content_bottom-btn {
  font-family: "Noto Sans TC", sans-serif;
  text-shadow: 1px 5px 1px rgb(163 61 0);
  font-weight: 900;
  font-size: 3rem;
  letter-spacing: 0.1rem;
  padding: 0.3rem 4rem 1rem 4rem;
  position: relative;
  margin: 60px auto 0 auto;
  display: block;
  text-align: center;
}
/* member-exclusive 會員專屬 RWD-手機 */
@media (min-width: 1500px) {
  .content_card-group {
    grid-template-columns: repeat(5, 1fr);
    gap: 5rem 5rem;
  }
}
@media (max-width: 1200px) {
  .content_card-group {
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem 5rem;
  }
}
@media (max-width: 768px) {
  .content_title-group {
    margin: 0 0 30px 0;
  }
  .content_card-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 2rem;
  }
  .card {
    padding: 1rem 2rem 2rem 2rem;
  }
  .card-img {
    padding: 0;
  }
  .card-btn {
    font-size: 1.75rem;
    padding: 0.5rem 1rem 1rem 1rem;
  }
  .content_bottom-btn {
    padding: 0.3rem 3rem 1rem 3rem;
    font-size: 2.5rem;
    width: 200px;
  }
}

/********* points-discount 點數折抵 *********/
#points-discount {
  background-color: var(--gray100);
  padding: var(--web-carousel_padding);
  border-radius: 25px;
}
#points-discount .content_title-group {
  margin: var(--content_title-group_margin);
}
.carousel_web-group {
  display: flex;
  flex-direction: row;
  gap: 4rem;
}
.carousel_web {
  flex: 1;
  text-align: center;
}
.carousel_title {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 1.75rem;
  background-color: var(--white);
  box-shadow: var(--shadow-orange);
  padding: 1rem 2rem;
  border-radius: 10px;
  margin: 0 0 20px 0;
  font-weight: bold;
}
.carousel_number {
  aspect-ratio: 1 / 1;
  width: 3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary);
  color: var(--white);
}
.carousel_number-title {
  color: var(--primary);
}
/* red-highlights 畫面重點紅框*/
.red-highlights {
  border: 3px solid var(--red);
  border-radius: 5px;
  position: absolute;
  z-index: 5;
}
.icp-home {
  bottom: 5%;
  left: 40%;
  width: 20%;
  height: 13%;
}
.icp-pay {
  bottom: 26%;
  left: 7%;
  width: 85%;
  height: 17%;
}
/* carousel */
.carousel {
  padding: 10px 0;
  position: relative;
}
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: var(--gray500);
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
.carousel-inner {
  padding: 20px 0;
}
.carousel-indicators .active {
  opacity: 1;
}
/* points-discount 點數折抵 RWD-手機 */
@media (min-width: 1500px) {
  .carousel_web-group {
    gap: 10rem;
  }
}
@media (max-width: 768px) {
  #points-discount .content_title-group {
    margin: var(--mob-content_title-group_margin);
  }
  #points-discount {
    padding: var(--mob-carousel_padding);
  }
}

/********* ticket-instructions 票夾說明 *********/
#ticket-instructions {
  background-color: var(--gray100);
  padding: var(--web-carousel_padding);
  border-radius: 25px;
}
#ticket-instructions .content_title-group {
  margin: var(--content_title-group_margin);
}
/* red-highlights 畫面重點紅框*/
.icp-life {
  bottom: 5%;
  left: 25%;
  width: 17%;
  height: 9%;
}
.icp-life-home {
  bottom: 46%;
  right: 12%;
  width: 30%;
  height: 7%;
}
@media (max-width: 768px) {
  #ticket-instructions {
    padding: var(--mob-carousel_padding);
  }
  #ticket-instructions .content_title-group {
    margin: var(--mob-content_title-group_margin);
  }
}
/********* registration-process 註冊流程 *********/
#registration-process {
  background-color: var(--gray100);
  padding: var(--web-carousel_padding);
  border-radius: 25px;
}
#registration-process .content_title-group {
  margin: var(--content_title-group_margin);
}
.video-wrapper {
  position: relative;
  width: 100%; /* 滿版寬度 */
  padding-bottom: 56.25%; /* 16:9 高寬比 (9 ÷ 16 = 0.5625) */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 768px) {
  #registration-process {
    padding: var(--mob-carousel_padding);
  }
  #registration-process .content_title-group {
    margin: var(--mob-content_title-group_margin);
  }
}
/********* footer *********/
@media screen and (max-width: 640px) {
  footer {
    border-radius: 0;
  }
}
/********* phoneBox *********/
.phoneBox {
  position: relative;
  max-width: initial;
  margin: 0 auto;
  aspect-ratio: 40 / 79;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.phoneBox::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url(../img/phone.png) no-repeat center/contain;
}
.phoneBox img {
  position: absolute;
  left: 50%;
  top: 0;
  aspect-ratio: 57/124;
  object-fit: contain;
  width: 87%;
  margin-top: 4%;
  mask: initial;
  /*mask: url(../img/phone-mask.png);*/
  mask-size: 100% auto;
  mask-position: center top;
  transition: var(--transition-long);
  transform: translateX(-50%);
}
/********* modal *********/
.modal-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  border-radius: 8px;
  outline: 0;
  border: 0px solid var(--primary);
  min-height: 330px;
  line-height: 1.5;
  box-shadow: var(--shadow-orange);
}
.modal-title {
  font-size: 1.75rem;
  font-weight: bold;
}
.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--white);
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1em auto no-repeat;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}
/**/
.modal-body {
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #000;
  font-size: 2rem;
  gap: 14px;
}
.modal-body img {
  margin: 0 0 20px 0;
}
.modal-header {
  background-color: var(--lght-orange);
  color: var(--white);
  font-weight: bold;
  font-size: 2rem;

  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.modal-category {
  background-color: var(--lght-orange);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 15px;
  align-self: flex-start;
  font-size: 1.5rem;
}

.modal-content-text {
  font-size: 1.75rem;
}

.modal-footer .btn {
  font-size: 1.75rem;
  background-color: var(--gray600);
}

.modal-link {
  color: var(--lght-orange);
  font-weight: bold;
}
/* 已經點過的連結 */
.modal-link:visited {
  color: var(--lght-orange);
  font-weight: bold;
}
/* 滑入 */
.modal-link:hover {
  color: var(--lght-orange);
  font-weight: bold;
}
/* 點擊時 */
.modal-linka:active {
  color: var(--lght-orange);
  font-weight: bold;
}

@media (max-width: 768px) {
  .modal-content {
    width: 90%;
  }
  .modal-dialog-centered {
    align-items: flex-start;
  }

  .modal-dialog {
    margin-top: 2rem;
  }
}

/********* 內頁共用-架構 *********/
.blockHeight--pageOutside {
  --aside-w: clamp(200px, 20vw, 250px);
  --gap: 4rem;
  max-width: var(--containerW-fluid);
  margin: auto;
  padding-top: 3.75rem;
  padding-left: calc(var(--ftMargin) + var(--ftPadding));
  padding-right: calc(var(--ftMargin) + var(--ftPadding));
}
.blockHeight--pageOutside::after {
  content: "";
  display: block;
  clear: both;
  overflow: hidden;
}
aside {
  position: sticky;
  top: var(--body-top);
  width: var(--aside-w);
  float: left;
}
main {
  flex: 1;
}
aside + main {
  width: calc(100% - var(--aside-w));
  padding-left: var(--gap);
  margin-left: auto;
}
/********* RWD *********/
@media (min-width: 768px) and (max-width: 1500px) {
  .blockHeight--pageOutside {
    padding-left: 16rem;
    padding-right: 16rem;
  }
}
/********* 動畫 *********/
.phone-move {
  animation-name: floatY;
  animation-duration: 2.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}
/********* 立體字 *********/
.text-3d {
  font-size: 80px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 2px;
  display: inline-block;
  position: relative;
  margin: 0;
  /* 藍色漸層文字 */
  background: linear-gradient(180deg, #6db4f2 0%, #4a90e2 50%, #2e5c8a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* 黑色描邊 - 加粗讓邊緣更圓潤 */
  -webkit-text-stroke: 4px #000;
  text-stroke: 4px #000;
  paint-order: stroke fill;
  /* 柔和邊緣 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 黑色立體厚度 - 垂直往下堆疊 */
  filter: drop-shadow(0 1px 0 #000) drop-shadow(0 2px 0 #000)
    drop-shadow(0 3px 0 #000) drop-shadow(0 4px 0 #000)
    drop-shadow(0 5px 0 #000) drop-shadow(0 6px 0 #000)
    drop-shadow(0 8px 15px rgba(0, 0, 0, 0.5))
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}