/* 全局样式重置，消除浏览器默认边距 */
		* {
		  margin: 0;
		  padding: 0;
		  box-sizing: border-box;}
		
		/* 全局背景图片自适应拉伸*/
		html {
		    height: auto;
		}
		body {
		    position: relative;
		    margin: 0;
		    padding: 0;
		
		    min-height: 100vh;
		    background: transparent;
		
		    font-family: "Microsoft Yahei", sans-serif;
		}
		
		/* 独立背景图层，不会产生分割线 */
		body::before {
		    content: "";
		    position: fixed;
		    inset: 0;
		    width: 100vw;
		    height: 100vh;
		    background-image: url("img/PIC4.jpeg");
		    background-size: cover;
		    background-repeat: no-repeat;
		    background-position: top center;
		    z-index: -1;
		}
		
		/* 全局背景图片自适应拉伸*/
		  
		.topdiv{
			            
			            width: auto;
			            /* 设置横幅高度，50vh表示占屏幕高度的50%，也可以写固定值如400px */
			            height: 100vh;
			            /* 背景图路径：换成你的大图片文件名 */
			            background-image: url('img/PIC4.png');
			            /* 核心：让背景图等比例铺满整个容器，不变形 */
			            background-size: cover;
			            /* 背景图居中显示 */
			            background-position: center;
			            /* 核心：四周内阴影实现虚化效果 */
			            box-shadow: inset 0 0 100px rgba(0, 0, 0, 1);
			            /* 原来的背景色作为图片加载失败的兜底 */
			            background-color: aliceblue;
			            /* 给内部小图标加一点内边距，不要贴边 */
			            padding:15px;
			           
					   
					   
			            
		}
		
		.footer {
			
			color:white;
			
		}
		
		.topdiv img {
		  /* 给图标自己加黑色背景，盖住父元素的蓝色 */
		  opacity:0.9;
		  border-radius: 5px; /* 可选，加圆角更美观 */
		  margin-left:25px;
		
		}
		
		.topfont{
			 display: inline-block;/*改为行内元素*/
		
			   /* 核心：把渐变写在background-image上，而不是color */
			   background-image: linear-gradient(325deg, #05c6e3 0%,#ffde37   100%);
			   /* 核心：把背景裁剪到文字区域 */
			   -webkit-background-clip: text;
			   background-clip: text;
			   /* 核心：让文字本身透明，透出后面的渐变背景 */
			   color: transparent;
			   /* 可选：加大字号让渐变效果更明显 */
			   font-size: 30px;
			   /* 可选：和图标垂直居中对齐 */
			   vertical-align: bottom;
			   margin-left: 8px; /* 和图标拉开一点间距 */
			   font-weight: bold;
			   
		}
		.topa a {
			color:white;
		  text-decoration: none; /* 统一移除所有状态的下划线 */
		  margin-right: 40px; /* 关键：链接之间的间隔，数值越大间隔越宽 */
		}

		.topa a:hover {
		  color: #cccccc;
		}
		
		.topa{
			
			color: white;
			font-size:23px;
			display: inline-block;
			opacity: 0.9;
			margin-left: 40px;
			
		}
		
		
		
		.Maintitle{
			   /* 核心：把渐变写在background-image上，而不是color */
						   background-image: linear-gradient(325deg, #00fff3 0%, #eefffe 100%);
						   /* 核心：把背景裁剪到文字区域 */
						   -webkit-background-clip: text;
						   background-clip: text;
						   /* 核心：让文字本身透明，透出后面的渐变背景 */
						   color: transparent;
						   /* 可选：加大字号让渐变效果更明显 */
						   font-size: 50px;
						   /* 可选：和图标垂直居中对齐 */
						   vertical-align: bottom;
						   
						   margin:180px auto auto 80px; /* 上边 | 右边 | 下边 | 左边 */
						    /* 和图标拉开一点间距 */
						   font-weight: bold;
						   
						   opacity: 0.95; /*不透明度*/
		}
		
		
		.Maintitle2{
			   /* 核心：把渐变写在background-image上，而不是color */
						   background-image: linear-gradient(325deg, #ebffe7 0%, #e7f822 100%);
						   /* 核心：把背景裁剪到文字区域 */
						   -webkit-background-clip: text;
						   background-clip: text;
						   /* 核心：让文字本身透明，透出后面的渐变背景 */
						   color: transparent;
						   /* 可选：加大字号让渐变效果更明显 */
						   font-size: 30px;
						   /* 可选：和图标垂直居中对齐 */
						   vertical-align: bottom;
						   
						   margin:10px auto auto 120px; /* 上边 | 右边 | 下边 | 左边 */
						    /* 和图标拉开一点间距 */
						   font-weight: bold;
						   
						   opacity: 0.85;
						   
		}
		
		.Main1{
			background-image: linear-gradient(325deg, #de04db 0%, #1d1402 100%);
			padding: 1em;
			
			
			box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.2);
			
			
			border-radius: 35px;
			opacity: 0.85;
			
			box-sizing: border-box; 
			max-width: calc(100% - 30px);

			
			    /* ✅ 核心：限制最大高度 */
			    max-height: calc(100vh - 10px);
			    /* 内容超过高度时显示滚动条 */
			    overflow-y: auto;
			    /* 顶部对齐大图片顶部（根据需要调整） */
			    margin-left:auto;
				margin-right:auto;
				margin-top:120px;
			
		}
		
		.inmain1 {
			
			margin: 10px;
			margin-top: 1px;
			border-radius: 5px; 
		}
		
		.inmain1 h1{
			color:white;
			text-align:center;
		}
		
		.inmain1 ol{
			color:white;
		}
		
		.bottom{
			border-bottom: 1px solid #000000;
		}
		
		/* 右下角悬浮音乐图标 */
		#musicIcon {
		    /* 固定在右下角 */
		    position: fixed;
		    bottom: 20px;
		    right: 20px;
		    /* 图标大小 */
		    width: 40px;
		    height: 40px;
		    /* 半透明背景，和你的Main1风格统一 */
		    background-color: rgba(222, 4, 219, 0.7);
		    /* 圆形 */
		    border-radius: 50%;
		    /* 文字居中 */
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    /* 鼠标移上去变成手型 */
		    cursor: pointer;
		    /* 过渡动画 */
		    transition: all 0.3s ease;
		    /* 层级最高，不会被其他元素挡住 */
		    z-index: 9999;
		}
		
		/* 鼠标悬停效果 */
		#musicIcon:hover {
		    /* 放大一点 */
		    transform: scale(1.1);
		    /* 变不透明 */
		    background-color: rgba(222, 4, 219, 1);
		}
		
		/*261014新增history黑框*/
		
		/* ========== 信息方框区域样式 ========== */
		/* ========== 信息方框区域样式 ========== */
		/* ========== 信息方框区域样式 ========== */
		.info-grid {
		    /* 核心修改：改用 grid 布局 */
		    display: grid; 
		    /* 核心修改：固定每行 3 列，1fr 代表平分宽度 */
		    grid-template-columns: repeat(3, 1fr); 
		    
		    gap: 20px;       
		    justify-content: center; 
		    
		    /* 保持你原有的位置覆盖设置 */
		    margin-top: -80vh; 
		    position: relative;
		    z-index: 10; 
		    
		    padding: 0 20px;
		    width: 100%;
		    /* 限制容器最大宽度，防止在超大屏幕上方框被拉得过长 */
		    max-width: 1300px; 
		    margin-left: auto;
		    margin-right: auto;
		}
		
		/* 添加响应式：当屏幕变小（如平板电脑）时，自动变成 2 列 */
		@media (max-width: 1024px) {
		    .info-grid {
		        grid-template-columns: repeat(2, 1fr);
		    }
		}
		
		/* 添加响应式：当屏幕变很窄（如手机）时，自动变成 1 列 */
		@media (max-width: 768px) {
		    .info-grid {
		        grid-template-columns: 1fr;
		    }
		}
		
		/* 单个黑色半透明方框（现在它是 a 标签） */
		/* 单个黑色半透明方框 */
		/* 单个黑色半透明方框 */
		.info-box {
		    text-decoration: none;
		    
		    background-color: rgba(0, 0, 0, 0.6);
		    backdrop-filter: blur(8px);
		    -webkit-backdrop-filter: blur(8px);
		    
		    border: 1px solid rgba(255, 255, 255, 0.15);
		    border-radius: 15px; 
		    padding: 20px;
		    
		    display: flex;
		    align-items: flex-start; /* 图标与文字顶部对齐 */
		    gap: 20px; 
		    
		    /* 核心修改：删除之前的 min-width, max-width 和 flex 属性 */
		    /* 让方框宽度交由 grid 自动控制 */
		    width: 100%; 
		    box-sizing: border-box; /* 确保 padding 不会撑破容器 */
		    
		    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
		    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
		    
		    color: white;
		    cursor: pointer; 
		}
		
		/* 鼠标悬停缩小效果 */
		.info-box:hover {
		    transform: scale(0.96); 
		    background-color: rgba(0, 0, 0, 0.8); 
		    border-color: rgba(255, 255, 255, 0.3);
		    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
		}
		
		/* 保留你之前设置好的 .box-icon 和 .info-text 等样式 */
		
		/* 鼠标点击时的瞬间效果（可选，增强手感） */
		.info-box:active {
		    transform: scale(0.94); /* 点下去的时候再小一点点 */
		}
		
		/* 方框内的图标 */
		.info-box .box-icon {
		    width: 45px;
		    height: 45px;
		    object-fit: contain; 
		    flex-shrink: 0; 
			margin-top: 2px; 
		}
		
		.info-box .info-text {
		    /* 核心修改 3：让文字区域自动占满剩余宽度 */
		    flex: 1; 
		    min-width: 0; /* 防止长单词撑破容器 */
		}
		/* 方框内的文字内容区 */
		.info-box .info-text h3 {
		    margin-bottom: 6px;
		    font-size: 16px;
		    background-image: linear-gradient(325deg, #05c6e3 0%, #ffde37 100%);
		    -webkit-background-clip: text;
		    background-clip: text;
		    color: transparent;
		}
		
		
		.info-box .info-text p {
		    font-size: 13px;
		    color: #cccccc; 
		    line-height: 1.5;
		}
		
		.info-box .info-text h3 {
		    /* 恢复纯白色，覆盖掉之前的渐变属性 */
		    background-image: none;
		    color: #ffffff;
		    -webkit-background-clip: initial;
		    background-clip: initial;
		    -webkit-text-fill-color: #ffffff; /* 强制白字 */
		}
		
		@media (max-width: 768px) {
		    .info-box {
		        min-width: 100%; /* 手机端每个方框独占一行 */
		        max-width: 100%;
		    }
		}
		
		/* 仅member页面使用，图标放大固定64px */
		.member-grid {
		    width: 64px;
		    height: 64px;
		    object-fit: contain;
		    flex-shrink: 0;
		    margin-top: 2px;
		}