:root {
  /* COLOR */
  --color-white: #ffff;
  --color-primary: #dc5b35;
  --color-secondary: #1352bc;
  --color-secondary-light: #dbe5f8;

  /* FONT */
  font-family: "Noto Sans TC", sans-serif;
  /* 20px */
  --font-size-title-xl: 5cqw;
  /* 18px */
  --font-size-title-lg: 4.62cqw;
  /* 15px */
  --font-size-title-md: 3.85cqw;
  /* 12px */
  --font-size-title-sm: 3.08cqw;
  /* 18px */
  --font-size-text-xl: 4.3cqw;
  /* 15.5px */
  --font-size-text-lg: 3.7cqw;
  /* 14px */
  --font-size-text-md: 3.59cqw;
  /* 12px */
  --font-size-text-sm: 3.08cqw;

  /* RADIUS */
  --radius-control: 2cqw;

  /* editor */
  --filter-editor: invert(11%) sepia(94%) saturate(7199%) hue-rotate(5deg) brightness(105%) contrast(113%);
}
img {
  height: auto;
  padding: 0;
  margin: 0;
  pointer-events: none;
}
.page-head, .page-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* #region - BACKGROUND - */
.bg-scroll {
  background-color: var(--color-secondary);
}
.bg-fill {
  background-image: url(/resources/bg-fill.webp);
}
.bg-bottom {
  background-image: url(/resources/bg.webp);
  background-size: 100%;
}
/* #endregion */

/* #region - HEADER - */
.page-head {
  padding: 14cqw 8.8cqw 4.2cqw;
  gap: 2.2cqw;
}
.logo {
  width: 37.52cqw;
}
.btn-home {
  background-color: transparent;
}
/* #endregion */

/* #region - BUTTON_BACK - */
.btn-back {
  position: relative;
  width: 7.95cqw;
  aspect-ratio: 1;
  flex-shrink: 0;
  padding: 0;

  color: var(--color-white);
  background: transparent;
  border: 0.26cqw solid currentColor;
  border-radius: 1.03cqw;
  align-self: flex-start;
  z-index: 100;
}

/* 箭頭的水平線 */
.btn-back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 3.21cqw;
  height: 0.26cqw;

  background: currentColor;
  transform: translate(-50%, -50%);
}

/* 箭頭左側折線 */
.btn-back::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% - 1.6cqw);

  width: 1.81cqw;
  height: 1.81cqw;

  border-left: 0.26cqw solid currentColor;
  border-bottom: 0.26cqw solid currentColor;

  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}
.btn-back:active {
  color: var(--color-primary);
}
/* #endregion */

/* #region - BUTTON_PRIMARY - */
.btn-primary {
  height: 9.23cqw;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-control);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  padding-left: 7.5cqw;
  font-family: inherit;
  font-size: var(--font-size-text-xl);
  font-weight: 300;
  text-align: center;
  letter-spacing: 2.5cqw;
  text-indent: 2.5cqw;
  span {
    transform: translateY(-0.3cqw);
  }
}
.btn-primary::before,
.btn-primary::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2.5cqw;
  aspect-ratio: 1;
  border-top: 0.35cqw solid currentColor;
  border-right: 0.35cqw solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn-primary::before {
  left: 4cqw;
}
.btn-primary::after {
  left: 6.8cqw;
}
.btn-primary.btn--sm {
  aspect-ratio: 171/36;
}

.btn-primary.btn--md {
  aspect-ratio: 189/36;
}

.btn-primary.btn--lg {
  aspect-ratio: 220/36;
}

/* #endregion */

/* #region - TEXT - */
.body-text, .body-ttl {
  color: var(--color-white);
  font-family: inherit;
}
.body-ttl {
  font-weight: 600;
  font-size: var(--font-size-title-lg);
}
.body-ttl--sub {
  font-size: var(--font-size-title-md);
}
.rule {
  width: 100%;
  height: 0.26cqw;
  background-color: var(--color-white);
}
.body-text {
  font-weight: 400;
  font-size: var(--font-size-text-md);
}

/* #endregion */

/* #region - SPLASH - */
.splash {
  background-color: var(--color-secondary);
}
.sp__bar-bg {
  background-color: var(--color-white);
  .sp__bar-fill {
    background-color: var(--color-primary);
  }
}
.sp__pct {
  color: var(--color-white);
}
/* #endregion */

/* #region - P00_HOME__CONTENT - */
.bg--home {
  background: url(/resources/bg-home.webp) repeat-y;
  background-size: 100%;
}
.page-content--home {
  padding-top: 12.5cqw;
  gap: 12.5cqw;
}
.home__logos {
  width: 87.09cqw;
  transform: translateX(-1.6cqw);
}
.home__hero {
  width: 88.63cqw;
  transform: translateX(1.6cqw);
}
.home__time {
  width: 56.75cqw;
  transform: translateX(-16.3cqw);
  padding-top: 2.1cqw;
}
.home__enter-btn {
  margin-top: 3.8cqw;
}
/* #endregion */

/* #region - P01_INTRO__CONTENT - */
.page-content--intro {
  padding: 4.2cqw 9cqw 0;
  .body-ttl, .body-text {
    text-align: left;
    align-self: flex-start;
  }
  .body-ttl {
    letter-spacing: 0.19cqw;
  }
  .body-ttl--sub {
    letter-spacing: 0.15cqw;
    padding-top: 1.3cqw;
  }
  .rule {
    margin: 3.5cqw 0 3.1cqw;
  }
  .body-text {
    line-height: 1.7;
    letter-spacing: 0.3cqw;
    padding-bottom: 1.7cqw;
  }
}
.intro__menu-btn {
  margin-top: 31.5cqw;
  letter-spacing: 1.7cqw;
  text-indent: 1.7cqw;
}
/* #endregion */

/* #region - P02_MENU__CONTENT - */
.menu__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.1cqw;
}
/* #endregion */
/* #region - P02_MENU__BUTTON - */
.btn-menu {
  position: relative;
  overflow: hidden;

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

  width: 70.51cqw;
  aspect-ratio: 275 / 60;
  padding: 0 0 0.5cqw 4cqw;

  color: var(--color-white);
  background: transparent;
}

/* 底色 */
.btn-menu::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;

  background-image: var(--btn-menu-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  pointer-events: none;
}
/* 左側白色漸層裝飾 */
.btn-menu::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;

  width: 4.62cqw;

  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.55) 55%,
      rgba(255, 255, 255, 0) 100%);

  pointer-events: none;
}

/* 單數：藍色 */
.menu__buttons>.btn-menu:nth-child(odd) {
  --btn-menu-bg: url("/resources/btn-menu-odd.webp");
  &::before {
    mix-blend-mode: color-dodge;
  }
}

/* 雙數：橘色 */
.menu__buttons>.btn-menu:nth-child(even) {
  --btn-menu-bg: url("/resources/btn-menu-even.webp");
}

/* 文字與橫線放在偽元素上方 */
.btn-menu>* {
  position: relative;
  z-index: 2;
}
.btn-menu__ttl, .btn-menu__company {
  font-family: inherit;
  font-weight: 300;
  text-align: center;

}

.btn-menu__ttl {

  font-size: var(--font-size-text-lg);
  letter-spacing: 0.35cqw;
  text-indent: -2cqw;
  sup {
    font-size: 0.5em;
    vertical-align: super;
    line-height: 0;
    position: relative;
  }
}
.btn-menu__rule {
  width: 60.51cqw;
  height: 0.26cqw;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.85) 4%,
      rgba(255, 255, 255, 0.85) 96%,
      transparent 100%);
  margin: 2cqw 0 0.6cqw;
}

.btn-menu__company {
  font-size: var(--font-size-text-sm);
  letter-spacing: 0.7cqw;
}

/* #endregion */

/* #region - P03_EXHIBIT__BACKGROUND - */
.bg-scroll--exhibit, .bg-fill--exhibit {
  background: var(--color-white);
}
.bg-top--exhibit {
  aspect-ratio: 1170/623;
  background-image: url(/resources/bg-poster-top.webp);
}
.bg-bottom--exhibit {
  aspect-ratio: 1170/1107;
  background-image: url(/resources/bg-poster-bottom.webp);
}
.bg-scroll--exhibit {
  padding-bottom: 27.52cqw;
}
/* #endregion */
/* #region - P03_EXHIBIT__CONTENT - */

.page-head--exhibit {
  padding-bottom: 4.8cqw;
  .btn-back {
    color: var(--color-secondary);
  }
}
.poster-area {
  width: 100%;
}
.poster-area .progress-bar {
  background-color: var(--color-secondary-light);
  margin-top: -18cqw;
  &::after {
    background: var(--color-secondary);
  }
}
.exhibit__btn-group {
  width: 100cqw;
  height: 27.52cqw;
  align-items: center;
  justify-content: center;
  background: url(/resources/btn-container.webp) no-repeat;
  background-size: cover;
  .btn-share {
    padding-left: 0;
  }
}

.exhibit__btn-group.show-share {
  .btn-share {
    padding-left: 7.5cqw;
  }
}
/* #endregion */

/* #region - P04_FEEDBACK__CONTENT - */
.page-head--feedback {
  padding-top: 18cqw;
  padding-bottom: 3cqw;
  gap: 0cqw;
  .btn-back {
    margin-top: -1cqw;
  }
}
.step {
  padding: 0;
}
.feedback__form {
  background: url(/resources/form.webp) no-repeat;
  background-size: 100% 100%;
  width: 82.14cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3cqw;
  padding: 3.8cqw 8.5cqw;

}
.feedback__form .body-ttl {
  font-weight: 500;
  font-size: var(--font-size-title-xl);
  letter-spacing: 0.5cqw;
  margin-bottom: 2.5cqw;
}
.fb__btn-group {
  margin-top: 7.8cqw;
  margin-bottom: 19.5cqw;
  display: flex;
  gap: 3cqw;
}
/* #endregion */
/* #region - P04_FEEDBACK__STEP01 - */
.step-01 {
  gap: 4cqw;
}
.feedback__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  gap: 1cqw;
  .body-ttl {
    color: #aeeaff;
    padding-bottom: 0.5cqw;
    letter-spacing: 0.6cqw;
  }
  .rule {
    width: 60cqw;
  }
  .body-text {
    font-size: var(--font-size-text-sm);
    line-height: 1.41;
    letter-spacing: 0.2cqw;
  }
}
/* #endregion */
/* #region - P04_FEEDBACK__STEP02 - */
.step-02 {
  padding-top: 7cqw;
  padding-bottom: 9.5cqw;
}

.step-02 .feedback__form {
  padding-top: 5.8cqw;
  padding-bottom: 18cqw;
  gap: 10cqw;
  .body-ttl {
    letter-spacing: 5.8cqw;
    text-indent: 5.8cqw;
  }
}
/* #endregion */
/* #region - P04_FEEDBACK__FORM FIELD - */
.form-field {
  align-items: start;
  width: 100%;
  gap: 1cqw;
  font-family: inherit;
  font-weight: 400;
  color: var(--color-white);
  .label {
    padding-left: 1.5cqw;
    font-size: var(--font-size-text-sm);
  }
  .input {
    width: 100%;
    height: 9.23cqw;
    line-height: 1.55;
    padding: 0 5cqw;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-control);
    border: 0.2cqw solid var(--color-white);
    font-size: var(--font-size-text-md);
    color: var(--color-white);
  }
  textarea.input {
    height: 54cqw;
    padding: 5cqw;

    letter-spacing: 0.1cqw;
    &::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
  }
}
.form-field .input:focus {
  border: 0.2cqw solid var(--color-primary);
  caret-color: var(--color-primary);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-white) !important;
}
/* #endregion */
/* #region - P04_FEEDBACK__FORM STATUS - */
.form-status-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 8cqw;
  background: rgba(0, 0, 0, 0.56);
  border-radius: 0;
  z-index: 1000;
}

.form-status-overlay .status-panel {
  position: relative;
  width: 70cqw;
  height: auto;
  min-height: 68cqw;
  padding: 7cqw 5cqw;
  gap: 5cqw;
  justify-content: center;
  background: var(--color-white);
  border: 0;
  border-radius: var(--radius-control);
  box-shadow: 0 4cqw 8cqw rgba(0, 0, 0, 0.25);
  font-family: inherit;
  font-size: var(--font-size-title-lg);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.5cqw;
}

.form-status-overlay #statusMessage {
  margin: 0;
}

.form-status-overlay .loader {
  width: 15cqw;
  height: 15cqw;
  border: 1.6cqw solid var(--color-secondary-light);
  border-top-color: var(--color-primary);
}

.form-status-overlay .icon-success,
.form-status-overlay .icon-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34cqw;
  height: 34cqw;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 20cqw;
  font-weight: 400;
  line-height: 1;
}

.form-status-overlay .icon-success {
  color: var(--color-primary);
}

.form-status-overlay .icon-error {
  color: var(--color-secondary);
}

.form-status-overlay #statusBtn {
  position: relative;
  width: 56.41cqw;
  height: 9.23cqw;
  margin-top: 1cqw;
  padding: 0 7.5cqw 0 10cqw;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-control);
  font-family: inherit;
  font-size: var(--font-size-text-xl);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 1.2cqw;
  text-indent: 1.2cqw;
}

.form-status-overlay #statusBtn::before,
.form-status-overlay #statusBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2.5cqw;
  aspect-ratio: 1;
  border-top: 0.35cqw solid currentColor;
  border-right: 0.35cqw solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.form-status-overlay #statusBtn::before {
  left: 4cqw;
}

.form-status-overlay #statusBtn::after {
  left: 6.8cqw;
}

.form-status-overlay #statusBtn:active {
  transform: translateY(0.2cqw);
  filter: brightness(0.95);
}
/* #endregion */