html {
	min-width: 1210px;
	height: 100%;
}

 .STYLE2 {font-size: 16px}
    .STYLE3 {
	font-size: 10px;
	font-weight: bold;
}
   .shiny-text {  
    font-size: 10px; 
     font-weight: bold; 
    background: linear-gradient(45deg, red, yellow, aqua, green) ; 
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    animation: gradient 4s ease-in-out infinite;  
    background-size: 200% 100%;  
  }  
   @keyframes gradient {  
    0% {  
      background-position: 0% 50%;  
    }  
    50% {  
      background-position: 100% 50%;  
    }  
    100% {  
      background-position: 0% 50%;  
    }  
  }  
  .shiny-text {  
    font-size: 10px; 
    font-weight: bold; 
    background: linear-gradient(45deg, #FF0000, #FF1100, #FF2200, #FF3300, #FF4400, #FF5500, #FF6600, #FF7700, #FF8800, #FF9900, #FFaa00, #FFbb00, #FFcc00, #FFdd00, #FFee00, #FFff00, #FFee00, #FFdd00, #FFcc00, #FFbb00, #FFaa00, #FF9900, #FF8800, #FF7700, #FF6600, #FF5500, #FF4400, #FF3300, #FF2200, #FF1100) ;
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    animation: gradient 4s ease-in-out infinite;  
    background-size: 200% 100%;  
  } 
 .STYLE12 {font-size: 16px}
.STYLE13 {background: linear-gradient(45deg, red, yellow, aqua, green); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradient 4s ease-in-out infinite; background-size: 200% 100%; font-weight: bold;}
.STYLE14 {background: linear-gradient(45deg, red, yellow, aqua, green); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradient 4s ease-in-out infinite; background-size: 200% 100%; font-weight: bold;}
.STYLE15 {font-size: 12px; font-weight: bold; background: linear-gradient(45deg, red, yellow, aqua, green); animation: gradient 4s ease-in-out infinite; background-size: 200% 100%; }
  .glow-table {  
    width: 100%;  
    border-collapse: collapse;  
  }  
  .glow-table th, .glow-table td {  
    padding: 10px;  
    text-align: center;  
    border-bottom: 1px solid #ddd;  
  }  
    
  /* 鼠标悬停时的发光效果 */  
  .glow-table tr:hover {  
    background-color:; /* 背景色 */  
    transition: background-color 0.3s ease; /* 过渡效果 */  
    box-shadow: 0 0 10px #DC143C /* 发光效果，通过 box-shadow 实现 */  
  } 
      .image-container img {  
        display: inline-block; /* 允许在元素之间设置margin */  
        margin: 0 5px; /* 设置上下间隔为0，左右间隔为10像素 */  
    }  
    /* 移除第一张图片左边的间隔和最后一张图片右边的间隔 */  
    .image-container img:first-child {  
        margin-left: 0;  
    }  
    .image-container img:last-child {  
        margin-right: 0;  
    }  
.dashed-border {  
    border: 3px dashed #FFD700; /* 初始边框样式 */  
    padding: 5px;  
    font-size: 20px;  
    animation: changeBorderColor 2s infinite; /* 应用动画 */  
}  
  
/* 定义动画 */  
@keyframes changeBorderColor {  
    0% {  
        border-color: #FFD700; /* 开始时的颜色 */  
    }  
   50% {  
        border-color: #FF0000; /* 中间时的颜色 */  
    }  
    100% {  
        border-color: #00FF00; /* 结束时的颜色 */  
    }  
}
.dashed-border1 {  
    border: 3px dashed #FFD700; /* 初始边框样式 */  
    padding: 5px;  
    font-size: 20px;  
    animation: changeBorderColor 2s infinite; /* 应用动画 */  
}  
  
/* 定义动画 */  
@keyframes changeBorderColor {  
    0% {  
        border-color: #FFD700; /* 开始时的颜色 */  
    }  
   50% {  
        border-color: #FF0000; /* 中间时的颜色 */  
    }  
    100% {  
        border-color: #00FF00; /* 结束时的颜色 */  
    }  
} 

.popup {  
    display: none; /* 初始状态为隐藏 */  
    position: fixed; /* 根据需要定位 */  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%); /* 居中显示 */  
    width: 600px; /* 宽度 */  
    height: 450; /* 高度 */  
    border: 1px dashed #FFD700; /* 初始边框样式 */  
    z-index: 1000; /* 确保在其他元素之上 */  
    /* 其他样式... */  
    overflow: hidden; /* 确保内容不会超出容器 */  
}  
  
.video-background {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    z-index: -1; /* 确保视频在内容之下 */  
}  
  
.video-background video {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    min-width: 100%;  
    min-height: 100%;  
    width: auto;  
    height: auto;  
    transform: translate(-50%, -50%);  
    object-fit: cover; /* 保持视频比例并覆盖容器 */  
}

wenzi-1{  
  color: green;  
}

  
  .shiny-text1 {  
    font-size: 10px; 
    font-weight: bold; 
    background-color: #FFFFFF;
    -webkit-background-clip: text;  
    animation: gradient 4s ease-in-out infinite;  
    background-size: 200% 100%; 
    padding: 5px; /* 为文本添加内边距 */
    border-radius: 15px; /* 圆角边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影以增强视觉效果 */	
  } 
    .shiny-text1 a {
    color: inherit; /* 链接文字颜色继承自父级 */
    text-decoration: none; /* 去掉下划线 */
    display: inline-block; /* 确保链接占据按钮的全部空间 */
    width: 100%;
    height: 100%;
  }
  
        body, html {
            margin: 0;
            padding: 0;
        }
 
        /* 主体内容部分，避免被 footer 遮挡 */
        .content {
            padding-bottom: 100px; /* 留出 footer 的高度 */
        }
 
        /* 底部样式 */
        footer {
            /* 移除 position: fixed; 使 footer 可以自由移动 */
            position: relative; /* 或者可以省略，默认是 static */
            bottom: auto; /* 移除 bottom 属性，因为它在 relative 或 static 定位下无效 */
            left: auto; /* 移除 left 属性，因为它在 relative 或 static 定位下无效 */
            width: 100%;
 
            text-align: center;
            padding: 20px 0; /* 使用正值来设置内边距 */
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 可选：添加阴影 */
        }
 
        .footer-text {
            font-size: 14px;
            line-height: 1.6;
        }
 
        .footer-text img {
            margin: 5px;
            height: 80px; /* 可根据需要调整图片大小 */
        }
 
        /* 示例：使用 margin-top 来向下移动 footer */
        .move-down {
            margin-top: 50px; /* 根据需要调整这个值 */
        }
		
		
        .transparent-button {
            display: inline-flex; /* 使用 inline-flex 布局，使按钮在同一行显示 */
            justify-content: center; /* 水平居中对齐 */
            align-items: center; /* 垂直居中对齐 */
            width: 120px; /* 按钮宽度 */
            height: 40px; /* 按钮高度 */
    background-color: transparent; /* 默认状态：完全透明 */
            border: 1px solid #ebdec2; /* 边框颜色 */
            color: #ffffff; /* 文字颜色 */
            font-size: 16px; /* 文字大小 */
            font-weight: bold; /* 文字加粗 */
            border-radius: 15px; /* 圆角边框 */
            cursor: pointer; /* 鼠标悬停时显示为手型 */
            transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
            margin-right: 10px; /* 按钮之间的间距，最后一个按钮不需要这个间距 */
        }
 
        /* 去掉最后一个按钮的右边距（可选） */
        .transparent-button:last-child {
            margin-right: 0;
        }
 
        .transparent-button:hover {
    background-color: transparent; /* 悬停时完全透明 */
        }
		
		
/* 科技感全息按钮主样式 */
.hologram-button {
    /* 基础布局与排版 */
    display: inline-flex;          /* 弹性布局，使内容居中 */
    justify-content: center;       /* 水平居中 */
    align-items: center;           /* 垂直居中 */
    height: 40px;                  /* 按钮高度 */
    padding: 0 20px;               /* 左右内边距（增加点击区域） */
    
    /* 文字样式 */
    color: #ebdeb8;                /* 冷蓝色文字（霓虹效果） */
    font-family: 'Arial Rounded MT', sans-serif; /* 圆角字体，更显科技感 */
    font-size: 16px;               /* 字号 */
    font-weight: bold;             /* 加粗 */
    letter-spacing: 1px;           /* 字符间距（增强未来感） */
    text-transform: uppercase;     /* 全大写字母 */
    
    /* 按钮基础形状 */
    border: none;                  /* 去除默认边框 */
    border-radius: 10px;           /* 圆形边角（胶囊形状） */
    cursor: pointer;               /* 鼠标悬停时显示手型 */
    position: relative;            /* 为伪元素定位提供参照 */
    overflow: hidden;              /* 隐藏超出按钮的内容（如扫描线溢出部分） */
    
    /* 过渡动画（悬停/点击时平滑变化） */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* 内部基座背景（模拟全息投影台） */
    background: rgba(5, 15, 30, 0.9); /* 深色半透明背景 */
    
    /* 初始光影效果 */
    box-shadow: 
        0 0 20px rgba(0, 240, 255, 0.2),  /* 外部蓝色发光 */
        inset 0 0 10px rgba(0, 240, 255, 0.1); /* 内部微弱蓝光 */

    /* ========== 动态光流边框（通过伪元素模拟） ========== */
    &::before {
        content: '';                     /* 必须属性，伪元素需要内容 */
        position: absolute;              /* 绝对定位，覆盖按钮 */
        inset: -2px;                     /* 边框向外扩展2px（避免边缘裁剪） */
        background: linear-gradient(45deg, #00F0FF, #8A2BE2, #00F0FF); /* 蓝-紫-蓝渐变 */
        background-size: 200% 200%;     /* 扩大背景尺寸，为动画做准备 */
        border-radius: 10px;             /* 与按钮一致的圆角 */
        z-index: -1;                     /* 置于按钮下方 */
        animation: borderFlow 3s linear infinite; /* 流动动画 */
        opacity: 0.7;                    /* 初始透明度（避免过于刺眼） */
    }

    /* ========== 全息扫描线（叠加在按钮上的动态效果） ========== */
    &::after {
        content: '';
        position: absolute;
        top: -50%;                       /* 扫描线从按钮上方开始 */
        left: -100%;                     /* 从左侧外部进入 */
        width: 200%;                     /* 宽度是按钮的2倍（确保覆盖） */
        height: 200%;                    /* 高度同理 */
        background: conic-gradient(      /* 锥形渐变模拟扫描线 */
            from 0deg,
            transparent 0deg,           /* 透明起始 */
            rgba(0, 240, 255, 0.1) 45deg, /* 45度后出现半透明蓝光 */
            transparent 90deg           /* 90度后恢复透明 */
        );
        animation: scanLine 4s linear infinite; /* 旋转动画 */
        pointer-events: none;           /* 避免干扰按钮点击 */
    }

    /* ========== 悬停状态：增强交互反馈 ========== */
    &:hover {
        transform: translateY(-4px) scale(1.02); /* 轻微上浮+放大 */
        box-shadow: 
            0 8px 25px rgba(0, 240, 255, 0.4),  /* 更强的外部发光 */
            0 0 40px rgba(138, 43, 226, 0.3);   /* 紫色氛围光 */
        
        /* 悬停时边框亮度提升 */
        &::before {
            opacity: 1;                  /* 完全不透明 */
            filter: brightness(1.2);     /* 亮度提高20% */
        }
    }

    /* ========== 点击状态：脉冲反馈 ========== */
    &:active {
        transform: translateY(-1px) scale(0.98); /* 轻微下压+缩小 */
        /* 点击时扫描线加速运动 */
        &::after {
            animation: scanLine 1.5s linear infinite;
        }
    }
}

/* ========== 动画定义 ========== */
/* 扫描线旋转动画 */
@keyframes scanLine {
    0% { transform: rotate(0deg); }     /* 从0度开始 */
    100% { transform: rotate(360deg); } /* 旋转一圈 */
}

/* 边框颜色流动动画 */
@keyframes borderFlow {
    0% { background-position: 0% 50%; } /* 渐变起点在左侧 */
    100% { background-position: 200% 50%; } /* 渐变向左流动（视觉上形成循环） */
}
		
	

/* 科技感全息按钮主样式 */
.hologram1-button {
    /* 基础布局与排版 */
    display: inline-flex;          /* 弹性布局，使内容居中 */
    justify-content: flex-start;   /* 修改为左对齐（为图标留空间） */
    align-items: center;           /* 垂直居中 */
    height: 40px;                  /* 按钮高度 */
    padding: 0 20px 0 40px;        /* 左侧增加内边距（为图标腾出空间） */
    
    /* 文字样式 */
    color: #ebdeb8;                /* 冷蓝色文字（霓虹效果） */
    font-family: 'Arial Rounded MT', sans-serif; /* 圆角字体 */
    font-size: 16px;               /* 字号 */
    font-weight: bold;             /* 加粗 */
    letter-spacing: 1px;           /* 字符间距 */
    text-transform: uppercase;     /* 全大写字母 */
    
    /* 按钮基础形状 */
    border: none;                  /* 去除默认边框 */
    border-radius: 10px;           /* 圆角 */
    cursor: pointer;               /* 鼠标悬停手型 */
    position: relative;            /* 为伪元素和图标定位 */
    overflow: hidden;              /* 隐藏溢出内容 */
    
    /* 过渡动画 */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* 内部背景 */
    background: rgba(5, 15, 30, 0.9); /* 深色半透明 */
    
    /* 左侧插入图标（aj.png） */
    background-image: url('/feto/aj.png'); /* 图标路径 */
    background-size: 22px 22px;    /* 图标大小 */
    background-repeat: no-repeat;  /* 禁止重复 */
    background-position: 10px center; /* 图标位置（左侧15px，垂直居中） */
    
    /* 初始光影 */
    box-shadow: 
        0 0 20px rgba(0, 240, 255, 0.2), 
        inset 0 0 10px rgba(0, 240, 255, 0.1);

    /* ========== 动态光流边框 ========== */
    &::before {
        content: '';
        position: absolute;
        inset: -2px;
        background: linear-gradient(45deg, #00F0FF, #8A2BE2, #00F0FF);
        background-size: 200% 200%;
        border-radius: 10px;
        z-index: -1;
        animation: borderFlow 3s linear infinite;
        opacity: 0.7;
    }

    /* ========== 全息扫描线 ========== */
    &::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -100%;
        width: 200%;
        height: 200%;
        background: conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(0, 240, 255, 0.1) 45deg,
            transparent 90deg
        );
        animation: scanLine 4s linear infinite;
        pointer-events: none;
    }

    /* ========== 悬停状态 ========== */
    &:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 
            0 8px 25px rgba(0, 240, 255, 0.4),
            0 0 40px rgba(138, 43, 226, 0.3);
        
        &::before {
            opacity: 1;
            filter: brightness(1.2);
        }
    }

    /* ========== 点击状态 ========== */
    &:active {
        transform: translateY(-1px) scale(0.98);
        &::after {
            animation: scanLine 1.5s linear infinite;
        }
    }
}

/* 动画定义（保持不变） */
@keyframes scanLine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes borderFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}



/* 科技感全息按钮主样式 */
.hologram2-button {
    /* 基础布局与排版 */
    display: inline-flex;          /* 弹性布局，使内容居中 */
    justify-content: flex-start;   /* 修改为左对齐（为图标留空间） */
    align-items: center;           /* 垂直居中 */
    height: 40px;                  /* 按钮高度 */
    padding: 0 20px 0 40px;        /* 左侧增加内边距（为图标腾出空间） */
    
    /* 文字样式 */
    color: #ebdeb8;                /* 冷蓝色文字（霓虹效果） */
    font-family: 'Arial Rounded MT', sans-serif; /* 圆角字体 */
    font-size: 16px;               /* 字号 */
    font-weight: bold;             /* 加粗 */
    letter-spacing: 1px;           /* 字符间距 */
    text-transform: uppercase;     /* 全大写字母 */
    
    /* 按钮基础形状 */
    border: none;                  /* 去除默认边框 */
    border-radius: 10px;           /* 圆角 */
    cursor: pointer;               /* 鼠标悬停手型 */
    position: relative;            /* 为伪元素和图标定位 */
    overflow: hidden;              /* 隐藏溢出内容 */
    
    /* 过渡动画 */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* 内部背景 */
    background: rgba(5, 15, 30, 0.9); /* 深色半透明 */
    
    /* 左侧插入图标（aj.png） */
    background-image: url('/feto/QQ.png'); /* 图标路径 */
    background-size: 28px 28px;    /* 图标大小 */
    background-repeat: no-repeat;  /* 禁止重复 */
    background-position: 10px center; /* 图标位置（左侧15px，垂直居中） */
    
    /* 初始光影 */
    box-shadow: 
        0 0 20px rgba(0, 240, 255, 0.2), 
        inset 0 0 10px rgba(0, 240, 255, 0.1);

    /* ========== 动态光流边框 ========== */
    &::before {
        content: '';
        position: absolute;
        inset: -2px;
        background: linear-gradient(45deg, #00F0FF, #8A2BE2, #00F0FF);
        background-size: 200% 200%;
        border-radius: 10px;
        z-index: -1;
        animation: borderFlow 3s linear infinite;
        opacity: 0.7;
    }

    /* ========== 全息扫描线 ========== */
    &::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -100%;
        width: 200%;
        height: 200%;
        background: conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(0, 240, 255, 0.1) 45deg,
            transparent 90deg
        );
        animation: scanLine 4s linear infinite;
        pointer-events: none;
    }

    /* ========== 悬停状态 ========== */
    &:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 
            0 8px 25px rgba(0, 240, 255, 0.4),
            0 0 40px rgba(138, 43, 226, 0.3);
        
        &::before {
            opacity: 1;
            filter: brightness(1.2);
        }
    }

    /* ========== 点击状态 ========== */
    &:active {
        transform: translateY(-1px) scale(0.98);
        &::after {
            animation: scanLine 1.5s linear infinite;
        }
    }
}

/* 动画定义（保持不变） */
@keyframes scanLine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes borderFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}







        .grid-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                linear-gradient(rgba(30, 144, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(30, 144, 255, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: -1;
        }
        
		
		
		
        .container {
            max-width: 100%;
            margin: 0 auto;
            padding: 40px 20px;
            position: relative;
        }
        
        .title {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .title h1 {
            font-size: 2.5rem;
            color: #00f0ff;
            text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
            margin-bottom: 10px;
            background: linear-gradient(90deg, #00f0ff, #9d00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .title p {
            color: #a0a0a0;
            font-size: 1.1rem;
        }
        
        .hologram4-button {
            display: inline-block;
            padding: 15px 30px;
            background: linear-gradient(45deg, rgba(0, 150, 255, 0.3), rgba(100, 0, 255, 0.3));
            border: 1px solid rgba(0, 240, 255, 0.3);
            border-radius: 8px;
            color: #00f0ff;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
            box-shadow: 
                0 0 10px rgba(0, 150, 255, 0.3),
                0 0 20px rgba(100, 0, 255, 0.2),
                inset 0 0 10px rgba(0, 240, 255, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        
        .hologram4-button:hover {
            background: linear-gradient(45deg, rgba(0, 180, 255, 0.5), rgba(150, 0, 255, 0.5));
            box-shadow: 
                0 0 15px rgba(0, 180, 255, 0.5),
                0 0 30px rgba(150, 0, 255, 0.4),
                inset 0 0 15px rgba(0, 240, 255, 0.3);
            transform: translateY(-3px);
        }
        
        .hologram4-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                120deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
            );
            transition: left 0.5s;
        }
        
        .hologram4-button:hover::before {
            left: 100%;
        }
        
        .member-levels {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 140px;
            width: 90%;
            max-width: 70%;
            background: rgba(16, 16, 32, 0.95);
            border: 1px solid rgba(0, 240, 255, 0.2);
            border-radius: 12px;
            box-shadow: 
                0 0 20px rgba(0, 150, 255, 0.3),
                0 0 40px rgba(100, 0, 255, 0.2);
            padding: 30px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 100;
            backdrop-filter: blur(10px);
        }
        
        .levels-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .level-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 240, 255, 0.1);
            border-radius: 8px;
            padding: 20px 15px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .level-card:hover {
            background: rgba(0, 150, 255, 0.1);
            border-color: rgba(0, 240, 255, 0.3);
            transform: translateY(-5px);
            box-shadow: 
                0 5px 15px rgba(0, 150, 255, 0.2),
                0 0 20px rgba(100, 0, 255, 0.1);
        }
        
        .level-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, #00f0ff, transparent);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }
        
        .level-card:hover::before {
            transform: translateX(100%);
        }
        
        .level-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            border-radius: 50%;
            position: relative;
        }
        
        .level-icon::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            z-index: 1;
        }
        
        .level-name {
            font-size: 1.1rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #00f0ff;
        }
        
        .level-desc {
            font-size: 0.8rem;
            color: #a0a0a0;
            line-height: 1.5;
        }
        
        .level-card:nth-child(1) .level-icon { background: rgba(150, 150, 150, 0.3); color: #ccc; }
        .level-card:nth-child(2) .level-icon { background: rgba(100, 150, 200, 0.3); color: #6495ED; }
        .level-card:nth-child(3) .level-icon { background: rgba(165, 42, 42, 0.3); color: #A52A2A; }
        .level-card:nth-child(4) .level-icon { background: rgba(192, 192, 192, 0.3); color: #00FF00; }
        .level-card:nth-child(5) .level-icon { background: rgba(218, 165, 32, 0.3); color: #DAA520; }
        .level-card:nth-child(6) .level-icon { background: rgba(229, 128, 226, 0.3); color: #DC143C; }
        .level-card:nth-child(7) .level-icon { background: rgba(0, 191, 255, 0.3); color: #00BFFF; }
        .level-card:nth-child(8) .level-icon { background: rgba(255, 215, 0, 0.3); color: #1E90FF; }
        .level-card:nth-child(9) .level-icon { background: rgba(75, 123, 130, 0.3); color: #FFFF00; }
        .level-card:nth-child(10) .level-icon { background: rgba(255, 0, 255, 0.3); color: #FF0000; }
        .level-card:nth-child(11) .level-icon { background: rgba(0, 255, 127, 0.3); color: #00FF7F; }
        
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 50%;
            color: #a0a0a0;
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .close-btn:hover {
            background: rgba(255, 0, 0, 0.3);
            color: #ff4444;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(0, 150, 255, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 150, 255, 0); }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }



































	
		
		    .transparent2-button {
            display: inline-flex; /* 使用 inline-flex 布局，使按钮在同一行显示 */
            justify-content: center; /* 水平居中对齐 */
            align-items: center; /* 垂直居中对齐 */
            /* width: 120px; 移除固定宽度 */
            height: 35px; /* 按钮高度 */
            padding: 0 15px; /* 添加左右内边距，确保文字不会紧贴边框 */
    background-color: transparent; /* 默认状态：完全透明 */
            border: 1px solid #ebdec2; /* 边框颜色 */
            color: #ffffff; /* 文字颜色 */
            font-size: 15px; /* 文字大小 */
            border-radius: 15px; /* 圆角边框 */
            cursor: pointer; /* 鼠标悬停时显示为手型 */
            transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
            margin-right: 10px; /* 按钮之间的间距，最后一个按钮不需要这个间距 */
        }
 
        /* 去掉最后一个按钮的右边距（可选） */
        .transparent2-button:last-child {
            margin-right: 0;
        }
 
        .transparent2-button:hover {
    background-color: transparent; /* 悬停时完全透明 */
        }

		
		
		        .centered-text-container {
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: center; /* 水平居中对齐 */
            align-items: center; /* 垂直居中对齐 */
            height: 100vh; /* 使容器占满整个视口高度，便于演示 */
            border: 1px solid #ccc; /* 可选：添加边框以查看容器大小 */
        }
 
        .centered-text {
            font-size: 24px; /* 设置文字大小，可以根据需要调整 */
            /* 你可以添加更多样式来控制文本外观 */
            color: #333; /* 文字颜色 */
            font-weight: bold; /* 文字加粗 */
            text-align: center; /* 确保多行文本也居中对齐（虽然 Flexbox 已经处理了单行） */
        }
		
		
		        .group-info {
            margin-bottom: 20px; /* 为每个群信息添加一些间距 */
        }
 
        .group-title {
            font-size: 18px;
            font-weight: bold;
        }
 
        .group-code {
            color: #F00;
        }
 
        .group-link {
            margin-left: 10px; /* 为链接添加一些左边距 */
            text-decoration: none; /* 移除下划线 */
        }
 
        .badge {
            margin-left: 10px;
            padding: 5px 10px;
            border-radius: 5px;
            color: #fff;
            font-size: 14px;
        }
 
        .bg-danger {
            background-color: #dc3545;
        }
 
        .bg-success {
            background-color: #28a745;
        }
 
        .bg-info {
            background-color: #17a2b8;
        }
 
        /* 可以为每个群信息添加独特的样式，如果需要 */
        .group-one .badge {
            /* 特定于①群的样式（如果需要额外样式） */
        }
 
        .group-two .badge {
            /* 特定于②群的样式（如果需要额外样式） */
        }
 
        .group-three .badge {
            /* 特定于③群的样式（如果需要额外样式） */
        }
		
 
        .video1-background {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 
                0 0 20px rgba(0, 195, 255, 0.5),
                0 0 40px rgba(0, 195, 255, 0.3);
            background: linear-gradient(145deg, #0f172a, #1e293b);
            padding: 1px;
        }
        
        .image-container {
            width: 100%;
            height: 100%;
            position: relative;
            background: 
                linear-gradient(45deg, rgba(0, 195, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px,
                linear-gradient(135deg, rgba(0, 195, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px;
            background-color: #0f172a;
            border-radius: 8px;
            overflow: hidden;
        }

        /* 动态科技边框 - 使用动画 */
        .image-container::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(90deg, 
                transparent, 
                #00f3ff, 
                #00c3ff, 
                transparent);
            border-radius: 8px;
            z-index: -1;
            animation: borderRotate 3s linear infinite;
        }

        .image-container::after {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(90deg, 
                transparent, 
                #00f3ff, 
                #00c3ff, 
                transparent);
            border-radius: 8px;
            z-index: -1;
            animation: borderRotate 3s linear infinite reverse;
            filter: blur(10px);
        }

        @keyframes borderRotate {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        /* 科技感标题栏 */
        .video1-background::before {
            content: "鸿蒙奇迹S21 品牌运营 火爆人气 养老之地";
            position: absolute;
            top: 88%; 
            left: 50%;
            transform: translateX(-50%);
            color: #00f3ff;
            font-size: 20px;
            font-weight: 500;
            z-index: 1;
            background: linear-gradient(90deg, 
                rgba(0, 25, 36, 0.8), 
                rgba(0, 45, 65, 0.9), 
                rgba(0, 25, 36, 0.8));
            padding: 12px 24px;
            border-radius: 50px;
            white-space: nowrap;
            border: 1px solid rgba(0, 195, 255, 0.3);
            box-shadow: 
                0 0 10px rgba(0, 195, 255, 0.5),
                0 0 20px rgba(0, 195, 255, 0.3);
            text-shadow: 0 0 8px rgba(0, 195, 255, 0.8);
            font-family: 'Arial', sans-serif;
            letter-spacing: 1px;
        }