:root {
  /* > 1280px 的基础字号 */
  /* 视频标题 */
  --font-title-base: 28px;
  /* 视频介绍标题 */
  --font-sub-title-base: 24px;
  /* 视频介绍文本 */
  --font-text-base: 20px;
  /* 视频团队 */
  --font-video-team-base: 18px;

  /* 当前使用的字号(默认为大屏基础字号) */
  --font-video-team: calc(var(--font-video-team-base) + var(--font-scale) * 1px);
}

[data-font-size="large"] {
  --font-scale: 2;
}

[data-font-size="small"] {
  --font-scale: -2;
}

@media (max-width: 1280px) {
  :root {
    /* 视频标题 */
    --font-title-base: 22px;
    /* 视频介绍标题 */
    --font-sub-title-base: 22px;
    /* 视频介绍文本 */
    --font-text-base: 18px;
    /* 视频团队 */
    --font-video-team-base: 16px;
  }
}

@media (max-width: 1024px) {
  :root {
    /* 视频标题 */
    --font-title-base: 20px;
    /* 视频介绍标题 */
    --font-sub-title-base: 18px;
    /* 视频介绍文本 */
    --font-text-base: 18px;
    /* 视频团队 */
    --font-video-team-base: 14px;
  }
}

/* 视频标题区域 */
.video-header .video-title {
  font-size: var(--font-title);
  font-weight: 600;
  color: #000000;
}


/* 视频播放器区域 */
.video-player-section {
  margin-top: 28px;
  width: 100%;
}

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 宽高比 (9/16 = 0.5625) */
  background: #000;
  overflow: hidden;
}

.main-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 视频详情区域 */
.video-details {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.video-details tbody td,
.video-details thead td {
  font-size: var(--font-text);
}

.video-details a {
  color: #156bbc;
}

/* 影片介紹部分 */
.video-description-section {
  width: 100%;
}

.description-text {
  margin-top: 24px;
  font-size: var(--font-text);
  font-weight: 400;
  color: #111111;
  line-height: 1.437;
}


/* 製作團隊部分 */
.production-team-section .team-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.team-member {
  display: flex;
  padding: 22px 15px;
  border-top: 1px solid #EEEEEE;
}

.team-member-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 60px;
}

.member-role {
  display: flex;
  align-items: center;
  min-width: 150px;
}

.role-title {
  font-size: var(--font-video-team);
  font-weight: 500;
  color: #444444;
  line-height: 1.8;
  font-style: italic;
}


.member-info .member-info-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.member-name,
.member-degree {
  font-size: var(--font-video-team);
  font-weight: 400;
  color: #000000;
}

.member-degree {
  color: #777777;
}

@media (max-width: 1024px) {
  .main-content {
    margin: 0 20px;
  }

  /* 成员 */
  .team-member {
    padding: 10px 0;
  }

  .team-member-content {
    gap: 16px;
  }

  .member-role {
    min-width: 74px;
  }
}