﻿@media (max-width:615px) {

    navigation{
        position:fixed !important;
        width: 100%;
        top: 0;
        height: 50px;
        left: 0;
        /* margin-left: -674px; */
        margin-left:0;
        background: #f6f6f6;
        z-index:999;
    }
    navigation .logo {
        max-width: 95px;
        height: 25px;
        margin-top: 8px;
        margin-right: 10px;
    }

    navigation .tel {
        font-size: 16px;
        width: auto;
        padding-left: 32px;
        background-size: 92% 80%;
        line-height: 20px;
        margin-top: 11px;
    }

    .navbar-toggler {
        color: rgba(0,0,0,.5);
        border-color: rgba(0,0,0,.1);
        float: right;
        padding: 5px 10px;
        display:block;
        line-height: 1;
        background-color: rgba(255, 255, 255, 0.67);
        border: 1px solid transparent;
        border-radius: .25rem;
        margin-top:6px;
        margin-right:5px;
    }

    .navbar-toggler:not(:disabled):not(.disabled) {
        cursor: pointer;
    }
    .navbar-toggler .navbar-toggler-icon {
        width:21px;
        height:21px;
    }

    navigation .nav {
        width:100%;
        background:rgba(0, 0, 0, 0.65);
        max-height: none;
        margin-top:8px;
        display:none;
    }
     navigation .nav ul li{
        width:100% !important;
        font-size:12px !important;
        font-weight:100 !important;
        text-align:left !important;
        padding-left:18px !important;
        height: 43px  !important;
        
    }
    navigation .nav ul li a {
        color:#fff;
        font-weight:600;
        width: 100%;
        display: block;
    }
    navigation .nav a:hover {
            color:#fff;
    }
    navigation .nav .li:hover, navigation .nav .active {
        border-bottom:none;
    }

    navigation .nav ul .menu {
        height:auto !important;
    }
    navigation .nav ul .menu:before {
        display:block;
        content:'';
        border-width:8px 6px 8px 6px;
        border-style:solid;
        border-color:#fff transparent transparent transparent;
        /* 定位 */
        position:absolute;
        left: 0;
        top: 17px;
    }

    navigation .nav .li:hover .navMenuList {
        display:unset;
    }
    navigation .nav ul .menu .navMenuList {
        display:block;
        position:unset;
        border:0;
        background-color:transparent;
        margin-left:-12px;
        
    }

    header banner .introduce{
        margin: 0 8px;
        max-width:95%;
        padding:10px;
        position:initial;
        border-radius: 8px
    }
    header banner .introduce .introducemain .left{
        width:100%;
    }
    header banner .introduce .introducemain .left h1{
            font-size: 20px;
            width:90px;
            margin:0 auto;
    }

    header banner .introduce .introducemain .left .title{
        float: right;
        width: 100%;
        text-align: right;
        font-size: 12px;
    }

    header banner .introduce .introducemain *{
        font-size:12px;
    }

    
    header banner .introduce .introducemain .left .more a{
        display:block;
        padding-bottom: 11px;
        text-align:right;
        padding-top:11px;
        padding-top: 16px;
    }

    header banner .introduce .introducemain .right{
        width:100%;
        min-width:unset;
        float:left;
        max-width:100% !important;
    }

    header banner .introduce .introducemain .right div{
        font-size:12px;
        line-height:25px;
        max-width: unset;
        word-wrap:break-word;
    }


    header banner .servicelink{
        padding-top:0;
        position:unset;
        margin-top:15px;
        height: auto;
        margin-bottom:15px;
    }
    header banner .servicelink .main {
       width:100%;
       max-width:100%;
    }

    header banner .servicelink .main .item {
        width: 19.7%;

    }

    .weixin .context{
        height:auto;
        margin:0 auto 17px auto;
    }

    .weixin .context .text .title{
        font-size:15px;
    }

    .weixin .context .text .tip{
        font-size:12px;
    }

    .weixin .context .text .sel{
        font-size:13px;
    }

    .weixin .context .text{
        margin-top:0;
        height:auto;
        width: 90%;
    }

    .app .context{
        padding-top:0;
    }

    .cloud .context .items{
        margin-top:0;
        margin-bottom:0;
    }
    .app .context .items ul li{
        float:initial;
        margin: 20px auto;
        width:100%;
    }
    .app .context .items ul li .title{
        height:36px;
        line-height:35px;
    }
    .cloud .context .items ul li h4{
        line-height:32px;
    }

    .cloud .context .items ul li .title{
        line-height:35px;
    }
    .cloud .context .items ul li{
        float:initial;
        margin: 15px auto;
        width:205px;
    }
    .advantage{
        padding-bottom: 25px;
    }
    .advantage .context ul li {
        height: 250px;
        margin: 50px auto;
        float:initial;
    }
    .advantage .context h2:before,.news .context h2:before {
        width:100%;
        left: 50%; 
        margin-left:-50%;
    }

    .procedure .context .items ul li{
        float:initial;
        margin: 45px auto;
        margin-bottom:30px
    }

    .procedure .context .items ul li span {
        margin-top:20px;
    }
    .procedure .context .introduce{
        text-align:justify;
        width:98%;
    }
    .procedure .context .title li{
       width: 25%;
    }

    .friend{
        height:auto;
    }
    .friend .context ul li {
        width: 100%;
    }
    .friend .context h2{
        font-size: 15px;
    }

    .case .context .title li {
        width: 16%;
        margin-bottom:30px;
        font-size:12px;
        color:#000;
    }
    .news .context .items ul li{
        padding-left:0;
        width: 90%;
        margin:0 auto;
        float:unset;
        border-right:unset !important;
    }
    .case .context .title li:hover:after, .case .context .active:after{
        left: 83.8%;
    }
    .case .context .items{
        padding-left:unset;
    }
    .case .context .items ul li{
        float:unset;
    }
    .soft .context .items{
        width:100%;
    }
    .soft .context{
        padding-bottom:20px;

    }
    .soft .context .items ul li{
         float:unset;width:100%;
         margin-left:0;
         margin-right:0;
    }

    .PageSite .context{
        padding-top:0;
    }

    .PageSite .context .items .right{
        width:85%;
        margin-left:30px;
        float:left;
        padding:30px 0; 
        line-height:23px;

    }
    .PageSite .context .items .left .top,.PageSite .context .items .left .bottom{
        width:unset;
    }

    .PageSite .context .items .left .bottom{
        margin-top:unset;
    }
    .PageSite .context .items .right h4{
        margin-top: 26px;
    }

    .PageSite .context .items .left{
        float:unset;
        width:95%;
        margin:0 auto;
    }
    .footerNav .footerNav-title{
        font-size: 25px;
        width: 85%;
    }

    .PageSite .context .items .left .top h4{
        padding-left: 22px;
    }
    .PageSite .context .items .left .bottom h4{
        padding-left: 22px;
    }
    .footerNav .nav-msg .foot-tel{font-size:23px;}
    
    navigation .nav .li:hover .servicelink {
        display: none;
    }

    banner .banner{
      margin-top:50px;
    }
}

@media(max-width:680px) {
    header banner .introduce .introducemain .right{
        max-width:100%;
    }
}
@media(min-width:1336px) {
    header banner .introduce .introducemain .right {
        margin-top: 30px;
        max-width: 80%;
        float: left;
    }
}


@media screen and (max-width: 768px)
{
    .mobileFooter {
        width: 100%;
        display: block;
        display: flex;
        display: -webkit-flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 100;
        background-color: rgba(60, 55, 55, 0.9);
    }
    .mobileFooter div {
        text-align: center;
        width: 33%;
        padding: 18px 0 0px 0;
        height: 100%;
    }
    .mobileFooter div i {
        font-size: 25px;
        color: #0c969e;
        padding: 8px;
        background-color: #fff;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
    }

    .mobileFooter div h6 {
        font-size: 14px;
        color: #fff;
        line-height: 2;
        margin-top: 10px;
    }
    footer {
        margin-bottom:82px!important;
    }
}


@media(min-width:1270px) {
    navigation .nav {
        width:795px;
    }
    navigation .nav ul .li {
        width:75px;
    }
}