/* 汉堡菜单按钮样式 */
.hamburger-menu {
	display: none;
	position: relative;
	z-index: 1002;
}

.hamburger-btn {
	background: none;
	border: none;
	cursor: pointer;

	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: .3rem;
	height: .3rem;

}

.hamburger-btn span {
	display: block;
	height: .02rem;
	width: 100%;
	background-color: #333;
	transition: all 0.3s ease;
	transform-origin: center;
	margin-left: 0 !important;
}



/* 遮罩层 */
.mobile-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.mobile-overlay.active {
	display: block;
	opacity: 1;
}

.menu-close {
	display: none;
}

@media screen and (max-width: 800px) {

	#wrap,
	.box,
	.w1000,
	.main_content,
	.main_content_left,
	.main_content_right,
	.lanrenzhijia,
	.part1,
	.area,
	.block_left,
	.block_right,
	.tabyouqinglianjie,
	.bar {
		width: 100% !important;
		height: auto !important;
		float: none !important;
	}




	.hamburger-menu {
		display: block;
		position: absolute;
		right: .3rem;
		top: 48%;
		transform: translateY(-50%);
	}


	.bar {
		position: relative;
		background-color: #fff;
		box-shadow: 0 .02rem .05rem rgba(0, 0, 0, 0.1);
	}

	.dh {
		position: fixed;
		top: 0;
		left: -3rem;
		/* 初始隐藏在左侧 */
		width: 2.8rem;
		height: 100vh;
		background-color: #fff;
		box-shadow: .02rem 0 .1rem rgba(0, 0, 0, 0.1);
		z-index: 1001;
		margin: 0 !important;
		padding: .6rem 0 0 0 !important;
		flex-direction: column;
		overflow-y: auto;
		transition: left 0.3s ease;
	}

	.dh.active {
		left: 0;
		/* 滑出显示 */
	}

	.dh li {
		width: 100% !important;
		padding: 0 !important;
		border-bottom: .01rem solid #eee;
		height: auto !important;
		font-weight: normal !important;
	}

	.dh li a {
		display: block;
		padding: .15rem .2rem;
		text-decoration: none;
		color: #333;
		border-bottom: none;
		width: 100%;
		box-sizing: border-box;
		transition: background-color 0.2s ease;
	}

	.dh li a:hover {
		background-color: #f5f5f5;
	}

	.dh li.lib {
		display: none !important;
	}



	/* 菜单关闭按钮 */
	.menu-close {
		position: absolute;
		top: .15rem;
		right: .15rem;
		background: none;
		border: none;
		font-size: .24rem;
		color: #333;
		cursor: pointer;
		width: .3rem;
		height: .3rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	a:link,
	a:hover {
		font-size: .2rem !important;
	}



	.bottom_block span {
		font-size: .24rem !important;
	}

	.bottom p {
		width: 100% !important;
		line-height: .4rem !important;
	}

	body {
		font-size: .24rem !important;
	}

	.center,
	.line {
		width: 100% !important;
	}

	div#course {
		background: none !important;
		padding: 0 !important;
	}

	div#navsecond,
	.colcontent-right {
		float: none !important;
		width: 100% !important;
		display: block !important;
		border: none !important;
	}

	#course {
		position: relative;
		margin: .15rem 0;
	}

	/* 隐藏原始列表 */
	#course ul {
		display: none;
	}


	/* 创建下拉触发按钮 */
	#course:has(ul):after {
		content: '栏目导航 ▼';
		display: block;
		background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
		border: .01rem solid #ced4da;
		border-radius: .06rem;
		padding: .14rem .16rem;
		font-size: .24rem;
		color: #495057;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 .01rem .03rem rgba(0, 0, 0, 0.1);
		user-select: none;
		position: relative;
		font-weight: 500;
	}

	#course:has(ul).active::after {
		content: '栏目导航 ▲';
		background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
		border-color: #0056b3;
		color: #0056b3;
		box-shadow: 0 .02rem .08rem rgba(0, 86, 179, 0.15);
	}

	/* 下拉菜单列表 */
	#course:has(ul).active ul {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border: .01rem solid #ced4da;
		border-top: none;
		border-radius: 0 0 .06rem .06rem;
		box-shadow: 0 .04rem .12rem rgba(0, 0, 0, 0.15);
		z-index: 1000;
		max-height: 3rem;
		overflow-y: auto;
		animation: slideDown 0.3s ease;
	}

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-.1rem);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	#course:has(ul).active ul li {
		border-bottom: .01rem solid #f1f3f5;
	}

	#course:has(ul).active ul li:last-child {
		border-bottom: none;
	}

	#course:has(ul).active ul li a {
		display: block;
		padding: .14rem .16rem;
		text-decoration: none;
		color: #495057;
		font-size: .14rem;
		line-height: 1.4;
		transition: all 0.2s ease;
		border-left: .03rem solid transparent;
	}

	#course:has(ul).active ul li a:hover,
	#course:has(ul).active ul li a:focus {
		background: #f8f9fa;
		color: #0056b3;
		border-left-color: #0056b3;
		outline: none;
	}

	#course:has(ul).active ul li a:active {
		background: #e3f2fd;
	}

}