.mediaVisual img,.mediaVisual video{width:100%;height:100%;object-fit:cover}
.mediaVisual.has-course-media{aspect-ratio:16/9;background:#102f29}
.mediaBar .media-badge{font-size:11px;color:#176957;background:#e7f4ef;border-radius:99px;padding:5px 8px}
.video-note{position:absolute;left:14px;bottom:14px;background:#113b33e6;color:#fff;border-radius:9px;padding:8px 11px;font-size:12px}
.explain-film{position:fixed;inset:0;background:#071d19eb;z-index:50;display:grid;place-items:center;padding:24px}
.film-stage{width:min(960px,96vw);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 80px #0008}
.film-visual{position:relative;aspect-ratio:16/9;background:#102f29;overflow:hidden}.film-visual img{width:100%;height:100%;object-fit:cover;animation:filmZoom 24s linear both}
.film-caption{position:absolute;left:5%;right:5%;bottom:6%;background:#092c25e8;color:white;padding:16px 18px;border-radius:12px;font-size:18px;line-height:1.45}
.film-controls{display:flex;gap:10px;align-items:center;padding:13px 16px}.film-controls progress{flex:1}.film-controls button{border:0;border-radius:9px;padding:9px 12px}.film-close{background:#e7f4ef}.film-replay{background:#176957;color:#fff}
@keyframes filmZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(max-width:600px){.film-caption{font-size:14px;padding:11px}.explain-film{padding:8px}}