@charset "utf-8";
/* ==========================================================================
   cn-refresh.css  —  Chinese-site refresh (2026-09)
   Load LAST on CN pages, after index.css.

   Why this file exists: the CN homepage shipped with ZERO <h1>-<h6>. Section
   titles were <div>/<p>, so crawlers had no way to tell what the page is
   about. We promoted them to real headings; the existing CSS targeted
   `.content_area_title p` and `.title` on non-heading elements, so every
   affected rule is MIRRORED here for the new tags.

   Nothing is overridden or deleted — selectors are only added alongside the
   originals, so reverting the HTML leaves the old rendering intact.
   ========================================================================== */

/* --- Section headings: mirror of `.content_area_title p` ---------------- */
.content_area_title h1,
.content_area_title h2 {
  color: #2a7ada;
  font-size: 36px;
  font-weight: normal;          /* matches the old <p> rendering exactly */
  line-height: normal;
}
.content_area_title2 h1,
.content_area_title2 h2 { color: #fff; }
.content_area_title3 h1,
.content_area_title3 h2 { color: #656565; }
.content_area_contact2022 .content_area_title h2 { font-size: 38px; }

@media screen and (max-width: 1100px) {
  .content_area_contact2022 .content_area_title h2 { font-size: 30px; }
}
@media screen and (max-width: 990px) {
  .content_area_title h1,
  .content_area_title h2 {
    display: inline;
    font-size: 24px;
    font-weight: bold;
  }
}
@media screen and (max-width: 640px) {
  .content_area_title h1,
  .content_area_title h2 { font-size: 1.32rem; }
}

/* --- Banner h1: mirror of `.swiper_banner .text_banner .pone` ----------
   The brand slide became <h1 class="pone pone2"> with its second line as a
   <span> (a <p> inside a heading is invalid). The span must behave like the
   block-level <p> it replaced on desktop, and go inline at 990px exactly as
   the original `.pone .pone` rule did. Both states live here so file order,
   not specificity guesswork, decides the winner. */
.swiper_banner .text_banner h1.pone {
  font-size: 42px;
  margin-bottom: 6px;
}
.swiper_banner .text_banner h1.pone2 { font-size: 38px; }
.swiper_banner .text_banner h1.pone > span.pone {
  display: block;
  font-size: 38px;
  font-weight: bold;
}
@media screen and (max-width: 990px) {
  .swiper_banner .text_banner h1.pone { font-size: 36px; }
  .swiper_banner .text_banner h1.pone > span.pone {
    display: inline;
    font-size: 36px;
  }
}
@media screen and (max-width: 640px) {
  .swiper_banner .text_banner h1.pone { font-size: 26px; }
  .swiper_banner .text_banner h1.pone > span.pone {
    display: block;
    font-size: 26px;
  }
}

/* --- Card titles promoted to h3 ----------------------------------------
   Every `.title` rule in index.css already sets its own font-size with a
   class-chain specificity that outranks the h1-h6 reset, so these need no
   mirroring. Only the inherited line-height differs: <p> gets
   `line-height: normal` from init.css, headings do not. */
.index_solve .title,
.index_adv .title,
.index_product_tabs .info .title,
.index_product_wrapper .title {
  line-height: normal;
}

/* --- Chinese body copy: looser leading than Latin ----------------------
   Han glyphs have no ascenders/descenders and a high ink-to-box ratio, so
   1.5 reads cramped where it would be comfortable in English. */
.content_area_title .ts,
.index_solve .back_card li,
.index_adv .back_card li,
.index_news_p {
  line-height: 1.75;
}

/* --- <picture> banners ---------------------------------------------------
   Replaces the old twin-<img> trick (.display_pc + .display_mobile, one of
   them hidden by CSS). Hidden images still download, so every phone visitor
   was paying for a desktop-sized banner it would never see. <picture> lets
   the browser pick exactly one source, and prefers WebP where supported. */
.banner_slide_img picture {
  display: block;
  width: 100%;
}
.banner_slide_img picture img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   MOBILE PASS  (<= 990px)
   Defects found by measuring the real rendered page at 375x812, not by
   eyeballing: each rule below fixes something that was measurably broken.
   ========================================================================== */
@media screen and (max-width: 990px) {

  /* 1. Sales-prompt box overflowed its own container.
        The box is 36px tall with line-height:36px, but the 14px string needs
        ~350px inside a 279px box, so it wrapped to a second line that spilled
        out over the page background. It is styled to read as an input
        placeholder, so clip it like one. */
  .jq_inp .input_btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* 2. Body text below the legible floor.
        `.tips` rendered at 10px. 12px is the practical minimum for Han
        characters, whose strokes blur out below that. */
  .tips,
  .index_solve .tips,
  .index_solve > .item-m .tips {
    font-size: 12px;
    line-height: 1.7;
  }

  /* 3. Event banner meta line broke mid-word ("浦东新/区").
        Shrinking one step lets the venue line fit without hyphen-less CJK
        mid-word breaks. */
  .index_banner_m_event .pthree,
  .index_banner_m_event .pthree p {
    font-size: 12px;
    line-height: 1.8;
  }

  /* 4. Tap targets below the 44px guideline (measured: 15-30px).
        Padding rather than height, so nothing reflows. */
  /* NOTE: do not set `display` here. common.css hides
     .header_extras_btn_callbtn / .header_extras_lang_t / .header_extras_flatbtn2
     at this breakpoint with the same specificity, and this file loads later —
     setting display would un-hide them and overflow the header. Pad instead. */
  .header_extras_flatbtn {
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 20px;
  }
  .beian a,
  .footer_nav_phone a {
    display: inline-block;
    padding: 6px 2px;
    min-height: 32px;
    line-height: 20px;
  }
}

/* 5. Injected chat widget (#fastgpt-chatbot-button) is positioned mid-screen
      at z-index 2147483647, covering the banner headline and CTA on phones.
      Park it bottom-right, clear of the content and of the iOS home bar. */
@media screen and (max-width: 990px) {
  #fastgpt-chatbot-button {
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    left: auto !important;
    width: 56px !important;
    height: 56px !important;
  }
}