.flex {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.flexJb {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.showM {
    display: none !important;
}

.showPc {
    display: flex !important;
}

.footer .footer_options {
    margin: 0 60px;
}

.positions {
    text-align: left;
}

.abouts ul {
    margin-top: 20px;
}

.abouts ul li {
    margin-bottom: 30px;
}

.worksDetail .content .des img {
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 768px) {

    .abouts ul li {
        margin-bottom: .1rem;
    }

    .footer .footer_options {
        margin: 0 20px;
    }

    html {
        width: 100vw !important;
    }

    .showM {
        display: flex !important;
    }

    .showPc {
        display: none !important;
    }

    * {
        box-sizing: border-box;
    }

    html {
        padding-top: 70px;
    }

    .nav, .mnav .navs, .group_1200, .serviceProviders_data, .serviceProviders_pic, .idea_container_group, .serviceProcess_group, .container, .footer .footer_info_content .info, .container-fluid, .container-full, .tools_group, .contact_group, .partners_group, .phone_group, .page_case_banner .banner_container, .serviceProviders_group, .works_items_group {
        min-width: 100vw !important;
        padding: 0 2vw !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .mnav {
        width: 100vw;
        padding: 0;
        height: auto;
    }

    html {
        padding-top: 0;
    }

    .mnav .logo {
        position: fixed;
        width: 100%;
        z-index: 99999;
        left: 0;
        top: 0;
        height: 70px;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 2%;
    }

    .mnav .logo .mtel {
        font-size: 18px;
        color: #d81e01;
        font-weight: bold;
    }

    .mnav .navs {
        width: 100%;
    }

    .mnav .navs ul {
        flex-wrap: wrap;
    }

    .mnav .navs ul li {
        width: 32%;
    }

    .mnav .navs ul li::before {
        display: none;
    }

    .mnav .navs a {
        color: #333 !important;
    }

    .mnav .navs {
        background-color: #252525;
        padding: 2vw !important;
    }

    .mnav .navs li:nth-child(3n+2) {
        margin-left: 2%;
        margin-right: 2%;
        margin-bottom: 2vw;
    }

    .mnav .navs li a {
        display: -webkit-flex;
        display: flex;
        width: 100%;
        height: 35px;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #fff !important;
        background-color: #4e4e4e;
        border-radius: 10px;
        margin: 0;
    }

    .mnav .navs ul li:last-child a {
        margin-left: 0 !important;
    }

    .page_case_banner {
        height: auto !important;
        padding: 10vw 2% 5vw 2% !important;
        overflow: hidden;
    }


    .page_case_banner .banner_container .link_btn {
        flex-direction: column;
    }

    .page_case_banner .banner_container>h1 {
        font-size: 24px !important;
    }

    .page_case_banner .banner_container .link_btn {
        flex-direction: row !important;
    }

    .page_case_banner .banner_container .link_btn a {
        display: inline-block;
        width: auto !important;
        padding: 0 20px !important;
        font-size: 16px !important;
    }

    .page_case_banner .banner_container {
        padding: 0 !important;
    }

    .page_case_banner .banner_container>h1 {
        margin-bottom: 4vw;
    }

    .page_case_banner .banner_container .items, .page_case_banner .banner_container {
        width: 100% !important;
        min-width: 100% !important;
    }

    .sort_items_group ul {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .sort_items_group ul li {
        width: 48% !important;
        height: 35vw !important;
        overflow: hidden !important;
        margin-bottom: 3vw !important;
    }

    .group_1200, .serviceProviders_group, .serviceProviders_pic, .works_items_group, .idea_container_group, .index_describe_top_items, .black_group, .serviceProcess_group, .black_tit, .black_pic_bottom, .white_tit, .tools_tit, .partners_group, .phone_group {
        margin: 10vw 0 0 !important;
    }

    .t_ {
        font-size: 20px !important;
    }

    .serviceProviders_data {
        height: auto !important;
        padding: 8vw 2vw !important;
        margin: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    .serviceProviders_data_items {
        margin: 0 !important;
    }

    .serviceProviders_data_items ul {
        flex-wrap: wrap;
    }

    .serviceProviders_data_items ul li {
        width: 100%;
        margin-bottom: 5vw !important;
    }

    .serviceProviders_pic {
        flex-direction: column;
    }

    .serviceProviders_pic .left, .serviceProviders_pic .right {
        width: 100%;
    }

    .serviceProviders_pic .left .item, .serviceProviders_pic .right .item {
        width: 100% !important;
        height: 30vw !important;
        background-size: cover !important;
    }

    .works_items_tab_tit {
        margin: 4vw 0 !important;
        flex-wrap: wrap !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    .works_items_tab_tit .item {
        width: 32% !important;
        margin: 0 !important;
        margin-bottom: 3vw !important;
    }

    .works_items_tab_tit .item:nth-child(3n+2) {
        margin-left: 2% !important;
        margin-right: 2% !important;
    }

    .works_items_tab_container {
        height: auto;
    }

    .works_items_tab_content {
        width: 100% !important;
        flex-direction: column !important;
    }

    .works_items_tab_video {
        width: 100% !important;
    }

    .works_items_tab_text {
        width: 100% !important;
        height: auto !important;
    }

    .works_items_tab_text h3 {
        margin-top: 5vw !important;
    }

    .works_items_tab_text .desc {
        margin: 4vw 0 !important;
    }

    .works_items_tab_container {
        height: auto !important;
    }

    .works_items_tab_video .items, .works_items_tab_bottom {
        width: 100% !important;
        padding: 0 2% !important;
    }

    .works_items_tab_video .items .item {
        width: 47% !important;
    }

    .works_items_tab_video .items .item:nth-child(even) {
        margin-left: 3% !important;
        margin-right: 3% !important;
    }

    .works_items_tab_bottom {
        height: auto !important;
        flex-direction: column !important;
    }

    .works_items_tab_bottom .qrcode {
        margin-left: 0 !important;
        margin: 4vw 0 !important;
    }

    .works_items_tab_text h3 {
        font-size: 20px !important;
    }

    .idea_container_tit {
        margin-bottom: 0 !important;
    }

    .idea_container_video {
        width: 100% !important;
        height: auto !important;
        padding: 0 2% !important;
    }

    .index_describe_top_items {
        flex-direction: column !important;
        padding: 0 2% !important;
        overflow: hidden;
    }

    .idti_img {
        width: 100% !important;
        height: 60vw !important;
    }

    .black_group {
        width: 100vw !important;
        padding: 0 2vw !important;
    }

    .black_pic_content {
        margin-top: 5vw !important;
        overflow: hidden !important;
    }

    img {
        max-width: 100% !important;
    }

    .index_describe_top img {
        max-width: 10000px !important;
    }

    .black_pic_items {
        width: 100% !important;
        flex-wrap: wrap !important;
        padding: 0 2% !important;
        margin-top: 5vw !important;
    }

    .black_pic_items li {
        width: 47% !important;
        height: auto !important;
        margin-bottom: 5vw !important;
    }

    .black_pic_items li:nth-child(even) {
        margin-left: 6% !important;
    }

    .black_pic_bottom {
        width: 100% !important;
        height: auto !important;
        flex-direction: column !important;
        padding: 4vw !important;
    }

    .black_pic_bottom h2 {
        font-size: 18px !important;
    }

    .serviceProcess_group h3 {
        margin: 0 0 5vw 0 !important;
    }

    .serviceProcess_items {
        flex-wrap: wrap !important;
    }

    .serviceProcess_items li {
        width: 48% !important;
        margin-bottom: 5vw !important;
    }

    .serviceProcess_items li:nt-child(even) {
        margin-left: 4% !important;
    }

    .serviceProcess_items li:nth-child(even)::after {
        display: none;
    }

    .white_tit, .white_pic {
        padding: 0 2% !important;
    }

    .tools_items {
        flex-wrap: wrap !important;
        margin-top: 8vw !important;
    }

    .tools_items li {
        width: 48% !important;
        margin-bottom: 4vw !important;
    }

    .tools_items li:nth-child(even) {
        margin-left: 4% !important;
    }

    .tools_items li .tools_item_text {
        bottom: 10px !important;
        padding: 5px !important;
        text-align: center !important;
    }

    .tools_items li .tools_item_text h4 {
        font-size: 16px !important;
    }

    .contact_group {
        height: auto !important;
        margin: 6vw 0 0 !important;
        padding: 4vw 2% !important;
        overflow: hidden;
    }

    .phone_group>p {
        font-size: 20px !important;
        margin-bottom: 5vw !important;
    }

    .phone_items {
        flex-wrap: wrap;
    }

    .phone_items li {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 4vw !important;
        padding: 3vw !important;
    }

    .footer_info_content, .footer .footer_info_content .info {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
    }

    .footer_info_content {
        flex-direction: column !important;
    }

    .footer .footer_options {
        margin-left: 0 !important;
    }

    .footer .footer_options .footer_service_title {
        margin: 10px 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .footerLinks {
        padding: 0 3%;
    }

    .footer .footer_options {
        margin: 0;
    }

    .footer .footer_options>a {
        width: 100% !important;
        text-align: left !important;
    }

    .footer_qrcode_content_top {
        margin: 6vw 0 0 !important;
    }

    .zuopinCloud_qrcode, .footer_bottom_icons {
        display: none !important;
    }

    .fb {
        width: 100%;
        height: 90px;
    }

    .footbg {
        position: fixed;
        z-index: 110;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-bottom: 10px;
        padding-top: 10px;
        background: #4e4e4e;
        flex-direction: row !important;
    }

    .mfooter {
        width: 100vw !important;
        margin: 0;
        display: -webkit-box;
        flex-direction: row !important;
        overflow: hidden;
    }

    .mfooter a {
        -webkit-box-flex: 1;
        display: -webkit-box;
        color: #fff;
        width: 25%;
    }

    .mfooter a:last-child {
        border: none;
    }

    .mfooter span {
        display: block;
        margin: 0 auto;
        text-align: right;
        font: 400 16px "微软雅黑";
        color: #fff;
        padding: 43px 20px 0;
        font-size: .24rem;
        padding: 43px 0 0;
        background-size: auto .4rem !important;
    }

    .mfooter span.span1 {
        background: url(../images/a11.png) center 8px no-repeat;
        background-size: 40%;
    }

    .mfooter span.span2 {
        background: url(../images/a22.png) center 8px no-repeat;
        background-size: 30%;
    }

    .mfooter span.span3 {
        background: url(../images/a33.png) center 8px no-repeat;
        background-size: 30%;
    }

    .mfooter span.span4 {
        background: url(../images/a44.png) center 8px no-repeat;
        background-size: 40%;
    }

    .abouts {
        margin-top: 5vw !important;
        padding: 0 2% !important;
        margin-bottom: 0 !important;
    }

    .arclist {
        width: 100% !important;
        padding: 0 3% !important;
    }

    .arclist .arclist_list ul li {
        padding: 5vw 0 !important;
    }

    .arclist .arclist_list ul li .arclist_list_img {
        float: none !important;
        display: block;
        width: auto !important;
        max-width: 100% !important;
        margin-bottom: 4vw !important;
    }

    .arclist a.arclist_list ul li .arclist_list_p1 {
        margin-top: 4vw !important;
        float: none !important;
        font-size: 16px !important;
    }

    .arclist .arclist_list ul li .arclist_list_p1 {
        font-size: 16px !important;
    }

    .arclist .arclist_list ul li .arclist_list_img img {
        width: auto !important;
        max-width: 100% !important;
    }

    .view .view_title {
        font-size: 18px !important;
    }

    #cntrBody {
        margin-top: 5vw !important;
    }

    .n_info_con p {
        font-size: 14px !important;
    }

    ul.n_rt_ul {
        padding-left: 0 !important;
    }

    .news {
        display: none;
    }

    .mnav .logo {
        width: 100vw !important;
    }

    .cases {
        padding: 0 2% !important;
    }

    .cases .case_list .case_list_ul .case_list_li a .case_list_img>img {
        height: auto !important;
    }

    .case_page ul li span.current {
        background-color: red;
        color: #fff !important;
        border: 1px solid red !important;
    }

    html {
        padding-bottom: 80px !important;
    }

    .worksDetail {
        padding: 0 2%;
    }

    .worksDetail .parmas {
        flex-direction: column;
    }

    .worksDetail .parmas .img, .worksDetail .parmas img {
        width: 100% !important;
        text-align: center;
    }

    .worksDetail .parmas img {
        width: auto !important;
        margin: 0 auto;
    }

    .worksDetail .parmas .list {
        margin-top: 4vw;
    }

    .worksDetail .content .des {
        padding: 3vw !important;
    }

    #cntrBody img {
        height: auto !important;
    }

    .cases .case_list .case_list_ul .case_list_li {
        width: 48% !important;
    }

    .cases .case_list .case_list_ul .case_list_li:nth-child(even) {
        margin-left: 4% !important;
    }

    .message .message_bg .message_guestbookform .message_body .message_group p label {
        margin-bottom: 20px !important;
        display: inline-block !important;
    }

    .message .message_bg .message_guestbookform .message_body .message_group p label input {
        margin-right: 5px !important;
    }

    .contact .contact_contact {
        padding: 8vw 2vw !important;
    }

    .contact .contact_contact .contact_telico {
        margin-bottom: 5vw !important;
    }

    .about {
        padding: 0 2% !important;
    }

    .trends .ctrl {
        transform: none !important;
    }

    .page_case_banner .banner_container {
        position: relative;
        padding-bottom: 30vw !important;
    }

    .imgs {
        width: 100% !important;
        padding: 0 2vw !important;
    }

    .imgs li {
        width: 48% !important;
        margin-right: 0 !important;
    }

    .imgs li:nth-child(2n) {
        margin-left: 4% !important;
    }

    body *, body {
        font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu !important;
    }

    .transition, .transition * {
        transition: all .5s;
    }

    .mnav .logo img {
        width: auto;
        height: 65px;
        max-width: auto;
    }

    .footer {
        padding-top: 4vw !important;
    }

    .menu-button {
        width: .4rem;
    }

    .menu-button span {
        display: block;
        width: 100%;
        height: .04rem;
        border-radius: .02rem;
        background: #ef2424;
        margin-bottom: .08rem;
    }

    .menu-button.active {}

    #mshadow {
        position: fixed;
        z-index: 9999989999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, .6);
        display: none;
    }

    #mnavs {
        width: 50%;
        height: 100vh;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #333;
        position: fixed;
        z-index: 99999899999;
        left: 0;
        top: 0;
        transform: translateX(-110%);
        -webkit-transform: translateX(-110%);
    }

    #mnavs.active, #mshadow.active {
        display: block;
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }

    #mnavs ul {
        flex-direction: column;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mnavs ul li {
        border-bottom: 1px solid #fff;
    }

    #mnavs ul li a {
        padding: 0 5%;
        height: .8rem;
        line-height: .8rem;
        font-size: .24rem;
        color: #fff;
        display: block;
    }

    .qrcode_layer {
        max-height: 90vh;
        flex-direction: column;
    }

    .qrcode_layer .qrcode_layer_left {
        display: none;
    }

    .qrcode_layer_right {
        width: 100% !important;
        padding: .3rem 0 !important;
    }

    body * {
        font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu !important;
    }

    .abouts ul {
        margin-top: 0 !important;
    }

    .arclist .arclist_list ul li {
        display: -webkit-flex;
        display: flex;
        margin-left: 0;
        box-sizing: border-box;
        align-items: center;
        border-bottom: 1px solid #ccc !important;
    }

    .arclist .arclist_list ul li .arclist_list_img {
        width: 45% !important;
        flex-shrink: 0;
        margin-bottom: 0 !important;
        display: block !important;
    }

    .arclist .arclist_list ul li .arclist_list_img img {
        display: block;
    }

    .page_case_banner {
        padding-top: 1.2rem !important;
    }

    .arclist .arclist_list ul li .c {

        flex: 1;
        margin-left: .2rem;
        overflow: hidden;
    }

    .arclist .arclist_list ul li .arclist_list_p1 {
        text-align: left !important;
        line-height: .5rem;
        height: .5rem;
        font-size: 2.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: .05rem;
        margin-bottom: 0 !important;
        white-space: nowrap;
    }

    .arclist .arclist_list ul li .arclist_list_p2 {
        font-size: .22rem !important;
        margin-bottom: .1rem !important;
    }

    .arclist .arclist_list ul li .arclist_list_p3 {
        font-size: .22rem !important;
        line-height: 1.5em !important;
        max-height: 4.5em;
        overflow: hidden;
        text-indent: 0 !important;
    }

    .banner .video img {
        height: auto !important;
    }

    .imgs {
        margin-top: 5vw !important;
    }

    .abouts ul li a {
        padding: 5px 10px !important;
        font-size: .26rem !important;
    }

    .info_con_tit div {
        max-width: 100% !important;
    }

    .info_con_tit img {
        text-indent: 0 !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .n_info_con p {
        padding: 0;
    }

}

.case_page {
    margin-top: 15px !important;
}

.case_page ul li span, .case_page ul li a {
    padding: 5px !important;
    border: 1px solid #a6a6a6;
    margin-right: 5px !important;
    font-size: 14px;
    transition: all .5s;
}

.abouts ul {
    width: 100%;
    text-align: center;
    margin-top: 0;
}


.abouts ul li {
    padding: 0;
}

.abouts ul li a {
    padding: 10px 10px;
}

.abouts ul li.active a {
    padding: 10px 10px;
}

.abouts ul li:hover a {
    padding: 10px 10px;
}