/* 基本样式 */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* 使用现代字体 */
    line-height: 1.6; /* 行高 */
    margin: 0; /* 去掉默认边距 */
    padding: 0; /* 去掉默认内边距 */
    background-color: #f9f9f9; /* 背景色 */
    color: #333; /* 文字颜色 */
}

/* 页眉样式 */
header {
    background: #004d7f; /* 深蓝色背景 */
    color: #ffffff; /* 白色文字 */
    padding: 20px 0; /* 上下内边距 */
    text-align: center; /* 居中对齐 */
}

/* 主标题样式 */
h1 {
    margin: 0; /* 去掉默认边距 */
    font-size: 2.5em; /* 字体大小 */
}

/* 语言切换器样式 */
.language-switcher {
    margin-top: 10px; /* 上边距 */
    text-align: right; /* 右对齐 */
}

.language-switcher label {
    margin-right: 10px; /* 标签与下拉框之间的间距 */
    color: #ffffff; /* 标签颜色 */
}

.language-switcher select {
    padding: 5px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    border: 1px solid #ccc; /* 边框 */
}

/* 主体内容样式 */
main {
    padding: 20px; /* 内边距 */
}

/* 每个特色点的样式 */
section {
    background: #ffffff; /* 白色背景 */
    margin: 20px 0; /* 上下外边距 */
    padding: 15px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 子标题样式 */
h2 {
    color: #004d7f; /* 深蓝色 */
    font-size: 1.8em; /* 字体大小 */
    margin-bottom: 10px; /* 下边距 */
}

/* 段落样式 */
p {
    color: #666666; /* 深灰色 */
    margin: 0 0 15px; /* 下边距 */
}

/* 按钮样式 */
.button {
    display: inline-block; /* 使按钮成为块级元素 */
    margin-top: 10px; /* 上边距 */
    border: solid 1px #2c89a0; /* 绿色边框 */
    padding: 10px 20px; /* 内边距 */
    background: #fff; /* 绿色背景 */
    color: #247a8c; /* 白色文字 */
    text-decoration: none; /* 去掉下划线 */
    border-radius: 5px; /* 圆角 */
    transition: background 0.3s; /* 背景色过渡效果 */
}

/* 按钮悬停效果 */
.button:hover {
    background-color: #247a8c;/* 白色背景 */
    color: white;
}

/* 页脚样式 */
footer {
    text-align: center; /* 居中对齐 */
    padding: 15px 0; /* 上下内边距 */
    background: #004d7f; /* 深蓝色背景 */
    color: #ffffff; /* 白色文字 */
    position: relative; /* 相对定位 */
    bottom: 0; /* 底部对齐 */
    width: 100%; /* 宽度100% */
}

/* 响应式设计 */
@media (max-width: 768px) {
    h1 {
        font-size: 2em; /* 在小屏幕上减小主标题字体 */
    }

    h2 {
        font-size: 1.5em; /* 在小屏幕上减小子标题字体 */
    }

    section {
        padding: 10px; /* 减小每个特色点的内边距 */
    }

    .button {
        padding: 8px 15px; /* 减小按钮的内边距 */
        font-size: 0.9em; /* 减小按钮字体 */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5em; /* 在更小屏幕上进一步减小主标题字体 */
    }

    h2 {
        font-size: 1.3em; /* 在更小屏幕上进一步减小子标题字体 */
    }

    p {
        font-size: 0.9em; /* 减小段落字体 */
    }

    .button {
        width: 100%; /* 按钮宽度100% */
        text-align: center; /* 按钮文字居中 */
    }
}