html,
body {
  height: 100%;
}

body {
  font-family: "Noto Serif TC", "Microsoft JhengHei", sans-serif;
}

img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  min-width: 0;
}

button {
  border: none;
  background: transparent;
  background-color: initial;
}

body.swiper-ready {
  overflow: hidden;
}

section {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  min-height: 960px;
}

.page-swiper {
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 0;
}

.page-swiper .swiper-slide {
  height: 100%;
}

.page-swiper section.swiper-slide {
  min-height: 100%;
}

.btn {
  cursor: pointer;
}

.btn:hover {
  filter: brightness(1.3);
  transition: filter 0.3s ease;
}

/* ---------------------- Header ---------------------- */
.top_bar {
  position: fixed;
  z-index: 999;

  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.logo {
  width: 340px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;

  padding-top: 16px;
  padding-right: 16px;
}

.user_info_wrap {
  background-image: url(../images/topbar/info_bg.png?v=20260930b);
  width: 654px;
  aspect-ratio: 654 / 87;

  display: flex;
  align-items: center;
  justify-content: center;
}

.user_info_wrap > .btn {
  margin-left: 10px;
  width: 100px;
}

.user_account,
.user_point,
.user_server {
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  width: 157px;
  aspect-ratio: 157 / 67;

  display: flex;
  align-items: center;
  justify-content: center;
}

.user_account span,
.user_point span {
  position: absolute;
  top: 31px;
}

.user_server select {
  position: absolute;
  top: 29px;
  border: none;
  background-color: #faf9f8;
  width: 110px;
  text-align: center;
}

.user_server select:focus-visible {
  outline: none;
}

.user_account {
  background-image: url(../images/topbar/input_account.png?v=20260930b);
}

.user_point {
  background-image: url(../images/topbar/input_point.png?v=20260930b);
}

.user_server {
  background-image: url(../images/topbar/input_server.png?v=20260930b);
}

/* ---------------------- Aside ---------------------- */
.side_bar {
  position: fixed;
  z-index: 999;
  top: 25%;
  left: 2.5%;

  display: flex;
  flex-direction: column;

  animation: sideBar-enter 1.5s 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.side_bar > .btn {
  width: 240px;
}

@keyframes sideBar-enter {
  from {
    transform: translateX(-28px);
    opacity: 0;
  }

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

/* ---------------------- Section01 ---------------------- */
.section01 {
  background-image: url(../images/section01/section01_bg.png?v=20260930b);
}

/* Section01 固定不移動，只淡入淡出切換內部的三組內容。 */
.section01_wrap01,
.section01_wrap02,
.section01_wrap03 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}

.section01_wrap01.is-active,
.section01_wrap02.is-active,
.section01_wrap03.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* ------ Warp01 ------ */
.section01_wrap01 {
  /* outline: 2px solid red; */
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;

  top: 18%;
  margin-left: 20px;
}

.section01_wrap01 .crown {
  transform-origin: center bottom;
}

.section01_wrap01 .title {
  margin-top: 95px;
}

.section01.swiper-slide-active .section01_wrap01.is-active .crown {
  animation: crown-enter 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.section01.swiper-slide-active .section01_wrap01.is-active .title {
  animation: title-enter 1.5s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes crown-enter {
  from {
    transform: translateY(-50px) scale(0.5);
    opacity: 0;
  }

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

@keyframes title-enter {
  from {
    transform: translateY(-28px);
    opacity: 0;
  }

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

/* ------ Warp02 ------ */
.section01_wrap02 {
  /* outline: 2px solid red; */
  position: absolute;
}

.section01_wrap02 .letter {
  margin-top: 110px;
}

/* ------ Warp03 ------ */
.section01_wrap03 {
  /* outline: 2px solid red; */
  position: absolute;
  top: -1%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lottery_btn_wrap {
  display: flex;
  color: #e4e4e4;
  font-size: 14px;
  font-weight: 600;

  margin-top: 40px;
  margin-left: 13px;
}

.lottery_btn01,
.lottery_btn02,
.lottery_btn03 {
  background-size: contain;
  width: 280px;
  aspect-ratio: 320 / 140;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.lottery_btn01 {
  background-image: url(../images/section01/wrap03_btn1.png?v=20260930b);
}

.lottery_btn02 {
  background-image: url(../images/section01/wrap03_btn2.png?v=20260930b);
}

.lottery_btn03 {
  background-image: url(../images/section01/wrap03_btn3.png?v=20260930b);
}

.lottery_text {
  margin-top: 28px;
  margin-left: 60px;
}

.section01_wrap03 > .title {
  margin-left: 20px;
}

.skip_check {
  cursor: pointer;
  background-image: url(../images/section01/wrap03_skip.png?v=20260930b);
  width: 148px;
  aspect-ratio: 148 / 55;
  overflow: hidden;

  position: absolute;
  bottom: 3.5%;
  right: 7.5%;
}

.skip_check > input {
  width: 25px;
  height: 25px;
  margin: 15px 0px 15px 21px;
}

.scroll_arrow {
  position: absolute;
  top: 84%;
  margin-left: 20px;
  will-change: transform, opacity;
}

.section01.swiper-slide-active .scroll_arrow {
  animation:
    scroll-arrow-enter 0.6s 0.65s ease-out both,
    scroll-arrow-hint 1.6s 1.25s ease-in-out infinite;
}

@keyframes scroll-arrow-enter {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

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

@keyframes scroll-arrow-hint {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }

  50% {
    transform: translateY(12px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section01.swiper-slide-active .section01_wrap01.is-active .crown,
  .section01.swiper-slide-active .section01_wrap01.is-active .title,
  .scroll_arrow {
    animation: none;
  }
}

/* ---------------------- Section02 ---------------------- */
.section02 {
  background-image: url(../images/section02/section02_bg.png?v=20260930b);
  color: #f5ec9b;
  text-align: center;
  font-weight: 900;
  font-size: 20px;
}

.exchange1,
.exchange2,
.exchange3,
.exchange4,
.exchange5 {
  position: absolute;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;

  cursor: pointer;
}

.exchange1,
.exchange2 {
  isolation: isolate;
}

.exchange1::before,
.exchange2::before,
.exchange3::before,
.exchange4::before,
.exchange5::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 35%;
  left: 50%;
  width: 362px;
  aspect-ratio: 362 / 436;
  background: url(../images/section02/light.png?v=20260930b) center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease;
}

.exchange1::after,
.exchange2::after,
.exchange3::after,
.exchange4::after,
.exchange5::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.exchange1:hover::before,
.exchange2:hover::before,
.exchange3:hover::before,
.exchange4:hover::before,
.exchange5:hover::before {
  opacity: 1;
}

.amount {
  /* outline: 2px solid greenyellow; */
  position: absolute;
  z-index: 60;
  width: 64px;
}

.carousel_item {
  /* outline: 2px solid greenyellow; */
  position: absolute;
  z-index: 60;
  width: 45px;
  aspect-ratio: 1;
  overflow: hidden;
  pointer-events: none;
}

.carousel_item .swiper-wrapper,
.carousel_item .swiper-slide {
  width: 100%;
  height: 100%;
}

.carousel_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exchange1 {
  width: 221px;
  aspect-ratio: 221 / 373;
  top: 52%;
  left: 21%;
}

.exchange1::after {
  background-image: url(../images/section02/hammer01.png?v=20260930b);
}

.exchange1:hover::after {
  background-image: url(../images/section02/hammer01-select.png?v=20260930b);
}

.exchange1 .amount {
  bottom: 16.8%;
  left: 19.1%;
}

.exchange1 .carousel_item {
  top: 72%;
  left: 61.2%;
}

.exchange2 {
  width: 224px;
  aspect-ratio: 224 / 376;
  top: 56.5%;
  left: 34.2%;
}

.exchange2::after {
  background-image: url(../images/section02/hammer02.png?v=20260930b);
}

.exchange2:hover::after {
  background-image: url(../images/section02/hammer02-select.png?v=20260930b);
}

.exchange2 .amount {
  bottom: 15.7%;
  left: 20.3%;
}

.exchange2 .carousel_item {
  top: 73.3%;
  left: 62.2%;
}

.exchange3 {
  width: 239px;
  aspect-ratio: 239 / 367;
  top: 56.7%;
  left: 55%;
}

.exchange3::after {
  background-image: url(../images/section02/hammer03.png?v=20260930b);
}

.exchange3:hover::after {
  background-image: url(../images/section02/hammer03-select.png?v=20260930b);
}

.exchange3 .amount {
  bottom: 13.5%;
  left: 20.4%;
}

.exchange3 .carousel_item {
  top: 73.9%;
  left: 60.8%;
}

.exchange4 {
  width: 233px;
  aspect-ratio: 233 / 373;
  top: 52%;
  left: 69.5%;
}

.exchange4::after {
  background-image: url(../images/section02/hammer04.png?v=20260930b);
}

.exchange4:hover::after {
  background-image: url(../images/section02/hammer04-select.png?v=20260930b);
}

.exchange4 .amount {
  bottom: 13.5%;
  left: 21.3%;
}

.exchange4 .carousel_item {
  top: 74.2%;
  left: 61%;
}

.exchange5 {
  width: 269px;
  aspect-ratio: 269 / 449;
  top: 11%;
  left: 43.7%;
}

.exchange5::after {
  background-image: url(../images/section02/hammer05.png?v=20260930b);
}

.exchange5:hover::after {
  background-image: url(../images/section02/hammer05-select.png?v=20260930b);
}

.exchange5 .amount {
  bottom: 16.2%;
  left: 26.6%;
}

.exchange5 .carousel_item {
  top: 73.8%;
  left: 59%;
}

/* ---------------------- Footer ---------------------- */
.footer-wrapper {
  color: #fff;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.2px;
  line-height: 18px;
  background: #212121;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-swiper .footer-wrapper {
  min-height: 150px;
  height: auto;
  flex-shrink: 0;
}
.footerbox {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  max-width: 1920px;
  overflow: hidden;
  padding: 0 160px;
}
.footer-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 530px;
}

.copyright {
  text-align: left;
  width: 470px;
}
.copyright a {
  color: rgba(42, 188, 214, 1);
  margin-right: 10px;
  text-decoration: underline;
}
.copyright a:hover {
  color: rgb(31, 155, 177);
}

.dg-copyright {
  margin: 0;
}

.grade {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.grade ul {
  text-align: left;
  padding: 0;
  margin-left: 10px;
  list-style: none;
}
.grade li:nth-child(4) {
  color: rgba(42, 188, 214, 1);
}

/* ----------------------------- Popup Modal ----------------------------- */
.modal {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
}

.modal.is-open {
  display: flex;
}

#exchange-confirm-modal,
#purchase-confirm-modal {
  z-index: 10000;
}

#exchange_rule-modal {
  z-index: 10000;
}

#alert-modal {
  z-index: 10001;
}

.modal.is-open > div {
  animation: modal-enter 0.25s ease-out both;
}

body.modal-open {
  overflow: hidden;
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal_close {
  position: absolute;
  z-index: 2;
  top: 5%;
  right: -1%;
  width: clamp(42px, 5vw, 64px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.modal_close img {
  display: block;
  width: 100%;
}

.modal_close:hover,
.modal_close:focus-visible {
  filter: brightness(1.25);
}

.modal_close:focus-visible {
  outline: 2px solid #f5d76e;
  outline-offset: 3px;
  border-radius: 50%;
}

/* ------------------- 確認與提示Modal ------------------- */
.lottery_confirm_modal,
.exchange_confirm_modal,
.purchase_confirm_modal,
.alert_modal {
  position: relative;
  width: min(835px, 100%);
  aspect-ratio: 835 / 313;
  background: url(../images/modal/alert_bg.png?v=20260930b) center / contain no-repeat;
  color: #f3d98c;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  text-align: center;
  text-shadow: 0 2px 4px #000;
}

.lottery_confirm_message,
.exchange_confirm_message,
.purchase_confirm_message,
.alert_message {
  position: absolute;
  top: 21%;
  left: 8%;
  width: 84%;
  margin: 0;
  line-height: 42px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lottery_confirm_actions,
.exchange_confirm_actions,
.purchase_confirm_actions,
.alert_actions {
  position: absolute;
  bottom: 16%;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 36px;
  width: 100%;
}

.lottery_confirm_actions button,
.exchange_confirm_actions button,
.purchase_confirm_actions button,
.alert_actions button {
  width: min(183px, 28%);
  padding: 0;
  border: 0;
  background: transparent;
}

.lottery_confirm_actions img,
.exchange_confirm_actions img,
.purchase_confirm_actions img,
.alert_actions img {
  display: block;
  width: 100%;
}

/* -------------------  獲得邀請函lottery_modal ------------------- */
.lottery_modal {
  position: relative;
  background-image: url(../images/section01/lottery/lottery_bg.png?v=20260930b);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1566px;
  aspect-ratio: 1566 / 995;

  display: flex;
  justify-content: center;
  zoom: 0.85;
}

.lottery_wrap {
  color: #f3d98c;
  font-size: 30px;
  font-weight: 600;
  position: absolute;
  top: 24%;
  width: 75%;
  height: 525px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px;
  justify-content: space-around;
}

.lottery_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.lottery_modal > .modal_confirm {
  position: absolute;
  top: 80%;
}
/* -------------------  邀請函兌換exchange_modal ------------------- */
.exchange_modal {
  background-image: url(../images/modal/exchange/exchange_bg.png?v=20260930b);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1287px;
  aspect-ratio: 1287 / 842;

  display: flex;
  justify-content: center;
  position: relative;
}

.open_rule {
  position: absolute;
  z-index: 100;
  top: 5.3%;
  right: 5.2%;
}

.exchange_content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.amount_wrap {
  /* outline: 2px solid greenyellow; */
  position: absolute;
  top: 20.5%;
  width: 1120px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;

  color: #f5ec9b;
  font-size: 24px;
  text-align: center;
}

.amount_box {
  background-image: url(../images/modal/exchange/amount_box.png?v=20260930b);
  width: 544px;
  aspect-ratio: 544 / 66;

  display: flex;
  align-items: center;
}

.amount_box > span:first-child {
  margin-left: 100px;
}

.amount_box > span:last-child {
  width: 120px;
  margin-left: 125px;
}

.convert_wrap {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}

.convert_check {
  cursor: pointer;
  background-image: url(../images/modal/exchange/exchange_checkbox.png?v=20260930b);
  width: 148px;
  aspect-ratio: 148 / 28;
  overflow: hidden;
  margin-left: 14px;
}

.convert_check > input {
  width: 20px;
  height: 20px;
  margin: 5px 0px 0px 3px;
}

input[type="checkbox"]:checked {
  appearance: none;
  -webkit-appearance: none;
  background: #000817
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='%23ffd472' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 80% no-repeat;
}

.convert_box_wrap {
  display: flex;
  gap: 50px;
}

.convert_box {
  position: relative;
  width: 234px;
  aspect-ratio: 234 / 293;

  display: flex;
  justify-content: center;
}

.convert_box_wrap .convert_box:nth-child(1) {
  background-image: url(../images/modal/exchange/box01.png?v=20260930b);
}

.convert_box_wrap .convert_box:nth-child(2) {
  background-image: url(../images/modal/exchange/box02.png?v=20260930b);
}

.convert_box_wrap .convert_box:nth-child(3) {
  background-image: url(../images/modal/exchange/box03.png?v=20260930b);
}

.convert_box_wrap .convert_box:nth-child(4) {
  background-image: url(../images/modal/exchange/box04.png?v=20260930b);
}

.convert_btn {
  position: absolute;
  bottom: 7%;
  height: 48px;
}

/* -------------------  兌換規則exchange_rule_modal ------------------- */
.exchange_rule_modal {
  position: relative;
  background-image: url(../images/modal/exchange/rule_bg.png?v=20260930b);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1287px;
  aspect-ratio: 1287 / 614;
}

.exchange_rule_modal > .modal_close {
  right: -1%;
  top: 7%;
}

/* -------------------  活動說明explain_modal ------------------- */
.explain_modal {
  position: relative;
  background-image: url(../images/modal/explain/explain1_bg.png?v=20260930b);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1287px;
  aspect-ratio: 1287 / 842;

  display: flex;
  justify-content: center;
  align-items: center;
}

.explain_modal.is-page-2 {
  background-image: url(../images/modal/explain/explain2_bg.png?v=20260930b);
}

.explain_tab_wrap {
  /* outline: 2px solid greenyellow; */
  position: absolute;
  top: 17%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.explain_tab.is-active,
.explain_tab.is-active:hover {
  cursor: default;
  pointer-events: none;
  filter: none;
}

/* -------------------  活動紀錄record_modal ------------------- */
.record_modal {
  position: relative;
  background-image: url(../images/modal/record/record_bg.png?v=20260930b);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1287px;
  aspect-ratio: 1287 / 842;

  display: flex;
  justify-content: center;
  align-items: center;
}

.record_tab_wrap {
  position: absolute;
  top: 17%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.record_tab.is-active,
.record_tab.is-active:hover {
  cursor: default;
  pointer-events: none;
  filter: none;
}

.buy_wrap {
  position: absolute;
  top: 29%;
  width: 790px;
  color: #fff;
}

.ticket_wrap {
  position: absolute;
  top: 29%;
  width: 653px;
  color: #fff;
}

.record_modal [data-record-panel]:not(.is-active) {
  display: none;
}

.record_table tbody::-webkit-scrollbar {
  width: 10px;
}

.record_table tbody::-webkit-scrollbar-track {
  background: rgba(2, 10, 18, 0.9);
  border-left: 1px solid rgba(128, 100, 49, 0.45);
}

.record_table tbody::-webkit-scrollbar-thumb {
  border: 2px solid rgba(2, 10, 18, 0.9);
  border-radius: 10px;
  background: linear-gradient(#e1bd6a, #8b642a);
}

.record_table tbody::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#f3d98c, #a87c35);
}

.record_table {
  display: block;
  box-sizing: border-box;
  width: 100%;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px #000;
}

.record_table colgroup {
  display: none;
}

.record_table thead {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #050a12 url(../images/modal/record/record_thead01.png?v=20260930b) center /
    100% 100% no-repeat;
}

.record_table thead tr {
  display: grid;
  grid-template-columns: 327px 80px 144px minmax(0, 1fr);
  height: 60px;
}

.record_table thead th {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px 4px;
  border: 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 1px;
  vertical-align: middle;
}

.record_table tbody {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-height: 380px;
  margin: 0 auto;
  border-right: 1px solid #806431;
  border-bottom: 1px solid #806431;
  border-left: 1px solid #806431;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #c39a4b rgba(2, 10, 18, 0.9);
  scrollbar-width: thin;
}

.record_table tbody tr {
  display: grid;
  grid-template-columns: 310px 80px 142px minmax(0, 1fr);
  height: 76px;
  background-color: rgba(0, 0, 0, 0.88);
}

.record_table tbody tr:nth-child(even) {
  background-color: rgba(0, 35, 58, 0.92);
}

.record_table tbody tr.record_status {
  grid-template-columns: minmax(0, 1fr);
}

.record_table tbody tr.record_status td {
  border-right: 0;
  color: #fff;
}

.record_table tbody th,
.record_table tbody td {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-right: 1px solid rgba(128, 100, 49, 0.58);
  border-bottom: 1px solid rgba(128, 100, 49, 0.58);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  vertical-align: middle;
  white-space: nowrap;
}

.record_table tbody th {
  padding-right: 18px;
  padding-left: 18px;
  font-size: 18px;
  justify-content: flex-start;
  text-align: left;
}

.record_table tr > :last-child {
  border-right: 0;
}

.record_table tbody tr:last-child > * {
  border-bottom: 0;
}

.ticket_table thead {
  background-image: url(../images/modal/record/record_thead02.png?v=20260930b);
}

.ticket_table thead tr {
  grid-template-columns: 223px 155px minmax(0, 1fr);
}

.ticket_table tbody tr {
  grid-template-columns: 207px 155px minmax(0, 1fr);
}

.ticket_table tbody th {
  justify-content: center;
  text-align: center;
}

.ticket_table tbody td {
  color: #fff45c;
}

/* -------------------  活動紀錄notice_modal ------------------- */
.notice_modal {
  position: relative;
  background-image: url(../images/modal/notice/notice_bg.png?v=20260930b);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1317px;
  aspect-ratio: 1317 / 870;
}

.notice_modal > .modal_close {
  right: 1%;
}

/* -------------------  拍賣會商店shop_modal ------------------- */
.shop_modal {
  position: relative;
  background-image: url(../images/modal/shop/shop01_bg.png?v=20260930b);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1393px;
  aspect-ratio: 1393 / 1129;

  display: flex;
  justify-content: center;

  zoom: 0.8;
}

.shop_modal > .modal_close {
  right: 0.9%;
  top: 5.8%;
}

.shop_info_wrap {
  position: absolute;
  top: 13%;
  background-image: url(../images/modal/shop/info_box.png?v=20260930b);
  background-size: contain;
  background-repeat: no-repeat;
  width: 1311px;
  aspect-ratio: 1311 / 85;

  color: #f5ec9b;
  font-size: 30px;
  font-weight: 600;

  display: flex;
  align-items: center;
}

.shop_info_wrap > span:nth-child(1) {
  position: absolute;
  left: 8%;
}

.shop_info_wrap > span:nth-child(2) {
  position: absolute;
  width: 140px;
  text-align: center;
  left: 39%;
}

.shop_info_wrap > span:nth-child(3) {
  position: absolute;
  left: 56%;
}

.shop_info_wrap > .shop_sever {
  position: absolute;
  width: 250px;
  text-align: center;
  left: 77%;
  color: #f5ec9b;
  font-weight: 600;
  background-color: #040912;
  border: #c39a4b;
}

.shop_wrap {
  position: absolute;
  top: 32%;
  left: 8.5%;
  width: 84%;
  display: flex;
  gap: 50px;
  align-items: center;
  flex-wrap: wrap;
  max-height: 608px;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #c39a4b rgba(2, 10, 18, 0.9);
  scrollbar-width: thin;
}

.shop_status {
  width: 100%;
  margin: 0;
  color: #f5ec9b;
  font-size: 24px;
  text-align: center;
}

.shop_box {
  background-image: url(../images/modal/shop/item_box.png?v=20260930b);
  background-repeat: no-repeat;
  position: relative;
  width: 189px;
  aspect-ratio: 189 / 279;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.shop_box > img:first-child {
  position: absolute;
  top: 13%;
}

.shop_text {
  position: absolute;
  top: 50%;
  width: 85%;
  font-size: 18px;
  color: #e4e4e4;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.shop_text > span:first-child {
  display: flex;
  height: 40px;
  justify-content: center;
  align-items: center;
}

.shop_text > span:last-child {
  color: #f5ec9b;
}

.shop_box > img:last-child {
  position: absolute;
  top: 80%;
}