@charset "utf-8";
.shipin-container {max-width:1270px;width:100%;text-align:center;}
.subtitle {font-size:1.2rem;margin-bottom:40px;opacity:0.9;}
.video-container {position:relative;width:100%;max-width:1268px;margin:0 auto 40px;border-radius:12px;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,0.4);background:#000;}
.video-player {width:100%;height:auto;display:block;cursor:pointer;}
.video-cover {position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.3s ease;z-index:10;}
.video-cover::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:-1;}
.play-button {width:80px;height:80px;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:20px;transition:transform 0.3s ease,background 0.3s ease;box-shadow:0 5px 15px rgba(0,0,0,0.3);}
.play-button:hover {transform:scale(1.1);background:rgba(255,255,255,1);}
.play-button::after {content:'';width:0;height:0;border-left:20px solid #e74c3c;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px;}
.cover-title {font-size:2.2rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,0.5);}
.cover-subtitle {font-size:1.1rem;max-width:80%;line-height:1.6;}
.instructions {background:rgba(255,255,255,0.1);padding:20px;border-radius:10px;margin-top:30px;max-width:800px;margin-left:auto;margin-right:auto;text-align:left;}
.instructions h2 {margin-bottom:15px;font-size:1.5rem;color:#fdbb2d;}
.instructions p {margin-bottom:10px;line-height:1.6;}
.instructions code {background:rgba(0,0,0,0.3);padding:2px 6px;border-radius:4px;font-family:monospace;}
.pause-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:none;justify-content:center;align-items:center;z-index:5;cursor:pointer;}
.pause-icon {width:80px;height:80px;background:rgba(255,255,255,0.8);border-radius:50%;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity 0.3s ease;}
.pause-icon::before,.pause-icon::after {content:'';width:8px;height:30px;background:#333;margin:0 5px;}
@media (max-width:768px) {h1 {font-size:2rem;}
.cover-title {font-size:1.8rem;}
.play-button {width:70px;height:70px;}
.video-container {border-radius:8px;}
}
/* 自定义控制条样式 */.custom-controls {position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.7));padding:15px;z-index:20;transition:opacity 0.3s ease;}
.controls-bar {display:flex;align-items:center;gap:15px;}
.control-btn {background:rgba(255,255,255,0.9);border:none;border-radius:4px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all 0.3s ease;}
.control-btn:hover {background:white;transform:scale(1.1);}
.progress-container {flex:1;height:6px;background:rgba(255,255,255,0.3);border-radius:3px;cursor:pointer;position:relative;}
.progress-bar {height:100%;border-radius:3px;width: 100%; float: none; overflow:hidden;}
.progress {height:100%;background:#e74c3c;width:0%;transition:width 0.1s ease;}
.time-display {color:white;font-size:14px;font-family:monospace;min-width:80px;}
/* 视频容器需要相对定位 */.video-container {position:relative;}
/* 确保控制条在暂停覆盖层之上 */.pause-overlay {z-index:15;}
/* 鼠标不在视频上时隐藏控制条 */.video-container:hover .custom-controls {opacity:1;}
.video-container:not(:hover) .custom-controls {opacity:0;}