.w-60 {
      width: 60%;
    }
   .logo,
    .nav-menu .nav-item a:before,
    .dropdown-menu {
      background-color: #461cba;
    }

    .dropdown-item:hover {
      background-color: #3e1b9e;
    }

    /* 核心工具类：整屏高度（Bootstrap 无现成类，自定义） */
    .screen-full {
      height: 100vh;
      min-height: 500px;
   margin-top: 30px;
    }
@media (max-width:576px){.screen-full{height: auto;}}
    /* 初始状态：隐藏（透明+位移，为动画做准备） */
    .init-hidden {
      opacity: 0;
      transform: translateZ(0);
      /* 开启硬件加速，优化动画 */
    }

    /* 背景图样式（覆盖、居中、不重复） */
    .bg-cover-center {
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
    }

    .bg-cover-right {
      background-size: cover;
      background-position: right bottom;
      background-repeat: no-repeat;
    }

    /* 元素样式细化（补充 Bootstrap 未覆盖的细节） */
    .relative {
      position: relative;
    }

    .absolute {
      position: absolute;
    }

    .inset-0 {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .z-0 {
      z-index: 0;
    }

    .z-10 {
      z-index: 10;
    }


    .text-lg-custom {
      font-size: 18px;
    }

    .text-lg-custom {
      font-size: 18px;
    }

    .text-xl-custom {
      line-height: 1.8;
    }

    .text-2xl-custom {
      font-weight: 700;
      margin-bottom: 8px;
    }

    .text-3xl-custom {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .mt-2-custom {
      margin-top: 8px;
    }

    .mb-8-custom {
      margin-bottom: 32px;
    }

    .object-cover {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    /* 背景遮罩层 */
    .bg-mask {
      background-color: rgba(0, 0, 0, 0.3);
    }

    /* 动画定义（完全保留原有逻辑） */
    /* 背景图向上渐显 */
    @keyframes fadeUpBg {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 左侧元素普通渐显 */
    @keyframes fadeInNormal {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* 右侧元素自上而下渐显 */
    @keyframes fadeDownItem {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 动画工具类（通过JS添加触发） */
    .fade-up-bg {
      animation: fadeUpBg 1.5s ease-out forwards;
    }

    .fade-in-normal {
      animation: fadeInNormal 1s ease-out forwards;
    }

    .fade-down-item {
      animation: fadeDownItem 0.8s ease-out forwards;
    }



    /* 左侧图片从左滑入渐显 */
    @keyframes fadeInFromLeft {
      from {
        opacity: 0;
        transform: translateX(-50px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* 右侧图片从右滑入渐显 */
    @keyframes fadeInFromRight {
      from {
        opacity: 0;
        transform: translateX(50px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* 从下往上渐显（普通速度） */
    @keyframes fadeInFromBottom {
      from {
        opacity: 0;
        transform: translateY(50px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 从下往上渐显（稍快速度） */
    @keyframes fadeInFromBottomFast {
      from {
        opacity: 0;
        transform: translateY(50px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 向上渐显（右侧下部元素） */
    @keyframes fadeInUpNormal {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 动画工具类（新增） */
    .fade-in-left {
      animation: fadeInFromLeft 1s ease-out forwards;
    }

    .fade-in-right {
      animation: fadeInFromRight 1s ease-out forwards;
    }

    .fade-in-bottom {
      animation: fadeInFromBottom 1.2s ease-out forwards;
    }

    .fade-in-bottom-fast {
      animation: fadeInFromBottomFast 0.8s ease-out forwards;
      /* 时长更短=速度更快 */
    }

    .fade-in-up {
      animation: fadeInUpNormal 1s ease-out forwards;
    }

    /* 原有动画定义（保留） */
    @keyframes fadeUpBg {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInNormal {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes fadeDownItem {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-up-bg {
      animation: fadeUpBg 1.5s ease-out forwards;
    }

    .fade-in-normal {
      animation: fadeInNormal 1s ease-out forwards;
    }

    .fade-down-item {
      animation: fadeDownItem 0.8s ease-out forwards;
    }

    /* 后续屏幕样式 */
    .bg-gray-800 {
      background-color: #1f2937;
    }

    .bg-gray-700 {
      background-color: #374151;
    }

    .flex-center {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #ffffff;
    }
    section{margin-bottom: 1rem;}
    /* 【新增】第二屏专属样式 */
    /* 第二屏上部高度（占整屏50%左右，响应式适配） */
    .screen-part-top {
      min-height: 50vh;
      padding: 5rem 0;
      background-position: right bottom;
    }

    /* 第二屏下部高度 */
    .screen-part-bottom {
      min-height: 50vh;
      padding: 4rem 0;
      background: #fff url(/images/qczy/qc-8.png) no-repeat right bottom;
      position: relative;
    }

    /* 3列块样式 */
    .box-border-custom {
      border: 1px solid #461cba;
      height: 100%;
      text-align: center;
    }

    .box-border-custom p {
      padding: .5rem 0;
    }

    .bg-box-custom {
      background-color: #461cba;
      color: #ffffff;
      padding: 0.5rem 1rem;
      margin-top: 0.5rem;
      text-align: center;
    }

    /* 底部文字下划线样式 */
    .text-underline-custom {
      text-decoration: underline;
      text-decoration-color: #ffe41f;
      text-underline-offset: 4px;
      color: #461cba;
      margin: 1rem 0;
      /* 拉大与上方间距 */
      text-align: right;
      font-size: 18px;
      font-weight: 600;
    }

    #qc-11-3 {
      border: 10px solid #FFF;
    }

    .t3 {
      background: url(/images/qczy/t-3.png) no-repeat left bottom;
      padding-bottom: 15px;
      font-size: 20px;
      color: #461cba;
      text-align: left;
      font-weight: 600;
      width: 100%;
      letter-spacing: .15em;
    }

    @media (max-width:768px) {
      #third-screen {
        padding-bottom: 300px;
      }
#first-screen{
        padding-bottom: 400px;
      }

    }

    /* 【新增】动画定义（第二屏专属） */
    /* 左侧图片从左滑入渐显 */
    @keyframes fadeInFromLeft {
      from {
        opacity: 0;
        transform: translateX(-50px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* 右侧图片从右滑入渐显 */
    @keyframes fadeInFromRight {
      from {
        opacity: 0;
        transform: translateX(50px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* 从下往上渐显（普通速度） */
    @keyframes fadeInFromBottom {
      from {
        opacity: 0;
        transform: translateY(50px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 从下往上渐显（稍快速度） */
    @keyframes fadeInFromBottomFast {
      from {
        opacity: 0;
        transform: translateY(50px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 第二屏 */
    @keyframes fadeInFromLeft {
      from {
        opacity: 0;
        transform: translateX(-50px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fadeInFromRight {
      from {
        opacity: 0;
        transform: translateX(50px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fadeInFromBottom {
      from {
        opacity: 0;
        transform: translateY(50px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInFromBottomFast {
      from {
        opacity: 0;
        transform: translateY(50px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 通用向上渐显 (用于第二屏右侧和第三屏) */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 【新增/修改】第三屏专属动画 */
    /* 第三屏背景：柔和渐显（无位移，缓冲效果） */
    @keyframes fadeInBgSoft {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* 第三屏内容：自上而下渐显（轻微向下位移→归位，模拟"载入下落"） */
    @keyframes fadeInFromTop {
      from {
        opacity: 0;
        transform: translateY(-30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 动画工具类 */
    .fade-up-bg {
      animation: fadeUpBg 1.5s ease-out forwards;
    }

    .fade-in-normal {
      animation: fadeInNormal 1s ease-out forwards;
    }

    .fade-down-item {
      animation: fadeDownItem 0.8s ease-out forwards;
    }

    .fade-in-left {
      animation: fadeInFromLeft 1s ease-out forwards;
    }

    .fade-in-right {
      animation: fadeInFromRight 1s ease-out forwards;
    }

    .fade-in-bottom {
      animation: fadeInFromBottom 1.2s ease-out forwards;
    }

    .fade-in-bottom-fast {
      animation: fadeInFromBottomFast 0.8s ease-out forwards;
    }

    .fade-in-up {
      animation: fadeInUp 1s ease-out forwards;
    }
    .third-screen-show {
      animation: fadeInBgSoft 1.5s ease-out forwards !important;
    }
       .fade-in-from-top {
      animation: fadeInFromTop 1s ease-out forwards;
    }
    .q3-r{width: 60%;}
    .q2-l{width: 75%;}
    @media (max-width:576px){ .q2-l,.q3-r{width: 100%;}}

     @media (max-width:768px) {
      #third-screen {
        padding-bottom: 160px;
      }
      .w-60 {
        width: 90%; /* 移动端调整宽度，避免溢出 */
      }
      .fourth-title {
        font-size: 22px; /* 移动端标题缩小，避免换行过多 */
      }
      .fourth-img-wrapper {
        max-width: 95%; /* 移动端图片占比更大，提升视觉效果 */
      }
    }

    /* 【新增】第四屏专属样式 */
    #fourth-screen {
      min-height: 100vh; /* 整屏高度，和第一屏保持一致 */
      padding: 6rem 2rem; /* 上下内边距，左右自适应 */
      background: #f9fafb url(/images/qczy/bg-4.jpg) no-repeat;background-size: 100% auto; /* 浅灰背景，提升可读性 */
    }

    /* 第四屏标题样式（和前几屏标题风格统一） */
    .fourth-title {
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 2rem;
      text-align: center;
      letter-spacing: 0.1em;
    }

    /* 第四屏图片容器（限制最大宽度，避免变形） */
    .fourth-img-wrapper {
      max-width: 80%;
      margin: 0 auto;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
     /* 【新增】第五屏专属样式 */
    #fifth-screen {
      overflow: hidden;
    }
    /* 顶部标题区 */
    .fifth-top {
      background-color: #5728d7;
      padding: 4rem 0;
      position: relative;
      display: flex;
      align-items: center;
    }
    .fifth-top-bg {
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      background: url(/images/qczy/bg-17.jpg) no-repeat center right;
      background-size: cover;
      z-index: 0;
    }
    .fifth-top .container {
      position: relative;
      z-index: 10;
    }
    .fifth-title-img {
      max-width: 100%;
      height: auto;
    }

    /* 下方图片区 */
    .fifth-bottom {
      padding: 5rem 0;
      background-color: #fff;
    }
    .fifth-img-col {
      display: flex;
      flex-direction: column;
      gap: .25rem;
      align-items: center;
    }
    .fifth-img-col img {
      max-width: 80%;
      height: auto;
    }

    /* 响应式适配 */
    @media (max-width: 768px) {
      #third-screen { padding-bottom: 160px; }
      .w-60 { width: 90%; }
      .fourth-title { font-size: 22px; }
      .fourth-img-wrapper { max-width: 95%; }
      
      /* 第五屏移动端：隐藏右侧背景图，标题居中 */
      .fifth-top-bg {
        display: none;
      }
      .fifth-title-img {
        margin: 0 auto;
        display: block;
      }
      .fifth-img-col img {
        max-width: 95%;
      }
    }