/* 外部容器，限制字幕的显示区域 */
.marquee-container {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #222; /* 底部背景颜色 */
    color: #fff;           /* 字体颜色 */
    overflow: hidden;      /* 隐藏超出的文字 */
    white-space: nowrap;   /* 禁止换行 */
    border-top: 2px solid #555; /* 增加顶部边框 */
    padding: 5px 0;        /* 上下内边距 */
    z-index: 88;          /* 保证在 footer 之上 */
}

/* 滚动字幕 */
.marquee {
    display: inline-block;
    will-change: transform; /* 优化动画性能 */
    animation: scroll-left 29s linear infinite; /* 滚动动画 */
}


/* 动画效果 */
@keyframes scroll-left {
    from {
        transform: translateX(110%); /* 从右侧开始 */
    }
    to {
        transform: translateX(-110%); /* 滚动到左侧消失 */
    }
}

/* 悬停时暂停动画 */
.marquee:hover {
    animation-play-state: paused; /* 暂停动画 */
}

/* 链接样式 */
.marquee a {
    margin-right: 50px;  /* 每段文字的间距 */
    font-size: 16px;     /* 字体大小 */
    font-weight: bold;   /* 加粗 */
    color: #fff;         /* 链接颜色 */
    text-decoration: none; /* 去掉下划线 */
    transition: color 0.3s; /* 悬停时的颜色变化 */
}

/* 悬停时链接样式 */
.marquee a:hover {
    color: #00bfff; /* 鼠标悬停时的高亮颜色 */
}

/* Footer 的预留空间 */
footer {
    padding-bottom: 36px; /* 留出滚动字幕的高度 */
}

.video-container {
    width: 100%;
    height: 56.25vw; /* 16:9比例下的高度 (9/16 = 0.5625) */
    max-height: 70vh; /* 防止在宽屏下过高 */
    position: relative;
    margin: 0 auto;
    background: #000;
}