@charset "UTF-8";
/* ==========================================================================
   移动端适配
   --------------------------------------------------------------------------
   原站是固定宽度设计：<meta viewport> 写死 width=1300，容器 .w1200 固定
   1250px，各栏目再用固定像素分栏。手机浏览器虽然会把整页缩小到屏幕宽度，
   但字小到无法阅读，只能靠双指放大。

   这个文件不改动桌面端设计，只在窄屏下生效：
     ≥1200px  桌面端，完全不受影响
     ≤1199px  平板/小笔记本：容器改成流式
     ≤ 767px  手机：分栏改单列、导航改两行

   加载顺序放在所有样式表之后，用同级或更高优先级覆盖。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 基础：解除固定宽度
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {

  html,
  body {
    min-width: 0 !important;
    overflow-x: hidden; }

  /* 各栏目自己写的 min-width: 1200px 是横向裁切的根源 */
  .swiper-container,
  .swiper-container .swiper-slide,
  .swiper-container-footer,
  .swiper-container-footer .swiper-slide,
  .swiper-container2,
  .sub-brand-wrapper,
  .app_scene_wapper,
  .why-choose-us,
  .prd_about,
  .hgs-nav-wrapper,
  .content_public,
  .help-banner,
  .product_advice_banner,
  [class*="banner"] {
    min-width: 0 !important; }

  .w1200 {
    width: 100% !important;
    max-width: 1250px;
    padding-left: 16px;
    padding-right: 16px; }

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

  /* 固定宽度的内联样式（DedeCMS 正文里写死的图片尺寸）也要能缩 */
  .single_text_con img,
  .article-left img,
  .article-right img {
    max-width: 100%;
    height: auto !important; }
}

/* --------------------------------------------------------------------------
   2. 导航
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {

  /* newstyle.css 里写的是 `padding-top: 70px !important`（给绝对定位的导航
     让位）。移动端导航回到文档流，这里必须同样用 !important 才压得住。 */
  body {
    padding-top: 0 !important; }

  /* 导航不再是绝对定位的浮层。JS 滚动时会加 .fixed（position: fixed
     !important），这里同样重要级别更高，移动端维持文档流、不吸顶 ——
     换行后的导航较高，吸顶会挡住正文。 */
  .hgs-nav-wrapper {
    position: relative !important;
    height: auto;
    padding: 10px 0; }

  .hgs-nav-wrapper .w1200 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center; }

  /* 口号图在窄屏只会挤掉导航，先收起来 */
  .hgs-nav-wrapper .nav-slogen {
    display: none; }

  .hgs-nav-wrapper .gohome {
    float: none;
    padding-top: 0;
    margin-right: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }

  .hgs-nav-wrapper .gohome img {
    width: 110px;
    height: auto; }

  /* 导航链接占满一整行并均分宽度。原来 float + 右对齐，5 个中文词放不下，
     第 5 项会被挤掉。 */
  .hgs-nav-wrapper .nav-content {
    float: none;
    height: auto;
    width: 100%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    margin-top: 8px; }

  .hgs-nav-wrapper .nav-content ul {
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between; }

  .hgs-nav-wrapper .nav-content ul li {
    float: none;
    display: block;
    height: auto;
    line-height: 38px;
    margin: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center; }

  .hgs-nav-wrapper .nav-content ul li a {
    font-size: 14px;
    white-space: nowrap; }

  .hgs-nav-wrapper .head_search {
    float: none;
    margin-top: 0;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    order: 2;
    width: 100%;
    margin-top: 8px; }

  .hgs-nav-wrapper .head_search .text-center {
    width: 100% !important; }
}

/* 手机：logo 单独占一行，把整行宽度让给导航链接 */
@media screen and (max-width: 767px) {

  .hgs-nav-wrapper .gohome {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }

  .hgs-nav-wrapper .nav-content {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    order: 3; }

  .hgs-nav-wrapper .head_search {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    order: 2; }

  .hgs-nav-wrapper .nav-content ul li {
    line-height: 34px; }

  .hgs-nav-wrapper .nav-content ul li a {
    font-size: 13px; }
}

/* --------------------------------------------------------------------------
   3. 页脚
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {

  .footer-warapper .footer-content-wrapper {
    padding: 30px 0 20px; }

  .footer-warapper .wx_img {
    float: none;
    margin: 0 auto 20px;
    text-align: center;
    width: 120px; }

  .footer-warapper .a_list {
    float: none;
    display: inline-block;
    vertical-align: top;
    margin: 0 18px 20px 0; }

  .footer-warapper .right_img {
    float: none;
    margin-top: 10px; }

  .index_footer-copyright .footer_copy_box {
    text-align: center; }
}

/* --------------------------------------------------------------------------
   4. 首页
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {

  /* banner 高度原本是固定 px，改成跟着宽度走 */
  .swiper-container {
    height: auto !important;
    padding-bottom: 30px; }

  .swiper-container .swiper-slide {
    padding: 60px 0 50px;
    height: auto; }

  .swiper-container .swiper-slide h1,
  .swiper-container .swiper-slide h3 {
    font-size: 34px; }

  .swiper-container .swiper-slide .adv_des,
  .swiper-container .swiper-slide p.adv_des {
    font-size: 18px !important; }

  .swiper-container-footer {
    height: auto !important;
    padding: 30px 0 40px; }

  .swiper-container-footer .swiper-slide {
    padding: 0;
    height: auto; }

  .swiper-container-footer .swiper-slide h3 {
    font-size: 26px; }

  .swiper-container-footer .swiper-slide .product_adv_des {
    font-size: 15px; }

  .swiper-container-footer .swiper-slide .go-download {
    width: auto;
    height: auto;
    padding: 10px 26px;
    line-height: 1.5;
    font-size: 15px; }

  .swiper-container-footer .swiper-slide .go-download .iconfont {
    font-size: 16px; }

  /* 各板块的横向排列改纵向，flex 容器允许换行 */
  .sub-brand-wrapper .pro-list-wrapper,
  .sub-brand-wrapper .pro-content .h4-content-type1,
  .sub-brand-wrapper .pro-content .h4-content-type2,
  .app_scene_wapper .app_scene_list,
  .why-choose-us ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center; }

  .sub-brand-wrapper .pro-content .h4-content-type1 li.pro-feature-item,
  .sub-brand-wrapper .pro-content .h4-content-type2 li.pro-feature-item,
  .why-choose-us ul li {
    width: 50% !important;
    margin-right: 0 !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }

  .sub-brand-wrapper .pro-list-wrapper .pro-item {
    width: 50%;
    margin-bottom: 20px; }

  .prd_about .arcticle-list .arcticle-list-item {
    float: none;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 30px; }

  .prd_about .arcticle-list .arcticle-list-item .big-img {
    float: none;
    margin: 0 auto 15px; }
}

@media screen and (max-width: 767px) {

  .sub-brand-wrapper .pro-content .h4-content-type1 li.pro-feature-item,
  .sub-brand-wrapper .pro-content .h4-content-type2 li.pro-feature-item,
  .why-choose-us ul li,
  .sub-brand-wrapper .pro-list-wrapper .pro-item {
    width: 100% !important; }

  .app_scene_wapper .app_scene_list .app_scene {
    width: 100% !important;
    margin: 0 0 16px !important; }
}

/* --------------------------------------------------------------------------
   5. 文章页 / 列表页（public.css 的两栏）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {

  .content_public {
    width: 100% !important;
    padding: 24px 16px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }

  .pub_left,
  .pub_right {
    width: 100% !important;
    float: none !important;
    margin-bottom: 24px; }

  .pub_right {
    margin-top: 24px; }

  /* 列表项在窄屏改成上下排列，缩略图不再占一整列 */
  .content_public .article-left {
    float: none;
    width: 100%;
    height: auto;
    margin-bottom: 12px; }

  .content_public .article-left img {
    width: 100%;
    height: auto; }

  .content_public .article-right {
    float: none;
    width: 100% !important;
    height: auto;
    margin-left: 0; }

  .single_bt h1,
  .single_bt h2 {
    font-size: 20px;
    line-height: 1.35;
    padding-bottom: 12px; }

  .arcticle_page .page_p a {
    margin: 0 1px; }
}

/* --------------------------------------------------------------------------
   6. 产品中心 / 联系我们 / 帮助 / 图纸验签
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {

  .swiper-container .swiper-wrapper .swiper-slide .slide-right h1,
  .swiper-container .swiper-wrapper .swiper-slide .slide-right h3 {
    font-size: 28px; }

  .swiper-container .swiper-wrapper .swiper-slide .slide-left,
  .swiper-container .swiper-wrapper .swiper-slide .slide-right {
    float: none !important;
    width: 100% !important;
    padding: 0; }

  /* 产品列表里的固定列宽 */
  .pro-download-wrapper .pro-item,
  .product_box .product_fns,
  .product_box .product_content,
  .article_banner .download_box,
  .article_banner .download_box .box_left,
  .article_banner .download_box .box_right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0; }

  .article_banner .download_box h2 {
    font-size: 30px;
    line-height: 1.3; }

  .article_banner .download_box p {
    width: auto;
    font-size: 16px;
    line-height: 1.7; }

  .article_banner .box_btn {
    padding-top: 24px; }

  .article_banner .download_box .box_left a {
    width: auto;
    padding: 0 24px;
    height: 48px;
    line-height: 48px;
    font-size: 16px; }

  /* 联系我们：图标 + 文字的横排卡片 */
  .contact_lists .list-item1,
  .contact_lists .list-item2,
  .contact_lists .list-item3,
  .contact_lists .list-item4 {
    width: 100% !important;
    float: none !important;
    margin: 0 0 20px !important; }

  .resolving_container .coommon_question .article-list .left,
  .resolving_container .coommon_question .article-list .right {
    float: none !important;
    width: 100% !important; }

  .resolving_container .coommon_question .article-list .left img {
    margin: 0 auto 12px; }
}

/* --------------------------------------------------------------------------
   7. 手机
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

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

  .swiper-container .swiper-slide h1,
  .swiper-container .swiper-slide h3 {
    font-size: 26px; }

  .swiper-container .swiper-slide .adv_des,
  .swiper-container .swiper-slide p.adv_des {
    font-size: 15px !important; }

  .swiper-container .swiper-slide .btn_list a {
    display: block;
    margin: 10px auto 0 !important;
    width: 200px; }

  .prd_about .arcticle-list .arcticle-list-item .big-img {
    width: 100%; }

  .prd_about .arcticle-list .arcticle-list-item .a_list a {
    width: 100% !important;
    padding-left: 22px; }

  .search-form,
  .err-search,
  .right_search input.search,
  .right_search button {
    width: 100% !important; }

  .right_search button {
    margin-top: 10px;
    border-radius: 3px; }

  .right_search input.search {
    border-radius: 3px; }

  .article_banner .download_box h2 {
    font-size: 24px; }

  .single_text_con {
    font-size: 15px; }

  /* 表格类内容在窄屏容易撑破布局 */
  .single_text_con table {
    display: block;
    width: 100%;
    overflow-x: auto; }
}