/* 热门服务开始 */
.main-container {
    display: flex;
    max-width: 1200px; /* 设置最大宽度为1200px */
    margin: 0 auto; /* 水平居中 */
    box-sizing: border-box; /* 包括内边距和边框在内的总宽度不超过1200px */
    padding: 20px; /* 增加内边距 */
}

.hot-services {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 模块之间的水平间距 */
}

.service-item {
    background-color: #e6f2ff; /* 淡蓝色背景 */
    border-radius: 8px;
    width: calc(33.33% - 20px); /* 三列布局，减去间距 */
    box-sizing: border-box;
    text-align: center; /* 文字居中 */
    transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
    margin-bottom: 5px; /* 减小服务项之间的垂直间距 */
}

.service-item span {
    display: block; /* 确保文本块级显示 */
}

.service-item:hover {
    background-color: #007bff; /* 鼠标悬停时的背景颜色 */
    color: #fff; /* 鼠标悬停时的文字颜色 */
}

@media (max-width: 768px) {
    .main-container {
        padding: 10px; /* 在手机端减少外框的内边距 */
    }
    .service-item {
        width: calc(50% - 10px); /* 两列布局，减去间距 */
        margin-bottom: 10px; /* 适当增加移动端服务项之间的间距 */
    }
}

/* 热门服务结束 */

.side-navigation {
    width: 200px; 
}

.side-navigation ul {
    list-style-type: none;
    padding: 0;
}

.side-navigation li {
    margin-bottom: 10px;
}

.side-navigation a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: flex !important;
    justify-content: center !important; /* 水平居中 */
    align-items: center !important; /* 垂直居中 */
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    background-color: #e6f2ff; 
    font-size: 1.1em; 
    border: 1px solid #d1eaff;     
}

.side-navigation img {
    margin-right: 10px;
    width: 40px; /* 放大图标 */
    height: 40px; /* 放大图标 */
}

.side-navigation a:hover,
.side-navigation a.active {
    background-color: #007bff; /* 选中的链接颜色 */
    color: #fff; /* 选中的链接文字颜色 */
    border-color: #007bff; /* 选中时的外框颜色 */
}

.content-area {
    flex: 1;
    padding: 10px;
}

.section {
    display: none;
}

.section.active {
    display: block;
}

.section h2 {
    border-bottom: 3px solid #007bff; /* 下划线 */
    padding: 10px 0;
    margin-bottom: 10px;
    font-size: 1.3em; /* 减小标题字体 */
    background-color: transparent; /* 移除背景色 */
}

.section .link-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    border-radius: 8px; /* 圆角 */
    border: 1px solid #e6f2ff; /* 外框 */
    padding: 10px; /* 内边距 */
}

.section .link-container a {
    display: block;
    width: calc(50% - 10px); /* PC端一行2个，留出间距 */
    margin-right: 10px; /* 每个链接之间的间距 */
    margin-bottom: 10px; /* 手机端一行一个 */
    padding: 10px;
    background-color: #e6f2ff; /* 淡蓝色背景 */
    text-align: left; /* 确保链接文本居左对齐 */
    color: #333; /* 默认文字颜色 */
    transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
    border-radius: 4px; /* 链接圆角 */
}

.section .link-container a:hover {
    background-color: #007bff; /* 鼠标悬停时的背景颜色 */
    color: #fff; /* 鼠标悬停时的文字颜色 */
}

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

    .side-navigation {
        width: 100%;
        margin-bottom: 10px;
    }

    .side-navigation ul {
        display: flex;
        flex-wrap: wrap;
    }

    .side-navigation li {
        flex: 1 1 45%; /* 2个一行 */
        margin-bottom: 10px;
        margin-right: 5px; /* 添加右侧间距 */
    }

    .side-navigation li:nth-child(2n) {
        margin-right: 0; /* 右侧最后一个元素去掉右侧间距 */
    }

    .section .link-container a {
        display: block;
        width: 100%; /* 手机端一行一个 */
        margin-right: 0; /* 手机端一行一个 */
        margin-bottom: 10px; /* 手机端一行一个 */
    }

    .content-area {
        padding: 10px; /* 调整手机端内边距 */
    }
}

/* 调整标题的间距和样式 */
.lifecycle-title {
    text-align: left; 
    font-size: 2em; 
    margin: 10px 0; /* 减小上下间距 */
    position: relative; 
    width: auto; 
    display: inline-block; 
}

/* 标题的下划线样式 */
.lifecycle-title::after {
    content: ''; 
    display: block; 
    width: calc(100% - 3px); 
    height: 5px; 
    background-color: #007bff; 
    position: absolute; 
    bottom: -10px; 
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .lifecycle-title {
        font-size: 1.8em; 
    }
}

@media (max-width: 768px) {
    .lifecycle-title {
        font-size: 1.5em; 
        margin: 10px 0; /* 减小上下间距 */
        padding: 0 10px; 
    }

    .lifecycle-title::after {
        width: calc(100% - 20px); 
        left: 10px; 
        bottom: -10px; 
    }
}

.section {
    display: none; /* 默认隐藏所有内容 */
  }
  .section.active {
    display: block; /* 显示激活的内容 */
  }
  .link-container a {
    display: block;
    margin: 5px 0;
  }
  .sub-section {
    margin-top: 20px; /* 增加间距 */
    border-left: 4px solid #ccc; /* 添加边框以区分 */
    padding-left: 10px;
  }
  .sub-section h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #333; /* 深色字体 */
    font-weight: bold; /* 加粗 */
  }
  .sub-section a {
    color: #555; /* 链接颜色 */
    font-size: 0.9em; /* 链接字体大小 */
  }