.types {
  display: flex;
  justify-content: center;
  margin: 203px 0 60px 0;
  background: #e4e4e4;padding: 20px;
}

.types a {
  margin: 0 51px;
  color: #1a202c;
  opacity: .2;
  font-family: 'SourceHanSansCN-Bold';
  transition: all 600ms;
  cursor: pointer;
}

.types a:hover {
  opacity: 1;
}

.types .active {
  opacity: 1;
}

.en {
  color: rgba(26, 32, 44, 0.1);
  font-size: 64px;
  font-family: 'SourceHanSansCN-Bold';
  text-transform: uppercase;
}

.cn {
  color: #1a202c;
  font-size: 64px;
  font-family: 'SourceHanSansCN-Bold';
}

.title {
  margin: 0 160px;
}

.section1 {
  margin: 70px 160px 97px 0;
  display: flex;
  justify-content: space-between;
  gap: 53px;
}

.section1 .pic {
  width: 70%;
}

.section1 .pic img {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 100%;
}

.section1 .des {
  width: 30%;
  color: #666;
  font-size: 20px;
  font-family: 'SourceHanSansCN-Light';
  line-height: 2;
  text-align: justify;
}

.section1 .des p {
  font-family: 'SourceHanSansCN-Light';
}

.section2 {
  margin: 0 8.3333333333vw;
  position: relative;
}

.section2 .title2 {
  position: absolute;
  left: 0;
  top: -24px;
}

.section2 .title2 .en {
  width: 586/18.2vw;
  font-size: 64/19.2vw;
}

.section2 .title2 .cn {
  font-size: 64/19.2vw;
}

.section2 .people1 {
  display: flex;
  justify-content: flex-end;
  margin-right: 3.125vw;
  margin-bottom: 35px;
}

.section2 .people1 .item {
  margin-left: 1.9270833333vw;
  width: 21.875vw;
}

.section2 .people1 .item .pic {
  position: relative;
  overflow: hidden;
}

.section2 .people1 .item .pic img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: all 600ms;
}

.section2 .people1 .item .pic .icon {
  position: absolute;
  right: 25px;
  bottom: 0;
}

.section2 .people1 .item .pic .icon img {
  width: 90px;
}

.section2 .people1 .item .name {
  color: #1a202c;
  font-size: 22px;
  margin: 12px 0 5px 0;
}

.section2 .people1 .item .tag {
  color: #6B6E73;
  font-size: 18px;
}

.section2 .people1 .item:hover .pic img {
  transform: scale(1.05);
}

.section2 .people2 {
  display: flex;
  margin-left: 6.9270833333vw;
  margin-bottom: 1.8229166667vw;
}

.section2 .people2 .item {
  margin-left: 1.9270833333vw;
  width: 21.875vw;
}

.section2 .people2 .item .pic {
  position: relative;
  overflow: hidden;
}

.section2 .people2 .item .pic img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: all 600ms;
}

.section2 .people2 .item .pic .icon {
  position: absolute;
  right: 25px;
  bottom: 0;
}

.section2 .people2 .item .pic .icon img {
  width: 90px;
}

.section2 .people2 .item .name {
  color: #1a202c;
  font-size: 22px;
  margin: 12px 0 5px 0;
}

.section2 .people2 .item .tag {
  color: #6B6E73;
  font-size: 18px;
}

.section2 .people2 .item:hover .pic img {
  transform: scale(1.05);
}

.section3 {
  margin: 0 240px 110px 240px;
}

.section3 .t {
  font-size: 24px;
  font-family: 'SourceHanSansCN-Bold';
  margin-bottom: 20px;
}

.section3 .list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 40px;
}

.section3 .list .item {
  width: 1005;
}

.section3 .list .item .pic {
  position: relative;
  overflow: hidden;
}

.section3 .list .item .pic img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: all 600ms;
}

.section3 .list .item .name {
  color: #1a202c;
  font-size: 20px;
  margin: 12px 0 5px 0;
}

.section3 .list .item .tag {
  color: #6B6E73;
  font-size: 16px;
  font-family: 'SourceHanSansCN-Light';
}

.section3 .list .item:hover .pic img {
  transform: scale(1.05);
}

.section3 .list .item:nth-child(2n) {
  margin-top: 38px;
}

.section4 {
  position: relative;
}

.section4 .content {
  padding: 158px 0 158px 248px;
  position: relative;
}

.section4 .content .swiper-container {
  width: 100%;
}

.section4 .content .swiper-container .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section4 .content .swiper-container .info .text {
  width: 35%;
  color: white;
}

.section4 .content .swiper-container .info .text .p1 {
  font-size: 40px;
  font-family: 'SourceHanSansCN-Light';
  margin-top: 15px;
}

.section4 .content .swiper-container .info .text .p2 {
  font-size: 60px;
  font-family: 'SourceHanSansCN-Bold';
}

.section4 .content .swiper-container .info .pic {
  width: 60%;
}

.section4 .content .swiper-container .info .pic img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.section4 .bgs .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 600ms;
}

.section4 .bgs .bg img {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 100%;
}

.section4 .bgs .on {
  opacity: 1;
}

.section4 .nums {
  position: absolute;
  left: 248px;
  top: 178px;
  display: flex;
  color: white;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  padding-top: 46px;
  width: 60%;
}

.section4 .nums p {
  font-family: 'SourceHanSansCN-Light';
}

.section4 .nums .p1 {
  font-size: 46px;
}

.section4 .nums .p2 {
  font-size: 20px;
  margin-top: 15px;
}

.section4 .swiper-pagination {
  position: absolute;
  left: 248px;
  bottom: 187px;
  background: #F5F5F5;
  width: 142px;
  height: 49px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
}

.section4 .swiper-pagination .swiper-pagination-bullet {
  background: #989898;
  opacity: 1;
  width: 10px;
  height: 10px;
  margin: 0 3px;
  transition: all 600ms;
}

.section4 .swiper-pagination .swiper-pagination-bullet-active {
  background: #343434;
}

.section5 {
  margin: 85px 160px 0 160px;
}

.section5 .content {
  margin: 250px 0 162px 0;
  position: relative;
}

.section5 .content .swiper-container {
  width: 100%;
}

.section5 .content .swiper-container .swiper-slide .info {
  text-align: center;
  cursor: pointer;
}

.section5 .content .swiper-container .swiper-slide .info .year {
  color: #1a202c;
  font-size: 64px;
  font-family: 'SourceHanSansCN-Bold';
  text-transform: uppercase;
  opacity: .1;
  transition: all 600ms;
}

.section5 .content .swiper-container .swiper-slide .info .year span {
  font-size: 32px;
  font-family: 'SourceHanSansCN-Bold';
}

.section5 .content .swiper-container .swiper-slide .info .des {
  color: #000;
  opacity: .5;
  font-size: 20px;
  font-family: 'SourceHanSansCN-Light';
  transition: all 600ms;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section5 .content .swiper-container .swiper-slide-active .info .year,
.section5 .content .swiper-container .swiper-slide-active .info .des {
  opacity: 1;
}

.section5 .content .pics .pic {
  position: absolute;
  left: 280px;
  top: -190px;
  opacity: 0;
  transition: all 600ms;
}

.section5 .content .pics .pic img {
  width: 447px;
  display: block;
  object-fit: cover;
}

.section5 .content .pics .on {
  opacity: 1;
}

@media screen and (max-width: 1465px) {
  .title {
    margin: 0 5%;
  }

  .section1 {
    margin-right: 5%;
  }

  .section2 {
    margin: 0 5%;
  }

  .section2 .people1 {
    margin-right: 0;
  }

  .section2 .people1 .item .tag {
    font-size: 16px;
  }

  .section2 .people2 {
    margin-left: 5%;
  }

  .section2 .people2 .item .tag {
    font-size: 16px;
  }

  .section3 {
    margin: 0 5% 60px 5%;
  }

  .section4 .content {
    padding: 100px 0 100px 5%;
  }

  .section4 .content .swiper-container .info .text .p1 {
    font-size: 32px;
  }

  .section4 .content .swiper-container .info .text .p2 {
    font-size: 40px;
  }

  .section4 .swiper-pagination {
    left: 5%;
  }

  .section4 .nums {
    left: 5%;
    top: 120px;
  }

  .section5 {
    margin: 60px 5% 0 5%;
  }
}

@media screen and (max-width: 1024px) {
  .types {
    margin: 80px 5% 30px 5%;
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
  }

  .types a {
    margin: 0 10px;
    display: inline-block;
  }

  .en {
    font-size: 32px;
  }

  .cn {
    font-size: 30px;
  }

  .section1 {
    flex-direction: column;
    margin: 30px 0;
    gap: 0;
  }

  .section1 .pic {
    width: 100%;
  }

  .section1 .des {
    width: 90%;
    margin: 20px auto;
    font-size: 16px;
  }

  .section2 .title2 .en,
  .section2 .title2 .cn {
      font-size: 16px;
      width: fit-content
  }

  .section2 .people1 .item .name,
  .section2 .people2 .item .name {
      font-size: 14px
  }

  .section2 .people1 .item .tag,
  .section2 .people2 .item .tag {
      font-size: 8px
  }

  /* .section2 .title2 {
    position: static;
  }

  .section2 .title2 .en,
  .section2 .title2 .cn {
    font-size: 32px;
    width: fit-content;
  }

  .section2 .people1,
  .section2 .people2 {
    width: 100%;
    flex-direction: column;
    margin-left: 0;
    margin-bottom: 0;
  }

  .section2 .people1 .item,
  .section2 .people2 .item {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
  } */

  .section3 {
    margin: 30px 5%
}

.section3 .t {
    font-size: 16px
}

.section3 .list {
    gap: 20px
}

.section3 .list .item .name {
    font-size: 14px
}

.section3 .list .item .tag {
    font-size: 8px
}

.section3 .list .item:nth-child(2n) {
    margin-top: 15px
}
  .section4 .content {
    padding: 60px 0;
  }

  .section4 .content .swiper-container .info {
    flex-direction: column-reverse;
  }

  .section4 .content .swiper-container .info .text {
    width: 100%;
    padding: 20px 5%;
  }

  .section4 .content .swiper-container .info .text .p1 {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .section4 .content .swiper-container .info .text .p2 {
    font-size: 24px;
  }

  .section4 .content .swiper-container .info .pic {
    width: 100%;
  }

  .section4 .nums {
    display: none;
  }

  .section4 .swiper-pagination {
    bottom: 20px;
    width: 100px;
    height: 35px;
  }

  .section5 {
    margin: 30px 5%;
  }

  .section5 .content {
    margin: 200px 0 0 0;
  }

  .section5 .content .swiper-container .swiper-slide .info .year {
    font-size: 32px;
  }

  .section5 .content .swiper-container .swiper-slide .info .year span {
    font-size: 16px;
  }

  .section5 .content .swiper-container .swiper-slide .info .des {
    font-size: 16px;
    height: auto;
  }

  .section5 .content .pics .pic {
    left: 0;
    top: -180px;
  }
}

/*# sourceMappingURL=about.css.map */