/* 设置 body 的全局样式 */
body {
    width: 100%; /* 设置宽度为 100% */
    height: 100%; /* 设置高度为 100% */
    margin: 0; /* 移除默认外边距 */
    font-family: Arial, sans-serif; /* 设置全局字体 */
}

/* 导航栏样式 */
.nav {
    background-color: #ffffff; /* 设置背景颜色为白色 */
    height: 70px; /* 设置导航栏高度 */
    width: 100%; /* 设置导航栏宽度 */
    display: flex; /* 使用 flexbox 布局 */
    align-items: center; /* 垂直居中对齐 */
    position: fixed; /* 固定导航栏 */
    top: 0; /* 距顶部 0 */
    left: 0; /* 距左侧 0 */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    padding: 0 20px; /* 添加左右内边距 */
    z-index: 1000; /* 确保导航栏在最上层 */
}

/* logo 容器样式 */
.logo {
    display: flex; /* 使 logo 内部的内容水平排列 */
    align-items: center; /* 垂直居中对齐 */
    flex-shrink: 0; /* 防止 logo 被压缩 */
    margin-right: auto; /* 将 logo 靠左对齐 */
}

/* logo 链接样式 */
.logo a {
    display: flex; /* 使链接内容水平排列 */
    align-items: center; /* 垂直居中对齐 */
    text-decoration: none; /* 移除链接下划线 */
    color: #000000; /* 设置链接颜色 */
}

/* logo 图片样式 */
.logo img {
    height: 45px; /* 设置图片高度 */
    margin-right: 10px; /* 图片与标题之间的间距 */
}

/* logo 标题样式 */
.logo h1 {
    font-size: 25px; /* 调整字体大小 */
    margin: 0; /* 移除默认外边距 */
    white-space: nowrap; /* 防止标题换行 */
}

/* 顶部导航栏列表样式 */
.ul_top {
    list-style: none; /* 移除列表项的默认样式 */
    display: flex; /* 使用 flexbox 布局 */
    margin: 0; /* 移除默认外边距 */
    padding: 0; /* 移除默认内边距 */
    align-items: center; /* 确保列表项垂直居中 */
    justify-content: flex-end; /* 将列表靠右对齐 */
    flex-grow: 1; /* 占据剩余空间 */
    margin-right: 20px; /* 添加右侧距离 */
}

/* 顶部导航栏列表项样式 */
.ul_top li {
    margin: 0 10px; /* 列表项之间的间距 */
}

/* 顶部导航栏链接样式 */
.ul_top a {
    display: block; /* 设置为块级元素 */
    color: #000000; /* 设置文字颜色 */
    text-decoration: none; /* 移除下划线 */
    line-height: 30px; /* 设置行高 */
    border-radius: 10px; /* 设置圆角 */
    padding: 5px 15px; /* 添加内边距 */
    transition: background 0.3s, color 0.3s; /* 添加背景色和文字颜色的过渡效果 */
    font-family: 'Arial', sans-serif; /* 设置字体 */
    font-size: 16px; /* 设置字体大小 */
}

/* 顶部导航栏链接悬停样式 */
.ul_top a:hover {
    color: #000000; /* 设置悬停时的文字颜色 */
    background: #e6e6e6; /* 设置悬停时的背景色 */
}

/* 顶部列表容器样式 */
.list_top {
    margin: 100px auto 0; /* 添加顶部间距，避免与导航栏重叠 */
    padding: 20px; /* 添加内边距 */
    max-width: 1600px; /* 设置最大宽度 */
}

/* 顶部列表标题样式 */
.list_top h2 {
	font-size: 1.4em;
	margin: 40px 10px 20px 0;
	padding-left: 9px;
	border-left: 6px solid #CDC5FE;
	font-weight: 700;
	line-height: 1.4;
}

.list_top a {
    text-decoration: none; /* 移除下划线 */
    color: #000; /* 设置文字颜色 */
    transition: transform 0.3s; /* 添加变换过渡效果 */
}

/* 项目列表容器样式 */
.list {
    margin: 10px auto 0; /* 添加顶部间距，避免与导航栏重叠 */
    padding: 20px; /* 添加内边距 */
    max-width: 1600px; /* 设置最大宽度 */
}

/* 项目列表标题样式 */
.list h2 {
	font-size: 1.4em;
	margin: 40px 10px 20px 0;
	padding-left: 9px;
	border-left: 6px solid #CDC5FE;
	font-weight: 700;
	line-height: 1.4;
}

/* 单个项目项样式 */
.list-item {
    display: inline-block; /* 设置为内联块元素 */
    margin: 10px; /* 设置外边距 */
    padding: 15px; /* 设置内边距 */
    border: 1px solid #ddd; /* 设置边框 */
    border-radius: 10px; /* 设置圆角 */
    text-align: center; /* 居中对齐 */
    width: 240px; /* 设置宽度 */
    height: 210px; /* 设置高度 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 项目图片样式 */
.list-item img {
    width: 240px; /* 固定宽度 */
    height: 150px; /* 固定高度 */
    object-fit: cover; /* 确保图片按比例填充 */
    border-radius: 5px; /* 设置圆角 */
    margin-bottom: 10px; /* 设置底部间距 */
}

/* 项目描述文字样式 */
.list-item p {
    margin: 5px 0; /* 设置上下间距 */
    font-size: 16px; /* 设置字体大小 */
}

.list-item a {
    text-decoration: none; /* 移除下划线 */
    color: #000; /* 设置文字颜色 */
    transition: transform 0.3s; /* 添加变换过渡效果 */
}