/* 通用样式 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 60px; /* 增加左右缩进 */
    background-color: black;
    color: white;
    position: relative; /* 确保 header 的内容在前面 */
    z-index: 10; /* 提高 header 的层级 */
}
.logo {
    font-size: 20px;
    font-weight: bold;
}
.menu {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    gap: 1px;
    position: absolute;
    top: 20px; /* 距顶部 20px */
    left: 50%; /* 居中对齐 */
    transform: translateX(-50%);
    z-index: 15; /* 确保 menu 按钮不被遮挡 */
}
.menu a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    z-index: 20; /* 确保链接始终可点击 */
}
.contact {
    font-size: 16px;
    text-decoration: none;
    color: white;
    z-index: 15; /* 保持 contact 层级 */
}

/* 针对手机端的媒体查询 */
@media (max-width: 768px) {
    .logo {
        display: none; /* 手机端隐藏 logo */
    }
    .header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10px 20px; /* 缩小手机端左右缩进 */
    }
    .menu {
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start; /* 左对齐 */
        gap: 10px;
        position: static; /* 移除绝对定位 */
        transform: none;
    }
    .contact {
        position: absolute; /* 保持 contact 在右侧 */
        right: 20px; /* 右侧间距 */
        top: 10px; /* 距顶部 10px */
        z-index: 15; /* 保持 contact 层级 */
    }
}
/* 手机端横屏样式 */
@media (orientation: landscape) and (max-width: 768px) {
    .menu {
        flex-direction: row; /* 横屏时改为横向排列 */
        gap: 15px; /* 减小间距以节省横向空间 */
        position: static; /* 取消绝对定位 */
        transform: none;

        width: 100%; /* 占据 header 的宽度 */
        align-items: flex-start; /* 左对齐 */
    }
    .header {
        align-items: center; /* 保持 header 的内容垂直居中 */
        flex-wrap: wrap; /* 如果内容过多，可以换行 */
    }
    .content img {
        margin-top: 30px; /* 为图片增加顶部间距 */
    }
}