* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  /* outline: 1px solid #77040450; */
}

body::-webkit-scrollbar {
  display: none;
}

html {
  font-size: 1vw;
  font-family: "Noto Sans CJK TC", Arial, sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  background: #796298;
  font-weight: 600;
}

a {
  display: inline-block;
  text-decoration: none;
}

span {
  display: inline-block;
}

img {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}

/* 寬度1400px 尺寸跟定位用rem設定 */
@media(min-width: 1400px) {
  html {
    font-size: 14px !important;
  }
}

/* 專門For PC設定 */
@media(min-width: 641px) {
  .pc {
    display: block;
  }

  .mobile {
    display: none;
  }
}

/* 專門For Ｍobile設定 */
@media(max-width: 640px) {
  .mobile {
    display: block;
  }

  .pc {
    display: none;
  }

  .mobile .screen-bg {
    position: absolute;
    width: 23.43rem;
    top: 0;
    z-index: 50;
  }

  .mobile .screen-bg.right {
    right: 0;
    z-index: 50;
  }

  .screen-background.mobile {
    width: 100%;
    height: 100%;

  }

  .activity.mobile {
    position: absolute;
    width: 100rem;
    top: 0;
  }

  /* ------------------------------------------------------------ */
  /* 活動截止提醒彈窗 */
  /* .expired-popup .expired-popup-content {
    background: white;
    padding: 10rem 8rem !important;
    border-radius: 1.5rem !important;
    font-size: 5rem !important;
    line-height: 10rem !important;
    letter-spacing: 0.1rem;
  }

  .expired-popup .expired-confirm-btn {
    font-weight: 400;
    margin-top: 2rem;
    margin-left: 0.1rem;
    padding: 1rem 4.5rem !important;
    font-size: 5rem !important;
    border-radius: 1rem !important;
  }

  .expired-popup .expired-closure {
    top: -4rem !important;
    right: -4rem !important;
    width: 12rem !important;
    height: 12rem !important;
    border: 7px solid #FFF;
  }

  .expired-popup .expired-closure img {
    padding: 2rem 2rem 3rem 2.5rem !important;
  } */

  /* ------------------------------------------------------------ */
  /* 得獎公布 */
  .announcement-popup.mobile .announcement-closure {
    position: absolute;
    width: 10.93rem;
    top: -15rem;
  }

  .mobile .announcement-popup-content {
    width: 91.09rem;
    border-radius: 5.46rem;
    top: 95rem;
  }

  .mobile .announcement-popup-txt {
    padding: 0rem 2.5rem;
    margin: 1.5rem;
    width: 91.09rem;
    height: 143rem;
    font-family: "Noto Sans CJK TC";
    font-weight: 500;
    letter-spacing: 0.15rem;
    overflow-y: overlay;
  }

  .mobile .announcement-popup-txt h5 {
    font-size: 8.12rem;
    margin-top: 5rem;
    margin-bottom: 6rem;
  }

  .mobile .announcement-popup-txt p {
    font-size: 3.75rem;
    text-align: center;
    line-height: 6rem;
    font-weight: 500;
  }

  .mobile .announcement-popup-txt .pilk {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .mobile .announcement-popup-txt .purple {
    margin-bottom: 10rem;
  }

  .mobile .announcement-popup-txt .popup-pilk,
  .mobile .announcement-popup-txt .popup-purple {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mobile .announcement-popup-txt .popup-pilk .announcement_popup_pink,
  .mobile .announcement-popup-txt .popup-purple .announcement_popup_purple {
    width: 55.46rem;
    margin: 0 1.7rem;
  }

  .mobile .announcement-popup-txt .pilk ul,
  .mobile .announcement-popup-txt .purple ul {
    list-style-type: none !important;
    margin-left: 0rem;
    margin-top: 7.03rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 5rem;
    line-height: 7rem;
    gap: 7rem;
  }

  .mobile .announcement-popup-txt .pilk ul li:nth-child(1),
  .mobile .announcement-popup-txt .pilk ul li:nth-child(3),
  .mobile .announcement-popup-txt .purple ul li:nth-child(1),
  .mobile .announcement-popup-txt .purple ul li:nth-child(3) {
    width: 100%;
  }

  .mobile .announcement-popup-txt .pilk ul p,
  .mobile .announcement-popup-txt .purple ul p {
    font-size: 4.37rem;
    text-align: center;
    margin: 1rem 0;
  }

  .mobile.announcement-popup .popup_line {
    width: 100%;
    border: 0.5px solid #9c9c9c80;
    margin: 10rem 0 10rem 0;
    margin-left: -0.2rem;
  }

  /* 設定滾動條 */
  .mobile .announcement-popup-txt::-webkit-scrollbar {
    display: none;
  }


  /* ----------------------------------------------------------------*/
  /* 按鈕 */
  .mobile .button {
    width: 44.53rem;
    /* cursor: none; */
    transition: none;
  }

  .mobile .button:hover {
    transform: none;
    transition: none;
  }

  /* ----------------------------------------------------------------*/
  /* 標題 */
  .mobile .activity_title {
    top: 2rem;
    width: 80%;
  }

  .mobile .activity_title .title {
    width: 100%;
    animation: fadeInUp 1s ease-out forwards;
  }


  /* ----------------------------------------------------------------*/
  /* 開始測驗 */
  .mobile .start {
    /* display: none; */
    top: 45rem;
  }

  .mobile .start-card {
    margin-left: 0rem;
  }

  .mobile .start-card-bg {
    width: 100rem;
  }

  .mobile .start-content {
    position: absolute;
    top: 69rem;
  }

  .mobile .start-txt {
    width: 67.18rem;
  }

  .mobile .start-btn {
    margin-top: 1.5rem;
  }

  .mobile .details {
    margin-top: 5.5rem;
    font-size: 4.06rem;
    font-weight: 100;
    letter-spacing: 0.1rem;
    padding: 0.2rem;
    border-bottom: 0.5px solid #FFF;
  }

  /* ----------------------------------------------------------------*/
  /* 開始測驗 (注意事項) popup */
  .mobile .start-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
  }

  .mobile .start-closure {
    position: absolute;
    width: 11.71rem !important;
    top: -15rem !important;
    right: 0;
    cursor: pointer;
    transition: transform 0.5s linear
  }

  .mobile .start-popup-content {
    width: 91.09rem;
    height: 143.90rem;
    border-radius: 7rem;
    top: 95rem;
  }

  .mobile .start-popup-txt {
    padding: 0rem 2rem;
    margin: 2rem;
    width: 83.75rem;
    height: 132.34rem;
    font-size: 3.3rem;
    font-family: "Noto Sans CJK TC";
    font-weight: 500;
    line-height: 6.3rem;
    letter-spacing: 0.3rem;
    overflow-y: overlay;
  }

  .mobile .start-popup-txt h5 {
    color: #673ca8;
    font-weight: 600;
  }

  .mobile .start-popup-txt .pilk {
    color: #da8396;
  }

  .mobile .start-popup-txt .purple {
    color: #9d83c4;
  }

  .mobile .start-popup-txt .popup-pilk,
  .mobile .start-popup-txt .popup-purple {
    flex-direction: column;
    align-items: center;
  }

  .mobile .start-popup-txt .popup-pilk .start_popup_pink,
  .mobile .start-popup-txt .popup-purple .start_popup_purple {
    width: 58.59rem;
    position: relative;
    /* margin: 0 auto; */
    margin-top: 3.5rem;
    margin-left: 10rem;
    margin-bottom: -8rem;
  }

  .mobile .start-popup-txt .pilk ul,
  .mobile .start-popup-txt .purple ul {
    list-style-type: disc;
    text-align: left;
    margin-left: 4.5rem;
  }

  .mobile .start-popup-txt ol {
    list-style-type: decimal;
    margin-top: 0.5rem;
    margin-left: 5.2rem;
  }

  /* 設定滾動條 */
  .mobile .start-popup-txt::-webkit-scrollbar {
    display: none;
  }

  /* ----------------------------------------------------------------*/
  /* 測驗題 */
  .mobile .start-container {
    display: none;
    top: 115rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .mobile .progress-bar {
    bottom: 3.2rem;
    width: 59.84rem;
    height: 1.53rem;
    border-radius: 10rem;
    left: 20rem;
    transform: translateX(-50%);
  }

  .mobile .card_question {
    width: 100rem;
    height: auto;
    margin-left: 0;
  }

  .mobile .btnPrev.M,
  .mobile .btnNext.M {
    top: 55rem;
    width: 21.87rem;
    pointer-events: none;
  }

  .mobile .btnPrev.M.active,
  .mobile .btnNext.M.active {
    opacity: 1;
    /* 啟用點擊功能 */
    pointer-events: auto;
  }

  .mobile .btnPrev {
    left: -1rem;
  }

  .mobile .btnNext {
    right: -1rem;
  }

  .mobile .card_contentMobile {
    position: absolute;
    left: 22rem;
    top: 12rem;
    width: 55%;
  }

  .mobile .question {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mobile .question span {
    font-size: 11.37rem;
    font-weight: 400;
    margin-bottom: 2.5rem;
  }

  .mobile .question p {
    font-size: 6.68rem;
    font-weight: 400;
    margin-left: 0;
    line-height: 7.5rem;
    text-align: center;
  }

  .mobile .card_contentMobile ul {
    position: absolute;
    margin-top: 35rem;
    height: 30rem;
    width: 96%;
    opacity: 0;
    transform: translateY(50px);
    animation: question 1s cubic-bezier(0, 0, 0, 0.99) forwards;
    animation-delay: 0.5s;
    z-index: 10;
  }

  .mobile .card_contentMobile ul li {
    display: inline-flex;
    /* 讓 `li` 的寬度依照內容大小 */
    margin-bottom: 4rem;
    line-height: 5.5rem;
  }

  .mobile .card_contentMobile ul li .number {
    display: inline-block;
    width: 5rem;
    /* 這裡設置編號的寬度，確保換行後的文字對齊 */
    text-align: left;
    margin-right: 0.1rem;
    /* 使編號和文字之間有點間距 */
    white-space: nowrap;
    /* 防止編號換行 */
  }

  .mobile .card_contentMobile ul li span.number+span {
    word-break: break-word;
    /* 確保長文本能換行 */
  }

  .mobile .btnOptions {
    color: #FFF;
    background-color: #AEAEAE;
    border: none;
    font-size: 4.5rem;
    font-weight: 300;
    padding: 1.2rem 3rem 1.5rem 3rem;
    letter-spacing: 0.1rem;
    border-radius: 5rem;
  }

  .mobile .illustration {
    position: absolute;
    width: 43.75rem;
    top: 63rem;
    left: 49%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0;
    animation: illustration 1s ease-out forwards;
    animation-delay: 0.5s;
  }

  /* ----------------------------------------------------------------*/
  /* popup */
  .mobile .popup {
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
  }

  /* ----------------------------------------------------------------*/
  /* 分享 popup */
  .mobile .popup-content {
    display: block;
  }

  .mobile .result-bg {
    width: 156.25rem;
    height: 156.25rem;
    top: 0rem;
    left: -28rem;
  }

  /* 設定彈出卡片的樣式 */
  .mobile .popupBg {
    /* background-image: url("../images/m/interactive/m_result_card_back_pink.png"); */
    margin-top: 38rem;
    width: 100rem;
    height: 121.87rem;

  }

  .mobile .btnAgain,
  .mobile .btnShare {
    width: 44.53rem;
  }

  /* 旋轉後的最終背景 */
  .mobile .popupBg.ended {
    /* background-image: url("../images/m/interactive/m_result_card_01_pink.png"); */
  }

  .mobile .popup_btn {
    top: 153rem;
    gap: 3rem;
    left: 27.2rem;
    transform: translate(0, 0);
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .mobile .popup_btn.show {
    opacity: 1;
    /* 顯示按鈕 */
  }

  /* 初始隱藏 popuptxt */
  .mobile .popuptxt {
    position: relative;
    margin-left: 0rem;
    padding-top: 0rem;
  }

  .mobile .popuptxt .more {
    position: absolute;
    top: 91.8rem;
    left: 37rem;
    width: 28rem;
    height: 10rem;
  }

  /* ----------------------------------------------------------------*/
  /* 分享FB popup */
  /* 留下資料 popup */
  /* 感謝參加 popup */
  .mobile .shareFbPopup {
    /* display: block; */
  }

  .mobile .shareFb-card,
  .mobile .material-card,
  .mobile .tfp-card {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 30rem;
  }

  .mobile .shareFb-card-bg,
  .mobile .material-card-bg,
  .mobile .tfp-card-bg {
    width: 100rem;
  }

  .mobile .shareFb-content {
    /* display: block; */
    margin-top: 38rem;
    margin-right: 0rem;
    text-align: center;
  }

  .mobile .shareFb-txt {
    width: 57.81rem;
    margin-bottom: 5rem;
  }

  .mobile .shareFb-content ul {
    flex-direction: column-reverse;
    gap: 4.5rem;
  }

  /* ----------------------------------------------------------------*/
  /* 留下資料 popup */
  .mobile .materialPopup {
    /* display: block; */
  }

  .mobile .material-content {
    margin-top: 18rem;
    margin-right: 2rem;
  }

  .mobile .material-txt {
    width: 60.93rem;
    margin-bottom: 3rem;
  }

  .mobile .material-content ul {
    gap: 4rem;
  }

  /* 輸入框容器 */
  .mobile .input-group {
    border-radius: 10rem;
    padding: 1.5rem 3rem;
    width: 53.75rem;
  }

  /* 標籤 */
  .mobile .input-group label {
    font-size: 4.68rem;
    font-weight: 400;
    margin-right: 1.5rem;
    letter-spacing: 0.15rem;
  }

  /* 輸入框 */
  .mobile .input-group input {
    font-size: 4.68rem;
    padding: 0rem 3rem;
    letter-spacing: 0.2rem;
  }

  .mobile .line {
    height: 6.62em;
  }

  .mobile .material_btn {
    margin-top: 1.5rem;
  }

  /* ----------------------------------------------------------------*/
  /* 感謝參加 popup */
  .mobile .tfpPopup {
    /* display: block; */
  }

  .mobile .tfp-content {
    margin-top: 40rem;
  }

  .mobile .tfp-txt {
    width: 56.25rem;
    margin-bottom: 6rem;
  }

  .mobile .tfp-content ul {
    flex-direction: column;
    gap: 4.5rem;
  }
}



/* ------------------------------------------------------------ */
/* wrapper */
.wrapper {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ----------------------------------------------------------------*/
/* lightbox */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: none;
}

.lightbox .lightbox-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.lightbox .loading-img {
  width: 25rem;
}

.lightbox .lightbox-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #9a89b3;
  opacity: 0.8;
  z-index: 1;
}

/* ----------------------------------------------------------------*/
/* 背景 */

.cnotainer {
  position: relative;
  display: block !important;
  width: 100%;
  height: 100vh;
}

.activity_screen {
  position: relative;
  background: url("../images/pc/interactive/pc_bg.jpg") center top no-repeat;
  background-size: auto 100%;
  max-width: 142.85rem;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen-bg {
  position: absolute;
  width: 30rem;
  top: 0;
  z-index: 50;
}

.screen-bg.right {
  right: 0;
  z-index: 50;
}

.screen-background {
  width: 100%;
  height: 100vh;
}

.activity.pc {
  position: absolute;
  width: 100rem;
  top: 0;
}

/* ------------------------------------------------------------ */
/* 活動截止提醒彈窗 */
.expired-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expired-popup .expired-popup-content {
  position: relative;
  background: white;
  padding: 2.8rem 6rem;
  border-radius: 1rem;
  text-align: center;
  font-size: 2rem;
  line-height: 3rem;
  color: #333;
  letter-spacing: 0.1rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.expired-popup .expired-confirm-btn {
  display: inline-block;
  font-weight: 400;
  margin-top: 2rem;
  margin-left: 0.1rem;
  padding: 0.8rem 2.5rem;
  font-size: 1.8rem;
  background-color: #a38bc7;
  color: white;
  text-decoration: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

.expired-popup .expired-confirm-btn:hover {
  background-color: #574474;
  color: white;
}

.expired-popup .expired-closure {
  position: absolute;
  top: -2rem;
  right: -2rem;
  width: 5rem;
  height: 5rem;
  background: #ECB4C1;
  border: 7px solid #FFF;
  border-radius: 10rem;
  cursor: pointer;
}

.expired-popup .expired-closure img {
  padding: 1rem;
}

/* ------------------------------------------------------------ */
/* 得獎公布 */
.announcement-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}


.announcement-popup .announcement-closure {
  position: absolute;
  width: 3.9rem;
  top: -5rem;
  right: 0;
  cursor: pointer;
  transition: transform 0.5s linear
}

.announcement-popup .announcement-closure:hover {
  transform: rotate(90deg);
}

.announcement-popup-content {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 73.36rem;
  border: 3px solid #673ca8;
  background-color: #f1e6e8;
  border-radius: 2.5rem;
  top: 32.5rem;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.announcement-popup-txt {
  padding: 0rem 2.5rem;
  margin: 1.5rem;
  width: 73.21rem;
  font-family: "Noto Sans CJK TC";
  font-weight: 500;
  letter-spacing: 0.15rem;
  overflow-x: hidden;
  overflow-y: overlay;
}

.announcement-popup-txt h5 {
  color: #673ca8;
  font-weight: 600;
  font-size: 3.28rem;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.announcement-popup-txt p {
  color: #000;
  font-size: 1.28rem;
  text-align: center;
  line-height: 2.2rem;
  font-weight: 500;
}

.announcement-popup-txt .pilk {
  color: #da8396;
  margin-top: 1rem;
}

.announcement-popup-txt .purple {
  color: #673ca8;
  margin-bottom: 1.5rem;
}

.announcement-popup-txt .popup-pilk,
.announcement-popup-txt .popup-purple {
  display: flex;
  position: relative;
}

.announcement-popup-txt .popup-pilk .announcement_popup_pink,
.announcement-popup-txt .popup-purple .announcement_popup_purple {
  width: 20.5rem;
  margin: 0 1.7rem;
}

.announcement-popup-txt .pilk ul,
.announcement-popup-txt .purple ul {
  list-style-type: disc;
  margin-left: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.42rem;
  letter-spacing: 0.05rem;
  line-height: 1.9rem;
  font-weight: 600;
  gap: 2rem 0;
}

.announcement-popup-txt .pilk ul li:nth-child(1),
.announcement-popup-txt .pilk ul li:nth-child(3),
.announcement-popup-txt .purple ul li:nth-child(1),
.announcement-popup-txt .purple ul li:nth-child(3) {
  width: 19rem;
}

.announcement-popup-txt .pilk ul p,
.announcement-popup-txt .purple ul p {
  color: #000;
  font-size: 1.21rem;
  text-align: left;
}

.announcement-popup .popup_line {
  width: 100%;
  border: 0.5px solid #9c9c9c80;
  margin: 2.5rem 0 3rem 0;
  margin-left: -0.2rem;
}

/* 設定滾動條 */
.announcement-popup-txt::-webkit-scrollbar {
  width: 0.8rem;
  /* 滾動條的寬度 */
  height: 10px;
  /* 水平滾動條的高度 */
}

/* 設定滾動條的背景 */
.announcement-popup-txt::-webkit-scrollbar-track {
  background-color: #FFF;
  /* 設定滾動條背景顏色 */
  border-radius: 50rem;
}

/* 設定滾動條的滑塊 */
.announcement-popup-txt::-webkit-scrollbar-thumb {
  /* 滾動條滑塊顏色 */
  background-color: #a38bc7;
  border-radius: 50rem;

}

/* 滾動條滑塊在 hover 時的顏色變化 */
.announcement-popup-txt::-webkit-scrollbar-thumb:hover {
  background-color: #da8396;
  /* 滑塊 hover 時的顏色 */
}



/* ----------------------------------------------------------------*/
/* 按鈕 */
.button {
  width: 14.64rem;
  cursor: pointer;
  transition: transform 0.3s;
}

.button:hover {
  transform: scale(1.1);
  transition: transform 0.3s;
}

/* ----------------------------------------------------------------*/
/* 標題 */
.activity_title {
  position: absolute;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.activity_title .title {
  width: 57.15rem;
  animation: fadeInUp 1s ease-out forwards;
}

.activity_title .txt {
  width: 50rem;
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.3s;
}

.activity_title .title,
.activity_title .txt {
  z-index: 10;
  opacity: 0;
  transform: translateY(50px);
}

/* 動態 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------------------------------------------------------*/
/* 開始測驗 */
.start {
  display: block;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 30rem;
}

.start-card {
  margin-left: 2.2rem;
}

.start-card-bg {
  width: 54.3rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(50px);
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 0.7s;
}

.start-content {
  position: absolute;
  top: 16rem;
  left: 49.8%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  /* text-align: center; */
  align-items: center;
}

.start-txt {
  width: 42.85rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(50px);
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 1s;
}

.start-btn {
  margin-top: 0.1rem;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transform: translateY(50px);
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 1.3s;
  transition: transform 0.3s;
}

.details {
  margin-top: 1rem;
  color: #FFF;
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.1rem;
  padding: 0.2rem;
  border-bottom: 0.5px solid #FFF;
  transform: translateY(50px);
  opacity: 0;
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 1.5s;
  cursor: pointer;
}

.details:hover {
  color: #fff0be;
  border-bottom: 0.5px solid #fff0be;
}

/* 動態 */
@keyframes start_content {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 先讓 start 透明度降為 0，然後隱藏 */
.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}


/* ----------------------------------------------------------------*/
/* 開始測驗 (注意事項) popup */
.start-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.start-popup .start-closure {
  position: absolute;
  width: 3.9rem;
  top: -5rem;
  right: 0;
  cursor: pointer;
  transition: transform 0.5s linear
}

.start-popup .start-closure:hover {
  transform: rotate(90deg);
  /* display: block; */
}

.start-popup-content {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 73.36rem;
  height: 49.35rem;
  border: 3px solid #673ca8;
  background-color: #f1e6e8;
  border-radius: 2.5rem;
  top: 37rem;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.start-popup-txt {
  padding: 0rem 4.5rem;
  margin: 2rem;
  width: 70rem;
  height: 43.9rem;
  font-size: 1.2rem;
  font-family: "Noto Sans CJK TC";
  font-weight: 500;
  line-height: 2.2rem;
  letter-spacing: 0.15rem;
  overflow-y: overlay;
}

.start-popup-txt h5 {
  color: #673ca8;
  font-weight: 600;
}

.start-popup-txt .pilk {
  color: #da8396;
}

.start-popup-txt .purple {
  color: #9d83c4;
}

.start-popup-txt .popup-pilk,
.start-popup-txt .popup-purple {
  display: flex;
  position: relative;
}

.start-popup-txt .popup-pilk .start_popup_pink,
.start-popup-txt .popup-purple .start_popup_purple {
  width: 20.71rem;
  position: absolute;
  top: -4rem;
  right: 4.5rem;
}

.start-popup-txt .pilk ul,
.start-popup-txt .purple ul {
  list-style-type: disc;
  margin-left: 1.7rem;
}


.start-popup-txt ol {
  list-style-type: decimal;
  margin-top: 0.2rem;
  margin-left: 2.2rem;
}

/* 設定滾動條 */
.start-popup-txt::-webkit-scrollbar {
  width: 0.8rem;
  /* 滾動條的寬度 */
  height: 10px;
  /* 水平滾動條的高度 */
}

/* 設定滾動條的背景 */
.start-popup-txt::-webkit-scrollbar-track {
  background-color: #FFF;
  /* 設定滾動條背景顏色 */
  border-radius: 50rem;
}

/* 設定滾動條的滑塊 */
.start-popup-txt::-webkit-scrollbar-thumb {
  /* 滾動條滑塊顏色 */
  background-color: #a38bc7;
  border-radius: 50rem;

}

/* 滾動條滑塊在 hover 時的顏色變化 */
.start-popup-txt::-webkit-scrollbar-thumb:hover {
  background-color: #da8396;
  /* 滑塊 hover 時的顏色 */
}

/* ----------------------------------------------------------------*/
/* 測驗題 */
.start-container {
  position: absolute;
  display: none;
  top: 48rem;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 進度條外框 */
.progress-bar {
  position: absolute;
  bottom: 2.5rem;
  width: 19.92rem;
  height: 0.42rem;
  background-color: #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  z-index: 10;
  left: 17.5rem;
  transform: translateX(-50%);
  opacity: 0;
  animation: fadeInUp 0.3s ease-out forwards;
  animation-delay: 0.5s;
}

/* 填滿的進度 */
.progress-fill {
  height: 100%;
  background-color: #d58697;
  /* 可依主色調調整 */
  width: 0%;
  transition: width 0.3s ease;
}

.card {
  position: relative;
}

.card_question {
  width: 54.3rem;
  height: auto;
  margin-left: 1.5rem;
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 0.3s ease-out forwards;
  animation-delay: 0.2s;
}

.btnPrev,
.btnNext {
  position: absolute;
  top: 11rem;
  width: 12.15rem;
  border: none;
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
  /* 加入淡入淡出的過渡效果 */
  transition: opacity 0.5s ease;
  transition: all 0.3s;
  z-index: 50;
}

.btnPrev.active,
.btnNext.active {
  opacity: 1;
  /* 啟用點擊功能 */
  pointer-events: auto;
}

/* 進行放大縮小處理 */
.btnPrev:hover,
.btnNext:hover {
  /* 當 hover 時放大 10% */
  transform: scale(1.1);
  transition: all 0.3s;
}

.btnPrev {
  left: -6rem;
}

.btnNext {
  right: -7rem;
}

.card_content {
  position: absolute;
  left: 9rem;
  top: 5.1rem;
  width: 71%;
}

.question {
  display: flex;
  align-items: flex-end;
  color: #673ca8;
  position: absolute;
  z-index: 20;

}

.question span {
  font-size: 4.57rem;
  font-style: italic;
  font-weight: 400;
  opacity: 0;
  transform: translateY(50px);
  animation: question 0.5s cubic-bezier(0, 0, 0, 0.99) forwards;
  animation-delay: 0.3s;
}

.question p {
  font-size: 2.28rem;
  font-weight: 500;
  margin-left: 0.6rem;
  letter-spacing: 0.02rem;
  opacity: 0;
  transform: translateY(50px);
  animation: question 0.5s cubic-bezier(0, 0, 0, 0.99) forwards;
  animation-delay: 0.3s;
}

.card_content ul {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 10;
  top: 7rem;
  opacity: 0;
  transform: translateY(50px);
  animation: question 1s cubic-bezier(0, 0, 0, 0.99) forwards;
  animation-delay: 0.3s;
}

.card_content ul li {
  width: max-content;
  margin-bottom: 2rem;
  padding: 0.5rem 1rem;
  color: #FFF;
  background-color: #AEAEAE;
}


/* 動態 */
@keyframes question {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btnOptions {
  border: none;
  font-size: 1.57rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  border-radius: 50rem;
  outline: none;
  cursor: pointer;
  transition: all 0.5s;
}

.btnOptions:hover {
  color: #673ca8;
  background-color: #ECB4C1;
  transition: all 0.5s;
}

.btnOptions:focus,
.btnOptions.selected {
  color: #673ca8;
  background-color: #ECB4C1;
}

.illustration {
  position: absolute;
  width: 21.14rem;
  top: 3rem;
  right: 1.7rem;
  z-index: 1;
  opacity: 0;
  /* 初始為不可見 */
  animation: illustration 0.5s ease-out forwards;
  animation-delay: 0.5s;
}

/* 動態淡入效果 */
@keyframes illustration {
  100% {
    opacity: 1;
  }
}



/* ----------------------------------------------------------------*/
/* 分享 popup */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.popup-content {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 100rem;
  height: 67.86rem;
  margin-bottom: 20rem;
}

.result-bg {
  position: absolute;
  width: 61.4rem;
  height: 61.4rem;
  animation: result-bg 50s linear infinite;
  top: 2rem;
  left: 18.8%;
  transform: translate(-50%, -50%);
}

@keyframes result-bg {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 設定彈出卡片的樣式 */
.popupBg {
  /* background-image: url("../images/pc/interactive/pc_result_card_01_01.png"); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 auto;
  margin-top: 10rem;
  text-align: center;
  width: 55.71rem;
  height: 35.71rem;
  transform-origin: center;
  /* transition: transform 0.1s, background-color 0.5s; */
}

/* 當彈出視窗顯示時的效果 */
.popup.show {
  display: flex;
}

/* 設定卡片旋轉的動畫效果 */
.rotate {
  animation: smoothRotate 2.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes smoothRotate {
  0% {
    transform: rotateY(0);
  }

  100% {
    transform: rotateY(720deg);
  }
}

/* 旋轉後的最終背景 */
.popupBg.ended {
  /* background-image: url("../images/pc/interactive/pc_result_card_01_02.png"); */
}

.popup_btn {
  position: absolute;
  top: 44rem;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  gap: 3.5rem;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.popup_btn.show {
  opacity: 1;
  /* 顯示按鈕 */
}

.btnAgain {
  width: 14.65rem;
  height: 100%;
}

.btnShare {
  width: 16.42rem;
  height: 100%;
}

.btnAgain {
  left: 10rem;
}

.btnShare {
  right: 10rem;
}

/* 初始隱藏 popuptxt */
.popuptxt {
  margin-left: 21.8rem;
  padding-top: 11.8rem;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* 旋轉結束後顯示 popuptxt */
.popupBg.ended .popuptxt {
  opacity: 1;
}


.popuptxt .more {
  position: absolute;
  top: 22.9rem;
  right: 14.7rem;
  display: block;
  width: 10rem;
  height: 3.3rem;
}

/* ----------------------------------------------------------------*/
/* 留下資料 popup */
/* 分享FB popup */
/* 感謝參加 popup */
.materialPopup {
  display: none;
}


.shareFbPopup,
.materialPopup,
.tfpPopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.shareFb-card,
.material-card,
.tfp-card {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 15rem;
}

.shareFb-card-bg,
.material-card-bg,
.tfp-card-bg {
  width: 54.3rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(50px);
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 0.3s;
}

.material-content {
  position: absolute;
  z-index: 10;
  margin-top: 5.5rem;
  margin-right: 2.2rem;
}

.material-txt {
  width: 35rem;
  margin-bottom: 0.5rem;
  opacity: 0;
  transform: translateY(50px);
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 0.5s;
}

.material-content ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* 輸入框容器 */
.input-group {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 3rem;
  padding: 0.2rem 1.5rem;
  width: 23.57rem;
  opacity: 0;
  transform: translateY(50px);
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 0.5s;
}

/* 標籤 */
.input-group label {
  font-size: 1.57rem;
  color: #673ca8;
  font-family: "Noto Sans CJK TC";
  font-weight: 400;
  white-space: nowrap;
  margin-right: 1rem;
  letter-spacing: 0.1rem;
}

/* 輸入框 */
.input-group input {
  border: none;
  outline: none;
  font-size: 1.57rem;
  padding: 0.5rem 1.2rem;
  color: #673ca8;
  background: transparent;
  letter-spacing: 0.1rem;
}

.line {
  height: 2.28em;
  border: 0.5px solid #a68dcc;
}

.material_btn {
  margin-top: 0.2rem;
  opacity: 0;
  transform: translateY(50px);
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 0.5s;
}

/* ----------------------------------------------------------------*/
/* 分享FB popup */
.shareFbPopup {
  display: none;
}

.shareFb-content {
  display: block;
  position: absolute;
  z-index: 10;
  margin-top: 8rem;
  margin-right: 2.2rem;
}

.shareFb-txt {
  width: 42.85rem;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(50px);
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 0.5s;
}

.shareFb-content ul {
  display: flex;
  justify-content: center;
  gap: 3rem;
  opacity: 0;
  transform: translateY(50px);
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 0.5s;
}





/* ----------------------------------------------------------------*/
/* 感謝參加 popup */
.tfpPopup {
  display: none;
}

.tfp-content {
  position: absolute;
  z-index: 10;
  margin-top: 10rem;
  margin-right: 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tfp-txt {
  width: 23.57rem;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(50px);
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 0.5s;
}

.tfp-content ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  transform: translateY(50px);
  animation: start_content 0.5s ease-out forwards;
  animation-delay: 0.6s;
}


/* ------------------------------------------------------------ */
/* user-data */
.user-data {
  display: none;
}