:root {
  --c-overlay: 32, 125, 214;
}

.section-title {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--vmin));
  font-size: calc(40 * var(--vmin));
  font-weight: bold;
  color: var(--c-text-dark);
}

.section-title::after {
  content: "";
  width: calc(60 * var(--vmin));
  height: calc(4 * var(--vmin));
  background: var(--c-green);
}

.about-banner {
  height: calc(840 * var(--vmin));
  overflow: hidden;
}

.about-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.about-nav {
  margin-top: calc(-53 * var(--vmin));
  position: relative;
}

.about-nav__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(24 * var(--vmin));

}

.about-nav__card {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--vmin));
  padding: calc(24 * var(--vmin)) calc(28 * var(--vmin));
  background: #ffffff;
  border-radius: calc(12 * var(--vmin));
  box-shadow: 0px calc(13 * var(--vmin)) calc(29 * var(--vmin)) rgba(3, 61, 148, 0.14);
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}

button.about-nav__card {
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.about-nav__card:hover {
  box-shadow: 0 calc(10 * var(--vmin)) calc(30 * var(--vmin))
    rgba(0, 0, 0, 0.08);
  transform: translateY(calc(-6 * var(--vmin)));
}

.about-nav__card .about-nav__icon {
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.3s, opacity 0.3s;
}

.about-nav__card.is-active .about-nav__icon {
  filter: none;
  opacity: 1;
}

.about-nav__card.is-active .about-nav__text strong,
.about-nav__card.is-active .about-nav__text small {
  color: var(--c-green);
}

.about-nav__icon {
  width: calc(56 * var(--vmin));
  height: calc(56 * var(--vmin));
  object-fit: contain;
  flex-shrink: 0;
}

.about-nav__text {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--vmin));
}

.about-nav__text strong {
  font-size: calc(18 * var(--vmin));
  color: var(--c-text-dark);
}

.about-nav__text small {
  font-size: calc(12 * var(--vmin));
  color: #999999;
}

.about-intro {
  padding-top: calc(120 * var(--vmin));
  padding-bottom: calc(130 * var(--vmin));
}

.about-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(652 * var(--vmin));
  gap: calc(90 * var(--vmin));
  align-items: start;
}

.about-intro__body p {
  margin-top: calc(30 * var(--vmin));
  font-size: calc(16 * var(--vmin));
  color: #666666;
  line-height: 2.1;
  text-align: justify;
}

.about-intro__media img {
  width: 100%;
  aspect-ratio: 652 / 296;
  object-fit: cover;
  border-radius: calc(12 * var(--vmin));
}

.about-intro__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(30 * var(--vmin));
  margin-top: calc(40 * var(--vmin));
}

.about-stat__num {
  font-size: calc(56 * var(--vmin));
  font-weight: bold;
  color: var(--c-green);
  line-height: 1;
}

.about-stat__num i {
  margin-left: calc(6 * var(--vmin));
  font-size: calc(16 * var(--vmin));
  font-style: normal;
}

.about-stat__label {
  margin-top: calc(14 * var(--vmin));
  font-size: calc(14 * var(--vmin));
  color: #666666;
}

.about-era img,
.about-quality img {
  display: block;
  width: 100%;
  height: auto;
}

.about-vision {
  padding-top: calc(120 * var(--vmin));
  padding-bottom: calc(150 * var(--vmin));
}

.about-vision__layout {
  display: grid;

  grid-template-columns: 30% minmax(0, 1fr);
  gap: calc(70 * var(--vmin));
  align-items: start;
}

.about-vision__body p {
  margin-top: calc(30 * var(--vmin));
  font-size: calc(16 * var(--vmin));
  color: #666666;
  line-height: 2.1;
  text-align: justify;
}

.about-vision__cards {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(40 * var(--vmin));
}

.about-vision-card {
  position: relative;
  overflow: hidden;
  border-radius: calc(12 * var(--vmin));
  cursor: pointer;
}

.about-vision-card .thumb {
  position: relative;
  aspect-ratio: 354 / 524;
  overflow: hidden;
}

.about-vision-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease, opacity 500ms ease, filter 500ms ease;
}

.about-vision-card .thumb img:first-child {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translateX(50%) scaleX(2);
  opacity: 0;
  filter: blur(10px);
}

.about-vision-card:hover .thumb img:first-child {
  transform: translateX(0) scaleX(1);
  opacity: 1;
  filter: blur(0);
}

.about-vision-card:hover .thumb img:nth-child(2) {
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  filter: blur(10px);
}

.about-vision-card__info {
  position: absolute;
  inset: auto 0 0 0;
  padding: calc(60 * var(--vmin)) calc(24 * var(--vmin)) calc(20 * var(--vmin));
  background: linear-gradient(
    to top,
    rgba(var(--c-overlay), 0.96) 0%,
    rgba(var(--c-overlay), 0.78) calc(46 * var(--vmin)),
    rgba(var(--c-overlay), 0) 100%
  );
  color: var(--c-white);
}

.about-vision-card__info h3 {
  font-size: calc(18 * var(--vmin));
  font-weight: bold;
}

.about-nav__card,
.about-vision-card,
.about-stat,
.about-intro__body,
.about-intro__media,
.about-vision__body {
  opacity: 0;
}

.about-panel {
  display: none;
}

.about-panel.is-active {
  display: block;
  animation: panelIn 0.4s ease;
}

@keyframes panelIn {
  from {
    opacity: 0;
  }
}

.about-history {
  padding-top: calc(90 * var(--vmin));
}

.about-history__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(40 * var(--vmin));
  padding-bottom: calc(80 * var(--vmin));
}

.about-history__img {
  display: block;
  width: calc(255 * var(--vmin));
  max-width: 100%;
  aspect-ratio: 256 / 155;
  object-fit: cover;
}

.about-history__title {
  margin-top: calc(30 * var(--vmin));
  font-size: calc(36 * var(--vmin));
  font-weight: 500;
  color: var(--c-green);
}

.about-history__timeline {
  position: relative;
  margin-top: calc(40 * var(--vmin));
}

.about-history__timeline::before {
  content: '';
  position: absolute;
  left: calc(43 * var(--vmin));
  top: 0;
  bottom: 0;
  width: calc(3 * var(--vmin));
  background: linear-gradient(to bottom, rgba(42, 130, 228, 0.45), rgba(42, 130, 228, 0.06));
}

.about-history__timeline:not(:has(.about-history__item:nth-child(2)))::before {
  display: none;
}

.about-history__item {
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--vmin));
  margin-bottom: calc(44 * var(--vmin));
}

.about-history__year {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  min-width: calc(86 * var(--vmin));
  text-align: center;
  background: #2a82e4;
  color: var(--c-white);
  font-size: calc(26 * var(--vmin));
  font-weight: 500;
  padding: calc(6 * var(--vmin)) calc(14 * var(--vmin));
  border-radius: calc(6 * var(--vmin));
}

.about-history__desc {
  flex: 1;
  font-size: calc(16 * var(--vmin));
  color: #666666;
  line-height: 1.7;
  padding-top: calc(70 * var(--vmin));
}

.about-culture {
  padding-top: calc(50 * var(--vmin));
  padding-bottom: calc(60 * var(--vmin));
}

.about-culture__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(46 * var(--vmin));
  margin-top: calc(70 * var(--vmin));
}

.about-culture__card img {
  display: block;
  width: 100%;
  height: auto;
}

.about-culture__name {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--vmin));
  margin-top: calc(28 * var(--vmin));
  padding-left: calc(24 * var(--vmin));
  font-size: calc(28 * var(--vmin));
  font-weight: bold;
  color: rgba(9, 141, 229, 1);
}

.about-culture__name::after {
  content: '';
  width: 53%;
  height: calc(4 * var(--vmin));
  background: linear-gradient(to right, rgba(49, 176, 77, 1) 0%, rgba(49, 176, 77, 0) 100%);
}

.about-honor {
  padding-top: calc(50 * var(--vmin));
  padding-bottom: calc(60 * var(--vmin));
}

.about-honor__hero {
  position: relative;
}

.about-honor__banner {
  display: block;
  width: 100%;
  height: auto;
}

.about-honor__stats {
  position: absolute;
  left: calc(120 * var(--vmin));
  bottom: calc(-130 * var(--vmin));
  width: calc(844 * var(--vmin));
  padding: calc(52 * var(--vmin)) calc(56 * var(--vmin));
  background: url('../assets/img/关于我们/企业荣誉/荣誉资质奖项模块背景图.png?v=744473ad') no-repeat center center / cover;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(44 * var(--vmin)) calc(24 * var(--vmin));
  text-align: center;
}

.about-honor__num,
.about-honor__title {
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(191, 108, 25, 1);
}

.about-honor__num {
  font-size: calc(40 * var(--vmin));
  font-weight: bold;
  line-height: 1;
}

.about-honor__num i {
  margin-left: calc(4 * var(--vmin));
  font-size: calc(14 * var(--vmin));
  font-style: normal;
}

.about-honor__label {
  margin-top: calc(12 * var(--vmin));
  font-size: calc(15 * var(--vmin));
  color: var(--c-text-dark);
}

.about-box {
  position: relative;
  padding-top: calc(180 * var(--vmin));
}

.about-honor__layout {
  position: relative;
  display: grid;
  grid-template-columns: calc(340 * var(--vmin)) minmax(0, 1fr);
  gap: calc(60 * var(--vmin));
  align-items: start;
}

.about-honor__medal {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(368 * var(--vmin));
}

.about-honor__title {
  margin-top: calc(16 * var(--vmin));
  padding-bottom: calc(24 * var(--vmin));
  border-bottom: 1px solid rgba(229, 229, 229, 1);
  font-size: calc(30 * var(--vmin));
  font-weight: bold;
}

.about-honor__list {
  margin-top: calc(24 * var(--vmin));
}

.about-honor__list li {
  padding: calc(14 * var(--vmin)) 0;
  font-size: calc(20 * var(--vmin));
  font-weight: 500;
  color: rgba(94, 94, 94, 1);
  line-height: 1.6;
}

.about-honor__main {
  margin-top: calc(44 * var(--vmin));
}

.about-honor__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(28 * var(--vmin));
}

.about-honor__cert {
  padding: calc(10 * var(--vmin));
  border: 1px solid rgba(225, 232, 237, 1);
  background: var(--c-white);
}

.about-honor__cert img {
  display: block;
  width: 100%;
  height: auto;
}

.about-honor-progress {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--vmin));
  margin-top: calc(50 * var(--vmin));
}

.about-honor-progress__track {
  flex: 1;
  height: calc(4 * var(--vmin));
  border-radius: var(--radius-pill);
  background: #e5e5e5;
  overflow: hidden;
}

.about-honor-progress__bar {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--c-green);
  transition: width 0.3s ease;
}

.about-honor-progress__btns {
  display: flex;
  gap: calc(20 * var(--vmin));
}

.about-honor-progress__btns button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--vmin));
  height: calc(36 * var(--vmin));
  color: var(--c-green);
  transition: color 0.25s;
}

.about-honor-progress__btns button:disabled {
  color: #c9c9c9;
  cursor: default;
}

@media (max-width: 1400px) {
  .about-honor__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-intro__layout {
    grid-template-columns: minmax(0, 1fr) calc(500 * var(--vmin));
    gap: calc(50 * var(--vmin));
  }

  .about-honor__stats {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .about-intro,
  .about-vision {
    padding-top: calc(80 * var(--vmin));
  }

  .about-intro {
    padding-bottom: calc(80 * var(--vmin));
  }

  .about-vision {
    padding-bottom: calc(100 * var(--vmin));
  }

  .about-intro__layout,
  .about-vision__layout {
    grid-template-columns: 1fr;
    gap: calc(44 * var(--vmin));
  }

  .about-honor__layout {
    grid-template-columns: 1fr;
    gap: calc(44 * var(--vmin));
  }

  .about-honor__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-history__grid {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: calc(60 * var(--vmin));
  }

  .about-banner {
    height: calc(620 * var(--vmin));
  }

  .about-honor__stats {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .about-banner {
    height: calc(320 * var(--vmin));
  }

  .about-nav {
    padding-top: calc(30 * var(--vmin));
  }

  .about-nav__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(16 * var(--vmin));
  }

  .about-intro,
  .about-vision,
  .about-history {
    padding-top: calc(60 * var(--vmin));
  }

  .about-vision__cards {
    gap: calc(16 * var(--vmin));
  }

  .about-history__grid {
    grid-template-columns: 1fr;
    padding-bottom: calc(40 * var(--vmin));
  }

  .about-culture {
    padding-top: calc(40 * var(--vmin));
    padding-bottom: calc(40 * var(--vmin));
  }

  .about-culture__grid {
    grid-template-columns: 1fr;
    gap: calc(30 * var(--vmin));
  }

  .about-honor__stats {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .about-box {
    padding-top: calc(60 * var(--vmin));
  }

  .about-honor__medal {
    width: calc(220 * var(--vmin));
  }

  .about-honor__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-title {
    font-size: calc(22 * var(--vmin));
  }
}