@charset "UTF-8";

@charset "UTF-8";

body {
    background-color: #FBFEFF; /* 灰白色 */
    margin: 0;
    padding: 0;
    font-family: Source Sans Pro, sans-serif;
    }

.parent-div {
	width: 100%;
	box-sizing: border-box;
	padding: 0 5%;
}

.child-div {
	width: max(100%, 1000px);
	margin: auto;
	box-sizing: border-box;
}
 
header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background-color: #FBFEFF;
    color: #49467C;
    }

.header-content {
    display: flex;
    align-items: flex-end; /* 对齐到底部 */
}

.nav {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	background-color: #49467C;
    }
	
.nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; /* 横对齐 */
    width: 100%; /* 导航栏文字占比80% */
	justify-content: center;
    }

.nav ul li a {
    text-decoration: none; /* 取消下划线 */
    color: inherit; /* 使用父级元素的颜色（如果需要自定义颜色，请指定具体颜色） */
    transition: none; /* 禁止所有CSS过渡效果，包括但不限于颜色变换 */
    outline: none; /* 取消点击时的轮廓线 */
}

.nav ul a:hover, ul a:focus {
    text-decoration: underline;
    text-decoration-color: #FBFEFF;
    }

.nav ul li {
    flex: 1;
    text-align: center;
    cursor: pointer;
    color: #FBFEFF;
    font-weight: bold;
    }

/* 下拉按钮的样式 */
.dropbtn {
  background-color: transparent;
  color: #333; /* 文字颜色 */
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 下拉内容（默认情况下是隐藏的） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #49467C;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 下拉菜单中的链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 当鼠标悬停时改变颜色 */
.dropdown-content a:hover {
  background-color: #49467C;
}

/* 在用户将鼠标悬停在下拉按钮上时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 在用户将鼠标悬停在下拉按钮上时改变背景颜色 */
.dropdown:hover .dropbtn {
  background-color: #e0e0e0;
}

.browse-container-parent {
	display: flex; /* 使用flex布局 */
    }
	
.browse-container {
	overflow-x: auto; /* 添加这一行来开启水平滚动条 */
	box-sizing: border-box; /* 确保边框和内填充不增加到总宽度之外 */
	color: #005E97;
	margin-top: 50px;
    }

.browse-container-left {
	flex: 0 0 200px; /* 宽度固定为20%，不伸缩 */
	overflow-x: auto;
	box-sizing: border-box;
	color: #005E97;
	margin-top: 50px;
	background-color: #F2F2F2; /* 侧边栏背景色 */
	padding-left: 0.3em;
    }

.browse-container-left ul li a {
    text-decoration: none; /* 取消下划线 */
    color: inherit; /* 使用父级元素的颜色（如果需要自定义颜色，请指定具体颜色） */
    transition: none; /* 禁止所有CSS过渡效果，包括但不限于颜色变换 */
    outline: none; /* 取消点击时的轮廓线 */
}

.browse-container .browse-table {
	border-collapse: collapse;
}

.browse-container .browse-table th {
	background-color: white;
    font-weight: bold;
	color: black;
}

.browse-container .browse-table th, .browse-table td {
    white-space: nowrap;
    overflow: hidden;
	text-align: center;
	border: 1px solid black;
}

.browse-container a {
    text-decoration: none; /* 取消下划线 */
    color: inherit; /* 使用父级元素的颜色（如果需要自定义颜色，请指定具体颜色） */
    transition: none; /* 禁止所有CSS过渡效果，包括但不限于颜色变换 */
    outline: none; /* 取消点击时的轮廓线 */
    }

.browse-container .current-page {
    font-weight: bold;
	color: red;
    }

.browse-table {
    table-layout: fixed;
    width: 100%;
}

.browse-table th,
.browse-table td {
    width: 20%;
    word-wrap: break-word; /* 确保长内容不会破坏表格布局 */
}

.footer {
    background-color: #333333; /* 导航栏背景色 */
    color: #FBFEFF; /* 导航栏文字颜色 */
    }

.footer table {
    width: 100%;
    color: #FBFEFF;
    text-align: center;
    }
	
.footer table td {
    text-align: center;
	width: 33.33%; /* 设置每列宽度为33.33% */
    }

button {
    /* 基本样式 */
    padding: 7px 15px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    font-weight: 500; /* 字体粗细 */
    color: #FBFEFF; /* 文字颜色 */
    background: linear-gradient(135deg, #7C6AF9, #49467C); /* 渐变背景 */
    border: none; /* 移除默认边框 */
    border-radius: 17px; /* 圆角 */
    /* 阴影 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    transition: all 0.3s ease; /* 平滑过渡效果 */

    /* 禁用状态样式 */
    &:disabled {
        background: #ccc;
        box-shadow: none;
        cursor: not-allowed;
    }
}

/* 悬停效果 */
button:hover {
    background: linear-gradient(135deg, #49467C, #7C6AF9); /* 反向渐变 */
    transform: translateY(-2px); /* 向上移动 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* 加强阴影 */
}

/* 点击效果 */
button:active {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 减弱阴影 */
}