.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: 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;
    }
    .m-hp-network-item .image-container img {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
    }
}
.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-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;
    }
}
.hide {
    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(https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/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;
}


.bd-feature ul{padding-bottom: 100px;overflow: hidden}
.bd-feature ul li{width: calc((100% - 26px * 3) / 4);height: 300px;box-sizing: border-box;padding-top: 38px;float: left;margin-right: 26px;box-shadow: 0 3px 10px rgba(72,122,253,0.08);text-align: center;border: 1px solid #eef8ff;transition: all .3s;}
.bd-feature ul li:last-child{margin-right: 0;}
.bd-feature ul li img{width: 110px;height: 110px;object-fit: contain;margin-bottom: 22px}
.bd-feature ul li .tit{font-size: 20px;margin-bottom: 20px}
.bd-feature ul li .desc{font-size: 14px;color: #666;margin-bottom: 5px;}
.bd-feature ul li:hover{transform: translate(0, -20px) scale(1.1)}

.bd-banner{height: 621px;background: #1653f2;}
.bd-banner .w1200{background: url("../images/bd/banner-img.png") right 0 no-repeat;height: 100%;padding-top: 157px;box-sizing: border-box;}
.bd-banner .w1200 .banner-text{background: url("../images/bd/banner-tit.png") 0 0/contain no-repeat;padding-top: 170px;width: 567px;}
.bd-banner .w1200 .banner-text .btn{margin: 50px 0 0 28px;}