.water-ink-background {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    max-height: 100vh;  
    object-fit: fill;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0.8; 
	filter: hue-rotate(20deg);  
}

document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});



document.addEventListener('dragstart', function (e) {
    if (e.target.tagName === 'IMG') {
        e.preventDefault();
    }
});
  
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html, body {
     height: 100%;
     font-family: Arial, sans-serif;
 }
 
 body {
     background: linear-gradient(to bottom, #000000 0%, #000000 50%);
     color: #fff;
     margin: 0;
     padding: 0;
     min-height: 100vh;
 }

 /*---------------------------------------------------------------顶部导航栏 */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background: rgba(255, 255, 255, 1);
     backdrop-filter: blur(10px);
     padding: 0px 0;
     z-index: 1000;

 }

 .nav-container {
     max-width: 1340px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 20px;
 }

.logo img {
	margin-right: 40px; /* 图片距离右侧菜单边距 */
	width: 400px;       /*根据logo 实际大小调整 */
	height: auto;       /* 高度自适应，防止变形 */ 
}

 .nav-links {
     display: flex;
     list-style: none;
     gap: 20px;
 }

 .nav-links a {
     color: #000000;
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s;
 }

 .nav-links a:hover {
     color: #64ffda;
 }
 
 
.music-icon {
    width: 56px;
    height: 56px;
    transform-origin: center;
    transition: transform 0.3s ease;  
}

.music-icon.rotating {
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
 /*---------------------------------------------------------------视频区域 */
 .vertical-text1 {
    position: absolute;  
    top:200px;           
    left: 1560px;           
    transform: translateX(-50%);  
    font-size: 24px;     
    font-weight: bold;   
    color: white;        
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);  
    writing-mode: vertical-rl; 
    letter-spacing: 8px;  
    z-index: 10;          
}

 .vertical-text2 {
    position: absolute;   
    top:150px;            
    left: 1530px;         
    transform: translateX(-50%);  
    font-size: 20px;    
    color: white;       
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);   
    writing-mode: vertical-rl;  
    letter-spacing: 8px;  
    z-index: 10;          
}

 .vertical-text3 {
    position: absolute;  
    top:50px;            
    left: 1500px;        
    transform: translateX(-50%);   
    font-size: 20px;    
    color: white;       
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);  
    writing-mode: vertical-rl;   
    letter-spacing: 8px;  
    z-index: 10;          
}

 .video-top-section {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     width: 100%;
     margin-top: 70px; /* 导航栏高度 */
 }

 .video-top-container {
     position: relative;
     width: 100%;
     max-width: 1920px;
 }

 .top-video {
     width: 1920px;
     height: auto;
     display: block;
	 
 }

 /*---------------------------------------------------------------视频底部按钮 */
 .video-buttons {
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 100px;
     z-index: 2;
 }

 .video-buttons img {
     width: 300px;
     height: auto;
     cursor: pointer;
     transition: transform 0.2s;
 }
 
  .video-border {
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 100px;
     z-index: 1;
 }

 .video-border img {
     width: 1920px;
     height: auto;
     cursor: pointer;
     transition: transform 0.2s;
 }
 
 
 
 

 .video-buttons img:hover {
     transform: scale(1.1);
 }
 
  .logo16 {
   position: absolute;                     
   transform: translateX(-50%);    
   margin-left: 622px;
   margin-top: -428px;
}

/* ---------------------------------------------------------------视频下方居中图片 */
.video-bottom-image {
		width:1186px;      
		height: auto;      
		object-fit: cover;  
		display: block;    
		margin: 0 auto;     
		position: relative;	
}
 
/* ---------------------------------------------------------------小图片模块（放在大图内部） */
.small-images-inside1 {
    position: absolute;    
    top: 197px;         /* 距离底部 */
    left:41px;          /* 距离右边 */
    background-color: rgba(26, 26, 26, 0); /* 半透明深色背景 */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #555;
    text-align: center;
	z-index: 102;
}
.small-images-inside2 {
    position: absolute;    
    top: 197px;        
    left:988px;        
    background-color: rgba(26, 26, 26, 0);  
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #555;
    text-align: center;
	z-index: 102;
}

.small-images-inside3 {
    position: absolute;    
    top: 665px;          
    left:377px;          
    background-color: rgba(26, 26, 26, 0); 
    padding: 3px;
    border-radius: 8px;
    border: 0px solid #555;
    text-align: center;
	z-index: 101;
}

.small-images-inside4 {
    position: absolute;    
    top: 780px;        
    left:165px;        
    background-color: rgba(26, 26, 26, 0.5); 
    padding: 13px;
    border-radius: 8px;
    border: 1px solid #38515f;
    text-align: center;
	z-index: 100;
}


.small-images-grid {
    display: grid;
    grid-template-columns: repeat(2, 60px); /* 每行 2 个小图 */
    gap: 15px; /* 小图之间的间距 */
    justify-content: center; /* 整体居中 */
    max-width: 160px; 
    margin: 0 auto;  
}

.small-images-grid1 {
    display: grid;
    grid-template-columns: repeat(6, 60px); /* 每行 6 个小图 */
    gap: 15px;  
    justify-content: center; 
    max-width: auto;  
    margin: 0 auto;  
}

.small-images-grid2 {
    display: grid;
    grid-template-columns: repeat(12, 60px); /* 每行 12 个小图 */
    gap: 10px;  
    justify-content: center;  
    max-width: auto; 
    margin: 0 auto;  
	
}

.small-image-item {     
	width: 46px;        
    height: 46px;       
    border: 2px solid #555;           
    border-radius: 12px;
    padding: 6px;
    background-color: #1a1a1a;       
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
    justify-content: center;  
    align-items: center;    
	position: relative;  
	
}

.small-image-item img {
    width: auto;
    height: auto;
    border-radius: 6px;
    display: block; 
}

.small-image-item:hover { 

    box-shadow: 0 5px 30px rgba(255, 255, 255, 0.5);
}
  
/* 提示图片 */
.tooltip-image { 
    position: absolute;
    top: -20px;               
    left: -130px;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;	
}


/* 提示图片中的图片 */
.tooltip-image img {
    width: auto;   
    height: auto ; 
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0);;
	opacity: 0.9; 
}

/* 鼠标悬停 */
.small-image-item:hover .tooltip-image {
    opacity: 1;
}

.image-buttons { 
    position: absolute;
    bottom: 450px;        
    left: 50%;            
    transform: translateX(-49.7%); 
    display: flex;
    gap: 560px;             /* 两个按钮之间的间距 */
    z-index: 2;   
}
.image-buttons img { 
    cursor: pointer;  
	filter: hue-rotate(160deg);
    transition: all 0.3s ease; 
    opacity: 0.7;        
}
 .image-buttons img:hover {
	 opacity: 1;
     transform: scale(1.3);
 }

/* ---------------------------------------------------------------轮播模块容器 */
.carousel-container {
    position: absolute;
    top: 188px;
    left: 265px;
    z-index: 1;
    width: 668px;
    height: 408px;
    margin: -4px -4px;
    box-sizing: border-box;
    
    /* 性能优化 */
    contain: layout paint style;
}

/* 轮播图片包裹层 - 与容器同尺寸 */
.carousel-slide {
    position: relative;
    width: 100%; /* 继承容器宽度 */
    height: 100%; /* 继承容器高度 */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    isolation: isolate;
    
    /* 性能优化 */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 渐变遮罩优化 */
.carousel-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(0, 0, 0, 0.5) 80%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
	/* 性能优化 */
    will-change: opacity;
    transition: opacity 0.3s ease;
}

/* 图片基础样式 */
.carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 0;
    /* 图片优化 */
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0);
    filter: blur(0);
}

/* 激活状态 */
.carousel-image.active {
    opacity: 1;
    z-index: 1;
}

/* 加载状态优化 */
.carousel-image.loading {
    opacity: 0;
    transition: none;
}

.carousel-image.loaded {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* 响应式设计 - 在小屏幕上等比例缩放 */
@media (max-width: 650px) {
    .carousel-container {
        width: 95vw;
        height: calc(95vw * 410 / 610); /* 保持宽高比 */
        max-width: 610px;
        max-height: 410px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        width: 90vw;
        height: calc(90vw * 410 / 610);
        top: 120px;
    }
    
    .carousel-slide {
        border-radius: 8px;
    }
    
    .carousel-slide::after {
        background: radial-gradient(
            ellipse at center,
            transparent 20%,
            rgba(0, 0, 0, 0.4) 70%,
            rgba(0, 0, 0, 0.9) 90%
        );
    }
}

/* ---------------------------------------------------------------装备介绍模块 */
.equipment-section {
	width: 1340px; 
	margin: 15px auto;
	text-align: center;
	border: 1px solid #38515f;        /* 边框：2px 宽，实线，颜色  */
	border-radius: 10px;            
	padding: 10px;              
	background-color: rgba(0, 0, 0, 0.6);     
	margin-top:-5px;
}

.equipment-img {
    margin-bottom: 20px;  
	margin-top:10px;  
}

.equipment-img img {
    display: block;      
    max-width: 100%;     
    height: auto;        
    width: auto;         
    margin: 0 auto;      
}

.equipment-weapon-section {
	width: 1200px; 
	margin: 0px auto;
	text-align: center;
	border: 1px solid #38515f;  
	border-radius: 10px;
	padding: 20px;              
	background-color: rgba(0, 0, 0, 0.2);    
	margin-bottom: 30px; 
	margin-top:10px;  
	overflow: hidden; 
	 position: relative;
     cursor: grab;
}

.equipment-weapon-grid {
	display: grid;
	grid-template-columns: repeat(72, 60px); /* 10 列，每列 50px */  
	gap: 0px; /* 间距 */
	width: 4320px; /* 72 × 60px = 4320px */
    transform: translateX(0);
    transition: none;  
}
.equipment-weapon-section.dragging {
	cursor: grabbing; 
}

.equipment-weapon-item {
    position: relative;
    border: 0px solid #38515f;
    border-radius: 5px;
    padding: 0px;
    background-color: rgba(0, 0, 0, 0.0);
    display: flex;         
    justify-content: center; 
    align-items: center;     
	width: 60px;  
    height: auto;
}
.equipment-weapon-item:hover img {
	transform: scale(1.2);
} 

/* ---------------------------------------------------------------装备排列*/
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(5, auto); /* 固定5列，宽度自适应 */
    gap: 8px;
    justify-content: center;
    margin: 10px 0px;
    justify-items: center; /* 每列内容居中 */
}

.equipment-item {
    display: inline-block;
    position: relative;
    border: 1px solid #38515f;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: grab;
    /* 不设置固定宽高，完全由图片决定 */
}

.equipment-item img {
    display: block;
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.equipment-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 20%,
        transparent 80%,
        rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
    z-index: 1;
    border-radius: 10px;
}

.equipment-item:hover {
    transform: translateY(-2px);
}

.equipment-item:hover img {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------装备排列2*/
.equipment-grid2 {
    display: grid;
    grid-template-columns: repeat(4, max-content); /* 根据内容最大宽度 */
    gap: 10px;
    margin: 10px 0px;
    padding: 0px;
    justify-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.equipment-item2 {
    display: inline-block;
    position: relative;
    border: 1px solid #38515f;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: grab;
    /* 不设置固定宽高，完全由图片决定 */
}

.equipment-item2 img {
    display: block;
    border-radius: 15px;
    padding: 6px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.equipment-item2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 20%,
        transparent 80%,
        rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
    z-index: 1;
    border-radius: 10px;
}

.equipment-item2:hover {
    transform: translateY(-2px);
}

.equipment-item2:hover img {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------装备排列3*/
.equipment-grid3 {
    display: grid;
    grid-template-columns: repeat(3, max-content); /* 根据内容最大宽度 */
    gap: 12px;
    margin: 10px 0px;
    padding: 0px;
    justify-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.equipment-item3 {
    display: inline-block;
    position: relative;
    border: 1px solid #38515f;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: grab;
    /* 不设置固定宽高，完全由图片决定 */
}

.equipment-item3 img {
    display: block;
    border-radius: 15px;
    padding: 8px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.equipment-item3::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 20%,
        transparent 80%,
        rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
    z-index: 1;
    border-radius: 10px;
}

.equipment-item3:hover {
    transform: translateY(-2px);
}

.equipment-item3:hover img {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}


/* ---------------------------------------------------------------时装介绍模块 */
.fashion-section {
	width: 1340px; 
	margin: 15px auto;
	text-align: center;            
	border: 1px solid #38515f;     
	border-radius: 10px;           
	padding: 10px;                 
	background-color: rgba(0, 0, 0, 0.9);     
    opacity: 0.8; 
}

.fashion-img {
    margin-bottom: 20px; 
	margin-top: 10px;  
}

.fashion-img img {
    display: block;     
    max-width: 100%;    
    height: auto;       
    width: auto;        
    margin: 0 auto;     
}                       


/* 时装展示容器 */
.fashionshow-container {
    position: relative;     
    display: inline-block;  
    width: 100%;            
    max-width: 1340px;      
}

/* 背景图：模特/时装台 */
.fashionshow-bg {
    width: 100%;             
    height: auto;
    display: block;
}

/* 所有时装小图的通用样式 */
.fashion-item {
  position: absolute;
  width: 500px;  /* 增大画布宽度 */
  height: 500px; /* 增大画布高度 */   
}

  
.item-1 {top: -105px;	left: -100px;}
.item-2 {top: -47px;	left:  130px;}
.item-3 {top: -140px;	left:  400px;}
.item-4 {top: -80px;	left:  673px;}
.item-5 {top: 40px;	left: 15px;}
.item-6 {top:  70px;	left:  305px;}
.item-7 {top:  80px;	left:  540px;}
.item-8 {top:  85px;	left:  745px;}
.item-9 {top:  -110px;	left:  830px;}

/*.item-2 {top: -88px;	left:  135px;}*/


/* ---------------------------------------------------------------其他介绍模块 */
.juqing-section {
	width: 1340px; 
	margin: 15px auto;
	text-align: center;            
	border: 1px solid #38515f;     
	border-radius: 10px;           
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.72);
}

.juqing-img {
    margin: 10px 0 10px 0;
    max-width: 100%; /* 图片响应式 */
    height: auto;
    border-radius: 5px; /* 图片圆角 */
}
.juqing-item {
    display: inline-block;
    position: relative;
    border: 1px solid #38515f;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: all 0.3s ease;
}

.juqing-item img {
    display: block;
    border-radius: 10px;
    padding: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}








 /* 页脚样式 */
  .page-footer {
	position: relative;  
    background-color: #2c2c2c; 
    color: #ffffff;            
    font-size: 14px;           
    text-align: center;        
    padding: 10px 0;           
    margin-top: 50px;          
	opacity: 0.8; 
	 
  }

  .footer-content {
    max-width: 1340px;         /* 最大宽度，与页面主体内容保持一致 */
    margin: 0px auto;            /* 横向居中 */
    display: flex;
    flex-direction: column;
    align-items: center;       /* 内容居中 */
    gap: 10px;                 /* 提示信息和版权信息之间的间距 */
	opacity:1;
  }
 
  .copyright p { 
    font-weight: bold;         
	margin-top: -20px;    
  }

 .footer-logo {
   position: absolute;
    bottom: 0px;
    left: 50%;                         
    transform: translateX(-50%);      
	margin-left: -450px;
}

 .footer-logo1 {
   position: absolute;
    bottom: 0px;
    left: 50%;                         
    transform: translateX(-50%);      
	margin-left: 450px;
}


/* ---------------------------------------------------------------技能展示模块 */
.video-section {
     width: 1340px; 
     margin: 15px auto;
     text-align: center;          
     border: 1px solid #38515f;   
     border-radius: 10px;         
     padding: 10px;               
     background-color: rgba(0, 0, 0, 0.8);    
     opacity: 0.9; 
}
.video-img {
     margin-bottom: 20px; 
     margin-top: 15px; 	 
}

.video-img img {
     display: block;     
     max-width: 100%;    
     height: auto;       
     width: auto;        
     margin: 0 auto;     
}

/* 容器：相对定位 */
.video-container {
     position: relative; 
     width: 100%;
     max-width: 1340px;
     height: 620px; /* 添加固定高度 */
     margin: 0px auto;
}

/* 视频 */
.video-run {
     position: absolute;
     top: -20px;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: contain;   /*  保持比例，完整显示（不裁剪，不拉伸） */
     z-index: 1;
     opacity: 1;
     transition: opacity 0.4s ease;
}
.video-run.fade-out { opacity: 0; }

.video-overlay {
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background: radial-gradient(
         circle at center,
         transparent 100%,
         transparent 100%,
         rgba(0,0,0,1) 100%,
         rgba(0,0,0,1) 100%,
         rgba(0,0,0,1) 100%
     );
     pointer-events: none;
     z-index: 2;
}

/* 左右按钮容器 */
.video-side-buttons {
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 30px;
     box-sizing: border-box;
     z-index: 4;
     pointer-events: none;  
}

.video-btn {
     filter: hue-rotate(140deg);
     width: 80px;
     height: auto;
     object-fit: contain;
     cursor: pointer;
     border: 3px solid transparent;
     border-radius: 12px;
     transition: all 0.3s ease;
     opacity: 0.7;
     pointer-events: auto; /* 允许点击 */ 
}

.video-btn:hover {
     opacity: 1;
     transform: scale(1.2); 
}


@media (max-width: 768px) {
    .video-btn {
         width: 60px;
         height: 60px;
     }
    .video-side-buttons {
         padding: 0 15px;
     }
}

.video-title {
     position: absolute;
     top: 10%;
     left: 50%;
     transform: translate(-100%, -50%);  
     opacity: 0;
     transition: 
         opacity 0.6s ease,
         transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

     color:  #ffffff;
     font-size: 40px;
     font-weight: bold;
     text-align: center;
     z-index: 4;
     background: rgba(0, 0, 0, 0.5);
     padding: 8px 16px;
     border-radius: 5px;
     white-space: nowrap;
     pointer-events: none;
}

.video-title.show {
     opacity: 0.3;
     transform: translate(-50%, -50%);  
}

.sound-control {
     position: absolute;
     top: -80px;
     right: 12px;
     width: 40px;
     height: 40px; 
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 10;
     transition: all 0.2s ease; 
     opacity: 0.6;
}

.sound-control:hover {
     background: rgba(0, 0, 0, 0.6);
     transform: scale(1.1);
     opacity: 1;
}

.sound-icon {
     width: 40px;
     height: 40px; 
}

.skill-sound-control { right: 12px; }
.mon-sound-control { right: 60px; }

/* 加载动画 */
.video-loading {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 50px;
     height: 50px;
     border: 3px solid #333;
     border-top: 3px solid #4CAF50;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     z-index: 3;
     display: none;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 视频指示器 */
.video-indicators {
     position: absolute;
     bottom: 5px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 10px;
     z-index: 4;
}

.indicator {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     cursor: pointer;
     transition: all 0.3s ease;
}

.indicator.active {
     background: #4CAF50;
     transform: scale(1.2);
}