* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Arial', sans-serif;
	}

	/* 导航样式 */
	.navbar {
		background: #fff;
		padding: 1rem;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		position: fixed;
		width: 100%;
		top: 0;
		left: 320px;
		z-index: 1000;
		transition: left 0.3s ease-in-out;
		/* 新增动画效果 */

	}

	.nav-content {
		/* max-width: 1200px; */
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.logo {
		font-size: 1.5rem;
		font-weight: bold;
		color: #333;
		cursor: pointer;
		padding-top: 10px;
	}

	/* 主体容器 */
	.container {
		/* max-width: 1200px; */
		margin: 80px auto 0;
		padding: 2rem;
	}

	.help-box {
		position: fixed;
		top: 0;
		padding: 10px;
		height: 60px;
		width: 250px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.help-box span {
		display: inline-block;
		text-align: left;
		width: 140px;
		margin: 0 6px;
		color: rgb(255, 121, 4);
		font-weight: 600;
		font-size: 14px;
		font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;

	}

	.help-box img {
		width: 32px;
		height: 32px;
		vertical-align: middle;
		margin: 0 6px;

	}

	/* 侧边栏 */
	.sidebar {
		width: 300px;
		float: left;
		position: fixed;
		left: 0;
		top: 60px;
		padding:10px
	}

	.category-list {
		list-style: none;
	}

	.category-item {
		padding: 0.8rem 1rem;
		margin: 0.5rem 0;
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.3s;
		
	}
	.cd{
		display: flex;
		    list-style: none;
		    flex-direction: row;
		    align-items: center;
	}
.category-item a{text-decoration: none;color: black;display: block;padding-left: 10px;}
	.category-item.active,
	.category-item:hover {
		background: #f0f2f5;
	}
	/* 内容区域 */
	.content {
		margin-left: 320px;
	}

	.search-box-small {
		display: flex;
		flex-direction: row;
		margin-bottom: 2rem;
		position: relative;
		background: #f1dee0;
		    padding: 10px;
		    color: #9b4d4b;
		    border-radius: 5px;
	}

	.search-input {
		width: 90%;
		padding: 0.8rem 1rem;
		border: 1px solid #ddd;
		border-radius: 25px;
		font-size: 1rem;
	}

	.video-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 1.5rem;
	}
.wenti-grid .mt20 {
    margin-top: 20px;
}
.wenti-grid .mt20 .color3 {
    color: #333;
}
.wenti-grid ul li{
	display: flex;
	    list-style: none;
	    line-height: 50px;
	    flex-direction: row;
	    align-items: center;
		    margin-bottom: 10px;
			border-bottom: 1px solid #ddd;
			margin-bottom: 10px;
}
.wenti-grid ul li a{
	text-decoration: none;
	color: #000000;
}
.wenti-grid ul li:hover{background: #f0f2f5;}
.mt10 {
    margin-top: 10px;
}
.color6 {
    color: #666;
}
.md20 {
    margin-bottom: 20px;
}
.el-tag.el-tag--success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
	padding: 5px;
}
.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
	background: #DCDFE6;
}
.el-tag--medium {
    height: 28px;
    line-height: 26px;
	margin-right: 10px;
}
	.video-card {
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s;
	}

	.video-card:hover {
		transform: translateY(-5px);
	}

	.thumbnail {
		position: relative;
		max-height: 400px;
		background: #ddd;
		overflow: hidden;
		margin: 20px;
	}

	.thumbnail video {
		transition: transform 0.3s, opacity 0.3s;
		width: 100%;
		cursor: pointer;
	}

	/* 添加加载状态指示 */
	.thumbnail::after {
		content: '加载中...';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		display: none;
	}

	.thumbnail.loading::after {
		display: block;
	}

	.thumbnail:hover video {
		transform: scale(1.05);
	}

	/* 保持原有播放图标样式 */
	.play-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 2.5rem;
		opacity: 0.8;
		pointer-events: none;
		transition: opacity 0.3s;
	}

	/* 当视频播放时隐藏播放图标 */
	.thumbnail.playing .play-icon {
		opacity: 0;
	}

	.video-info {
		padding: 1rem;
	}

	.video-title {
		font-weight: bold;
		margin-bottom: 0.5rem;
		color: #333;
	}

	.meta-info {
		display: flex;
		justify-content: space-between;
		color: #666;
		font-size: 0.9rem;
	}


	/* 添加CSS变量 */
	:root {
		--primary-color: #2196F3;
		--hover-color: #1976D2;
		--text-dark: #333;
		--text-light: #666;
	}

	/* 优化视频卡片尺寸 */
	.thumbnail {
		aspect-ratio: 16/9;
		height: auto;
		margin: 10px;
	}

	/* 弹窗优化 */
	.video-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		display: none;
		justify-content: center;
		align-items: center;
		z-index: 2000;
	}

	.modal-content {
		width: 80%;
		max-width: 1000px;
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		padding: 6px;
	}

	.modal-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 10px 0;
	}
.modal-header h3{padding-left: 10px;}
	.modal-video {
		width: 100%;
		height: 70vh;
	}
.modal-header button{
 width: 30px;
    height: 30px;
    font-size: 24px;
	margin-right: 10px;
	}
	.nav-content-mini {
		display: none;
	}

	.expand {
		display: none;
	}



	.sub-menu {
		display: none;
		list-style: none;
		padding-left: 20px;
		line-height: 2rem;
	}

	/* 新增激活状态 */
	.sub-menu.active {
		display: block;
	}

	.sidebar-mini {
		opacity: 0;
		height: 0;
		transform: scaleX(0);
		transform-origin: left;
		visibility: hidden;
		/* 确保内容不可点击，直到动画结束 */
		transition: opacity 0.3s, transform 0.3s;

	}

	.sidebar-mini.visible {
		opacity: 1;
		transform: scaleX(1);
		visibility: visible;
		/* 动画结束后显示内容 */
	}


	/* 添加以下样式 */
	.category-item.has-submenu {
		position: relative;
		line-height: 20px;
	}

	.category-item.has-submenu::after {
		content: "▸";
		position: absolute;
		right: 1rem;
		font-size: 30px;
		top: 15px;
		transition: transform 0.3s;
	}

	.category-item.has-submenu.open::after {
		transform: rotate(90deg);
	}

	.sub-menu {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease-out;
	}

	.sub-menu.active {
		max-height: 500px;
		overflow-y: scroll;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin-top: 0.625rem;
	}
.sub-menu.active li{line-height: 40px;
overflow-wrap: break-word;
		/* 允许单词内换行 */
		word-break: break-word;
		/* 更兼容的断词方式 */
		white-space: normal;
		/* 确保默认换行行为 */
		width: 320px;
}
.sub-menu.active li a{color: #333333;list-style: none;text-decoration: none;font-size: 14px;}
	/* 鼠标悬停时显示滚动条 */
	.sub-menu.active:hover {
		scrollbar-width: auto;
		/* Firefox */
		-ms-overflow-style: auto;
		/* Internet Explorer 10+ */
	}

	/* 对于WebKit浏览器（如Chrome和Safari） */
	.sub-menu.active::-webkit-scrollbar {
		display: none;
		/* Safari and Chrome */
	}

	.sub-menu.active:hover::-webkit-scrollbar {
		display: block;
		/* Safari and Chrome */
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.sidebar {
			width: 100%;
			float: none;
			/* position: static; */
			z-index: 999;
			background: #fff;
		}

		.category-item {
			padding: 0.2rem 1rem;
			display: flex;
			    list-style: none;
			    flex-direction: row;
			    align-items: center;
		}

		.video-box {
			width: 90%;
			height: auto;
			margin: 0 auto;
			background-color: #fff;
			position: relative;
			top: 40%;
		}

		.navbar {
			left: 0;
			transition: right 0.3s ease-in-out;
			/* 新增动画效果 */
		}

		.content {
			margin-left: 0;
		}



		.nav-content {
			display: none;
		}

		.nav-content-mini {
			display: block;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.video-grid {
			grid-template-columns: 1fr;
		}

		.category-list {
			display: none;
		}

		.reduce-mini {
			display: none;
		}

		.expand-mini {
			display: block;
		}

		.sidebar-mini {
			z-index: 1000;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
			list-style: none;
			transition: all .3s ease-out;
		}

		.category-list-mini {
			background: #fff;
			width: 80%;
			height: 100%;
			overflow-y: auto;
			list-style: none;
			line-height: 2rem;
			padding-top: 60px;
			transition: all 3s ease-out;
		}

		.sub-menu-mini {
			list-style: none;
			margin-left: 20px;
			line-height: 2rem;
			display: none;
		}

		.sub-menu-mini.active {
			display: block;
		}
		.sub-menu-mini.active li{
			line-height: 40px;
		}
		.sub-menu-mini.active li a{color: #666;text-decoration: none;}
		.category-item-mini {
			padding: 0.2rem 1rem;
			line-height: 40px;
			position: relative;

		}
.cd {
	
			display: block;
			    list-style: none;
			    flex-direction: row;
			    align-items: center;
		}
		.category-item-mini.active {
			background: #f0f2f5;

		}
		.category-item-mini a{text-decoration: none;color: black;padding-left: 10px;}

		.category-item-mini.has-submenu::after {
			content: "▸";
			float: right;
			margin-right: 1rem;
			transition: transform 0.3s;
			font-size: 30px;
		}

		.category-item-mini.has-submenu.open::after {
			transform: rotate(90deg);
			position: absolute;
			 top: 10px;
			 right: 10px;
		}

		.sub-menu-mini {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease-out;
		}

		.sub-menu-mini.active {
			max-height: 500px;
			overflow-y: scroll;
			scrollbar-width: none;
			-ms-overflow-style: none;
		}

		/* 鼠标悬停时显示滚动条 */
		.sub-menu-mini.active:hover {
			scrollbar-width: auto;
			/* Firefox */
			-ms-overflow-style: auto;
			/* Internet Explorer 10+ */
		}

		/* 对于WebKit浏览器（如Chrome和Safari） */
		.sub-menu-mini.active::-webkit-scrollbar {
			display: none;
			/* Safari and Chrome */
		}

		.sub-menu-mini.active:hover::-webkit-scrollbar {
			display: block;
			/* Safari and Chrome */
		}
		.common_txt img{width: 100%;}
	}
	
.common_txt{
	line-height: 30px;margin-top: 20px;
	
}
.news_detail_title{font-size:26px;margin-bottom:10px}
.news_detail_info{margin-top: 10px;margin-bottom: 10px;}
.post_nav_link{line-height: 30px;margin-top: 20px;color: #666;}
.post_nav_link a{color:#666}