.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-bold {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 700;
}

.noto-sans-black, .about__block_title {
  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 {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 700;
}

.baskervville {
  font-family: "Baskervville", serif;
  font-weight: 400;
  font-style: normal;
}

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

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

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

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

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

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

:root {
  --about-pic-w: 60vw;
  --about-profile-pl: 84px;
  --about-profile-pr: 5vw;
  --profile-pt: 2.5vw;
  --profile-pl: 9vw;
}

.about {
  padding-top: 2.5vw;
  padding-bottom: 6vw;
}

.about.about-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.about__pic {
  position: relative;
  width: var(--about-pic-w);
  height: calc(var(--about-pic-w) * 922 / 1154);
}

.about__pic img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.about__pic:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
}

.about__pic:before {
  border-color: #FFAD91;
  top: calc(var(--about-profile-pl) / 2);
  right: calc(var(--about-profile-pl) / 2 * -1);
  z-index: -1;
}

.about__pic .vertical-line {
  position: absolute;
  top: calc(var(--about-profile-pl) + 5vw);
  left: 100%;
  height: 1px;
  width: calc(var(--profile-pt) + 20px);
  background-color: #FFAD91;
}

.about__pic .vertical-line::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 100%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FFAD91;
}

.about__profile {
  padding-top: calc(var(--about-profile-pl) + 5vw - 1.5rem);
  padding-left: calc(var(--about-profile-pl) + 8px);
  padding-right: 5vw;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.about__block_title {
  margin-bottom: 1.75rem;
  color: var(--color-primary);
  font-size: 2rem;
}

.about__block_content {
  font-size: 1.25rem;
  line-height: 2;
}

.about__territory img {
  width: 100%;
  height: auto;
}

@media (max-width: 1366px) {
  :root {
    --about-pic-w: 45vw;
    --about-profile-pl: 4vw;
    --about-profile-pr: 4vw;
  }
  .about__pic:before {
    top: calc(var(--about-profile-pl) / 2);
    right: calc(var(--about-profile-pl) / 2 * -1);
  }
  .about__pic .vertical-line {
    top: var(--about-profile-pl);
    width: 3.5vw;
  }
  .about__profile {
    padding-top: calc(var(--about-profile-pl) - 1.5rem);
    padding-left: calc(var(--about-profile-pl) + 1vw);
    padding-right: var(--about-profile-pr);
  }
  .about__block_content {
    line-height: 1.5;
  }
}

@media (max-width: 1024px) {
  :root {
    --about-pic-w: 100vw;
  }
  .about.about-flex {
    padding-top: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .about__pic:before {
    width: 94%;
    right: 3%;
  }
  .about__pic .vertical-line {
    top: 100%;
    left: 6vw;
    height: 3rem;
    width: 1px;
  }
  .about__pic .vertical-line::before {
    top: 100%;
    left: -4px;
  }
  .about__profile {
    padding-top: 5rem;
  }
  .about__block_title {
    margin-bottom: 1rem;
  }
}

@media (max-width: 767px) {
  .about__pic .vertical-line {
    height: 28px;
  }
  .about__block_title {
    margin-bottom: 12px;
    font-size: 18px;
  }
  .about__profile {
    padding-top: 40px;
    padding-left: calc(var(--about-profile-pl));
  }
}