@charset "utf-8";
/* ==========================================================================
   whyCloudcc.html (为什么选择 CloudCC) 移动端适配 —— AI 科技风
   2026-09-16
   --------------------------------------------------------------------------
   基础: css/change.css (reset+通用) + css/footer.css (页脚/视频弹层)
   本页样式**几乎全部写在页面内联 <style> 里**(第 41~420 行), 因此本文件:
     1) 必须在 </head> 前引入 (晚于内联 style 加载, 同特异性即胜出)
     2) 关键属性一律 !important 兜底 (内联规则大量使用定值)

   依赖: css/mobile-hf.css (AI Design Tokens --ai-* + header/footer 适配)
         js/mobile-nav.js   (汉堡抽屉)

   --------------------------------------------------------------------------
   原桌面形态 → 移动端重排
   --------------------------------------------------------------------------
   1) banner: .banner_boxs_pc 500px 高 + 背景图 images/banner.png (1920×600 扁平
      风景插画, 无文字), 文案用 .leftBannerFont 绝对定位压在左侧 60% 处。
      → 移动端拆成「上插画带 + 下文案卡」:
        插画带高 = 31.25vw (精确 1920:600 比例, 图完整不裁),
        文案卡 static 化 + 负 22px 上移压住插画底沿, 形成现代 hero 圆角卡。
      主标题「为什么选择CloudCC」→ AI 渐变字 (需 block+max-content+auto 居中,
      否则 text-align:center 对 inline-block 失效)。
   2) 5 个 .saleChallenges_one: 桌面 .container 是 display:flex 左文右图,
      图片固定 560px。且 DOM 顺序不一致 (第 2/4 段图片在文字**前面**)。
      → 移动端 flex-direction:column + 图片 order:-1, 让 5 段统一成「图在上、
        文在下」, 不必改 HTML。
   3) .find_video: 桌面按钮 margin:15px 25px 15px 0 靠左。→ 移动端两枚并排胶囊
      (幽灵款「观看视频」+ 渐变款「了解完整销售云」)。
   4) .video_mask/.video_box (定义在 footer.css): 900×500 固定 + 绝对居中,
      窄屏必溢出。→ 92vw 宽 + aspect-ratio 16/9。注意第 4 段的 <video> 用了
      width="900" height="500" **属性**(不是 style), CSS 即可覆盖。
   5) .why_free_box 30 天试用 CTA: 灰底 + 深蓝方按钮 → AI 渐变卡 + 白胶囊按钮。
   6) 页脚 (.cloud_footer_box + footer.css) 由 mobile-hf.css 覆盖, 本文件不重复。

   作用域: 全部规则在 @media (max-width: 768px) 内 —— 桌面端零影响。
   ========================================================================== */

@media (max-width: 768px) {

  /* ---------- 0. 页面底色 ---------- */
  body,
  body.met-navfixed,
  body.ny-banner {
    background: var(--ai-bg-page, #f7f8fc) !important;
    /* 兜底: 万一某条内联规则把 body 撑宽 */
    overflow-x: hidden !important;
  }

  /* ---------- 1. banner: 插画带 + 文案卡 ---------- */
  .banner_met_16_2,
  .banner_met_16_2 .slick-slide {
    height: auto !important;
    min-height: 0 !important;
    background: none !important;
  }
  .imggBoxs.banner_boxs,
  .banner_boxs_pc {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    /* 1920×600 → 31.25vw, 配 background-size:100% auto 精确贴合, 图不裁不拉伸 */
    padding: 31.25vw 0 0 !important;
    background-image: url("../images/banner.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    box-sizing: border-box !important;
  }
  /* 文案卡: 从「压在插画上」改为「插画下方独立卡」 */
  .leftBannerFont {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: -22px 0 0 !important;
    padding: 24px 18px 28px !important;
    background: #ffffff !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -6px 24px rgba(5, 100, 245, 0.10) !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  /* 主标题: AI 渐变字 */
  .leftBannerFont span:nth-of-type(1) {
    display: block !important;
    width: -moz-max-content !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    font-size: clamp(21px, 6.6vw, 27px) !important;
    line-height: 1.32 !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    background: var(--ai-grad-text, linear-gradient(100deg, #0564F5 0%, #5b6cff 55%, #00c2d1 100%)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  /* 副标题 */
  .leftBannerFont span:nth-of-type(2),
  .leftBannerFont .leftBannerFontnth2 {
    display: block !important;
    padding-top: 12px !important;
    font-size: 13.5px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
    color: var(--ai-text-sub, #6b7280) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  /* 开始试用 → 渐变胶囊 */
  .leftBannerFont .GetFreeBtn {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 22px auto 0 !important;
    padding: 13px 0 !important;
    border: none !important;
    border-radius: var(--ai-radius-pill, 999px) !important;
    background: var(--ai-grad-soft, linear-gradient(115deg, #0564F5 0%, #4a7bff 50%, #06bcd4 100%)) !important;
    color: #ffffff !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: .5px !important;
    box-shadow: var(--ai-shadow-glow, 0 8px 28px rgba(5, 100, 245, 0.22)) !important;
  }

  /* ---------- 2. 五段卖点: 卡片流 ---------- */
  .why_cloudcc_content {
    display: block !important;
    /* 让下方卡片透气 */
    padding: 14px 0 0 !important;
  }
  .saleChallenges_one {
    padding: 0 12px 12px !important;
  }
  .saleChallenges_one .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 16px 20px !important;
    background: var(--ai-bg-card, #ffffff) !important;
    border: 1px solid rgba(5, 100, 245, 0.10) !important;
    border-radius: var(--ai-radius-card, 16px) !important;
    box-shadow: var(--ai-shadow-card, 0 6px 24px rgba(5, 100, 245, 0.10)) !important;
    box-sizing: border-box !important;
    gap: 14px !important;
  }
  /* 配图: 统一提到最上方 (第 2/4 段 DOM 顺序是图在前) */
  .saleChallenges_one_right_img {
    order: -1 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .saleChallenges_one_right_img img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(5, 100, 245, 0.08) !important;
  }
  /* 文字块 */
  .saleChallenges_one_content {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 小标题: 品牌深蓝 + 左侧渐变竖柱 (原 padding-top/margin-top 的 ±80px 是给
     PC 锚点跳转做补偿的, 移动端页面内无指向它的锚点链接, 清零更干净) */
  .saleChallenges_one_content h4 {
    position: relative !important;
    margin: 0 0 14px !important;
    padding: 0 0 0 14px !important;
    font-size: clamp(17px, 5vw, 20px) !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: var(--ai-deep, #19355e) !important;
  }
  .saleChallenges_one_content h4::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 18px !important;
    border-radius: 2px !important;
    background: var(--ai-grad-soft, linear-gradient(115deg, #0564F5 0%, #4a7bff 50%, #06bcd4 100%)) !important;
  }
  .saleChallenges_one_content ul.saleChallenges_one_list {
    margin: 0 !important;
    padding: 0 !important;
  }
  .saleChallenges_one_content ul.saleChallenges_one_list > li {
    list-style: none !important;
  }
  .saleChallenges_one_content p {
    font-size: 14px !important;
    line-height: 1.85 !important;
    margin: 0 0 12px !important;
    color: var(--ai-text, #1f2937) !important;
  }
  .saleChallenges_one_content p:last-child {
    margin-bottom: 0 !important;
  }
  /* 行首小方点 → 渐变小圆点 */
  .saleChallenges_one_content .boder-text {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--ai-grad-soft, linear-gradient(115deg, #0564F5 0%, #4a7bff 50%, #06bcd4 100%)) !important;
    margin-right: 9px !important;
    margin-bottom: 1px !important;
  }

  /* ---------- 3. 观看视频 / 了解详情: 双胶囊 ---------- */
  .find_video {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }
  .find_video button,
  .find_video .video_Btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 9px 22px !important;
    border: 1px solid rgba(5, 100, 245, 0.35) !important;
    border-radius: var(--ai-radius-pill, 999px) !important;
    background: #ffffff !important;
    color: var(--ai-blue, #0564F5) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
  }
  .find_video > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important;
    border-radius: var(--ai-radius-pill, 999px) !important;
    background: var(--ai-grad-soft, linear-gradient(115deg, #0564F5 0%, #4a7bff 50%, #06bcd4 100%)) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    box-shadow: var(--ai-shadow-press, 0 4px 14px rgba(5, 100, 245, 0.26)) !important;
  }

  /* ---------- 4. 视频弹层: 适配窄屏 ---------- */
  .video_mask {
    padding: 0 4vw !important;
    box-sizing: border-box !important;
  }
  .video_box {
    position: fixed !important;
    left: 4vw !important;
    top: 50% !important;
    width: 92vw !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    transform: translateY(-50%) !important;
    box-sizing: border-box !important;
  }
  .video_iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #000 !important;
  }
  .video_close {
    top: -44px !important;
    right: 0 !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* ---------- 5. 30 天免费试用 CTA: AI 渐变卡 ---------- */
  .why_free_box {
    padding: 6px 12px 26px !important;
    background: transparent !important;
  }
  .why_free_box .container {
    position: relative !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 26px 18px 28px !important;
    background: var(--ai-grad-soft, linear-gradient(115deg, #0564F5 0%, #4a7bff 50%, #06bcd4 100%)) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: var(--ai-shadow-glow, 0 8px 28px rgba(5, 100, 245, 0.22)) !important;
    box-sizing: border-box !important;
  }
  /* 右上角光斑, 呼应 mobile-hf.css 的玻璃卡语言 */
  .why_free_box .container::after {
    content: "" !important;
    position: absolute !important;
    right: -46px !important;
    top: -64px !important;
    width: 170px !important;
    height: 170px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 70%) !important;
    pointer-events: none !important;
  }
  .why_free_trial {
    position: relative !important;
    z-index: 1 !important;
  }
  .why_free_trial h4 {
    margin: 0 0 4px !important;
    font-size: 18.5px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
  }
  .why_free_trial .btn_box {
    text-align: center !important;
  }
  .why_tbody_tr_btn {
    display: block !important;
    width: 100% !important;
    max-width: 250px !important;
    margin: 20px auto 0 !important;
    padding: 13px 0 !important;
    border: none !important;
    border-radius: var(--ai-radius-pill, 999px) !important;
    background: #ffffff !important;
    color: var(--ai-deep, #19355e) !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    box-shadow: 0 6px 18px rgba(9, 30, 66, 0.16) !important;
    cursor: pointer !important;
  }

} /* end @media (max-width: 768px) */