body {
  background-color: #000;
  color: white;
  font-family: "AlibabaPuHuiTi-Regular";
  font-weight: normal;
  transition: all 1s ease;
}



/* 滑动到一定高度背景变色 */
.active-body {
  background-color: #ec622a;
  color: #000;
  transition: all 1s ease;
}

.active-body p2,
.active-body h2,
.active-body span {
  color: #000;
}

/* 分割线动效 */
.line {
  transition: transform 1s ease-in;
  transform-origin: 0% 50%;
  transform: scaleX(0);
}

.line.active {
  transform: scaleX(1);
}

.active-body .line {
  border-top: 2px solid #000 !important;
}

.active-body .circle {
  background-color: #6deaf9;
}

.active-body .advantages-grid::before,
.active-body .advantages-grid .grid-item:nth-child(3)::before,
.active-body .advantages-grid .grid-item:nth-child(4)::before {
  background-color: #000;
}

.message-text {
  display: flex;
  justify-content: flex-end;
}

.message-text h3 {
  width: 72%;
}

p {
  font-family: "AlibabaPuHuiTi-Regular";
  font-size: 1.39vw;
  margin-top: 1vw;
  color: white;
  font-weight: normal;
}

h1 {
  font-family: "AlibabaPuHuiTi-Regular";
  color: white;
  font-weight: 500;
  font-size: 6vw;
}

h2 {
  font-family: "AlibabaPuHuiTi-Bold";
  font-weight: 700;
  font-size: 5vw;
  line-height: 8vw;
  color: white;
  text-align: left;
  font-style: italic;
}

.title-cn {
  font-size: 4.5vw;
}

h3 {
  font-family: "AlibabaPuHuiTi-Regular";
  font-weight: normal;
  font-size: 1.25vw;
  color: white;
  line-height: 1.6;
}

span {
  font-family: "AlibabaPuHuiTi-Regular";
  color: white;
  font-weight: normal;
}

p1 {
  font-family: "AlibabaPuHuiTi-Regular";
  font-size: 0.8vw;
  margin-top: 1vw;
  color: white;
  font-weight: bold;
}

a {
  font-family: "AlibabaPuHuiTi-Regular";
  color: white;
  font-weight: normal;
  font-size: 1.39vw;
}

p2 {
  font-family: "AlibabaPuHuiTi-Regular";
  font-size: 2.3vw;
  margin-top: 1vw;
  color: white;
  font-weight: normal;
}

p3 {
  font-family: "AlibabaPuHuiTi-Regular";
  font-size: 3vw;
  margin-top: 1vw;
  color: white;
  font-weight: normal;
}

@media (max-width: 960px) {
  h2 {
    font-size: 8vw;
  }

  h3 {
    font-size: 3.3vw;
    color: white;
    line-height: 1.6;
    margin-left: -50%;
  }

  p2 {
    font-family: "AlibabaPuHuiTi-Regular";
    font-size: 4vw;
    margin-top: 1vw;
    color: white;
    font-weight: normal;
  }

  .navbar .navbar-brand img {
    width: 36vw;

    transition: all 2s ease;
  }
}

/* 默认样式 */
.message-text p {
  font-size: 1.5vw;
  /* 使用视口宽度单位，使字体大小随着屏幕宽度变化 */
  color: white;
  margin-left: -15vw;
  /* 改小了左边距，避免过大的偏移 */
  margin-top: 30px;
  margin-bottom: 30px;
  line-height: 1;
  text-align: left;
}

@media (max-width: 768px) {
  #messageText p {
    font-size: 3vw;
    /* 小屏幕下文字稍微缩小 */
    text-align: center;
    /* 居中对齐文字 */
    width: 100%;
    /* 让文字占满容器 */
    margin-left: 0;
    /* 去掉左边距，确保文字居中 */
    margin-right: 0;
    /* 去掉右边距 */
  }

  .message-text h3 {
    width: 100%;
  }

  .about-banner-warpper {
    padding-top: 0 !important;
  }
}

/* 响应式设计：在屏幕宽度小于 480px 时调整字体和布局 */
@media (max-width: 480px) {
  #messageText p {
    font-size: 5vw;
    /* 适应超小屏幕，进一步放大字体 */
    text-align: center;
    /* 居中对齐文字 */
    width: 100%;
    /* 文字占满整个宽度 */
    margin-left: 0;
    /* 去掉左边距 */
    margin-right: 0;
    /* 去掉右边距 */
  }
}

.video-control-btn {
  position: absolute;
  /* 确保按钮在视频的中央 */
  top: 50%;
  /* 垂直居中 */
  left: 50%;
  /* 水平居中 */
  transform: translate(-50%, -50%);
  /* 完全居中 */
  width: 120px;
  /* 按钮的宽度 */
  height: 120px;
  /* 按钮的高度 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 半透明背景 */
  border: none;
  /* 去掉默认边框 */
  border-radius: 50%;
  /* 圆形按钮 */
  display: flex;
  /* 使用 flex 布局 */
  align-items: center;
  /* 垂直居中图标 */
  justify-content: center;
  /* 水平居中图标 */
  font-size: 60px;
  /* 图标大小 */
  color: white;
  /* 图标颜色 */
  cursor: pointer;
  /* 鼠标悬浮时显示为点击样式 */
  z-index: 1;
  /* 确保按钮位于视频之上 */
}

.video-control-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
  /* 鼠标悬停时增加按钮的背景透明度 */
}

.video-control-btn i {
  pointer-events: none;
  /* 防止图标本身成为按钮的目标 */
}

/* 默认的六宫格布局 */
.advantages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* 三列 */
  grid-template-rows: 1fr 1fr;
  /* 两行 */
  gap: 0px;
  /* 格子之间没有间隙 */
  position: relative;
  /* 定位背景线 */
  height: auto;
}

/* 每个格子 */
.grid-item {
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
  align-items: flex-start;
  /* 左对齐 */
  text-align: left;
  /* 文字左对齐 */
  background-color: transparent;
  padding: 20px;
  /* 给每个格子增加内边距 */
  box-sizing: border-box;
}

.user-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* 三列 */
  grid-template-rows: 1fr 1fr;
  /* 两行 */
  gap: 0px;
  /* 格子之间没有间隙 */
  position: relative;
  /* 定位背景线 */
  height: 50vw;
}

/* 每个格子 */
.grid-item1 {
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
  align-items: flex-start;
  /* 左对齐 */
  text-align: left;
  /* 文字左对齐 */
  background-color: transparent;
  padding: 20px;
  /* 给每个格子增加内边距 */
  box-sizing: border-box;
}

/* 添加横线和竖线的样式 */
.advantages-grid::before,
.advantages-grid .grid-item:nth-child(3)::before,
.advantages-grid .grid-item:nth-child(4)::before {
  content: "";
  position: absolute;
  background-color: #ccc;
  /* 灰色线条 */
}

.advantages-grid2::before {
  top: 48% !important;
}

.advantages-grid::before {
  /* 横线 */
  top: 45%;
  /* 横线位置在竖线中间 */
  left: 0;
  width: 100%;
  height: 2px;
}

.advantages-grid .grid-item:nth-child(3)::before,
.advantages-grid .grid-item:nth-child(4)::before {
  /* 竖线 */
  top: 0;
  width: 2px;
  height: 100%;
  /* 竖线比横线长一些 */
}

.advantages-grid .grid-item:nth-child(3)::before {
  left: 33.33%;
  /* 竖线在横线的1/3处 */
}

.advantages-grid .grid-item:nth-child(4)::before {
  left: 66.66%;
  /* 竖线在横线的2/3处 */
}

/* 圆形 */
.circle {
  width: 2vw;
  height: 2vw;
  background-color: #e193ab;
  border-radius: 50%;
  margin-top: 1vw;
  /* 圆形与文字之间的间距 */
}

.circle1 {
  width: 2vw;
  height: 2vw;
  background-color: #eb6a3f;
  border-radius: 50%;
  margin-bottom: 15px;
  /* 圆形与文字之间的间距 */
}

/* 文字部分 */
.text-line-user {
  font-size: 2.3vw;
  color: #fff;
  margin: 5px 0;
  margin-top: 10px;
  /* height: 8vw; */
}

.text-line-advantages {
  font-size: 2.3vw;
  color: #fff;
  /* margin: 5px 0; */
  margin-top: 10px;
}

.large-text {
  font-size: 16px;
  /* 调大文字 */
  margin-top: 50px;
  /* 增加第二行和第三行文字之间的间距 */
}

.large-text1 {
  font-size: 4.7vw;
  /* 调大文字 */
  /* margin-top: 50px; */
  /* 增加第二行和第三行文字之间的间距 */
}

.footer-top .row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-top .city {
  color: white;
  /* 设置字体颜色 */
  margin: 0 15px;
  /* 给城市名称之间添加间隔 */
}

.footer-top .city a {
  font-size: 18px;
  /* 设置城市名称的字体大小 */
}

.footer-top .separator {
  font-size: 18px;
  /* 设置分隔符的字体大小 */
  color: #aaa;
  /* 设置分隔符的颜色 */
  margin: 0 15px;
  /* 给分隔符之间添加间隔 */
}

/* 响应式设计，确保在小屏幕下也居中显示 */
@media (max-width: 768px) {

  .footer-top .city,
  .city a,
  .footer-top .separator {
    font-size: 12px !important;
    /* 在小屏幕下调整字体大小 */
  }

  .footer-top .separator {
    margin: 0 5px !important;
  }

  .city {
    margin: 0 !important;
  }
}

/* 响应式布局：中等设备 */
@media (max-width: 992px) {

  /* 取消网格线部分：去掉所有伪元素 */
  .advantages-grid::before,
  .advantages-grid .grid-item:nth-child(3)::before,
  .advantages-grid .grid-item:nth-child(4)::before {
    content: none;
    /* 删除伪元素 */
  }

  .advantages-grid {
    grid-template-columns: 1fr 1fr;
    /* 两列 */
    grid-template-rows: 1fr 1fr 1fr;
    /* 三行 */
  }

  .advantages-grid::before {
    top: 33.33%;
    /* 横线的位置调整 */
  }

  .advantages-grid .grid-item:nth-child(3)::before,
  .advantages-grid .grid-item:nth-child(4)::before {
    top: 0;
  }
}

/* 响应式布局：小设备 */
@media (max-width: 768px) {

  /* 取消网格线部分：去掉所有伪元素 */
  .advantages-grid::before,
  .advantages-grid .grid-item:nth-child(3)::before,
  .advantages-grid .grid-item:nth-child(4)::before {
    content: none;
    /* 删除伪元素 */
  }

  .advantages-grid {
    grid-template-columns: 1fr 1fr;
    /* 两列 */
    grid-template-rows: 1fr 1fr 1fr;
    /* 三行 */
  }

  .advantages-grid::before {
    top: 20%;
    /* 横线的位置调整 */
  }

  .advantages-grid .grid-item:nth-child(3)::before,
  .advantages-grid .grid-item:nth-child(4)::before {
    top: 0;
  }

  /* 圆形 */
  .circle {
    width: 4vw;
    height: 4vw;
    background-color: #e193ab;
    border-radius: 50%;
    margin-top: 1vw;
    /* 圆形与文字之间的间距 */
  }

  .circle1 {
    width: 4vw;
    height: 4vw;
    background-color: #eb6a3f;
    border-radius: 50%;
    margin-bottom: 15px;
    /* 圆形与文字之间的间距 */
  }

  p1 {
    font-family: "AlibabaPuHuiTi-Regular";
    font-size: 2vw;
    margin-top: 1vw;
    color: white;
    font-weight: normal;
  }

  .message-text {
    margin-top: 50px;
  }

  .mask-text {
    width: 80%;
    font-size: 10px;
    line-height: 14px;
  }
}