.noto-sans-regular {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
}

.noto-sans-medium {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 500;
}

.noto-sans-semibold {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 600;
}

.noto-sans-bold {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 700;
}

.noto-sans-black {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 900;
}

.noto-serif-regular {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 300;
}

.noto-serif-medium {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 500;
}

.noto-serif-semibold {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 600;
}

.noto-serif-bold, .project__name {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 700;
}

.lora-regular {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.fade {
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}
.fade:hover {
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}

@-webkit-keyframes fadeOutAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 4px);
            transform: translate(0, 4px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 4px);
            transform: translate(0, 4px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
:root {
  --about-pb: 12vmin;
  --about__pic-t: -10vh;
  --about__pic-gap: 16px;
  --about__pic-img-w: 370px;
  --about__pic-img-ratio: 516 / 370;
  --about__pic-img-h: calc(var(--about__pic-img-w) * var(--about__pic-img-ratio));
  --about__pic-w: calc(var(--about__pic-img-w) * 2 + var(--about__pic-gap));
  --about__content-pt: 8vh;
  --about-block-title-t: calc(var(--about__pic-img-h) + var(--about__pic-t) - 17vmin);
  --about-block-title-border-h: 32vmin;
  --brand-pt: 5vmin;
  --brand-pb: 5vmin;
  --brand-row-mt: -13vmin;
  --brand-row-pic-w: 760px;
  --brand-row-pic-ratio: 478 / 760;
  --brand-row-pic-h: calc(var(--brand-row-pic-w) * var(--brand-row-pic-ratio));
  --brand-row-content-w: calc(100% - var(--brand-row-pic-w));
  --project-name-mb: 2vmin;
  --project-name-font-size: 30px;
  --project-name-letter-spacing: 0.9vmin;
  --project-name-en-ml: -1.2vmin;
  --project-name-en-letter-spacing: 2px;
  --project-name-shadow-letter-spacing: 4px;
}

.page-about .img-bg-box {
  background-image: url(../images/about/banner.webp);
}

.about {
  padding-bottom: var(--about-pb);
}
.about .block-title-lg {
  position: absolute;
  right: 0;
  top: var(--about-block-title-t);
}
.about .block-title-lg::before {
  height: var(--about-block-title-border-h);
}
.about .slogan-2 {
  display: none;
}

.about__pic {
  position: absolute;
  top: var(--about__pic-t);
  width: var(--about__pic-w);
}

.about__content {
  padding-top: calc(var(--about__pic-img-h) + var(--about__pic-t) + var(--about__content-pt));
}

.brand {
  padding-top: var(--brand-pt);
  padding-bottom: var(--brand-pb);
  background-image: url(../images/others/bg-blue.webp);
  background-size: cover;
  background-position: left top;
  color: #fff;
}
.brand .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin-bottom: var(--brand-pb);
}
.brand .row .row__content {
  width: var(--brand-row-content-w);
}
.brand .row .row__pic {
  margin-top: var(--brand-row-mt);
  width: var(--brand-row-pic-w);
  height: var(--brand-row-pic-h);
}

.project__name {
  position: relative;
  margin-bottom: var(--project-name-mb);
}
.project__name .name {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: var(--project-name-font-size);
  letter-spacing: var(--project-name-letter-spacing);
}
.project__name .name-shadow {
  font-size: calc(var(--project-name-font-size) * 1.5);
  letter-spacing: var(--project-name-shadow-letter-spacing);
  color: rgba(0, 0, 0, 0.1);
}

@media (max-width: 1400px) {
  :root {
    --brand-row-pic-w: 58vw;
    --about__pic-img-w: 30vw;
  }
}
@media screen and (max-width: 767px), screen and (orientation: portrait) {
  :root {
    --about-pb: 0;
    --about__pic-img-w: 49%;
    --about__pic-t: initial;
    --wrapper-container-w: 100%;
    --brand-pt: 0;
    --brand-pb: 0;
    --brand-row-mt: 0;
    --brand-row-content-w: 100%;
    --brand-row-pic-w: 100vw;
    --brand-row-pic-ratio: 330 / 375;
    --brand-row-pic-h: calc(var(--brand-row-pic-w) * var(--brand-row-pic-ratio));
  }
  .about__pic {
    position: relative;
  }
  .brand .row {
    display: block;
  }
  .brand .row .row__pic {
    width: 100%;
  }
  .brand .row .row__content {
    margin-top: var(--paragraph-p-pb);
  }
  .project__name {
    display: none;
  }
  .about .slogan-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: var(--paragraph-p-pb) 0;
  }
}
@media (orientation: landscape) and (max-height: 550px) {
  :root {
    --project-name-font-size: 24px;
  }
}