/* 创建两个不相等的彼此并排的浮动列 */
	/* 左列 */
	.leftcolumn
	{
		float: left;
		width: 20%;
		background-color: #f1f1f1;
		padding: 20px;
		border-right: 1px solid white;
		position: sticky;
		top: 0px;
	}

	/* 右列 */
	.rightcolumn
	{
		float: left;
		width: 80%;
		background-color: #f1f1f1;
		padding: 20px;
	}

	/* 为文章添加卡片效果 */
	.left_card
	{
		background-color: #f0f0f0;
		overflow: hidden;
	}
	
	.left_card a
	{
		font-size: 1.5em;
		display: block;
		background-color: #f0f0f0;
		text-align: center;
		text-decoration: none;
		padding: 10px;
		color: #404040;
		border-bottom: 1px solid #e0e0e0;
	}
	
	.left_card a.active
	{
		background-color: #FF7300;
	}

	.left_card a:hover
	{
		background-color: #FF7300;
	}

	.right_card 
	{
		background-color: white;
		padding: 20px;
		overflow: hidden;
		
		margin: 5px;
		box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
	}
	
	.right_card .img1
	{
		float: left;
		width: 50%;
		padding: 5px;
	}

	.right_card .img2
	{
		float: left;
		padding: 5px;
		max-width: 100%;
	}
	
	#zhuanli
	{
		width: 30%;
	}
	
	.right_card .img1:hover
	{
		box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.7);
	}

	/* 清除列之后的浮动 */
	.row:after
	{
		content: "";
		display: table;
		clear: both;
	}

	/* 响应式布局 - 当屏幕的宽度小于 800 像素时，使两列堆叠而不是并排 */
	@media screen and (max-width: 800px) 
	{
		.leftcolumn, .rightcolumn
		{
			width: 100%;
			padding: 0;
		}
	  
		.right_card .img1
		{
			width: 100%;
		}

		.right_card .img2
		{
			width: 100%;
		}

		.leftcolumn
		{
			position: static;
		}
	}

	/* 响应式布局 - 当屏幕的宽度小于 400 像素时，使导航链接堆叠而不是并排 */
	@media screen and (max-width: 400px)
	{
		.topnav a
		{
			float: none;
			width: 100%;
		}
	}