/* 清除默认样式 设置全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: #141414;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  cursor: pointer;
}

html {
  scroll-behavior: smooth;
}

/* 滚动条样式 */
/* 滚动条轨道 */
::-webkit-scrollbar {
  width: 8px; 
}
/* 背景 */
::-webkit-scrollbar-track {
  background-color: #141414; 
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #727272; 
  border-radius: 4px; 
}
/* 滚动条按钮（ */
::-webkit-scrollbar-button {
  display: none;
}

/* 核心：页面淡入过渡动画 */
.page-fade {
  /* 初始状态：透明 + 防止白屏闪现 */
  opacity: 0;
  /* 过渡动画：1秒淡入，加速函数平缓 */
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 页面加载完成后，浏览器自动触发 :visited ？不，用 :target 或直接依赖浏览器渲染顺序 */
/* 优化方案：利用浏览器加载DOM后自动渲染的特性，让body在加载完成后显示 */
/* 关键：将动画触发时机绑定到页面加载完成（无需JS，CSS原生支持） */
.page-fade {
  animation: fadeIn 0.8s ease-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 可选：禁止页面跳转时的滚动闪烁 */
html {
  scroll-behavior: smooth; /* 平滑滚动（如果页面有锚点） */
  overflow-x: hidden;
}

@media screen and (min-width: 2100px) and (min-height: 100px) {
  /* 让指定元素向右偏移40px并保持对齐 */
  .box11, .box2, .shengming {
    margin-left: auto !important;
    margin-right: auto !important;
    left: 40px !important; /* 整体向右偏移40px */
    right: auto !important;
    max-width: 1734px; /* 保持原有宽度 */
    position: relative; /* 确保left属性生效 */
  }
  .box3, .box22 {
    margin-left: auto !important;
    margin-right: auto !important;
    left: 10px !important; /* 整体向右偏移40px */
    right: auto !important;
    max-width: 1734px; /* 保持原有宽度 */
    position: relative; /* 确保left属性生效 */   
  }
  
  /* 统一对齐关键元素 */
  .box-4 {
    /* 基于box2的右侧对齐并右移40px */
    right: calc(50% - 1734px/2 - 40px) !important;
    width: 708px;
  }

  .video-info-box {
    /* 基于box2的左侧对齐并右移40px */
    left: calc(50% - 1734px/2 + 40px) !important;
    width: 820px;
  }

  /* 调整box2内部元素适应偏移后的布局 */
  .box2-1 {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* 调整导航栏对齐 */
  .box11-1, .box22-1 {
    margin-left: -22px !important;
    padding-left: 0 !important;
  }
  .box22-1 {
    margin-left: 28px !important;
    padding-left: 0 !important;
  }
}