@charset "utf-8";

/* ==========================================================
   about-page.css
   模块：关于中知院页面
   作用：控制二级 Banner、使命价值文化图块、
        中知技术院简介、资质证书衔接、
        联系方式及响应式布局。
   ========================================================== */

:root {
  --about-primary: #073e99;
  --about-primary-dark: #052c72;
  --about-card-bg: rgba(3, 45, 123, 0.83);
  --about-gold: #d6b35b;
  --about-text: #4c535b;
  --about-heading: #242a31;
  --about-line: #cfd5dc;
  --about-soft-bg: #f4f5f6;
  --about-container: 1240px;
}

.about-page-body {
  min-width: 0;
  overflow-x: hidden;
  background: #ffffff;
}

.about-page,
.about-page *,
.about-page *::before,
.about-page *::after {
  box-sizing: border-box;
}

.about-page {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  background: #ffffff;
}

.about-page img {
  max-width: 100%;
}

/* ==========================================================
   1. 二级 Banner
   ========================================================== */

.about-banner {
  position: relative;
  width: 100%;
  height: clamp(500px, 34vw, 650px);
  min-height: 500px;
  overflow: hidden;
  background: #234e87;
  isolation: isolate;
}

.about-banner__media,
.about-banner__overlay,
.about-banner__content {
  position: absolute;
  inset: 0;
}

.about-banner__media {
  z-index: 1;
}

.about-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.about-banner__overlay {
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(0, 42, 104, 0.48) 0%,
      rgba(7, 59, 142, 0.32) 45%,
      rgba(3, 43, 101, 0.26) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 31, 84, 0.20) 0%,
      rgba(0, 34, 88, 0.13) 55%,
      rgba(0, 26, 73, 0.38) 100%
    );
}

.about-banner__content {
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(var(--about-container), calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  padding: 150px 0 54px;
}

/* ==========================================================
   2. Banner 宣传文字
   ========================================================== */

.about-banner__slogan {
  width: 100%;
  margin: 0 auto 44px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 7px rgba(0, 24, 67, 0.52);
}

.about-banner__slogan p {
  margin: 0;
}

.about-banner__slogan-main {
  font-size: clamp(23px, 1.8vw, 34px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.about-banner__slogan-sub {
  margin-top: 8px !important;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* ==========================================================
   3. 三个蓝色图块
   ========================================================== */

.about-banner__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 42px;
  width: min(920px, 100%);
  margin: 0 auto;
}

.about-banner-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 148px;
  margin: 0;
  padding: 24px 22px 22px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background:
    linear-gradient(
      rgba(3, 51, 137, 0.84),
      rgba(2, 43, 119, 0.90)
    );
  box-shadow: 0 12px 34px rgba(0, 25, 72, 0.12);
  color: #ffffff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  appearance: none;
  transform: translateY(0);
  transform-origin: center center;
  transition:
    transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.42s ease,
    background-color 0.35s ease;
}

.about-banner-card__label,
.about-banner-card__title,
/*.about-banner-card__description */{
  display: block;
  width: 100%;
}

.about-banner-card__label {
  margin-bottom: 13px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.10em;
}

.about-banner-card__title {
  position: relative;
  padding-bottom: 12px;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.about-banner-card__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--about-gold);
  transform: translateX(-50%);
  transition: width 0.38s ease;
}

/*.about-banner-card__description {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.93);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: 0.04em;
}*/

/* ==========================================================
   4. 图块悬停动画
   只改变 transform，不改变文档流，不推动相邻图块。
   ========================================================== */

@media (hover: hover) and (pointer: fine) {
  .about-banner-card:hover,
  .about-banner-card:focus-visible {
    transform: translateY(-14px);
    box-shadow: 0 22px 44px rgba(0, 24, 72, 0.28);
    outline: none;
  }

  .about-banner-card:hover .about-banner-card__title::after,
  .about-banner-card:focus-visible .about-banner-card__title::after {
    width: 46px;
  }
}

.about-banner-card.is-active {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 24, 72, 0.25);
}

.about-banner-card.is-active .about-banner-card__title::after {
  width: 46px;
}

/* ==========================================================
   5. 中知技术院简介
   ========================================================== */

.about-intro {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 70px 0 92px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 68%,
      rgba(239, 246, 252, 0.82) 100%
    );
}

.about-intro__decor {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 749px;
  pointer-events: none;
  opacity: 0.65;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(225, 238, 248, 0.76) 100%
    ),
    url("/images/about-intro-bg.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

.about-intro__container {
  position: relative;
  z-index: 1;
  width: min(var(--about-container), calc(100% - 48px));
  margin: 0 auto;
}

.about-intro__heading {
  margin-bottom: 30px;
  text-align: center;
}

.about-intro__heading h1 {
  margin: 0;
  color: var(--about-heading);
  font-size: clamp(28px, 2vw, 34px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.about-intro__summary {
  color: var(--about-text);
  font-size: 16px;
  line-height: 2;
  text-align: justify;
}

.about-intro__summary p {
  margin: 0 0 12px;
  text-indent: 2em;
}

.about-intro__features {
  display: grid;
  gap: 25px;
  margin-top: 30px;
}

/* ==========================================================
   6. 四项核心优势
   ========================================================== */

.about-feature {
  min-width: 0;
}

.about-feature__header {
  position: relative;
  display: flex;
  min-height: 35px;
  align-items: center;
  gap: 10px;
  padding: 0 0 8px;
  border-bottom: 1px dashed #aeb9c5;
}

.about-feature__icon {
  display: inline-flex;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  color: var(--about-primary);
}

.about-feature__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-feature__title {
  margin: 0;
  color: var(--about-primary);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.about-feature__content {
  padding: 9px 0 0 0;
  color: var(--about-text);
  font-size: 16px;
  line-height: 1.95;
  text-align: justify;
}

.about-feature__content p {
  margin: 0;
  text-indent: 2em;
}

/* ==========================================================
   7. 资质证书模块衔接
   轮播主体继续由 section-certificates.css 控制。
   ========================================================== */

.about-certificates {
  position: relative;
  width: 100%;
  padding-top: 64px;
  padding-bottom: 72px;
  background: #ffffff;
}

.about-certificates .section-inner {
  width: min(var(--about-container), calc(100% - 48px));
  margin: 0 auto;
}

.about-certificates__heading {
  margin-bottom: 34px;
  text-align: center;
}

.about-certificates__heading .main-title {
  color: var(--about-heading);
  font-size: 20px;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.about-certificates__heading .divider-bar {
  width: 86px;
  height: 3px;
  margin: 18px auto 0;
  background: var(--about-gold);
}

/* ==========================================================
   8. 联系方式
   ========================================================== */

.about-contact {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 62px 0 76px;
  background: #f4f4f4;
}

.about-contact__decor {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("/images/about-contact-map.png");
  background-repeat: no-repeat;
  background-position: center 72%;
  background-size: min(920px, 88vw) auto;
}

.about-contact__container {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

.about-contact__phone {
  display: flex;
  width: min(470px, 100%);
  min-height: 58px;
  margin: 0 auto 38px;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--about-primary);
  color: #ffffff;
  font-size: 17px;
  line-height: 1.4;
  box-shadow: 0 9px 26px rgba(2, 45, 116, 0.15);
}

.about-contact__phone-icon {
  display: inline-flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.about-contact__phone-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.about-contact__phone a {
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.03em;
}

.about-contact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 70px;
  padding: 30px 56px;
  background: rgba(255, 255, 255, 0.70);
}

.about-contact__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-width: 0;
}

.about-contact__item--address {
  margin-top: 10px;
}

.about-contact__icon {
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  color: #313942;
}

.about-contact__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-contact__label {
  margin: 0 0 5px;
  color: #353c44;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}

.about-contact__value {
  margin: 0;
  color: #4f565e;
  font-size: 14px;
  line-height: 1.7;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

a.about-contact__value:hover,
a.about-contact__value:focus-visible {
  color: var(--about-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.about-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================
   9. 平板端适配
   ========================================================== */

@media (max-width: 1200px) {
  .about-banner {
    height: 560px;
    min-height: 560px;
  }

  .about-banner__content {
    width: calc(100% - 40px);
    padding-bottom: 44px;
  }

  .about-banner__cards {
    gap: 22px;
    width: min(850px, 100%);
  }

  .about-banner-card {
    min-height: 140px;
    padding: 20px 16px;
  }

  .about-banner-card__title {
    font-size: 16px;
  }

  /*.about-banner-card__description {
    font-size: 14px;
  }*/

  .about-intro__container,
  .about-certificates .section-inner {
    width: calc(100% - 40px);
  }

  .about-contact__container {
    width: calc(100% - 40px);
  }

  .about-contact__grid {
    gap: 24px 38px;
    padding-right: 38px;
    padding-left: 38px;
  }
}

/* ==========================================================
   10. 手机端适配
   ========================================================== */

@media (max-width: 768px) {
  .about-banner {
    height: auto;
    min-height: 0;
    padding-top: 0;
    overflow: hidden;
  }

  .about-banner__media,
  .about-banner__overlay {
    position: absolute;
    inset: 0;
  }

  .about-banner__media img {
    object-position: center top;
  }

  .about-banner__content {
    position: relative;
    inset: auto;
    width: calc(100% - 32px);
    min-height: 720px;
    padding: 145px 0 38px;
  }

  .about-banner__slogan {
    margin-bottom: 28px;
  }

  .about-banner__slogan-main {
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0.08em;
  }

  .about-banner__slogan-sub {
    margin-top: 7px !important;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.02em;
  }

  .about-banner__cards {
    grid-template-columns: 1fr;
    gap: 14px;
    width: min(430px, 100%);
  }

  .about-banner-card {
    min-height: 118px;
    padding: 17px 16px;
    transform: none;
  }

  .about-banner-card__label {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .about-banner-card__title {
    padding-bottom: 9px;
    font-size: 16px;
  }

 /* .about-banner-card__description {
    margin-top: 6px;
    font-size: 14px;
  }*/

  .about-banner-card__title::after {
    width: 42px;
  }

  .about-banner-card.is-active {
    transform: translateY(-5px);
  }

  .about-intro {
    padding: 50px 0 66px;
  }

  .about-intro__container,
  .about-certificates .section-inner,
  .about-contact__container {
    width: calc(100% - 32px);
  }

  .about-intro__heading {
    margin-bottom: 24px;
  }

  .about-intro__heading h1 {
    font-size: 24px;
  }

  .about-intro__summary,
  .about-feature__content {
    font-size: 15px;
    line-height: 1.85;
    text-align: left;
  }

  .about-intro__summary p,
  .about-feature__content p {
    text-indent: 2em;
  }

  .about-intro__features {
    gap: 23px;
    margin-top: 26px;
  }

  .about-feature__header {
    align-items: flex-start;
  }

  .about-feature__title {
    font-size: 16px;
  }

  .about-feature__content {
    padding-left: 0;
  }

  .about-certificates {
    padding-top: 48px;
    padding-bottom: 54px;
  }

  .about-certificates__heading .main-title {
    font-size: 15px;
    line-height: 1.75;
  }

  .about-contact {
    padding: 46px 0 54px;
  }

  .about-contact__phone {
    min-height: 54px;
    margin-bottom: 28px;
    padding: 0 15px;
    font-size: 14px;
  }

  .about-contact__phone a {
    font-size: 19px;
  }

  .about-contact__grid {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 20px;
  }

  .about-contact__item--address {
    margin-top: 0;
  }
}

@media (max-width: 420px) {
  .about-banner__content {
    width: calc(100% - 28px);
    min-height: 700px;
    padding-top: 128px;
  }

  .about-banner__slogan-main {
    font-size: 20px;
  }

  .about-banner__slogan-sub {
    font-size: 14px;
  }

  .about-banner-card {
    min-height: 112px;
  }

  .about-intro__container,
  .about-certificates .section-inner,
  .about-contact__container {
    width: calc(100% - 28px);
  }

  .about-contact__phone {
    flex-wrap: wrap;
    gap: 3px 7px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .about-contact__phone-icon {
    width: 23px;
    height: 23px;
  }

  .about-contact__phone a {
    font-size: 18px;
  }
}

/* ==========================================================
   减少动态效果
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .about-banner-card,
  .about-banner-card__title::after,
  .about-contact__value {
    transition: none;
  }

  .about-banner-card:hover,
  .about-banner-card:focus-visible,
  .about-banner-card.is-active {
    transform: none;
  }
}

/* ==========================================================
   V3最终修正：Banner蓝色图块与资质轮播衔接
   ========================================================== */

/* Banner两行宣传文字：PC端统一20px */
.about-banner__slogan p,
.about-banner__slogan-main,
.about-banner__slogan-sub {
  font-size: 21px !important;
  line-height: 1.75 !important;
  letter-spacing: 3px;
}

/* Banner内容区恢复居中，不再使用80%宽度放大卡片 */
.about-banner__content {
  width: min(var(--about-container), calc(100% - 48px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* 三个蓝色图块：缩小宽度和高度，保持同一水平线 */
.about-banner__cards {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 42px !important;
  width: min(1000px, 100%) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.about-banner-card {
  min-height: 150px !important;
  padding: 22px 20px 20px !important;
  justify-content: center !important;
  transform: translateY(0) !important;
  will-change: transform;
  transition:
    transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.42s ease !important;
}

.about-banner-card__label {
  position: relative !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 16px !important;
}

/* 黄色线固定在小标题下方 */
.about-banner-card__title::after {
  content: none !important;
  display: none !important;
}

.about-banner-card__label::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--about-gold);
  transform: translateX(-50%);
  transition: width 0.38s ease;
}

.about-banner-card__title {
  padding-bottom: 0 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
}

/* 不再依赖hover媒体查询，桌面鼠标经过即可平滑上浮 */
.about-banner-card:hover,
.about-banner-card:focus-visible {
  z-index: 5;
  transform: translateY(-14px) !important;
  box-shadow: 0 22px 44px rgba(0, 24, 72, 0.28) !important;
  outline: none;
}

.about-banner-card:hover .about-banner-card__label::after,
.about-banner-card:focus-visible .about-banner-card__label::after,
.about-banner-card.is-active .about-banner-card__label::after {
  width: 44px;
}

/* 简介标题下方蓝色装饰条 */
.about-intro__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-intro__heading::after {
  content: "";
  width: 76px;
  height: 3px;
  margin-top: 15px;
  background: var(--about-primary);
}

/* 资质模块保持首页通栏结构 */
.about-certificates {
  overflow: hidden !important;
  padding: 58px 0 62px !important;
}

.about-certificates .section-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 电话与联系方式背景继续使用指定素材 */
.about-contact__phone {
  display: block !important;
  width: min(742px, 100%) !important;
  min-height: 0 !important;
  aspect-ratio: 742 / 88;
  margin: 0 auto 38px !important;
  padding: 0 !important;
  background-color: #0c439e !important;
  background-image: url("/images/tel.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
}

.about-contact__phone-icon,
.about-contact__phone > span:not(.about-visually-hidden),
.about-contact__phone > a {
  display: none !important;
}

.about-contact__decor {
  opacity: 1 !important;
  background-image: url("/images/about-contact-map.png") !important;
  background-position: center bottom !important;
  background-size: cover !important;
}

.about-contact__container {
  width: min(1760px, calc(100% - 48px)) !important;
}

.about-contact__grid {
  gap: 46px 110px !important;
  padding: 48px 90px !important;
  background: rgba(255, 255, 255, 0.88) !important;
}

.about-contact__label {
  font-size: 23px !important;
}

.about-contact__value {
  font-size: 21px !important;
}

@media (max-width: 1200px) {
  .about-banner__content {
    width: calc(100% - 40px) !important;
  }

  .about-banner__cards {
    width: min(860px, 100%) !important;
    gap: 24px !important;
  }

  .about-banner-card {
    min-height: 140px !important;
    padding: 20px 16px !important;
  }

  .about-banner-card__title {
    font-size: 16px !important;
  }

  .about-contact__grid {
    gap: 34px 52px !important;
    padding: 40px 48px !important;
  }

  .about-contact__label {
    font-size: 18px !important;
  }

  .about-contact__value {
    font-size: 16px !important;
  }
}

@media (max-width: 768px) {
  .about-banner__content {
    width: 100% !important;
  }

  .about-banner__slogan p,
  .about-banner__slogan-main,
  .about-banner__slogan-sub {
    font-size: 16px !important;
  }

  .about-banner__cards {
    grid-template-columns: 1fr !important;
    width: min(430px, calc(100% - 32px)) !important;
    gap: 14px !important;
  }

  .about-banner-card {
    min-height: 118px !important;
    padding: 17px 16px !important;
  }

  .about-banner-card__label {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    font-size: 13px !important;
  }

  .about-banner-card__label::after {
    width: 42px;
  }

  .about-banner-card__title {
    font-size: 16px !important;
  }

  .about-banner-card:hover,
  .about-banner-card:focus-visible {
    transform: none !important;
  }

  .about-banner-card.is-active {
    transform: translateY(-5px) !important;
  }

  .about-intro__heading::after {
    width: 62px;
    margin-top: 12px;
  }

  .about-contact__container {
    width: calc(100% - 32px) !important;
  }

  .about-contact__grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
    padding: 28px 22px !important;
  }

  .about-contact__label {
    font-size: 16px !important;
  }

  .about-contact__value {
    font-size: 14px !important;
  }
}

@media (max-width: 420px) {
  .about-banner__slogan p,
  .about-banner__slogan-main,
  .about-banner__slogan-sub {
    font-size: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-banner-card,
  .about-banner-card__label::after {
    transition: none !important;
  }

  .about-banner-card:hover,
  .about-banner-card:focus-visible,
  .about-banner-card.is-active {
    transform: none !important;
  }
}

/* ==========================================================
   V4最终修复：Banner内容位置与蓝色图块上浮
   说明：
   1. PC端通过 padding-bottom 控制宣传语和图块整体上下位置；
   2. 使用 translate3d 实现稳定、丝滑的上浮动作；
   3. 本区块位于文件末尾，用于覆盖前面减少动态效果等旧规则。
   ========================================================== */

/* PC端：padding-bottom 越大，Banner内容整体越向上 */
@media screen and (min-width: 769px) {
  .about-banner__content {
    padding: 150px 0 90px !important;
  }
}

/* 蓝色图块默认状态 */
.about-banner-card {
  transform: translate3d(0, 0, 0) !important;
  transform-origin: center center !important;
  will-change: transform;

  transition:
    transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.42s ease !important;
}

/* PC端：鼠标悬停或键盘聚焦时平滑上浮 */
@media screen and (min-width: 769px) {
  .about-banner-card:hover,
  .about-banner-card:focus-visible {
    z-index: 5;
    transform: translate3d(0, -14px, 0) !important;
    box-shadow:
      0 22px 44px rgba(0, 24, 72, 0.28) !important;
    outline: none;
  }
}

/* 黄色装饰线继续位于小标题下方 */
.about-banner-card:hover
.about-banner-card__label::after,
.about-banner-card:focus-visible
.about-banner-card__label::after,
.about-banner-card.is-active
.about-banner-card__label::after {
  width: 44px;
}

/* 手机端不执行鼠标悬停上浮，点击状态仍由 about-page.js 控制 */
@media screen and (max-width: 768px) {
  .about-banner-card:hover,
  .about-banner-card:focus-visible {
    transform: translate3d(0, 0, 0) !important;
  }

  .about-banner-card.is-active {
    transform: translate3d(0, -5px, 0) !important;
  }
}

/* ==========================================================
   V6 联系方式模块：A/B双画布结构
   A：全宽浅灰背景
   B：与中知院简介相同宽度，白底，地图底部对齐
   ========================================================== */

/* 画布A：整页通栏背景 */
.about-contact {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 72px 0 88px !important;
  background: #f5f6f6 !important;
}

/* 关闭旧版独立地图装饰层 */
.about-contact__decor,
.about-contact__container,
.about-contact__grid,
.about-contact__phone-panel,
.about-contact__map-panel,
.about-contact__map {
  display: none !important;
}

/* 画布B：与简介模块宽度完全一致 */
.about-contact__canvas {
  position: relative;
  width: min(var(--about-container), calc(100% - 48px));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #dcdfe2;
  border-radius: 5px;
  background-color: #ffffff;
  background-image: url("../../images/about-contact-map.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

/* ----------------------------------------------------------
   div1：电话行
   ---------------------------------------------------------- */

.about-contact__phone-row {
  display: flex;
  width: 100%;
  min-height: 108px;
  align-items: flex-start;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
}

/* div2：蓝色电话条 */
.about-contact__phone-bar {
  position: relative;
  display: inline-flex;
  width: 520px;
  min-height: 66px;
  padding: 0 28px 0 86px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  background-color: #07368c;
  background-image: url("/images/tel.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.about-contact__phone-title {
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.about-contact__phone-number {
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.about-contact__phone-bar:hover,
.about-contact__phone-bar:focus-visible {
  color: #ffffff;
  outline: 2px solid rgba(7, 54, 140, 0.24);
  outline-offset: -2px;
}

/* ----------------------------------------------------------
   div3、div4、div5公共两列布局
   ---------------------------------------------------------- */

.about-contact__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  z-index: 1;
}

/* div3：浅灰色块 */
.about-contact__row--cooperation {
  min-height: 100px;
  align-items: center;
  background: rgba(245, 246, 246, 0.96);
}

/* div4：透明，显示画布B中的地图 */
.about-contact__row--media {
  min-height: 140px;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
}

/* div5：浅灰色块 */
.about-contact__row--address {
  min-height: 140px;
  align-items: center;
  background: rgba(245, 246, 246, 0.94);
}

/* ----------------------------------------------------------
   联系方式单元格
   ---------------------------------------------------------- */

.about-contact__item {
  display: grid !important;
  grid-template-columns: 30px minmax(0, auto) !important;
  width: min(430px, calc(100% - 48px));
  min-width: 0;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: start !important;
  justify-content: center;
  gap: 13px !important;
  text-align: left;
}

.about-contact__item-content {
  min-width: 0;
}

.about-contact__icon {
  display: inline-flex !important;
  width: 26px !important;
  height: 26px !important;
  margin-top: 2px;
  align-items: center;
  justify-content: center;
  color: #323c46 !important;
}

.about-contact__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-contact__label {
  margin: 0 0 7px !important;
  color: #303941 !important;
  font-size: 18px !important;
  line-height: 1.45;
  font-weight: 400 !important;
  letter-spacing: 0;
}

.about-contact__value {
  display: block;
  margin: 0 !important;
  color: #424c56 !important;
  font-size: 17px !important;
  line-height: 1.65;
  font-weight: 400;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

a.about-contact__value:hover,
a.about-contact__value:focus-visible {
  color: var(--about-primary) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------
   平板端
   ---------------------------------------------------------- */

@media screen and (max-width: 1200px) {
  .about-contact {
    padding-top: 58px !important;
    padding-bottom: 70px !important;
  }

  .about-contact__canvas {
    width: calc(100% - 40px);
  }

  .about-contact__phone-bar {
    width: min(520px, 100%);
  }

  .about-contact__item {
    width: min(380px, calc(100% - 32px));
  }

  .about-contact__label {
    font-size: 17px !important;
  }

  .about-contact__value {
    font-size: 15px !important;
  }
}

/* ----------------------------------------------------------
   手机端
   要求：每行仍显示两个联系方式。
   每一行通过不同色块区分。
   ---------------------------------------------------------- */

@media screen and (max-width: 768px) {
  .about-contact {
    padding: 38px 0 48px !important;
  }

  .about-contact__canvas {
    width: calc(100% - 24px);
    background-size: auto 72%;
  }

  .about-contact__phone-row {
    min-height: 74px;
  }

  .about-contact__phone-bar {
    width: 100%;
    min-height: 58px;
    padding-right: 10px;
    padding-left: 62px;
    gap: 5px;
    background-size: auto 100%;
  }

  .about-contact__phone-title {
    font-size: 15px;
  }

  .about-contact__phone-number {
    font-size: 18px;
  }

  /* 手机端继续每行两列 */
  .about-contact__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-contact__row--cooperation,
  .about-contact__row--media,
  .about-contact__row--address {
    min-height: 138px;
    align-items: stretch;
  }

  /* 每行色块区分 */
  .about-contact__row--cooperation {
    background: #eef1f3;
  }

  .about-contact__row--media {
    background: rgba(255, 255, 255, 0.58);
  }

  .about-contact__row--address {
    background: #f2f3f4;
  }

  .about-contact__item {
    display: flex !important;
    width: 100%;
    min-width: 0;
    padding: 18px 10px !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
    gap: 7px !important;
    text-align: center;
  }

  .about-contact__item:first-child {
    border-right: 1px solid rgba(116, 126, 136, 0.18);
  }

  .about-contact__icon {
    width: 23px !important;
    height: 23px !important;
    margin-top: 0;
  }

  .about-contact__label {
    margin-bottom: 4px !important;
    font-size: 14px !important;
  }

  .about-contact__value {
    max-width: 100%;
    font-size: 11px !important;
    line-height: 1.55;
    text-align: center;
    word-break: break-all;
  }
}

@media screen and (max-width: 420px) {
  .about-contact__canvas {
    width: calc(100% - 16px);
  }

  .about-contact__phone-bar {
    padding-left: 52px;
  }

  .about-contact__phone-title {
    font-size: 13px;
  }

  .about-contact__phone-number {
    font-size: 16px;
  }

  .about-contact__row--cooperation,
  .about-contact__row--media,
  .about-contact__row--address {
    min-height: 130px;
  }

  .about-contact__item {
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  .about-contact__label {
    font-size: 13px !important;
  }

  .about-contact__value {
    font-size: 10px !important;
  }
}

/* ==========================================================
   V7 div6：画布B底部留白区域
   宽度100%，无独立背景色，默认高度40px。
   ========================================================== */

.about-contact__bottom-space {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .about-contact__bottom-space {
    height: 32px;
    min-height: 32px;
  }
}

/* ==========================================================
   V8 联系方式内容排版与图标
   1. 标题与联系方式分两行；
   2. 两行均居中对齐；
   3. 六个项目使用六种不同SVG图标；
   4. 邮箱改为普通文本，不再使用链接。
   ========================================================== */

.about-contact__item {
  display: flex !important;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 22px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.about-contact__item-content {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.about-contact__heading-line {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
}

.about-contact__heading-line .about-contact__icon {
  display: inline-flex !important;
  flex: 0 0 25px;
  width: 25px !important;
  height: 25px !important;
  margin: 0 !important;
  align-items: center;
  justify-content: center;
  color: #323c46 !important;
}

.about-contact__heading-line .about-contact__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-contact__label {
  margin: 0 !important;
  color: #303941 !important;
  font-size: 18px !important;
  line-height: 1.45;
  font-weight: 400 !important;
  text-align: center !important;
}

.about-contact__value {
  display: block;
  width: 100%;
  margin: 8px 0 0 !important;
  color: #424c56 !important;
  font-size: 17px !important;
  line-height: 1.65;
  font-weight: 400;
  text-align: center !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 联系方式模块中不再存在邮箱链接 */
.about-contact__item a.about-contact__value {
  pointer-events: none;
  cursor: default;
  color: #424c56 !important;
  text-decoration: none !important;
}

@media screen and (max-width: 768px) {
  .about-contact__item {
    padding: 16px 8px !important;
  }

  .about-contact__heading-line {
    gap: 6px;
  }

  .about-contact__heading-line .about-contact__icon {
    flex-basis: 22px;
    width: 22px !important;
    height: 22px !important;
  }

  .about-contact__label {
    font-size: 14px !important;
  }

  .about-contact__value {
    margin-top: 6px !important;
    font-size: 11px !important;
    line-height: 1.5;
  }
}

@media screen and (max-width: 420px) {
  .about-contact__item {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  .about-contact__heading-line {
    gap: 4px;
  }

  .about-contact__heading-line .about-contact__icon {
    flex-basis: 20px;
    width: 20px !important;
    height: 20px !important;
  }

  .about-contact__label {
    font-size: 13px !important;
  }

  .about-contact__value {
    font-size: 10px !important;
  }
}

/* ==========================================================
   V9 关于中知院导航锚点
   三个模块支持固定导航偏移与原生平滑滚动兜底。
   实际动画由 about-page.js 统一控制。
   ========================================================== */

html {
  scroll-behavior: smooth;
}

#about-mission,
#about-intro,
#about-contact {
  scroll-margin-top: 130px;
  outline: none;
}

@media screen and (max-width: 1200px) {
  #about-mission,
  #about-intro,
  #about-contact {
    scroll-margin-top: 105px;
  }
}

@media screen and (max-width: 768px) {
  #about-mission,
  #about-intro,
  #about-contact {
    scroll-margin-top: 88px;
  }
}