@charset "utf-8";

/* Shared visual baseline for the mirrored Feichuang CRM site. */
html,
body {
  font-family: "Alibaba PuHuiTi 3", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
}

/* Article hierarchy is intentionally shared across FAQ, release notes and manuals. */
.newsDetail > h1.title {
  font-size: 32px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

.newsDetail .richContent strong,
.newsDetail .richContent b,
.newsDetail .richContent h1,
.newsDetail .richContent h2,
.newsDetail .richContent h3 {
  font-weight: 600 !important;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  /* The legacy visual-builder marketing pages cannot reflow safely without
     rebuilding every absolute module. Scale the complete canvas as a safe
     mobile fallback so no navigation, title or CTA is permanently clipped. */
  body:not(.fc-community-page):not(:has(.newsDetail)) #web {
    width: 1250px !important;
    min-width: 1250px !important;
    max-width: 1250px !important;
    margin: 0 !important;
    left: 0 !important;
    transform: none !important;
    transform-origin: top left !important;
    zoom: calc(100vw / 1250px);
  }

  body:not(.fc-community-page):not(:has(.newsDetail)) .s_suspendserv_wrap,
  body:not(.fc-community-page):not(:has(.newsDetail)) #siteBackToTop_small_box {
    display: none !important;
  }

  /* Content pages receive a true single-column mobile layout. */
  body:has(.newsDetail) #web,
  body:has(.newsDetail) #webTop,
  body:has(.newsDetail) #absTopForms,
  body:has(.newsDetail) #webHeader,
  body:has(.newsDetail) #fk-webHeaderZone,
  body:has(.newsDetail) #webContainer,
  body:has(.newsDetail) #absForms,
  body:has(.newsDetail) #absBottomForms,
  body:has(.newsDetail) #webFooter,
  body:has(.newsDetail) .webNavDefault,
  body:has(.newsDetail) .webHeader .headerNavClass,
  body:has(.newsDetail) .navMainContent,
  body:has(.newsDetail) .fullmeasureContent {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
  }

  body:has(.newsDetail) #webHeaderTable,
  body:has(.newsDetail) #webHeaderContent,
  body:has(.newsDetail) #webHeaderContentBg {
    width: 100% !important;
    height: 56px !important;
  }

  body:has(.newsDetail) #fk-webHeaderZone {
    height: 56px !important;
  }

  body:has(.newsDetail) #fk-webHeaderZone > .formStyle81,
  body:has(.newsDetail) #navV2,
  body:has(.newsDetail) .s_suspendserv_wrap,
  body:has(.newsDetail) #siteBackToTop_small_box,
  body:has(.newsDetail) .containerFormsLeft,
  body:has(.newsDetail) .containerFormsRight {
    display: none !important;
  }

  body:has(.newsDetail) #fk-webHeaderZone > .formStyle79 {
    left: 16px !important;
    top: 14px !important;
  }

  body:has(.newsDetail) .webContainerTable,
  body:has(.newsDetail) .container,
  body:has(.newsDetail) .containerMiddle,
  body:has(.newsDetail) .containerMiddleCenter,
  body:has(.newsDetail) .containerForms,
  body:has(.newsDetail) .containerFormsMiddle,
  body:has(.newsDetail) .containerFormsCenter,
  body:has(.newsDetail) #containerFormsCenter,
  body:has(.newsDetail) #centerTopForms,
  body:has(.newsDetail) #module12,
  body:has(.newsDetail) .formMiddle12,
  body:has(.newsDetail) .formMiddleCenter12,
  body:has(.newsDetail) .formMiddleContent12 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Some release-note templates restore a fixed article width after the
     shared stylesheet has loaded. The extra #webContainer scope keeps the
     mobile column authoritative without changing desktop article widths. */
  body:has(.newsDetail) #webContainer #containerFormsCenter,
  body:has(.newsDetail) #webContainer #centerTopForms,
  body:has(.newsDetail) #webContainer #module12,
  body:has(.newsDetail) #webContainer .formMiddle12,
  body:has(.newsDetail) #webContainer .formMiddleCenter12,
  body:has(.newsDetail) #webContainer .formMiddleContent12,
  body:has(.newsDetail) #webContainer .newsDetail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body:has(.newsDetail) #webContainer .containerFormsMiddle,
  body:has(.newsDetail) #webContainer .containerFormsMiddle > tbody,
  body:has(.newsDetail) #webContainer .containerFormsMiddle > tbody > tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }

  body:has(.newsDetail) .newsDetail {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 84px 20px 48px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  body:has(.newsDetail) .newsDetail > h1.title {
    width: auto !important;
    margin: 0 0 12px !important;
    font-size: 30px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.newsDetail) #webContainer .newsDetail > h1.title {
    width: auto !important;
    max-width: 100% !important;
    font-size: 30px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.newsDetail) .newsInfoWrap,
  body:has(.newsDetail) .line1,
  body:has(.newsDetail) .line2,
  body:has(.newsDetail) .middlePanel,
  body:has(.newsDetail) .richContent,
  body:has(.newsDetail) .richContent0,
  body:has(.newsDetail) .jz_fix_ue_img {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:has(.newsDetail) .richContent {
    font-size: 16px !important;
    line-height: 1.75 !important;
    overflow-wrap: anywhere !important;
  }

  body:has(.newsDetail) .richContent p,
  body:has(.newsDetail) .richContent div,
  body:has(.newsDetail) .richContent li {
    max-width: 100% !important;
    line-height: 1.75 !important;
    box-sizing: border-box !important;
  }

  body:has(.newsDetail) .richContent img,
  body:has(.newsDetail) .newsDetail img,
  body:has(.newsDetail) .jz_fix_ue_img img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 16px auto !important;
    object-fit: contain !important;
  }

  body:has(.newsDetail) .richContent table,
  body:has(.newsDetail) .newsDetail table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }

  body:has(.newsDetail) #fk-webFooterZone {
    display: none !important;
  }

  body:has(.newsDetail) #webFooterTable,
  body:has(.newsDetail) #webFooter,
  body:has(.newsDetail) #footer {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  body:has(.newsDetail) #footer .footerContent {
    padding: 24px 16px !important;
    box-sizing: border-box !important;
  }
}


/* Align every customer case detail page with the shared desktop header grid. */
@media (min-width: 1051px) {
  html body.fc-customer-case-page #fullmeasureTopForms .fullmeasureContent,
  html body.fc-customer-case-page #fullmeasureBottomForms .fullmeasureContent {
    position: relative !important;
    left: 28px !important;
  }
}
