@import "./base.css";

.about .footer-wrapper {
  margin-top: 80px;/* px */
}

.about .image-text-column-col1 {
  width: 45%;
  margin-right: 0;
}
.about .image-text-column-col2 {
  width: 55%;
  padding-bottom: 30%;
}
.about-title {
  max-width: 700px; /* px */
}
.zh.about .sub-title {
  margin-bottom: 56px; /* px */
}

@media screen and (max-width: 1000px) {
  .about-description {
    font-size: 14px; /* px */
  }
}
@media screen and (max-width: 1100px) {
  .about-title {
    max-width: 600px; /* px */
  }
}
@media screen and (max-width: 900px) {
  .about-title {
    max-width: 450px; /* px */
  }
}
@media screen and (max-width: 700px) {
  .about-title {
    max-width: 340px; /* px */
  }
}


.about-image {
  width: 59%;
  height: 163%;
  position: absolute;
  bottom: -30%;
  right: 0; /* px */
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 100% auto;
}

.about-description {
  margin-top: 32px; /* px */
}
.about-clear {
  clear: both;
}

.about-list-grid {
  padding: 0 0 120px 0; /* px */
  position: relative;
  overflow: hidden;
  /* background-size: 100% 1%;
  background-image: url('/static/img/gray.png');
  background-repeat: repeat-y; */
 /* background-position-x: 4%; /* px */
}
.about-image2 {
  margin-top: 40px; /* px */
  width: 100%;
  padding-bottom: 30%; /* px */
  background-size: cover;
  background-position: center;
}
.about-birth-wrapper {
  width: 50%;
}
.about-birth-label, .about-phi-label {
  font-size: 16px; /* px */
  font-weight: 300;
  margin-top: 80px; /* px */
  color: #B3B3B3;
}
.about-birth-title, .about-phi-title {
  font-weight: 500;
  font-size: 24px; /* px */
  margin-top: 8px; /* px */
  color: #201714;
}
.about-birth-subtitle, .about-phi-subtitle {
  font-size: 16px; /* px */
  line-height: 180%;
  margin-top: 24px; /* px */
  color: #444;
  text-align: justify;
}
.en .about-birth-subtitle, .en .about-phi-subtitle {
  text-align: left;
  font-weight: 400;
}
.about-phi-title-wrapper {
  width: 48%;
}
.two-column .about-phi-subtitle {
  width: 50%;
  margin-top: 90px; /* px */
  float: right;
}
.about-award-wrapper {
  width: 100%;
}
.about-award-title {
  text-align: center;
  color: #201714;
  margin: 68px auto; /* px */
}
.about-award-list {
  /* overflow: hidden; */
}
.about-award-list::before, .about-award-list::after {
  content: "";
  display: block;
  clear: both;
}
.about-award {
  float: left;
  border-top: solid 1px #eeeded;
  height: 136px; /* px */
  width: 31%;
  margin-left: 2%;
}
.en .about-award {
  height: 136px; /* px */
}
.about-award-source {
  color: #B3B3B3;
  font-size: 16px; /* px */
  margin-top: 16px; /* px */
  height: 24px; /* px */
}
.about-award-content {
  color: #444;
  font-size: 20px; /* px */
  margin-top: 16px; /* px */
  font-weight: 400;
}

@media screen and (min-width: 1600px) {
  .about-award-source {
    font-size: 18px; /* px */
  }
  .about-award-content {
    font-size: 20px; /* px */
  }
}
@media screen and (max-width: 1600px) {
  .about-award-source {
    font-size: 16px; /* px */
  }
  .about-award-content {
    font-size: 18px; /* px */
  }
}

@media screen and (max-width: 1440px) {
  .about-award {
    height: 120px; /* px */
  }
  .about-award-source {
    font-size: 14px; /* px */
  }
  .about-award-content {
    font-size: 16px; /* px */
  }
}

@media screen and (max-width: 1088px) {
  .about-birth-title, .about-phi-title {
    font-size: 20px; /* px */
  }
}

@media screen and (max-width: 700px) {
  .about-birth-label, .about-phi-label {
    margin-top: 40px; /* px */
  }
  div.about-phi-title-wrapper {
    width: 100%;
  }
  .two-column div.about-phi-subtitle {
    width: 100%;
    margin-top: 24px; /* px */
  }
  .about-award {
    width: 48%;
  }
  .about-award-source {
    font-size: 12px; /* px */
  }
  .about-award-content {
    font-size: 14px; /* px */
  }
}

@media screen and (max-width: 862px) {
  .about-birth-wrapper {
    width: 100%;
  }
}


@media (max-width: 640px) {
  /* .image-text-column-col1, .about div.image-text-column-col1 {
    width: 100%;
  }
  .image-text-column-col2, .about div.image-text-column-col2 {
    width: 100%;
    padding-bottom: 82%;
    margin-bottom: 15%;
  } */
  .image-text-column-col2 .about-image {
    /* width: 100%; */
    padding-top: 32px; /* px */
  }
  div.about-image {
    width: 80%;
    height: 185%;
    bottom: -125%;
    top: 38px; /* px */
  }
  .about-list-grid {
     padding-bottom: 64px; /* px */
  }
  .about-clear {
    height: 100px; /* px */
  }
}
@media (max-width: 470px) {
  div.about-image {
    bottom: -150%;
  }
  .two-column div.about-clear {
    height: 0;
  }
}
@media (max-width: 370px) {
  div.about-image {
    bottom: -160%;
  }
}

@media (max-width: 430px) {
  .about div.image-text-column-col1 {
    width: 100%;
  }
  .about div.image-text-column-col2 {
    width: 100%;
    padding-bottom: 100%;
    margin-bottom: 64px; /* px */
  }
  .image-text-column-col2 .about-image {
    /* width: 100%; */
    left: 0;
    top: 1px; /* px */
    right: 0;
    width: 78%;
    margin: 0 auto;
    padding-top: 32px; /* px */
  }
  div.about-image.image-text-colum-full {
    height: 100%;
  }
}