@font-face {
  font-family: "M XiangHe Hei TC";
  src: url("/resources/font/Monotype_Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "M XiangHe Hei TC";
  src: url("/resources/font/Monotype_Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --font-xianghe-hei: "M XiangHe Hei TC", sans-serif;
  --col-white: #ffff;
  --col-text-gray: #787776;

  --ui-border: 0.26cqw solid var(--col-white);
  --ui-bg: rgba(255, 255, 255, 0.3);

  --col-shadow: rgb(47 59 60 / 75%);

  --col-gradient-primary: linear-gradient(90deg, rgba(33, 222, 190, 0.82) 0%, #66ccff 100%);
  --bg-gradient: linear-gradient(162deg, #8fc2e5 0%, #dfeef8 32%, #c0ddf1 70%, #8fc2e5 100%);
  --bg-feedback: linear-gradient(162deg, #8fc2e5 0%, #ffff 22%, #bfddf2 60%, #8fc2e5 100%);
}

.img {
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}
.page-content {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  padding: 13.5cqw 0 15cqw;
}
.page-head {
  width: 100%;
  display: grid;
  align-items: start;
  padding: 28cqw 0 0 9.5cqw;
}
[hidden] {
  display: none !important;
}
/* #region - DEFAULT BUTTON - */
.btn {
  height: 12.82cqw;
  background: var(--ui-bg);
  border: var(--ui-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn .btn__text {
  color: white;
  font-family: var(--font-xianghe-hei);
  font-size: 7.44cqw;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-indent: 0.13em;
  text-shadow: 0.26cqw 0.26cqw 1cqw var(--col-shadow);
  transform: scaleX(0.8) translateY(-0.06em);
  transform-origin: center;
}


.btn--sm {
  aspect-ratio: 150/50;
}
.btn--lg {
  aspect-ratio: 277/50;
}
/* #endregion */

/* #region - ICON BUTTON - */
.btn--icon {
  height: 10.26cqw;
  aspect-ratio: 1;
  .btn__image {
    width: 6.5cqw;
  }
}
.btn--to-top {
  height: 6.5cqw;
  position: sticky;
  right: 1cqw;
  bottom: 15cqw;
  align-self: flex-end;
  z-index: 1;
}
/* #endregion */

/* #region - GRADIENT BACKGROUND - */
.bg-scroll--gradient {
  background: var(--bg-gradient);
  .bg-fill {
    background: transparent;
  }
  .bg-bottom {
    aspect-ratio: 1171/609;
    background-image: url(/resources/bg-bottom.webp);
  }
}
/* #endregion */

/* #region - SPLASH - */
.splash {
  background: var(--bg-gradient);
}
.sp__bar-bg {
  background: var(--ui-bg);
}
.sp__bar-fill {
  background: var(--col-gradient-primary);
}
.sp__pct {
  font-family: var(--font-xianghe-hei);
  font-weight: 500;
  font-size: 3cqw;
  letter-spacing: 0.5em;
  color: var(--col-text-gray)
}
/* #endregion */


/* #region - P00_HOME - */
.home {
  min-height: max(100%, calc(100cqw / (var(--base-ratio))));
}
.home .bg-layer {
  background: url(/resources/bg_home-main.webp) no-repeat center/cover;
}
.home .page-content {
  &::before, &::after {
    content: "";
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    pointer-events: none;
  }

  &::before {
    top: 4.5%;
    width: 42.14cqw;
    aspect-ratio: 439/114;
    background: url(/resources/home_logo.webp) no-repeat center /100%100%;
  }
  &::after {
    top: 13.5%;
    width: 100cqw;
    aspect-ratio: 1171/1389;
    background: url(/resources/home_title.webp) no-repeat center /100%100%;
  }
}
.home__start-btn {
  position: absolute;
  top: 85.5%;
}
/* #endregion */

/* #region - P01_INTRO - */
.intro .bg-scroll {
  .bg-top {
    aspect-ratio: 1171 / 1231;
    background-image: url(/resources/bg_intro-top.webp);
  }
  .bg-fill {
    background: url(/resources/bg_intro-middle.webp) no-repeat center/100%100%;
  }
  .bg-bottom {
    aspect-ratio: 1171/1306;
    background-image: url(/resources/bg_intro-bottom.webp);
  }
}
.intro .page-content {
  gap: 11cqw;
}
.intro__content {
  width: 76.15cqw;
}
/* #endregion */

/* #region - P02_MENU - */
.menu .bg-top {
  aspect-ratio: 1171 / 660;
  background-image: url(/resources/bg_menu-top.webp);
}
.menu .page-content {
  width: 80%;
  align-items: stretch;
}

.menu__toggle-group {
  display: grid;
  padding: 0 3.5cqw;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(50%);
    width: 100%;
    height: 0.52cqw;
    background-color: var(--col-white);
    pointer-events: none;
    box-shadow: 0.26cqw -0.52cqw 1cqw var(--col-shadow);
  }
}
.menu .btn--theme {
  height: 10.26cqw;
  background: var(--ui-bg);
  .btn__text {
    font-size: 4.87cqw;
  }
}
.btn--theme.is-active {
  background: var(--col-gradient-primary);
  box-shadow: 0.26cqw -0.26cqw 1.5cqw var(--col-shadow);
}
.menu__buttons {
  display: flex;
  flex-direction: column;
  gap: 2.55cqw;
  padding: 4.1cqw 0 0;
}
.btn--menu {
  height: auto;
  min-height: 15.4cqw;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
  padding: 2.2cqw;
}
.btn--menu .btn__text {
  font-weight: 400;
  color: var(--col-text-gray);
  text-shadow: none;
  letter-spacing: -0.025em;
  text-indent: -0.025em;
}
.btn--menu .text--zh {
  font-size: 5cqw;
  line-height: 1.18;
}
.btn--menu .text--en {
  font-size: 2.5cqw;
  line-height: 1.3;
}
/* #endregion */

/* #region - P03_EXHIBIT - */
.exhibit .bg-top {
  aspect-ratio: 1171 / 743;
  background-image: url(/resources/bg_exhibit-top.webp);
}
.poster-area {
  width: 84%;
  margin-top: 0.5cqw;
}

.poster-area .progress-bar {

  background-color: var(--ui-bg);
  border-radius: 0cqw;

  &::after {
    background: var(--col-gradient-primary);
  }
}

.exhibit__btn-group {
  margin: 8.5cqw 0 3cqw;
  .btn__image {
    width: 8cqw;
    aspect-ratio: 1;
    transform: translateX(-3cqw);
  }
}
/* #endregion */

/* #region - P04_FEEDBACK - */
.feedback .bg-scroll {
  background: var(--bg-feedback);
  .bg-top {
    aspect-ratio: 1171 / 705;
    background-image: url(/resources/bg_feedback-top.webp);
  }
  .bg-bottom {
    aspect-ratio: auto;
    height: 50%;
    background-size: 100%100%;
  }
}
.feedback .page-content {
  width: 80%;
  color: var(--col-text-gray);
  font-family: var(--font-xianghe-hei);
}
.feedback__ttl {
  font-size: 7.7cqw;
  font-weight: 500;
  transform: scaleX(0.8);
  transform-origin: left center;
  align-self: flex-start;
  margin-top: 2cqw;
}
.step {
  padding: 0;
  width: 100%;
  gap: 3cqw;
}
form {
  gap: 2cqw;
}
.feedback__btn-group {
  width: 90%;
  display: flex;
  gap: 2cqw;
  margin-top: 8cqw;
  .btn {
    flex: 1;
  }
}

.form-field {
  width: 100%;
  color: inherit;
  font-family: inherit;
  label {
    font-weight: 500;
    font-size: 5cqw;
    text-align: center;
    transform: scaleX(0.8);
    transform-origin: center;
  }
  .input {
    font-size: 4.5cqw;
    color: inherit;
    font-family: inherit;
  }
}

.step-01 .form-field {
  height: 15.5cqw;
  display: grid;
  grid-template-columns: 1fr 3.2fr;
  background: var(--ui-bg);
  border: var(--ui-border);
  align-items: center;
  label {
    border-right: var(--ui-border);
    letter-spacing: 0.5em;
  }
  .input {
    background: transparent;
    border: none;
    padding: 0 1cqw;
    font-size: 4.5cqw;
  }
}

.step-02 {
  label {
    align-self: flex-start;
    letter-spacing: 0.25em;
  }
  .input {
    background: var(--ui-bg);
    border: var(--ui-border);
  }
  textarea {
    height: auto !important;
    min-height: 67.5cqw;
    padding: 4cqw;
    line-height: 1.5;
    resize: none;
  }
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--col-text-gray) !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
}
/* #endregion */