/* ============================================================
  NAVIGATION
============================================================ */
.header-logo a img {
  width: 129px;
  height: 36px;
}
mark {
  color: red;
  background-color: transparent;
}
.product-content {
  /* display: grid;
  grid-template-columns: 39% 34% 30%;
  gap: 4%; */
  display: flex;
  justify-content: space-between;
}
nav ul {
  list-style-type: none;
  margin: 0 0 30px 0;
  padding: 0;
  text-align: center;
}
nav ul li {
  display: inline-block;
  margin-bottom: 4px;
}
nav ul li a {
  display: block;
  padding: 5px 20px;
  color: #fff;
  background-color: #32c896;
}
nav ul li a:hover {
  color: #fff;
  background-color: #238b68;
}
nav ul li a.active1 {
  color: #fff;
  background-color: #238b68;
}
.align-items-center {
  display: flex;
  justify-content: space-between;
}
/* ============================================================
  GLOBAL
============================================================ */
.hero-slide-bg img {
  object-fit: unset;
  height: 400px;
}
.swiper-container {
  height: 400px;
}
.section {
  float: none;
}
.containera {
  max-width: none;
  padding: 0px 12% 11%;
}
.containera .title {
  font-size: 48px;
}
.containera h3 {
  font-weight: normal;
}
/* nav */
.nav {
  height: 70px;
}
.nav .logo {
  width: 165px;
  float: left;
}
.nav .logo img {
  width: 100%;
  margin-top: 15px;
}
.nav .menu {
  float: left;
  position: relative;
}
.nav .menu ul li {
  float: left;
  font-size: 18px;
  line-height: 70px;
  /* width: 124px; */
  text-align: center;
  margin: 0 18px;
}

.nav .menu ul li a:hover {
  color: #007aff !important;
  /* padding: 0 10px; */
}
.nav .menu .inner-nav > li > a {
  text-decoration: none;
  padding: 0;
  position: relative; /* 必须添加，否则伪元素定位会出错 */
}

/* 导航栏文字基础样式 */
.nav .menu .inner-nav > li > a {
  position: relative;
  color: #333; /* 默认文字颜色 */
  transition: color 0.3s ease; /* 文字颜色过渡效果 */
}

/* 下划线样式 */
.nav .menu .inner-nav > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0; /* 默认不显示 */
  background-color: #007aff; /* 蓝色下划线 */
  transition: width 0.3s ease;
}

/* 首页默认显示下划线和蓝色文字 */

/* 激活状态样式 - 文字变蓝且显示下划线 */
.nav .menu .inner-nav > li.active1 > a::after {
  width: 100%;
}
.nav .menu .inner-nav > li.active1 > a {
  color: #007aff; /* 选中项文字变蓝 */
}

/* 鼠标悬停效果 */
.nav .menu .inner-nav > li > a:hover::after {
  width: 100%;
}
.nav .menu .inner-nav > li > a:hover {
  color: #007aff; /* 悬停时文字变蓝 */
}

/* 保持子菜单现有样式 */
.nav .inner-nav .has-children {
  position: relative;
}
/* 下拉菜单 */
.nav .inner-nav .has-children .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  position: fixed;
  top: 70px;
  left: 50%;
  width: 77%;
  background: #fff;
  padding: 0;
  margin: 0;
  list-style: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 2;
  transform: translateX(-50%);
  padding: 0% 3% !important;
}

.nav .inner-nav .has-children:hover .sub-menu {
  max-height: 999px;
  padding: 10px 0;
  transition: max-height 0.3s ease-in;
}

.nav .inner-nav .sub-menu li {
  padding: 10px 0px;
}

.nav .inner-nav .sub-menu li a {
  text-decoration: none;
  display: block;
}

.nav .inner-nav .sub-menu li:hover {
  background: #f5f5f5;
}

/* 搜索 */
.header-top-action .action-btn {
  color: #999999;
  left: 8px;
  right: auto;
}
.header-top-action .action-search {
  border-radius: 18px;
  border: 1px solid #e5e5e5;
  color: #000;
  padding-left: 32px;
}
/* .text-md-right {
  padding-right: 0 !important;
} */
.header-logo {
  padding-right: 0 !important;
}
.header-bottom.header-sticky {
  min-height: 70px !important;
  padding: 0 10%;
}

.dropdown-content {
  text-align: left;
  /* min-height: 500px; */
}
/* 三列布局容器 */
.dropdown-columns {
  display: flex;
  justify-content: space-between;
}

/* 每列样式 */
.column {
  /* flex: 1; */
}
.column ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.column h3 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 8px;
  padding: 0.5rem 1rem;
}

/* 下拉菜单中的列表样式 */
.column ul {
  list-style: none;
}

.column li {
  margin: 6px 0;
}

.column a {
  text-decoration: none;
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  transition: color 0.3s;
}

.column a:hover {
  color: #007bff;
}
/* 下拉标题（蓝色分割线） */
.dropdown-header {
  font-size: 18px;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  line-height: 18px;
  padding-top: 30px;
}

/* 标签导航容器 */
.solution-tabs {
  display: flex;
  gap: 30px; /* 标签间距 */
  margin-bottom: 15px;
  margin-left: 14px;
}

/* 单个标签 */
.tab {
  cursor: pointer;
  font-size: 14px;
  color: #333;
  padding-bottom: 5px;
  position: relative;
  transition: color 0.3s;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  text-align: justify;
}

/* 标签悬停效果 */
.tab:hover {
  color: #007bff;
}

/* 激活态标签（下划线+蓝色） */
.tab.active {
  color: #007bff;
}
.active {
  display: flex !important;
}
.tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #007bff;
}

/* 内容区域容器（控制切换） */
.solution-content {
  width: 100%;
}

/* 单个内容列（默认隐藏，激活时显示） */
.content-column {
  display: none;
  flex: 1;
  justify-content: space-between;
  width: 100%;
  padding: 0 14px;
}
.content-column li {
  margin: 0 !important;
}

/* 三列布局容器 */
.dropdown-columns {
  display: flex;
  justify-content: space-between;
}

/* 分页容器：控制位置和底部红线 */
.hero-slider .swiper-pagination {
  display: block;
}
.swiper-pagination .swiper-pagination-bullet:before {
  content: none;
}
/* 分页圆点：默认灰色 */
.hero-slider .swiper-pagination-bullet {
  width: 20px;
  height: 4px;
  background: rgba(17, 0, 0, 0.08);
  border-radius: 16%;
  margin: 0 6px;
  display: inline-block;
  transition: background 0.3s;
  border: none;
}

.has-submenu {
  position: relative;
}

/* 2. 子菜单：默认隐藏，绝对定位 */
.submenu {
  position: absolute;
  top: 70px;
  left: 0;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* padding: 0px 16px; */
  min-width: 200px;
  z-index: 9999;
  display: none;
}
.submenu li:hover {
  background: #f5f5f5;

  a {
    color: #2b96f5;
  }
}
.submenu li {
  width: 100%;
  margin: 0 !important;
  line-height: 36px !important;
  padding: 10px 16px;
  text-align: left !important;
}
/* 3. 悬停触发：鼠标移到父菜单时，显示子菜单 */
.has-submenu:hover .submenu {
  display: block;
}

/* 4. 子菜单列表优化 */
.submenu ul {
  list-style: none; /* 去除默认列表符号 */
  margin: 0; /* 清除默认边距 */
  padding: 0; /* 清除默认内边距 */
}

.submenu ul li {
  margin: 6px 0; /* 列表项间距 */
}
.submenu ul li a {
  font-size: 16px;
}
/* 5. 链接悬停效果 */
.submenu ul li a:hover {
  color: #2b96f5; /* 品牌蓝色，可替换为实际主色 */
}

/* 当前分页圆点：蓝色 */
.hero-slider .swiper-pagination-bullet-active {
  background: #007bff !important; /* 蓝色，与导航高亮色统一 */
}

.sub-title {
  font-weight: 400;
  font-size: 16px;
  color: #666666 !important;
  line-height: 24px;
  text-align: justify;
  font-style: normal;
}
.sub-title h3 {
  font-weight: 400;
  font-size: 32px;
  color: #333333 !important;
  line-height: 48px;
  text-align: justify;
  font-style: normal;
}
.title {
  margin-bottom: 10px !important;
  font-weight: bold;
  font-size: 48px;
  color: #333333 !important;
  line-height: 72px;
  text-align: justify;
  font-style: normal;
}
.section-padding {
  padding-top: 60px !important;
}

/* 卡片容器：Flex 布局实现三列响应式 */
.card-section {
  display: flex;
  flex-wrap: wrap; /* 屏幕缩小时自动换行 */
  gap: 24px;
  padding: 40px 10%;
}

/* 单个卡片样式 */
.card {
  flex: 1;
  min-width: 320px; /* 最小宽度，避免过窄 */
  background: #f9fbff;
  padding: 30px;
  /* border-radius: 12px; */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s;
  border: none;
}

/* 卡片悬停效果（可选） */
.card:hover {
  transform: translateY(-5px);
}

/* 图标容器：圆形背景 + 文字 */
.card-icon {
  /* width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: #e6f2ff; 
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center; */
}

/* 图标文字样式 */
.icon-bg {
  font-size: 24px;
  font-weight: bold;
  color: #007bff; /* 主色 */
}

/* 卡片标题 */
.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-title img {
  margin-right: 20px;
}
.card-t {
  text-align: left;
  margin-bottom: 0px;
}
/* 卡片描述 */
.card-desc {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: justify;
  font-style: normal;
  margin-bottom: 54px;
}

/* 相关产品标签容器 */
.related-products {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

/* 产品标签样式 */
.product-tag {
  padding: 0px 8px;
  border-radius: 20px;
  font-size: 12px;
  color: #333333;
  transition: background 0.3s;
  border-radius: 4px;
  border: 1px solid #333333;
}

/* 标签悬停效果 */
.product-tag:hover {
  background: #b3d9ff;
  cursor: pointer;
}

/* 响应式适配：小屏幕堆叠 */
@media (max-width: 768px) {
  .card-section {
    flex-direction: column;
  }
  .card {
    min-width: auto;
    width: 100%;
  }
}

/* 解决方案板块全局样式 */
.solution-section {
  background: linear-gradient(128deg, #f7f7fa 0%, #ebf3fa 100%);
  padding: 60px 0px; /* 上下内边距，左右自适应 */
  overflow: hidden;
}

/* 标题样式：居中对齐 */
.section-title {
  text-align: center;
  margin-bottom: 40px;
}
.section-title h2 {
  font-size: 28px;
  font-weight: 700;
  /* color: #1d4698;  */
  margin-bottom: 10px;
}
.section-title p {
  font-size: 14px;
  color: #666;
}

/* 网格布局：自动适配列数 */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding: 0 10%;
  /* gap: 10px;  */
}

/* 卡片容器：控制比例 + 交互 */
.solution-card {
  position: relative;
  overflow: hidden;
  /* border-radius: 8px; */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  aspect-ratio: 4/3; /* 宽高比 4:3，可调整为设计图比例 */
}
.solution-card:hover {
  transform: translateY(-5px); /* 悬停上移 */
}

/* 图片样式：保持比例 + 悬停缩放 */
.solution-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪填充，保持比例 */
  transition: transform 0.3s ease;
}
.solution-card:hover img {
  transform: scale(1.05); /* 悬停放大 */
}

/* 底部文字：半透明背景 + 动画 */
.card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.2) 100%
  ); /* 渐变黑透背景 */
  color: #fff;
  font-size: 14px;
  text-align: center;
  transition: bottom 0.3s ease;
}
/* .solution-card:hover .card-caption {
  bottom: 10px; 
} */

/* 响应式适配（不同屏幕列数） */
@media (min-width: 1200px) {
  .solution-grid {
    grid-template-columns: repeat(4, 1fr); /* 大屏4列 */
  }
}
@media (max-width: 1199px) and (min-width: 768px) {
  .solution-grid {
    grid-template-columns: repeat(3, 1fr); /* 中屏3列 */
  }
}
@media (max-width: 767px) and (min-width: 576px) {
  .solution-grid {
    grid-template-columns: repeat(2, 1fr); /* 小屏2列 */
  }
}
@media (max-width: 575px) {
  .solution-grid {
    grid-template-columns: 1fr; /* 手机1列 */
  }
}

/* 应用案例板块全局样式 */
.application-case {
  padding: 60px 10%;
  background-color: #fff; /* 白色背景，可自定义 */
  display: block;
  margin-top: 20px;
}

/* 容器：居中 + 最大宽度 */
/* .container {
  max-width: none;
  margin: 0 auto;
  padding: 0 12%;
} */

/* 标题区：居中对齐 */
.case-header {
  text-align: center;
  margin-bottom: 40px;
}
.case-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}
.case-header p {
  font-size: 14px;
  color: #666;
}

/* 标签导航：横向排列 + 下划线交互 */
.case-tabs ul {
  display: flex;
  justify-content: space-around;
  gap: 30px;
  border-bottom: 1px solid #eee; /* 底部分割线 */
  padding-bottom: 10px;
  margin-bottom: 40px;
}
.case-tabs li {
  font-size: 16px;
  color: #666;
  cursor: pointer;
  position: relative; /* 为伪元素定位 */
  transition: color 0.3s;
}
/* 选中状态：文字变蓝 + 底部下划线 */
.case-tabs li.active {
  color: #007bff;
}
.case-tabs li.active::after {
  content: "";
  position: absolute;
  bottom: -11px; /* 贴合底部分割线 */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #007bff;
}

/* 内容区：默认隐藏，激活时显示 */
.case-content {
  min-height: 400px; /* 避免切换时跳动 */
}
.tab-panel {
  display: none; /* 默认隐藏 */
  align-items: center;
  gap: 60px;
}
.tab-panel.active {
  display: flex; /* 激活时显示 */
}

/* 图片：自适应 + 圆角 */
.content-img img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 文字区：标题 + 描述 + 按钮 */
.content-text {
  flex: 1; /* 占满剩余空间 */
}
.content-text h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}
.content-text p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30px;
}
/* 按钮样式：边框 + 悬停变色 */
.btn-view {
  padding: 0px 16px;
  border: 1px solid #007bff;
  background-color: #fff;
  color: #007bff;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-view:hover {
  background-color: #007bff;
  color: #fff;
}

/* 响应式适配：小屏幕图文上下排列 */
@media (max-width: 768px) {
  .tab-panel,
  .tab-panel.active {
    flex-direction: column;
    text-align: center;
  }
  .content-img {
    margin-bottom: 20px; /* 图片与文字间距 */
  }
}
/* 关于我们 section */
.about-section {
  background-color: #e0f0ff; /* 浅蓝色背景 */
  padding: 60px 10%;
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}

.section-subtitle {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-bottom: 40px;
}

.about-content {
  display: flex;
  flex-wrap: wrap; /* 响应式换行 */
  justify-content: space-between;
}

.about-list {
  width: 58%; /* 左侧内容宽度 */
}

.about-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 48px;
}

.about-item img {
  margin-right: 10px;
}

.about-item .text h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.about-item .text p {
  font-size: 14px;
  color: #666;
}

.about-image {
  width: 40%; /* 右侧图片宽度 */
}

.about-image img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
}

/* 页脚 section */
.footer-section {
  background-color: #151b26; /* 深蓝色背景 */
  color: #fff;
  padding: 20px 10%;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.footer-logo img {
  height: 50px;
}

.contact-info {
  display: flex;
  flex: 1;
  justify-content: space-around;
}
.contact-info img {
  margin-right: 10px;
}
.contact-item {
  display: flex;
  align-items: center;
}

.contact-item .icon {
  margin-right: 10px;
}

.contact-item .icon svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

.contact-item .text p {
  font-size: 14px;
  margin-bottom: 4px;
}

.contact-item .text span {
  font-size: 12px;
  opacity: 0.8;
}

.qrcode {
  text-align: center;
}

.qrcode img {
  width: 80px;
  margin-bottom: 8px;
}

.qrcode p {
  font-size: 12px;
  opacity: 0.8;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .container {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .about-content {
    flex-direction: column;
  }

  .about-list,
  .about-image {
    width: 100%;
  }

  .about-image {
    margin-top: 30px;
  }

  .contact-info {
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-logo {
    margin-bottom: 20px;
  }
}

/* 悬浮栏容器 */
.fixed-bar {
  position: fixed;
  right: 50px; /* 距离右侧距离，可调整 */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* 按钮间距 */
  z-index: 9999; /* 保证悬浮在最上层 */
}

/* 按钮组（按钮 + 弹窗） */
.bar-group {
  position: relative; /* 为弹窗做定位参考 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 功能按钮 */
.bar-btn {
  width: 48px;
  height: 48px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
}

.bar-btn:hover {
  background: #f3f4f6; /* 悬浮渐变 */
}

/* 图标样式（SVG） */
.icon {
  width: 24px;
  height: 24px;
  fill: #374151; /* 图标颜色 */
}

/* 侧边栏容器 */
.sidebara {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #e5e5e5;
  border-right: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: visible; /* 允许弹出层超出容器 */
  z-index: 2;
  background: #fff;
}

/* 单个按钮项 */
.sidebar-item {
  cursor: pointer;
  color: #333;
  transition: all 0.3s ease;
  position: relative;
  width: 60px;
  padding: 10px 0;
}
.sidebar-item p {
  width: 100%;
  text-align: center;
  margin: 0;
}
/* 悬停效果：背景变蓝，文字变白 */
.sidebar-item:hover {
  background-color: #2b96f5; /* 图中蓝色 */
  color: #fff;
  border-radius: 10px;
} /* 前两个菜单项（电话、公众号）悬停时：SVG 图标变白色 */
/* .sidebar-item:nth-child(1):hover p svg,
.sidebar-item:nth-child(2):hover p svg {
  fill: #ffffff !important;
} */
.sidebar-item:hover p svg {
  fill: #ffffff !important;
}
.sidebar-item:nth-child(2):hover .popup {
  background: #fff;
}
/* 图标样式 */
.iconfont {
  font-size: 22px;
  margin-right: 6px;
}

/* 弹出层（电话/二维码） */
.popup {
  position: absolute;
  right: calc(100% + 10px); /* 距离按钮右侧10px */
  top: 50%;
  transform: translateY(-50%);
  background: #2b96f5;
  color: #fff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: none; /* 初始隐藏 */
  z-index: 999;
}

/* 电话弹出层：固定文字 */
.phone-popup {
  white-space: nowrap; /* 防止换行 */
}

/* 公众号弹出层：二维码图片 */
.wechat-popup img {
  width: 120px;
  height: 120px;
  display: block;
}

/* 悬停时显示弹出层 */
.sidebar-item:hover .popup {
  display: block;
}
.Noavailable {
  display: flex;
  margin: auto;
  flex-direction: column;
}
.Noavailable p {
  text-align: center;
}
.Noavailable img {
  /* height: 388px;
  width: 400px; */
}