/* 全局样式 */
* {
	margin: 0; /* 移除所有元素的默认外边距 */
	padding: 0; /* 移除所有元素的默认内边距 */
	color: #4D5656; /* 设置全局文本颜色 */
}
a {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* 移除移动端点击时的高亮效果 */
	-webkit-user-select: none; /* 禁止在Webkit浏览器中选择文本 */
	-moz-user-focus: none; /* 禁止在Firefox中聚焦 */
	-moz-user-select: none; /* 禁止在Firefox中选择文本 */
	text-decoration: none; /* 移除链接的下划线 */
}
ul li {
	list-style: none; /* 移除列表项的默认样式 */
}
nav a {
	margin-left: 32px; /* 导航链接之间的左边距 */
}
nav a.active {
	color: #71b3dd; /* 激活状态的导航链接颜色 */
}
body {
	background-color: #ecf0f3; /* 页面背景颜色 */
}
.container {
	width: 300px; /* 容器宽度 */
	height: 500px; /* 容器高度 */
	position: absolute; /* 绝对定位 */
	top: 50%; /* 距离顶部50% */
	left: 50%; /* 距离左侧50% */
	z-index: 1; /* 层级 */
	-webkit-transform: translate(-50%, -50%); /* 水平和垂直居中 */
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.hander {
	width: 100%; /* 导航栏宽度 */
	height: 30px; /* 导航栏高度 */
	line-height: 30px; /* 行高，使文字垂直居中 */
	z-index: 1; /* 层级 */
	background-color: #ecf0f3; /* 背景颜色 */
	border-radius: 15px; /* 圆角 */
	box-shadow: 5px 5px 10px #b1b4b6, /* 阴影效果 */
		-5px -5px 10px #ffffff;
}
.content {
	width: 100%; /* 内容区域宽度 */
	height: 400px; /* 内容区域高度 */
	margin-top: 20px; /* 顶部外边距 */
	background-color: #ecf0f3; /* 背景颜色 */
	border-radius: 15px; /* 圆角 */
	box-shadow: 5px 5px 10px #b1b4b6, /* 阴影效果 */
		-5px -5px 10px #ffffff;
}
.content section {
	position: absolute; /* 绝对定位 */
	opacity: 0; /* 默认透明度为0，不可见 */
	transition: .4s ease-out; /* 切换动画效果 */
}
.content section.active-section {
	opacity: 1; /* 激活状态的透明度为1，可见 */
}
.main {
	width: 300px; /* 主内容区域宽度 */
	height: 400px; /* 主内容区域高度 */
	z-index: 1; /* 层级 */
	display: inline-block; /* 显示方式 */
	position: relative; /* 相对定位 */
	overflow: hidden; /* 隐藏溢出内容 */
	border-radius: 10px; /* 圆角 */
}
.bgo {
	background-repeat: no-repeat; /* 背景图片不重复 */
	background-size: cover; /* 背景图片覆盖整个区域 */
	width: 100%; /* 宽度 */
}
.bgt {
	margin-bottom: 40px; /* 底部外边距 */
	background-repeat: no-repeat; /* 背景图片不重复 */
	background-size: cover; /* 背景图片覆盖整个区域 */
	width: 100%; /* 宽度 */
}
.ato {
	width: 100px; /* 头像宽度 */
	height: 100px; /* 头像高度 */
	position: absolute; /* 绝对定位 */
	top: 37%; /* 距离顶部37% */
	left: 33%; /* 距离左侧33% */
	border-radius: 50%; /* 圆形头像 */
}
.ats {
	width: 60px; /* 较小头像宽度 */
	height: 60px; /* 较小头像高度 */
	position: absolute; /* 绝对定位 */
	top: 70px; /* 距离顶部70px */
	left: 120px; /* 距离左侧120px */
	border-radius: 50%; /* 圆形头像 */
	animation: light 4s ease-in-out infinite; /* 动画效果 */
	transition: 0.5s; /* 动画过渡时间 */
}
.ats:hover {
	transform: scale(1.15) rotate(720deg); /* 鼠标悬停时放大并旋转 */
}
.name {
	margin: 0 auto; /* 水平居中 */
	margin-top: 75px; /* 距离顶部75px */
	height: 20px; /* 高度 */
	width: 60px; /* 宽度 */
	line-height: 20px; /* 行高 */
	font-size: 22px; /* 字体大小 */
	text-align: center; /* 文字居中 */
}
.motto {
	margin: 0 auto; /* 水平居中 */
	font-size: 14px; /* 字体大小 */
	text-align: center; /* 文字居中 */
	margin-top: 10px; /* 距离顶部10px */
	width: 130px; /* 宽度 */
	height: 20px; /* 高度 */
	line-height: 20px; /* 行高 */
}
.navo {
	text-align: center; /* 文字居中 */
	position: fixed; /* 固定定位 */
	bottom: 65px; /* 距离底部65px */
}
.navo ul li {
	float: left; /* 浮动排列 */
	margin-left: 30px; /* 左边距 */
	animation: light 4s ease-in-out infinite; /* 动画效果 */
	transition: 0.5s; /* 动画过渡时间 */
}
.navo ul li:hover {
	transform: scale(1.15) rotate(720deg); /* 鼠标悬停时放大并旋转 */
}
.about {
	font-size: 12px; /* 字体大小 */
	padding: 10px; /* 内边距 */
	margin: 40px; /* 外边距 */
	margin-top: 0px; /* 顶部外边距 */
	margin-bottom: 0px; /* 底部外边距 */
	border-radius: 15px; /* 圆角 */
	background: #ecf0f3; /* 背景颜色 */
	box-shadow: inset 5px 5px 10px #b1b4b6, /* 内阴影效果 */
		inset -5px -5px 10px #ffffff;
}
.box {
	margin: 20px; /* 外边距 */
	margin-top: 0px; /* 顶部外边距 */
	border-radius: 15px; /* 圆角 */
	padding: 10px; /* 内边距 */
	margin-bottom: 10px; /* 底部外边距 */
	background: #ecf0f3; /* 背景颜色 */
	box-shadow: inset 5px 5px 10px #b1b4b6, /* 内阴影效果 */
		inset -5px -5px 10px #ffffff;
}
#boxs {
	margin: 0px; /* 外边距 */
	height: 200px; /* 高度 */
	overflow-x: hidden; /* 隐藏水平溢出 */
	overflow-y: scroll; /* 垂直滚动条 */
}
#boxs::-webkit-scrollbar {
	width: 0px; /* 滚动条宽度 */
	height: 0px; /* 滚动条高度 */
}
#boxs::-webkit-scrollbar-track {
	border-radius: 12px; /* 滚动条轨道圆角 */
	background-color: #ffffff; /* 轨道背景颜色 */
}
#boxs::-webkit-scrollbar-thumb {
	border-radius: 12px; /* 滚动条圆角 */
	background-color: #ffffff; /* 滚动条背景颜色 */
}
.track-list li {
	position: relative; /* 相对定位 */
	padding: 10px 0 0 20px; /* 内边距 */
	margin-left: 15px; /* 左边距 */
	border-left: 2px solid #aaa; /* 左侧边框 */
}
.track-list li .node-icon {
	position: absolute; /* 绝对定位 */
	left: -10px; /* 距离左侧-10px */
	top: 50%; /* 距离顶部50% */
	height: 18px; /* 高度 */
	border-radius: 50%; /* 圆角 */
	background-color: #ecf0f3; /* 背景颜色 */
}
.track-list li .time {
	position: relative; /* 相对定位 */
	font-size: 12px; /* 字体大小 */
	width: 100%; /* 宽度 */
	top: 4px; /* 距离顶部4px */
	display: inline-block; /* 显示方式 */
	vertical-align: middle; /* 垂直居中 */
}
.track-list li .txt {
	position: relative; /* 相对定位 */
	font-size: 12px; /* 字体大小 */
	top: 2px; /* 距离顶部2px */
	display: inline-block; /* 显示方式 */
	vertical-align: middle; /* 垂直居中 */
}
.web {
	width: 75%; /* 宽度 */
	height: 20px; /* 高度 */
	text-align: center; /* 文字居中 */
	background: #fafafa /* 背景颜色 */
		repeating-linear-gradient(-45deg, #fff, #fff 1.125rem, transparent 1.125rem, transparent 2.25rem); /* 背景渐变效果 */
	box-shadow: 0 2px 5px rgba(0, 0, 0, .15); /* 阴影效果 */
	margin: 0 auto; /* 水平居中 */
	margin-top: 0px; /* 顶部外边距 */
	margin-bottom: 20px; /* 底部外边距 */
	padding: 10px; /* 内边距 */
	border-radius: 5px; /* 圆角 */
	font-size: 15px; /* 字体大小 */
	font-weight: 900; /* 字体粗细 */
}
.tips {
	width: 73%; /* 宽度 */
	border-bottom-right-radius: 2px; /* 右下角圆角 */
	border-left: 4px solid #2ECC71; /* 左侧边框 */
	border-top-right-radius: 2px; /* 右上角圆角 */
	margin: 0 auto; /* 水平居中 */
	text-align: center; /* 文字居中 */
	padding: 10px; /* 内边距 */
	position: relative; /* 相对定位 */
	background-color: #f8f8f8; /* 背景颜色 */
	font-size: 15px; /* 字体大小 */
}
.footer {
	width: 100%; /* 宽度 */
	margin: 0 auto; /* 水平居中 */
	font-size: 11px; /* 字体大小 */
	text-align: center; /* 文字居中 */
	position: fixed; /* 固定定位 */
	bottom: 10px; /* 距离底部10px */
}
.category, .item {
    display: block; /* 每个元素独占一行 */
}

.item {
    margin-left: 2em; /* 模拟   的缩进效果 */
}