/* 全局样式重置：必须放在最开头，清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 统一盒模型，避免边框撑大元素 */
}

header {
    background-color: rgba(35, 28, 26, 0.8); /* 半透明背景色，增加层次感 */
    height: 80px;
    width: 100%; /* 宽度与视窗一致 */
    position: fixed; /* 相对定位，作为子元素绝对定位的参照 */
}

h1 {
    position: absolute;
    color: white;
    line-height: 80px; /* 与header高度一致，实现垂直居中 */
    font-size: 28px;
    left: 120px;
    top: 0; /* 修正：补充分号 */
    width: 60px; /* 改成你4.webp图标的实际宽度，可微调 */
    height: 80px; /* 和header高度一致，保证垂直居中 */
    background-image: url(images/4.webp); /* 修正：wedp → webp */
    background-repeat: no-repeat; /* 补充：防止背景图平铺 */
    background-position: center;
    background-size: contain;
    text-indent: -9999px; /* 把文字向左偏移9999像素，彻底移出可视范围 */
    overflow: hidden; /* 隐藏溢出内容，杜绝任何文字露出的可能 */
}

header ul {
    position: absolute; /* 绝对定位 */
    right: 4vw; /* 右边距为4视窗宽度，响应式适配 */
    top: 0;
    line-height: 80px; /* 与header高度一致，实现垂直居中 */
    list-style: none; /* 修正：标准写法是none，清除列表圆点 */
}

header li {
    display: inline-block; /* 横向排列 */
    margin-right: 4vw; /* 列表项间距，响应式适配 */
}

header a {
    color: white;
    text-decoration: none; /* 清除链接默认下划线 */
}

header a:hover {
    text-decoration: underline; /* 鼠标悬停显示下划线 */
}

.news {
    height: 95vh;
    background-color: antiquewhite;
    color: white;
    background-image: url(images/2.webp);
    background-size: cover; /* 背景图铺满容器 */
    background-position: center; /* 背景图居中显示 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column; /* 补充：让多行文字垂直排列，否则flex默认横向排成一行 */
}
.news h2 {
    font-size: 60px;
    margin-top: 60px; /* 补充：去掉标题上方默认间距 */
    margin-bottom: 20px; /* 补充：增加标题与段落间距 */
}
.news p {
    color: #fef7e6;
    font-size: 18px;
    margin: 25px 0; /* 补充：增加段落左右间距，避免文字贴边 */
}
.news a {
    color: white;
    text-decoration: none; /* 清除链接默认下划线 */
    border: #ACACAC 1px solid; /* 补充：增加边框 */
    padding: 10px 20px; /* 补充：增加内边距 */
    border-radius: 5px; /* 补充：圆角效果 */
}
.slogan {
    background-color: #485652;
    color: white;
    height: 250px;
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-size: 20px; /* 补充：设置字体大小 */
    line-height: 1.8em; /* 补充：设置行高，增加可读性 */
}
footer {
    background-color: #000000;
    color: #b7b7b7;
    height: 60px;
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-size: 14px; /* 补充：设置字体大小 */
}
.happy {
    display: flex; /* 使用flex布局 */
}
.happy img{
    width: 50%; /* 补充：图片宽度自适应容器 */
}
.happy-text {
    width: 50%; /* 补充：文本宽度自适应容器 */
    background-color: #f5f5f5; /* 补充：设置背景色 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column; /* 补充：让多行文字垂直排列 */
}
.happy-text p {
    font-size: 40px; /* 补充：设置标题字体大小 */
    margin-bottom: 30px; /* 补充：增加标题与段落间距 */
}
.happy-text li {
    font-size: 18px; /* 补充：设置段落字体大小 */
    line-height: 2em; /* 补充：设置行高，增加可读性 */
    text-align: center; /* 补充：文本居中 */
    padding: 0 20px; /* 补充：增加左右内边距，避免文字贴边 */
    text-decoration: none; /* 清除链接默认下划线 */
}
.happy-text li:hover {
    text-decoration: underline; /* 鼠标悬停显示下划线 */
    cursor: pointer; /* 鼠标悬停显示手型光标 */
}
ol{
    list-style: none; /* 清除默认列表样式 */
    padding-left: 0; /* 清除默认外边距 */
}
.newsletter {
    background-color: #485652;
    color: white;
    padding: 60px 0; /* 补充：增加上下内边距 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 补充：让多行文字垂直排列 */
    align-items: center; /* 补充：让内容居中 */
}
.newsletter p {
    margin-bottom: 20px; /* 补充：增加标题与段落间距 */
}
.newsletter input,.newsletter button {
    background-color: transparent; /* 补充：设置输入框和按钮背景色空白 */
    color: white; /* 补充：设置输入框和按钮文字颜色为白色 */
    border: 1px solid #949d9a; /* 补充：设置输入框和按钮
    padddding:10px;
    border-radius: 5px; /* 补充：设置输入框和按钮圆角 */
}
.newsletter input {
    width: 200px; /* 补充：设置输入框宽度 */
    margin-right: 15px; /* 补充：增加输入框与按钮间距 */
}
.newsletter button:hover {
    width: 80px; /* 补充：设置按钮悬停时宽度 */
    cursor: pointer; /* 补充：鼠标悬停按钮时显示手型光标 */
}
input::placeholder {
    color: #DDDDDD; /* 补充：设置输入框占位符颜色 */
}
input:focus {
    outline: none; /* 补充：去掉输入框聚焦时的默认边框 */
    border-color: #E0E9A3; /* 补充：设置输入框聚焦时的边框颜色 */
}