body,
html {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
.container {
	display: flex;
	flex-direction: column;
	background-color:  #fff;
	align-items: center;
	width: 100%;
	/* padding: 20px; */
	max-width: 800px;
	border-radius: 15px;
	margin: 0 auto;
	margin-top: 20px;
	flex: 1;
	margin-bottom: 65px;
}

.navbar {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #333;
	/* Add a background color for visibility */
	overflow-x: auto;
	/* Allows horizontal scrolling */
	white-space: nowrap;
	/* Ensures all items stay on one line */
	z-index: 900;
	/* Keeps it on top of other elements */
	padding: 5px 0;

	display: flex;
	/* 使用 Flexbox 布局 */

	align-items: center;
	/* 垂直居中 */

	justify-content: center;
	/* 强制左对齐 */
	scroll-behavior: smooth;
	/* 让滚动更流畅 */
	max-width: 100vw;
	flex-wrap: nowrap;
	/* 防止内容换行 */
	-webkit-overflow-scrolling: touch;
	/* iOS 适配 */

	height: 40px;

}

.navbar a {
	color: #fff;
	text-decoration: none;
	padding: 4px 4px;
	/* 增加内边距，让链接文字更突出 */
	display: inline-block;
	transition: background-color 0.3s, color 0.3s;
	/* 添加文字颜色过渡效果 */
	font-size: 16px;
	/* 适当增大字体大小，提高可读性 */
	font-weight: bold;
	/* 字体加粗，增强视觉效果 */
	position: relative;
	/* 设置相对定位，用于后续添加伪元素 */
}

.cate {
	width: 100%;
	max-width: 500px;
	/* 根据需要调整最大宽度 */
	margin: 0 auto;
	padding: 0px;
	background-color: #fff;
	border-radius: 10px;
	margin-top: 60px;
}



.category {
	margin: 5px;
}

.category h3 {
	margin: 0 0 10px 0;
	font-size: 1.2em;
	color: #333;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.tag {
	background-color: #e0e0e0;
	padding: 5px 10px;
	border-radius: 5px;
	margin-bottom: 5px;
	white-space: nowrap;
	/* 防止标签内容换行 */
}

.tag a {
	text-decoration: none;
	color: #333;
}



.navbar a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #fff;
	transform: scaleX(0);
	/* 初始时宽度为0 */
	transition: transform 0.3s;
	/* 添加宽度变化的过渡效果 */
}

.navbar a:hover {
	background-color: #555;
	/* 鼠标悬停时背景颜色稍深，与原背景形成对比 */
	color: #ffd700;
	/* 鼠标悬停时文字颜色为金色，吸引眼球 */
}

.navbar a:hover::before {
	transform: scaleX(1);
	/* 鼠标悬停时线条宽度变为100%，产生线条延伸效果 */
}




.image-ad {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	/* 子元素之间的间隙 */
	flex: 1;
}

.image-ad img {
	width: 100%;
	height: auto;
	margin: 0 0px;
	border-radius: 8px;
	cursor: pointer;
}


.article-list {
	display: flex;
	width: 100%;
	justify-content: center;
	flex-direction: column;
	flex: 1;
	list-style-type: none;
	padding: 0;
	background-color: #f8f8f8;
	/* 添加背景色 */
	border-radius: 8px;
	/* 添加圆角 */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	/* 添加阴影 */
	margin: 0px 0;
	/*调整上下外边距 */
}


.article-list li {
	margin-bottom: 15px;
	/* 调整行间距 */
	background-color: #fff;
	/* 添加背景色 */
	border-radius: 6px;
	/* 添加圆角 */
	padding: 10px;
	/* 添加内边距 */
	transition: transform 0.3s ease;
	/* 添加过渡效果 */
	
	word-wrap: break-word;  /* 或者 */
	max-width: 100%; 	
}

.article-list li img {
	width: 100%;height: auto;border-radius: 10px;
}


.article-list li:hover {
	/*transform: translateY(-5px);*/
	/* 鼠标悬浮时上移 */ 
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	/* 鼠标悬浮时增强阴影 */
}

.article-list a {
	text-decoration: none;
	color: #333;
	/* 调整文字颜色 */
	display: block;
	padding: 5px 0;
	font-weight: bold;
	/* 加粗文字 */
}

.article-list a:hover {
	color: #007bff;
	/* 鼠标悬浮时文字颜色 */
}

.article-list .details {
	font-size: 0.9em;
	/* 调整字体大小 */
	color: #666;
	/* 调整文字颜色 */
	margin-top: 5px;
	/* 调整与标题的间距 */
}


.search-container {
	display: flex;
	justify-content: center;
	margin: 10px 0;
	flex: 1;
}

.search-container input[type="text"] {
	padding: 15px;
	width: 70%;
	border: 1px solid #555;
	border-radius: 5px 0 0 5px;
	font-size: 16px;
	color: #333;
	background-color: #f8f8f8;
}

.search-container button {
	padding: 15px 30px;
	background-color: #f39c12;
	/* 橙色背景，活泼且引人注意 */
	color: white;
	border: none;
	border-radius: 0 5px 5px 0;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s;
}

.search-container button:hover {
	background-color: #e67e22;
	/* 深橙色，比主色调更暗，但仍然引人注目 */
}


#back-to-top {
	position: fixed;
	bottom: 200px;
	right: 20px;
	display: none;
	/* 默认不显示 */
	cursor: pointer;
	background-image: url('/ad/up.png');
	/* 替换为你的图片路径 */
	background-size: cover;
	/* 让图片覆盖整个按钮 */
	background-repeat: no-repeat;
	/* 防止图片重复 */
	background-position: center;
	/* 图片居中显示 */
	background-color: transparent;
	/* 明确设置背景颜色为透明 */
	width: 50px;
	/* 根据图片大小调整 */
	height: 50px;
	border: 0 none;
	/* 明确移除边框 */
	padding: 0;
	/* 去掉内边距 */
	margin: 0;
	/* 去掉外边距 */
}


#loadingOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* 可以调整透明度 */
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 24px;
	font-weight: bold;
}

.spinner {
	border: 8px solid #f3f3f3;
	/* 背景色 */
	border-top: 8px solid #ff9000;
	/* 转动的颜色 */
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.video-link {
	display: inline-flex; /* 使用 flexbox */
	align-items: center;  /* 垂直居中 */
}

.free-label {
	background-color: #FF5722;  /* 背景颜色 */
	color: white;               /* 文字颜色 */
	font-size: 14px;            /* 字体大小 */
	font-weight: bold;          /* 字体加粗 */
	padding: 2px 8px;           /* 上下内边距为2px，左右内边距为8px */
	border-radius: 5px;         /* 圆角 */
	margin-right: 5px;          /* 右边距 */
	line-height: 1;             /* 行高为1，避免影响对齐 */
	white-space: nowrap;        /* 防止文字换行 */
}