/* 全局样式 */
html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden; /* 防止水平滚动 */
}

body {
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    overflow-y: auto; /* 启用 body 的垂直滚动 */
}

.header {
    position: fixed; /* 固定在页面顶部 */
    top: 0;
    left: 0;
    width: 100%; /* 宽度铺满 */
    height: 60px; /* 设置头部高度 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中 */
    background-color: #f8f8f8; /* 背景色 */
    z-index: 1000; /* 确保 header 在其他内容之上 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.header .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.content {
    flex: 1; /* 占据剩余空间 */
    padding-top: 60px; /* 为固定 header 留出空间 */
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 水平居中 */
}

/* button-container 的样式 */
.button-container {
    position: relative; /* 设置相对定位 */
    width: 100%; /* 宽度铺满 */
    min-height: 694px; /* 最小高度 */
    background-image: url('/image/container_button_bg.png'); /* 设置背景图片 */
    background-size: cover; /* 背景图片覆盖整个容器 */
    background-position: center; /* 背景图片居中 */
    padding: 20px; /* 给按钮留出内边距 */
    box-sizing: border-box; /* 确保 padding 不影响宽度 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: flex-start; /* 按钮靠左对齐 */
    justify-content: flex-end; /* 按钮靠底部对齐 */
}

.button-container .buttons-group {
    display: flex; /* 让按钮水平排列 */
    gap: 50px; /* 设置按钮之间的间距 */
    margin-bottom: 110px; /* 按钮与底部的距离 */
    margin-left: 90px;
}

.button-container img {
    cursor: pointer;
}

.container-bottom {
    width: 100%; /* 宽度占满父级 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    overflow: hidden; /* 防止滚动条 */
}

.container-bottom img {
    max-width: 100%; /* 图片宽度不超过屏幕宽度 */
    height: auto; /* 高度按实际比例自适应 */
    display: block; /* 去除默认的 inline-block 间隙 */
}

.footer {
    background-color: #2471FF; /* 设置背景颜色为蓝色 */
    color: white; /* 设置字体颜色为白色 */
    padding: 10px 0; /* 添加一些内边距 */
    text-align: center; /* 文本居中 */
    position: static; /* 确保 footer 不固定 */
}

.footer-top {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 左右两端对齐 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 20px; /* 与下方内容保持间距 */
}

.service, .contact {
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 子元素按列排列 */
    align-items: center; /* 内容居中对齐 */
    gap: 15px; /* 增加 span 元素之间的间距 */
    max-width: 40%; /* 限制最大宽度，避免内容过宽 */
}

.service {
    margin-left: 20%;
}

.contact {
    margin-right: 20%;
}

.beian {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    gap: 20px; /* 设置子元素之间的间距 */
}

.beian > div {
    display: flex;
    align-items: center; /* 让每个 div 内的内容垂直居中 */
}

.beian img {
    vertical-align: middle; /* 让图片与文字在同一行垂直居中对齐 */
    margin-right: 5px; /* 调整图片与文字之间的间距 */
}

/* 链接样式 */
.footer a {
    color: white; /* 设置链接文字颜色为白色 */
    text-decoration: none; /* 去除下划线 */
}

/* 鼠标悬停时的样式 */
.footer a:hover {
    text-decoration: underline; /* 鼠标悬停时添加下划线 */
}