/* ============================================================
   洲际建设企业官网 - 视觉规范基础样式
   Design Specifications
   来源: MasterGo 视觉规范 (layer_id: 212:18750)
   ============================================================ */
/* ===== CSS 变量（Design Tokens）===== */
:root {
  /* -- 颜色 Colours -- */
  --color-brand: #ea272c;
  --color-brand-rgb: 234, 39, 44;
  --color-brand-alpha-30: rgba(234, 39, 44, 0.3);
  --color-brand-alpha-06: rgba(234, 39, 44, 0.06);
  --color-auxiliary: #27282e;
  --color-auxiliary-rgb: 39, 40, 46;
  /* 文字层级 */
  --color-text-primary: #181818;
  --color-text-secondary: #666666;
  --color-text-tertiary: #888888;
  /* 功能色 */
  --color-divider: #dddddd;
  --color-card-bg: #f6f6f6;
  --color-white: #ffffff;
  --color-black: #000000;
  /* -- 字体 Font -- */
  --font-family-zh: "Microsoft YaHei", "微软雅黑", sans-serif;
  --font-family-en: "Arial", sans-serif;
  --font-family-base: var(--font-family-zh);
  /* 字号层级（对应设计稿字号） */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xl-bold: 28px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-size-4xl: 56px;
  --font-size-hero: 160px;
  /* 字重 */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* 行高 */
  --line-height-tight: 1;
  --line-height-normal: 1.5;
  --line-height-loose: 2;
  /* -- 按钮 Button -- */
  --btn-height: 48px;
  --btn-height-bold: 56px;
  --btn-width: 152px;
  /* -- 间距 Spacing -- */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  /* 列间距（横向，导航栏等） */
  --gap-col-sm: 20px;
  --gap-col-md: 40px;
  --gap-col-lg: 60px;
  --gap-col-xl: 70px;
  /* 横间距（纵向，板块之间） */
  --gap-row-sm: 16px;
  --gap-row-md: 24px;
  --gap-row-lg: 40px;
  --gap-row-xl: 60px;
  /* -- 页面数值 Page Number -- */
  --page-max-width: 1920px;
  --page-content-padding: 98px;
  --page-nav-height: 80px;
  --page-hero-height: 960px;
  /* -- 圆角 Radius -- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-round: 50px;
  /* -- 阴影 Shadow -- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.18);
  /* -- 过渡 Transition -- */
  --transition-fast: 0.25s ease;
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s ease;
  --grid-columns: 12;
  /* 总列数 */
  --grid-gap: 20px;
  /* 列间距 */
  --container-max: 1667px;
  /* 容器最大宽度 */
  --container-pad: 10px;
  /* 容器左右内边距 */
}
/* ========== 全局重置 Reset ========== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  min-height: 100vh;
}
/* ========== 标题 Typography Headings ========== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}
h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-2xl);
}
h3 {
  font-size: var(--font-size-xl);
}
h4 {
  font-size: var(--font-size-lg);
}
h5 {
  font-size: var(--font-size-base);
}
h6 {
  font-size: var(--font-size-sm);
}
/* ========== 链接 Links ========== */
a {
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-text-primary);
}
/* ========== 图片 Images ========== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ========== 列表 Lists ========== */
ul,
ol {
  list-style: none;
}
/* ========== 按钮 Buttons ========== */
button {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: var(--font-family-base);
  background: transparent;
}
input,
textarea,
select {
  font-family: var(--font-family-base);
  outline: none;
  border: none;
}
.ellipsis {
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 隐藏溢出 */
  text-overflow: ellipsis;
  /* 溢出部分显示省略号 */
}
/* 最外层容器，设置最大宽度和居中 */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  box-sizing: border-box;
}
/* 行容器，使用 Grid 布局 */
.row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  /* 创建12个等宽列 */
  gap: var(--grid-gap);
  /* 设置列与行之间的间距 */
  width: 100%;
  /* 确保占满容器宽度 */
}
.col-12 {
  grid-column: span 12;
}
.col-11 {
  grid-column: span 11;
}
.col-10 {
  grid-column: span 10;
}
.col-9 {
  grid-column: span 9;
}
.col-8 {
  grid-column: span 8;
}
.col-7 {
  grid-column: span 7;
}
.col-6 {
  grid-column: span 6;
}
.col-5 {
  grid-column: span 5;
}
.col-4 {
  grid-column: span 4;
}
.col-3 {
  grid-column: span 3;
}
.col-2 {
  grid-column: span 2;
}
.col-1 {
  grid-column: span 1;
}
/* xxl: extra extra large, 适用于极大屏幕 */
/* xl: extra large, 适用于超大桌面显示器及以上 */
@media (max-width: 1200px) {
  .col-xl-12 {
    grid-column: span 12;
  }
  .col-xl-11 {
    grid-column: span 11;
  }
  .col-xl-10 {
    grid-column: span 10;
  }
  .col-xl-9 {
    grid-column: span 9;
  }
  .col-xl-8 {
    grid-column: span 8;
  }
  .col-xl-7 {
    grid-column: span 7;
  }
  .col-xl-6 {
    grid-column: span 6;
  }
  .col-xl-5 {
    grid-column: span 5;
  }
  .col-xl-4 {
    grid-column: span 4;
  }
  .col-xl-3 {
    grid-column: span 3;
  }
  .col-xl-2 {
    grid-column: span 2;
  }
  .col-xl-1 {
    grid-column: span 1;
  }
}
/* lg: large, 适用于大桌面显示器及以上 */
@media (max-width: 992px) {
  .col-lg-12 {
    grid-column: span 12;
  }
  .col-lg-11 {
    grid-column: span 11;
  }
  .col-lg-10 {
    grid-column: span 10;
  }
  .col-lg-9 {
    grid-column: span 9;
  }
  .col-lg-8 {
    grid-column: span 8;
  }
  .col-lg-7 {
    grid-column: span 7;
  }
  .col-lg-6 {
    grid-column: span 6;
  }
  .col-lg-5 {
    grid-column: span 5;
  }
  .col-lg-4 {
    grid-column: span 4;
  }
  .col-lg-3 {
    grid-column: span 3;
  }
  .col-lg-2 {
    grid-column: span 2;
  }
  .col-lg-1 {
    grid-column: span 1;
  }
}
/* md: medium, 适用于桌面显示器及以上 */
@media (max-width: 768px) {
  .col-md-12 {
    grid-column: span 12;
  }
  .col-md-11 {
    grid-column: span 11;
  }
  .col-md-10 {
    grid-column: span 10;
  }
  .col-md-9 {
    grid-column: span 9;
  }
  .col-md-8 {
    grid-column: span 8;
  }
  .col-md-7 {
    grid-column: span 7;
  }
  .col-md-6 {
    grid-column: span 6;
  }
  .col-md-5 {
    grid-column: span 5;
  }
  .col-md-4 {
    grid-column: span 4;
  }
  .col-md-3 {
    grid-column: span 3;
  }
  .col-md-2 {
    grid-column: span 2;
  }
  .col-md-1 {
    grid-column: span 1;
  }
}
/* sm: small, 适用于平板及以上 */
@media (min-width: 320px) and (max-width: 576px) {
  .col-sm-12 {
    grid-column: span 12;
  }
  .col-sm-11 {
    grid-column: span 11;
  }
  .col-sm-10 {
    grid-column: span 10;
  }
  .col-sm-9 {
    grid-column: span 9;
  }
  .col-sm-8 {
    grid-column: span 8;
  }
  .col-sm-7 {
    grid-column: span 7;
  }
  .col-sm-6 {
    grid-column: span 6;
  }
  .col-sm-5 {
    grid-column: span 5;
  }
  .col-sm-4 {
    grid-column: span 4;
  }
  .col-sm-3 {
    grid-column: span 3;
  }
  .col-sm-2 {
    grid-column: span 2;
  }
  .col-sm-1 {
    grid-column: span 1;
  }
}
/* 超大屏 (>= 1440px) */
@media screen and (min-width: 1440px) and (max-width: 1820px) {
  .container {
    max-width: 1440px;
  }
}
/* 大屏 (>= 1200px 且 < 1440px) */
@media screen and (min-width: 1200px) and (max-width: 1439.98px) {
  .container {
    max-width: 1200px;
  }
}
/* 中屏 (>= 992px 且 < 1200px) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  .container {
    max-width: 992px;
    padding: 10px 0;
    box-sizing: border-box;
  }
}
/* 平板 (>= 768px 且 < 992px) */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
  /* 可选：在此断点，列间距可以适当缩小 */
  .row {
    gap: 16px;
  }
}
/* 手机 (<= 767.98px) */
@media screen and (max-width: 767.98px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
  .row {
    /* 在小屏幕上，将所有列堆叠成单列 */
    gap: 12px;
    /* 可选：手机端进一步缩小间距 */
  }
  /* 重置所有列的跨度，使其占满一行 */
  /* [class^="col-"] {
    grid-column: span 1;
  } */
}
/* ========== 卡片 Card ========== */
.card {
  background: var(--color-card-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.card--white {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
}
.card-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
  line-height: var(--line-height-loose);
}
/* ========== 卡片网格 Grid ========== */
.grid {
  display: grid;
  gap: var(--gap-col-md);
  margin-top: var(--gap-row-lg);
}
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
/* ========== 统计数字 Stats ========== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-col-lg);
}
.stat-item {
  text-align: center;
}
.stat-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-xs);
}
.stat-label {
  font-size: var(--font-size-base);
  opacity: 0.8;
}
/* ========== 按钮 Button ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  min-width: var(--btn-width);
  font-size: var(--font-size-sm);
  color: #181818;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-round);
  transition: all var(--transition-normal);
  cursor: pointer;
  border: 1px solid var(--color-text-primary);
}
.btn.btn-white {
  border-color: var(--color-white);
  color: var(--color-white);
}
.btn.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--color-text-primary);
  border-color: var(--color-white);
  background: var(--color-white);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--color-white);
  border-color: var(--color-brand);
  background: var(--color-brand);
}
.arrow {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 50%;
  box-sizing: border-box;
  /* 三级文字 */
  border: 1px solid var(--color-text-tertiary);
  transition: all var(--transition-normal);
  text-align: center;
  color: var(--color-text-tertiary);
  cursor: pointer;
}
.arrow .iconfont {
  display: inline-block;
  vertical-align: middle;
  line-height: 38px;
  font-size: 34px;
}
.arrow:hover {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-white);
}
/* ========== 分割线 Divider ========== */
.divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: var(--spacing-xl) 0;
}
/* ========== 数字滚动动画 ========== */
.count-up {
  display: inline-block;
}
/* ========== 内边距工具类 Padding Utilities ========== */
.pt-sm {
  padding-top: var(--spacing-sm);
}
.pt-md {
  padding-top: var(--spacing-md);
}
.pt-lg {
  padding-top: var(--spacing-lg);
}
.pt-xl {
  padding-top: var(--spacing-xl);
}
.pb-sm {
  padding-bottom: var(--spacing-sm);
}
.pb-md {
  padding-bottom: var(--spacing-md);
}
.pb-lg {
  padding-bottom: var(--spacing-lg);
}
.pb-xl {
  padding-bottom: var(--spacing-xl);
}
/* ========== 外边距工具类 Margin Utilities ========== */
.mt-sm {
  margin-top: var(--spacing-sm);
}
.mt-md {
  margin-top: var(--spacing-md);
}
.mt-lg {
  margin-top: var(--spacing-lg);
}
.mt-xl {
  margin-top: var(--spacing-xl);
}
.mt-2xl {
  margin-top: var(--spacing-2xl);
}
.mb-sm {
  margin-bottom: var(--spacing-sm);
}
.mb-md {
  margin-bottom: var(--spacing-md);
}
.mb-lg {
  margin-bottom: var(--spacing-lg);
}
.mb-xl {
  margin-bottom: var(--spacing-xl);
}
.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}
/* ========== 文字工具类 Text Utilities ========== */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-primary {
  color: var(--color-text-primary);
}
.text-secondary {
  color: var(--color-text-secondary);
}
.text-tertiary {
  color: var(--color-text-tertiary);
}
.text-brand {
  color: var(--color-brand);
}
.text-white {
  color: var(--color-white);
}
.font-bold {
  font-weight: var(--font-weight-bold);
}
.font-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-xs {
  font-size: var(--font-size-xs);
}
.text-sm {
  font-size: var(--font-size-sm);
}
.text-base {
  font-size: var(--font-size-base);
}
.text-lg {
  font-size: var(--font-size-lg);
}
.text-xl {
  font-size: var(--font-size-xl);
}
.text-2xl {
  font-size: var(--font-size-2xl);
}
.text-3xl {
  font-size: var(--font-size-3xl);
}
/* ========== 背景色工具类 Background Utilities ========== */
.bg-dark {
  background: var(--color-auxiliary);
}
.bg-brand {
  background: var(--color-brand);
}
.bg-white {
  background: var(--color-white);
}
.bg-card {
  background: var(--color-card-bg);
}
/* 暗色背景上的文字颜色适配 */
.bg-dark .text-primary,
.bg-dark .section-title,
.bg-brand .text-primary,
.bg-brand .section-title {
  color: var(--color-white);
}
.bg-dark .text-secondary,
.bg-brand .text-secondary {
  color: rgba(255, 255, 255, 0.7);
}
.bg-dark .text-tertiary,
.bg-brand .text-tertiary {
  color: rgba(255, 255, 255, 0.5);
}
.banner {
  /* 确保最小高度为视口高度，或者至少600px */
  height: 100vh;
  min-height: 600px;
  background-size: cover;
  /* 图片覆盖整个区域，不拉伸变形 */
  background-position: center;
  /* 居中裁剪 */
  background-repeat: no-repeat;
  width: 100%;
  /* 占满宽度 */
  text-align: center;
}
.banner .banner-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-col-lg);
}
.banner .banner-content .banner-subtitle {
  font-size: var(--font-size-lg);
  line-height: 26px;
  color: var(--color-white);
}
.banner .banner-content .banner-title {
  font-size: var(--font-size-3xl);
  line-height: 42px;
  color: var(--color-white);
}
.banner .banner-content p {
  font-size: var(--font-size-md);
  line-height: 26px;
  color: var(--color-white);
}
/* ========== 导航栏 Navbar ========== */
.navbar {
  position: fixed;
  padding: 0 20px;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--page-nav-height);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-color: transparent;
  justify-content: space-between;
  z-index: 1000;
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
}
.navbar .navbar-logo {
  width: 46px;
  height: 46px;
  position: relative;
  z-index: 10;
}
.navbar .navbar-logo .navbar-logo-red {
  display: block;
}
.navbar .navbar-logo .navbar-logo-white {
  display: none;
}
.navbar .nav-links {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  margin: auto;
}
.navbar .nav-links .nav-links-wrap {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar .nav-links .nav-links-list {
  display: flex;
  align-items: center;
  height: 100%;
  width: 880px;
  gap: var(--gap-col-lg);
  position: relative;
  z-index: 10;
}
.navbar .nav-links .nav-links-list .nav-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: var(--font-size-lg);
  height: 100%;
  transition: color var(--transition-fast);
}
.navbar .nav-links .nav-links-list .nav-link a {
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
}
.navbar .nav-links .nav-links-list .nav-link--active a {
  font-weight: var(--font-weight-bold);
  position: relative;
}
.navbar .nav-links .nav-links-list .nav-link--active a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--color-brand);
  border-radius: 2px;
}
.navbar .nav-links .nav-links-open {
  position: absolute;
  top: 0;
  padding-top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
  z-index: 1;
  display: grid;
  /* 👇 1fr = 撑满内容高度, 0fr = 完全收起 */
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease, padding-top 300ms ease;
}
.navbar .nav-links .nav-links-open .nav-links-open-wrap {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: start;
  justify-content: center;
  width: 880px;
  margin: 0 auto;
  gap: var(--gap-col-lg);
}
.navbar .nav-links .nav-links-open .nav-links-open-wrap > div {
  flex: 1;
  padding-top: 20px;
}
.navbar .nav-links .nav-links-open .nav-link {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 24px;
  margin-bottom: 14px;
}
.navbar .nav-links .nav-links-open .nav-link.nav-link--active {
  text-decoration: underline;
}
.navbar .nav-links .nav-links-open .nav-link:hover {
  text-decoration: underline;
}
.navbar .nav-links.nav-links-open-expand .nav-links-open {
  display: block;
}
.navbar .nav-open-bg {
  height: 260px;
  position: absolute;
  top: var(--page-nav-height);
  left: 0;
  width: 100%;
  background-color: var(--color-white);
  box-shadow: 0 1px 0 var(--color-divider);
  display: none;
}
.navbar .navbar-language {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  cursor: pointer;
  border: none !important;
  margin-left: auto;
  position: relative;
  z-index: 10;
}
.navbar .navbar-language span {
  font-size: 14px;
  line-height: 46px;
  vertical-align: middle;
}
.navbar .navbar-language .iconfont {
  font-size: 26px;
  display: inline-block;
  vertical-align: middle;
  line-height: 46px;
}
.navbar .navbar-language.navbar-icon-expand .iconfont {
  transform: rotate(180deg);
}
.navbar .navbar-language .navbar-language-expand {
  background-color: #fff;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  z-index: 10;
  text-align: center;
  border-radius: 4px;
  padding: 10px;
  display: none;
}
.navbar .navbar-language .navbar-language-expand:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid var(--color-white);
}
.navbar .navbar-language .navbar-language-expand a {
  line-height: 40px;
  font-size: 14px;
  display: block;
  color: var(--color-text-secondary);
}
.navbar .navbar-language .navbar-language-expand a:hover {
  color: var(--color-text-primary);
}
.navbar .navbar-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  margin-left: 10px;
  flex-direction: column;
  /* 垂直排列 */
  justify-content: space-between;
  /* 上下两端+中间均分 */
  cursor: pointer;
  position: relative;
  z-index: 10;
}
.navbar .navbar-toggle span {
  display: block;
  height: 2px;
  background-color: var(--color-text-primary);
  width: 100%;
  transition: all 0.3s;
}
.navbar .navbar-toggle.navbar-toggle-expand {
  position: relative;
}
.navbar .navbar-toggle.navbar-toggle-expand span {
  position: absolute;
  top: 50%;
  left: 0;
}
.navbar .navbar-toggle.navbar-toggle-expand span:nth-child(1) {
  transform: translateY(-50%) rotate(45deg);
}
.navbar .navbar-toggle.navbar-toggle-expand span:nth-child(2) {
  display: none;
}
.navbar .navbar-toggle.navbar-toggle-expand span:nth-child(3) {
  transform: translateY(-50%) rotate(-45deg);
}
.navbar .navbar-expand {
  position: absolute;
  top: var(--page-nav-height);
  left: 0;
  width: 100%;
  background-color: var(--color-auxiliary);
  z-index: 1;
  padding: 100px;
}
.navbar .navbar-expand .navbar-expand-menu {
  display: flex;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-first {
  flex: 1;
  padding-right: 40px;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-first li {
  border-bottom: 1px solid var(--color-divider);
  border-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 100%) 0 0 1 0;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 10px 0;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-first li span {
  font-size: 56px;
  font-weight: 700;
  color: var(--color-white);
  opacity: 0.06;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-first li a {
  flex: 1;
  margin-left: 20px;
  font-size: 32px;
  color: var(--color-white);
  opacity: 0.5;
  padding-bottom: 10px;
  transition: opacity 0.3s;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-first li i {
  font-size: 40px;
  color: var(--color-white);
  display: none;
  opacity: 0.5;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-first li.active {
  border-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 100%) 0 0 1 0;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-first li.active span {
  color: var(--color-brand);
  opacity: 1;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-first li.active a {
  opacity: 1;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-first li.active i {
  display: block;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-first li:hover a {
  opacity: 1;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-second {
  flex: 1;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-second li {
  font-size: 18px;
  line-height: 50px;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-second li span {
  color: var(--color-white);
  opacity: 0.4;
  font-size: 15px;
  transition: opacity 0.3s;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-second li a {
  margin-left: 10px;
  color: var(--color-white);
  opacity: 0.5;
  transition: opacity 0.3s;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-second li.active span {
  opacity: 1;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-second li.active a {
  opacity: 1;
  text-decoration: underline;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-second li:hover span {
  opacity: 1;
}
.navbar .navbar-expand .navbar-expand-menu .nav-menu-second li:hover a {
  opacity: 1;
}
.navbar .navbar-expand .navbar-expand-slogan {
  font-size: 14px;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.5);
  position: absolute;
  bottom: 20px;
}
.navbar .navbar-expand .navbar-expand-logo {
  position: absolute;
  bottom: 20px;
  right: 20px;
  opacity: 0.03;
  width: 250px;
  height: 250px;
}
.navbar .navbar-expand .navbar-expand-logo img {
  width: 100%;
  height: 100%;
}
.navbar.navbar-open {
  background-color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-divider);
}
.navbar.navbar-open .nav-links-open {
  display: flex;
}
.navbar.navbar-open .nav-open {
  display: block;
}
.navbar.scrolled {
  box-shadow: var(--shadow-sm);
  background-color: var(--color-white);
}
.navbar.scrolled .navbar-logo .navbar-logo-red {
  display: block;
}
.navbar.scrolled .navbar-logo .navbar-logo-white {
  display: none;
}
.navbar.scrolled .nav-links .nav-links-list .nav-link {
  color: var(--color-text-primary);
}
.navbar.scrolled .navbar-language {
  color: var(--color-text-primary);
}
.navbar.scrolled .navbar-toggle span {
  background-color: var(--color-text-primary);
}
.navbar.navbar-link-expand .nav-links-open {
  padding-top: var(--page-nav-height);
  grid-template-rows: 1fr;
}
.navbar.navbar-white .navbar-logo .navbar-logo-red {
  display: none;
}
.navbar.navbar-white .navbar-logo .navbar-logo-white {
  display: block;
}
.navbar.navbar-white .nav-links .nav-links-list .nav-link a {
  color: var(--color-white);
}
.navbar.navbar-white .navbar-language {
  color: var(--color-white);
}
.navbar.navbar-white .navbar-toggle span {
  background-color: var(--color-white);
}
.navbar.navbar-black .navbar-logo .navbar-logo-red {
  display: block;
}
.navbar.navbar-black .navbar-logo .navbar-logo-white {
  display: none;
}
.navbar.navbar-black .nav-links .nav-links-list .nav-link a {
  color: var(--color-text-primary);
}
.navbar.navbar-black .navbar-language {
  color: var(--color-text-primary);
}
.navbar.navbar-black .navbar-toggle span {
  background-color: var(--color-text-primary);
}
.navbar.navbar-white-bg {
  background-color: var(--color-white);
}
.navbar.navbar-white-bg .navbar-logo .navbar-logo-red {
  display: block;
}
.navbar.navbar-white-bg .navbar-logo .navbar-logo-white {
  display: none;
}
.navbar.navbar-white-bg .nav-links .nav-links-wrap {
  background-color: var(--color-white);
}
.navbar.navbar-white-bg .nav-links .nav-links-list .nav-link a {
  color: var(--color-text-primary);
}
.navbar.navbar-white-bg .navbar-language {
  color: var(--color-text-primary);
}
.navbar.navbar-white-bg .navbar-toggle span {
  background-color: var(--color-text-primary);
}
.navbar.navbar-black-bg .navbar-logo .navbar-logo-red {
  display: none;
}
.navbar.navbar-black-bg .navbar-logo .navbar-logo-white {
  display: block;
}
.navbar.navbar-black-bg .nav-links .nav-links-list .nav-link a {
  color: var(--color-white);
}
.navbar.navbar-black-bg .nav-links .nav-links-wrap {
  background-color: var(--color-text-primary);
}
.navbar.navbar-black-bg .navbar-language {
  color: var(--color-white);
}
.navbar.navbar-black-bg .navbar-toggle span {
  background-color: var(--color-white);
}
.img-item {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 62.5%;
  /* 4:3 比例 */
  /* padding-top: 56.25%;  16:9 比例 */
  overflow: hidden;
}
.img-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-item-full {
  padding-top: 100%;
  /* 4:3 比例 */
  position: relative;
  width: 100%;
  height: 0;
  /* padding-top: 56.25%;  16:9 比例 */
  overflow: hidden;
}
.img-item-full img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ========== 页脚 Footer ========== */
.footer {
  background: var(--color-auxiliary);
  color: var(--color-white);
  padding: var(--gap-row-xl) 0;
}
.footer .footer-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: 24px;
  font-weight: 700;
}
.footer .footer-logo img {
  width: 55px;
  height: 55px;
}
.footer .footer-links {
  display: flex;
  justify-content: space-between;
}
.footer .footer-links h4 {
  color: var(--color-white);
  margin-bottom: var(--spacing-xl);
  font-size: 16px;
}
.footer .footer-links li {
  line-height: 34px;
}
.footer .footer-links li:hover a {
  opacity: 1;
}
.footer .footer-links a {
  color: var(--color-white);
  font-size: 14px;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.footer .tab .tab-bar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer .tab .tab-bar .item {
  display: inline-block;
  line-height: 50px;
  margin-right: var(--spacing-md);
  position: relative;
  cursor: pointer;
}
.footer .tab .tab-bar .item.active::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--color-brand);
  border-radius: 1px;
}
.footer .tab .tab-content .item {
  padding-top: 10px;
  display: none;
}
.footer .tab .tab-content .item.active {
  display: block;
}
.footer .tab .tab-content .info {
  display: flex;
  line-height: 30px;
  font-size: 14px;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
  opacity: 0.7;
}
.footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  display: flex;
  gap: var(--spacing-3xl);
  overflow: hidden;
}
.footer .footer-bottom .friend-link {
  flex: 1;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  overflow: hidden;
  gap: 4px;
}
.footer .footer-bottom .friend-link a {
  color: var(--color-text-tertiary);
  opacity: 0.5;
  transition: opacity 0.3s;
  white-space: nowrap;
}
.footer .footer-bottom .friend-link a::before {
  content: "/";
}
.footer .footer-bottom .friend-link a:first-child::before {
  display: none;
}
.footer .footer-bottom .friend-link a:hover {
  opacity: 1;
  text-decoration: underline;
}
.footer .footer-bottom .copyright {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.footer .footer-bottom .copyright a {
  color: var(--color-white);
  opacity: 0.5;
}
/* ========== 响应式 Responsive ========== */
/* 平板及以下 */
@media (max-width: 1200px) {
  :root {
    --page-content-padding: 48px;
  }
  .footer .tab {
    margin-bottom: 30px;
  }
  .footer .tab .tab-bar {
    display: flex;
    gap: 10px;
  }
  .footer .tab .tab-bar .item {
    flex: 1;
    text-align: center;
  }
  .banner .banner-content {
    gap: var(--gap-col-md);
  }
  .banner .banner-content .banner-subtitle {
    font-size: var(--font-size-lg);
  }
  .banner .banner-content .banner-title {
    font-size: var(--font-size-2xl);
    line-height: 38px;
  }
  .banner .banner-content p {
    font-size: var(--font-size-md);
    line-height: 26px;
  }
}
/* 手机端 */
@media (max-width: 992px) {
  :root {
    --page-content-padding: 24px;
  }
  .footer {
    padding: var(--gap-row-md) 0;
  }
  .footer .footer-logo {
    justify-content: center;
    font-size: 20px;
  }
  .footer .footer-logo img {
    width: 36px;
    height: 36px;
  }
  .footer .tab .tab-bar {
    display: flex;
    gap: 10px;
  }
  .footer .tab .tab-bar .item {
    flex: 1;
    text-align: center;
  }
  .footer .footer-links {
    display: block;
  }
  .footer .footer-links .footer-link-item {
    width: 100%;
  }
  .footer .footer-links .footer-link-item h4 {
    margin-bottom: 6px;
    font-size: 16px;
  }
  .footer .footer-links .footer-link-item ul {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }
  .footer .footer-bottom {
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
    display: block;
  }
  .footer .footer-bottom .friend-link {
    justify-content: center;
    flex-wrap: wrap;
  }
  .footer .footer-bottom .copyright {
    margin-top: var(--spacing-md);
    text-align: center;
  }
}
/* 手机端 */
@media (max-width: 768px) {
  :root {
    --page-content-padding: 12px;
  }
  .banner .banner-content {
    gap: var(--gap-col-sm);
  }
  .banner .banner-content .banner-subtitle {
    font-size: var(--font-size-md);
  }
  .banner .banner-content .banner-title {
    font-size: var(--font-size-xl);
    line-height: 38px;
  }
  .banner .banner-content p {
    font-size: var(--font-size-sm);
    line-height: 26px;
  }
}
@media (max-width: 1440px) {
  .navbar .nav-links .nav-links-list {
    width: 780px;
  }
  .navbar .nav-links .nav-links-open .nav-links-open-wrap {
    width: 780px;
  }
  .navbar .navbar-expand {
    z-index: 1;
    padding: 2% 6%;
  }
  .navbar .navbar-expand .navbar-expand-menu {
    margin-bottom: 40px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first {
    flex: 1;
    padding-right: 30px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li {
    padding: 10px 0;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li span {
    font-size: 44px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li a {
    font-size: 26px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li i {
    font-size: 36px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-second li {
    font-size: 18px;
    line-height: 40px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-second li span {
    font-size: 14px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-second li a {
    margin-left: 10px;
  }
  .navbar .navbar-expand .navbar-expand-logo {
    width: 200px;
    height: 200px;
  }
}
@media (max-width: 1200px) {
  .navbar .nav-links .nav-links-list {
    width: 650px;
    gap: var(--gap-col-sm);
  }
  .navbar .nav-links .nav-links-open .nav-links-open-wrap {
    width: 650px;
    gap: var(--gap-col-sm);
  }
}
@media (max-width: 992px) {
  .navbar .nav-links .nav-links-list {
    display: none;
  }
  .navbar .navbar-expand {
    z-index: 1;
    padding: 2% 3% 0;
  }
  .navbar .navbar-expand .navbar-expand-menu {
    margin-bottom: 0;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first {
    flex: 1;
    padding-right: 30px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li {
    padding: 10px 0;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li span {
    font-size: 30px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li a {
    font-size: 18px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li i {
    font-size: 30px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-second li {
    font-size: 14px;
    line-height: 32px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-second li span {
    font-size: 14px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-second li a {
    margin-left: 6px;
  }
  .navbar .navbar-expand .navbar-expand-slogan {
    position: relative;
    margin-top: 40px;
  }
  .navbar .navbar-expand .navbar-expand-logo {
    width: 200px;
    height: 200px;
  }
}
@media (max-width: 768px) {
  .navbar .navbar-expand {
    z-index: 1;
    padding: 10px 10px 0;
  }
  .navbar .navbar-expand .navbar-expand-menu {
    margin-bottom: 0;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first {
    flex: 1;
    padding-right: 10px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li {
    padding: 10px 0;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li span {
    font-size: 30px;
    display: none;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li a {
    font-size: 18px;
    padding-left: 10px;
    padding-bottom: 0;
    margin-left: 0;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-first li i {
    font-size: 30px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-second li {
    font-size: 14px;
    line-height: 32px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-second li span {
    font-size: 14px;
  }
  .navbar .navbar-expand .navbar-expand-menu .nav-menu-second li a {
    margin-left: 6px;
  }
  .navbar .navbar-expand .navbar-expand-slogan {
    position: relative;
    margin-top: 30px;
  }
  .navbar .navbar-expand .navbar-expand-logo {
    width: 100px;
    height: 100px;
  }
}
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  line-height: 30px;
  padding: 10px 0;
  font-size: 14px;
}
.pagination a {
  font-size: 14px;
}
.pagination .next,
.pagination .prev {
  display: none;
}
.pagination .page_number {
  height: 30px;
  width: 50px;
  text-align: center;
}
.pagination .submit {
  margin-left: 10px;
  color: var(--text-color-secondary);
  background-color: transparent;
}
.pagination .page-item {
  display: inline-block;
  background: #fff;
  padding: 0 10px;
  min-width: 30px;
  box-sizing: border-box;
  border-radius: 4px;
}
.pagination .page-item.active {
  background: var(--color-brand);
  color: #fff;
}
.pagination .page-item a {
  color: var(--text-color-secondary);
}