.elementor-9222 .elementor-element.elementor-element-0a8680c{--display:flex;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9222 .elementor-element.elementor-element-165b8f8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9222 .elementor-element.elementor-element-165b8f8.elementor-element{--align-self:flex-start;}.elementor-9222 .elementor-element.elementor-element-165b8f8 .elementor-heading-title{font-size:50px;font-weight:700;color:var( --e-global-color-fbf626b );}@media(max-width:767px){.elementor-9222 .elementor-element.elementor-element-165b8f8.elementor-element{--align-self:center;}.elementor-9222 .elementor-element.elementor-element-165b8f8 .elementor-heading-title{font-size:30px;}}@media(min-width:768px){.elementor-9222 .elementor-element.elementor-element-0a8680c{--content-width:1320px;}}/* Start custom CSS *//**
 * B2B Website HTML Sitemap - Optimized Styles
 * Author: Your B2B Design Expert
 * Version: 2.4
 *
 * Key Improvements:
 * - Wider layout (1320px) for modern screens.
 * - Multi-column grid layout for better scannability and space utilization.
 * - Added support for hierarchical lists (e.g., categories with sub-categories).
 * - Enhanced visual hierarchy with styled section headers and custom list bullets.
 * - Refined typography and spacing for a more polished, professional look.
 * - Smooth transitions for a better user experience.
 * - **Fully responsive with specific optimizations for mobile-friendly display.**
 */

/* 1. Sitemap 整体容器样式 */
.rank-math-html-sitemap {
  max-width: 1320px;
  margin: 50px auto; /* 进一步增加垂直外边距 */
  padding: 40px 50px; /* 进一步增加水平内边距 */
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 12px; /* 稍大一点的圆角，更显现代 */
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 引入更优的系统字体栈 */
}

/* 2. 主标题样式 */
.rank-math-html-sitemap__title {
  text-align: center;
  font-size: 34px;
  font-weight: 700; /* 加粗以增强冲击力 */
  margin-bottom: 40px; /* 增加与下方内容的间距 */
  color: #101828; /* 使用更深的黑色，提升对比度 */
  border-bottom: none; /* 移除边框，采用间距进行分割 */
  padding-bottom: 0;
}

/* 3. 分类标题样式 (卡片式设计) */
.rank-math-html-sitemap__section-title,
.rank-math-html-sitemap h2,
.rank-math-html-sitemap h3 {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
  background-color: #f8f9fa; /* 使用非常浅的灰色背景 */
  margin-top: 40px;
  margin-bottom: 20px;
  padding: 12px 20px; /* 增加内边距 */
  border-left: 3px solid #397BC2; /* 使用品牌色作为左侧强调线 */
  border-radius: 6px;
  grid-column: 1 / -1; /* 让分类标题横跨所有列 */
}
.rank-math-html-sitemap__section-title:first-child,
.rank-math-html-sitemap h2:first-of-type {
    margin-top: 0;
}

/* 4. 链接列表容器 - 采用Grid网格布局 (仅限顶级列表) */
.rank-math-html-sitemap > ul,
.rank-math-html-sitemap h2 + ul,
.rank-math-html-sitemap h3 + ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 30px; /* 微调行间距 */
}

/* 5. 嵌套列表样式 (处理层级关系) */
.rank-math-html-sitemap ul ul {
  display: block;
  list-style: none;
  margin-top: 12px;
  padding-left: 25px;
  border-left: 2px solid #e9ecef; /* 引导线使用更柔和的颜色 */
}

/* 6. 列表项样式 (增加自定义项目符号) */
.rank-math-html-sitemap__item {
  margin: 0;
  text-align: left;
  line-height: 1.7;
  position: relative;
  padding-left: 18px; /* 为自定义项目符号留出空间 */
}
/* 自定义项目符号 */
.rank-math-html-sitemap__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px; /* 垂直居中对齐 */
  width: 6px;
  height: 6px;
  background-color: #ced4da; /* 默认符号颜色 */
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out;
}
/* 嵌套列表的符号可以小一点 */
.rank-math-html-sitemap ul ul .rank-math-html-sitemap__item::before {
  background-color: #dee2e6;
  top: 11px;
  width: 4px;
  height: 4px;
}


/* 7. 链接样式 */
.rank-math-html-sitemap__link {
  color: #344054;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
  display: inline-block;
}

.rank-math-html-sitemap__link:hover {
  color: #397BC2;
  text-decoration: none;
  transform: translateX(4px);
}
/* 当鼠标悬停在列表项上时，也高亮其项目符号和链接 */
.rank-math-html-sitemap__item:hover::before {
    background-color: #397BC2;
}
.rank-math-html-sitemap__item:hover > .rank-math-html-sitemap__link {
    color: #397BC2;
}

/* 8. 响应式设计 */

/* 平板设备 (992px 以下) */
@media (max-width: 992px) {
  .rank-math-html-sitemap > ul,
  .rank-math-html-sitemap h2 + ul,
  .rank-math-html-sitemap h3 + ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 移动设备 (768px 以下) */
@media (max-width: 768px) {
  /* 调整整体容器边距 */
  .rank-math-html-sitemap {
    padding: 30px 20px;
    margin: 30px auto;
  }
  
  /* 调整主标题大小 */
  .rank-math-html-sitemap__title {
      font-size: 26px;
      margin-bottom: 30px;
  }

  /* 调整分类标题大小和边距 */
  .rank-math-html-sitemap__section-title,
  .rank-math-html-sitemap h2,
  .rank-math-html-sitemap h3 {
    font-size: 17px;
    padding: 10px 15px;
  }

  /* 顶级列表改为单列，并调整间距 */
  .rank-math-html-sitemap > ul,
  .rank-math-html-sitemap h2 + ul,
  .rank-math-html-sitemap h3 + ul {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  /* 调整嵌套列表缩进 */
  .rank-math-html-sitemap ul ul {
      padding-left: 20px;
  }
  
  /* 调整列表项缩进 */
  .rank-math-html-sitemap__item {
      padding-left: 22px;
  }
  
  /* 调整项目符号位置 */
  .rank-math-html-sitemap__item::before {
      left: 4px;
  }

  /* 在移动端禁用悬停位移效果，以优化触摸体验 */
  .rank-math-html-sitemap__link:hover {
    transform: none;
  }
}/* End custom CSS */