@charset "utf-8";
  
    #opensource {
      /***原768px***/
    }

    #opensource .m-hp-ecological {
      background: #fff;
    }

    #opensource .m-hp-ecological .m-hp-list {
      max-width: 1092px;
    }

    #opensource .m-hp-ecological .m-hp-list>li {
      width: 33.33%;
    }

    #opensource .m-hp-ecological-icon img {
      width: 100%;
    }

    #opensource .m-hp-ecological-icon {
      width: 90px;
      height: 90px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      margin: 0 auto;
    }

    #opensource .m-hp-ecological .m-hp-title {
      padding: 80px 0 60px 0;
    }

    @media only screen and (max-width: 769px) {
      #opensource .m-hp-ecological {
        background: #fff;
      }

      #opensource .m-hp-ecological .m-hp-content {
        padding-bottom: 0.5rem;
      }

      #opensource .m-hp-ecological .m-hp-list {
        width: auto;
      }

      #opensource .m-hp-ecological .m-hp-list>li {
        width: 100%;
        height: 2.21rem;
        vertical-align: middle;
        margin-bottom: 1rem;
        text-align: left;
        padding: 0 0 0 2.29rem;
      }

      #opensource .m-hp-ecological .m-hp-list>li:after {
        display: inline-block;
        height: 100%;
        content: '';
        vertical-align: middle;
      }

      #opensource .m-hp-ecological .m-hp-list>li .m-hp-ecological-icon,
      #opensource .m-hp-ecological .m-hp-list>li .m-hp-words {
        vertical-align: middle;
        display: inline-block;
      }

      #opensource .m-hp-ecological .m-hp-list>li .m-hp-ecological-icon {
        width: 2.02rem;
        height: 2.02rem;
      }

      #opensource .m-hp-ecological .m-hp-list>li .m-hp-words {
        margin-left: 0.8rem;
      }

      #opensource .m-hp-ecological .m-hp-list>li .m-hp-words * {
        text-align: left;
      }

      #opensource .m-hp-ecological .m-hp-title {
        padding: 1.5rem 0 1.47rem 0;
      }
    }
  
  
    .m-hp-wrapper {
      overflow-x: hidden;
      font-size: 20px;
    }

    .m-hp-wrapper *,
    .m-hp-wrapper *::before,
    .m-hp-wrapper *::after {
      box-sizing: initial;
    }

    .m-hp-wrapper .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    .m-hp-wrapper .m-hp-devpromoting-details a:hover,
    .m-hp-wrapper .m-hp-header-btn-group a:hover,
    .m-hp-wrapper .header-links a:hover {
      color: #fff !important;
    }

    .m-hp-openbeta-tit {
      color: #3C76FF;
    }

    .m-hp-devhelper-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_ability_dev.d67dce9.jpg);
    }

    .m-hp-feed-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_ability_feed.509a096.jpg);
    }

    .m-hp-ai-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_ability_ai.c31e24b.jpg);
    }

    .m-hp-ecological-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_ability_ecological.a1d039c.jpg);
    }

    .m-hp-ctrip-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_case_ctrip.fdc7f25.png);
    }

    .m-hp-aiqiyi-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_case_aiqiyi.ee8c68e.png);
    }

    .m-hp-tieba-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_case_baidujiulv.493d7aa.png);
    }

    .m-hp-airap-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_case_airap.8b1889f.png);
    }

    .m-hp-qichedasheng-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_case_wzcx.f3bbc03.png);
    }

    .m-hp-changlong-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_case_changlong.f231af8.png);
    }

    .m-hp-content {
      width: 86%;
      margin: 0 auto;
    }

    /** 登录按钮组 **/
    .m-hp-header-btn-group {
      text-align: center;
      margin-top: 33px;
      transition: all 0.5s;
      cursor: pointer;
    }

    .m-hp-header-btn-group .header-btn {
      text-align: center;
      width: 168px;
      height: 56px;
      font-size: 20px;
      line-height: 56px;
      display: inline-block;
      cursor: pointer;
      margin: 0 12px;
      box-sizing: border-box;
      border-radius: 3px;
    }

    .m-hp-header-btn-group .header-btn-bgcolor {
      color: #ffffff;
      background: #3C76FF;
    }

    .m-hp-header-btn-group .header-btn-bgcolor:hover {
      background: #769EFF;
    }

    .m-hp-header-btn-group .header-btn-border {
      color: #fff;
      border: 1px solid #fff;
      cursor: pointer;
    }

    .m-header-button-mobile {
      width: 2.65rem;
      height: 0.91rem;
      margin-top: 0.6rem !important;
      font-size: 0.42rem;
      border-radius: 0.03rem;
      cursor: pointer;
      color: #fff;
      line-height: 0.91rem;
      text-align: center;
      transition: all 0.5s;
      display: block !important;
      border: 1px solid #fff;
    }

    .m-hp-apply-footer {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_footer_bk.fa5368e.jpg) center no-repeat;
      height: 244px;
      color: #fff;
      text-align: center;
      background-size: cover;
    }

    .m-hp-apply-footer .m-hp-apply-slogan {
      font-size: 32px;
      line-height: 40px;
      padding-top: 65px;
    }

    .m-hp-apply-footer .m-hp-apply-btn {
      cursor: pointer;
      font-size: 20px;
      width: 147px;
      height: 49px;
      line-height: 49px;
      margin: 25px auto 0;
      border: 1px solid #fff;
      border-radius: 4px;
      transition: all 0.6s;
    }

    .m-hp-apply-footer .m-hp-apply-btn:hover {
      background: #fff;
      border: 1px solid #fff;
      color: #0061FF;
    }

    .m-hp-develop-promoting,
    .m-hp-successful-case {
      background: #FAFAFA;
    }

    /**banner**/
    .m-hp-header {
      position: relative;
      height: 500px !important;
    }

    .m-hp-header .m-hp-content {
      width: auto;
    }

    .m-hp-header.banner-main {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/header_banner.9501fc8.jpg) center no-repeat;
      background-size: cover;
    }

    .m-hp-header.banner-main.mobile {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/header_banner_m.9be0bf9.jpg) center no-repeat;
      background-size: cover;
    }

    .m-hp-header.banner-second {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/banner.974fee4.jpg) center no-repeat;
      background-size: cover;
    }

    .m-hp-header.banner-second .m-hp-header-desc {
      max-width: 420px;
    }

    .m-hp-banner {
      cursor: pointer;
    }

    .m-hp-banner>.swiper-pagination-bullets,
    .m-hp-banner .swiper-pagination-custom,
    .m-hp-banner .swiper-pagination-fraction {
      bottom: 30px !important;
    }

    .m-hp-banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0 15px;
    }

    .m-hp-banner .swiper-pagination-bullet {
      width: 47px;
      height: 3px;
      background: #fff;
      border-radius: 0;
      margin: 0 15px !important;
    }

    .m-hp-header-title {
      text-align: center;
    }

    .m-hp-header-desc {
      margin: 0 auto;
    }

    .m-hp-header-button {
      margin: 0 auto;
    }

    .m-hp-info {
      font-size: 18px;
      color: #000;
      text-align: center;
      line-height: 18px;
      margin-bottom: 50px;
    }

    @media only screen and (min-width: 769px) {
      .m-hp-wrapper {
        min-width: 1200px;
      }

      .m-hp-content {
        width: 1200px;
        padding-bottom: 80px;
      }

      .m-hp-wrapper {
        width: 100%;
      }

      .m-hp-header {
        height: 540px;
      }

      .m-hp-ability,
      .m-hp-develop-promoting,
      .m-hp-access-process,
      .m-hp-successful-case {
        border: 0 solid;
      }

      .m-hp-apply-access {
        background: #FAFAFA;
      }

      .m-hp-footer {
        background: #191919;
        height: 173px;
      }

      .m-hp-title {
        font-weight: bold;
        font-size: 32px;
        width: 1200px;
        margin: 0 auto;
        color: #000;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
        padding: 80px 0 20px 0;
      }

      .m-hp-info {
        width: 1200px;
        margin: 0 auto 50px auto;
      }

      .m-hp-list {
        text-align: center;
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
      }

      .m-hp-list>li {
        position: inherit;
        float: left;
        width: 25%;
        padding: 5px 0;
        z-index: 2;
      }

      .m-hp-keyword {
        font-weight: bold;
        font-size: 26px;
        color: #000;
        text-align: center;
        padding-top: 17px;
      }

      .m-hp-desc {
        margin-top: 20px;
        line-height: 25px;
        font-size: 14px;
        color: #666;
        text-align: center;
      }

      /** 头部 **/
      .m-hp-header-logo {
        display: inline-block;
        width: 120px;
        height: 21px;
        margin-top: 20px;
        background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_logo.3ed4ce0.png) center no-repeat;
        background-size: contain;
      }

      .m-hp-header-title {
        font-size: 50px;
        line-height: 75px;
        color: #fff;
        letter-spacing: 2.53px;
        padding-top: 112px;
      }

      .m-hp-header-mid {
        position: absolute;
        left: 50%;
      }

      .m-hp-header-slogan {
        width: 500px;
        height: 96px;
        top: 24.9%;
        margin-left: -250px;
        background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_header_slogan.6f0a124.png) no-repeat;
        background-size: contain;
      }

      .m-hp-header-desc {
        text-align: left;
        width: 622px;
        font-size: 18px;
        color: #999999;
        line-height: 30px;
        margin-top: 14px;
      }

      .m-hp-header-con {
        font-size: 18px;
        letter-spacing: 0.2px;
        text-align: center;
        line-height: 35px;
        color: #fff;
      }

      .m-hp-openbeta-tit {
        font-size: 20px;
        margin-bottom: 24px;
      }

      .m-hp-openbeta-tit span {
        font-size: 20px;
        letter-spacing: 9.5px;
        text-align: center;
        line-height: 31px;
      }

      .m-hp-header-button {
        width: 168px;
        height: 58px;
        font-size: 20px;
        margin-top: 63px;
        border-radius: 3px;
        cursor: pointer;
        color: #ffffff;
        background: #0061FF;
        line-height: 58px;
        text-align: center;
        transition: all 0.5s;
      }

      .m-hp-header-button:hover {
        background: #3388FF;
      }

      /** 成功案例 **/
      .m-hp-successful-case {
        background: #fff;
      }

      .m-hp-successful-case .m-hp-title {
        padding: 84px 0 32px 0;
      }

      .m-hp-case-icon {
        vertical-align: middle;
        display: inline-block;
        width: 87px;
        height: 87px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        transition: all 0.3s;
        border-radius: 50%;
      }

      .m-hp-case-keyword {
        display: inline-block;
        vertical-align: middle;
        text-indent: 0;
        font-size: 30px;
        padding-left: 16px;
        color: #000;
      }

      .m-hp-item-wrapper.on .m-hp-case-icon {
        border-radius: 0;
      }

      .m-hp-info-list li,
      .m-hp-copyright-list li {
        display: inline-block;
      }

      .m-hp-footer-wrapper a,
      .m-hp-copyright-list li {
        padding: 0 20px;
        color: #999;
        text-decoration: none;
      }

      .m-hp-footer {
        display: block;
      }

      .m-hp-case-list li {
        width: 33.3%;
        text-align: left;
        text-indent: 40px;
        padding: 0;
        cursor: default;
      }

      .m-hp-item-wrapper {
        width: 321px;
        height: 141px;
        line-height: 141px;
        border: 1px solid transparent;
        transition: all 0.6s;
      }
    }

    @media only screen and (max-width: 769px) {
      * {
        -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
      }

      .m-hp-wrapper {
        width: 100%;
      }

      .m-hp-ability,
      .m-hp-develop-promoting,
      .m-hp-access-process,
      .m-hp-successful-case {
        border: 0 solid;
      }

      .m-hp-header-button,
      .m-hp-footer {
        display: none;
      }

      .m-hp-title {
        width: 11.41rem;
        margin: 0 auto;
        font-size: 0.72rem;
        font-weight: bold;
        text-align: center;
        line-height: 0.64rem;
        padding: 1.5rem 0 0.42rem 0;
      }

      .m-hp-info {
        font-size: 0.42rem;
        line-height: 0.42rem;
      }

      .m-hp-list {
        text-align: center;
        width: 11.41rem;
        margin: auto;
      }

      .m-hp-list li {
        float: left;
        text-align: left;
        width: 100%;
        height: 3.81rem;
        position: relative;
      }

      .m-hp-keyword {
        color: #333;
        font-size: 0.48rem;
        padding-top: 1rem;
      }

      .m-hp-desc {
        margin-top: 0.33rem;
        color: #666;
        font-size: 0.42rem;
        line-height: 0.65rem;
      }

      .m-hp-words {
        max-width: 8.12rem;
        vertical-align: middle;
        display: inline-block;
      }

      /** 头部 **/
      .m-hp-header {
        position: relative;
        height: 6.53rem !important;
        overflow: hidden;
      }

      .m-hp-header.banner-second .m-hp-header-con {
        max-width: 9.6rem;
      }

      .m-hp-banner>.swiper-pagination-bullets,
      .m-hp-banner .swiper-pagination-custom,
      .m-hp-banner .swiper-pagination-fraction {
        bottom: 0.3rem !important;
      }

      .m-hp-banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 0.25rem;
      }

      .m-hp-banner .swiper-pagination-bullet {
        width: 0.81rem;
        height: 0.035rem;
        background: #fff;
        border-radius: 0;
      }

      .m-hp-header-title {
        font-size: 0.64rem;
        margin-top: 1.2rem;
        color: #FFF;
        letter-spacing: 0.03rem;
        line-height: 0.64rem;
      }

      .m-hp-header-desc {
        font-size: 0.33rem;
        color: #FFF;
        line-height: 0.6rem;
        margin-top: 0.3rem;
      }

      .m-hp-header-btn-group {
        margin-top: 0.8rem;
      }

      .m-hp-header-btn-group .header-btn {
        width: 2.65rem;
        height: 0.91rem;
        line-height: 0.91rem;
        font-size: 0.42rem;
      }

      .m-hp-header-logo {
        width: 3rem;
        height: 0.6rem;
        position: absolute;
        top: 7.9%;
        left: 3.3%;
        background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_header_logo.971f5b4.png) center no-repeat;
        background-size: contain;
      }

      .m-hp-header-mid {
        position: absolute;
        left: 50%;
      }

      .m-hp-header-slogan {
        width: 5.84rem;
        height: 1.13rem;
        top: 2.16rem;
        margin-left: -2.92rem;
        background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_header_slogan.6f0a124.png) no-repeat;
        background-size: contain;
      }

      .m-hp-header-con {
        margin: 0 auto;
        font-size: 0.34rem;
        text-align: center;
        width: 10.5rem;
        line-height: 0.6rem;
      }

      .m-hp-openbeta-tit {
        font-size: 0.3rem;
        letter-spacing: 0.042rem;
        text-align: center;
        margin-bottom: 0.29rem;
      }

      .m-hp-apply-footer {
        height: 3rem;
        background-size: 100% 100%;
        vertical-align: middle;
      }

      .m-hp-apply-footer:after {
        vertical-align: middle;
        content: '';
        display: inline-block;
        height: 100%;
      }

      .m-hp-apply-footer .m-hp-apply-slogan {
        font-size: 0.45rem;
        line-height: 0.4rem;
        padding-top: 0;
        display: inline-block;
        vertical-align: middle;
      }

      .m-hp-apply-footer .m-hp-apply-btn {
        width: 2.39rem;
        height: 0.82rem;
        line-height: 0.82rem;
        font-size: 0.39rem;
        margin-top: 0.43rem;
        transition: none;
      }

      .m-hp-apply-footer .m-hp-apply-btn.m-hp-isbox:hover {
        background: transparent;
        color: #fff;
      }
    }
  
  
    /** 底部 **/
    .m-hp-footer-wrapper {
      font-size: 14px;
      color: #999;
      text-align: center;
      line-height: 36px;
      padding-top: 50px;
    }

    .m-hp-footer-wrapper li a {
      cursor: pointer;
    }

    .m-hp-footer-wrapper li:hover a {
      color: #0061FF;
    }
  
  
    /** 新闻列表 **/
    .m-hp-news-container {
      background: #FAFAFA;
      height: 144px;
      position: relative;
      overflow: hidden;
    }

    .m-hp-news-container .m-hp-content {
      width: 1120px;
      position: absolute;
      left: 50%;
      margin-left: -560px;
    }

    .m-hp-news-container .m-hp-pc-content {
      width: 1120px;
      margin: 0 auto;
    }

    .m-hp-news-container.hide {
      display: none;
    }

    .m-hp-news-container li {
      height: 144px;
      width: 280px;
      padding: 0 20px;
      display: inline-block;
      box-sizing: border-box;
      cursor: pointer;
    }

    .m-hp-news-container li:last-child {
      margin-right: 0;
    }

    .m-hp-news-container li .m-hp-news-type {
      vertical-align: middle;
    }

    .m-hp-news-container li .m-hp-news-type i {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }

    .m-hp-news-container li .m-hp-news-type i.quick_news {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABxxJREFUaAXtmGtsVEUUx9ttu7WtlbbIQ6iICinUB/GDjwRQWilITaRabIzQNpTt2w+aqAlBxcSYgB80ITza5V3ASDWCQRsegRKJIoZIiBqoUaKmKg/bUmpb+vZ3bncus/fuLi3dbfqhk8zOzJkz5/zPzDlnZm9Y2GgZ3YEh7UD4kFYP4+KtW7fGd3V1pff19Z0tLS39Xake8QZUVFSkAracmgv4+PDw8GbqPcXFxc1iRKT8jLRSW1sbWVdXlwXgV6hP6fgYj4mMjLwb2sgzADeZ1N3dXQj4YoDepQPX+06n87IajwgX2rRp0zzcohzQWQC7mVf0lpSURMHfK0bcjFkZGvTWE5S5CBbgqVS/OgDLdJ+x2fSvKPCyYNgN2LJly4NkkzLqMkDFW1EDrg16rEa/Bm01tI+ERntJmxseAyorK6NQmtXb21sOcCMoAWLiAGALg11UAbfKnAgLu+JwOJ6Bd7yiwetlgENNhKKVoMS/3wXAH4CvRodXRgHMz9TypKSkSbRn4FtNdQoWxn9GRETMIV3+QH+Chs/LgJC4EDueBpCyzs5OIyjpm/oB08VgP7SNBONxmcDIN2nWSl8KPOcBn1FYWFgvY4w3DWBdaAzYvXv3Ha2trXLZlKFQLh9r+Rt3cEN0s6v/qEmMXQu/GGAUwJ+mLgL8vxptgtoEZATXABWULS0tklFuV0pVC5jj9DekpKTsT0tL61Z0ADm4ZSsB71I0eGujoqIWr1ixQmJCL8E9AQlKALyABskmT+qapA8QAVCFG2xgJ89Z56urq52A/xh6tppjzf4pU6a8lJmZ2aFoqkWXacCQTgBfnYyiInatCOETlQKt/QkFGxMTE3fl5OT8p9HNblVVVVxjY+M+CBmKiMwdBLIL8D2KprfMmy4EffAutHnz5nSu+DIWL2Y3vAIf4RKUn1MlKL+m9Vtwt6S2trYaZDyumFj/ITHxOu2NSFeTnlY/AfpeBvh9SkhQ4td5yBDgMy0yxU3+guaOjo52L1++/KJ13jqWlIq7HQbAA9rcWzyN39fGti7uFtHQ0NDJhEOMJJaceix57aasxr8fQkkZ4Jcx9BWUtbjJhunTp3+hC5K1/go7Pw3wR5A71cPTC5hyTqzC3xpFb25uvpO+uq8arDpNA/Dv52F8Df+eqxZr7TVAV4l/+wpKjc/WJVhn4X6HAG8EIsDF5XIBv9fG7JtgBjDTXu4j7IYBKJF3iVzl1tIE6LcJyp3+gtK6QB9zmnOQ+yV1jNAB30aTDfiDOl+gfk9Pj2kAcmwGqKPxlVFEbiIn8h4+uIMTKt62bdt9gZTpc2xKJmvF5xX4q2xGxmDAe+SZBrABNgOMEyAQ13Ptx6BM8vLDtHpwJ0ITenZHR4dc+xcAcgRhR+Li4o4tXbq0yaPIbNj5l5GxA4I84qRchH9BUVHRj/3Dgf+yzm8KFSk6UEMqeXp8e3v7fABIns6gnWxM+P6RYJSr3zAoISHhJDneBet6bRPE4AWkyt98iwhM5SQ/QNYbwoWclchZo68wg1gR8/LyLtOXW1JqGHfATFwhQyrDeVQ9MzkQ/phU6KsAb33Ly8Um4M23D3yDLaYLoce3CwWS6Mk65+BZJ08IAD1BVjFOh51/FKERaj39WNVn7mR8fPyzvlxM8QykRaZpAPyDN0BXwk5KCjzhqe9s37494fr162mMDYNop1El2xyMjY1dAvhWGQ+lIMuMAd5WQzPACoQb+Co0eddIlQCfyiePiS6X6xSKbU8D3PFe6M3MNwr/AEvAE7AF8QCFDpqNYMzDHXayUL4mnKUeY0ePEvgn/N0x8IezTp4RRqyOHTs2Gl4Zm2U4DfgUQEtMzZ4OJyJu+T1zhkHJycnfqSc19844UrckFSlNvJuS+rs3foNigMQCiipFLICaiJWSGyr6e3IJymOObHa/dc4ybmf8DcniKEbVU40XAnLPcwnOtPAG7avEbSjKEeG08jK1GQD4dB08gE7BF02dxRp9I2OgzYd3Pq1Z4LEFsEyqp4TJGIqO2+1+DgDmyxPwh6lz2dFHYmJixtF/kVpB/cWffuZkY2zFdpHZOIZIIDPN5kH2CWKM+wIgp/n3lU0wiu+H5efnN9B85qlycSbDL5/R0+F9mjZZ+HCpr6S1lpAaQAaRT4YHUCpuIeVXPsxm+ss6wsDFWU9T5any/0RiJop31HlaWwmZAZ6dPIRGeQxKcF8C/MKCgoIrNhQBCCSEgG+okMTAnj17EnED+RNjHD/gW7jgFgH+QgCstzQVdAMA6+Tv6AHApwoixp1cWFncvmduCeFNFgXdhQAul81s0Qt4eU7k4dfHZByKEnQDdJAY8Co+vFenBbsfdBfSAK4B/DptHJJuUAzAbaxf1HbyblkZEsQWoUExwJMavxXZuM2+GTNmuCx6Rv6wpqYmmq9vKSMf6SjC0R3w2oH/AbbQLnzfg+qJAAAAAElFTkSuQmCC) no-repeat center;
      background-size: contain;
    }

    .m-hp-news-container li .m-hp-news-type i.normal_news {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAnJJREFUaAXtWT1MwkAUBtIENAzi5qRu6qZObjq56sIgJAZCBKKLcXAzjLBo4sLP5sCgi04ODg4ODiYOJpo4GRfdAK0MYqT41RBSKGnvXkta411y4Xr3/r737t69Uo9HNOGB/+0Brxn8QqGw4PP5ps3orK43m03F7/dfxePxJx5ZhgCKxeKSoiiXPAKt0Hq93rdgMDgejUZlVjk+I8JWqzVrtG73GvSN1Ov1SR65EgfxPWhvOOiZSeH5FRg/ysygIWQGACUXqVRqR8Nr2xDnbB7CBgvANms5BeXz+S04bxM9n0wmD3vZDc9AL7ETzzA8i+01hZ7rp9/1AGD0sGo4AATQdVnzLwDo5/jOnADQcYVDAxEBhxzfUfvnI8B8E3cgtwflcjmEuiXQO8/yHAqFPsLhcJ2F1oyGFAFUqTlZlquoVF8pvVKp1CBjzcw4lnUSAFwoYRbhBjQSZKwarDMvkbYQrvcMDNjD7xCzpm7CKl6SDrqnaE8kACiqjqBO7Y430hZy3GqNAQKAxhmODElnAClwHenT6iHeQLu2ipoEABkoA8UT+KXqH4MDtsFsGQDpDCB9nlAtb/N9Q8apRRm/7KQIII3uopTIuqGUIAFQoUcikZodHrQqg7SFrCq1k18AsNObFFkiAhSv2cnjlgjctUHJuB+eeQCS0yiPEjNafNhINhqNc0mSbhOJxLsZvXbdFQBisdgnjDrWGsY6dssWYrVXR8cTgUVUofs6CQOeQNGn+0NXq5IZACrPObVrmd0wNtxCePF+cIORqg3ITo/ouvrdMDwqY6lUWsYn0Bl17FSDI7+wlc7S6fSLUzYIvcIDbvXAD6922b9WlCyoAAAAAElFTkSuQmCC) no-repeat center;
      background-size: contain;
    }

    .m-hp-news-container li .m-hp-news-type>* {
      vertical-align: middle;
    }

    .m-hp-news-container li .m-hp-news-title {
      font-size: 18px;
      color: #000;
      line-height: 26px;
      padding-top: 32px;
      min-height: 52px;
    }

    .m-hp-news-container li .m-hp-news-info {
      font-size: 14px;
      color: #666;
      line-height: 14px;
      margin-top: 12px;
    }

    .m-hp-news-container li .m-hp-news-info .m-hp-news-date {
      position: relative;
      top: 3px;
      margin-left: 30px;
    }

    .m-hp-news-container li:hover {
      background: #f3f3f3;
    }

    .m-hp-news-entry {
      z-index: 9;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: 560px;
      text-align: center;
      width: 66px;
      height: 100%;
      line-height: 144px;
      background: #F0F0F0;
    }

    .m-hp-news-entry img {
      width: 14px;
      vertical-align: middle;
    }

    .m-hp-news-entry:hover {
      background: #E6E6E6;
    }

    @media only screen and (min-width: 769px) {
      .m-hp-news-container .content {
        display: none;
      }
    }

    @media only screen and (max-width: 769px) {
      .m-hp-news-container {
        height: 1.44rem;
        line-height: 1.44rem;
        font-size: 0.48rem;
      }

      .m-hp-news-container .m-hp-pc-content {
        display: none;
      }

      .m-hp-news-container .content {
        display: block;
        height: 1.44rem;
      }

      .m-hp-news-container .content li {
        width: 100%;
        display: block;
      }

      .m-hp-news-container .m-hp-news-entry {
        width: 1.44rem;
        line-height: 1.44rem;
      }
    }
  
  
    /**特色能力**/
    .m-hp-ability {
      background: #fff;
    }

    @media only screen and (min-width: 769px) {
      .m-hp-ability-icon {
        width: 90px;
        height: 90px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        margin: 0 auto;
      }
    }

    @media only screen and (max-width: 769px) {
      .m-hp-ability {
        padding-bottom: 0.5rem;
      }

      .m-hp-ability .m-hp-info {
        margin-bottom: 1.47rem;
      }

      .m-hp-ability li {
        width: 50%;
        text-align: center;
        height: 4.68rem;
        margin-bottom: 1rem;
      }

      .m-hp-ability .m-hp-keyword {
        font-weight: bold;
        font-size: 0.54rem;
        padding-top: 0.14rem;
      }

      .m-hp-ability .m-hp-desc {
        margin-top: 0.44rem;
        font-size: 0.33rem;
      }

      .m-hp-ability .m-hp-ability-icon {
        width: 2.02rem;
        height: 2.02rem;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        margin: 0 auto 0.14rem auto;
      }
    }
  
  
    .m-hp-access1-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_access_1.2a69ea9.jpg);
    }

    .m-hp-access2-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_access_2.2c14ace.jpg);
    }

    .m-hp-access3-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_access_3.26e0eed.jpg);
    }

    .m-hp-access4-icon {
      background-image: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/home_access_4.0756a7f.png);
    }

    .m-hp-access-process li {
      padding-top: 0;
    }

    /** 接入流程**/
    @media only screen and (min-width: 769px) {
      .m-hp-access-process {
        background: #F8F8F8;
      }

      .m-hp-access-process .m-hp-title {
        padding-bottom: 50px;
      }

      .m-hp-access-process .m-hp-list {
        position: relative;
        display: flex;
      }

      .m-hp-access-process .m-hp-list li {
        width: 24%;
        height: 270px;
        text-align: left;
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid #E4E4E4;
        margin-left: 1%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .m-hp-access-process .m-hp-list li .m-hp-access-detail {
        margin: 47px 0 0 44px;
      }

      .m-hp-access-process .m-hp-list li .m-hp-access-line {
        width: 48px;
        height: 4px;
        background: #333;
        margin-top: 9px;
      }

      .m-hp-access-process .m-hp-list li .m-hp-access-title {
        font-size: 25px;
        color: #000;
        line-height: 40px;
        letter-spacing: 0;
      }

      .m-hp-access-process .m-hp-list li:first-child {
        margin-left: 0;
      }

      .m-hp-access-process .m-hp-list li img {
        width: 93px;
        height: 72px;
      }

      .m-hp-access-process .m-hp-list .m-hp-title {
        padding: 109px 0 55px 0;
      }

      .m-hp-access-process .m-hp-list .m-hp-access-keyword {
        color: #000;
        font-size: 25px;
        line-height: 36px;
      }

      .m-hp-access-process .m-hp-list .m-hp-desc {
        font-size: 14px;
        color: #666;
        line-height: 22px;
        text-align: left;
        width: 200px;
      }

      .m-hp-access-process .m-hp-list .m-hp-desc * {
        white-space: normal;
      }
    }

    @media only screen and (max-width: 769px) {
      .m-hp-access-process {
        background: #F8F8F8;
        padding-bottom: 1.5rem;
      }

      .m-hp-access-process .m-hp-title {
        padding-bottom: 1.2rem;
      }

      .m-hp-access-process li {
        border: 0.01rem solid #E4E4E4;
        height: 3.21rem;
        background: #fff;
        margin-bottom: 0.18rem;
      }

      .m-hp-access-process li>* {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: inline-block;
      }

      .m-hp-access-process li .m-hp-access-line {
        width: 0.98rem;
        height: 0.05rem;
        margin-top: 0.14rem;
        background: #000;
      }

      .m-hp-access-process li .m-hp-access-title {
        font-size: 0.51rem;
        color: #000;
        line-height: 0.51rem;
      }

      .m-hp-access-process li .m-hp-access-desc {
        font-size: 0.39rem;
        color: #666;
        line-height: 0.52rem;
      }

      .m-hp-access-process li .m-hp-access-desc div {
        max-width: 8.5rem;
      }

      .m-hp-access-process li img {
        width: 1.8rem;
        height: 1.4rem;
        margin-right: 0.54rem;
        vertical-align: top;
      }
    }
  
  
    .m-hp-develop-promoting .m-hp-list>li {
      padding: 0;
      width: 24.2%;
      height: 360px;
      margin-right: 1%;
      position: relative;
      overflow: hidden;
    }

    .m-hp-develop-promoting .m-hp-list>li .m-hp-devpromoting-desc {
      max-width: 208px;
      margin: 10px auto 13px auto;
    }

    .m-hp-develop-promoting .m-hp-list>li>* {
      position: absolute;
      left: 0;
      top: 0;
      display: inline-block;
      height: 100%;
      width: 100%;
      background-size: cover;
    }

    .m-hp-develop-promoting .m-hp-list>li:last-child {
      margin-right: 0;
    }

    .m-hp-develop-promoting .m-hp-devpromoting-modal {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background: #002D88;
      opacity: 0.5;
    }

    .m-hp-develop-promoting .m-hp-devpromoting-icon {
      position: relative;
      height: 90px;
      margin-top: 71px;
    }

    .m-hp-develop-promoting .m-hp-devpromoting-title {
      font-weight: bold;
      position: relative;
      font-size: 28px;
      color: #fff;
      text-align: center;
      line-height: 32px;
      margin-top: 32px;
    }

    .m-hp-develop-promoting .m-hp-devpromoting-desc {
      position: relative;
      font-size: 16px;
      color: #fff;
      text-align: center;
      line-height: 26px;
      margin-top: 15px;
    }

    @media only screen and (min-width: 769px) {

      /** 开发支持 **/
      .m-hp-develop-promoting .m-hp-list>li:hover>a {
        background: rgba(60, 118, 255, 0.9);
      }

      .m-hp-develop-promoting .m-hp-list>li:hover>a .m-hp-devpromoting-content {
        top: -150px;
      }

      .m-hp-develop-promoting .m-hp-list>li:hover>a .m-hp-devpromoting-details,
      .m-hp-develop-promoting .m-hp-list>li:hover>a .m-hp-learnmore {
        opacity: 1;
      }

      .m-hp-develop-promoting .m-hp-list>li:hover>a .m-hp-devpromoting-desc,
      .m-hp-develop-promoting .m-hp-list>li:hover>a .m-hp-devpromoting-modal {
        display: none;
      }

      .m-hp-develop-promoting .m-hp-list>li:hover>a .m-hp-devpromoting-icon {
        opacity: 0;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-details {
        margin-top: 35px;
        opacity: 0;
        font-size: 16px;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-details a {
        color: #fff;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-details li {
        color: #fff;
        height: 30px;
        line-height: 30px;
        margin: 5px 0;
        text-indent: 10px;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-details li:hover .m-hp-triangle-r {
        opacity: 1;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-details .m-hp-triangle-r {
        filter: alpha(opacity=0);
        opacity: 0;
      }

      .m-hp-develop-promoting .m-hp-triangle-r {
        display: inline-block;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAKBJREFUOBFj+P//vzgQyzOQC4CanwDxbyCeCMRCJJsD1IQM3gI5uUDMQrRByLqR2NeAbA+iDEHShI25DSioidcgbLrQxEDhMwmIsYcPmmJ8XOzhg08HDrmdyF5iQuYQyWZGUYfDFmzCIC/kATFqFGNTiSZGUSBuBxpGVjSCEpInil9xcdCciz2qcGkGiQMNeA7E+P1JwAAJoAHS+NTgkwMAHiS+RYtGS/kAAAAASUVORK5CYII=) center;
        width: 7px;
        height: 7px;
        background-size: contain;
        position: relative;
        left: 7px;
        top: -2px;
      }

      .m-hp-develop-promoting .m-hp-learnmore {
        display: block;
        opacity: 0;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 15px;
        width: 120px;
        height: 38px;
        line-height: 38px;
        margin: 0 auto;
        border: 1px solid #fff;
        margin-top: 35px;
        border-radius: 3px;
      }

      .m-hp-develop-promoting .m-hp-learnmore .m-hp-triangle-r {
        left: 5px;
      }

      .m-hp-develop-promoting .m-hp-learnmore:hover {
        background: #fff;
        color: #0061ff;
        border: 1px solid #0061ff;
      }

      .m-hp-develop-promoting .m-hp-learnmore:hover .m-hp-triangle-r {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAQpJREFUOBGdkj1OA0EMhT9vtqGNkNLBDZC4BRyDJG1AIhfYK5AmFMAtULgETZoUoUJCouIEgLEVzS4O2YHF0mhsj/3m+QfGOmCkh/xTCj54RHliqFcG1O+KI5yp1knCm+kVB8yp5L32Z5QivCl9YzPjmaWxOQlvLUZksB0kLCiYciOr7adkRwbJm27llE9jM9RZW3/yAA6klHYmdtYGNKHSMuH7/TtAim76c59c3QCarF6jdmGwGfGFjThMJ9TzHbnWBd+HOWL7cSe+J0HyAMKDdekyN8bdAILPfWo/LsJ3O4w4Ba9TOLc6j/6S7HjO4NWS9u3e1Hn7s04PbJOSPY5t23pcy0tbUM7/BYOpQYRBr0DsAAAAAElFTkSuQmCC) center;
        background-size: contain;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-content {
        position: absolute;
        width: 100%;
        top: 0;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-content .m-hp-devpromoting-details {
        transition: all 0.6s ease 0.2s;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-content .m-hp-learnmore {
        transition: opacity ease 0.8s 0.3s;
      }
    }

    @media only screen and (max-width: 769px) {
      .m-hp-develop-promoting {
        padding-bottom: 1.3rem;
      }

      .m-hp-develop-promoting .m-hp-list>li {
        width: 100%;
        height: 3.41rem;
        margin: 0 0 0.2rem 0;
      }

      .m-hp-develop-promoting .m-hp-info {
        margin-bottom: 1.21rem;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-icon {
        width: 1.3rem;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-modal {
        display: none;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-content {
        height: 100%;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-content>* {
        float: left;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }

      .m-hp-develop-promoting .m-hp-devpromoting-content .right {
        margin-left: 0.64rem;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-content img {
        width: 1.62rem;
        height: auto;
        position: relative;
        margin: 0 0 0 0.8rem;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-content .m-hp-devpromoting-title {
        text-align: left;
        font-size: 0.51rem;
        line-height: 0.64rem;
        margin-top: 0.5rem;
      }

      .m-hp-develop-promoting .m-hp-devpromoting-content .m-hp-devpromoting-desc {
        margin-top: 0.18rem !important;
        text-align: left;
        font-size: 0.33rem;
        line-height: 0.48rem;
      }
    }
  
  
    .m-hp-network-support {
      background: #fff;
    }

    .m-hp-network-item {
      width: 780px;
      height: 393px;
    }

    .m-hp-network-item .m-network-item-title {
      margin: 0 auto 10px auto;
      line-height: 20px;
      font-size: 14px;
      color: #666;
      text-align: center;
    }

    .m-hp-network-item .m-network-item-title div {
      display: inline-block;
      width: 45%;
      text-align: center;
    }

    .m-hp-network-item .image-container {
      width: 780px;
      height: 393px;
    }

    .m-hp-network-item .image-container img {
      width: auto;
        margin:auto;
        max-height: 100%;
        max-width: 100%;
        height:100%;
    }

    @media only screen and (max-width: 769px) {
      .m-hp-network-support .m-hp-content {
        width: 100%;
      }

      .m-hp-tabs-horizontal .m-hp-tabs-container {
        margin-bottom: 1.5rem;
      }

      .m-hp-network-support {
        border: 1px solid #fff;
        background: #fff;
      }

      .m-hp-info {
        margin-bottom: 1.25rem;
      }

      .m-hp-network-item {
        width: 100%;
        padding-top: 0.72rem;
        box-sizing: border-box;
      }

      .m-hp-network-item .m-network-item-title {
        width: 100%;
        font-size: 0.28rem;
        margin: 0 auto 0.09rem;
      }

      .m-hp-network-item .image-container {
        width: 100%;
        height: 6.67rem;
        text-align: center;
      }

      .m-hp-network-item .image-container img {
        width: auto;
        margin:auto;
        max-height: 100%;
        max-width: 100%;
        height:100%;
      }
    }
  
  
    .m-hp-tabs-horizontal {
      width: 100%;
      margin: 0 auto;
    }

    .m-hp-tabs-horizontal .swiper-container {
      overflow-y: hidden;
    }

    .m-hp-tabs-horizontal .m-hp-tabs-nav {
      display: flex;
      display: -moz-flex;
      width: 8.59rem;
      margin: 0 auto;
      border-bottom: 0.06rem solid #efefef;
    }

    .m-hp-tabs-horizontal .m-hp-tabs-nav>li {
      min-width: 33%;
      display: inline-block;
      font-size: 0.42rem;
      color: #666;
      /* OLD - iOS 6-, Safari 3.1-6 */
      /* OLD - Firefox 19- */
      /* Chrome */
      /* IE 10 */
      flex: 1;
      padding-bottom: 0.13rem;
      position: relative;
      bottom: -0.16rem;
      text-align: center;
    }

    .m-hp-tabs-horizontal .m-hp-tabs-nav>li:first-child {
      text-align: left;
    }

    .m-hp-tabs-horizontal .m-hp-tabs-nav>li:last-child {
      text-align: right;
    }

    .m-hp-tabs-horizontal .m-hp-tabs-nav>li.on span {
      font-weight: bold;
      font-size: 0.48rem;
      color: #0061FF;
      border-bottom: 0.06rem solid #0061FF;
    }

    .m-hp-tabs-horizontal .m-hp-tabs-nav>li span {
      display: inline-block;
      padding-bottom: 0.23rem;
    }

    .m-hp-tabs-horizontal .m-hp-tabs-container {
      height: 7.45rem;
      position: relative;
      overflow: hidden;
    }

    .m-hp-tabs-horizontal .m-hp-tabs-list {
      transition: all 0.4s;
      position: absolute;
    }

    .m-hp-tabs-horizontal .m-hp-tabs-list li {
      text-align: center;
      float: left;
    }
  
  
    .m-hp-tabs-horizontal li {
      float: left;
    }

    .m-hp-tabs-vertical .m-hp-tabs-list {
      position: relative;
      transition: all 0.4s;
    }

    .m-hp-tabs-vertical .m-hp-tabs-container {
      overflow: hidden;
      text-align: center;
      margin-left: 226px;
      height: 150px;
    }

    .m-hp-tabs-vertical .m-hp-tabs-list li {
      -webkit-animation: hideTabs 0.5s forwards;
      animation: hideTabs 0.5s forwards;
      opacity: 0;
      position: absolute;
      height: 100px;
      line-height: 100px;
      overflow: hidden;
    }

    .m-hp-tabs-vertical .m-hp-tabs-list li.on {
      opacity: 0;
      -webkit-animation: showTabs 0.8s forwards;
      animation: showTabs 0.8s forwards;
    }

    @-webkit-keyframes showTabs {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes showTabs {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @-webkit-keyframes hideTabs {
      0% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes hideTabs {
      0% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    .m-hp-tabs-vertical .m-hp-tabs-nav {
      float: left;
      border-right: 3px solid #EFEFEF;
    }

    .m-hp-tabs-vertical .m-hp-tabs-nav li {
      cursor: pointer;
      height: 70px;
      line-height: 70px;
      width: 90px;
      text-align: right;
      position: relative;
      right: -3px;
      font-size: 18px;
      padding-right: 14px;
      margin-bottom: 85px;
    }

    .m-hp-tabs-vertical .m-hp-tabs-nav li:last-child {
      margin-bottom: 0;
    }

    .m-hp-tabs-vertical .m-hp-tabs-nav li.on {
      font-weight: bold;
      border-right: 3px solid #0061FF;
      color: #0061FF;
      font-size: 22px;
    }
  
  
    /** tabs **/
    .m-hp-successful-case .m-hp-success-tab-container>*,
    .m-hp-successful-case .m-hp-tabs-horizontal>li {
      float: left;
    }

    .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-container {
      width: 100%;
      height: 150px;
      margin-left: -110px;
      overflow: hidden;
      text-align: center;
    }

    .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-list {
      position: relative;
    }

    .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-list li {
      height: auto;
      width: 100%;
    }

    .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-nav {
      border-right: 3px solid #EFEFEF;
      z-index: 9;
      position: relative;
    }

    .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-nav li {
      cursor: pointer;
      height: 62.8px;
      line-height: 62.8px;
      width: 90px;
      text-align: right;
      position: relative;
      right: -3px;
      font-size: 18px;
      padding-right: 14px;
      margin-bottom: 48px;
    }

    .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-nav li:last-child {
      margin-bottom: 0;
    }

    .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-nav li.on {
      font-weight: bold;
      border-right: 3px solid #0061FF;
      color: #0061FF;
      font-size: 22px;
    }

    .m-hp-successful-case .m-hp-children-tabs-container {
      height: 100%;
      text-align: left;
      color: #000;
    }

    .m-hp-successful-case .m-hp-children-tabs-container li {
      width: 100%;
      height: 100%;
      display: none;
      padding-left: 11%;
      box-sizing: border-box;
      transition: all 2s;
    }

    .m-hp-successful-case .m-hp-children-tabs-container li .left {
      width: 606px;
      padding-left: 85px;
      box-sizing: border-box;
    }

    .m-hp-successful-case .m-hp-children-tabs-container li.on {
      display: inline-block;
    }

    .m-hp-successful-case .m-hp-children-tabs-container .m-hp-children-tabs-title {
      font-weight: bold;
      font-size: 38px;
      line-height: 40px;
    }

    .m-hp-successful-case .m-hp-children-tabs-container .m-hp-children-tabs-desc {
      margin-top: 22px;
      max-width: 606px;
      font-size: 22px;
      line-height: 30px;
    }

    .m-hp-successful-case .m-hp-children-tabs-container .m-hp-children-qrcode {
      border: 5px solid #ebebeb;
      width: 170px;
      height: 170px;
      margin-top: 50px;
    }

    .m-hp-successful-case .m-hp-children-tabs-container .m-hp-children-screenshot {
      position: absolute;
      width: 276px;
      height: 542px;
      right: 185px;
      top: 0;
    }

    .m-hp-successful-case .m-hp-children-tabs-container .m-hp-children-screenshot img {
      width: 100%;
    }

    .m-hp-successful-case .m-hp-children-tabs-nav {
      display: flex;
      text-align: left;
      margin: -210px 0 0 200px;
      overflow: hidden;
    }

    .m-hp-successful-case .m-hp-children-tabs-nav li {
      margin-right: 6px;
      width: 100px !important;
      display: inline-block;
      opacity: 0.25;
      transition: all 0.5s;
    }

    .m-hp-successful-case .m-hp-children-tabs-nav li .icon {
      width: 60px !important;
      height: 60px !important;
      margin: 0 auto;
      border-radius: 50%;
      border: 1px solid #e6e6e6;
    }

    .m-hp-successful-case .m-hp-children-tabs-nav li .name {
      font-size: 16px;
      color: #000;
      text-align: center;
      line-height: 24px;
      margin-top: 13px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .m-hp-successful-case .m-hp-children-tabs-nav li:last-child {
      margin-right: 0;
    }

    .m-hp-successful-case .m-hp-children-tabs-nav li.on {
      opacity: 1;
    }

    @media only screen and (min-width: 769px) {
      @-webkit-keyframes showTabs {
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }

      @keyframes showTabs {
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }

      @-webkit-keyframes hideTabs {
        0% {
          opacity: 1;
        }

        100% {
          opacity: 0;
        }
      }

      @keyframes hideTabs {
        0% {
          opacity: 1;
        }

        100% {
          opacity: 0;
        }
      }

      .m-hp-children-tabs-container li {
        position: relative;
        width: 100%;
      }

      .m-hp-tabs-list>li {
        position: absolute;
        opacity: 0;
        z-index: -1;
        -webkit-animation: hideTabs 0.5s forwards;
        animation: hideTabs 0.5s forwards;
      }

      .m-hp-tabs-list>li.on {
        opacity: 1;
        z-index: 1;
        -webkit-animation: showTabs 0.8s forwards;
        animation: showTabs 0.8s forwards;
      }

      .m-hp-tabs-list li>div {
        height: 100%;
      }

      .m-hp-successful-case {
        background: #fff;
      }

      .m-hp-successful-case .m-hp-title {
        padding: 84px 0 88px 0;
      }

      .m-hp-case-icon {
        vertical-align: middle;
        display: inline-block;
        width: 87px;
        height: 87px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        transition: all 0.3s;
        border-radius: 50%;
      }

      .m-hp-case-keyword {
        display: inline-block;
        vertical-align: middle;
        text-indent: 0;
        font-size: 30px;
        padding-left: 16px;
        color: #000;
      }

      .m-hp-item-wrapper.on .m-hp-case-icon {
        border-radius: 0;
      }

      .m-hp-qrcode-tips {
        color: #666;
        font-size: 14px;
        margin-top: 8px;
      }
    }

    @media only screen and (max-width: 769px) {
      .m-hp-successful-case {
        background: #fff;
      }

      .m-hp-successful-case .m-hp-successful-case .m-hp-title {
        padding: 1.42rem 0 0.98rem 0;
        position: relative;
      }

      .m-hp-successful-case .m-hp-success-tab-container {
        overflow: hidden;
        /**大类目tab**/
        /**子类目**/
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-container {
        margin-left: 0;
        width: auto;
        height: auto;
      }

      .m-hp-successful-case .m-hp-success-tab-container>* {
        float: none;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-nav {
        border: 0;
        border-bottom: 0.06rem solid #efefef;
        display: flex;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-nav>* {
        float: left;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-nav li {
        width: auto;
        min-width: 19%;
        height: auto;
        line-height: 0.84rem;
        flex: 1;
        float: left;
        font-size: 0.42rem;
        color: #666;
        text-align: center;
        padding: 0 0 0.17rem 0;
        margin-bottom: 0;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-nav li.on {
        font-size: 0.48rem;
        color: #0061FF;
        text-align: center;
        border-right: 0;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-tabs-nav li.on::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -0.03rem;
        margin-left: -0.5rem;
        width: 1rem;
        height: 0.06rem;
        background: #0061FF;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-children-tabs-container {
        height: auto;
        margin-bottom: 0.5rem;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-children-tabs-container li {
        overflow: hidden;
        height: 10.8rem;
        margin-left: 0;
        padding-left: 0;
        position: relative;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-children-tabs-nav {
        margin: 0 0 1.5rem 0;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-children-tabs-nav li {
        margin-right: auto;
        max-width: 20%;
        min-height: 2.3rem;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-children-tabs-nav li .icon {
        width: 1.28rem !important;
        height: 1.28rem !important;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-children-tabs-nav li .name {
        font-size: 0.32rem;
        color: #000;
        text-align: center;
        line-height: 0.48rem;
        margin-top: 0.4rem;
      }

      .m-hp-successful-case .m-hp-success-tab-container li .left {
        padding-left: 0.5rem;
        width: auto;
        margin-right: 5.58rem;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-children-tabs-title {
        font-weight: bold;
        font-size: 0.51rem;
        line-height: 0.51rem;
        margin-top: 2.5rem;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-children-tabs-desc {
        font-size: 0.39rem;
        line-height: 0.6rem;
        margin-top: 0.57rem;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-children-qrcode {
        display: inline-block;
        border: 0.05rem solid #ebebeb;
        width: 2.8rem;
        height: 2.8rem;
        margin-top: 1.4rem;
      }

      .m-hp-successful-case .m-hp-success-tab-container .m-hp-children-screenshot {
        position: absolute;
        right: 0.1rem;
        left: auto;
        top: 0.69rem;
        margin: 0;
        width: 5.54rem;
        height: 10.29rem;
      }

      .m-hp-qrcode-wrapper {
        text-align: center;
        margin-left: -1.8rem;
      }

      .m-hp-qrcode-tips {
        color: #666;
        font-size: 0.27rem;
        margin-top: 0.25rem;
      }
    }
  
  
    .m-hp-children-tabs-container .hide-qrcodebtn {
      display: none;
    }

    .m-hp-children-qrcodebtn {
      width: 2.4rem;
      height: 0.82rem;
      color: #333;
      font-size: 0.39rem;
      line-height: 0.82rem;
      border: 1px solid #333;
      border-radius: 3px;
      text-align: center;
      margin-top: 0.92rem;
    }

    .m-hp-children-qrcodebtn:hover {
      opacity: 0.3;
    }

    .m-hp-children-qrcode.aiqiyi {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/aiqiyi_qrcode.0cbf462.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.aishuochang {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/aishuochang_qrcode.d57ae1b.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.changlong {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/changlong_qrcode.4fce2e8.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.douyu {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/douyu_qrcode.3dcdced.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.naoli {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/naoli_qrcode.3b0b1df.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.siku {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/siku_qrcode.e7caf40.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.suning {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/suning_qrcode.ae04440.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.weipinhui {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/weipinhui_qrcode.244b384.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.zuanshixiaoniao {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/zuanshixiaoniao_qrcode.3113b0c.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.wuba {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/58_qrcode.0152a3d.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.kuaidi100 {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/kuaidi100_qrcode.9d6c7a2.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.qichedasheng {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/qichedasheng_qrcode.794c856.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.tubatu {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/tubatu_qrcode.0942c0c.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.wanmeizhengjian {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/wanmeizhengjian_qrcode.9fd4a67.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.baiduTrain {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/baiduTrain_qrcode.d04194d.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.booking {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/booking_qrcode.20126b2.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.ctrip {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/ctrip_qrcode.bea62d2.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.tongcheng {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/tongcheng_qrcode.a1ee3bd.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.babyKnow {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/babyKnow_qrcode.103db30.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.baiduLibrary {
      background: url(../images/baiduLibrary_qrcode.ac9dcb5.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.quickConstellation {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/quickConstellation_qrcode.9247545.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.redbook {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/redbook_qrcode.592c365.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-children-qrcode.zyNovel {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/zyNovel_qrcode.0d22120.jpg) no-repeat;
      background-size: contain;
    }

    /**小图标**/
    .m-hp-successful-case li .icon.aiqiyi {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/aiqiyi_logo.d89f2c1.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.aishuochang {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/aishuochang_logo.d507440.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.changlong {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/changlong_logo.be2f574.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.douyu {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/douyu_logo.0905dec.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.naoli {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/naoli_logo.320dc3f.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.siku {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/siku_logo.765d88f.png) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.suning {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/suning_logo.069343a.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.weipinhui {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/weipinhui_logo.ecceca5.png) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.zuanshixiaoniao {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/zuanshixiaoniao_logo.09022b0.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.wuba {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/58_logo.f4cf4b1.png) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.kuaidi100 {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/kuaidi100_logo.83c7ed4.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.qichedasheng {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/qichedasheng_logo.751624e.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.tubatu {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/tubatu_logo.0d8b004.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.wanmeizhengjian {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/wanmeizhengjian_logo.33fce16.png) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.baiduTrain {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/baiduTrain_logo.52c85df.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.booking {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/booking_logo.0ab888c.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.ctrip {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/ctrip_logo.1a8c6ae.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.tongcheng {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/tongcheng_logo.b52cef3.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.babyKnow {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/babyKnow_logo.0ebb1f6.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.baiduLibrary {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/baiduLibrary_logo.d628632.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.quickConstellation {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/quickConstellation_logo.71d46b5.jpg) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.redbook {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/redbook_logo.b9abe23.png) no-repeat;
      background-size: contain;
    }

    .m-hp-successful-case li .icon.zyNovel {
      background: url(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/zyNovel_logo.5238035.jpg) no-repeat;
      background-size: contain;
    }
  
  
    .header {
      height: 60px;
      background: #000;
    }

    .user-info {
      top: -2px;
    }

    .user-info ul {
      border-radius: 3px;
      overflow: hidden;
    }

    .user-info .user-menu {
      font-size: 14px;
    }

    .user-info .user-menu .icon-arrow-pop {
      top: -18px !important;
      border: 8px solid transparent !important;
      border-bottom: 10px solid #eee !important;
    }

    .user-info .user-menu .icon-arrow-pop:after {
      top: -7px !important;
      left: -7px !important;
      border: 8px solid transparent !important;
      border-bottom: 10px solid #fff !important;
    }

    .inner-header {
      position: fixed;
      width: 100%;
      height: 60px;
      line-height: 60px;
      padding: 0 40px;
      background-color: #000;
      box-shadow: 0 1px 5px rgba(6, 0, 1, 0.1);
      display: flex;
      box-sizing: border-box;
      z-index: 10;
      justify-content: space-between;
    }

    .header-space {
      width: 100%;
      height: 60px;
    }

    .header-btn {
      width: 100px;
      height: 32px;
      line-height: 32px;
      border-radius: 3px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
    }

    .button-apply-to-login {
      background: #0061FF;
      margin-right: 30px;
    }

    .button-apply-to-login:hover {
      background: #3388FF;
    }

    .button-back-to-login {
      background: #404040;
    }

    .button-back-to-login:hover {
      background: #686868;
    }


    .header-links {
      height: 60px;
      overflow: hidden;
    }

    .header-links li {
      display: inline-block;
      text-align: center;
      font-size: 14px;
      line-height: 60px;
      padding: 0 20px;
      height: 60px;
      transition: all 0.3s;
      overflow: hidden;
    }

    .header-links li a {
      color: #FFF;
    }

    .header-links li:hover {
      background: #181818;
    }

    .header-links li:last-child {
      margin-right: 40px;
    }

    .header-menu {
      display: flex;
      align-items: center;
      position: relative;
    }

    .header-menu i {
      height: 9px;
      color: #E4E4E4;
      line-height: 9px;
      overflow: hidden;
    }

    .header-menu .link-item {
      display: inline-block;
      color: #fff;
      font-size: 14px;
      height: 14px;
      line-height: 14px;
      text-align: center;
      text-decoration: none;
    }

    .header-menu .link-item:hover {
      color: #38f;
    }

    .header-menu .header-message-count {
      display: inline-block;
      position: absolute;
      top: 13px;
      left: 96px;
      line-height: 13px;
      font-size: 12px;
      color: #FFF;
      padding: 2px 5px;
      background: #F7534F;
      border-radius: 12px;
    }

    .header-menu .header-message-count i {
      color: #fff;
      position: relative;
      top: -1px;
      left: 0;
    }

    @media only screen and (max-width: 768px) {
      .header {
        height: 1.72rem;
      }

      .header .inner-header {
        position: relative;
        width: 100%;
        height: 1.72rem;
        padding: 0 0.51rem;
        overflow: hidden;
      }

      .header .inner-header .logo {
        margin-left: 0;
        line-height: 1.72rem;
      }

      .header .inner-header img {
        width: 2.91rem !important;
        height: 0.54rem !important;
      }

      .header .inner-header .header-menu {
        display: inline;
        position: absolute;
        left: auto;
        top: 0;
        right: 0.51rem;
      }

      .header .inner-header .header-btn,
      .header .inner-header .user-info {
        display: none;
      }

      .header .inner-header .header-links {
        height: 1.72rem;
        line-height: 1.72rem;
      }

      .header .inner-header .header-links a {
        font-size: 0.39rem;
      }

      .header .inner-header .header-links li {
        padding: 0 0.3rem;
        height: 1.72rem;
        line-height: 1.72rem;
      }
    }
  
  
    .user-info {
      padding-left: 30px;
      position: relative;
      cursor: pointer;
    }

    .user-info img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      vertical-align: middle;
      margin-top: -2px;
    }

    .user-info .icon-arrow {
      display: inline-block;
      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-top: 6px solid #666;
      border-radius: 1px;
      margin: 5px 0 0 8px;
      vertical-align: middle;
    }

    .user-info .user-menu {
      position: absolute;
      right: -24px;
      top: 54px;
      background-color: #fff;
      width: 130px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      text-align: center;
      display: none;
    }

    .user-info .user-menu li {
      padding: 0 10px;
      height: 42px;
      line-height: 42px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .user-info .user-menu li:last-child {
      border-top: 1px solid #eee;
    }

    .user-info .user-menu .icon-arrow-pop {
      top: -27px;
      right: 21px;
      border: 12px solid transparent;
      border-bottom: 15px solid #eee;
      position: absolute;
      width: 0;
      height: 0;
    }

    .user-info .user-menu .icon-arrow-pop:after {
      position: absolute;
      width: 0;
      height: 0;
      border: 12px solid transparent;
      top: -11px;
      left: -12px;
      content: "";
      z-index: 2;
      border-bottom: 15px solid #fff;
    }

    .user-info .user-menu .log-out:hover {
      background-color: #f0f6fe;
    }

    .user-info:hover .user-menu {
      display: block;
    }
  
/* CSS Document */