@charset "UTF-8";

/**
 *
 * @authors username (username@xxx.com)
 * @date    2019-03-27 11:53:05
 * @version $Id$
 */
 .m-nav {
     display: none;
 }

.f8-bg {
    width: 100%;
    min-height: 1000px;
    padding: 20px 0;
    background: #f3f3f3;
}

.cases-box {
    max-width: 1500px;
    padding: 0 60px;
    margin: 0 auto;
}

.cases-box ul {
    margin-bottom: 5px;
    display: grid;
    grid-template-columns: repeat(3, 458px);
    grid-gap: 20px 20px;
    justify-content:center;
}

.cases-box ul li {
    padding-bottom: 50px;
    max-width: 458px;
    background: #fff;
    position: relative;
    overflow: hidden;
}


.cases-box ul li:hover {
    box-shadow: 1px 0 3px 8px rgba(232, 232, 232, 0.7);
}

.cases-box .cases-img {
    width: 100%;
    height: 261px;
    overflow: hidden;
}

.cases-box .cases-tit {
    height: 30px;
    padding-left: 20px;
    padding-top: 20px;
    font: normal normal 20px/30px "微软雅黑";
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cases-box .cases-con {
    width: 91%;
    height: 75px;
    padding: 0 20px;
    text-align: justify;
    font: normal normal 13px/25px "微软雅黑";
    color: #9e9e9e;
}

.cases-box .cases-logo {
    position: absolute;
    bottom: 10px;
    left: 0px;
}

.cases-box .cases-tip {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font: normal normal 14px/25px "";
    color: #9fa0a0;
}

.cases-box .cases-jia {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font: normal bold 14px/25px "";
    color: #9fa0a0;
}

.cases-more {
    background: #eee;
    width: 140px;
    height: 30px;
    margin: 63px auto;
    border: 1px solid #444;
    border-radius: 30px;
    text-align: center;
    line-height: 30px;
}

.cases-more:hover {
    background: #eee;
    cursor: pointer;
}

.services-box2 .m-all-bis {
    display: none;
}
/* gray-list  开始*/

.gray-bg {
    width: 100%;
    height: 609px;
    background: url(../images/gray_bg.jpg) no-repeat center;
}

.gray-list {
    width: 96%;
    padding: 0 2%;
    margin-top: 140px;
    overflow: hidden;
}

.gray-list ul {
    display: flex;
    flex-flow: row wrap;
}
.gray-list ul li {
    /* float: left; */
    flex: 1 1 auto;
    min-width: 32%;
    color: #fff;
    text-align: center;
    margin-bottom: 80px;
}

.gray-list ul li+li {
    margin-left: 2%;
}

.gray-list ul li:nth-child(3n-2) {
    margin-left: 0;
}

.gray-list ul li span {
    display: inline-block;
    font: normal lighter 50px/80px "";
}

.gray-list ul li p {
    font: normal normal 18px/40px "";
}

/* gray-list  结束*/

/* 全案业务  start*/
.services-bg2 {
    width: 100%;
    overflow: hidden;
    clear: both;
}

.services-box2 {
    padding: 36px 0;
    overflow: hidden;
}

.services-box2 .title2 {
    font: normal normal 24px/64px "";
    color: #333;
    text-align: center;
}

.services-box2 .ad-txt {
    font: normal normal 36px/60px "";
    text-align: center;
    color: #333;
    letter-spacing: 5px;
}

.services-box2 .ad-txt sup {
    margin: 0;
    padding: 0;
    vertical-align: text-top;
    font: normal normal 20px/32px "";
    letter-spacing: 5px;
}

.services-box2 .ad-des {
    font: normal normal 16px/30px "";
    text-align: center;
    color: #666;
    letter-spacing: 2px;
}

.all-bis {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px;
}

.bis-item {
    margin: 0 1rem;
    color: white;
    width: 180px;
    height: 245px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bis-item>.content {
    flex: 0 1 auto;
}

.bis-item>.content>span {
    display: block;
    margin-top: 1rem;
    font-size: 1rem;
}

.bis-item>.content>ul {
    height: 10rem;
}

.bis-item>.content>ul>li {
    line-height: 1.9;
}

.bis-item>.content>ul>.title {
    font-size: 1rem;
    margin: 1rem 0;
}

.all-bis .blue {
    background: #0080ee;
}

.all-bis .orange {
    background: #da604a;
}

.all-bis .yellow {
    background: #edc234;
}

.all-bis .green {
    background: #55b59a;
}

.all-bis .purple {
    background: #9067b4;
}

/* 全案业务  end*/


/* 设置符合手机上的案例不在桌面版上显示 */
#mobile {
    display: none;
}



/* 宽度如果低于 1600px 就使用下面样式 */
@media screen and (max-width:1600px) {
    .cases-box ul {
        grid-template-columns: repeat(3, 33%);
    }
    #mobile {
        display: none;
    }

    .cases-box .cases-img {
        height: auto;
    }

    .cases-box .cases-tit {
        margin-top: 10px;
        padding: 0 20px;
        font: normal normal 20px/26px "微软雅黑";
    }

    .cases-box .cases-con {
        height: 53px;
        color: #9e9e9e;
        font: normal normal 13px/25px "微软雅黑";
    }

    .cases-box {

    }

    .cases-box ul li {
        max-width: 458px;
    }
}

/* 宽度如果低于 1440px 就使用下面样式 */
@media screen and (max-width:1440px) {
    .brand-box {
        max-width: 1325px;
        width: 95%;
        margin: 0 auto;
    }

    .cases-box ul {
        grid-template-columns: repeat(3, 33%);
    }

    #mobile {
        display: none;
    }

     .cases-img {
        height: auto;
    }

    .cases-box .cases-tit {
        margin-top: 10px;
        padding: 0 20px;
        font: normal normal 20px/26px "微软雅黑";
    }

    .cases-box .cases-con {
        height: 53px;
        color: #9e9e9e;
        font: normal normal 13px/25px "微软雅黑";
    }
    .cases-box {
  
    }

    .cases-box ul li {
    }
}

/* 宽度如果低于 1200px 就使用下面样式 */
@media screen and (max-width:1200px) {
    .brand-box {

        width: 92%;
        margin: 0 auto;
    }
    .cases-box ul {
        grid-template-columns: repeat(3, 33%);
    }

    #mobile {
        display: none;
    }

    .cases-box .cases-img {
        height: auto;
    }

    .cases-box .cases-tit {
        margin-top: 10px;
        padding: 0 20px;
        font: normal normal 20px/26px "微软雅黑";
    }

    .cases-box .cases-con {
        height: 53px;
        color: #9e9e9e;
        font: normal normal 13px/25px "微软雅黑";
    }

    .cases-box {
    }
    .cases-box ul li {
        flex: 0 1 349px;
    }
}

/* 宽度如果低于 996px 就使用下面样式 */
@media screen and (max-width:996px) {
    .cases-box ul {
        grid-template-columns: repeat(3, 33%);
    }

    #mobile {
        display: none;
    }

    .cases-box .cases-img {
        height: auto;
    }

    .power-box ul li {
        padding: 50px 0;
    }

    .cases-box .cases-tit {
        margin-top: 10px;
        padding: 0 20px;
        font: normal normal 20px/26px "微软雅黑";
    }

    .cases-box .cases-con {
        height: 53px;
        font: normal normal 13px/25px "微软雅黑";
        color: #9e9e9e;
    }

    .gray-list ul li p {
        font: normal normal 16px/30px "";
    }

    .power-box h2 {
        font: normal normal 42px/80px "";
    }

    .cases-box {
    }

}


/* 宽度如果低于 768px 就使用下面样式 */
@media screen and (max-width:768px) {
    .wrap {
        padding: 0 4%;
    }
    .cases-box ul {
        grid-template-columns: repeat(1, 100%);
    }

    #mobile {
        display: block;
    }

    #desktop {
        display: none;
    }
      /* 导航栏start */
      .m-nav {
        display: block;
        height: auto;
        width: 100%;
        background: #ffffff;
    }

    .m-nav ul {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
    }

    .m-nav ul a {
        flex: 1 1 30%;
        border-right: 1px solid #dddddd;
        display: block;
        text-align: center;
        font: normal normal 15px/36px "微软雅黑";
        color: #757575;
    }

    .m-nav ul a:nth-of-type(1),
    .m-nav ul a:nth-of-type(2),
    .m-nav ul a:nth-of-type(3) {
        border-bottom: 1px dotted #dddddd;
    }

    .m-nav ul a p {
        text-align: center;
        font: normal normal 15px/36px "微软雅黑";
        color: #757575;
    }

    .m-nav ul a img {
        margin-top: 15px;
        width: 30%;
    }

    .m-nav ul a:nth-of-type(3),
    .m-nav ul a:nth-of-type(6) {
        border-right: none;
    }

    /* 导航栏end */

    .cases-box {
        width: 96%;
        padding: 0 2%;
        min-width: 0;
    }

    .cases-box ul li {
        width: 100%;
        padding-bottom: 50px;
        margin-bottom: 10px;
    }

    .cases-box ul li+li {
        margin-left: 0;
    }

    .cases-box ul li:nth-child(3n-2) {
        margin-left: 0;
    }

    .cases-box .cases-img {
        height: auto;
    }

    .cases-box .cases-tit {
        margin-top: 10px;
        padding: 0 10px;
        font: normal normal 12px/15px "微软雅黑";
        color: #707070;
    }

    .cases-box .cases-con {
        display: none;
        font: normal normal 13px/25px "微软雅黑";
        color: #9e9e9e;
    }

    .cases-box .cases-tip {
        font: normal normal 12px/20px "";
    }

    .cases-box .cases-jia {
        right: 10px;
    }

    /* mobile logo 客户群设置start */

    .brand-box>ul>li:nth-of-type(n+22) {
        /* 只显示21个 */
        display: none;
    }

    .brand-box {
        width: 96%;
        margin: 23px 2% 0 2%;
        padding-top: 20px;
        background: #fff;
    }

    .brand-box ul {
        overflow: hidden;
    }

    .brand-box ul li {
        float: left;
        width: 31%;
        height: 30px;
        margin-bottom: 40px;
        text-align: center;
    }

    .brand-box ul li+li {
        margin-left: 0;
        margin-right: 0;
    }

    .brand-box ul li:nth-child(3n) {
        margin-left: 5%;
    }

    /* mobile logo 客户群设置end */

    /* bg2start */
    .services-box2 .title2 {
        font: normal normal 16px/30px "微软雅黑";
        color: #000000;
        text-align: center;
    }

    .services-box2 .ad-txt {
        font: normal normal 25px/25px "";
        text-align: center;
        color: #000000;
        letter-spacing: 0;
    }

    .services-box2 .ad-txt sup {
        margin: 0;
        padding: 0;
        vertical-align: text-top;
        font: normal normal 20px/32px "";
    }

    .services-box2 .ad-des {
        font: normal normal 11px/30px "";
        text-align: center;
        color: #000000;

    }

    .services-box2 .all-bis {
        display: none;
    }

    .services-box2 .m-all-bis {
        display: block;
        width: 70%;
        margin: 0 auto;
    }

    /* bg2end */


    .power-box {
        display: none;
    }

    /* gray-list  开始*/

    .gray-bg {
        width: 100%;
        height: auto;
        background: url(../images/gray_bg.jpg) no-repeat center;
    }

    .gray-list {
        width: 96%;
        padding: 0 2%;
        margin-top: 0;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .gray-list ul li {
        float: left;
        width: 42%;
        height: 160px;
        color: #fff;
        text-align: center;
        margin: 8% 2% 0 13%;
    }


    .gray-list ul li span {
        width: 73px;
        height: 73px;
        border: 1px solid #f7f8f8;
        border-radius: 50%;
        display: inline-block;
        font: normal normal 30px/73px "微软雅黑";
    }

    .gray-list ul li p {
        width: 73px;
        margin: 0 auto;
        font: normal normal 13px/20px "微软雅黑";
    }

    /* gray-list  结束*/

    .footer-bg {
     
    }
    .e3-bg {
        
    }
}