/* 响应式样式 */

/* 移动端导航栏 */
.content-nav-wap {
  display: none;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: auto;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  z-index: 20;
  background-color: #edbf6b;
  overflow: hidden;
  /* 优化动画性能 */
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  a {
    text-decoration: none;
  }
  span {
    font-family: "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei";
    display: block;
    color: #fff;
    width: 100%;
    padding: 10px 0px;
    text-align: center;
    transition: background-color 0.2s ease;
  }
  span:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

/* 显示状态 */
.content-nav-wap.show {
  display: flex;
  animation: dropdownShow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 隐藏状态 - 保持 display: flex 以便动画可见 */
.content-nav-wap.hide {
  display: flex;
  animation: dropdownHide 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

/* ==================== 移动端响应式 (Mobile) ==================== */
@media (max-width: 767.98px) {
  .contentA,
  .contentB,
  .contentC,
  .contentD {
    padding: 1rem 0 !important;
  }

  .contentB,
  .contentC,
  .contentD {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /* 动画类 - 每次添加时都会重新触发动画 */
  .contentB.animate-in,
  .contentC.animate-in,
  .contentD.animate-in {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  /* 静态显示类 - 向上滚动时可见但不触发动画 */
  .contentB.visible,
  .contentC.visible,
  .contentD.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* 移除动画类和静态显示类时重置状态 */
  .contentB:not(.animate-in):not(.visible),
  .contentC:not(.animate-in):not(.visible),
  .contentD:not(.animate-in):not(.visible) {
    opacity: 0;
    transform: translateY(50px);
  }
  .xiala {
    display: block;
  }
  .content-body {
    width: 90%;
    margin: 0 auto !important;
  }
  .content-title {
    font-size: var(--font-size-lg);
    text-transform: uppercase;
    cursor: default !important; /* 移除指针样式 */
    pointer-events: none; /* 禁用点击 */
  }

  /* 禁用标题的悬停效果 */
  .content-title:hover {
    color: #333 !important; /* 保持原色 */
    transform: none !important; /* 移除位移 */
    font-size: var(--font-size-lg) !important; /* 保持原字体大小 */
  }

  .content-title-container:hover::after {
    width: 25% !important; /* 保持原宽度 */
    background-color: #f2a501 !important; /* 保持原色 */
    box-shadow: calc(100% + 4px) 0 0 0 #1665dc !important; /* 保持原色 */
  }

  .content-title-container::after {
    width: 25%;
  }
  .content-nav {
    display: none;
  }
  .contentA-body,
  .contentB-body,
  .contentC-body,
  .contentD-body {
    width: 98%;
  }
  .contentA-body {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .contentA-left {
      width: 90%;
      margin: 0 auto;
    }
    .contentA-left-content {
      height: 25% !important;
    }
    .contentA-left-content p {
      font-size: var(--font-size-sm);
      text-align: left;
    }
    .contentA-right {
      margin: 1rem auto;
      width: 90%;
    }
    .contentA-right > li {
      align-items: center;
    }
    .contentA-right > li p {
      font-size: var(--font-size-sm);
    }
  }
  .contentB-body {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    perspective: none; /* 移除3D透视效果 */
  }

  /* 移动端：禁用翻转效果，p标签覆盖在图片上层 */
  .contentB-body > li {
    width: 90%;
    padding-bottom: 60% !important; /* 恢复 padding-bottom 保持比例 */
    height: 0 !important;
    perspective: none !important;
  }

  .contentB-body > li a {
    position: absolute !important; /* 绝对定位 */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    transform: none !important; /* 移除翻转 */
    transform-style: flat !important;
  }

  .contentB-body > li:hover a {
    transform: none !important; /* 禁用悬停翻转 */
  }

  .contentB-body > li .contentB-item-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    backface-visibility: visible !important;
    transform: none !important;
  }

  .contentB-body > li .contentB-item-content {
    position: absolute !important;
    top: auto !important; /* 覆盖 PC 端的 top: 0 */
    bottom: 0 !important; /* 定位在底部 */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 20% !important; /* 占据底部20%高度 */
    background: rgba(0, 0, 0, 0.6) !important; /* 半透明黑色背景 */
    transform: none !important; /* 覆盖 PC 端的 transform */
    backface-visibility: visible !important;
    box-sizing: border-box !important;
    z-index: 2 !important; /* 确保在图片上层 */
    display: flex !important;
    align-items: center !important; /* 垂直居中 */
    justify-content: flex-start !important; /* 文字左对齐 */
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  .contentB-body > li .contentB-item-content p {
    text-align: left;
    padding: 0;
    font-size: 12px;
    color: #fff !important;
    margin: 0 !important;
    line-height: 1.8; /* 增加行高，让文字更舒适 */
    min-height: auto;
  }
  .contentC-body {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    > li {
      width: 90%;
    }
    > li .contentC-item-content p {
      font-size: var(--font-size-sm);
    }
  }
  .contentC-body > li .contentC-item-content {
    padding: 0.5rem !important;
  }
  .contentD-body {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    > li {
      width: 90%;
    }
  }
}

/* ==================== 平板端响应式 (Tablet) ==================== */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --font-size-md: var(--font-size-sm);
  }

  /* 禁用标题的悬停和点击效果 */
  .content-title {
    cursor: default !important; /* 移除指针样式 */
    pointer-events: none; /* 禁用点击 */
  }

  .content-title:hover {
    color: #333 !important; /* 保持原色 */
    transform: none !important; /* 移除位移 */
    font-size: var(--font-size-xl) !important; /* 保持原字体大小 */
  }

  .content-title-container:hover .content-line {
    width: 20% !important; /* 保持原宽度 */
  }

  .content-title-container:hover .content-line::before {
    width: 49% !important; /* 保持原宽度 */
    background-color: #f2a501 !important; /* 保持原色 */
    box-shadow: none !important; /* 移除阴影 */
  }

  .content-title-container:hover .content-line::after {
    width: 49% !important; /* 保持原宽度 */
    background-color: #1665dc !important; /* 保持原色 */
    box-shadow: none !important; /* 移除阴影 */
  }

  .content-nav {
    gap: 0rem;
  }
  .contentA-body {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .contentA-left {
      width: 90%;
      margin: 0 auto;
    }
    .contentA-right {
      margin: 1rem auto;
      width: 90%;
    }
  }
  .contentB-body {
    perspective: none; /* 移除3D透视效果 */
  }

  /* 平板端：禁用翻转效果，p标签覆盖在图片上层 */
  .contentB-body > li {
    padding-bottom: 25% !important; /* 恢复 padding-bottom 保持比例 */
    height: 0 !important;
    perspective: none !important;
  }

  .contentB-body > li a {
    position: absolute !important; /* 绝对定位 */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    transform: none !important; /* 移除翻转 */
    transform-style: flat !important;
  }

  .contentB-body > li:hover a {
    transform: none !important; /* 禁用悬停翻转 */
  }

  .contentB-body > li .contentB-item-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    backface-visibility: visible !important;
    transform: none !important;
  }

  .contentB-body > li .contentB-item-content {
    position: absolute !important;
    top: auto !important; /* 覆盖 PC 端的 top: 0 */
    bottom: 0 !important; /* 定位在底部 */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 40% !important; /* 占据底部20%高度 */
    background: rgba(0, 0, 0, 0.6) !important; /* 半透明黑色背景 */
    transform: none !important; /* 覆盖 PC 端的 transform */
    backface-visibility: visible !important;
    padding: 0.75rem 1rem !important;
    box-sizing: border-box !important;
    z-index: 2 !important; /* 确保在图片上层 */
    display: flex !important;
    align-items: center !important; /* 垂直居中 */
    justify-content: flex-start !important; /* 文字左对齐 */
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  .contentB-body > li .contentB-item-content p {
    font-size: 12px !important;
    color: #fff !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .contentC-item-content {
    padding: 0 !important;
  }
}