.container{
  width: 100%;
}
@media (min-width: 576px){
  .container{
    max-width: 576px;
  }
}
@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1920px){
  .container{
    max-width: 1920px;
  }
}
  /* ====== buttons ====== */
  /* btn-main */
  .btn-main{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
  outline-offset: 0px;
  outline-color: #ffd1b3;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .btn-main:hover{
  --tw-text-opacity: 1;
  color: rgb(255 143 8 / var(--tw-text-opacity, 1));
}
  .btn-main:focus-visible{
  outline-width: 1px;
}
  .btn-main:active{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}
  @media (min-width: 768px){
  .btn-main{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

  .btn-main.disabled,
  .btn-main-icon.disabled{
  pointer-events: none;
  display: inline-flex;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(171 173 175 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

  @media (min-width: 768px){
  .btn-main.disabled,
  .btn-main-icon.disabled{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

  .btn-main-icon{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
  outline-offset: 0px;
  outline-color: #ffd1b3;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

  .btn-main-icon:hover{
  --tw-text-opacity: 1;
  color: rgb(255 143 8 / var(--tw-text-opacity, 1));
}

  .btn-main-icon:focus-visible{
  outline-width: 1px;
}

  .btn-main-icon:active{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}

  @media (min-width: 768px){
  .btn-main-icon{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

  /* btn-outline */
  .btn-outline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  border-width: 1px;
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  outline-offset: 0px;
  outline-color: #ffd1b3;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .btn-outline:focus-visible{
  outline-width: 1px;
}
  .btn-outline:active{
  background-color: transparent;
}
  @media (min-width: 576px){
  .btn-outline:hover{
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.2;
  }
}
  @media (min-width: 768px){
  .btn-outline{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

  .btn-outline-icon{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 8px;
  border-width: 1px;
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  outline-offset: 0px;
  outline-color: #ffd1b3;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

  .btn-outline-icon:hover{
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.2;
}

  .btn-outline-icon:focus-visible{
  outline-width: 1px;
}

  .btn-outline-icon:active{
  background-color: transparent;
}

  @media (min-width: 768px){
  .btn-outline-icon{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

  .btn-outline.disabled,
  .btn-outline-icon.disabled{
  pointer-events: none;
  --tw-border-opacity: 1;
  border-color: rgb(92 93 95 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(92 93 95 / var(--tw-text-opacity, 1));
}

  .btn-main svg,
  .btn-outline svg,
  .btn-main-icon svg,
  .btn-outline-icon svg{
  height: 1.5rem;
  width: 1.5rem;
}

  /* btn-orange */

  /* btn-icon */
    .btn-icon svg{
  height: 1.375rem;
  width: 1.375rem;
}
    .btn-icon{
  display: inline-flex;
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
    .btn-icon:hover{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}

  /* btn-icon-circle */
  .btn-icon-circle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.2;
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .btn-icon-circle:hover{
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}

    .btn-icon-circle svg{
  height: 1.5rem;
  width: 1.5rem;
}

  /* btn-link */
  .btn-link{
  line-height: 1.5;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .btn-link:hover{
  --tw-text-opacity: 1;
  color: rgb(255 143 8 / var(--tw-text-opacity, 1));
}

  .btn-link.disabled{
  pointer-events: none;
  line-height: 1.5;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(92 93 95 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

  /* btn-arrow */
  .btn-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.2;
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .btn-arrow:hover{
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}

    .btn-arrow svg{
  height: 1.5rem;
  width: 1.5rem;
}

  /* btn-chevron */
  .btn-chevron{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.2;
  padding: 0.3125rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(15px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .btn-chevron:hover{
  --tw-bg-opacity: 0.08;
  --tw-backdrop-blur: blur(50px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

    .btn-chevron svg{
  height: 1.875rem;
  width: 1.875rem;
}

  /* btn-text */
  .btn-text{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0.08rem;
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .btn-text:hover{
  --tw-text-opacity: 1;
  color: rgb(255 143 8 / var(--tw-text-opacity, 1));
}

    .btn-text svg{
  height: 1.5rem;
  width: 1.5rem;
}

  .btn-text-white{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0.08rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

  .btn-text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}

    .btn-text-white svg{
  height: 1.5rem;
  width: 1.5rem;
}

  .btn-text.disabled{
  pointer-events: none;
  --tw-text-opacity: 1;
  color: rgb(92 93 95 / var(--tw-text-opacity, 1));
}
  /* ====== icons ====== */

  .icon {
    flex: 0 0 auto;
    height: 1.5rem;
    width: 1.5rem;
  }
  
  .icon-small {
    flex: 0 0 auto;
    height: 1.25rem;
    width: 1.25rem;
  }
  
  .icon-xsmall {
    flex: 0 0 auto;
    height: 1rem;
    width: 1rem;
  }
  /* ====== footer start ====== */
  .twm-footer{
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
    --padding-x: 20px;
}

    @media (min-width: 1024px) {
  .twm-footer {
      --padding-x: 28px
  }
    }
      .twm-footer .img-box img{
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

    .twm-footer .certification-box {
      padding: var(--padding-x);
      display: grid;
      width: 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      border-bottom-width: 1px;
      --tw-border-opacity: 1;
      border-color: rgb(150 152 155 / var(--tw-border-opacity, 1));
    }

    @media (min-width: 768px){
  .twm-footer .certification-box{
    display: flex;
    justify-content: center;
    gap: 4rem;
  }
}

    @media (min-width: 1280px){
  .twm-footer .certification-box{
    gap: 7rem;
  }
}

      .twm-footer .certification-box .certification{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

      @media (min-width: 1024px){
  .twm-footer .certification-box .certification{
    gap: 1.25rem;
  }
}

        .twm-footer .certification-box .certification .img-box{
  height: 1.75rem;
  width: 1.75rem;
}

          @media (min-width: 1024px) {

        .twm-footer .certification-box .certification .img-box {
            width: 65px;
            height: 65px
        }
          }

        .twm-footer .certification-box .certification h4{
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.03em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}

        @media (min-width: 1024px){
  .twm-footer .certification-box .certification h4{
    text-align: center;
            transform: translateY(4px);
  }
}

    .twm-footer .footer-gradient{
  width: 100%;
  overflow: hidden;
}

      .twm-footer .footer-gradient .gradient {
        background: linear-gradient(
          90deg,
          #ffb500 0%,
          #ff6700 6.25%,
          #00ac7a 12.5%,
          #624bee 18.75%,
          #ffb500 25%,
          #ff6700 31.25%,
          #00ac7a 37.5%,
          #624bee 43.75%,
          #ffb500 50%,
          #ff6700 56.25%,
          #00ac7a 62.5%,
          #624bee 68.75%,
          #ffb500 75%,
          #ff6700 81.25%,
          #00ac7a 87.5%,
          #624bee 93.75%,
          #ffb500 100%
        );
        height: 5px;
        width: 200vw;
        animation: move 40s linear infinite;
      }

        @keyframes move {
          0% {
            transform: translateX(-50%);
          }
          100% {
            transform: translateX(0%);
          }
        }

    .twm-footer .footer-content {
      padding: var(--padding-x);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    @media (min-width: 768px){
  .twm-footer .footer-content{
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
  }
}

    @media (min-width: 1024px){
  .twm-footer .footer-content{
    gap: 2.25rem;
  }
}

      .twm-footer .footer-content .content-left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

      @media (min-width: 1024px){
  .twm-footer .footer-content .content-left{
    flex-direction: row;
    align-items: center;
    gap: 2.25rem;
  }
}

        .twm-footer .footer-content .content-left .img-box{
  height: 1.25rem;
  width: auto;
}

          @media (min-width: 1024px) {

        .twm-footer .footer-content .content-left .img-box {
            width: 150px;
            height: 35px
        }

        .twm-footer .footer-content .content-left .text {
            transform: translateY(4px)
        }
          }

          .twm-footer .footer-content .content-left .text h5{
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
}

          .twm-footer .footer-content .content-left .text p{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}

          @media (min-width: 768px){
  .twm-footer .footer-content .content-left .text p{
    flex-direction: row;
    gap: 1rem;
  }
}

      .twm-footer .footer-content .content-right{
  display: flex;
  gap: 0.75rem;
}

        .twm-footer .footer-content .content-right a:hover{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}

          .twm-footer .footer-content .content-right a svg {
            width: 30px;
            height: 30px;
            pointer-events: none;
          }

    .twm-footer .footer-link {
      padding: var(--padding-x);
      --tw-bg-opacity: 1;
      background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    }

    @media (min-width: 768px){
  .twm-footer .footer-link{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

      .twm-footer .footer-link .link-box{
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

        .twm-footer .footer-link .link-box a{
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  font-weight: 500;
  line-height: 1;
}

        .twm-footer .footer-link .link-box a:hover{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}

      .twm-footer .footer-link p{
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.03em;
  --tw-text-opacity: 1;
  color: rgb(234 234 235 / var(--tw-text-opacity, 1));
}
  /* ====== footer end ====== */

    /* 上方與左側標題 */

    /* 左側標題 */

    /* sticky table */

    .table-box .icon-group{
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
}

      .table-box .icon-group .group-title{
  margin-bottom: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(213 214 215 / var(--tw-text-opacity, 1));
}

      .table-box .icon-group .icon-list{
  list-style-type: none;
  padding-left: 0px;
}

        .table-box .icon-group .icon-list li{
  display: flex;
  gap: 0.5rem;
  line-height: 24px;
}

        .table-box .icon-group .icon-list li:not(:last-child) {
          margin-bottom: 0.5rem;
        }

        .table-box .icon-group .icon-list img {
          width: 24px;
          height: 24px;
        }

        .table-box .icon-group .icon-list a{
  text-decoration-line: underline;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

        .table-box .icon-group .icon-list a:hover{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}

  /* 基本 modal 樣式 */
  .table-box-normal {
    max-width: 100%;
    overflow-x: auto;
  }

  .table-box-normal::-webkit-scrollbar {
    height: 6px;
    border-radius: 4px;
    --tw-bg-opacity: 1;
    background-color: rgb(92 93 95 / var(--tw-bg-opacity, 1));
  }

  .table-box-normal::-webkit-scrollbar-thumb {
    border-radius: 4px;
    --tw-bg-opacity: 1;
    background-color: rgb(121 123 125 / var(--tw-bg-opacity, 1));
  }

  .table-box-normal table {
    table-layout: fixed;
    overflow: hidden;
    border-radius: 8px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(48 49 50 / var(--tw-border-opacity, 1)) /* #303132 */;
    background: #1a1a1a;
  }

  .table-box-normal table.two-color tbody tr:nth-child(2n) {
    background: #000000;
  }

  .table-box-normal tr {
    min-width: 100%;
  }

  .table-box-normal td,
  .table-box-normal th {
    text-align: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
    font-weight: 400;
    min-width: 115px;
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(48 49 50 / var(--tw-border-opacity, 1)) /* #303132 */;
  }

  .table-box-normal td span,
  .table-box-normal th span {
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.04rem;
  }

  .table-box-normal td.compress,
  .table-box-normal th.compress {
    min-width: inherit;
  }

  .table-box-normal td.gray,
  .table-box-normal th.gray {
    background: #000000;
  }

  .table-box-normal th,
  .table-box-normal thead td {
    background: #000000;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(48 49 50 / var(--tw-border-opacity, 1)) /* #303132 */;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .table-box-normal tbody tr:not(:last-child) {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(48 49 50 / var(--tw-border-opacity, 1)) /* #303132 */;
  }

  .table-box-normal ul {
    list-style: disc;
    padding-left: 1.5em;
  }

  .table-box-normal ul li {
    line-height: 1.5;
  }

  .table-box-normal ul li::marker {
    font-size: 0.7em;
  }

  .table-tab-section .twm-tabs {
    padding-left: 1.25rem /* 20px */;
    padding-right: 1.25rem /* 20px */;
  }

  @media (min-width: 768px) {
    .tab-block.table-tab-section {
      padding-top: 1.875rem /* 30px */;
      padding-bottom: 1.875rem /* 30px */;
    }

    .table-tab-section .twm-tabs {
      padding-left: 2rem /* 32px */;
      padding-right: 2rem /* 32px */;
    }
  }

  @media (min-width: 1024px) {
    .table-box-normal td,
    .table-box-normal th {
      min-width: 150px;
    }

    .table-tab-section .twm-tabs {
      padding-left: 2.5rem /* 40px */;
      padding-right: 2.5rem /* 40px */;
    }
  }

  @media (min-width: 1280px) {
    .table-tab-section .twm-tabs {
      padding-left: 0px;
      padding-right: 0px;
    }
  }

  /* table-notice */
      .table-notice.active .table-tab-ul,
      .table-notice.active .table-tab-ol{
  display: flex;
}
/* ====== input ====== */
.twm-input{
  display: flex;
  height: 3rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(192 193 195 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.twm-input input{
  width: 100%;
  background-color: transparent;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  --tw-text-opacity: 1;
  color: rgb(48 49 50 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.twm-input input::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(121 123 125 / var(--tw-text-opacity, 1));
}
.twm-input input::placeholder{
  --tw-text-opacity: 1;
  color: rgb(121 123 125 / var(--tw-text-opacity, 1));
}
.twm-input svg{
  height: 1.25rem;
  width: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(121 123 125 / var(--tw-text-opacity, 1));
}
.twm-input ~ .error-text{
  margin-top: 0.5rem;
  display: none;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(233 60 60 / var(--tw-text-opacity, 1));
}
.twm-input.error ~ .error-text{
  display: inline-block;
}
.twm-input.inverse{
  --tw-border-opacity: 1;
  border-color: rgb(192 193 195 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 0.1;
    /* opacity-100 解決手機自動降透明度問題 */
}
.twm-input.inverse input{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.twm-input.inverse input::-moz-placeholder{
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 0.6;
}
.twm-input.inverse input::placeholder{
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 0.6;
}
.twm-input.inverse svg{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.twm-input.inverse:has(input:-moz-read-only){
  --tw-border-opacity: 1;
  border-color: rgb(92 93 95 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.2;
}
.twm-input.inverse:has(input:disabled),
    .twm-input.inverse:has(input:read-only){
  --tw-border-opacity: 1;
  border-color: rgb(92 93 95 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.2;
}
.twm-input.inverse:has(input:-moz-read-only) svg{
  --tw-text-opacity: 1;
  color: rgb(92 93 95 / var(--tw-text-opacity, 1));
}
.twm-input.inverse:has(input:disabled) svg, .twm-input.inverse:has(input:read-only) svg{
  --tw-text-opacity: 1;
  color: rgb(92 93 95 / var(--tw-text-opacity, 1));
}
.twm-input.inverse input:disabled::-moz-placeholder, .twm-input.inverse input:read-only::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
  opacity: 1;
}
.twm-input.inverse input:-moz-read-only, .twm-input.inverse input:-moz-read-only::placeholder{
  --tw-text-opacity: 1;
  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
  opacity: 1;
}
.twm-input.inverse input:disabled,
    .twm-input.inverse input:disabled::placeholder,
    .twm-input.inverse input:read-only,
    .twm-input.inverse input:read-only::placeholder{
  --tw-text-opacity: 1;
  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
  opacity: 1;
}
.twm-input:has(input:-moz-read-only){
  --tw-bg-opacity: 1;
  background-color: rgb(234 234 235 / var(--tw-bg-opacity, 1));
}
.twm-input:has(input:disabled),
  .twm-input:has(input:read-only){
  --tw-bg-opacity: 1;
  background-color: rgb(234 234 235 / var(--tw-bg-opacity, 1));
}
.twm-input:has(input:focus) {
    box-shadow: 0 0 0 1px #ffd1b3;
  }
.twm-input.error{
  --tw-border-opacity: 1;
  border-color: rgb(233 60 60 / var(--tw-border-opacity, 1));
}
.twm-input:has(input:focus).error {
    box-shadow: 0 0 0 1px #ffc6c6;
  }
.input-label{
  position: relative;
  margin-bottom: 0.5rem;
  display: inline-block;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.input-label.required::after {
      content: "*";
      font-family: "Noto Sans TC", "system-ui", "-apple-system", "Segoe UI",
        "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", "Arial",
        "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
      position: absolute;
      right: -10px;
      top: 0px;
      --tw-text-opacity: 1;
      color: rgb(255 103 0 / var(--tw-text-opacity, 1));
    }
.captcha-input{
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: 1.25rem;
}
.captcha-input .twm-input {
    flex: 1 1 0%;
  }
.captcha-input ~ .error-text{
  margin-top: 0.5rem;
  display: none;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(233 60 60 / var(--tw-text-opacity, 1));
}
.captcha-input:has(.twm-input.error) ~ .error-text{
  display: inline-block;
}
.captcha{
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.captcha img {
    max-width: 100px;
  }
/* 解決autofill 問題 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* 覆蓋背景：使用內部陰影 */
  -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.001) inset !important;
  /* 覆蓋文字顏色 */
  -webkit-text-fill-color: white !important;
  /* 可選：過渡效果（防止顏色閃爍）*/
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
/* ====== select ====== */
/* twm-select 輸入框 */
.twm-select-white + .select2-container--default .select2-selection--single{
  height: 3rem;
  border-radius: 8px !important;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(192 193 195 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.twm-select-inverse + .select2-container--default .select2-selection--single{
  height: 3rem;
  border-radius: 8px !important;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(192 193 195 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.1;
}
/* twm-select focused */
.select2-container--default .select2-selection:focus,
.select2-container--default .select2-selection.select2-selection--single:focus {
  box-shadow: 0 0 0 1px #ffd1b3;
}
.error ~ .select2-container--default .select2-selection:focus,
.error.select2-container--default
  .select2-selection.select2-selection--single:focus {
  box-shadow: 0 0 0 1px #ffc6c6;
}
/* twm-select disabled */
.twm-select-white
  ~ .select2-container--default.select2-container--disabled
  .select2-selection--single{
  --tw-bg-opacity: 1;
  background-color: rgb(234 234 235 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.twm-select-inverse
  ~ .select2-container--default.select2-container--disabled
  .select2-selection--single{
  --tw-border-opacity: 1;
  border-color: rgb(92 93 95 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 0.2;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.twm-select-inverse
  ~ .select2-container--default.select2-container--disabled
  .select2-selection--single .select2-selection__rendered{
  --tw-text-opacity: 1;
  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
}
.twm-select-inverse
  ~ .select2-container--default.select2-container--disabled
  .select2-selection--single .select2-selection__placeholder{
  --tw-text-opacity: 1;
  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
}
.twm-select-inverse
  ~ .select2-container--default.select2-container--disabled
  .select2-selection--single .select2-selection__arrow b {
    background-color: #abadaf;
  }
/* twm-select error */
.twm-select-white.error
  ~ .select2-container--default
  .select2-selection--single,
.twm-select-inverse.error
  ~ .select2-container--default
  .select2-selection--single{
  --tw-border-opacity: 1;
  border-color: rgb(233 60 60 / var(--tw-border-opacity, 1));
}
.twm-select-white ~ .error-text{
  margin-top: 0.5rem;
  display: none;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(233 60 60 / var(--tw-text-opacity, 1));
}
.twm-select-white.error ~ .error-text{
  display: inline-block;
}
.twm-select-inverse ~ .error-text{
  margin-top: 0.5rem;
  display: none;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(233 60 60 / var(--tw-text-opacity, 1));
}
.twm-select-inverse.error ~ .error-text{
  display: inline-block;
}
/* twm-select 輸入框內文字 */
.twm-select-white
  + .select2-container--default
  .select2-selection--single
  .select2-selection__rendered{
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  line-height: 2.875rem;
  --tw-text-opacity: 1;
  color: rgb(48 49 50 / var(--tw-text-opacity, 1));
}
.twm-select-inverse
  + .select2-container--default
  .select2-selection--single
  .select2-selection__rendered{
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  line-height: 2.875rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* twm-select 輸入框 placeholder*/
.twm-select-white
  + .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder{
  --tw-text-opacity: 1;
  color: rgb(121 123 125 / var(--tw-text-opacity, 1));
}
.twm-select-inverse
  + .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder{
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 0.6;
}
/* twm-select 輸入框箭頭 */
.twm-select-inverse
  + .select2-container--default
  .select2-selection--single
  .select2-selection__arrow{
  right: 0px;
  height: 2.875rem;
}
.twm-select-inverse
  + .select2-container--default
  .select2-selection--single
  .select2-selection__arrow b {
    -webkit-mask-image: url("../icons/down.svg");
    mask-image: url("../icons/down.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: #ffffff;
    right: 1rem;
    left: auto;
    margin: 0px;
    height: 1.5rem;
    width: 1.5rem;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-style: none;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
.twm-select-white
  + .select2-container--default
  .select2-selection--single
  .select2-selection__arrow{
  right: 0px;
  height: 2.875rem;
}
.twm-select-white
  + .select2-container--default
  .select2-selection--single
  .select2-selection__arrow b {
    -webkit-mask-image: url("../icons/down.svg");
    mask-image: url("../icons/down.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: #797b7d;
    right: 1rem;
    left: auto;
    margin: 0px;
    height: 1.5rem;
    width: 1.5rem;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-style: none;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
.twm-select-inverse
  + .select2-container--default.select2-container--open
  .select2-selection__arrow
  b,
.twm-select-white
  + .select2-container--default.select2-container--open
  .select2-selection__arrow
  b {
  transform: rotate(180deg) translateY(50%);
}
/* twm-select dropdown 樣式 */
.select2-container {
  z-index: 200;
}
.select2-dropdown.select2-dropdown--below{
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  overflow: hidden;
  border-radius: 8px;
  --tw-border-opacity: 1;
  border-color: rgb(48 49 50 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}
.select2-dropdown.select2-dropdown--above{
  overflow: hidden;
  border-radius: 8px;
  --tw-border-opacity: 1;
  border-color: rgb(48 49 50 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}
/* twm-select option 預設樣式 */
.select2-container--default .select2-results__option--selectable{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1rem;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.select2-results__option--selectable:not(:last-child){
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(48 49 50 / var(--tw-border-opacity, 1));
}
/* twm-select option hover */
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background: #1e1e1e;
}
/* twm-select selected option */
.select2-container--default .select2-results__option--selected {
  background: #1e1e1e;
}
/* select2 dropdown height 預設7個，超過8個出現 scrollbar*/
.select2-container--default .select2-results > .select2-results__options {
  max-height: 336px;
}
/* option scrollbar */
.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar{
  width: 6px;
}
.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-thumb{
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(121 123 125 / var(--tw-bg-opacity, 1));
}
.select2-container--default
  .select2-results
  > .select2-results__options::-webkit-scrollbar-track {
  margin: 8px;
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(92 93 95 / var(--tw-bg-opacity, 1));
}
.select-title{
  position: relative;
  margin-bottom: 0.5rem;
  display: inline-block;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.select-title.required::after {
      content: "*";
      font-family: "Noto Sans TC", "system-ui", "-apple-system", "Segoe UI",
        "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", "Arial",
        "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
      position: absolute;
      right: -10px;
      top: 0px;
      --tw-text-opacity: 1;
      color: rgb(255 103 0 / var(--tw-text-opacity, 1));
    }
/* ====== radio ====== */
.twm-radio{
  position: relative;
}
input[type="radio"]{
  display: none;
}
input[type="radio"] + label{
  position: relative;
  display: inline-block;
  padding-left: 1.75rem;
  line-height: 1.5;
}
input[type="radio"] + label:hover:before {
  box-shadow: inset 0 0 0 1px #96989b, 0 0 0 1px #ffd1b3;
}
input[type="radio"] + label:before {
  content: "";
  box-shadow: inset 0 0 0 1px #c0c1c3;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  position: absolute;
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
input[type="radio"] + label:after {
  content: "";
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  display: none;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 103 0 / var(--tw-bg-opacity, 1));
}
/* radio checked */
input[type="radio"]:checked + label:after{
  display: inline-block;
}
input[type="radio"]:checked + label:before {
  box-shadow: inset 0 0 0 1px #ff6700;
  background-color: transparent;
}
input[type="radio"]:checked + label:hover:before {
  box-shadow: inset 0 0 0 1px #ff6700, 0 0 0 1px #ffd1b3;
  --tw-bg-opacity: 1;
  background-color: rgb(255 209 179 / var(--tw-bg-opacity, 1));
}
/* radio disabled */
input[type="radio"]:disabled + label:after{
  --tw-bg-opacity: 1;
  background-color: rgb(213 214 215 / var(--tw-bg-opacity, 1));
}
input[type="radio"]:checked:disabled + label:before {
  box-shadow: inset 0 0 0 1px #d5d6d7;
  background-color: transparent;
}
.radio-group{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 1024px){
  .radio-group{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}
.radio-group ~ .error-text{
  margin-top: 0.5rem;
  display: none;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(233 60 60 / var(--tw-text-opacity, 1));
}
.radio-group.error ~ .error-text{
  display: inline-block;
}
/* radio card */
.radio-card{
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(192 193 195 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.1;
}
.radio-card .twm-radio{
  height: 100%;
}
.radio-card input[type="radio"] + label{
  height: 100%;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 3rem;
  padding-right: 1.25rem;
}
.radio-card input[type="radio"] + label .label-title{
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.radio-card input[type="radio"] + label .label-des{
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(213 214 215 / var(--tw-text-opacity, 1));
}
.radio-card input[type="radio"] + label .btn-link{
  margin-top: 0.75rem;
  display: inline-block;
}
.radio-card input[type="radio"] + label:before {
    top: 19px;
    left: 20px;
    transform: translateY(0%);
  }
.radio-card input[type="radio"] + label:after {
    left: 23px;
    top: 22px;
    transform: translateY(0%);
  }
/* ====== checkbox ======  */
input[type="checkbox"]{
  display: none;
}
input[type="checkbox"] + label {
  line-height: 1.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.04rem;
  position: relative;
  display: inline-block;
  padding-left: 1.75rem;
}
@media (min-width: 768px) {
input[type="checkbox"] + label {
    font-size: 1rem;
    letter-spacing: 0.08rem
}
  }
input[type="checkbox"] + label:before {
  content: "";
  box-shadow: inset 0 0 0 1px #96989b;
  /* top: 50%; */
  top: 0;
  left: 0;
  /* transform: translateY(-50%); */
  position: absolute;
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 2px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
input[type="checkbox"] + label:after {
  content: "";
  /* top: 50%; */
  top: 0;
  left: 0;
  /* transform: translateY(-50%); */
  color: #ffffff;
  background-image: url("../icons/check-white.svg");
  background-position: center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  position: absolute;
  display: none;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 2px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 103 0 / var(--tw-bg-opacity, 1));
}
/* checkbox indeterminate */
input[type="checkbox"].idt + label:after {
  background-image: url("../icons/remove-white.svg");
}
input[type="checkbox"] + label:hover:before {
  box-shadow: inset 0 0 0 1px #96989b, 0 0 0 1px #ffd1b3;
}
/* checkbox checked */
input[type="checkbox"]:checked + label:after{
  display: inline-block;
}
/* checkbox disabled */
input[type="checkbox"]:disabled + label:before{
  --tw-bg-opacity: 1;
  background-color: rgb(234 234 235 / var(--tw-bg-opacity, 1));
}
input[type="checkbox"]:disabled:checked + label:after{
  --tw-bg-opacity: 1;
  background-color: rgb(213 214 215 / var(--tw-bg-opacity, 1));
}
input[type="checkbox"]:disabled + label:hover:before {
  box-shadow: inset 0 0 0 1px #96989b;
}
.twm-checkbox-small input[type="checkbox"] + label {
    line-height: 1.25rem;
    font-size: 1.125rem;
    letter-spacing: 0.09rem;
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    display: inline-block;
    padding-left: 1.75rem;
  }
.twm-checkbox-small input[type="checkbox"] + label:before {
    top: 2px;
    height: 1rem;
    width: 1rem;
  }
.twm-checkbox-small input[type="checkbox"] + label:after {
    background-size: 12px 12px;
    top: 2px;
    height: 1rem;
    width: 1rem;
  }
.twm-checkbox ~ .error-text{
  margin-top: 0.5rem;
  display: none;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(233 60 60 / var(--tw-text-opacity, 1));
}
.twm-checkbox.error ~ .error-text{
  display: inline-block;
}
.twm-checkbox .required-mark{
  display: none;
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));

  font-family: "Noto Sans TC", "system-ui", "-apple-system", "Segoe UI",
    "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", "Arial",
    "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}
.twm-checkbox.required .required-mark{
  display: inline;
}
/* ====== textarea ======  */
.twm-textarea{
  width: 100%;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(192 193 195 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.1;

  height: 96px;
  padding: 0.625rem 1rem;
}
.twm-textarea textarea {
    all: unset;
    width: 100%;
    resize: none;
    background-color: transparent;
  }
.twm-textarea textarea::-moz-placeholder {
      color: #fff;
    }
.twm-textarea textarea::placeholder {
      color: #fff;
    }
.twm-textarea .charCount{
  text-align: right;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
}
.twm-textarea .charCount .total{
  opacity: 0.6;
}
.twm-textarea:has(textarea:focus) {
    box-shadow: 0 0 0 1px #ffd1b3;
  }
.twm-textarea.error{
  --tw-border-opacity: 1;
  border-color: rgb(233 60 60 / var(--tw-border-opacity, 1));
}
.twm-textarea:has(textare:focus).error {
    box-shadow: 0 0 0 1px #ffc6c6;
  }
.twm-textarea ~ .error-text{
  margin-top: 0.5rem;
  display: none;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(233 60 60 / var(--tw-text-opacity, 1));
}
.twm-textarea.error ~ .error-text{
  display: inline-block;
}
/* agree-box-container */
.agree-box-container{
  cursor: pointer;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(192 193 195 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.1;
  padding: 1rem;
  --tw-backdrop-blur: blur(15px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
@media (min-width: 1024px){
  .agree-box-container{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.agree-box-container ~ .error-text{
  margin-top: 0.5rem;
  display: none;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  --tw-text-opacity: 1;
  color: rgb(233 60 60 / var(--tw-text-opacity, 1));
}
.agree-box-container.error{
  --tw-border-opacity: 1;
  border-color: rgb(233 60 60 / var(--tw-border-opacity, 1));
}
.agree-box-container.error ~ .error-text{
  display: inline-block;
}
/* @import "./global/tabs.css"; */
/* @import "./global/tags.css"; */
/* ====== header start ====== */
.page-top {
  z-index: 100;
  position: sticky;
  top: 0px;
}
header {
  --logo-width: 94px;
  --logo-height: 21px;
  --desktop-height: calc(var(--header-height) + var(--desktop-model));
  --top-height: calc(var(--header-height) + var(--index-note-height));
  --desktop-top-height: calc(var(--desktop-height) + var(--index-note-height));
  --ulBox-padding-x: 20px;
  pointer-events: auto;
  position: relative;
  z-index: 100;
  display: flex;
  height: -moz-max-content;
  height: max-content;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(11 12 24 / var(--tw-bg-opacity, 1));
}
@media (min-width: 1024px) {
header {
    --logo-width: 128px;
    --logo-height: 45px;
    padding-top: var(--desktop-model);
    transform: translateY(0px);
    transition: transform 0.3s ease-in-out
}
  }
header .img-box{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
header .img-box img{
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
header .img-box.cover img{
  -o-object-fit: cover;
     object-fit: cover;
}
header .twm-container {
    height: var(--header-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
@media (min-width: 1024px){
  header .twm-container{
    position: relative;
  }
}
header .header-main{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
header .header-main .main-left{
  display: flex;
  align-items: center;
  gap: 1rem;
}
header .header-main .main-left .img-box {
        width: var(--logo-width);
        height: var(--logo-height);
      }
header .header-main .main-left .model-drop p,
        header .header-main .main-left .model-drop a{
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.03em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px){
  header .header-main .main-left .model-drop p,
        header .header-main .main-left .model-drop a{
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.04rem;
  }
}
header .header-main .main-left .model-drop .box{
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.25rem;
}
@media (min-width: 1024px){
  header .header-main .main-left .model-drop .box{
    display: none;
  }
}
header .header-main .main-left .model-drop .box p{
  text-decoration-line: underline;
  text-underline-offset: 2px;
}
header .header-main .main-left .model-drop .box > *{
  pointer-events: none;
}
header .header-main .main-left .model-drop .box:hover p{
  text-decoration-line: none;
}
header .header-main .main-left .model-drop .menu {
          background: rgba(42, 42, 42, 0.6);
          backdrop-filter: blur(70px);
          position: absolute;
          top: 75%;
          z-index: 10;
          display: none;
          flex-direction: column;
          overflow: hidden;
          border-radius: 8px;
        }
@media (min-width: 1024px) {
header .header-main .main-left .model-drop .menu {
            transition: height 0.3s ease-in-out;
            height: var(--desktop-model);
            top: auto;
            bottom: 100%;
            left: 0px;
            display: flex;
            width: 100%;
            flex-direction: row;
            align-items: center;
            gap: 0.75rem;
            --tw-bg-opacity: 1;
            background-color: rgb(11 12 24 / var(--tw-bg-opacity, 1));
            padding-left: 1.25rem;
            padding-right: 1.25rem
        }
@media (min-width: 1280px){
    header .header-main .main-left .model-drop .menu{
      padding-left: 0px;
      padding-right: 0px;
    }
  }

            header .header-main .main-left .model-drop .menu:before {
              height: 1px;
              background: #373737;
              position: absolute;
              bottom: 0px;
              left: 50%;
              display: block;
              width: 100%;
              --tw-translate-x: -50%;
              transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
              --tw-content: '';
              content: var(--tw-content);
            }
          }
header .header-main .main-left .model-drop .menu a{
  display: block;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px){
  header .header-main .main-left .model-drop .menu a{
    padding: 0px;
  }
}
header .header-main .main-left .model-drop .menu a:first-of-type{
  padding-top: 0.5rem;
}
@media (min-width: 1024px){
  header .header-main .main-left .model-drop .menu a:first-of-type{
    padding: 0px;
  }
}
header .header-main .main-left .model-drop .menu a:last-of-type{
  padding-bottom: 0.5rem;
}
@media (min-width: 1024px){
  header .header-main .main-left .model-drop .menu a:last-of-type{
    padding: 0px;
  }
}
header .header-main .main-left .model-drop .menu a:hover{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}
header .header-main .main-left .model-drop .menu .final{
  display: none;
}
@media (min-width: 1024px){
  header .header-main .main-left .model-drop .menu .final{
    display: block;
  }
}
header .header-main .main-left .model-drop .menu .final.about {
              margin-left: auto;
            }
header .header-main .main-left #model_drop:checked ~ .model-drop .menu{
  display: flex;
}
header .header-main .main-right{
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 1024px){
  header .header-main .main-right{
    gap: 2rem;
  }
}
header .header-main .main-right label{
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
header .header-main .main-right label .icon{
  pointer-events: none;
}
header .header-main .main-right .icon-menu,
      header .header-main .main-right .search-btn{
  display: block;
}
header .header-main .main-right .icon-close{
  display: none;
}
@media (min-width: 1024px){
  header .header-main .main-right .nav-toggle{
    display: none;
  }
}
header .header-main .main-right .login-btn{
  gap: 0.5rem;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 103 0 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
header .header-main .main-right .login-btn .icon{
  display: none;
}
@media (min-width: 1024px){
  header .header-main .main-right .login-btn .icon{
    display: block;
  }
}
header nav {
    --max-width: calc(1280px - var(--ulBox-padding-x) * 2);
    --recently-padding: 1rem;
    --recently-height: 78px;
    --over-area: 50px;
    --bottom-reserved: calc(
      var(--recently-padding) + var(--recently-height) + var(--over-area)
    );
    top: var(--header-height);
    height: calc(100vh - var(--top-height));
    position: absolute;
    left: 0px;
    display: none;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
  }
@media (min-width: 1024px){
  header nav{
    display: flex;
    --tw-bg-opacity: 1;
    background-color: rgb(11 12 24 / var(--tw-bg-opacity, 1));
      top: 100%;
      padding: 0 20px;
      height: 0px;
      gap: 1rem;
  }

      header nav::before{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    display: none;
    height: 100vh;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(255 198 198 / var(--tw-bg-opacity, 1));
    --tw-content: '';
    content: var(--tw-content);
        background: rgb(26 26 26 / 0.5);
        backdrop-filter: blur(40px);
  }
}
@media (min-width: 1280px) {
header nav{
    gap: 2rem;
  }
    }
header nav::after {
      height: var(--bottom-reserved);
      background: linear-gradient(to top, #121212 50%, transparent 100%);
      position: absolute;
      bottom: 0px;
      z-index: 0;
      display: block;
      width: 100%;
      --tw-content: '';
      content: var(--tw-content);
    }
@media (min-width: 1024px){
  header nav::after{
    display: none;
  }
}
header nav .ul-box {
      padding-left: var(--ulBox-padding-x);
      padding-right: var(--ulBox-padding-x);
      padding-bottom: var(--bottom-reserved);
      display: flex;
      height: 100%;
      width: 100%;
      flex-direction: column;
      align-items: center;
      overflow: auto;
    }
@media (min-width: 1024px){
  header nav .ul-box{
    padding: 0px;
  }
}
header nav .ul-box {
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none;
    }
/* IE 10+ */
header nav .ul-box::-webkit-scrollbar {
        display: none; /* Chrome / Safari */
      }
header nav .ul-box ul{
  width: 100%;
        max-width: var(--max-width);
}
header nav .ul-box li {
        line-height: normal;
        display: flex;
        cursor: pointer;
        justify-content: space-between;
        gap: 0.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-size: 1.125rem;
        line-height: 1.5;
        letter-spacing: 0.08em;
        font-weight: 500;
        letter-spacing: 1.28px;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
      }
header nav .ul-box li.back{
  justify-content: flex-start;
  --tw-text-opacity: 1;
  color: rgb(213 214 215 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px){
  header nav .ul-box li.back{
    display: none;
  }
}
header nav .ul-box li > *{
  pointer-events: none;
}
header nav .ul-box li a{
  pointer-events: auto;
}
header nav .ul-box li:hover{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}
header nav .first-box .final{
  display: block;
}
@media (min-width: 1024px){
  header nav .first-box .final{
    display: none;
  }
}
header nav .second-box,
    header nav .third-box{
  display: none;
}
header nav ul.second{
  display: none;
}
header nav ul.second.active{
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px){
  header nav ul.second.active{
    gap: 0.75rem;
  }
}
header nav ul.third{
  display: none;
}
header nav ul.third.active{
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px){
  header nav ul.third.active{
    flex-direction: row;
  }
}
header nav .third-box ul.third {
        --third-gap: 1rem;
      }
@media (min-width: 1024px) {
header nav .third-box ul.third{
    flex-wrap: wrap;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    row-gap: 0.25rem;
  }

          header nav .third-box ul.third > *:not(.over-size) {
            flex: 0 0 calc((100% - (var(--third-gap) * 2)) / 3);
            max-width: calc((100% - (var(--third-gap) * 2)) / 3);
          }

          header nav .third-box ul.third > .over-size {
            flex: 1 1 30%;
          }

          header nav .third-box ul.third .over-4 {
            flex-basis: 45%;
          }

          header nav .third-box ul.third .over-8 {
            flex-basis: 100%;
          }
        }
@media (min-width: 1280px) {
header nav .third-box ul.third {
          --third-gap: 2rem;
          gap: 2rem
      }
        }
header nav .third-box ul.third li:not(.back){
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}
@media (min-width: 1024px){
  header nav .third-box ul.third li:not(.back){
    justify-content: flex-start;
  }
}
header nav .third-box ul.third li:not(.back) p {
            color: #ffba7b;
            letter-spacing: 1.28px;
            border-bottom-width: 1px;
            --tw-border-opacity: 1;
            border-color: rgb(121 123 125 / var(--tw-border-opacity, 1));
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            font-size: 1.125rem;
            line-height: 1.5;
            letter-spacing: 0.08em;
            font-weight: 500;
          }
@media (min-width: 1024px){
  header nav .third-box ul.third li:not(.back) p{
    padding: 0.75rem;
  }
}
header nav .third-box ul.third li:not(.back) .fourth-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(121 123 125 / var(--tw-border-opacity, 1));
}
header nav .third-box ul.third li:not(.back) .fourth-title p{
  border-style: none;
}
header nav .third-box ul.third li:not(.back):not(:last-of-type){
  margin-bottom: 0.75rem;
}
@media (min-width: 1024px){
  header nav .third-box ul.third li:not(.back):not(:last-of-type){
    margin-bottom: 0px;
  }
}
header nav .third-box ul.fourth li:not(.back) {
          padding: 10px 12px;
        }
@media (min-width: 1024px){
  header nav .third-box ul.fourth li:not(.back){
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.04rem;
  }
}
@media (min-width: 1280px){
  header nav .third-box ul.fourth li:not(.back){
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
  }
}
header nav .third-box ul.fourth li:not(.back):not(:last-of-type){
  margin-bottom: 0px;
}
@media (min-width: 1024px) {
          header nav .third-box ul.fourth:not(.card-box){
    display: grid;
            /* @apply grid grid-rows-4 auto-rows-min; */
            /* grid-auto-flow: column; */
            /* grid-auto-rows: min-content; */
  }
        }
header nav .third-box ul.fourth.card-box{
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 1024px){
  header nav .third-box ul.fourth.card-box{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
header nav .third-box ul.fourth.card-box li {
            padding: 0;
            --card-padding: 16px;
          }
header nav .third-box ul.fourth.card-box li .announce-card,
            header nav .third-box ul.fourth.card-box li .hashtag-card {
              background: rgb(255 255 255 / 0.05);
              backdrop-filter: blur(15px);
              padding: var(--card-padding);
              display: flex;
              width: 100%;
              align-items: center;
              justify-content: space-between;
              gap: 0.5rem;
              border-radius: 8px;
              transition-duration: 300ms;
              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            }
@media (min-width: 1024px){
  header nav .third-box ul.fourth.card-box li .announce-card,
            header nav .third-box ul.fourth.card-box li .hashtag-card{
    flex-direction: column;
  }
}
header nav .third-box ul.fourth.card-box li .announce-card h4, header nav .third-box ul.fourth.card-box li .hashtag-card h4{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
header nav .third-box ul.fourth.card-box li .announce-card .icon, header nav .third-box ul.fourth.card-box li .hashtag-card .icon{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
header nav .third-box ul.fourth.card-box li .announce-card:hover, header nav .third-box ul.fourth.card-box li .hashtag-card:hover {
                background: rgb(255 255 255 / 0.02);
              }
header nav .third-box ul.fourth.card-box li .announce-card:hover h4, header nav .third-box ul.fourth.card-box li .hashtag-card:hover h4{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
header nav .third-box ul.fourth.card-box li .announce-card:hover .icon, header nav .third-box ul.fourth.card-box li .hashtag-card:hover .icon{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}
header nav .third-box ul.fourth.card-box li .hashtag-card {
              --lg-padding: 16px;
              justify-content: flex-start;
            }
@media (min-width: 1024px){
  header nav .third-box ul.fourth.card-box li .hashtag-card{
    overflow: hidden;
    border-radius: 12px;
    padding: 0px;
                gap: var(--lg-padding);
  }
}
header nav .third-box ul.fourth.card-box li .hashtag-card .event-hashtag {
                margin-bottom: 10px;
                z-index: 10;
                display: none;
              }
@media (min-width: 1024px) {
header nav .third-box ul.fourth.card-box li .hashtag-card .event-hashtag {
                  top: var(--lg-padding);
                  left: var(--lg-padding);
                  position: absolute;
                  display: inline-flex
              }
                }
header nav .third-box ul.fourth.card-box li .hashtag-card .img-box{
  aspect-ratio: 16 / 9;
  height: 3.5rem;
  overflow: hidden;
  border-radius: 4px;
}
@media (min-width: 1024px){
  header nav .third-box ul.fourth.card-box li .hashtag-card .img-box{
    height: auto;
    width: 100%;
    border-radius: 0px;
  }
}
header nav .third-box ul.fourth.card-box li .hashtag-card .img-box img{
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
header nav .third-box ul.fourth.card-box li .hashtag-card .text{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
header nav .third-box ul.fourth.card-box li .hashtag-card .text {
                  padding: 0px var(--lg-padding);
                  padding-bottom: var(--lg-padding)
              }
                }
header nav .third-box ul.fourth.card-box li .hashtag-card h4 {
                letter-spacing: 1.28px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                font-size: 1.125rem;
                line-height: 1.5;
                letter-spacing: 0.08em;
              }
@media (min-width: 1024px) {
header nav .third-box ul.fourth.card-box li .hashtag-card h4 {
                  height: 48px
              }
                }
header nav .third-box ul.fourth.card-box li .hashtag-card .icon {
                background: rgb(255 255 255 / 0.2);
                padding: 3px;
                border-radius: 40px;
              }
@media (min-width: 1024px) {
header nav .third-box ul.fourth.card-box li .hashtag-card .icon{
    height: 2rem;
    width: 2rem;
    padding: 0.25rem;
  }
                    header nav .third-box ul.fourth.card-box li .hashtag-card:hover .img-box img{
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

                  header nav .third-box ul.fourth.card-box li .hashtag-card:hover .icon{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
                }
header nav .third-box ul.fourth.card-box li .announce-card {
              --date-height: 16.8px;
              --gap: 16px;
              border: 1px solid rgba(255, 255, 255, 0);
              transition-duration: 300ms;
              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            }
header nav .third-box ul.fourth.card-box li .announce-card .info {
                --margin-bottom: calc(var(--date-height) + var(--gap));
                margin-bottom: var(--margin-bottom);
              }
header nav .third-box ul.fourth.card-box li .announce-card .info .title{
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.03em;
  --tw-text-opacity: 1;
  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px){
  header nav .third-box ul.fourth.card-box li .announce-card .info .title{
    margin-bottom: 1.25rem;
    height: 2.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.04rem;
  }
}
header nav .third-box ul.fourth.card-box li .announce-card .info h4{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
@media (min-width: 1024px){
  header nav .third-box ul.fourth.card-box li .announce-card .info h4{
    margin-bottom: 0.5rem;
                    height: 52px;
  }
}
header nav .third-box ul.fourth.card-box li .announce-card .info p{
  display: none;
  text-overflow: ellipsis;
  border-style: none;
  padding: 0px;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px){
  header nav .third-box ul.fourth.card-box li .announce-card .info p{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  header nav .third-box ul.fourth.card-box li .announce-card .date-box{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
}
header nav .third-box ul.fourth.card-box li .announce-card .date-box .date {
                  left: var(--card-padding);
                  bottom: var(--card-padding);
                  position: absolute;
                  font-size: 0.75rem;
                  line-height: 1.4;
                  letter-spacing: 0.03em;
                  --tw-text-opacity: 1;
                  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
                }
@media (min-width: 1024px){
  header nav .third-box ul.fourth.card-box li .announce-card .date-box .date{
    position: static;
  }
}
header nav .third-box ul.fourth.card-box li .announce-card:hover {
                border: 1px solid rgba(255, 255, 255, 0.4);
              }
header nav .recently {
      width: calc(100% - var(--recently-padding) * 2);
      max-width: var(--max-width);
      height: var(--recently-height);
      bottom: var(--recently-padding);
      padding: 6px;
      background: rgba(42, 42, 42, 0.6);
      backdrop-filter: blur(70px);
      /* @apply absolute left-1/2 flex rounded-4 -translate-x-1/2 gap-4 items-center z-10; */
      position: fixed;
      left: 50%;
      z-index: 10;
      display: flex;
      --tw-translate-x: -50%;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      align-items: center;
      gap: 1rem;
      border-radius: 8px;
    }
@media (min-width: 1024px) {
header nav .recently {
        max-width: 160px;
        position: static;
        display: none;
        height: auto;
        --tw-translate-x: -0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        flex-direction: column;
        align-items: flex-start;
        background-color: transparent;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px
    }
      }
@media (min-width: 1280px) {
header nav .recently {
        max-width: 200px
    }
      }
header nav .recently h4{
  display: none;
}
@media (min-width: 1024px){
  header nav .recently h4{
    display: block;
  }
}
header nav .recently .img-box {
        width: 116px;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 8px;
      }
@media (min-width: 1024px){
  header nav .recently .img-box{
    width: 100%;
  }
}
header nav .recently .text p {
          letter-spacing: 1.28px;
          margin-bottom: 0.5rem;
          font-size: 1.125rem;
          line-height: 1.5;
          letter-spacing: 0.08em;
        }
@media (min-width: 1024px) {
          header nav .second-box li.active, header nav .third-box li.active{
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(92 93 95 / var(--tw-bg-opacity, 1));
  }

      header nav .first-box {
        bottom: calc(100% + var(--header-height) / 2);
        left: calc(20px + var(--logo-width) + 60px);
        position: absolute;
        height: -moz-max-content;
        height: max-content;
        width: -moz-max-content;
        width: max-content;
        --tw-translate-y: 50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        padding: 0px;
      }

        header nav .first-box ul{
    display: flex;
  }

          header nav .first-box ul li {
            padding-top: 11px;
            padding-bottom: 11px;
            border-bottom-width: 2px;
            border-color: transparent;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
          }

            header nav .first-box ul li .icon{
    display: none;
  }

            header nav .first-box ul li.active{
    --tw-border-opacity: 1;
    border-color: rgb(255 103 0 / var(--tw-border-opacity, 1));
  }

      header nav .second-box {
        max-width: 160px;
      }

        header nav .second-box li {
          padding: 10px;
        }

      header nav .third-box{
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(48 49 50 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
  }
          header nav .third-box.can-scroll:after {
            content: "";
            position: absolute;
            height: 2rem;
            width: 100%;
            background: url("../icons/double-chervon.svg"),
              linear-gradient(
                340deg,
                #0b0c18 13.79%,
                rgba(11, 12, 24, 0) 87.42%
              );
            background-position: center;
            background-repeat: no-repeat;
            bottom: 20px;
            z-index: 2;
          }
    }
@media screen and (min-width: 1320px) {
      header nav .first-box {
        left: calc((100vw - 1320px) / 2 + 20px + var(--logo-width) + 60px);
        /* (100vw - container max-width) / 2 + padding + logo + gap */
      }
    }
@media (min-width: 1280px) {
      header nav .first-box {
        left: calc((100vw - 1280px) / 2 + var(--logo-width) + 60px);
        /* (100vw - container max-width) / 2 + logo + gap */
      }

      header nav .second-box {
        max-width: 200px;
      }

      header nav .third-box{
    padding-left: 2rem;
    padding-right: 2rem;
  }
    }
@media (min-width: 1920px) {
      header nav .first-box {
        left: calc((100vw - 1680px) / 2 + var(--logo-width) + 60px);
        /* (100vw - container max-width) / 2 + logo + gap */
      }
    }
header.state-second nav .second-box{
  display: flex;
}
header.state-second nav .first-box,
      header.state-second nav .third-box{
  display: none;
}
header.state-third nav .third-box{
  display: flex;
}
header.state-third nav .first-box,
      header.state-third nav .second-box{
  display: none;
}
header.expand-all nav, header.expand-third nav {
      height: calc(100vh - var(--desktop-top-height) - 100px);
      max-height: 574px;
      padding: 16px 20px 20px;
    }
header.expand-all nav::before, header.expand-third nav::before{
  display: block;
}
@media screen and (min-width: 1320px) {
header.expand-all nav, header.expand-third nav {
        padding: 16px calc(((100vw - 1320px) / 2) + 20px) 20px
    }
      }
@media (min-width: 1280px) {
header.expand-all nav, header.expand-third nav {
        padding: 16px calc((100vw - 1200px) / 2) 20px
    }
      }
@media (min-width: 1440px) {
header.expand-all nav, header.expand-third nav {
        padding: 16px calc((100vw - 1320px) / 2) 20px
    }
      }
header.expand-all nav .recently, header.expand-third nav .recently{
  display: flex;
}
header.expand-all nav .second-box,
      header.expand-all nav .third-box{
  display: flex;
}
header.expand-all nav .third-box{
  border-left-width: 1px;
}
header.expand-third nav .second-box{
  display: none;
}
header.expand-third nav .third-box{
  display: flex;
  padding-left: 0px;
}
@media (min-width: 1024px) {
header.hidden-modelDrop {
      transform: translateY(calc(var(--desktop-model) * -1))
  }

      header.hidden-modelDrop .login-block {
        height: calc(100vh - var(--desktop-top-height) + var(--desktop-model));
      }
    }
header .login-block {
    height: calc(100vh - var(--top-height));
    background: rgba(11, 12, 24, 0.7);
    box-shadow: 1px 17px 44px 0px rgba(3, 2, 41, 0.14);
    backdrop-filter: blur(50px);
    top: var(--header-height);
    z-index: -1;
    transform: translateX(0%) scaleX(0);
    transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
    padding: var(--ulBox-padding-x);
    max-width: 541px;
    position: absolute;
    left: 100%;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.25rem;
  }
@media screen and (min-width: 541px) {
header .login-block{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
    }
@media (min-width: 1024px) {
header .login-block {
      top: 100%;
      height: calc(100vh - var(--desktop-top-height))
  }
    }
header .login-block .close-login{
  cursor: pointer;
  align-self: flex-end;
}
@media (min-width: 1024px){
  header .login-block .close-login{
    height: 2rem;
    width: 2rem;
  }
}
header .login-block .login-content h3{
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
}
@media (min-width: 1024px){
  header .login-block .login-content h3{
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 500;
  }
}
header .login-block .login-content .input-block{
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
header .login-block .login-content .input-block .input-box{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
header .login-block .login-content .input-block .input-box h4{
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 500;
}
header .login-block .login-content .forget-box{
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
}
header .login-block .login-content .login{
  margin-bottom: 1.5rem;
  width: 100%;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 103 0 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
header .login-block .login-content .no-account span{
  margin-right: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}
header #login_ch:checked ~ .login-block {
    transform: translateX(-100%) scaleX(1);
  }
header .login-menu {
    top: calc(100% + 4px);
    padding: 8px 8px 8px 0;
    position: absolute;
    right: 1.25rem;
    display: none;
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
  }
@media (min-width: 768px){
  header .login-menu{
    right: 2rem;
  }
}
@media (min-width: 1280px) {
header .login-menu {
      right: 20px
  }
    }
@media (min-width: 1440px) {
header .login-menu {
      right: calc((100vw - 1320px) / 2)
  }
    }
@media (min-width: 1920px) {
header .login-menu {
      right: calc((100vw - 1680px) / 2)
  }
    }
header .login-menu .box {
      max-height: 314px;
      display: flex;
      flex-direction: column;
      gap: 0px;
      overflow: auto;
    }
header .login-menu .box::-webkit-scrollbar {
        width: 6px;
      }
header .login-menu .box::-webkit-scrollbar-thumb {
        border-radius: 10px;
        --tw-bg-opacity: 1;
        background-color: rgb(121 123 125 / var(--tw-bg-opacity, 1));
      }
header .login-menu .box::-webkit-scrollbar-track {
        border-radius: 10px;
        --tw-bg-opacity: 1;
        background-color: rgb(92 93 95 / var(--tw-bg-opacity, 1));
      }
header .login-menu .box a {
        padding: 10px 16px;
        font-size: 1.125rem;
        line-height: 1.5;
        letter-spacing: 0.08em;
      }
header .login-menu .box a:not(:last-of-type){
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(48 49 50 / var(--tw-border-opacity, 1));
}
header .login-menu .box a:hover {
          background: #1e1e1e;
        }
header #login_ch:checked ~ .login-menu{
  display: block;
}
header .search-block {
    height: 0px;
    top: var(--header-height);
    transform: translateX(0%) scaleX(0);
    transition: transform 0.3s ease-in-out;
    z-index: -1;
    position: absolute;
    left: 100%;
    width: 100%;
  }
header .search-block .search-box {
      padding: 0px var(--ulBox-padding-x);
      width: 100%;
    }
header .search-block .search-box::before {
        content: "";
        background: #0b0c18;
        z-index: -1;
        height: calc(100vh - var(--top-height));
        position: absolute;
        top: 0px;
        left: 0px;
        display: block;
        width: 100%;
      }
header .search-block::before {
      content: "";
      background: rgb(26 26 26 / 0.5);
      z-index: -1;
      height: calc(100vh - var(--top-height));
      backdrop-filter: blur(40px);
      position: absolute;
      top: 0px;
      left: 0px;
      display: none;
      width: 100%;
    }
@media (min-width: 1024px) {
header .search-block {
      transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
      top: 100%;
      transform: translateX(0%) scaleX(1);
      left: 0px
  }

      header .search-block .search-box {
        height: 0px;
        background: #0b0c18;
        transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
        padding: 0px var(--ulBox-padding-x);
        overflow: hidden;
      }

        header .search-block .search-box::before{
    display: none;
  }
    }
header .search-block .search-container {
      max-width: 1024px;
      margin-top: 2.5rem;
      margin-bottom: 2.5rem;
    }
@media (min-width: 1024px){
  header .search-block .search-container{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
  }
}
header .search-block .search-input{
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1rem;
}
header .search-block .search-input .twm-input{
  flex: 1 1 0%;
}
header .search-block .search-hashtag h5{
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
}
header .search-block .search-hashtag .box{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
header .search-block .search-hashtag .box a {
          border: 1px solid rgba(255, 255, 255, 0);
          background: rgba(255, 255, 255, 0.2);
          border-radius: 4px;
          padding-left: 0.5rem;
          padding-right: 0.5rem;
          padding-top: 0.25rem;
          padding-bottom: 0.25rem;
          font-size: 0.875rem;
          line-height: 1.6;
          letter-spacing: 0.04rem;
        }
header .search-block .search-hashtag .box a:hover {
            border: 1px solid rgba(255, 255, 255, 0.4);
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(30px);
          }
header #search_ch:checked ~ .search-block {
    height: calc(100vh - var(--top-height));
    transform: translateX(-100%) scaleX(1);
  }
@media (min-width: 1024px) {
header #search_ch:checked ~ .search-block {
      transform: translateX(0%) scaleX(1)
  }

      header #search_ch:checked ~ .search-block .search-box {
        transform: translateX(0%) scaleX(1);
        height: 300px;
        padding-top: 5rem;
        padding-bottom: 5rem;
      }
      header #search_ch:checked ~ .search-block::before{
    display: block;
  }
    }
#nav_ch:checked ~ header .header-main .main-right .icon-menu,
      #nav_ch:checked ~ header .header-main .main-right .search-btn{
  display: none;
}
#nav_ch:checked ~ header .header-main .main-right .icon-close{
  display: block;
}
#nav_ch:checked ~ header nav{
  display: block;
}
@media (min-width: 1024px){
  #nav_ch:checked ~ header nav{
    display: flex;
  }
}
/* ====== header end ====== */
header.clean-header{
  position: fixed;
  top: 0px;
  left: 0px;
  height: 70px;
  width: 100%;
  background-color: transparent;
  padding-top: 0px;
}
@media (min-width: 1024px){
  header.clean-header{
    height: 78px;
  }
}
header.clean-header .twm-container{
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: 1.125rem;
}
@media (min-width: 1024px){
  header.clean-header .twm-container{
    padding-bottom: 1rem;
  }
}
header.clean-header .logo{
  width: 94px;
}
@media (min-width: 1024px){
  header.clean-header .logo{
    width: 128px;
  }
}
/* @import "./global/swiper.css"; */
.modal {
  backdrop-filter: blur(17.5px);
  -webkit-backdrop-filter: blur(17.5px);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 110;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.45;
}
.modal.is-hidden{
  display: none;
}
/* 文字彈窗 */
.text-modal .modal-main {
    width: calc(100% - 40px);
    max-width: 504px;
    max-height: 70vh;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    padding: 1.5rem 0.5rem 1.5rem 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-radius: 8px;
    border-width: 1px;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    --tw-border-opacity: 0.2;
  }
@media (min-width: 768px){
  .text-modal .modal-main{
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
.text-modal .modal-main {
      padding: 2rem 0.5rem 2rem 2rem
  }
    }
.text-modal .modal-head {
    margin-right: 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;
  }
@media (min-width: 768px){
  .text-modal .modal-head{
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 500;
  }
}
@media (min-width: 1024px){
  .text-modal .modal-head{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
      margin-right: 1.5rem;
  }
}
.text-modal .modal-close{
  position: absolute;
  right: 0px;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.text-modal .modal-close:hover{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}
.text-modal .modal-content {
    max-height: 100%;
    overflow: auto;
    padding-right: 1rem;
  }
@media (min-width: 1024px) {
.text-modal .modal-content {
      padding-right: 1.5rem
  }
    }
.text-modal .modal-content{
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  --tw-text-opacity: 1;
  color: rgb(213 214 215 / var(--tw-text-opacity, 1));
}
.text-modal .modal-content > *:not(:last-child){
  margin-bottom: 1.25rem;
}
@media (min-width: 768px){
  .text-modal .modal-content > *:not(:last-child){
    margin-bottom: 1.5rem;
  }
}
.text-modal .modal-content::-webkit-scrollbar{
  width: 6px;
}
.text-modal .modal-content::-webkit-scrollbar-thumb{
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(121 123 125 / var(--tw-bg-opacity, 1));
}
.text-modal .modal-content::-webkit-scrollbar-track{
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(92 93 95 / var(--tw-bg-opacity, 1));
}
.text-modal .modal-content .input-group {
      padding-left: 1px;
      padding-bottom: 1px;
    }
.text-modal .modal-bottom{
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
}
.text-modal .modal-bottom a{
  flex: 1 1 0%;
}
.text-modal .modal-bottom{

    margin-right: 1rem;
}
@media (min-width: 1024px) {
.text-modal .modal-bottom {
      margin-right: 1.5rem
  }
    }
.text-modal.success-modal .modal-main {
      background-image: url("../images/bg-success.png");
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
    }
.text-modal.fail-modal .modal-main {
      background-image: url("../images/bg-fail.png");
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
    }
.text-modal ul{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.text-modal ul li {
      color: rgb(255 255 255 / 0.6);
      display: flex;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      text-align: justify;
      font-size: 1.125rem;
      line-height: 1.5;
      letter-spacing: 0.08em;
      font-weight: 400;
    }
.text-modal ul li::before {
        content: "";
        flex: 0 0 auto;
        margin-right: 0.5rem;
        margin-top: 0.5rem;
        display: inline-block;
        height: 0.25rem;
        width: 0.25rem;
        border-radius: 20px;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        opacity: 0.6;
      }
.text-modal .p-group-title{
  margin-bottom: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* 蓋板圖片彈窗 */
.image-modal .modal-main {
    width: calc(100% - 40px);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-radius: 8px;
  }
.image-modal .modal-head{
  display: flex;
  justify-content: flex-end;
}
.image-modal .modal-image{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 20px;
}
.image-modal .modal-image img{
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
/* 輪播彈窗 */
.slide-modal .modal-main {
    width: calc(100% - 40px);
    max-width: 864px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow: hidden;
    border-radius: 8px;
    border-width: 1px;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    --tw-border-opacity: 0.2;
    padding: 1.5rem;
  }
@media (min-width: 768px){
  .slide-modal .modal-main{
    gap: 2rem;
    padding: 2rem;
  }
}
.slide-modal .modal-main h3{
  margin-top: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.slide-modal .modal-head{
  position: relative;
  display: flex;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 500;
}
@media (min-width: 768px){
  .slide-modal .modal-head{
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 500;
  }
}
.slide-modal .modal-close{
  position: absolute;
  right: 0px;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.slide-modal .modal-close:hover{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}
.slide-modal .swiper-box{
  position: relative;
}
.slide-modal .swiper{
  overflow: visible;
}
@media (min-width: 768px){
  .slide-modal .swiper{
    overflow: hidden;
  }
}
.slide-modal .swiper-controls{
  margin-top: 0px;
}
@media (min-width: 768px){
  .slide-modal .swiper-controls .swiper-nav{
    display: flex;
  }
.slide-modal .swiper-controls .swiper-btn-prev,
    .slide-modal .swiper-controls .swiper-btn-next {
        top: calc((100% - 28px) / 2 - 20px)
    }
}
.slide-modal .swiper-controls .swiper-btn-prev,
    .slide-modal .swiper-controls .swiper-btn-next{
  z-index: 2;
}
@media (min-width: 768px){
  .slide-modal .swiper-controls .swiper-btn-prev,
    .slide-modal .swiper-controls .swiper-btn-next{
    position: absolute;
  }
}
.slide-modal .swiper-controls .swiper-btn-prev.swiper-button-disabled, .slide-modal .swiper-controls .swiper-btn-next.swiper-button-disabled{
  display: none;
}
.slide-modal .swiper-controls .swiper-btn-prev {
      left: -20px;
    }
.slide-modal .swiper-controls .swiper-btn-next {
      right: -20px;
    }
.form-modal .modal-main, .iframe-modal .modal-main {
    width: calc(100% - 40px);
    max-width: 864px;
    max-height: 70vh;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    padding: 1.5rem 0.5rem 1.5rem 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-radius: 8px;
    border-width: 1px;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    --tw-border-opacity: 0.2;
  }
@media (min-width: 768px){
  .form-modal .modal-main, .iframe-modal .modal-main{
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
.form-modal .modal-main, .iframe-modal .modal-main {
      padding: 2rem 0.5rem 2rem 2rem
  }
    }
.form-modal .modal-head, .iframe-modal .modal-head {
    margin-right: 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;
  }
@media (min-width: 768px){
  .form-modal .modal-head, .iframe-modal .modal-head{
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 500;
  }
}
@media (min-width: 1024px){
  .form-modal .modal-head, .iframe-modal .modal-head{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
      margin-right: 1.5rem;
  }
}
.form-modal .modal-close, .iframe-modal .modal-close{
  position: absolute;
  right: 0px;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.form-modal .modal-close:hover, .iframe-modal .modal-close:hover{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}
.form-modal .modal-content, .iframe-modal .modal-content {
    max-height: 100%;
    overflow: auto;
    padding-right: 1rem;
    padding-left: 1px;
    padding-bottom: 0.25rem;
  }
@media (min-width: 1024px) {
.form-modal .modal-content, .iframe-modal .modal-content {
      padding-right: 1.5rem
  }
    }
.form-modal .modal-content, .iframe-modal .modal-content{
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  --tw-text-opacity: 1;
  color: rgb(213 214 215 / var(--tw-text-opacity, 1));
}
.form-modal .modal-content > *:not(:last-child), .iframe-modal .modal-content > *:not(:last-child){
  margin-bottom: 1.25rem;
}
@media (min-width: 768px){
  .form-modal .modal-content > *:not(:last-child), .iframe-modal .modal-content > *:not(:last-child){
    margin-bottom: 1.5rem;
  }
}
.form-modal .modal-content::-webkit-scrollbar, .iframe-modal .modal-content::-webkit-scrollbar{
  width: 6px;
}
.form-modal .modal-content::-webkit-scrollbar-thumb, .iframe-modal .modal-content::-webkit-scrollbar-thumb{
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(121 123 125 / var(--tw-bg-opacity, 1));
}
.form-modal .modal-content::-webkit-scrollbar-track, .iframe-modal .modal-content::-webkit-scrollbar-track{
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(92 93 95 / var(--tw-bg-opacity, 1));
}
.form-modal .modal-bottom, .iframe-modal .modal-bottom{
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
}
.form-modal .modal-bottom a, .iframe-modal .modal-bottom a{
  flex: 1 1 0%;
}
.form-modal .modal-bottom, .iframe-modal .modal-bottom{

    margin-right: 1rem;
}
@media (min-width: 1024px) {
.form-modal .modal-bottom, .iframe-modal .modal-bottom {
      margin-right: 1.5rem
  }
    }
.modal.iframe-modal .modal-main {
    height: 100vh;
    height: 100dvh;
    max-height: 100%;
    max-width: 900px;
  }
.modal.iframe-modal .modal-content{
  flex: 1 1 0%;
}
.modal.iframe-modal iframe{
  height: 100%;
  width: 100%;
}
.modal.iframe-modal .modal-bottom{
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
}
@media (min-width: 768px){
  .modal.iframe-modal .modal-bottom{
    flex-direction: row;
  }
}
@media (min-width: 1024px){
  .modal.iframe-modal .modal-bottom{
    gap: 1.25rem;
  }
}
.modal.status-modal {
  text-align: center;
}
.modal.status-modal .status-img {
    width: 60px;
    height: 60px;
    top: -48px;
    position: absolute;
  }
@media (min-width: 768px) {
    .modal.status-modal .status-img {
      width: 84px;
      height: 84px;
      top: -66px;
    }
  }
.modal.status-modal .status-title{
  margin-top: 0.5rem;
  margin-bottom: 0.75rem !important;
  font-size: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px){
  .modal.status-modal .status-title{
    margin-top: 1rem;
    margin-bottom: 1rem !important;
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 500;
  }
}
.term-modal .modal-main {
    width: calc(100% - 40px);
    max-width: 864px;
    height: 70vh;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-radius: 8px;
    border-width: 1px;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    --tw-border-opacity: 0.2;
    padding: 1.5rem;
  }
@media (min-width: 768px){
  .term-modal .modal-main{
    gap: 2rem;
  }
}
@media (min-width: 1024px){
  .term-modal .modal-main{
    padding: 2rem;
  }
}
.term-modal .modal-head{
  position: relative;
  display: flex;
  justify-content: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
}
@media (min-width: 768px){
  .term-modal .modal-head{
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 500;
  }
}
@media (min-width: 1024px){
  .term-modal .modal-head{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
.term-modal .modal-close{
  position: absolute;
  right: 0px;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(171 173 175 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.term-modal .modal-close:hover{
  --tw-text-opacity: 1;
  color: rgb(255 103 0 / var(--tw-text-opacity, 1));
}
.term-modal .modal-bottom{
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
}
.term-modal .modal-bottom a{
  flex: 1 1 0%;
}
.term-modal .modal-content{
  min-height: 0px;
  flex: 1 1 0%;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  --tw-text-opacity: 1;
  color: rgb(213 214 215 / var(--tw-text-opacity, 1));
}
.term-modal .reading-box{
  border-radius: 8px;
  border-width: 1px;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.1;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1rem;
  padding-right: 0.5rem;
}
.term-modal .scroll-inner{
  height: 100%;
  overflow: auto;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.term-modal .scroll-inner > *:not(:last-child){
  margin-bottom: 1.25rem;
}
@media (min-width: 768px){
  .term-modal .scroll-inner > *:not(:last-child){
    margin-bottom: 1.5rem;
  }
}
.term-modal .scroll-inner::-webkit-scrollbar{
  width: 6px;
}
.term-modal .scroll-inner::-webkit-scrollbar-thumb{
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(121 123 125 / var(--tw-bg-opacity, 1));
}
.term-modal .scroll-inner::-webkit-scrollbar-track{
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(92 93 95 / var(--tw-bg-opacity, 1));
}
/* @import "./global/pagination.css"; */
/* @import "./global/breadcrumb.css"; */
/* @import "./global/cards.css"; */
/* @import "./global/accordion.css"; */
#page-loading{
  position: fixed;
  top: 0px;
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;
  /* background: #0b0c18; */
  background: rgba(0,0,0,.6);
  z-index: 200;
  font-family: 'Noto Sans TC', 'system-ui', '-apple-system', 'Segoe UI',
    'Roboto', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', 'Arial',
    'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
}
#page-loading .loading-main{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.spinner{
  position: relative;
  height: 3rem;
  width: 3rem;
}
.spinner-inner{
  position: absolute;
  top: 0px;
  left: 0px;
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
.spinner-inner{
  animation: spin 1s linear infinite;
}
.section-loading{
  display: flex;
  height: 100%;
  min-height: 50vh;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.progress-top{
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.progress-steps{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.progress-steps span{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}
.progress-steps .current-step{
  opacity: 1;
}
.progress-bar {
  height: 3px;
  position: relative;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(121 123 125 / var(--tw-bg-opacity, 1));
}
.progress-bar .progress {
    height: 3px;
    position: absolute;
    top: 0px;
    left: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 103 0 / var(--tw-bg-opacity, 1));
  }
/* @import "./global/step-bar.css"; */
/* @import "./global/file-upload.css"; */
/* ====== EGB 全局樣式 ====== */
body,
html {
  background-color: #121212;
  color: #ffffff;
  position: relative;
  scroll-behavior: smooth;
  /* overflow-x: hidden; */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
html.prevent-scroll,
html.lightbox-opened {
  overflow: hidden;
  overscroll-behavior-y: none;
}
main{
  flex-grow: 1;
}
:root {
  --index-note-height: 32px;
  --desktop-model: 38px;
  --header-height: 64px;
}
.twm-container{
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 768px){
  .twm-container{
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1024px){
  .twm-container{
    margin-left: auto;
    margin-right: auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 1280px){
  .twm-container{
    padding-left: 0px;
    padding-right: 0px;
    max-width: 1200px;
  }
}
@media (min-width: 1440px) {
.twm-container {
    max-width: 1320px
}
  }
@media (min-width: 1920px) {
.twm-container {
    max-width: 1680px
}
  }
@media (min-width: 1280px) {
.twm-container-small {
    max-width: 1240px;
}
  }
@media (min-width: 1440px) {
.twm-container-small {
    max-width: 1360px;
}
  }
.twm-container-small{
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 768px){
  .twm-container-small{
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1024px){
  .twm-container-small{
    margin-left: auto;
    margin-right: auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 1280px){
  .twm-container-small{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
.twm-container-small.eng-title {
    max-width: 1240px;
}
}
@media (min-width: 1440px) {
.twm-container-small.eng-title {
    max-width: 1360px;
}
  }
.twm-container-small.eng-title{
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 768px){
  .twm-container-small.eng-title{
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1024px){
  .twm-container-small.eng-title{
    margin-left: auto;
    margin-right: auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (min-width: 1280px){
  .twm-container-small.eng-title{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.blur-bg {
  background: rgba(42, 42, 42, 0.6);
  backdrop-filter: blur(70px);
}
h2.sec-title{
  margin-bottom: 1.5rem;
  font-size: 2rem;
}
@media (min-width: 768px){
  h2.sec-title{
    margin-bottom: 2rem;
    font-size: 2.5rem;
  }
}
.eng-title {
  color: #c9c9c9;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 0.5rem;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.1;
  opacity: 0.1;
}
@media (min-width: 768px){
  .eng-title{
    font-size: 4.5rem;
  }
}
.eng-title .eng-text{
  position: relative;
  left: 50%;
  display: inline-block;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.eng-title .eng-text.at-left{
  left: 0px;
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.type-a-container{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
@media (min-width: 1280px){
  .type-a-container{
    max-width: 1200px;
  }
}
@media (min-width: 1920px){
  .type-a-container{
    max-width: 1558px;
  }
}
@media (min-width: 1440px) {
.type-a-container {
    max-width: 1320px
}
  }
/* .cus-scrollbar::-webkit-scrollbar {
  width: 8px;
  @apply bg-gray-700 rounded-5;
}

.cus-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-gray-600 rounded-5;
} */
.clean-page{
  height: 100dvh;
  width: 100%;
}
.clean-page main{
  height: 100%;
}
.clean-page .page-title{
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
}
@media (min-width: 1024px){
  .clean-page .page-title{
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 500;
  }
}
.clean-page .page-content{
  margin-top: 0.75rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 0.6;
}
@media (min-width: 1024px){
  .clean-page .page-content{
    margin-top: 1rem;
  }
}
.clean-page .page-status{
  margin-bottom: 2.5rem;
}
.clean-page .page-status img{
  height: 5rem;
  width: 5rem;
}
@media (min-width: 1024px){
  .clean-page .page-status img{
    height: 130px;
    width: 130px;
  }
}
li::marker {
  font-family:
    "Noto Sans TC", "system-ui", "-apple-system", "Segoe UI", "Roboto",
    "Helvetica Neue", "Noto Sans", "Liberation Sans", "Arial", "sans-serif",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.calc-height {
  max-height: calc(100dvh - var(--header-height));
}
@media lg {
.calc-height {
    max-height: calc(100dvh - var(--desktop-model) - var(--header-height))
}
  }

/*# sourceMappingURL=default.css.map */