@charset "utf-8";
/*!
 * m.css —— Gystack 主题 M 端（≤ 960px）统一移动端样式层
 *
 * 加载位置：header.php 所有页面 CSS 之后（含各 $gy_css_set 分支），
 * 因此这里的规则拥有最高优先级，用于补齐原站静态模板在手机端的缺失、
 * 以及修正 activity / enterprise / download 等分支没有移动端 CSS 的问题。
 *
 * 目录
 *   1. 基础与防溢出
 *   2. 顶部导航（手机条 / Logo / 汉堡按钮）
 *   3. 抽屉菜单（M 端主导航）
 *   4. 通用板块与容器
 *   5. 文档页（分类列表 / 文章内页 / 侧栏 / 分页 / 搜索头）
 *   6. 首页
 *   7. 活动页 / 企业页 / 下载页 / 站点地图
 *   8. 页脚（手机块）
 *   9. 悬浮件（在线客服 / 返回顶部）
 *  10. ≤ 480px 再收紧
 */

/* ==========================================================================
   1. 基础与防溢出
   ========================================================================== */
html,
body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* 顶部固定导航条 50px，正文整体下移，避免被压住 */
body {
  padding-top: 50px;
}

img,
video,
canvas {
  max-width: 100%;
  height: auto;
}

iframe,
embed,
object {
  max-width: 100%;
}

/* 表单控件 ≥16px，规避 iOS 聚焦自动放大 */
input,
select,
textarea {
  font-size: 16px;
}

/* 所有可能写死宽度的外层容器统一收口 */
.current,
.container,
.pageBody,
.pageBodyBox,
.docPage,
.docIndex,
.promotion,
.dlPage,
.coupon,
.aboutPage,
.product,
footer {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.container {
  padding-left: 12px;
  padding-right: 12px;
}

/* 表格一律允许横向滚动，不撑破页面 */
table {
  max-width: 100%;
}

/* ==========================================================================
   2. 顶部导航
   —— 原站只给 index / about / product / category 等分支配了 header_1/2.css，
      activity / enterprise / download 分支没有，这里统一兜底
   ========================================================================== */
.current {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  padding: 0;
  min-width: 0;
  background: #181e2a;
  z-index: 1500; /* 需高于 .services(999)，否则抽屉被悬浮客服盖住 */
}

.current:hover {
  background: #181e2a;
}

/* 桌面导航条与语言栏隐藏，只留手机条 */
.current .currentBody,
.current .head-content,
.current .language {
  display: none !important;
}

.current .phoneBody {
  display: block !important;
  height: 50px;
}

.current .phoneBody > .container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 14px;
}

.current .phoneBody .logo {
  width: 126px;
  height: 26px;
  margin: 0;
}

.current .phoneBody .logo .headerLogo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.current .phoneBody .phoneUser {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}

.current .phoneBody .phoneUser > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.phoneUser a,
.phoneUser span i {
  margin: 0;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}

/* ==========================================================================
   3. 抽屉菜单（M 端主导航）
   —— 结构：.el-drawer__wrapper > .el-drawer__container > .el-drawer
      导航由 gystack.js 从 .itemNav 克隆并挂上 .gy-drawer-nav
   ========================================================================== */
.el-drawer__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  margin: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .28s ease;
}

.el-drawer__wrapper.is-open {
  opacity: 1;
}

.el-drawer__container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

.el-drawer,
.el-drawer.rtl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 84% !important;
  max-width: 360px;
  height: 100%;
  background: #181e2a;
  box-shadow: none;
  animation: none !important;
  transform: translateX(100%);
  transition: transform .28s ease;
}

.el-drawer__wrapper.is-open .el-drawer {
  transform: translateX(0);
}

/* 抽屉标题栏 */
.el-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 16px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.el-drawer__header span[role="heading"] {
  font-size: 16px;
  color: #fff;
}

.el-drawer__header span[role="heading"]::before {
  content: "导航菜单";
}

.el-drawer__close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* 导航列表本体：可滚动 */
.el-drawer .itemNav.gy-drawer-nav {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  margin: 0;
  padding: 6px 0 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.el-drawer .gy-drawer-nav .item {
  display: block;
  width: 100%;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.el-drawer .gy-drawer-nav .item > .itemTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.el-drawer .gy-drawer-nav .item > .itemTitle i {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  transition: transform .25s ease;
}

.el-drawer .gy-drawer-nav .item.is-open > .itemTitle {
  color: var(--gy-primary-light, #8dbfe8);
}

.el-drawer .gy-drawer-nav .item.is-open > .itemTitle i {
  transform: rotate(180deg);
}

/* 二级面板：默认收起，点击展开（覆盖 gy-wp.css 的全部展开） */
.el-drawer .gy-drawer-nav .item > .menuBody {
  display: none !important;
  position: static;
  width: 100%;
  box-shadow: none;
  background: rgba(255, 255, 255, .04);
}

.el-drawer .gy-drawer-nav .item.is-open > .menuBody {
  display: block !important;
}

.el-drawer .gy-drawer-nav .itemList,
.el-drawer .gy-drawer-nav .serviceBody,
.el-drawer .gy-drawer-nav .itemBody,
.el-drawer .gy-drawer-nav .listTitleBox {
  display: block;
  width: 100%;
  padding: 0;
}

.el-drawer .gy-drawer-nav .serviceBody,
.el-drawer .gy-drawer-nav .itemBody {
  padding: 6px 0 10px;
}

.el-drawer .gy-drawer-nav .listTitle {
  margin: 0;
  padding: 9px 18px 9px 28px;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
}

.el-drawer .gy-drawer-nav .listTitle p {
  display: block;
}

.el-drawer .gy-drawer-nav .listTitle.active {
  color: var(--gy-primary-light, #8dbfe8);
}

.el-drawer .gy-drawer-nav .listLink {
  display: block;
  width: 100%;
  padding: 0 0 6px;
}

.el-drawer .gy-drawer-nav .listLink > div {
  display: block;
  width: 100%;
}

.el-drawer .gy-drawer-nav .listLink a {
  display: block;
  padding: 9px 18px 9px 40px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
}

.el-drawer .gy-drawer-nav .listLink a:active {
  background: rgba(255, 255, 255, .06);
}

/* 抽屉里不展示的装饰元素 */
.el-drawer .gy-drawer-nav .listTitleIcon,
.el-drawer .gy-drawer-nav .linkVer,
.el-drawer .gy-drawer-nav .hot {
  display: none;
}

.el-drawer .gy-drawer-nav .nav_tag {
  position: static;
  margin-left: 6px;
}

/* 抽屉打开时锁定页面滚动 */
body.gy-drawer-open {
  overflow: hidden;
}

/* ==========================================================================
   4. 通用板块与容器
   ========================================================================== */
.pageBodyBox {
  padding: 30px 0;
}

.pageBodyBox .pageBodyTitle .title1 {
  font-size: 22px;
  line-height: 1.4;
}

.pageBodyBox .pageBodyTitle .title2 {
  margin: 14px 0 26px;
  padding: 0 15px;
  font-size: 13px;
  line-height: 1.8;
}

/* 通用两栏 / 多栏：窄屏下优先整行铺开 */
.pageFlex.hasBetween > * {
  max-width: 100%;
}

/* ==========================================================================
   5. 文档页：分类列表 / 文章内页 / 侧栏 / 分页 / 搜索头
   ========================================================================== */
.docPage {
  padding-top: 10px;
}

.docPage > .container {
  padding: 18px 0 8px;
}

.docPage .docLayout {
  display: block;
}

.docPage .docMain,
.docPage .docSide {
  width: 100%;
}

/* --- 列表页 --- */
.docPage .docListHead {
  margin-bottom: 12px;
  padding: 18px 16px;
  border-radius: 6px;
}

.docPage .docListTitle {
  font-size: 19px;
}

.docPage .docListDesc {
  font-size: 13px;
}

.docPage .docList {
  margin-bottom: 12px;
  padding: 0 16px;
  border-radius: 6px;
}

.docPage .docItem {
  padding: 16px 0;
}

.docPage .docItemTitle {
  margin-bottom: 6px;
  font-size: 16px;
}

.docPage .docItemExcerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
  font-size: 13px;
}

.docPage .docItemMeta {
  flex-wrap: wrap;
  gap: 8px 12px;
}

.docPage .docMore {
  margin-left: auto;
}

/* --- 文章内页 --- */
.docPage .docArticle {
  padding: 18px 16px;
  margin-bottom: 12px;
  border-radius: 6px;
}

.docPage .docArticleTitle {
  font-size: 20px;
}

.docPage .docArticleMeta {
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  font-size: 12px;
}

.docPage .docTags {
  margin-top: 22px;
  padding-top: 16px;
}

/* 正文排版 */
.gy-article {
  font-size: 15px;
  line-height: 1.85;
}

.gy-article p {
  margin: 0 0 .9em;
}

.gy-article h2 {
  font-size: 18px;
}

.gy-article h3 {
  font-size: 16px;
}

.gy-article h4 {
  font-size: 15px;
}

.gy-article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: .8em auto;
  border-radius: 4px;
}

.gy-article ul,
.gy-article ol {
  padding-left: 1.4em;
}

.gy-article li {
  margin-bottom: .4em;
}

.gy-article table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
}

.gy-article pre {
  padding: 12px;
  overflow-x: auto;
  background: #f6f8fa;
  border-radius: 4px;
  font-size: 13px;
}

.gy-article blockquote {
  font-size: 14px;
}

.gy-article iframe {
  width: 100%;
  max-width: 100%;
}

/* --- 上下篇 --- */
.docPage .docPrevNext {
  display: block;
  margin-bottom: 12px;
}

.docPage .pnItem {
  display: block;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 6px;
}

.docPage .pnNext {
  text-align: left;
}

/* --- 侧栏 --- */
.docSide {
  margin-top: 14px;
}

.docSide .sideBox {
  margin-bottom: 12px;
  border-radius: 6px;
}

.docSide .sideTitle {
  padding: 13px 16px;
  font-size: 15px;
}

.docSide .sideList li {
  padding: 8px 16px;
  font-size: 14px;
}

.docSide .sideTags {
  padding: 12px 16px 14px;
}

.docSide .sideMore,
.docSide .sideEmpty {
  padding-left: 16px;
  padding-right: 16px;
}

/* --- 关键词看板 / 相关阅读 --- */
.gy-kw-board,
.gy-related {
  margin: 22px 0 0;
  padding: 18px 16px;
  border-radius: 6px;
}

.gy-kw-title {
  font-size: 14px;
}

.gy-kw-list {
  line-height: 2;
}

.gy-kw-list a {
  margin-right: 12px;
  font-size: 13px;
}

.gy-related li {
  font-size: 14px;
}

.gy-related .gy-related-date {
  float: none;
  display: block;
  margin-top: 2px;
}

/* --- 分页 --- */
.docPage .docMain .phoneSorter {
  padding: 12px 10px;
}

.el-pagination .el-pager li {
  min-width: 30px;
  height: 30px;
  margin: 0 2px;
  line-height: 30px;
  font-size: 13px;
}

.el-pagination .btn-prev,
.el-pagination .btn-next {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  line-height: 30px;
}

/* --- 搜索头 / 404 / 搜索结果 --- */
.docPageHead {
  padding-top: 0; /* 顶部导航已由 body padding-top 让位 */
  background-size: cover;
}

.docPageHead .docTitle {
  height: auto;
  min-height: 170px;
}

.docPageHead .docTitle .titleBox .title {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 18px;
}

/* 热门搜索词在手机上保留（长尾词入口），只做换行处理 */
.docPageHead .docTitle .titleBox .hotWord {
  display: block !important;
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.9;
}

.docPageHead .docTitle .titleBox .hotWord span {
  display: block;
  margin-bottom: 4px;
}

.docPageHead .docTitle .titleBox .hotWord a {
  margin: 0 10px 0 0;
  font-size: 12px;
}

/* 搜索结果 / 404 的两栏结构 */
.announce .container.pageFlex,
.docPage .container.pageFlex {
  flex-direction: column;
}

.announce .pageContent {
  width: 100%;
  margin-bottom: 14px;
}

.announce .docSide {
  width: 100%;
  margin-top: 0;
}

.docPage .emptyData {
  padding: 40px 0 !important;
}

/* ==========================================================================
   6. 首页
   ========================================================================== */
.home .banner {
  height: 420px;
}

.home .banner .bannerImg {
  background-size: cover;
  background-position: center center;
}

.banner .caption .captionBox {
  width: 100%;
  padding: 0 16px;
}

.banner .caption .captionBox .captionTitle {
  font-size: 19px;
  line-height: 1.55;
}

.banner .bannerIndexBox {
  bottom: 14px;
}

.home .bannerRecom {
  padding: 24px 0;
}

.home .bannerRecom .items {
  width: 100%;
  max-width: 460px;
  margin: 0 auto 16px;
  padding: 12px;
}

.home .bannerRecom .items:last-child {
  margin-bottom: 0;
}

.citingBox {
  padding: 30px 0;
}

/* 首页资讯 + FAQ 模块 */
.home-article-faq {
  padding: 32px 0;
}

.af-layout {
  flex-direction: column;
}

.af-left,
.af-right {
  width: 100%;
}

.af-title h3 {
  font-size: 18px;
}

.af-post-title {
  font-size: 15px;
}

.af-faq-q {
  font-size: 14px;
}

.af-faq-a {
  font-size: 13px;
}

/* ==========================================================================
   7. 活动页 / 企业页 / 下载页 / 站点地图
   ========================================================================== */

/* --- 活动页 --- */
.promotion #banner .bannerTop {
  padding: 26px 0 18px;
}

.promotion #banner .bannerTop .title1 {
  font-size: 22px;
}

.promotion #banner .bannerTop .title2 {
  font-size: 13px;
}

.promotion #banner .title-bar h1 {
  font-size: 18px;
}

.promotion .faqs-container {
  padding: 24px 0 30px;
}

.promotion .faqs-container .faqs-box {
  margin-bottom: 12px;
}

.promotion .faqs-container .faqs-box .faqs-title {
  padding: 14px 12px;
  font-size: 15px;
}

.promotion .faqs-container .content-box {
  padding: 14px 12px;
}

.promotion .faqs-container .content-list h2 {
  font-size: 16px;
}

.promotion .faqs-container .content-list p {
  font-size: 14px;
}

.promotion .faqs-container .content-list .first-table,
.promotion .faqs-container .content-list .second-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.promotion .faqs-container .content-list table {
  min-width: 520px;
}

/* --- 企业页 --- */
.coupon .tradeFeatureWrap {
  padding: 40px 0;
}

.coupon .tradeFeatureInner {
  flex-direction: column;
  flex-wrap: wrap !important;
  gap: 24px;
}

.coupon .tradeFeatureLeft,
.coupon .tradeFeatureRight {
  width: 100%;
  text-align: center;
}

.coupon .tradeFeatureImg,
.coupon .tradePhoneImg {
  max-width: 100%;
  height: auto;
}

.coupon .appDownloadWrap {
  padding: 36px 0;
}

.coupon .phoneImg {
  max-width: 260px;
  margin: 0 auto;
}

/* --- 下载页 --- */
.dlPage .dlHero {
  padding: 30px 0 24px;
}

.dlPage .heroBox {
  padding: 0 4px;
}

.dlPage .heroTitle {
  font-size: 22px;
}

.dlPage .heroTags {
  justify-content: flex-start;
}

.dlPage .secWrap,
.dlPage .secWrap.reverse {
  flex-direction: column;
  gap: 20px;
}

.dlPage .secText,
.dlPage .secPhone {
  width: 100%;
}

.dlPage .secText h2 {
  font-size: 19px;
}

.dlPage .secPhone .phoneMain {
  max-width: 240px;
  margin: 0 auto;
}

.dlPage .dlBtns {
  justify-content: center;
}

/* 右侧悬浮栏在手机上改为页面底部的横向条，避免遮挡正文 */
.dlPage .dlSidebar {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  z-index: 900;
}

.dlPage .dlSidebar .sideTop,
.dlPage .dlSidebar .sideQrcode {
  display: none;
}

.dlPage .dlSidebar .sideBtn {
  margin: 0;
}

/* --- 站点地图 --- */
.docIndex .pageBody {
  padding: 26px 0;
}

.docIndex .caseBox {
  padding-top: 30px;
}

.docIndex .boxTitle {
  font-size: 20px;
}

.docIndex .caseBody a {
  width: 100%;
  margin: 0 auto 16px;
}

/* ==========================================================================
   8. 页脚（手机块）
   —— 桌面 .footJoin / .footNav 在手机上隐藏，改由 footer.php 的 .footPhone 输出
   ========================================================================== */

/* 桌面页脚两块（1200px 定宽）在手机上统一隐藏 */
.footJoin,
.footNav {
  display: none;
}

.footPhone {
  display: block;
  padding: 22px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: #f5f7fa;
  color: #98a2ad;
  font-size: 12px;
  line-height: 1.9;
  text-align: center;
}

.footPhone .phoneItem {
  margin-bottom: 16px;
}

.footPhone .phoneItem:last-child {
  margin-bottom: 0;
}

.footPhone .rexian {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.footPhone .rexian strong {
  font-size: 18px;
  color: var(--gy-primary, #0170c1);
}

.footPhone .confirmBtn {
  display: block;
  width: 80%;
  max-width: 420px;
  height: 42px;
  margin: 0 auto;
  line-height: 42px;
  font-size: 15px;
  color: #fff !important;
  background: var(--gy-primary, #0170c1);
  border-radius: 6px;
}

.footPhone .footLinks a {
  display: inline-block;
  margin: 0 8px;
  color: #5b6470;
}

.footPhone .beian span,
.footPhone .beian a {
  color: #98a2ad;
}

/* ==========================================================================
   9. 悬浮件
   ========================================================================== */
.backTop {
  right: 12px;
  bottom: 80px;
  width: 38px;
  height: 38px;
  line-height: 38px;
  font-size: 18px;
  z-index: 800;
}

.services {
  z-index: 850;
}

/* ==========================================================================
   10. ≤ 480px 再收紧
   ========================================================================== */
@media screen and (max-width: 480px) {
  .current .phoneBody .logo {
    width: 108px;
    height: 24px;
  }

  .home .banner {
    height: 340px;
  }

  .banner .caption .captionBox .captionTitle {
    font-size: 17px;
  }

  .docPage .docListTitle,
  .docPage .docArticleTitle {
    font-size: 18px;
  }

  .docPage .docItemTitle {
    font-size: 15px;
  }

  .pageBodyBox .pageBodyTitle .title1 {
    font-size: 19px;
  }

  .gy-kw-board,
  .gy-related {
    padding: 16px 14px;
  }

  .el-drawer,
  .el-drawer.rtl {
    width: 88% !important;
  }
}