/* Responsive */
@media all and (max-width: 768px) { /* Screen width < 768px */
  .main-wrap { padding-left: 16px; padding-right: 16px; }
  header { top: 0; padding-top: 16px; }
    header .logo { width: auto; padding: 0; margin: 0; }
    header .menu-trigger { display: block; position: absolute; right: 0; top: 0; padding: 20px 16px 0; font-size: 22px; color: #666; }
    header.custom .menu-trigger { color: #fff; }
    header .menu { position: fixed; z-index: 200; right: 0; top: 0; bottom: 0; min-width: 142px; background: #fff; transform: translateX(100%); transition-duration: .3s; }
      header .menu > * { float: none; }
      header .menu nav { padding: 16px 0; border-bottom: 1px solid #efefef; margin-bottom: 30px; }
        header .menu nav a { float: none; display: block; height: 50px; line-height: 50px; margin: 0; text-align: center; color: #2a2a2a; }
        header .menu nav a:hover, header .menu nav a.active { color: #7A84F0; font-weight: 700; background: #F0F1FF; }
          header .menu nav a::after { display: none; }

        header .menu .btns a { float: none; display: block; margin: 0 16px 20px; }
        header .btns a.solid { color: #fff; }
        header .logined { display: block; text-align: center; }
          header .menu .logined .btn { display: block; margin-top: 10px; }
          header .logined b { display: none; }

        header.custom .logined { color: #2E3192; }
    header .menu-mask { display: none; position: fixed; z-index: 99; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .3); }

  header.fixed { position: fixed; padding: 10px 0; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .1); }
    header.fixed .menu-trigger { padding: 16px; }

  .banner-bg { height: 400px; }
  .banner-bg .main-wrap { height: 400px; }
    .banner-bg .main-wrap .bg { top: 0; right: -110px; width: 300px; height: 320px; margin: 52px auto 0; background-position: center; }
  .banner-bg .next { display: none; }

  .banner { height: 400px; margin-bottom: 50px; }
    .banner h1 { padding: 100px 0 20px; font-size: 30px; line-height: 1.3; }
    .banner h2 { width: 60%; margin-bottom: 40px; font-size: 14px; line-height: 1.5; }

  .btn-red, .btn-border { width: 140px; height: 40px; line-height: 40px; font-size: 16px; }

  .big-title { margin-bottom: 30px; }
    .big-title h2 { font-size: 28px; }
    .clients-title h2 { font-size: 24px; }
    .clients-title h3 { margin-top: 5px; font-size: 14px; }

  .gray-box { padding: 50px 0 60px; margin-bottom: 50px; }
    .gray-box .big-title { margin-bottom: 40px; }
      .gray-box .big-title h2 { font-size: 24px; }

  .clients { margin-bottom: 80px; background-image: url("../img/clients-mobile.png")/*tpa=https://s.nuoapp.nuostatic.com/nuoapp/com/clients-mobile.png*/; }
    .clients::before { padding-top: 75%; }

  /* vote page */
  .banner-bg.vote .main-wrap .bg { right: -130px; }
  .banner.vote h1 { padding: 100px 0 20px; font-size: 30px; line-height: 1.3; }
  .banner.vote h2 { width: 60%; margin-bottom: 40px; font-size: 14px; line-height: 1.5; }
  .banner.vote .btn-blue { width: 140px; height: 40px; line-height: 40px; font-size: 16px; }
  .banner.vote .brand-logos { margin-top: 40px; }
    .banner.vote .brand-logos img:nth-of-type(1) { height: 12.5px; }
    .banner.vote .brand-logos img:nth-of-type(2) { height: 22.5px; }
    .banner.vote .brand-logos img:nth-of-type(3) { height: 18px; }
    .banner.vote .brand-logos img:nth-of-type(4) { height: 21px; }
    .banner.vote .brand-logos img:nth-of-type(5) { height: 11.5px; }
    .banner.vote .brand-logos img:nth-of-type(6) { height: 20.5px; }
    .banner.vote .brand-logos img:nth-of-type(7) { height: 20px; }

  .vote-features { flex-wrap: wrap; margin-bottom: 50px; }
    .vote-features li { width: 50%; padding: 120px 20px 80px; }
      .vote-features li::after { top: 20px; left: 20px; width: 70px; height: 70px; }
      .vote-features li h2 { font-size: 20px; }
      .vote-features li div { font-size: 14px; }
      .vote-features li .btn { left: 20px; right: 20px; font-size: 14px; }
      .vote-features li .btn i { margin-left: 10px; font-size: 15px; }

  .vote-console { margin-bottom: 50px; }
    .vote-console > div { display: block; padding: 15px 15px 30px; }
      .vote-console-img { width: 100%; }
      .vote-console-text { max-width: none; padding-top: 20px; }
        .vote-console-text .title { margin-bottom: 30px; font-size: 24px; }
          .vote-console-list li { padding-left: 65px; }
            .vote-console-list h4 { font-size: 13px; }
            .vote-console-list li.active h4 { height: 38px; }

  .theme-list { margin: 0 auto 50px; }
    .theme-list .theme { float: none; width: auto; margin: 0 16px 16px; }

  .strongpoint { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 20px; margin-bottom: 0; }
    .strongpoint::after { display: none; }
    .strongpoint li { width: 46%; margin-top: 20px; margin-right: 0; }
      .strongpoint li .icon { font-size: 40px; height: 60px; }
      .strongpoint li h3 { font-size: 16px; }
      .strongpoint li h4 { font-size: 14px; }

  .link-line { margin-bottom: 50px; }

  .banner-vote-line { height: 160px; margin-bottom: 50px; }
    .banner-vote-line-1 h3 { left: 15px; height: 100px; font-size: 18px; }
    .banner-vote-line-1 h3 div { margin-bottom: 20px; font-size: 14px; }
    .banner-vote-line h3 .btn { width: 90px; height: 26px; line-height: 26px; font-size: 12px; }
  .banner-vote-line-2 { padding-top: 20px; }
    .banner-vote-line-2 h3 span { margin-bottom: 0; font-size: 24px; }
    .banner-vote-line-2 h3 div { margin-bottom: 25px; font-size: 18px; }

  .vote-news li { float: none; width: auto; padding-left: 45px; margin-right: 0; margin-bottom: 30px; }
    .vote-news li::before { top: 10px; }
    .vote-news li .title { margin-bottom: 5px; font-size: 18px; }
    .vote-news li div { font-size: 14px; }
    .vote-news li .date { font-size: 14px; }

  .big-title.theme h2 { line-height: 1.3; }
    .big-title.theme h2 span { display: block; }

  /* about page */
  .banner-bg.about .bg { right: -130px; }
  article.about { margin: 0 20px 50px; font-size: 16px; line-height: 30px; }
  .gray-box.about { padding-top: 50px; }
  .jobs { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 4%; }
    .jobs::after { display: none; }
    .jobs li { float: none; display: flex; flex-direction: column; width: 48%; min-height: 0; padding: 15px; margin: 0 0 4% 0; }
      .jobs li .title { font-size: 18px; }
      .jobs li .label { margin-bottom: 20px; }
      .jobs li .abs { flex: 1; margin-bottom: 20px; font-size: 15px; }
      .jobs li .btn { height: 40px; line-height: 36px; }
  .contact-us { width: auto; padding-left: 16px; margin-bottom: 60px; font-size: 18px; }

  .dialog-job { width: 85%; max-height: 70%; }
    .dialog-job .content { padding: 30px 20px; }
    .dialog-job h2 { font-size: 20px; }
    .dialog-job dt { font-size: 18px; }
    .dialog-job dd { font-size: 14px; }

  /* solutions page */
  .anchors .main-wrap { display: flex; justify-content: space-between; }
    .anchors .main-wrap::after { display: none; }
    .anchors .main-wrap a { margin: 0; }

  .solution-points ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 50px 0 0; }
    .solution-points ul::after { display: none; }
    .solution-points ul li { width: 49%; margin: 0 0 50px !important; }
      .solution-points ul li h3 { font-size: 17px; }
      .solution-points ul li h4 { font-size: 14px; }

  /* cases page */
  .banner-bg.cases .main-wrap .bg { right: -140px; }
  .banner.cases { margin-bottom: 0; }
  .cases-main .main-wrap { top: 0; padding-top: 16px; }
  .cases-main .tips { margin-top: 30px; }
    .cases-list li { width: 49%; margin-bottom: 2%; }
      .client-logo { height: 120px; background-size: 90px; }
      .client-logo.guangzhou-social-innovation-center { background-size: 102.6px; }
      .client-logo.postal-savings-bank-of-china { background-size: 96.3px 90px; }
      .client-logo.sf-express { background-size: 79.8px; }
      .client-logo.shanghai-international-dance-center-theater { background-size: 72px; }
      .client-logo.state-grid-corporation-of-china { background-size: 90.3px 90px; }
      .client-logo.xueersi { background-size: 79.8px; }

      .client-title { padding-top: 26px; font-size: 18px; }
      .client-intro { margin: 0 20px 75px; font-size: 14px; }
      .client-tag { bottom: 20px; }
      .client-qrcode img { width: 100px; }
      .client-qrcode .qrcode-tips::before { font-size: 14px; content: '长按识别二维码'; }

  /* custom page */
  .banner-bg.custom .main-wrap .bg { right: -140px; margin-top: 33px; }
  .banner.custom { margin-bottom: 50px; }
  .big-title.custom { padding-top: 22px; margin-bottom: 50px; }
  .custom-items { margin-bottom: 50px; }
    .custom-items .item { float: none; display: flex; width: auto; margin: 0 0 16px; }
      .custom-items .item .cover { width: 30%; flex-shrink: 0; margin: 0 16px 0 0; }

  .box { margin-bottom: 50px !important; }
  .box .img { left: auto !important; right: auto !important; width: 100% !important; }
  .box .txt { width: 100%; padding: 0 20px; margin-top: 0 !important; text-align: center; }
  .box .txt h2 { font-size: 24px; }
  .box .txt h3 { margin-bottom: 30px; font-size: 14px; }
  .box .txt .data-list { display: flex; justify-content: space-between; margin-bottom: 20px; }
  .box .txt .data-list::after { display: none; }
  .box .txt .data-list li { margin: 0; }
  .box.custom .img { float: none; margin-bottom: 30px; }
  .box.custom .txt { position: static; }
    .box.custom .txt h3 { margin-bottom: 0; }
  .box.custom .btn { margin-top: 30px; }

  .gray-box.custom { padding: 50px 0; }
    .work-flow .btn-red { margin-top: 50px; }
    .work-flow-img-pc { display: none; }
    .work-flow-img-mobile { display: block; }

  .custom-comment { min-height: 0; padding: 20px 20px 90px; margin-bottom: 80px; }
    .custom-comment h2 { font-size: 24px; text-align: center; }
    .custom-comment .wpcf7 { position: relative; }
      .custom-comment .form-item { margin-right: 0; }
        .custom-comment .form-item input { width: 100%; }
    .custom-comment .form-submit { text-align: center; }
      .custom-comment .form-submit > span:first-child { position: relative; }
        .custom-comment .form-submit .ajax-loader { position: absolute; top: 10px; right: -30px; margin: 0; }
      .custom-comment .form-submit .tips { left: 0; bottom: -90px; top: auto; font-size: 14px; }
    .wpcf7-response-output { position: absolute; left: 0; bottom: 5px; width: 100%; text-align: center; }

  /* help page */
  .breadcrumb { margin-top: 70px; margin-bottom: 30px; }
  .banner.help { height: 220px; padding-top: 90px; margin-bottom: -50px; }
  .help-search { width: auto; margin: 0 30px; }
    .help-search input { width: 85%; height: 40px; padding: 0 40px 0 15px; font-size: 14px; }
    .help-search button { width: 26%; height: 40px; font-size: 14px; }
  .main-help { margin-bottom: 50px; }
    .main-help a { float: none; display: flex; width: auto; min-height: 0; padding: 20px; margin: 0 0 16px !important; text-align: left; }
      .main-help a > span { flex: 1; padding-left: 20px; }
        .main-help a img { height: 30px; margin: 3px 0 0; }
        .main-help a .title { font-size: 20px; }
        .main-help a .info { width: auto; margin-top: 10px; font-size: 12px; }

  .article-wrap { margin-bottom: 50px; }
  .article-wrap.hot { margin-left: 16px; margin-right: 16px; }
    .article-wrap h3 { width: auto !important; padding-bottom: 10px; font-size: 18px; }
      .article-wrap h3 i { font-size: 20px; }
      .article-wrap h3 a { bottom: 15px; }
    .article-wrap.hot .article-list { width: auto; }
      .article-list a { float: none; width: auto !important; padding-right: 0; margin-left: 0 !important; }

  .single-article-wrap { display: flex; flex-direction: column-reverse; margin-bottom: 50px; }
    .single-article-wrap aside { float: none; width: auto; border-top: 1px solid #efefef; }
    .single-article-wrap .single-article { float: none; width: auto; }

  /* price page */
  .banner.price { margin-bottom: -40px; }

  .price-table-head-hack-for-mobile { padding: 0; height: 184px; }
  .price-table-head { height: auto; overflow-x: auto; transition-duration: .5s; }
  .price-table-body { padding: 0; margin-bottom: 50px; overflow-x: auto; transition-duration: .5s; }
  /* 手机版价格表 */
  .level-table { width: 635px !important; font-size: 12px; }
    .level-table td { width: 120px; }
    .price-table-head td { padding: 30px 0; }
    .price-table-head td.enterprise > div { padding: 30px 0 0; }
    .price-table-head td.enterprise > div .hot { right: 3% !important; }
    .price-table-head td.custom div { height: 63px; font-size: 14px; line-height: 30px; }
      .price-table-head h2 { margin-bottom: 5px; font-size: 16px !important; }
      .price-table-head .price { height: 30px; margin-bottom: 5px; }
        .price-table-head .price .label { padding-top: 5px !important; }
        .price-table-head .price .int { font-size: 16px !important; }
        .price-table-head .price .decimal { padding-bottom: 2px !important; font-size: 12px; }
        .price-table-head .price .per { padding-bottom: 2px !important; margin-left: 4px; font-size: 12px; }
      .price-table-head .sale::after { content: '按年仅需3.9折'; }
      .price-table-head .btn { width: 100px; min-width: 0 !important; height: 32px !important; line-height: 28px !important; font-size: 12px !important; }
    .price-table-body td { padding: 10px; }
  /* 价格表头部浮动 */
  .price-table-head.fixed { position: fixed; top: 54px; z-index: 4; width: 100%; }
  .price-table-head.fixed .level-table { position: static; }

  .gray-box.price { padding: 50px 0 20px; margin-bottom: 50px; }
    .gray-box.price .big-title { margin-bottom: 40px; }
      .qa { display: flex; flex-wrap: wrap; justify-content: space-between; }
        .qa::after { display: none; }
        .qa li { width: 100%; padding-left: 25px; margin: 0 0 30px; }
          .qa li i { top: 4px; font-size: 18px; }
          .qa li .title { margin-bottom: 10px; font-size: 18px; }
          .qa li div { max-height: 105px; font-size: 14px; }

  .big-title.expert h2 { padding: 0 30px; }
  .expert-contact { margin-bottom: 50px; }
    .expert-contact > * { display: block !important; margin: auto; }
    .expert-contact > span { margin-top: 15px; }
      .expert-contact .label { position: static; display: block; margin-top: 20px; }

  footer { padding-bottom: 30px; }
    footer .main-wrap { padding: 50px 6% 40px; }
    footer .main-wrap > * { float: none; }
    footer .main-wrap .contact { margin: 0 20px 50px; }
    footer .main-wrap .sep { display: none; }
    footer .main-wrap .footer-links { display: flex; justify-content: space-between; padding: 0 20px; }
      footer .main-wrap dl { width: auto; }
      footer .main-wrap dl:last-child { width: auto; }

  /* wp article hack */
  .single-article .gallery .wp-block-image { margin-right: 0 !important; margin-left: 0 !important; }
}