.div-video-main {
	min-height: 610px;
	background: url("../images/divbg.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%; /*cover,contain*/	
	font-family: "Segoe UI", Roboto, sans-serif;
	padding: 10px;
	/* 页面整体水平+垂直居中，保留反向换行 */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	align-items: center;
}
/* 播放器容器 限制最小宽度防止挤碎 */
.video-player {
	position: relative;
	width: 48%;/*此位置可以修改*/
	/*height:100%;此位置可以修改*/
	min-width: 330px;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	user-select: none;
	border: 0px solid #FF0000;
}

.video-player video {
	width: 100%;
	height: 100%;
	display: block;
	/* 画面自动居中铺满容器，无底部黑边 */
	object-fit: cover;
	object-position: center;
}
/* 加载动画 */
.loading-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.loading-wrap.show {
	opacity: 1;
	pointer-events: all;
}

.loader {
	width: 50px;
	height: 50px;
	border: 3px solid rgba(100, 120, 255, 0.2);
	border-top-color: #6c63ff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@
keyframes spin {to { transform:rotate(360deg);
	
}

}
/* 底部控制栏容器 均衡内边距，渐变柔和无硬黑条 */
.controls-box {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;	
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent
		70%);
	transition: opacity 0.3s ease;
	z-index: 5;
}

.video-player.hide-controls .controls-box {
	opacity: 0;
	pointer-events: none;
}
/* 进度条 适中间距 */
.progress-wrap {
	width: 100%;
	height: 8px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
	cursor: pointer;
	position: relative;
	margin-bottom: 8px;
	overflow: hidden;
}

.progress-inner {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #6c63ff, #4a9eff);
	border-radius: 3px;
	transition: width 0.1s linear;
}
/* 控制行强制单行、禁止压缩错位 */
.control-row {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 18px;
	flex-wrap: nowrap;
	width: 98%;
	margin-left:10px;
	margin-bottom:10px;
}

.control-btn {
	background: none;
	border: none;
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s ease;
	flex-shrink: 0;
	font-weight: bold;
}

.control-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}

.time-text {
	margin-left: auto;
	white-space: nowrap;
	flex-shrink: 0;
}

.volume-group {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.volume-slider {
	width: 50px;
	height: 4px;
	accent-color: #6c63ff;
	cursor: pointer;
	flex-shrink: 0;
}

.speed-toggle {
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: #fff;
	padding: 4px 8px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 18px;
	flex-shrink: 0;
}

.speed-toggle:hover {
	background: rgba(255, 255, 255, 0.2);
}
/* 中央播放浮层 */
.center-play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background: rgba(108, 99, 255, 0.35);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	backdrop-filter: blur(6px);
}

.center-play-overlay.show {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.play-icon {
	font-size: 36px;
	color: #fff;
}
/* 窄屏适配：手机隐藏倍速按钮 */
@media ( max-width : 420px) {
	.speed-toggle {
		display: none;
	}
}