/*  */
.grid-background-box{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	overflow: hidden;
}

/* 格子背景容器 - 修复边缘问题 */
.grid-background {
	position: absolute;
	top: -50px;      /* 扩展上方边界 */
	left: -50px;     /* 扩展左方边界 */
	width: calc(100% + 100px);  /* 扩大宽度以覆盖扩展 */
	height: calc(100% + 100px); /* 扩大高度以覆盖扩展 */
	/* z-index: -1; */
	overflow: hidden;
}

/* 格子图案定义：
   - 使用浅灰色(#f5f5f5)边框
   - 格子尺寸为50px × 50px
   - 白色(#ffffff)背景
   - 从右上向左下匀速平移
   - 动画周期1.5秒（加速10倍）
   - 修复：扩大背景图案尺寸，确保移动时边缘不会出现空白
*/
.grid-pattern {
	width: 300%;      /* 扩大宽度，确保移动时完全覆盖 */
	height: 300%;     /* 扩大高度，确保移动时完全覆盖 */
	background-color: #ffffff;
	background-image: 
		linear-gradient(#f5f5f5 1px, transparent 1px),
		linear-gradient(90deg, #f5f5f5 1px, transparent 1px);
	background-size: 45px 45px;
	background-position: 0 0;
	
	/* 动画：从右上向左下匀速移动，周期1.5秒（加速10倍）
	   调整起始位置，确保边缘不会出现空白 */
	animation: moveGrid 1.5s linear infinite;
}

/* 格子移动动画关键帧
   从右上角位置开始，向左下角移动
   使用transform实现流畅的平移效果
   调整移动距离，确保无缝循环
*/
@keyframes moveGrid {
	0% {
		transform: translate(0, 0);
	}
	100% {
		/* transform: translate(-50px, 50px);*/ /* 向左下移动一个格子距离 */ 
		transform: translate(-45px, 45px); /* 向左下移动一个格子距离 */
	}
}




.grid-background-guang-yun{
	position: absolute;
	top: -200px;
	left: -250px;
	width: calc(100% + 500px);
	height: calc(100% + 200px);
	
	
	/* 核心代码：创建内部白色椭圆光晕效果 */
	background: 
	    radial-gradient(
	        ellipse at center,  /* 使用椭圆而不是圆形 */
	        transparent 0%,
	        transparent 50%,      /* 从75%位置开始渐变（接近边缘1/4处） */
	        rgba(255, 255, 255, 0.1) 30%,  /* 开始变白 */
	        rgba(255, 255, 255, 0.3) 40%,  /* 逐渐变白 */
	        rgba(255, 255, 255, 0.8) 55%,  /* 接近完全白 */
	        white 100%            /* 边缘完全变白 */
	    ),
	    transparent;            /* 中间完全透明 */
}