.ab-banner {
  width: 100%;
  /* height: auto; */
  /* height: 480px; */
  position: relative;
}

.ab-banner-img {
  width: 100%;
  height: 100%; left: 0;
  /* object-fit: cover; */
}

.ab-banner-tabs {
  width: 100%;
  background: #F6F6F6;

}



.ab-banner-tabs .safe-zone {
  display: flex;
  align-items: center;
  /* justify-content: center; */

  box-sizing: border-box;
  padding-left: 336px;
  /* 标签间距 */
}

.progress-bar {
  /* width: 388px; */
  width: 80%;
  height: 2px;
  background: #44619A;
  margin-top: 16px;
}

.progress-bar-color {
  width: 95px;
  height: 2px;
  background: #165DFF;
}

.ab-banner-tab {
  font-weight: 400;
  font-size: 16px;
  margin-right: 59px;
  height: 60px;
  display: block;
  line-height: 60px;
}

.about-section {
  width: 100%;
  overflow: hidden;
}

.about-section h2 {

  font-weight: bold;
  font-size: 36px;
  color: #1B1C35;
  box-sizing: border-box;
  padding: 93px 0 70px 0;
}

.about-content {
  width: 100%;
  display: flex;
}

.about-image {
  width: 520px;
  height: 350px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.video_box {
  width: 100%;
  height: 100vh;
  display: none;
  position: fixed;
  top: 0;
  z-index: 9999999999 !important;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.video_box_continer {
  width: 60%;
  height: 32.3958vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

}

.top-about-img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 1;
}

.seguroImg {
  width: 120px;
  height: 121px;
}

.radioBlue {
  width: 13px;
  height: 13px;
  background: #165DFF;
  border-radius: 50%;
  margin-left: 50px;
}

.seguroImgRadio {
  width: 39px;
  height: 40px;
  margin-left: 38px;

}


.mi-right-div {
  width: 100%;
  margin-left: 73px;
}

.top-div {

  font-weight: bold;
  font-size: 32px;
  color: #165DFF;
  position: relative;
}

.top-bottom {
  width: 100%;
  margin-top: 35px;
}

.top-bottom>span {}

/* padding: 0px; */

.top-bottom-right-text {

  font-weight: 400;
  font-size: 16px;
  color: #1B1C35;
}

.top-div i:after {
  content: "";
  width: 13px;
  height: 13px;
  background: #165DFF;
  border-radius: 50%;
  margin-left: 0;
  position: absolute;
  left: 0%;
  top: 0%;
}

.active-node-i-none {}

/* 假设 .top-div 的父容器是 .ab-Milestones-continter-right */
.top-div i:before {
  content: "";
  position: absolute;
  width: 39px;
  height: 40px;
  background-image: url(../image/about/img13.png);
  /* 注意路径中多了一个斜杠，已修正 */
  background-size: cover;
  background-position: center;
  left: 0%;
  top: 0%;
  /* 绑定闪烁动画：名称、时长、循环次数 */
  /* animation: blink 1.5s infinite; */
  opacity: 0;
}

.ab-Milestones-continter-right>div:last-child i {
  display: none;
}

/* 激活节点样式 */
.ab-Milestones-continter-right-right.active-node .top-div i:before {
  opacity: 1 !important;
}

/* 激活节点样式 */
.ab-Milestones-continter-right-right.active-node .top-div i:after {
  opacity: 0 !important;
}

/* 确保非激活节点隐藏 */
.ab-Milestones-continter-right-right .top-div i:before {
  opacity: 0;
}

.on {
  opacity: 1 !important;

}

/* 定义闪烁动画关键帧 */
@keyframes blink {

  0%,
  100% {
    opacity: 1;
    /* 初始和结束状态：完全显示 */
  }

  50% {
    opacity: 0.3;
    /* 中间状态：半透明（闪烁效果） */
  }
}

.top-div i:after {
  left: -95px;
  top: 15px;

}

.top-div i:before {
  left: -108px;
  top: 1px;

}



.about-pic {
  width: 82px;
  height: 82px;
  cursor: pointer;

  position: absolute;
  /* 核心居中代码 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 2;
}

.about-text {

  width: 608px;
  height: 350px;
  margin-left: 50px;
  font-weight: 400;
  font-size: 16px;
  color: #1B1C35;
  line-height: 30px;
  overflow: auto;
  /* 以下为新增的滚动条样式 */
  scrollbar-width: thin;
  /* 滚动条宽度（可选） */
  scrollbar-color: #165DFF transparent;
  /* 滚动条颜色（蓝色）和轨道颜色（透明） */



}

/* 兼容 WebKit 浏览器（Chrome、Safari 等）的滚动条样式 */
.about-text::-webkit-scrollbar {
  width: 6px;
  /* 垂直滚动条宽度 */
  height: 6px;
  /* 水平滚动条高度（如需） */
}

.about-text::-webkit-scrollbar-thumb {
  background-color: #165DFF;
  /* 滚动条滑块颜色（蓝色） */
  border-radius: 3px;
  /* 滑块圆角（可选） */
}

.about-text::-webkit-scrollbar-track {
  background-color: transparent;
  /* 滚动条轨道颜色（透明） */
}



/* 新增：轮播图相关样式 */
.ab-culture-section {
  width: 100%;
  padding: 0 24px;
  /* 轮播图左右留20px空白，和导航内边距一致 */
  box-sizing: border-box;
  background: white !important;
  margin-top: 80px;

}

.ab-culture-section-h2 {


  font-weight: bold;
  font-size: 36px;
  color: #1B1C35;

  /* margin: 201px 0 66px 0; */
}

.ab-culture-swiper {
  width: 100%;
  height: 400px;
  position: relative;
  margin-top: 55px;
}

.culture-slide {
  width: 100%;

}

.culture-slide img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;

}

.ab-culture-desc {
  min-width: 500px;
  max-width: 80%;
  position: absolute;
  /* 先水平居中 */
  top: 50%;
  transform: translateY(-50%);
  /* 再向右偏移44px（核心调整） */
  right: 0;
  box-sizing: border-box;
  padding: 0 28px 0 124px;
  /* margin-right: 144px; */

  /* box-sizing: border-box;
  padding: 0 637px  0  134px; */
}

.ab-culture-desc h2 {
  width: 100%;
  font-weight: 400;
  font-size: 24px;
  color: #FFFFFF;

}

.ab-culture-desc h1 {
  width: 100%;
  font-weight: 400;
  font-size: 36px;
  color: #FFFFFF;

}


/* 轮播控件基础样式（确保官方控件可见） */
.swiper-pagination {
  z-index: 10;
  /* 确保在图片上方 */
}

.swiper-button-prev,
.swiper-button-next {
  z-index: 10;
  /* 确保在图片上方 */
  color: #fff;
  /* 箭头颜色（适应图片背景） */
}

/* 轮播分页器（小圆点）样式 */
.swiper-pagination {
  position: absolute;
  /* bottom: -43px; */
  /* 保持原有定位 */
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
  /* margin-top: 43px; */
}

/* 分页器圆点样式（重点修改左右间距） */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  margin: 0 10px;
  /* 左右间距改为10px（原6px） */
  cursor: pointer;
  transition: background 0.3s, width 0.3s;
  /* 新增width过渡，优化选中效果 */
}

.culture-swiper-pagination {
  margin-top: 40px;
}

/* 分页器选中状态 */
.swiper-pagination-bullet-active {
  background: #FFFFFF;
  width: 30px;
  border-radius: 6px;
}

.wall-swiper-pagination {
  margin-top: 70px;

}

.ab-culture-section-center {
  text-align: center;
  margin-top: 131px !important;
}


/* 新增：企业文化墙轮播样式 */
.culture-wall-section {
  width: 100%;
}

.safe-zone-hidden {
  overflow: hidden;
}

.culture-wall-title {
  font-weight: bold;
  font-size: 36px;
  color: #1B1C35;
  margin-top: 107px;
  margin-bottom: 50px;
  text-align: center;
}

.culture-wall-swiper {
  width: 100%;

}

.wall-slide {
  width: 694px;
  overflow: hidden;

}

.wall-slide img {
  width: 100%;
  height: 326px;
  border-radius: 10px;

  object-fit: cover;
  background: absolute;

}

.wall-slide-desc {
  width: 100%;
  font-weight: 400;
  font-size: 17px;
  color: #1B1C35;
  margin-top: 25px;
}

.wall-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
}

.wall-desc h3 {
  font-size: 28px;
  margin-bottom: 10px;
  font-weight: 500;
}

.wall-desc p {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.9;
}


.offices-section {
  width: 100%;
  /* 核心：背景图片固定，不随内容滚动 */
  background: url(../image/about/底图.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;

  /* 保持原图尺寸，不拉伸 */
  margin-top: 150px;
  margin-bottom: 61px;
}

.offices-title {
  width: 100%;
  box-sizing: border-box;
  padding-top: 90px;
  padding-bottom: 72px;

  font-weight: bold;
  font-size: 36px;
  color: #1B1C35;
}

.offices-tabs {
  width: 100%;
  display: flex;
  border-bottom: 3px solid #165DFF;
}

.office-tab {
  font-weight: bold;
  font-size: 24px;
  color: #1B1C35;
  line-height: 45px;
  padding-bottom: 20px;
}

.office-tab1 {
  width: 241px;
  margin-left: 42px;
}

.office-tab2 {
  width: 236px;
  margin-left: 122px;

}

.office-tab3 {
  width: 145px;
  margin-left: 124px;
}

.office-tab4 {
  width: 230px;
  margin-left: 169px;
}

.mobael-offices-tabs {
  display: none;
}

.ab-Milestones {
  width: 100%;
  height: auto;
  /* 核心：背景图片固定，不随内容滚动 */
  background: url(../image/about/img11.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;

  margin-top: 80px;
  box-sizing: border-box;
  padding-top: 80px;
  /* 关键：让容器内的内容超出时可滚动 */
  overflow-y: auto;
  /* 可选：美化内容滚动条（同之前的 nice_scroll 逻辑） */
  padding-right: 10px;
  /* 预留滚动条空间，避免内容被遮挡 */
}

.ab-Milestones h2 {

  font-weight: bold;
  font-size: 36px;
  color: #1B1C35;
}

.ab-Milestones-continter {
  width: 100%;
  margin-top: 65px;
  position: relative;

}


.m2Cline {
  width: 4px;
  position: absolute;
  left: 55px;
  top: 120px;
  bottom: 0;
  background: url(../image/about/img14.png) repeat-y center top;
  overflow: hidden;

}

.m2Cline i {
  position: absolute;
  background: #165DFF;
  top: 0;
  bottom: 0;
  width: 4px;
  height: 0%;
  transition: height 0.3s ease;
  /* 平滑过渡动画 */

}

.top-bottom-right-radio {
  width: 7px;
  height: 7px;
  display: inline-block;
  background: #165DFF;
  border-radius: 50%;
  margin-right: 15px;
  margin-top: 10px;
}

.top-bottom-right-text {

  font-weight: 400;
  font-size: 16px;
  color: #1B1C35;
  padding-left: 15px;
}

.ab-Milestones-continter-right {
  width: 100%;
}

.ab-Milestones-continter-right-img {
  margin-bottom: 53px;
}

.ab-Milestones-continter-right-right {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 90px;
  box-sizing: border-box;
  padding-left: 73px;
}


.about-Milestones h2 {

  font-weight: bold;
  font-size: 36px;
  color: #1B1C35;



}


.office-item {
  width: 32.5%;
  padding: 0 30px 0 30px;
  border-radius: 8px;
  transition: transform 0.3s;
}



.office-item:hover {
  transform: translateY(-5px);
}

.office-item h3 {
  font-weight: bold;
  font-size: 20px;
  color: #1B1C35;
}

.office-item>div {
  height: 210px;
  border-bottom: 1px solid #CCCCCC;
  padding-top: 12px;
}

.office-item>div p {

  font-weight: 400;
  font-size: 16px;
  color: #74747F;
  padding-bottom: 10px;
}



.office-item p:last-child {
  margin-bottom: 0;
}

/* 办公区滑动容器样式 */
.offices-swiper {
  width: 100%;
  overflow: hidden;
}

.swiper-slide.offices-content {
  width: 100% !important;
  /* 确保每个滑动项占满宽度 */
  display: flex;
  flex-wrap: wrap;
  margin-top: 54px;
}

/* 导航高亮样式 */
.ab-active {
  color: #165DFF !important;
  /* 高亮颜色与页面主色一致 */
}

/* 吸顶状态的样式（新增） */
.sticky {
  position: sticky;
  /* 固定在顶部 */
  top: 77px;
  left: 0;
  right: 0;
  z-index: 999 !important;
  /* 确保在所有内容上方，避免被遮挡 */
  transition: all 0.3s ease;
  /* 平滑过渡效果 */
}

.safe-zone-hidden {
  padding: 0 !important;
  /* 取消自身内边距，避免和内部空白叠加 */
  max-width: 100% !important;
}

/* 原有轮播图适配代码不变，新增这段适配新轮播图 */
/* 新轮播图外层区域：留20px空白，和其他轮播图/导航对齐 */
.culture-wall-section {
  width: 100%;
  padding: 0 24px;
  /* 左右各留20px空白，视觉统一 */
  box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 1100px) {

  .offices-tabs {
    justify-content: space-between;
  }

  .office-tab1 {
    margin-left: 0;
  }

  .office-tab2 {
    margin-left: 0;

  }

  .office-tab3 {
    margin-left: 0;
  }

  .office-tab4 {
    margin-left: 0;
  }

  .ab-banner-tabs .safe-zone {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0px
      /* padding-left: 300px; */
  }



}

/* 移动端总断点（≤767px，包含手机和平板竖屏） */
@media (max-width: 767px) {
  .sticky {
    /* 固定在顶部 */
    top: 81px;

    /* 平滑过渡效果 */
  }

  /* 新增：banner轮播专属样式（仅作用于banner区域） */
  .ab-banner {
    height: auto;
  }

  .ab-banner-tabs {
    width: 100%;
    background: #F6F6F6;
    margin: 0;
    display: block;

  }

  .ab-banner-tabs .safe-zone {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5% !important;
    padding-right: 5% !important;

    flex-wrap: wrap;
    margin: 0 auto;
    gap: 20px;
    /* 关键：标签之间的左右间距（同时控制水平和垂直间距，换行时也生效） */

    /* text-align: c; */
    /* margin: 0 auto;
    te */
    /* 标签间距 */
  }

  .ab-banner-tab {
    height: 44px;
    line-height: 0;
    /* box-sizing: border-box;
    padding: 18px 0 17px 0; */
    padding: 0;
    font-weight: 400;
    font-size: 12px;
    color: #1B1C35;
    margin: 0;
    line-height: 44px;
  }

  .about-section h2 {
    width: 100%;
    font-weight: bold;
    font-weight: bold;
    font-size: 24px;
    color: #1B1C35;
    text-align: center;
    box-sizing: border-box;

    padding: 55px 0 54px 0;
  }

  .about-content {
    width: 100%;
    display: block;
  }

  .about-image {
    width: 100%;
    height: calc((100vw - 48px) * 350 / 520);
  }
  .top-about-img{
    object-fit: unset !important;
  }
  .about-pic {
    width: 51px;
    height: 51px;
  }

  .about-text {
    width: 100%;
    height: auto;
    margin-left: 0;
    font-weight: 400;
    font-size: 14px;
    color: #1B1C35;
    line-height: 21px;
    color: #1B1C35;
    margin-top: 44px;
  }

  .ab-Milestones {
    width: 100%;
    height: auto;
    /* 核心：背景图片固定，不随内容滚动 */
    background: #FFFFFF;
    margin: 0;

    padding-top: 136px;
    /* 关键：让容器内的内容超出时可滚动 */
    overflow-y: auto;
    /* 可选：美化内容滚动条（同之前的 nice_scroll 逻辑） */
    /* 预留滚动条空间，避免内容被遮挡 */
  }


  .seguroImg {
    width: 72px;
    height: 72px;
  }

  .ab-Milestones-continter-right-right {
    margin: 0px;
    padding: 0px;
    margin-bottom: 44px;
  }

  .m2Cline {
    visibility: hidden;
    /* display: none; */
  }

  .top-div i:after {
    left: -35px;
  }

  .top-div i:before {
    width: 29px;
    height: 30px;
    left: -50px;
  }

  .top-bottom-right-radio {
    margin-right: 8px;
  }

  .top-bottom-right-text {
    box-sizing: border-box;
    padding: 0px;
    font-weight: 400;
    font-size: 15px;
    color: #1B1C35;
  }

  .top-div {

    font-weight: 400;
    font-size: 27px;
    color: #165DFF;
  }

  .top-bottom-right-radio {

    width: 6px;
    height: 6px;
    background: #165DFF;
    border-radius: 50%;
  }
  .ab-banner-img {

    /* object-fit: none; */
  }
  .top-bottom {
    margin: 0;
    margin-top: 10px;
  }

  .ab-Milestones-continter {
    margin-top: 0px;

  }

  .ab-Milestones-continter-right-img {
    margin-bottom: 55px;

  }

  .ab-Milestones-continter-right>div:last-child i {
    display: block;
  }

  .ab-culture-section {
    margin: 0;
  }

  .ab-culture-section-h2 {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    color: #1B1C35;
    /* 减掉上面盒子的bottom 值 原型是99 减去上面盒子bottom的45px */
    margin: 50px 0 37px 0;
  }

  .culture-slide {
    width: 100%;
    height: 100%;

  }

  .ab-culture-swiper {
    height: auto;
    /* margin-top: 55px; */
  }

  .culture-slide img {
    height: calc((100vw - 48px) * 198 / 328);
    /* margin-top: 55px; */
  }


  .ab-culture-desc {
    min-width: 100%;
    width: 100%;
    position: initial;
    /* 先水平居中 */
    top: 0%;
    transform: translateY(0%);
    /* 再向右偏移44px（核心调整） */
    right: 0;
    box-sizing: border-box;
    padding: 0 0 0 0;
    /* 再向右偏移44px（核心调整） */

  }

  .ab-culture-desc h2 {
    width: 100%;
    font-weight: 400;
    font-size: 15px;
    color: #1B1C35;
    margin-top: 33px;
  }

  .ab-Milestones h2 {
    font-weight: bold;
    font-size: 24px;
    color: #1B1C35;
    margin-bottom: 33px;
  }

  .progress-bar {
    width: 100%;
    height: 2px;
    background: #44619A;
    margin-top: 16px;
  }

  .progress-bar-color {
    width: 95px;
    height: 2px;
    background: #165DFF;
  }

  .ab-culture-desc h1 {
    /* 确保自动换行的关键属性 */
    white-space: normal;
    /* 默认值，取消可能存在的强制不换行设置 */
    word-wrap: break-word;
    /* 允许长单词/连续字符换行 */
    overflow-wrap: break-word;
    /* 兼容现代浏览器，替代 word-wrap */
    width: 100%;
    margin-top: 12px;
    font-weight: bold;
    font-size: 17px;
    color: #1B1C35;
    line-height: 23px;
  }

  .mi-right-div {
    margin-left: 70px;
  }

  .culture-swiper-pagination {
    margin-top: 26px;
  }

  .culture-wall-title {
    width: 100%;
    text-align: center;
    /* margin-top: 86px;
    margin-bottom: 38px; */
    margin: 86px 0 38px 0;
    font-weight: bold;
    font-size: 24px;
    color: #1B1C35;
  }

  .culture-wall-swiper {
    width: 100%;


  }

  .wall-slide {
    width: 100%;
    height: calc((100vw - 48px) * 198 / 328);
    overflow: hidden;
  }

  .wall-slide img {
    height: 100%;
    border-radius: 10px;
  }




  .wall-slide-desc {
    width: 100%;
    font-weight: 400;
    font-size: 17px;
    color: #1B1C35;
  }


  .wall-swiper-pagination {
    margin-top: 39px;
  }

  .offices-section {
    background: #FFFFFF;
    margin: 0;
  }

  .mobael-offices-tabs {
    display: block;
  }

  .offices-tabs {
    width: 100%;
    display: flex;
    border-bottom: 2px solid #165DFF;
    justify-content: space-between;
  }

  .offices-title {
    width: 100%;
    text-align: center;
    padding-top: 100px;
    padding-bottom: 50px;

    font-weight: bold;
    font-size: 24px;
    color: #1B1C35;
  }

  .office-tab1 {
    width: 67px;
    margin-left: 0;
  }

  .office-tab2 {
    width: 64px;
    margin-left: 0;

  }

  .office-tab3 {
    width: 58px;
    margin-left: 0;
  }

  .office-tab4 {
    width: 92px;
    margin-left: 0;
  }

  .office-tab {

    font-weight: bold;
    font-size: 12px;
    color: #1B1C35;
    line-height: 23px;
  }

  .pc-offices-tabs {
    display: none;
  }

  .office-item {
    width: 100%;
    padding: 0px;

  }


  .swiper-slide.offices-content {

    margin-top: 0px;
  }

  .office-item>h3 {

    margin-top: 27px;
  }

  .office-item>div {
    width: 100%;
    height: auto;
    padding-top: 10px;
    box-sizing: border-box;
    padding: 10px 42px 28PX 0;
  }

  .office-item>div p {

    padding-top: 0;

    padding-bottom: 10px;
  }

  /* 选中每个.offices-content（轮播页）中最后一个.office-item内部的div */
  .offices-content .office-item:last-child>div {
    /* 示例样式：移除最后一个的下边框 */
    border-bottom: none !important;
    /* 其他样式（如背景色、间距等） */
    /* background: #f5f5f5; */
  }

  .video_box_continer {
    width: 100%;
    height: 56vw;

  }
}