/* =========================
   全局样式
========================= */
* {
  margin: 0;              /* 清除默认外边距 */
  padding: 0;             /* 清除默认内边距 */
  box-sizing: border-box; /* 包括内边距和边框在宽高计算内 */
}

body {
  font-family: "Microsoft YaHei", sans-serif; /* 中文网页常用字体 */
}

ul, li {
  list-style: none; /* 移除列表符号 */
}

/* =========================
   头部导航
========================= */
.header {
  position: sticky;       /* 滚动时固定在顶部 */
  top: 0;
  background: #fff;       /* 背景白色 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 底部阴影 */
  z-index: 999;           /* 保证在其他元素上方 */
}

.nav-container {
  width: 1200px;
  margin: auto;           /* 居中 */
  display: flex;          /* 横向布局 */
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center;    /* 垂直居中 */
  height: 70px;
}

.nav-left {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;           /* logo 高度 */
  margin-right: 80px;     /* logo 与菜单间距 */
}

.nav-menu {
  display: flex;          /* 菜单横向排列 */
}

.nav-item {
  position: relative;     /* 用于下划线动画和下拉菜单定位 */
  margin-right: 40px;
}

.nav-item > a {
  color: #333;            /* 文字颜色 */
  text-decoration: none;  /* 去掉下划线 */
  padding: 10px 0;        /* 上下内边距增加点击区域 */
  position: relative;     /* 用于下划线伪元素定位 */
}

/* 导航下划线动画 */
.nav-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;           /* 下划线位置 */
  width: 0;               /* 初始宽度为0 */
  height: 3px;
  background: #1677ff;    /* 下划线颜色 */
  transition: width 0.3s; /* 动画过渡效果 */
}

.nav-item:hover > a {
  color: #1677ff;         /* 悬停文字颜色 */
  font-weight: bold;
}

.nav-item:hover > a::after {
  width: 100%;            /* 悬停时显示下划线 */
}

/* 试用按钮样式 */
.trial-btn {
  background: #1677ff;    /* 按钮背景 */
  color: #fff;            /* 按钮文字颜色 */
  border: none;
  padding: 10px 22px;     /* 内边距 */
  cursor: pointer;
  border-radius: 4px;     /* 圆角 */
  margin-right: 100px;
}

.trial-btn:hover {
  background: #0958d9;    /* 悬停深蓝色 */
}

/* 试用按钮样式 */
.trial-btn1 {
  background: #1677ff;    /* 按钮背景 */
  color: #fff;            /* 按钮文字颜色 */
  border: none;
  padding: 10px 22px;     /* 内边距 */
  cursor: pointer;
  border-radius: 4px;     /* 圆角 */
}

.trial-btn1:hover {
  background: #0958d9;    /* 悬停深蓝色 */
}

/* =========================
   下拉菜单
========================= */
.dropdown-menu {
  position: absolute;
  top: 42px;              /* 下拉位置 */
  left: 0;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  opacity: 0;             /* 初始隐藏 */
  visibility: hidden;
  transform: translateY(10px); /* 下移10px隐藏 */
  transition: all 0.25s ease;
  padding: 8px 0;
  width: 160px;           /* 固定宽度 */
  display: block;         
  white-space: nowrap;    /* 防止文字换行 */
  font-size:14px;
}
.dropdown-menu a{
  text-decoration: none;  /* 去掉下划线 */
  color:#111;
}
/* 悬停显示下拉菜单 */
.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* 回到原位 */
}

.dropdown-menu li {
  padding: 15px 20px;
  cursor: pointer;
  display: block;
  font-weight: normal;
}

.dropdown-menu li:hover {
  background: #1677ff;    /* 悬停背景色 */
  color: #fff;            /* 悬停文字颜色 */
  font-weight: bold;      /* 加粗 */
}

/* =========================
   产品服务面板
========================= */
.product-panel {
  position: absolute;
  top: 45px;      /* 面板距离导航底部，可按需要调整 */
  left: -160px;        /* 左边对齐 nav-container */
  width: 1200px;  /* 与 nav-container 同宽 */
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
}

/* 悬停显示产品面板 */
.product:hover .product-panel {
  opacity: 1;
  visibility: visible;
}

.panel-inner {
  display: flex;
  padding-top: 0px;
  padding-left: 70px;

}

/* 左侧标签 */
.panel-left {
  width: 30%;
  padding-top: 50px;
}

.panel-left h3 {
  font-size: 36px;
  margin-bottom: 30px;
  color:#233863;
}

.product-tabs .tab {
  padding: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 0.35s;
  color:#333;
  margin-bottom: 10px;
}

.product-tabs .tab img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* 标签激活和悬停背景动画 */
.product-tabs .tab.active::before,
.product-tabs .tab:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #e6f4ff;
  z-index: -1;
  animation: slideBg 0.5s forwards;
}

@keyframes slideBg {
  from { width: 0; }
  to { width: 100%; }
}

.product-tabs .tab.active,
.product-tabs .tab:hover {
  font-weight: bold;
}

/* 中间内容区域 */
.panel-center {
  width: 35%;
  padding-left: 20px;
}

.tab-content {
  display: none;          /* 默认隐藏 */
  opacity: 0;
  transition: opacity 0.3s ease;
  background: #e6f4ff;
  height:450px;
  padding: 30px;
}

.tab-content.active {
  display: block;         /* 激活显示 */
  opacity: 1;
}

.tab-content h4 {
  font-weight: bold;
  margin: 15px 0;
  font-size:28px;
  color:#233863;
}

.tab-content p {
  margin-bottom: 30px;
  font-size:14px;
  color:#333;
}

.text-links a {
  display: block;
  font-weight: bold;
  text-decoration: none;
  margin: 20px 0;
  color:#233863;
}

.text-links a:hover {
  color: #1677ff;
}

/* 右侧图片 */
.panel-right {
  width: 35%;
}

.panel-right img {
  width: 100%;
  display: block;
  transition: opacity 0.3s ease;
}

/* =========================
   响应式菜单
========================= */
.hamburger {
  display: none;          /* 默认隐藏 */
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  width: 26px;
  height: 3px;
  background: #333;
  margin: 4px 0;
}

/* tab 右侧箭头 */
.product-tabs .tab::after {
  content: "›";            /* Unicode 箭头符号 */
  margin-left: auto;       /* 推到右边 */
  color: #999;             /* 默认箭头颜色 */
  font-size: 24px;         /* 固定大小 */
  transition: color 0.3s;
  padding-right:20px;
}

/* 悬停或激活状态 */
.product-tabs .tab:hover::after,
.product-tabs .tab.active::after {
  color: #1677ff;          /* 悬停或激活颜色 */
}
@media (max-width: 768px) {
  .nav-container {
    width: 100%;
    padding: 0 16px;
  }

  .nav-menu,
  .nav-right {
    display: none; /* 默认隐藏 */
  }

  .hamburger {
    display: flex; /* 显示汉堡按钮 */
  }

  /* 移动端显示一级菜单 */
  .nav-menu.mobile-active {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    background: #fff;
    position: absolute;
    top: 70px; /* logo 下方 */
    left: 0;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 10px 0;
    z-index: 998;
  }

  .nav-menu.mobile-active .nav-item {
    margin: 0; /* 去掉左右间距 */
    border-bottom: 1px solid #f0f0f0;
  }

  .nav-menu.mobile-active .nav-item > a {
    padding: 12px 20px;
    display: block;
    font-size: 16px;
  }

  /* 隐藏子菜单 */
  .nav-menu.mobile-active .dropdown-menu {
    display: none !important;
  }

  /* 隐藏产品服务面板 */
  .product-panel {
    display: none !important;
  }
}
/* ========== banner 轮播样式 ========== */
.banner-slider {
  position: relative;
  width: 100%;        /* 全屏宽 */
  overflow: hidden;
}

.banner-slider .slides {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 750; /* 宽高比 1200:750 -> 16:10 左右 */
}

.banner-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* 快速切换 */
}

.banner-slider .slide.active {
  opacity: 1;
}

.banner-slider .slide img {
  width: 100%;       /* 宽度铺满父容器 */
  height: 100%;      /* 高度保持 750px */
  object-fit: cover; /* 保持比例并裁剪 */
}

/* 圆点 */
.banner-slider .dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.banner-slider .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.banner-slider .dot.active {
  background: #1677ff;
}

/* 移动端自适应 */
@media (max-width: 768px) {
  .banner-slider .slides {
    aspect-ratio: 1229 / 480; /* 按比例缩小 */
  }
}
/* ===============================
   企业精选网络安全服务模块
=============================== */

/* 模块整体区域（紧贴 header 下方） */
.service-section {
  width: 100%;                 /* 全屏宽度 */
  background: #fff;            /* 白色背景 */
}

/* 模块整体区域（紧贴 header 下方） */
.service-section1 {
  width: 100%;                 /* 全屏宽度 */
  background: #fff;            /* 白色背景 */
  margin-bottom:120px;
  background: url("../imges/bg777.jpg") no-repeat center / cover;
}

/* 模块整体区域（紧贴 header 下方） */
.service-section2 {
  width: 100%;                 /* 全屏宽度 */
  background: #fff;            /* 白色背景 */
  margin-bottom:50px;
  background: url("../imges/bg777.jpg") no-repeat center / cover;
}

/* 内容容器，固定 1200px 并居中 */
.service-container {
  width: 1200px;
  margin: auto;
  padding-top: 60px;           /* 距离顶部 60px */
}

/* 内容容器，固定 1200px 并居中 */
.service-container1 {
  width: 1200px;
  margin: auto;
  padding-top: 30px;           /* 距离顶部 60px */
}

/* 顶部大标题 */
.service-title {
  font-size: 36px;
  color: #233863;              /* 指定标题颜色 */
  text-align: center;
}

/* ===============================
   分类 Tab 区域
=============================== */

/* Tab 容器 */
.service-tabs {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;            /* 与标题间距 */
  border-bottom: 1px solid #e5e5e5; /* 浅灰色基线 */
}

/* 单个 Tab */
.service-tab {
  position: relative;
  padding-bottom: 20px;        /* 给下划线预留空间 */
  cursor: pointer;
  color: #333;
  font-size: 28px;
  padding-left:50px;
  padding-right:50px;
}

/* Tab 下方蓝色滑动线 */
.service-tab span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;                    /* 默认不显示 */
  height: 3px;
  background: #1677ff;
  transition: width 0.3s;
}

/* Hover / 激活状态 */
.service-tab.active,
.service-tab:hover {
  color: #1677ff;              /* 文字变蓝 */
  font-weight: bold;
}

/* Hover / 激活时下划线展开 */
.service-tab.active span,
.service-tab:hover span {
  width: 100%;
}

/* ===============================
   内容区域
=============================== */

/* 内容整体容器 */
.service-content {
  margin-top: 60px;            /* 距离 tab 线 60px */
}

.service-content1 {
  margin-top: 60px;            /* 距离 tab 线 60px */
  background-color:#fff;
}

/* 单个内容面板 */
.service-pane {
  display: none;               /* 默认隐藏 */
  align-items: flex-start;
}

/* 当前激活内容 */
.service-pane.active {
  display: flex;
}

/* 左侧文案区域 */
.service-left {
  width: 50%;
  margin-left:50px;
  margin-top:15px;
}

.service-left .trial-btn{
  margin-top: 30px;
}
/* 描述文字 */
.service-desc {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

/* 图标列表区域 */
.service-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 列布局 */
  gap: 20px;
  margin-bottom: 40px;
  color: #333;
}

/* 单条图标 + 文案 */
.service-list div {
  display: flex;
  align-items: center;
}

/* 小图标 */
.service-list img {
  width: 20px;
  margin-right: 10px;
}

/* ===============================
   右侧图片区域
=============================== */

.service-right {
  width: 45%;
}

.service-right img {
  width: 100%;
  display: block;
}

/* ===============================
   移动端自适应
=============================== */

@media (max-width: 768px) {
  .service-container {
    width: 100%;
    padding: 40px 16px;
  }

  /* tab 改为纵向排列 */
  .service-tabs {
    flex-direction: column;
  }

  /* 内容区域上下排列 */
  .service-pane.active {
    flex-direction: column;
  }

  .service-left,
  .service-right {
    width: 100%;
  }
}
/* ===============================
   智能拓扑方案模块
=============================== */

/* 1920px 背景容器 */
.topology-section {
  width: 100%;
  min-height: 100vh;

  background-image: url("../imges/topology-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;   /* 👈 关键：横向 + 纵向拉伸 */
}

/* 内部 1200px 内容容器 */
.topology-inner {
  width: 1200px;
  margin: auto;
  padding-top: 120px;
  padding-bottom: 150px;
}

/* 内部 1200px 内容容器 */
.topology-inner1 {
  width: 1200px;
  margin: auto;
  padding-top: 60px;
}

/* 大标题 */
.topology-title {
  text-align: center;
  font-size: 36px;
  color: #233863;
}

/* 2 行 3 列网格 */
.topology-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

/* 单个卡片 */
.topology-card {
  background: #fff;
  padding: 30px 40px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

/* hover 阴影变化 */
.topology-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

/* 卡片图片 */
.topology-card img {
  width: 250px;
  margin-bottom: 20px;
}

/* 卡片标题 */
.topology-card h3 {
  font-size: 20px;
  color: #233863;
  font-weight: bold;
  margin-bottom: 16px;
}

/* 描述文案 */
.topology-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 超链接 */
.topology-card a {
  font-size: 14px;
  color: #1677ff;
  text-decoration: none;
  transition: color 0.3s;
  font-weight: bold;
}

/* hover 变蓝 */
.topology-card a:hover {
  color: #0958d9;
}

/* 单个卡片 */
.topology-card1 {
  background: #fff;
  padding: 30px 40px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* hover 阴影变化 */
.topology-card1:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* 卡片图片 */
.topology-card1 img {
  width: 250px;
  margin-bottom: 20px;
}

/* 卡片标题 */
.topology-card1 h3 {
  font-size: 20px;
  color: #1677ff;
  font-weight: bold;
  margin-bottom: 16px;
}

/* 描述文案 */
.topology-card1 p {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 50px;
}

/* 超链接 */
.topology-card1 a {
  font-size: 14px;
  color: #1677ff;
  text-decoration: none;
  transition: color 0.3s;
  font-weight: bold;
}

/* hover 变蓝 */
.topology-card1 a:hover {
  color: #0958d9;
}

/* ===============================
   移动端自适应
=============================== */

@media (max-width: 768px) {
  .topology-inner {
    width: 100%;
    padding: 40px 16px;
  }

  .topology-grid {
    grid-template-columns: 1fr;
  }

  .topology-card {
    padding: 30px 20px;
  }
}
/* ===== 数据成效模块整体 ===== */
.effect-section {
  width: 100%;
  background: #fff;
}

/* ===== 内部 1200px 容器 ===== */
.effect-container {
  width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 80px;
}

/* ===== 大标题 ===== */
.effect-title {
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  color: #233863;
}

/* ===== 主体内容区域 ===== */
.effect-content {
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== 左侧图片 ===== */
.effect-image {
  width: 45%;
}

.effect-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== 右侧数据区域 ===== */
.effect-stats {
  width: 50%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

/* ===== 单个数据块 ===== */
.stat-item {
  text-align: left;
  padding-left:50px;
}

.stat-item1 {
  text-align: left;
}

/* 百分比数字 */
.stat-num {
  font-size: 60px;
  font-weight: 700;
  color: #1e6fff;
  margin-bottom: 10px;
}

/* 主说明 */
.stat-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 4px;
}

/* 次说明 */
.stat-desc {
  font-size: 14px;
  color: #666;
}

/* 百分比数字 */
.stat-num1 {
  font-size: 60px;
  font-weight: 700;
  color: #1e6fff;
  margin-bottom: 10px;
  padding-right:150px;
}

/* 主说明 */
.stat-title1 {
  font-size: 16px;
  color: #666;
  margin-bottom: 4px;
}

/* 次说明 */
.stat-desc1 {
  font-size: 14px;
  color: #666;
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
  .effect-container {
    width: 100%;
    padding: 40px 20px;
  }

  .effect-title {
    font-size: 26px;
  }

  .effect-content {
    flex-direction: column;
  }

  .effect-image,
  .effect-stats {
    width: 100%;
  }

  .effect-stats {
    margin-top: 40px;
    gap: 30px;
  }

  .stat-num {
    font-size: 32px;
  }
}
/* ===== 最新动态整体区域 ===== */
.news-section {
  width: 100%;
  background: url("../imges/news-bg.jpg") no-repeat center center;
  background-size: cover;
}

/* ===== 内部 1200px 容器 ===== */
.news-container {
  width: 1200px;
  margin: 0 auto;
  padding: 0px 0 80px;
}

/* ===== 大标题 ===== */
.news-title {
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  color: #233863;
}

/* ===== 主体内容 ===== */
.news-content {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
}

/* ===== 左侧大图文章 ===== */
.news-main {
  width: 100%;
}

/* 左侧文章白色底容器 */
.news-main-wrapper {
  width: 48%;
  background: #fff;       /* 白色背景 */
  padding: 16px;
  box-sizing: border-box;
}

.news-main img {
  width: 100%;
  display: block;
  margin-bottom: 16px;
}

.news-main-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  text-decoration: none;  /* 去掉下划线 */
}

.news-main-title:hover {
  color: #1e6fff;
}

/* ===== 右侧文章列表 ===== */
.news-list {
  width: 48%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ===== 单篇文章 ===== */
.news-item {
  position: relative;
  background: #fff;
}

/* 右上角新闻标签 */
.news-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  padding: 2px 8px;
  background: #eee;
  color: #233863;
}

/* 文章标题 */
.news-item-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-bottom: 90px;
  text-decoration: none;  /* 去掉下划线 */
  padding:50px 20px 0;
}

.news-item-title:hover {
  color: #1e6fff;
}

/* 时间 */
.news-date {
  font-size: 13px;
  color: #666;
  padding-left:20px;
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
  .news-container {
    width: 100%;
    padding: 40px 20px;
  }

  .news-title {
    font-size: 26px;
  }

  .news-content {
    flex-direction: column;
  }

  .news-main,
  .news-list {
    width: 100%;
  }

  .news-list {
    margin-top: 30px;
    grid-template-columns: 1fr;
  }
  .news-main-wrapper {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
  }
}
/* ===== 合作伙伴整体区域 ===== */
.partners-section {
  width: 100%;
  background: #fff;
}

/* 内部 1200px 容器 */
.partners-container {
  width: 1200px;
  margin: 0 auto;
  padding: 60px 0 80px;
}

/* 大标题 */
.partners-title {
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  color: #233863;
}

/* 2行6列网格 */
.partners-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
  align-items: center;
  justify-items: center;
}

/* 单个logo */
.partner-item img {
  width: 160px;        /* 根据需要可调整大小 */
  height: auto;
  transition: all 0.3s ease;
}

/* hover阴影效果 */
.partner-item img:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* ===== 移动端自适应 ===== */
@media (max-width: 768px) {
  .partners-container {
    width: 100%;
    padding: 40px 20px;
  }

  .partners-title {
    font-size: 26px;
  }

  /* 移动端变为2列或3列 */
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .partner-item img {
    width: 80px;
  }
}

@media (max-width: 480px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .partner-item img {
    width: 70px;
  }
}
/* ===== 联系我们整体区域 ===== */
.contact-section {
  width: 100%;
  background: #fff;
  padding: 0px 0 80px;
}

/* 内部1200px容器居中 */
.contact-container {
  width: 1200px;
  margin: 0 auto;
}

/* 小容器背景图片 */
.contact-bg {
  width: 100%;
  padding: 60px 40px;
  background: url("../imges/bg5.png") no-repeat center / cover;
  box-sizing: border-box;
  text-align: center;
  border-radius: 8px; /* 可选圆角 */
}

/* 大标题 */
.contact-title {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

/* 小标题 */
.contact-subtitle {
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* 免费试用按钮 */
.contact-btn {
  font-size: 16px;
  font-weight: 600;
  color: #1677ff;          /* 默认蓝色字体 */
  background: #fff;        /* 白色背景 */
  border: none;
  padding: 12px 28px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-btn:hover {
  color: #233863;          /* 悬停字体颜色 */
  background: #fff;
}

/* ===== 移动端自适应 ===== */
@media (max-width: 768px) {
  .contact-container {
    width: 100%;
    padding: 0 20px;
  }

  .contact-bg {
    padding: 40px 20px;
  }

  .contact-title {
    font-size: 26px;
  }

  .contact-subtitle {
    font-size: 14px;
  }

  .contact-btn {
    font-size: 14px;
    padding: 10px 22px;
  }
}
/* ===== 页脚整体区域 ===== */
.footer-section {
  width: 100%;
  background: #f5f5f5;
  padding: 60px 0 20px;
  box-sizing: border-box;
}

/* 内部1200px容器 */
.footer-container {
  width: 1200px;
  margin: 0 auto;
}

/* 上部内容 */
.footer-top {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding-bottom: 40px;
}

/* 左侧区域 */
.footer-left {
  width: 18%;
  border-right: 1px solid #ccc;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.footer-left .footer-logo {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.footer-left .footer-contact {
  color: #333;
  margin-bottom: 8px;
}

.footer-left .footer-phone {
  color: #333;
  font-weight: 700;
  margin-bottom: 36px;
  font-size: 18px;
}

.footer-left .footer-links a {
  color: #666;
  text-decoration: none;
  margin-right: 12px;
  font-size: 14px;
}

.footer-left .footer-links a:hover {
  color: #111;
}

/* 右侧区域 */
.footer-right {
  width: 75%;
  display: flex;
  justify-content: space-between;
  padding-left: 50px;
  box-sizing: border-box;
}

.footer-col .col-title {
  font-weight: 700;
  color: #333;
  margin-bottom: 22px;
}

.footer-col a {
  display: block;
  color: #666;
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 14px;
}

.footer-col a:hover {
  color: #111;
}

/* 下方版权 */
.footer-bottom {
  margin-top: 20px;
  text-align: left;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  padding-left: 20px;
  margin-bottom: 30px;
}
.footer-bottom a{
  text-decoration: none;
  color:#666;
}
.footer-bottom a:hover{
  text-decoration: none;
  color:#111;
}
/* ===== 移动端自适应 ===== */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
  }

  .footer-left,
  .footer-right {
    width: 100%;
    padding: 0;
    border: none;
    margin-bottom: 20px;
  }

  .footer-right {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .footer-col {
    width: 48%;
    margin-bottom: 20px;
  }
}
/* ===== 方案拓扑图模块 ===== */
.topology-section {
  width: 100%;
  max-width: 1920px;       /* 宽度限制为1920px */
  margin: 0 auto;          /* 居中 */
  background: url('../../imges/topology-bg.jpg') center/cover no-repeat; /* 背景图 */
  padding-bottom: 60px;    /* 下方留空间，避免图片贴底 */
}

/* ===== 方案拓扑图模块 ===== */
.topology-section1 {
  width: 100%;
  max-width: 1920px;       /* 宽度限制为1920px */
  margin: 0 auto;          /* 居中 */
  background: url('../imges/servicebg.jpg') center/cover no-repeat; /* 背景图 */
  padding-bottom: 60px;    /* 下方留空间，避免图片贴底 */
}

/* 小容器，宽1200px，居中 */
.topology-container {
  width: 90%;              /* 移动端自适应，默认90% */
  max-width: 1200px;       /* 桌面端最大宽度1200px */
  margin: 0 auto;          /* 居中 */
  padding-top: 60px;       /* 顶部距离大标题60px */
  text-align: center;      /* 内容居中 */
}

/* 大标题 */
.topology-title {
  font-size: 36px;         /* 大标题字号 */
  color: #233863;          /* 指定字体颜色 */
  margin-bottom: 60px;     /* 大标题下方60px间距 */
  line-height: 1.2;
}

/* 居中大图片 */
.topology-image {
  max-width: 100%;         /* 图片随容器宽度自适应 */
  height: auto;
  display: inline-block;
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
  .topology-title {
    font-size: 28px;       /* 移动端标题缩小 */
    margin-bottom: 40px;
  }

  .topology-container {
    padding-top: 40px;     /* 移动端顶部间距 */
  }
}
/* ===== 企业定制化方案模块 ===== */
.enterprise-solution-section {
  width: 100%;
  max-width: 1920px; /* 桌面端最大宽度1920px */
  margin: 0 auto;
  background: url('../../imges/enterprise-bg.jpg') center/cover no-repeat; /* 背景图 */
  padding-bottom: 60px;
}

.enterprise-container {
  width: 90%;          /* 移动端自适应 */
  max-width: 1200px;   /* 桌面端宽度1200px */
  margin: 0 auto;
  padding-top: 60px;
}

/* 大标题 */
.enterprise-title {
  font-size: 36px;
  color: #233863;
  text-align: center;
  margin-bottom: 60px;
}

/* 卡片容器，4列布局 */
.enterprise-cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px; /* 卡片间距 */
}

/* 单个卡片样式（圆角修改） */
.enterprise-card {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 40px 20px 50px 20px;
  flex: 1 1 calc(25% - 15px); /* 4列布局 */
  min-width: 250px;            /* 移动端最小宽度 */
  border-radius: 4px;          /* 圆角效果 */
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 鼠标悬停效果仍然有效 */
.enterprise-card:hover {
  box-shadow: none;
  background-color: #007BFF;   /* 蓝色背景 */
}

/* 卡片内容 */
.card-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  transition: filter 0.3s ease;
}

/* 卡片数字 */
.card-number {
  font-size: 28px;
  font-weight: bold;
  color: #007BFF;
  margin-bottom: 5px;
  transition: color 0.3s ease;
}

/* 卡片小标题 */
.card-subtitle {
  font-size: 16px;
  font-weight: bold;
  color: #007BFF;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

/* 卡片文字说明 */
.card-text {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  transition: color 0.3s ease;
}

/* 卡片悬停效果内容变白 */
.enterprise-card:hover .card-number,
.enterprise-card:hover .card-subtitle,
.enterprise-card:hover .card-text {
  color: #fff;
}

.enterprise-card:hover .card-icon {
  filter: brightness(0) invert(1); /* 图标变白 */
}

/* 按钮容器居中 */
.enterprise-btn-container {
  text-align: center;
  margin-top: 40px;
}


/* ===== 移动端自适应 ===== */
@media (max-width: 1024px) {
  .enterprise-cards {
    flex-wrap: wrap;
  }

  .enterprise-card {
    flex: 1 1 calc(50% - 15px); /* 平板2列 */
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .enterprise-title {
    font-size: 28px;
    margin-bottom: 40px;
  }

  .enterprise-card {
    flex: 1 1 100%; /* 手机1列 */
  }

  .enterprise-btn {
    width: 80%;
    padding: 12px 0;
  }
}
/* ===== 智慧云网安服务模块 ===== */
.cloud-security-section {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  background: url('../imges/cloud-security-bg.jpg') center/cover no-repeat;
  padding-bottom: 60px;
}

.cloud-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
}

/* 大标题保持不变 */
.cloud-title {
  font-size: 36px;
  color: #233863;
  text-align: center;
  margin-bottom: 60px;
}

/* 左右布局容器 */
.cloud-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

/* 左侧卡片容器 */
.cloud-left-cards {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 单个左侧卡片 */
.cloud-left-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 20px 20px 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 鼠标悬停 */
.cloud-left-card:hover {
  box-shadow: none;
  background-color: #007BFF;
}

/* 卡片文字 */
.left-card-text {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  transition: color 0.3s ease;
}

/* 悬停文字变白 */
.cloud-left-card:hover .left-card-text {
  color: #fff;
}

/* 右箭头 */
.left-card-arrow {
  font-size: 20px;
  color: #333;
  transition: color 0.3s ease;
}

.cloud-left-card:hover .left-card-arrow {
  color: #fff;
}

/* 右侧图片容器 */
.cloud-right-image {
  flex: 1 1 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-image {
  max-width: 100%;
  height: auto;
}

/* ===== 智慧云网安服务模块 ===== */
.cloud-security-section1 {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding-bottom: 30px;
}

.cloud-container1 {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
}

/* 大标题保持不变 */
.cloud-title1 {
  font-size: 36px;
  color: #233863;
  text-align: center;
  margin-bottom: 60px;
}

/* 左右布局容器 */
.cloud-layout1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

/* 左侧卡片容器 */
.cloud-left-cards1 {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 单个左侧卡片 */
.cloud-left-card1 {
  background: #fff;
  border-radius: 8px;
  padding: 20px 20px 20px 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  /* 改成列布局 */
  display: flex;
  flex-direction: column; /* 纵向排列 */
  align-items: flex-start; /* 靠左 */
  gap: 10px; /* h3和p之间留点空隙 */

  cursor: pointer;
}

/* 鼠标悬停 */
.cloud-left-card1:hover {
  box-shadow: none;
  background-color: #007BFF;
}

/* 给智慧云网安服务右侧图片加阴影 */
.cloud-right-image1 .right-image {
  width: 88%;              /* 图片宽度自适应父容器 */
  display: block;
  border-radius: 8px;      /* 可选圆角，和卡片统一 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  object-fit: cover;        /* 保持图片比例填充 */
}


/* 卡片文字 */
.left-card-text1 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* 卡片文字 */
.cloud-left-card1 p{
  font-size: 14px;
  color: #333;
}

/* 鼠标悬停卡片，h3/span/p文字都变白 */
.cloud-left-card1:hover h3,
.cloud-left-card1:hover span,
.cloud-left-card1:hover p {
  color: #fff;
}


.cloud-left-card:hover .left-card-arrow {
  color: #fff;
}

/* 右侧图片容器 */
.cloud-right-image1 {
  flex: 1 1 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-image1 {
  max-width: 100%;
  height: auto;
}

/* ===== 移动端自适应 ===== */
@media (max-width: 1024px) {
  .cloud-layout {
    flex-direction: column;
    align-items: center;
  }

  .cloud-left-cards, .cloud-right-image {
    flex: 1 1 100%;
  }
}

@media (max-width: 768px) {
  .cloud-title {
    font-size: 28px;
    margin-bottom: 40px;
  }

  .cloud-left-card {
    padding: 15px 15px 15px 20px;
  }

  .left-card-text {
    font-size: 14px;
  }

  .left-card-arrow {
    font-size: 18px;
  }
}
/* ===== 企业定制化方案模块 ===== */
.enterprise-custom-section {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  background: url('../../imges/enterprise-bg.jpg') center/cover no-repeat;
  padding-bottom: 120px;
}

.enterprise-custom-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 60px; /* 大标题上方60px */
}

/* 大标题保持不变 */
.enterprise-custom-title {
  font-size: 36px;
  color: #233863;
  text-align: center;
  margin-bottom: 60px;
}

/* 卡片容器 3列布局 */
.custom-cards-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap; /* 移动端换行 */
}

/* 单个卡片 */
.custom-card {
  background: #fff;
  border-radius: 12px; /* 圆角 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  flex: 1 1 calc(30% - 13.3px); /* 3列布局 */
  min-width: 280px;
  overflow: hidden;
}

/* 上部分 */
.custom-card-top {
  background-size: cover;
  background-position: center;
  padding: 20px;
  padding:30px;
}

/* 上部分标题 */
.custom-card-top-title {
  font-size: 20px;
  font-weight: bold;
  color: #233863;
  margin-bottom: 5px;
}

/* 上部分副标题 */
.custom-card-top-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

/* 按钮容器 */
.custom-card-buttons {
  display: flex;
  gap: 10px;
  padding-top:20px;
}

/* 白色按钮 */
.custom-btn-white {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.3s ease;
  font-size: 14px;
}

.custom-btn-white:hover {
  color: #007BFF;
}

/* 蓝色按钮 */
.custom-btn-blue {
  background-color: #007BFF;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 14px;
}

.custom-btn-blue:hover {
  background-color: #0056b3;
}

/* 下部分文字 */
.custom-card-bottom {
  padding: 30px;
  font-size: 14px;
  color: #333;
  list-style: none;
}

.custom-card-bottom li {
  margin-bottom: 6px;
}

/* ===== 移动端自适应 ===== */
@media (max-width: 1024px) {
  .custom-cards-wrapper {
    flex-wrap: wrap;
  }

  .custom-card {
    flex: 1 1 48%; /* 平板两列 */
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .enterprise-custom-title {
    font-size: 28px;
    margin-bottom: 40px;
  }

  .custom-card {
    flex: 1 1 100%; /* 手机单列 */
  }

  .custom-card-top-title {
    font-size: 18px;
  }

  .custom-card-top-subtitle {
    font-size: 13px;
  }

  .custom-card-bottom {
    font-size: 13px;
  }

  .custom-btn-white, .custom-btn-blue {
    padding: 5px 10px;
    font-size: 12px;
  }
}
/* 移动端隐藏 企业精选服务模块 */
@media (max-width: 768px) {
  .service-section {
    display: none !important;
  }
}
/* ===============================
   footer 移动端自适应优化
=============================== */
@media (max-width: 768px) {

  .footer-section {
    padding: 40px 0 20px;
  }

  .footer-container {
    width: 100%;
    padding: 0 16px;
  }

  /* 上半部分改为纵向 */
  .footer-top {
    flex-direction: column;
    padding-bottom: 20px;
  }

  /* 左侧信息 */
  .footer-left {
    width: 100%;
    border-right: none;
    padding: 0;
    text-align: center;
    margin-bottom: 30px;
  }

  .footer-left img {
    margin-bottom: 12px;
  }

  .footer-phone {
    font-size: 16px;
  }

  /* 右侧栏目 */
  .footer-right {
    width: 100%;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .footer-col {
    width: 100%;
  }

  .footer-col .col-title {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .footer-col a {
    font-size: 13px;
    margin-bottom: 8px;
  }

  /* 底部版权 */
  .footer-bottom {
    text-align: center;
    padding-left: 0;
    font-size: 12px;
    line-height: 1.5;
  }
}