.about-president-page {
  background: #ffffff;
}
.president-message {
  padding: 1.02rem 0 1.18rem;
  background: #ffffff;
}
.president-message .main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.message-copy {
  width: 8.05rem;
  padding-top: 0.04rem;
}
.section-en+p {
  font-weight: 400;
  font-size: 0.2rem;
  line-height: 0.28rem;
  color: #c41e2a;
  text-transform: uppercase;
}
.section-en+p span{
    font-size: 0.2rem !important;
}
.message-copy h2>p,
.message-copy h2 {
  margin-top: 0.18rem;
  font-weight: 600;
  font-size: 0.34rem;
  line-height: 0.46rem;
  color: #222222;
}
.message-text {
  margin-top: 0.48rem;
}
.message-text p {
  font-weight: 400;
  font-size: 0.16rem;
  color: #333;
  text-align: justify;
  text-indent: 2em;
  margin-bottom: 0.05rem;
  line-height: 0.34rem;
}
.message-text p:first-child {
  text-indent: 0;
  margin-bottom: 0.18rem;
}
.message-sign {
  margin-top: 0.24rem;
  padding-right: 0.16rem;
  text-align: right;
}
.message-sign p {
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.28rem;
  color: #555555;
}
.message-sign strong {
  display: inline-block;
  margin-top: 0.18rem;
  margin-right: 0.15rem;
  transform: rotate(-8deg);
  font-family: "STXingkai", "KaiTi", serif;
  font-weight: 400;
  font-size: 0.44rem;
  line-height: 0.48rem;
  color: #111111;
  letter-spacing: 0.03rem;
  position: relative;
}
.message-sign strong::before {
  content: "";
  width: 1.12rem;
  height: 0.46rem;
  position: absolute;
  left: -0.24rem;
  top: -0.07rem;
  background: linear-gradient(135deg, transparent 15%, rgba(0, 0, 0, 0.08) 16%, transparent 18%, transparent 58%, rgba(0, 0, 0, 0.1) 59%, transparent 62%);
  z-index: -1;
  opacity: 0.55;
}
.president-photo {
  width: 7.2rem;
  height: 9rem;
}
.photo-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0.18rem;
  overflow: hidden;
  position: relative;
  background: radial-gradient(circle at 51% 33%, rgba(255, 255, 255, 0.96) 0 0.78rem, transparent 0.79rem), linear-gradient(155deg, transparent 0 45%, rgba(12, 35, 72, 0.88) 45.2% 73%, transparent 73.2%), radial-gradient(ellipse at 54% 92%, rgba(10, 31, 60, 0.9) 0 1.85rem, transparent 1.86rem), linear-gradient(180deg, #f4f7fd 0%, #ffffff 48%, #eef3fa 100%);
  box-shadow: inset 0 0 0 0.01rem rgba(0, 53, 128, 0.05);
}

@media (max-width: 1024px) {
  .about-hero {
    height: 6.2rem;
  }
  .about-hero .main {
    padding-top: 1.5rem;
  }
  .about-drop {
    display: none;
  }
  .about-channel {
    height: auto;
  }
  .about-channel .main {
    height: auto;
    padding: 0.18rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
  }
  .about-tabs {
    width: 100%;
    height: auto;
    gap: 0.2rem;
    overflow-x: auto;
  }
  .about-tabs a {
    height: 0.48rem;
    font-size: 0.2rem;
  }
  .president-message {
    padding: 0.72rem 0 0.9rem;
  }
  .president-message .main {
    flex-direction: column;
    gap: 0.46rem;
  }
  .message-copy,
  .president-photo {
    width: 100%;
  }
  .president-photo {
    height: 8rem;
  }
}
.about-platform-page {
  background: #ffffff;
}
.chain-section {
  padding: 0.78rem 0 1.13rem;
  background: #ffffff;
}
.chain-title {
  text-align: center;
  margin-bottom: 0.48rem;
}
.chain-title p {
  font-weight: 400;
  font-size: 0.28rem;
  line-height: 0.38rem;
  color: #c41e2a;
}
.chain-title h2>p,
.chain-title h2 {
  margin-top: 0.1rem;
  font-weight: 600;
  font-size: 0.36rem;
  line-height: 0.5rem;
  color: #262626;
}
.chain-flow {
  width: 100%;
  margin: 0 auto;
}
.chain-row {
  width: 100%;
  border-radius: 0.08rem;
  display: flex;
  align-items: stretch;
  padding: 0.24rem 0.27rem;
  border: 0.01rem solid var(--row-color);
  background: var(--row-bg);
}
.chain-row--blue {
  --row-color: #49a0f8;
  --row-bg: #f4faff;
  --row-dark: #378ff0;
  --row-soft: #e9f5ff;
}
.chain-row--green {
  --row-color: #25bfae;
  --row-bg: #ecfcf9;
  --row-dark: #22b8aa;
  --row-soft: #ddf7f3;
}
.chain-row--cyan {
  --row-color: #35b6f2;
  --row-bg: #f4fcff;
  --row-dark: #2bade9;
  --row-soft: #e8f8ff;
}
.chain-row--purple {
  --row-color: #6172e4;
  --row-bg: #f8f9ff;
  --row-dark: #5868d6;
  --row-soft: #eef1ff;
}
.row-label,
.brand-label {
  width: 2.9rem;
  min-height: 1.39rem;
  border: 0.01rem dashed var(--row-color);
  border-radius: 0.04rem;
  background: rgba(255, 255, 255, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.row-label strong,
.brand-label strong {
  margin-top: 0.18rem;
  font-weight: 600;
  font-size: 0.24rem;
  line-height: 0.3rem;
  color: #333333;
}
.row-label .absoutIcon1,
.brand-label .absoutIcon1 {
  width: 0.4rem;
  margin: 0 auto;
}
.row-content {
  flex: 1;
  margin-left: 0.19rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.19rem;
}
.row-content .row-head {
  grid-column: 1 / span 2;
  height: 0.44rem;
  border-radius: 0.06rem;
  background: var(--row-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.2rem;
  color: #ffffff;
}
.mini-card,
.factory-card {
  min-height: 0.68rem;
  border: 0.01rem dashed var(--row-color);
  border-radius: 0.04rem;
  background: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  padding: 0 0.24rem;
}
.mini-card img,
.factory-card img {
  width: 0.46rem;
  height: 0.46rem;
  margin-right: 0.24rem;
}
.mini-card img.aboutIcon2,
.factory-card img.aboutIcon2 {
  margin-right: 0;
  margin-bottom: 0.24rem;
}
.mini-card span,
.factory-card span {
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.24rem;
  color: #222;
}
.flow-arrow {
  width: 0.32rem;
  height: 0.66rem;
  margin: 0.18rem auto;
  position: relative;
}
.flow-arrow img {
  width: 100%;
  height: 100%;
  display: block;
}
.production-row {
  display: grid;
  grid-template-columns: 2.9rem repeat(4, 1fr);
  gap: 0.2rem;
}
.production-row .row-label {
  width: auto;
}
.factory-card {
  min-height: 1.38rem;
  padding: 0.28rem 0.1rem 0.14rem;
  flex-direction: column;
  justify-content: center;
  border-top: 0.08rem solid var(--row-dark);
}
.factory-card i {
  margin: 0 0 0.2rem;
}
.factory-card span {
  font-size: 0.14rem;
}
.brand-row {
  padding: 0.26rem;
}
.brand-label {
  width: 2.9rem;
  min-height: 2.95rem;
  margin-right: 0.2rem;
}
.brand-panel {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.18rem;
}
.brand-card {
  min-height: 1.28rem;
  border: 0.01rem dashed var(--row-color);
  border-radius: 0.04rem;
  background: rgba(255, 255, 255, 0.8);
  overflow: hidden;
}
.brand-card h3 {
  height: 0.45rem;
  background: var(--row-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.17rem;
  color: #ffffff;
}
.brand-card h3 sup {
  font-size: 0.11rem;
  color: #ffffff;
}
.brand-info {
  height: 0.83rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  text-align: center;
}
.brand-info div {
  min-height: 0.46rem;
  padding: 0 0.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand-info div:first-child {
  border-right: 0.01rem solid #e6e6e6;
}
.brand-info b {
  font-weight: 600;
  font-size: 0.16rem;
  line-height: 0.2rem;
  color: #333333;
}
.brand-info p {
  margin-top: 0.1rem;
  font-weight: 400;
  font-size: 0.14rem;
  line-height: 0.18rem;
  color: #878787;
}
.brand-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  margin-bottom: 0.06rem;
}
.brand-tags.row {
  flex-direction: row;
  padding: 0;
  border-right: 0 !important;
}
.brand-tags span {
  height: 0.22rem;
  padding: 0 0.08rem;
  border: 0.01rem solid #8a96ea;
  border-radius: 0.03rem;
  font-weight: 400;
  font-size: 0.14rem;
  line-height: 0.2rem;
  color: #878787;
}
.chain-result {
  height: 1.66rem;
  border: 0.01rem solid #2b6cbc;
  border-radius: 0.06rem;
  background: #eaf3ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.chain-result img {
  width: 0.6rem;
  margin: 0 auto;
}
.chain-result strong>p,
.chain-result strong {
  margin-top: 0.28rem;
  font-weight: 600;
  font-size: 0.36rem;
  line-height: 0.38rem;
  color: #333333;
}
.chain-result strong>p{
    margin-top: 0;
}
.icon-rd,
.icon-stack,
.icon-chip,
.icon-grid,
.icon-global {
  width: 0.38rem;
  height: 0.38rem;
  display: block;
  position: relative;
}
.icon-rd::before {
  content: "";
  width: 0.24rem;
  height: 0.24rem;
  position: absolute;
  left: 0.08rem;
  top: 0.02rem;
  border-left: 0.04rem solid var(--row-color);
  border-bottom: 0.04rem solid var(--row-color);
  transform: rotate(-45deg);
}
.icon-rd::after {
  content: "";
  width: 0.24rem;
  height: 0.04rem;
  position: absolute;
  left: 0.07rem;
  bottom: 0.05rem;
  background: var(--row-color);
  border-radius: 0.03rem;
}
.icon-stack::before,
.icon-stack::after {
  content: "";
  width: 0.28rem;
  height: 0.18rem;
  position: absolute;
  left: 0.05rem;
  border: 0.03rem solid var(--row-color);
  transform: rotate(30deg) skewX(-30deg);
}
.icon-stack::before {
  top: 0.02rem;
}
.icon-stack::after {
  top: 0.14rem;
}
.icon-chip::before {
  content: "";
  width: 0.24rem;
  height: 0.24rem;
  position: absolute;
  left: 0.07rem;
  top: 0.07rem;
  border: 0.03rem solid var(--row-color);
  border-radius: 0.03rem;
  box-shadow: -0.08rem 0 0 -0.05rem var(--row-color), 0.08rem 0 0 -0.05rem var(--row-color), 0 -0.08rem 0 -0.05rem var(--row-color), 0 0.08rem 0 -0.05rem var(--row-color);
}
.icon-grid::before {
  content: "";
  width: 0.12rem;
  height: 0.12rem;
  position: absolute;
  left: 0.04rem;
  top: 0.04rem;
  border: 0.03rem solid var(--row-color);
  box-shadow: 0.18rem 0 0 0 transparent, 0.18rem 0 0 -0.03rem transparent;
}
.icon-grid::after {
  content: "";
  width: 0.12rem;
  height: 0.12rem;
  position: absolute;
  right: 0.04rem;
  top: 0.04rem;
  border: 0.03rem solid var(--row-color);
  box-shadow: -0.18rem 0.18rem 0 -0.03rem transparent, 0 0.18rem 0 0 transparent;
}
.brand-label .icon-grid::before {
  box-shadow: 0 0.18rem 0 0 transparent;
}
.brand-label .icon-grid::after {
  box-shadow: 0 0.18rem 0 0 transparent;
}
.icon-global {
  width: 0.48rem;
  height: 0.48rem;
  border: 0.03rem solid #1756aa;
  border-radius: 50%;
}
.icon-global::before {
  content: "";
  width: 0.42rem;
  height: 0.18rem;
  position: absolute;
  left: 0.02rem;
  top: 0.12rem;
  border-top: 0.02rem solid #1756aa;
  border-bottom: 0.02rem solid #1756aa;
}
.icon-global::after {
  content: "";
  width: 0.18rem;
  height: 0.42rem;
  position: absolute;
  left: 0.12rem;
  top: 0.02rem;
  border-left: 0.02rem solid #1756aa;
  border-right: 0.02rem solid #1756aa;
  border-radius: 50%;
}
@media (max-width: 1024px) {
  .about-hero {
    height: 6.2rem;
  }
  .about-hero .main {
    padding-top: 1.5rem;
  }
  .about-channel {
    height: auto;
  }
  .about-channel .main {
    height: auto;
    padding: 0.18rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
  }
  .about-tabs {
    width: 100%;
    height: auto;
    gap: 0.2rem;
    overflow-x: auto;
  }
  .about-tabs a {
    height: 0.48rem;
    font-size: 0.2rem;
  }
  .chain-flow {
    width: 100%;
  }
  .chain-row,
  .production-row,
  .brand-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  .row-label,
  .brand-label {
    width: 100%;
  }
  .row-content,
  .brand-panel {
    margin-left: 0;
    grid-template-columns: 1fr;
  }
  .row-content .row-head,
  .brand-panel .row-head {
    grid-column: auto;
    height: auto;
    min-height: 0.52rem;
    padding: 0.1rem 0.18rem;
    text-align: center;
  }
  .brand-label {
    min-height: 1.6rem;
    margin-right: 0;
  }
}
.about-company-page {
  background: #ffffff;
}
.company-overview {
  padding: 0.82rem 0 1.23rem;
  background: #ffffff;
}
.overview-title {
  text-align: center;
  margin-bottom: 0.5rem;
}
.overview-title p {
  font-weight: 400;
  font-size: 0.2rem;
  line-height: 0.28rem;
  color: #c41e2a;
  text-transform: uppercase;
}
.overview-title h2 {
  margin-top: 0.14rem;
  font-weight: 600;
  font-size: 0.38rem;
  line-height: 0.52rem;
  color: #222222;
}
.overview-copy {
  width: 12.78rem;
  margin: 0 auto;
}
.overview-copy p {
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.34rem;
  color: #555555;
  text-align: justify;
  margin-bottom: 0.14rem;
}
.overview-copy sup {
  font-size: 0.1rem;
  color: #555555;
}
.overview-image {
  width: 100%;
  height: 5.35rem;
  margin-top: 0.52rem;
}
.image-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.image-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-placeholder span {
  min-width: 1.04rem;
  height: 0.34rem;
  padding: 0 0.16rem;
  position: absolute;
  right: 0.3rem;
  top: 0.28rem;
  z-index: 3;
  border-radius: 0.17rem;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 0.14rem;
  color: #6d83a7;
}
@media (max-width: 1024px) {
  .about-hero {
    height: 6.2rem;
  }
  .about-hero .main {
    padding-top: 1.5rem;
  }
  .about-channel {
    height: auto;
  }
  .about-channel .main {
    height: auto;
    padding: 0.18rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
  }
  .about-tabs {
    width: 100%;
    height: auto;
    gap: 0.2rem;
    overflow-x: auto;
  }
  .about-tabs a {
    height: 0.48rem;
    font-size: 0.2rem;
  }
  .overview-copy {
    width: 100%;
  }
  .overview-image {
    height: 4.4rem;
  }
}
.about-vision-page {
  background: #ffffff;
}
.vision-mission {
  padding: 0.7rem 0 1.18rem;
  background: #ffffff;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.feature-image,
.feature-copy {
  height: 5rem;
}
.feature-image {
  position: relative;
  overflow: hidden;
}
.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s;
}
.feature-image:hover img {
  transform: scale(1.1);
}
.feature-copy {
  background: #f2f7fc;
  position: relative;
  padding: 1.72rem 0.92rem 0 1rem;
}
.feature-copy h2 {
  font-weight: 600;
  font-size: 0.38rem;
  line-height: 0.52rem;
  color: #222222;
}
.feature-copy p {
  width: 5.85rem;
  margin-top: 0.26rem;
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.34rem;
  color: #666666;
  text-align: justify;
}
.feature-copy .featureIcon {
  width: 0.9rem;
  height: 0.9rem;
  position: absolute;
  right: 1rem;
  top: 1.27rem;
}
.feature-copy--left {
  padding-left: 0.96rem;
  padding-top: 1.48rem;
}
.feature-image:nth-child(4),
.feature-copy--left:nth-child(3){
    margin-top: 0.5rem;
}
.title-line {
  width: 0.38rem;
  height: 0.02rem;
  display: block;
  margin-top: 0.16rem;
  background: #c41e2a;
}
.value-list {
  margin-top: 0.6rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.value-card {
  min-height: 1.82rem;
  padding: 0.44rem 0.45rem 0.32rem 0.5rem;
  background: #f5fafe;
  border-radius: 0.06rem;
  border-bottom: 0.05rem solid #003580;
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  transition: all 0.3s linear;
}
.value-card img {
  width: 0.52rem;
}
.value-card.active,
.value-card:hover {
  background: #ffffff;
  box-shadow: 0 0.02rem 0.16rem 0 rgba(0, 53, 128, 0.22);
}
.value-card h3 {
  font-weight: 600;
  font-size: 0.24rem;
  line-height: 0.32rem;
  color: #003580;
}
.value-card p {
  margin-top: 0.14rem;
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.3rem;
  color: #333333;
  text-align: justify;
}
.value-icon {
  width: 0.48rem;
  height: 0.54rem;
  flex-shrink: 0;
  position: relative;
}
.value-icon::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  position: absolute;
  left: 0.03rem;
  top: 0.04rem;
  border: 0.02rem solid #f4b846;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.value-icon::after {
  content: "";
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  left: 0.14rem;
  top: 0.16rem;
  border: 0.03rem solid #0a66c2;
  border-radius: 0.04rem;
}
.value-icon--research::after {
  transform: rotate(-35deg);
  border-right: 0;
  border-top: 0;
}
.value-icon--make::after {
  border-radius: 50%;
  box-shadow: 0.12rem -0.05rem 0 -0.07rem #0a66c2;
}
.value-icon--safe::after {
  width: 0.18rem;
  height: 0.22rem;
  border-radius: 50% 50% 0.04rem 0.04rem;
  clip-path: polygon(50% 0, 100% 23%, 88% 78%, 50% 100%, 12% 78%, 0 23%);
}
@media (max-width: 1024px) {
  .about-hero {
    height: 6.2rem;
  }
  .about-hero .main {
    padding-top: 1.5rem;
  }
  .about-channel {
    height: auto;
  }
  .about-channel .main {
    height: auto;
    padding: 0.18rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
  }
  .about-tabs {
    width: 100%;
    height: auto;
    gap: 0.2rem;
    overflow-x: auto;
  }
  .about-tabs a {
    height: 0.48rem;
    font-size: 0.2rem;
  }
  .feature-grid,
  .value-list {
    grid-template-columns: 1fr;
  }
  .feature-image,
  .feature-copy {
    height: auto;
    min-height: 4.6rem;
  }
  .feature-copy {
    padding: 0.9rem 0.46rem;
  }
  .feature-copy p {
    width: 100%;
  }
  .value-list {
    gap: 0.28rem;
  }
}
.about-history-page {
  background: #ffffff;
}
.history-section {
  min-height: 13.1rem;
  padding: 0.82rem 0 0.78rem;
 background-image: url(/img/historybg.png);
 background-size: cover;
  position: relative;
  overflow: hidden;
}

.history-title {
  text-align: center;
  margin-bottom: 0.54rem;
}
.history-title p {
  font-weight: 400;
  font-size: 0.2rem;
  line-height: 0.28rem;
  color: #c41e2a;
}
.history-title h2 {
  margin-top: 0.14rem;
  font-weight: 600;
  font-size: 0.38rem;
  line-height: 0.52rem;
  color: #222222;
}
.history-slider {
  width: 12.48rem;
  height: 9.4rem;
  margin: 0 auto;
  position: relative;
}
.history-swiper {
  height: 100%;
  overflow-x: visible;
  position: relative;
}
.history-swiper::before {
  content: "";
  width: 0.02rem;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background: #e4e4e4;
  z-index: 0;
}
.history-swiper .swiper-slide {
  height: calc(100% / 3);
}
.history-item {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
.history-dot {
  width: 0.18rem;
  height: 0.18rem;
  position: absolute;
  left: 50%;
  top: 0.9rem;
  z-index: 5;
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: #f8bc54;
  border: 0.05rem solid rgba(248, 188, 84, 0.22);
  box-shadow: 0 0 0 0.04rem rgba(248, 188, 84, 0.16);
}

.history-item--left .history-dot{
  top: 1.05rem;
}
.history-item--right .line {
  left: -0.35rem !important;
  right: auto !important;
  top: 0.5rem !important;
}
.history-item--left .history-card {
  align-items: flex-end;
  /*padding-right: 0.6rem;*/
}
.history-card {
  width: 5.56rem;
  min-height: 1.86rem;
  padding: 0.22rem 0.28rem;
  border-radius: 0.08rem;
  background: transparent;
  transition: all 0.3s linear;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  /*position: relative;*/
}

.history-card .line {
  position: absolute;
 
  width: 0.6rem;
  height: 0.18rem;
  top:0.67rem;
  display: flex;
  align-items: center;
}

.history-card .line::before{
    content: '';
    border-bottom: 0.01rem dashed #c1c1c1;
    width: 100%;
    height: 0.01rem;
}

.history-item--left .history-card .line{
    right: -0.4rem;
}


.history-card img {
  width: 0.6rem;
  height: 0.6rem;
}
.history-card strong {
  display: block;
  margin-top: 0.12rem;
  font-weight: 600;
  font-size: 0.3rem;
  line-height: 0.38rem;
  color: #003580;
}
.history-card h3 {
  margin-top: 0.16rem;
  font-weight: 600;
  font-size: 0.16rem;
  line-height: 0.28rem;
  color: #333333;
}

.history-card:hover .history-title-text>p{
    color: #C41E2A;
}

.history-swiper .swiper-slide:nth-child(3) .history-card .line{
    top: 0.6rem;
}

.history-title-text>p::after {
  content: "";
  width: 0.08rem;
  height: 0.08rem;
  display: inline-block;
  margin-left: 0.1rem;
  vertical-align: 0.02rem;
  border-radius: 50%;
  background: #333333;
}
.history-card p {
  margin-top: 0.1rem;
  font-weight: 400;
  font-size: 0.14rem;
  line-height: 0.26rem;
  color: #666666;
}
.history-card sup {
  font-size: 0.09rem;
}
.history-card.panel {
 width: 5.52rem;
  min-width: 5.52rem;
  /* flex: 0 0 5.52rem; */
  /* max-width: 5.52rem; */
  min-height: 1.86rem;
  padding: 0.22rem 0.36rem;
  box-shadow: none;
}
.history-card.panel .history-title-text>p::after {
  display: none;
}
.history-card.panel .history-title-text>p::before {
  content: "";
  width: 0.08rem;
  height: 0.08rem;
  display: inline-block;
  margin-right: 0.1rem;
  vertical-align: 0.02rem;
  border-radius: 50%;
  background: #333333;
}
.history-year,
.history-year p{
    display: block;
    margin-top: 0.12rem;
    font-weight: 600;
    font-size: 0.3rem;
    line-height: 0.38rem;
    color: #003580;
}
.history-title-text>p{
        margin-top: 0.16rem;
    font-weight: 600;
    font-size: 0.16rem;
    line-height: 0.28rem;
    color: #333333;
}

.history-card:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f6fafc 100%);
  box-shadow: 0rem 0rem 0.16rem 0.01rem rgba(21, 85, 139, 0.34);
  border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
}
.history-card:hover h3 {
  color: #c41e2a;
}
.history-card:hover .history-title-text>p::after {
  background: #c41e2a;
}
.history-card:hover .history-title-text>p::before {
  background: #c41e2a;
}
.history-item--left {
  justify-content: flex-start;
}
.history-item--left .history-card {
  margin-right: auto;
  margin-left: 0.1rem;
}
.history-item--right {
  justify-content: flex-end;
}
.history-item--right .history-card {
  margin-left: auto;
 margin-right: 0.15rem;
}
.history-icon {
  width: 0.56rem;
  height: 0.56rem;
  display: block;
  margin: 0 auto;
  position: relative;
  color: #135aaa;
}
.panel .history-icon {
  margin: 0;
}
.history-icon--building::before {
  content: "";
  width: 0.34rem;
  height: 0.42rem;
  position: absolute;
  left: 0.1rem;
  bottom: 0.04rem;
  border: 0.05rem solid #135aaa;
  border-right-width: 0.09rem;
  border-radius: 0.03rem;
  box-shadow: inset 0 0.1rem 0 -0.06rem #135aaa, inset 0 0.2rem 0 -0.06rem #135aaa, inset 0 0.3rem 0 -0.06rem #135aaa;
  transform: skewY(-12deg);
}
.history-icon--chip::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  position: absolute;
  left: 0.1rem;
  top: 0.1rem;
  border: 0.05rem solid #135aaa;
  border-radius: 0.04rem;
  box-shadow: -0.12rem 0 0 -0.08rem #135aaa, 0.12rem 0 0 -0.08rem #135aaa, 0 -0.12rem 0 -0.08rem #135aaa, 0 0.12rem 0 -0.08rem #135aaa;
}
.history-icon--chip::after {
  content: "";
  width: 0.28rem;
  height: 0.05rem;
  position: absolute;
  left: 0.14rem;
  top: 0.27rem;
  background: #135aaa;
  transform: rotate(-28deg);
  box-shadow: 0.04rem 0.11rem 0 0 #135aaa;
}
.history-icon--map::before {
  content: "";
  width: 0.22rem;
  height: 0.3rem;
  position: absolute;
  left: 0.17rem;
  top: 0.02rem;
  border-radius: 50% 50% 50% 0;
  border: 0.05rem solid #135aaa;
  transform: rotate(-45deg);
}
.history-icon--map::after {
  content: "";
  width: 0.48rem;
  height: 0.2rem;
  position: absolute;
  left: 0.04rem;
  bottom: 0.02rem;
  background: #135aaa;
  clip-path: polygon(0 75%, 26% 35%, 44% 60%, 64% 18%, 100% 80%, 100% 100%, 0 100%);
}
.history-icon--market::before {
  content: "";
  width: 0.46rem;
  height: 0.36rem;
  position: absolute;
  left: 0.05rem;
  top: 0.14rem;
  border-left: 0.05rem solid #135aaa;
  border-bottom: 0.05rem solid #135aaa;
}
.history-icon--market::after {
  content: "";
  width: 0.36rem;
  height: 0.24rem;
  position: absolute;
  left: 0.14rem;
  top: 0.08rem;
  border-top: 0.05rem solid #135aaa;
  border-right: 0.05rem solid #135aaa;
  transform: skewY(-22deg);
}
.history-icon--factory::before {
  content: "";
  width: 0.46rem;
  height: 0.32rem;
  position: absolute;
  left: 0.05rem;
  bottom: 0.05rem;
  background: #135aaa;
  clip-path: polygon(0 35%, 22% 16%, 22% 35%, 45% 16%, 45% 35%, 100% 35%, 100% 100%, 0 100%);
}
.history-icon--energy::before {
  content: "";
  width: 0.32rem;
  height: 0.46rem;
  position: absolute;
  left: 0.12rem;
  top: 0.05rem;
  background: #135aaa;
  clip-path: polygon(55% 0, 18% 48%, 48% 48%, 35% 100%, 84% 37%, 55% 37%);
}
.history-btn {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  border-radius: 50%;
  transition: all 0.3s linear;
}
.history-btn::before {
  content: "";
  width: 0.13rem;
  height: 0.13rem;
  position: absolute;
  left: 50%;
  top: 50%;
  border-left: 0.03rem solid currentColor;
  border-top: 0.03rem solid currentColor;
}
.history-btn.disabled {
  cursor: default;
}
.history-prev {
  top: -0.05rem;
  background: #efefef;
  color: #c8c8c8;
  cursor: pointer;
}
.history-prev::before {
  transform: translate(-50%, -32%) rotate(45deg);
}
.history-prev:hover {
  background: #c41e2a;
}
.history-prev:hover::before {
  border-left: 0.03rem solid #fff;
  border-top: 0.03rem solid #fff;
}
.history-next {
  bottom: -0.4rem;
  background: #efefef;
  color: #c8c8c8;
  cursor: pointer;
}
.history-next:hover {
  background: #c41e2a;
}
.history-next:hover::before {
  border-left: 0.03rem solid #fff;
  border-top: 0.03rem solid #fff;
}
.history-next::before {
  transform: translate(-50%, -68%) rotate(225deg);
}
@media (max-width: 1024px) {
  .about-hero {
    height: 6.2rem;
  }
  .about-hero .main {
    padding-top: 1.5rem;
  }
  .about-channel {
    height: auto;
  }
  .about-channel .main {
    height: auto;
    padding: 0.18rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
  }
  .about-tabs {
    width: 100%;
    height: auto;
    gap: 0.2rem;
    overflow-x: auto;
  }
  .about-tabs a {
    height: 0.48rem;
    font-size: 0.2rem;
  }
  .history-slider {
    width: 100%;
  }
  .history-card.panel {
    width: 4.6rem;
  }
  .history-item--left .history-card {
    margin-left: 0.1rem;
  }
  .history-item--right .history-card {
    margin-right: 0.1rem;
  }
}
.about-bases-page {
  background: #ffffff;
}
.bases-section {
  padding: 0.76rem 0 1.2rem;
  background: #ffffff;
}
.bases-title {
  text-align: center;
  margin-bottom: 0.46rem;
}
.bases-title p {
  font-weight: 400;
  font-size: 0.18rem;
  line-height: 0.26rem;
  color: #c41e2a;
  text-transform: uppercase;
}
.bases-title h2 {
  margin-top: 0.1rem;
  font-weight: 600;
  font-size: 0.36rem;
  line-height: 0.5rem;
  color: #222222;
}
.bases-title h3 {
  margin-top: 0.05rem;
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.26rem;
  color: #555555;
}
.base-grid {
  width: 100%;
  background: #f7f7f7;
}
.base-grid .base-item {
  display: flex;
}
.base-grid .base-item:nth-child(2n) {
  flex-direction: row-reverse;
}
.base-grid .base-item:hover img {
  transform: scale(1.1);
}
.base-info,
.base-photo {
  height: 5rem;
  width: 50%;
  overflow: hidden;
}
.base-photo img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 0.6s;
}
.base-info {
  background: #f7f7f7;
  padding: 0.8rem 0.6rem 0;
}
.base-title>p:first-child,
.base-info h4 {
  font-weight: 600;
  font-size: 0.24rem;
  line-height: 0.32rem;
  color: #222222;
}
.base-info p {
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.28rem;
  color: #666;
}
.base-line {
  width: 0.4rem;
  height: 0.02rem;
  background: #c41e2a;
  margin: 0.15rem 0 0.3rem;
  display: block;
}
.base-photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #8fc8ff 0%, #e9f5ff 52%, #79a9d4 100%);
}
@media (max-width: 1024px) {
  .about-hero {
    height: 6.2rem;
  }
  .about-hero .main {
    padding-top: 1.5rem;
  }
  .about-channel {
    height: auto;
  }
  .about-channel .main {
    height: auto;
    padding: 0.18rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
  }
  .about-tabs {
    width: 100%;
    height: auto;
    gap: 0.2rem;
    overflow-x: auto;
  }
  .about-tabs a {
    height: 0.48rem;
    font-size: 0.2rem;
  }
  .base-grid {
    grid-template-columns: 1fr;
  }
  .base-info {
    height: auto;
    min-height: 4rem;
    padding: 0.55rem 0.42rem;
  }
  .base-photo {
    height: 4.1rem;
  }
}
.about-network-page {
  background: #ffffff;
}
.network-section {
  padding: 0.78rem 0 1.25rem;
  background: #ffffff;
}
.network-title {
  text-align: center;
  margin-bottom: 0.44rem;
}
.network-title p {
  font-weight: 400;
  font-size: 0.2rem;
  line-height: 0.28rem;
  color: #c41e2a;
}
.network-title h2 {
  margin-top: 0.1rem;
  font-weight: 600;
  font-size: 0.38rem;
  line-height: 0.52rem;
  color: #222222;
}
.network-title h3 {
  margin-top: 0.06rem;
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.26rem;
  color: #666666;
}
.map-box {
  width: 100%;
  height: 6.95rem;
  position: relative;
}
.map-image {
  width: 100%;
  height: 100%;
  position: relative;
}
.map-image img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.network-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.36rem 0.47rem;
  margin-top: 0.48rem;
}
.network-card {
  min-height: 1.2rem;
  background: #ffffff;
  box-shadow: 0 0.05rem 0.2rem rgba(0, 53, 128, 0.12);
}
.network-card .card-head {
  height: 0.63rem;
  padding: 0 0.3rem;
  background: var(--card-color);
  display: flex;
  align-items: center;
  color: #ffffff;
}
.network-card .card-head i {
  width: 0.2rem;
  height: 0.26rem;
  margin-right: 0.18rem;
  position: relative;
}
.network-card .card-head i::before {
  content: "";
  width: 0.18rem;
  height: 0.18rem;
  position: absolute;
  left: 0.01rem;
  top: 0.01rem;
  border-radius: 50% 50% 50% 0;
  background: #ffffff;
  transform: rotate(-45deg);
}
.network-card .card-head i::after {
  content: "";
  width: 0.06rem;
  height: 0.06rem;
  position: absolute;
  left: 0.07rem;
  top: 0.07rem;
  border-radius: 50%;
  background: var(--card-color);
}
.network-card .card-head h4 {
  font-weight: 600;
  font-size: 0.28rem;
  color: #ffffff;
}
.network-card .card-head span {
  width: 0.14rem;
  height: 0.14rem;
  margin-left: auto;
  border-right: 0.02rem solid #ffffff;
  border-bottom: 0.02rem solid #ffffff;
  transform: rotate(45deg);
}
.network-card .card-body {
  min-height: 0.76rem;
  padding: 0.22rem 0.34rem 0.2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.16rem 0.35rem;
}
.network-card .card-body.two-col {
  grid-template-columns: repeat(4, 1fr);
}
.network-card .card-body.four-col {
  grid-template-columns: repeat(4, 1fr);
}
.network-card .card-body p {
  font-weight: 400;
  font-size: 0.15rem;
  line-height: 0.2rem;
  color: #555555;
  position: relative;
  padding-left: 0.16rem;
}
.network-card .card-body p::before {
  content: "";
  width: 0.06rem;
  height: 0.06rem;
  position: absolute;
  left: 0;
  top: 0.07rem;
  border-radius: 50%;
  border: 0.01rem solid var(--card-color);
}
.network-card--red {
  --card-color: #c91d2c;
}
.network-card--green {
  --card-color: #61a34f;
}
.network-card--cyan {
  --card-color: #0ab4cf;
}
.network-card--orange {
  --card-color: #ff8227;
}
.network-card--blue {
  --card-color: #003f87;
}
@media (max-width: 1024px) {
  .about-hero {
    height: 6.2rem;
  }
  .about-hero .main {
    padding-top: 1.5rem;
  }
  .about-channel {
    height: auto;
  }
  .about-channel .main {
    height: auto;
    padding: 0.18rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
  }
  .about-tabs {
    width: 100%;
    height: auto;
    gap: 0.2rem;
    overflow-x: auto;
  }
  .about-tabs a {
    height: 0.48rem;
    font-size: 0.2rem;
  }
  .map-box {
    height: 5.2rem;
  }
  .network-cards {
    grid-template-columns: 1fr;
  }
}
.about-network-page {
  background: #ffffff;
}
.network-section {
  padding: 0.78rem 0 1.25rem;
  background: #ffffff;
}
.network-title {
  text-align: center;
  margin-bottom: 0.44rem;
}
.network-title p {
  font-weight: 400;
  font-size: 0.2rem;
  line-height: 0.28rem;
  color: #c41e2a;
}
.network-title h2 {
  margin-top: 0.1rem;
  font-weight: 600;
  font-size: 0.38rem;
  line-height: 0.52rem;
  color: #222222;
}
.network-title h3 {
  margin-top: 0.06rem;
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.26rem;
  color: #666666;
}
.map-box {
  width: 100%;
  height: 6.45rem;
  position: relative;
}
.map-points {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: none;
}
.map-points .item {
  /*width: 0.24rem;*/
  /*height: 0.32rem;*/
  /*position: absolute;*/
  /*transform: translate(-50%, -100%);*/
  /*color: #003580;*/
      width: 0.2rem;
    height: 0.24rem;
    position: absolute;
}
.map-points .item img {
  width: 100%;
    display: block;
}
/*.map-points .item::before {*/
/*  content: "";*/
/*  width: 0.24rem;*/
/*  height: 0.24rem;*/
/*  position: absolute;*/
/*  left: 0;*/
/*  top: 0;*/
/*  border-radius: 50% 50% 50% 0;*/
/*  background: currentColor;*/
/*  transform: rotate(-45deg);*/
/*  box-shadow: 0 0.02rem 0.05rem rgba(0, 0, 0, 0.2);*/
/*}*/
/*.map-points .item::after {*/
/*  content: "";*/
/*  width: 0.08rem;*/
/*  height: 0.08rem;*/
/*  position: absolute;*/
/*  left: 0.08rem;*/
/*  top: 0.08rem;*/
/*  border-radius: 50%;*/
/*  background: #ffffff;*/
/*}*/
.map-points .item--agent {
  color: #ff8227;
}
.map-points .item--seller {
  color: #003f87;
}
.map-points .item--branch {
  color: #61a34f;
}
.map-points .item--factory {
  color: #0ab4cf;
}
.map-points .item--office {
  color: #c91d2c;
}
.network-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.36rem 0.47rem;
  margin-top: 0.48rem;
}
.network-card {
  min-height: 1.2rem;
  background: #ffffff;
  box-shadow: 0 0.05rem 0.2rem rgba(0, 53, 128, 0.12);
}

.network-card:first-child{
    box-shadow: 0rem 0rem 0.16rem 0.01rem rgba(196,30,42,0.25);
}

.network-card:nth-child(2){
  box-shadow: 0rem 0rem 0.16rem 0.01rem rgba(99,157,79,0.25);
}

.network-card:nth-child(3){
  box-shadow: 0rem 0rem 0.16rem 0.01rem rgba(1,179,219,0.25);
}
.network-card:nth-child(4){
  box-shadow: 0rem 0rem 0.16rem 0.01rem rgba(246,135,47,0.25);
}
.network-card:nth-child(5){
  box-shadow: 0rem 0rem 0.16rem 0.01rem rgba(0,53,128,0.25);
}
.network-card .card-head {
  height: 0.63rem;
  padding: 0 0.3rem;
  background: var(--card-color);
  display: flex;
  align-items: center;
  color: #ffffff;
}
.network-card .card-head i {
  width: 0.2rem;
  height: 0.26rem;
  margin-right: 0.18rem;
  position: relative;
}
.network-card .card-head i::before {
  content: "";
  width: 0.18rem;
  height: 0.18rem;
  position: absolute;
  left: 0.01rem;
  top: 0.01rem;
  border-radius: 50% 50% 50% 0;
  background: #ffffff;
  transform: rotate(-45deg);
}
.network-card .card-head i::after {
  content: "";
  width: 0.06rem;
  height: 0.06rem;
  position: absolute;
  left: 0.07rem;
  top: 0.07rem;
  border-radius: 50%;
  background: var(--card-color);
}
.network-card .card-head h4 {
  font-weight: 500;
  font-size: 0.24rem;
  color: #ffffff;
}
.network-card .card-head span {
  width: 0.14rem;
  height: 0.14rem;
  margin-left: auto;
  border-right: 0.02rem solid #ffffff;
  border-bottom: 0.02rem solid #ffffff;
  transform: rotate(45deg);
}
.network-card .card-body {
  min-height: 0.76rem;
  padding: 0.22rem 0.34rem 0.2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.16rem 0.35rem;
}
.network-card .card-body.two-col {
  grid-template-columns: repeat(4, 1fr);
}
.network-card .card-body.four-col {
  grid-template-columns: repeat(4, 1fr);
}
.network-card .card-body p {
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.2rem;
  color: #555555;
  position: relative;
  padding-left: 0.16rem;
}
.network-card .card-body p::before {
  content: "";
  width: 0.06rem;
  height: 0.06rem;
  position: absolute;
  left: 0;
  top: 0.05rem;
  border-radius: 50%;
  border: 0.01rem solid var(--card-color);
}
.network-card--red {
  --card-color: #c91d2c;
}
.network-card--green {
  --card-color: #61a34f;
}
.network-card--cyan {
  --card-color: #0ab4cf;
}
.network-card--orange {
  --card-color: #ff8227;
}
.network-card--blue {
  --card-color: #003f87;
}
.network-cards--five {
  grid-template-columns: repeat(6, 1fr);
}
.network-cards--five .network-card:nth-child(1),
.network-cards--five .network-card:nth-child(2),
.network-cards--five .network-card:nth-child(3) {
  grid-column: span 2;
}
.network-cards--five .network-card:nth-child(4) {
  grid-column: 1 / span 2;
}
.network-cards--five .network-card:nth-child(5) {
  grid-column: 3 / span 2;
}
@media (max-width: 1024px) {
  .about-hero {
    height: 6.2rem;
  }
  .about-hero .main {
    padding-top: 1.5rem;
  }
  .about-channel {
    height: auto;
  }
  .about-channel .main {
    height: auto;
    padding: 0.18rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
  }
  .about-tabs {
    width: 100%;
    height: auto;
    gap: 0.2rem;
    overflow-x: auto;
  }
  .about-tabs a {
    height: 0.48rem;
    font-size: 0.2rem;
  }
  .map-box {
    height: 5.2rem;
  }
  .network-cards,
  .network-cards--five {
    grid-template-columns: 1fr;
  }
  .network-cards--five .network-card {
    grid-column: auto !important;
  }
}
.about-esg-page {
  background: #ffffff;
}
.esg-section {
  padding: 0.76rem 0 0.7rem;
  background: #ffffff;
}
.esg-title,
.honor-title {
  text-align: center;
}
.esg-title {
  margin-bottom: 0.45rem;
}
.esg-title p {
  font-weight: 400;
  font-size: 0.2rem;
  line-height: 0.28rem;
  color: #c41e2a;
}
.esg-title h2 {
  margin-top: 0.1rem;
  font-weight: 600;
  font-size: 0.38rem;
  line-height: 0.52rem;
  color: #222222;
}
.esg-title h3 {
  margin: 0.06rem auto 0;
  width: 8rem;
  font-weight: 400;
  font-size: 0.15rem;
  line-height: 0.26rem;
  color: #555555;
}
.green-hero {
  width: 100%;
  height: 7rem;
  border-radius: 0.06rem;
  overflow: hidden;
  position: relative;
  background-image: url(../img/aboutimg10.png);
  background-size: cover;
}
.green-copy {
  position: absolute;
  left: 1rem;
  top: 1.3rem;
  z-index: 2;
}
.green-copy p {
  font-weight: 600;
  font-size: 0.24rem;
  color: #ffffff;
  line-height: 0.38rem;
}
.cert-list {
  width: 3.4rem;
  position: absolute;
  right: 0.84rem;
  top: 0.57rem;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.2rem;
}
.cert-card {
  text-align: center;
}
.cert-card span {
  display: block;
  margin-top: 0.1rem;
  font-weight: 400;
  font-size: 0.16rem;
  color: #ffffff;
  line-height: 0.22rem;
}
.cert-img {
  width: 1.6rem;
  height: 2.2rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0.05rem 0.05rem 0.05rem 0.05rem;
  border: 0.01rem solid #ffffff;
  padding: 0.1rem;
}
.cert-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.esg-feature {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  align-items: center;
}
.feature-text h2 {
  font-weight: 600;
  font-size: 0.36rem;
  line-height: 0.48rem;
  color: #222222;
}
.feature-text > span {
  width: 0.4rem;
  height: 0.02rem;
  display: block;
  margin: 0.15rem 0 0.26rem;
  background: #c41e2a;
}
.feature-text h3 {
  margin-top: 0.38rem;
  font-weight: 600;
  font-size: 0.2rem;
  line-height: 0.3rem;
  color: #333333;
}
.feature-text .rich-block {
  font-weight: 400;
  font-size: 0.16rem;
  color: #666666;
  line-height: 0.34rem;
  text-align: justify;
}
.feature-photo {
  height: 4.5rem;
  border-radius: 0.1rem;
  overflow: hidden;
  position: relative;
}
.feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feature-photo--lab {
  background: linear-gradient(90deg, rgba(88, 198, 221, 0.35) 0 0.06rem, transparent 0.06rem 0.32rem), linear-gradient(0deg, rgba(88, 198, 221, 0.28) 0 0.06rem, transparent 0.06rem 0.32rem), linear-gradient(180deg, #e8f4ff 0%, #ffffff 48%, #c7dbe8 100%);
  background-size: 0.42rem 0.42rem, 0.42rem 0.42rem, auto;
}
.feature-photo--lab::before {
  content: "";
  width: 2.05rem;
  height: 2.58rem;
  position: absolute;
  left: 1.15rem;
  bottom: 0;
  background: #3cbce8;
  clip-path: polygon(32% 0, 66% 0, 82% 100%, 15% 100%);
}
.feature-photo--water {
  background: radial-gradient(circle at 45% 49%, rgba(255, 255, 255, 0.9) 0 0.04rem, transparent 0.045rem), repeating-radial-gradient(circle at 45% 50%, rgba(255, 255, 255, 0.7) 0 0.02rem, transparent 0.03rem 0.34rem), linear-gradient(135deg, #7bbbae 0%, #2d7d8e 58%, #e3f3d0 100%);
}
.water-rate {
  width: 2rem;
  height: 1.04rem;
  background: linear-gradient(0deg, #f4f7fb 0%, #ffffff 100%);
  box-shadow: 0rem 0rem 0.09rem 0.01rem rgba(119, 119, 119, 0.33);
  border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
  border: 0.01rem solid #ffffff;
  margin-top: 0.24rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.water-rate strong {
  font-weight: 600;
  font-size: 0.32rem;
  color: #003580;
}
.water-rate small {
  margin-top: 0.04rem;
  font-weight: 400;
  font-size: 0.16rem;
  color: #828282;
}
.honor-section {
  height: 10rem;
  padding: 0.74rem 0 0.88rem;
  background-image: url(../img/aboutbg.png);
  background-size: cover;
}
.honor-title {
  margin-bottom: 0.72rem;
}
.honor-title h2 {
  font-weight: 600;
  font-size: 0.34rem;
  line-height: 0.48rem;
  color: #222222;
}
.honor-title span {
  width: 0.38rem;
  height: 0.02rem;
  display: block;
  margin: 0.14rem auto 0;
  background: #c41e2a;
}
.honor-content {
  display: flex;
  gap: 1.78rem;
}
.honor-gallery {
  width: 8rem;
  text-align: center;
  margin-top: 0.15rem;
  margin-left: 0.72rem;
}
.honor-gallery > .rich-block {
  margin-top: 0.2rem;
font-weight: 500;
font-size: 0.16rem;
color: #000000;
}
.honor-board {
  height: 2.55rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.06rem;
  padding: 0.08rem;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0.03rem 0.16rem rgba(0, 53, 128, 0.12);
  position: relative;
}
.green-logo {
  position: absolute;
  right: 0.08rem;
  bottom: 0.08rem;
  width: 1.92rem;
  height: 0.58rem;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-weight: 600;
  font-size: 0.28rem;
  color: #5eb33a;
}
.green-logo span {
  font-size: 0.2rem;
  color: #c41e2a;
}
.honor-list {
  width: 5.38rem;
  height: 6.1rem;
  overflow-y: auto;
  padding-right: 0.24rem;
  scrollbar-width: thin;
  scrollbar-color: #003580 #d6e6f1;
}
.honor-list::-webkit-scrollbar {
  width: 0.04rem;
}
.honor-list::-webkit-scrollbar-track {
  background: #d6e6f1;
}
.honor-list::-webkit-scrollbar-thumb {
  background: #003580;
  border-radius: 0.04rem;
}
.honor-item {
  min-height: 0.45rem;
  border-bottom: 0.01rem solid #ccdde8;
  display: grid;
  grid-template-columns: 0.78rem 1fr;
  align-items: center;
  margin-bottom: 0.18rem;
}
.honor-item time {
  font-weight: 600;
  font-size: 0.16rem;
  color: #6d7b88;
}
.honor-item .rich-block {
  font-weight: 400;
  font-size: 0.18rem;
  line-height: 0.24rem;
  color: #555555;
}
.honor-item:hover time,
.honor-item:hover p {
  color: #003580;
  font-weight: 600;
}
@media (max-width: 1024px) {
  .about-hero {
    height: 6.2rem;
  }
  .about-hero .main {
    padding-top: 1.5rem;
  }
  .about-channel {
    height: auto;
  }
  .about-channel .main {
    height: auto;
    padding: 0.18rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
  }
  .about-tabs {
    width: 100%;
    height: auto;
    gap: 0.2rem;
    overflow-x: auto;
  }
  .about-tabs a {
    height: 0.48rem;
    font-size: 0.2rem;
  }
  .esg-title h3 {
    width: 100%;
  }
  .esg-feature,
  .honor-content {
    grid-template-columns: 1fr;
  }
  .cert-list {
    right: 0.35rem;
  }
  .honor-content {
    gap: 0.5rem;
  }
}
.about-awards-page {
  background: #ffffff;
}
.recognition-section {
  padding: 0.72rem 0 0.54rem;
  background: #ffffff;
}
.recognition-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 0.01rem solid #e5e5e5;
  padding-bottom: 0.32rem;
}
.recognition-head p {
  font-weight: 400;
  font-size: 0.2rem;
  line-height: 0.26rem;
  color: #c41e2a;
}
.recognition-head h2 {
  margin-top: 0.08rem;
  font-weight: 600;
  font-size: 0.4rem;
  line-height: 0.48rem;
  color: #222222;
}
.recognition-head span {
  margin-bottom: 0.08rem;
  font-weight: 400;
  font-size: 0.16rem;
  color: #666666;
}
.cert-slider-section {
  background-image: url(../img/aboutbg3.png);
  background-size: cover;
  background-position: 50% 100%;
  padding-top: 0.48rem;
  padding-bottom: 0.68rem;
}
.cert-slider-section h2 {
  text-align: center;
  font-weight: 600;
  font-size: 0.36rem;
  line-height: 0.42rem;
  color: #222222;
}
.cert-slider {
  margin-top: 0.4rem;
  position: relative;
}
.cert-swiper {
  width: 14.23rem;
  height: 4.22rem;
  margin: 0 auto;
  padding: 0.28rem 0 0.34rem;
  overflow: hidden;
}
.cert-swiper .swiper-wrapper {
  align-items: center;
}
.cert-swiper .swiper-slide {
  width: 2.38rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.45s ease;
}

.cert-swiper .swiper-slide-active .cert-slide {
  opacity: 1;
}
.cert-swiper .swiper-slide-active + .swiper-slide + .swiper-slide  .cert-frame {
  border-color: transparent;
  background: linear-gradient(180deg, #d99930 0%, #ffe3aa 46.32%, rgba(226, 155, 50, 0.85) 100%);
  box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.16);
  transform: scale(1.14);
}
.cert-slide {
  width: 100%;
  text-align: center;
  opacity: 1;
  transition: all 0.45s ease;
}
.cert-slide p {
  margin-top: 0.38rem;
  font-weight: 400;
  font-size: 0.16rem;
  color: #5F5D5D;
  transition: all 0.3s linear;
}
.swiper-slide-active .cert-slide p {
  font-size: 0.18rem;
  color: #222;
}
.cert-frame {
  width: 2.38rem;
  height: 3.25rem;
  margin: 0 auto;
  padding: 0.16rem;
  border: 0.02rem solid #ffffff;
  box-sizing: border-box;
  transition: all 0.45s ease;
}
.cert-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cert-btn {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 1.4rem;
  z-index: 5;
  border-radius: 50%;
  background: #E2E6E9;
  color: #ffffff;
  transition: all 0.6s;
}

.cert-btn:hover {
  background: #C41E2A;
}
.cert-btn::before {
  content: "";
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  left: 50%;
  top: 50%;
  border-left: 0.02rem solid currentColor;
  border-top: 0.02rem solid currentColor;
}
.cert-btn.disabled,
.cert-btn.swiper-button-disabled {
  background: #e4e4e4;
  color: #bebebe;
  cursor: default;
}
.cert-prev {
  left: 0.04rem;
}
.cert-prev::before {
  transform: translate(-35%, -50%) rotate(-45deg);
}
.cert-next {
  right: 0.04rem;
}
.cert-next::before {
  transform: translate(-65%, -50%) rotate(135deg);
}
.featured-awards {
  padding: 0.76rem 0 0.62rem;
  background: #ffffff;
}
.section-title {
  text-align: center;
  font-weight: 600;
  font-size: 0.36rem;
  line-height: 0.48rem;
  color: #222222;
  margin-bottom: 0.4rem;
}
.award-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.24rem;
}
.award-card {
  min-height: 4.6rem;
  border: 0.01rem solid #e5e5e5;
  border-radius: 0.06rem;
  padding: 0.12rem;
  background: #ffffff;
  transition: all 0.3s linear;
}
.award-card:hover {
  box-shadow: 0 0.04rem 0.18rem rgba(0, 53, 128, 0.12);
}
.award-img {
  display: block;
  width: 100%;
  height: 5rem;
  position: relative;
  overflow: hidden;
}
.award-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.award-info {
  padding: 0.22rem 0.1rem 0.06rem;
}
.award-info time {
  font-weight: 500;
  font-size: 0.2rem;
  color: #C41E2A;
}
.award-info .award-desc {
  margin-top: 0.15rem;
  font-weight: 400;
  font-size: 0.2rem;
  line-height: 0.24rem;
  color: #333333;
}
.award-info .award-desc span {
  color: #878787;
}
.award-card .award-img {
  display: block;
  width: 100%;
  height: 5rem;
  padding: 0;
  background: none;
  object-fit: cover;
}
.yearbook-section {
  padding: 0.48rem 0 1.02rem;
  background-image: url(../img/aboutbg2.png);
  background-size: cover;
}
.yearbook-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.42rem 0.54rem;
}
.yearbook-item {
  min-height: 0.86rem;
  display: grid;
  grid-template-columns: 0.42rem 1fr 0.42rem;
  align-items: center;
  text-align: center;
}
.yearbook-item > img {
  width: 0.42rem;
  height: 0.86rem;
  display: block;
  object-fit: contain;
}
.yearbook-item > img:last-child {
  transform: scaleX(-1);
}
.yearbook-item .yearbook-year {
  display: block;
  font-weight: 600;
  font-size: 0.2rem;
  color: #003580;
}
.yearbook-item .yearbook-desc {
  margin-top: 0.06rem;
  font-weight: 400;
  font-size: 0.18rem;
  line-height: 0.2rem;
  color: #333333;
}
@media (max-width: 1024px) {
  .about-hero {
    height: 6.2rem;
  }
  .about-hero .main {
    padding-top: 1.5rem;
  }
  .about-channel {
    height: auto;
  }
  .about-channel .main {
    height: auto;
    padding: 0.18rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
  }
  .about-tabs {
    width: 100%;
    height: auto;
    gap: 0.2rem;
    overflow-x: auto;
  }
  .about-tabs a {
    height: 0.48rem;
    font-size: 0.2rem;
  }
  .recognition-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
  }
  .cert-slider-section {
    height: auto;
    padding-bottom: 0.54rem;
  }
  .cert-swiper {
    width: 100%;
  }
  .cert-prev {
    left: 0;
  }
  .cert-next {
    right: 0;
  }
  .award-grid,
  .yearbook-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .cert-slider {
    height: 3.9rem;
  }
  .cert-swiper {
    height: 3.9rem;
    width: 82%;
  }
  .cert-btn {
    top: 1.04rem;
  }
}