/*本文档存放点击产生的新盒子*/

	
	
	
	
	
	
	
	#color_white{
		background-color: aliceblue;
		border-radius: 4px;
		color: black;
		padding: 0px 3px;
		font-weight: 500;
		font-size: 14px;
	}


	.scrollable-box::-webkit-scrollbar{/* 滚动条整体样式 */
	    width: 6px;
	}
	.scrollable-box::-webkit-scrollbar-track{/* 滚动条轨道样式 */
	    border-radius: 10px;
	}
	.scrollable-box::-webkit-scrollbar-thumb{/* 滚动条滑块样式 */
		background: rgba(200, 200, 200, 0.2);
		border-radius: 10px;
	}
	.scrollable-box::-webkit-scrollbar-thumb:hover{/* 滑块悬停样式 */
	    background: rgba(200, 200, 200, 0.7);
	}
	
	
	
	.scrollable-none::-webkit-scrollbar{/* 滚动条整体样式隐藏 */
	    width: 0px;
	}
	.scrollable-none::-webkit-scrollbar-track{/* 滚动条轨道样式隐藏 */
	    border-radius: 0px;
	}
	.scrollable-none::-webkit-scrollbar-thumb{/* 滚动条滑块样式隐藏 */
		background: rgba(200, 200, 200, 0);
		border-radius: 0px;
	}
	.scrollable-none::-webkit-scrollbar-thumb:hover{/* 滑块悬停样式隐藏 */
	    background: rgba(200, 200, 200, 0);
	}
	
	#welcome{/*欢迎盒子 1 */
		width: 300px;
		height: 400px;
		border-radius: 10px;
		backdrop-filter: blur(20px);
		position: absolute;
		/* display: block; */
		display: none;
	}
	
	#new_time_box{/*二级菜单 时间盒子 1 */
		width: 650px;
		height: 300px;
		margin-left: 20px;
		border-radius: 10px;
		background: rgba(80, 78, 95, 0);
		backdrop-filter: blur(20px);
		transition:backdrop-filter 0.4s ease;
		display: none;
		transition: 0.8s;
	}
	
		#new_box_0{/*二级菜单 关于 1 */
			width: 650px;
			height: 560px;
			border-radius: 10px;
			background: rgba(49, 47, 58, 0.8);
			backdrop-filter: blur(10px);
			transition:backdrop-filter 0.4s ease;
			position: absolute;
			z-index: 2;
			display: none;
			transition: 0.2s;/*鼠标移出动画*/
			transition: opacity 2s ease-in-out;
		}
		#new_box_0_button{/*更新日志返回按钮 2 */
			height: 30px;
			width: 40px;
			float: right;
			margin: 5px 5px 0 0;
			border-radius: 3px;
			background: rgba(255, 255, 255, 0);
			border: none;
			color: white;
			font-size: 16px;
			padding-top: 4px;
			font-weight: 100;
			cursor: pointer;
			font-family: Yu Gothic Light;
		}
		#new_box_0_box_about{/*更新日志标题盒子 2 */
			height: 50px;
			width: 350px;
			margin: 40px auto 0px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
			#new_box_0_box_about_portrait{/*更新日志标题头像 3 */
				width: 40px;
				height: 40px;
				border-radius: 30px;
				margin-left: 0px;
				background-image: url(img/head_portrait.png);
				background-size: cover;
			}
			#new_box_0_box_about_title{/*更新日志标题文字盒子 3 */
				margin-left: 5px;
			}
				.new_box_0_box_about{/*更新日志标题文字 4 */
					font-weight: 100;
					font-size: 30px;
					font-weight: 100;
					font-family: "微软雅黑";
					color: white;
				}
		#new_box_0_introduce{/*更新日志介绍盒子 2 */
			height: 60px;
			width: 500px;
			margin: 0px auto 0px;
			color: white;
			letter-spacing: 2px;
			font-size: 13px;
			font-weight: 500;
			font-family: "微软雅黑-light";
			display: flex;
			justify-content: center;
			align-items: center;
		}
			#days_2{/*上线天数 3*/
				display: inline-block;
				line-height: 20px;
				color: #c1c1c1;
				font-weight: 500;
			}
			#new_box_0_about_a{/*开发日志链接 3*/
				cursor: pointer;
				transition: 0.1s;/*开发日志链接鼠标移出效果*/
			}
		#new_box_0_about{/*网站介绍盒子 2 */
			height: 325px;
			width: 480px;
			margin: 0px auto 0px;
			color: white;
			overflow-y: hidden;
			font-size: 13px;
			font-family: "微软雅黑";
			font-weight: 100;
			justify-content: center;
			text-align: center;
			line-height: 30px;
			display: block;
			transition: 0.4s;
		}
			#new_box_0_about_Git{/*GitHub链接*/
				transition: 0.2s;
				color: white;
				text-decoration: underline;
			}
		#new_box_0_about_div{/* 开发日志入口盒子 */
			height: 90px;
			width: 480px;
			margin: 0px auto 0px;
			position: absolute;
			bottom: 20px;
		}
		#new_box_0_box{/*更新日志内容盒子 2 */
			height: 375px;
			width: 480px;
			margin: 0px auto 0px;
			color: white;
			overflow-y: auto;
			font-size: 13px;
			font-family: "微软雅黑";
			font-weight: 100;
			display: none;
			cursor: pointer;
			transition: 0.4s;
		}
			#days_1{/*开发天数 3*/
				display: inline-block;
				color: #797979;
				font-weight: 600;
			}
		#ClearCache_box{/*清除缓存盒子 2 */
			right: 10px;
			bottom: 10px;
			position: absolute;
			display: block;
		}
			#ClearCache{
				color: rgb(70, 69, 73);
				opacity: 0.4;
				transition: 0.2s;
			}
		
	#new_tool_box_1{/*二级菜单 小图标1 1 */
		width: 450px;
		height: 250px;
		border-radius: 10px;
		background: rgba(61, 59, 72, 0.5);
		backdrop-filter: blur(10px);
		position: absolute;
		display: none;
		transition:backdrop-filter 0.4s ease;
		transition: 0.5s;
	}
		#new_tool_box_1_button{/*返回按钮 2 */
			height: 30px;
			width: 40px;
			float: right;
			margin: 5px 5px 0 0;
			border-radius: 3px;
			background: rgba(255, 255, 255, 0);
			border: none;
			color: white;
			font-size: 16px;
			padding-top: 4px;
			font-weight: 100;
			cursor: pointer;
			font-family: "Yu Gothic Light";
		}
		#new_tool_box_1_title{/*小图标1标题 2 */
			height: 20px;
			width: 300px;
			margin: 10px auto 0px;
			text-align: center;
			font-size: 13px;
			color: white;
			font-family: "微软雅黑";
		}
		#new_tool_box_1_box{/*小图标1内容 2 */
			height: 200px;
			width: 99%;
			margin-top: 8px;
			overflow-y: auto;
			transition: opacity 0.3s ease-in-out;
		}
			#new_tool_box_1_box_ph0{/*图片预览盒子 3*/
				width: 45%;
				height: 100px;
				float: left;
				margin: 5px 5px 5px 15px;
				border-radius: 5px;
				background-image: url(img/bg-0.webp);
				background-size: cover;
				transition: 0.2s;
			}
			#new_tool_box_1_box_ph1{/*图片预览盒子 3*/
				width: 45%;
				height: 100px;
				float: right;
				margin: 5px 11px 5px;
				border-radius: 5px;
				background-image: url(img/bg-1.webp);
				background-size: cover;
				transition: 0.2s;
			}
			#new_tool_box_1_box_ph2{/*图片预览盒子 3*/
				width: 45%;
				height: 100px;
				float: left;
				margin: 5px 5px 5px 15px;
				border-radius: 5px;
				background-image: url(img/bg-2.webp);
				background-size: cover;
				transition: 0.2s;
			}
			#new_tool_box_1_box_ph3{/*图片预览盒子 3*/
				width: 45%;
				height: 100px;
				float: right;
				margin: 5px 11px 5px;
				border-radius: 5px;
				background-image: url(img/bg-3.webp);
				background-size: cover;
				transition: 0.2s;
			}
			#new_tool_box_1_box_ph4{/*图片预览盒子 3*/
				width: 45%;
				height: 100px;
				float: left;
				margin: 5px 5px 5px 15px;
				border-radius: 5px;
				background-image: url(img/bg-4.webp);
				background-size: cover;
				transition: 0.2s;
			}
			#new_tool_box_1_box_ph5{/*图片预览盒子 3*/
				width: 45%;
				height: 100px;
				float: right;
				margin: 5px 11px 5px;
				border-radius: 5px;
				background-image: url(img/bg-5.webp);
				background-size: cover;
				transition: 0.2s;
			}
			#new_tool_box_1_box_ph6{/*图片预览盒子 3*/
				width: 45%;
				height: 100px;
				float: left;
				margin: 5px 5px 5px 15px;
				border-radius: 5px;
				transition: 0.2s;
			}
			#new_tool_box_1_box_ph7{/*图片预览盒子 3*/
				width: 45%;
				height: 100px;
				float: right;
				margin: 5px 11px 5px;
				border-radius: 5px;
				transition: 0.2s;
			}

	#city_select{/*选择城市菜单 1*/
		width: 400px;
		height: 310px;
		border-radius: 10px;
		background: rgba(49, 47, 58, 0.8);
		backdrop-filter: blur(10px);
		transition:backdrop-filter 0.4s ease;
		position: absolute;
		opacity: 0;
		display: none;
		justify-content: center;
		align-items: center;
		transition: 0.2s;/*鼠标移出动画*/
		transition: opacity 2s ease-in-out;
		z-index: 2;
	}
		#city_select_title{
			height: 20px;
			width: 300px;
			margin: 15px auto 0px;
			text-align: center;
			font-size: 13px;
			color: white;
			font-family: "微软雅黑";
		}
		#city_from{
			width: 350px;
			height: 155px;
			display: block;
			padding: 10px 10px;
			font-size: 20px;
			box-shadow: 10px red;
			justify-content: center;
			margin: 10px 25px 20px;
			border-radius: 12px;
			background-color: rgba(182, 182, 182, 0.788);
		}
		#city_from:focus{
			outline: none;
			border-color: rgba(rgb(255, 222, 222), 0.5);
			box-shadow: 0 0 0 3px rgba(90, 94, 94, 0.7);
		}
			.city_option{
				transition: 0.1s ease-in-out;
				color: rgba(61, 61, 61, 0.9);
			}
		#city_select_ok, #city_select_cancel{
			height: 40px;
			border-radius: 5px;
			background: rgba(61, 59, 72, 0.8);
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 11px;
			transition: 0.15s;
		}
		#city_select_ok{
			width: 240px;
			float: left;
			margin-left: 23px;
		}
		#city_select_cancel{
			width: 100px;
			float: right;
			margin-right: 23px;
			background-color: rgba(168, 29, 29, 0.5);
		}
		#city_select_text{/*API*/
			height: 20px;
			width: 300px;
			margin: 75px auto 0px;
			text-align: center;
			font-size: 11px;
			color: rgb(163, 163, 163);
			font-family: "微软雅黑";
		}
	
	#new_box_1{/*二级菜单 网站列表上左 1 */
			width: 470px;
			height: 410px;
			margin-left: 20px;
			border-radius: 5px;
			background: rgba(61, 59, 72, 0.6);
			backdrop-filter: blur(4px);
			display: none;
			opacity: 0;
			transition: opacity 0.3s ease;
			transition:backdrop-filter 0.4s ease;
			transition: 0.5s;
	}
		#new_box_1_title{/*网站列表上左标题 2 */
			height: 20px;
			width: 50px;
			float: left;
			margin: 12px 0 0 215px;
			font-size: 13px;
			color: white;
		}
		#new_box_1_button{/*返回按钮 2 */
			height: 30px;
			width: 40px;
			float: right;
			margin: 5px 5px 0 0;
			border-radius: 3px;
			background: rgba(255, 255, 255, 0);
			border: none;
			color: white;
			font-size: 16px;
			padding-top: 4px;
			font-weight: 100;
			font-family: Yu Gothic Light;
			transition: 0.2s;/*鼠标移出*/
		}
			#new_box_1_box{/*网站列表上左内容盒子 3*/
				width: 450px;
				height: 360px;
				margin: 40px 10px 10px;
				/* margin: 40px 7.5px 10px 12.5px;
				overflow-y: auto; */
			}
				#game_1_box{/*游戏1盒子 4*/
					width: 140px;
					height: 50px;
					background: rgba(73, 71, 87, 0.6);
					float: left;
					margin: 10px 5px 0px;
					border-radius: 3px;
					transition: 0.2s;
				}
				#game_2_box{/*游戏2盒子 4*/
					width: 140px;
					height: 50px;
					background: rgba(73, 71, 87, 0.6);
					float: left;
					margin: 10px 5px 0px;
					border-radius: 3px;
					transition: 0.2s;
				}
				#game_3_box{/*游戏3盒子 4*/
					width: 140px;
					height: 50px;
					background: rgba(73, 71, 87, 0.6);
					float: left;
					margin: 10px 5px 0px;
					border-radius: 3px;
					transition: 0.2s;
				}
				#game_4_box{/*游戏4盒子 4*/
					width: 140px;
					height: 50px;
					background: rgba(73, 71, 87, 0.6);
					float: left;
					margin: 10px 5px 0px;
					border-radius: 3px;
					transition: 0.2s;
				}
				#game_5_box{/*游戏5盒子 4*/
					width: 140px;
					height: 50px;
					background: rgba(73, 71, 87, 0.6);
					float: left;
					margin: 10px 5px 0px;
					border-radius: 3px;
					transition: 0.2s;
				}
				
					#game_1,#game_2,#game_3,#game_4,#game_5{/*游戏超链接 5*/
						display: inline-block;
						width: 140px;
						height: 50px;
						text-align: center;
						line-height: 50px;
						color: white;
						font-size: 13px;
						transition: 0.2s;
					}

	#new_box_2{/*二级菜单 网站列表上中 1 */
			width: 470px;
			height: 410px;
			margin-left: 20px;
			border-radius: 5px;
			background: rgba(61, 59, 72, 0.6);
			backdrop-filter: blur(4px);
			display: none;
			opacity: 0;
			transition: opacity 0.3s ease;
			transition:backdrop-filter 0.4s ease;
			transition: 0.5s;
	}
		#new_box_2_title{/*网站列表上中标题 2 */
			height: 20px;
			width: 55px;
			float: left;
			margin: 12px 0 0 210px;
			font-size: 13px;
			color: white;
		}
		#new_box_2_button{/*返回按钮 2 */
			height: 30px;
			width: 40px;
			float: right;
			margin: 5px 5px 0 0;
			border-radius: 3px;
			background: rgba(255, 255, 255, 0);
			border: none;
			color: white;
			font-size: 16px;
			padding-top: 4px;
			font-weight: 100;
			font-family: Yu Gothic Light;
			transition: 0.2s;/*鼠标移出*/
		}
			#new_box_2_box{/*网站列表上中内容盒子 3*/
				width: 450px;
				height: 360px;
				margin: 40px 10px 10px;
				/* margin: 40px 7.5px 10px 12.5px;
				overflow-y: auto; */
			}
			#new_box_2_box{/*网站列表上中内容盒子 3*/
				width: 450px;
				height: 360px;
				/* margin: 40px 10px 10px; */
				margin: 40px 6px 10px 14px;
				overflow-y: auto;
			}
				#td_1{/*所有装超链接的盒子 4*/
					height: 35px;
					width: 439px;
					margin-bottom: 10px;
					justify-content: center;
					text-align: center;
				}
					.www{/*所有超链接 6*/
						width: 437px;
						line-height: 35px;
						display: inline-block;
						border-radius: 6px;
						color: white;
						border: 1px solid white;
						transition: 0.3s;
						font-size: 14px;
						font-weight: 400;
						font-family: '微软雅黑';
					}




		
/**************************************************鼠标悬浮效果****************************************/

	#new_box_0:hover{/*二级菜单 关于*/
		transition: 0.2s;/*鼠标移入动画*/
		/* background: rgba(32, 30, 39, 0.8); */
		background: rgba(45, 43, 53, 0.8);

	}
	
	#new_tool_box_1_button:hover{/*二级菜单 小图标1 退出按钮*/
		/* background: rgba(255, 255, 255, 1); */
		background: rgba(255, 72, 72, 0.2);
		color: white;
	}
	
	#new_tool_box_1_box_ph0:hover,#new_tool_box_1_box_ph1:hover,
	#new_tool_box_1_box_ph2:hover,#new_tool_box_1_box_ph3:hover,
	#new_tool_box_1_box_ph4:hover,#new_tool_box_1_box_ph5:hover,
	#new_tool_box_1_box_ph6:hover,#new_tool_box_1_box_ph7:hover{
		cursor: pointer;
		transition: 0.2s;/*背景图片预览鼠标移入*/
		opacity: 0.7;
	}

	#city_select:hover{
		transition: 0.2s;/*鼠标移入动画*/
		background: rgba(45, 43, 53, 0.8);

	}

	.city_option:hover{
		color: rgb(255, 255, 255);
		font-size: 22px;
		background-color: rgba(153, 153, 153, 0.5);
		cursor: pointer;
		transition: 0.1s;
	}

	#city_select_ok:hover, #city_select_cancel:hover{
		margin: 0 7px 0 7px;
		opacity: 0.8;
		transition: 0.2s;
		/* transition-delay: 10s; */
		cursor: pointer;
		font-size: 13px;
	}
	#city_select_ok:hover{
		width: 241px;
		background-color: white;
		color: black;
		margin-left: 22.5px;
	}
	#city_select_cancel:hover{
		width: 100.5px;
		background-color: rgb(255, 72, 72);
		color: rgb(255, 255, 255);
		margin-right: 22.5px;
	}

	.main_control_btn:hover {/*控制按钮鼠标移入*/
    background: #f0f0f0;
    transform: scale(1.1);
	}

	.main_play_btn:hover {/*播放按钮鼠标移入*/
    background: #5568d3;
	}
	
	/*网站列表上左返回按钮鼠标移入*/
	#new_box_1_button:hover{
		cursor: pointer;
		/* background: rgba(255, 255, 255, 1); */
		background: rgba(255, 72, 72, 0.2);
		color: white;
		transition: 0.2s;/*钮鼠标移入*/
	}
	
	/*网站列表上中返回按钮鼠标移入*/
	#new_box_2_button:hover{
		cursor: pointer;
		/* background: rgba(255, 255, 255, 1); */
		background: rgba(255, 72, 72, 0.2);
		color: white;
		transition: 0.2s;/*钮鼠标移入*/
	}
	
	/*游戏1-6盒子悬浮*/
	#game_1_box:hover,#game_2_box:hover,#game_3_box:hover,
	#game_4_box:hover,#game_5_box:hover,#game_6_box:hover{
		background-color: rgba(255, 255, 255, 0.8);
	}
	
	/*游戏1-6盒子文字悬浮*/
	#game_1:hover,#game_2:hover,#game_3:hover,
	#game_4:hover,#game_5:hover,#game_6:hover{
		font-size: 14.5px;
		color: black;
		transition: 0.2s;
	}
	
	/*Demo1-6盒子悬浮*/
	#Demo_1_box:hover,#Demo_2_box:hover,#Demo_3_box:hover,
	#Demo_4_box:hover,#Demo_5_box:hover,#Demo_6_box:hover{
		background-color: rgba(255, 255, 255, 0.8);
	}
	
	/*Demo1-6盒子文字悬浮*/
	#Demo_1:hover,#Demo_2:hover,#Demo_3:hover,
	#Demo_4:hover,#Demo_5:hover,#Demo_6:hover,#Demo_7:hover{
		font-size: 14.5px;
		color: black;
		transition: 0.2s;
	}

	/*网站列表上中返回按钮鼠标移入*/
	#new_box_2_button:hover{
		cursor: pointer;
		background: rgba(255, 255, 255, 1);
		color: black;
		transition: 0.2s;/*按钮鼠标移入*/
	}
	
	#www_1:hover{/*网址-青柠起始页 6*/
		border: 1px solid #5eda00;
		background-color: #5eda00;
		color: #deffc4;
		transition: 0.3s;
		font-weight: 700;
		font-size: 16px;
	}
	#www_2:hover{/*网址-bilibili 6*/
		border: 1px solid #ff6f95;
		background-color: #ff6f95;
		transition: 0.3s;
		font-weight: 700;
		font-size: 16px;
	}
	#www_3:hover{/*网址-文心一言 6*/
		border: 1px solid #ffffff;
		background-color: #ffffff;
		color: #1869ff;
		transition: 0.3s;
		font-weight: 700;
		font-size: 16px;
	}
	#www_4:hover{/*网址-MC 6*/
		border: 1px solid #16a900;
		background-color: #16a900;
		color: #303030;
		transition: 0.3s;
		font-weight: 700;
		font-size: 16px;
	}
	#www_5:hover{/*网址-阿里云 6*/
		border: 1px solid #d56e06;
		background-color: #d56e06;
		color: #eae8f3;
		transition: 0.3s;
		font-weight: 700;
		font-size: 16px;
	}
	#www_6:hover{/*网址-GeoGebra 6*/
		border: 1px solid #7349ff;
		background-color: #7349ff;
		color: #e0dae4;
		transition: 0.3s;
		font-weight: 700;
		font-size: 16px;
	}
	#www_7:hover{/*网址-洛谷 6*/
		border: 1px solid #0099da;
		background-color: #0099da;
		color: #333333;
		transition: 0.3s;
		font-weight: 700;
		font-size: 16.5px;
	}
	#www_8:hover{/*网址-中国大学MOOC 6*/
		border: 1px solid #07a1f4;
		background-color: #07a1f4;
		/* background-image: radial-gradient(circle, #07a1f4, #34c500); */
		/* background: linear-gradient(120deg, #34c500, #07a1f4); */
		color: #263451;
		transition: 0.3s;
		font-weight: 700;
		font-size: 14.5px;
	}

	#new_box_0_about_a:hover{/*开发日志链接*/
		/* font-size: 12.5px; */
		/* font-weight: 500; */
		/* color: mediumslateblue; */
		text-decoration: underline;
		transition: 0.1s;/*开发日志链接鼠标移入动画*/
	}

	#ClearCache:hover{/*清除缓存按钮*/
		color: rgba(217, 217, 217, 0.929);
		transition: 0.2s;/*按钮鼠标移入*/

	}
	
	#new_box_0_button:hover{/*二级菜单 关于 退出按钮*/
		/* background: rgba(255, 255, 255, 0.2); */
		background: rgba(255, 72, 72, 0.2);
	}
	
	#new_time_box:hover{/*二级菜单 时间盒子*/
		transition: 0.2s;
		background: rgba(61, 59, 72, 0);
		backdrop-filter: blur(0px);
	}