.video-modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.video-modal.active {
    display: flex; /* 当添加 active 类时显示并居中 */
    justify-content: center;
    align-items: center;
}

.video-container {
    width: 80%;
    max-width: 1400px;
    position: relative;
    background-color: black; /* 确保背景是黑色以避免未填充区域 */
}

#fullScreenVideo {
    width: 100%;
    height: auto;
    max-height: calc(100% - 60px); /* 考虑到关闭按钮和其他可能的空间 */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.video-control-btn i.fa-pause{position:absolute;top:25px;left:28px}
.close {
    position: absolute;
    top: 6px;
    right: 8px;
    display: inline-flex;      /* 保持flex布局 */
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 1001;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s;

    /* 新增修复属性 */
    line-height: 1;          /* 重置默认行高 */
    transform: translateY(0); /* 清除潜在偏移 */
	padding-bottom:6px;  transition: all 0.3s ease;
}
.close:hover{
	background: #999;
      transform: rotate(90deg);
}

/* 可选：微调字体渲染位置 */
.close::after {
    content: "\00D7";        /* 使用CSS渲染×符号 */
    display: block;
    margin-top: -2px;        /* 根据实际情况微调垂直偏移 */
	font-size:46px
}
.close::after:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

     .video-control-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            opacity: 0.9;
            display: none; /* 初始隐藏 */
        }
        .video-control-btn:hover {
            transform: translate(-50%, -50%) scale(1.1);
            background-color: rgba(0, 0, 0, 0.8);
            opacity: 1;
        }
        .video-control-btn i.fa-play {
           position: absolute;
    top: 25px;
    left: 28px;
        }
        #videoModal .modal-content {
            position: relative; /* 确保按钮相对视频容器定位 */
        }
		
		/* 视频容器（确保是相对定位） */
#videoModal .modal-content {
  position: relative; /* 关键：作为子元素的定位基准 */
}

/* 加载动画定位（与控制按钮同一基准） */
.video-loading {
  position: absolute; /* 以视频容器为基准 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中 */
  z-index: 9; /* 低于控制按钮，避免遮挡 */
}

/* 控制按钮（保持现有居中样式） */
.video-control-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 与 loading 圈完全重合 */
  z-index: 10; /* 高于 loading 圈 */
  /* 其他样式保持不变 */
}
/* 隐藏浏览器默认loading指示器 */
video::-webkit-media-controls-start-playback-button,
video::-internal-media-controls-overlay-cast-button {
    display: none !important;
}

/* 自定义loading指示器 */
.custom-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    display: none;
    z-index: 10;
}