.banner-main{
    height: 644px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 1240px;
    background-image: url(/public/img/solve/solve-banner-1.jpg);
    background-color: #e1dfe0;
    color: #000000;
    font-family: Microsoft YaHei;
    padding-top: 186px;
}
#m2 .banner-main{
    background-image: url(/public/img/solve/solve-banner-2.png);
}
#m3 .banner-main{
    background-image: url(/public/img/solve/solve-banner-3.jpg);
}
#m4 .banner-main{
    background-image: url(/public/img/solve/solve-banner-4.jpg);
}
.banner-main .banner-m-title{
    font-size: 60px;
    font-family: fz;
    line-height: 1;
}
.banner-main .banner-m-stitle{
    font-size: 24px;
    line-height: 1;
    margin-top: 24px;
    margin-bottom: 30px;
    padding-bottom: 42px;
    position: relative;
}
.banner-main .banner-m-stitle::after{
    content: ""; position: absolute;
    width: 64px;
    height: 6px;left: 0; bottom: 0;
    background-color: #3269FF;
    border-radius: 3px;
}
.banner-main .banner-m-desc{
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
    margin-bottom: 30px;
}
.banner-main .btn-zx{width: 120px;padding:14px 0;}

.banner-nav{
    height: 0; position: relative;margin: auto;width: 1240px;
    
}
.banner-nav .banner-nav-list{
    position: absolute;
    width: 100%;
    height: 86px;
    -webkit-box-shadow: 1px 2px 7px 0px rgba(0, 10, 34, 0.15);
            box-shadow: 1px 2px 7px 0px rgba(0, 10, 34, 0.15);
    border-radius: 4px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; bottom: -36px;
}
.banner-nav .banner-nav-list .banner-nav-li{
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; background-color: rgba(255 , 255 , 255 , 1);
    line-height: 86px;
    text-align: center;
    font-size: 18px;
    color: #333333;
    cursor: pointer;
}
.banner-nav .banner-nav-list .banner-nav-li:hover{
    text-decoration: underline;
}
.banner-nav .banner-nav-list .banner-nav-li.active{
    background-color: #3269FF;
    color: #fff;
}

.com-section{
    padding: 80px 0;
}
.section-title{
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    line-height: 1;
    margin-top: 0; text-align: left;
}


.adv-section{background-color: #f9f9f9;padding-top: 116px;}
.adv-section .section-main{
    margin-top: 52px;
}
.adv-section .adv-nav-cont .adv-nav-li{
    padding: 12px 13px;
    font-size: 18px;
    color: #333333;
    line-height: 1; cursor: pointer;
    border-radius: 2px;
    float: left; margin-left: 56px;
}
.adv-section .adv-nav-cont .adv-nav-li:nth-child(1){
    margin-left: 0;
}
.adv-section .adv-nav-cont .adv-nav-li.active,
.adv-section .adv-nav-cont .adv-nav-li:hover{
    background: rgba(50, 105, 255,.1);
    color: #3269FF;
}
.adv-section .adv-main-cont{
    margin-top: 24px;
}
.adv-section .adv-main-li{
    display: none;
    padding: 64px 72px 36px 664px;
    font-family: Microsoft YaHei;
    color: #333333;
    height: 346px; background-color: #fff;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 346px;
    flex-direction: column;
}
.adv-section .adv-main-li:nth-child(1){
    background-image: url(/public/img/solve/1034cbe7e34a3d56c12440e61caeb3d0c2591f286abdc8-oL3Nw8.png);
}
#m2 .adv-section .adv-main-li:nth-child(1),
#m3 .adv-section .adv-main-li:nth-child(1),
#m4 .adv-section .adv-main-li:nth-child(1){
    background-image: url(/public/img/solve/1034cbe7e34a3d56c12440e61caeb3d0c2591f286abdc8-oL3Nw81.png);
}
.adv-section .adv-main-li:nth-child(2){
    background-image: url(/public/img/solve/1034cbe7e34a3d56c12440e61caeb3d0c2591f286abdc8-oL3Nw2.png);
}
.adv-section .adv-main-li:nth-child(3){
    background-image: url(/public/img/solve/1034cbe7e34a3d56c12440e61caeb3d0c2591f286abdc8-oL3Nw23.png);
}
.adv-section .adv-main-li:nth-child(4){
    background-image: url(/public/img/solve/1034cbe7e34a3d56c12440e61caeb3d0c2591f286abdc8-oL3Nw82.png);
}
.adv-section .adv-main-li.active{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.adv-section .adv-main-li .adv-main-title{
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}
.adv-section .adv-main-li .adv-main-desc{
    font-size: 18px;
    line-height: 30px;
    margin-top: 30px;
    /* margin-bottom: 76px; */
    flex: 1;
}
.adv-section .adv-main-li .adv-main-btn{width: 120px;padding: 14px 0;}
.adv-section .adv-main-li .adv-main-img{display: none;}


.solve-section .solve-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 24px;
}
.solve-section .solve-li{
    width: 295px;
    height: 240px; padding: 20px;
    background: #F9F9F9;
}
.solve-section .solve-li-type{
    width: 100%;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 42px;
    height: 42px; text-align: center;
    background-color: #3269FF;
}
.solve-section .solve-li-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.solve-section .solve-li-vl{
    width: 120px;
    height: 64px;
    line-height: 64px; text-align: center;
    background: #FFFFFF;
    margin-top: 12px;
    font-size: 14px;
    color: #000000;
}





.case-section{background-color: #f9f9f9;}
.case-section .section-main{
    margin-top: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.case-section .case-nav-box{
    width: 490px;
}
.case-section .case-nav-li{
    margin-top: 24px;
    padding: 36px;
    height: 180px;
    color: #000000;
    font-family: Microsoft YaHei;
    background-color: #FFFFFF;
    position: relative;
}
.case-section .case-nav-li:nth-child(1){margin-top: 0;}
.case-section .case-nav-li::after{
    content: "";
    display: block; position: absolute;
    right: 0; top: 0;
    width: 4px;
    height: 0;
    background-color: #3269FF;
    -webkit-transition: height ease .2s;
    transition: height ease .2s;
}
.case-section .case-nav-li:hover::after,
.case-nav-li.active::after{
    height: 180px;
}
.case-section .case-nav-li .mimicImg{
    display: block;
    height: 48px;
    margin-bottom: 20px;
    background-repeat: no-repeat;
    background-position: -338px 0;
    background-size: auto 100%;
}
.case-section .case-nav-li > p{
    font-size: 16px;
    line-height: 24px;
}
.case-section .case-main-cont{
    -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.case-section .case-main-li{
    height: 588px;
    display: none;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto 360px; background-color: #fff;
    background-image: url(/public/img/solve/700353f9a7ebdaf85598ad90d2eb36b98c93ff80106de-wkbrtM.png);
}
#m2 .case-section .case-main-li{
    background-image: url(/public/img/solve/700353f9a7ebdaf85598ad90d2eb36b98c93ff80106de-wkbrtM2.png);
}
#m3 .case-section .case-main-li{
    background-image: url(/public/img/solve/700353f9a7ebdaf85598ad90d2eb36b98c93ff80106de-wkbrtM3.png);
}
#m4 .case-section .case-main-li{
    background-image: url(/public/img/solve/700353f9a7ebdaf85598ad90d2eb36b98c93ff80106de-wkbrtM4.png);
}
.case-section .case-main-list{
    margin-right: 24px;
}
.case-section .case-main-li.active{
    display: block;
}
.case-section .case-main-li .case-main-i1{
    display: block;
    width: auto; height: 48px;
    margin: 150px auto 198px;
}
.case-section .case-main-li .case-main-i2{
    background-repeat: no-repeat;
    background-position: -338px 0;
    background-size: auto 100%;
    display: block; height: 48px;margin-left: 48px;
}
.case-section .case-main-li > p{
    width: 630px;
    margin: 20px auto 0;
    font-size: 16px;
    color: #000000;
    line-height: 24px;
}



.flue-section{
    padding: 72px 0 68px;
}
.flue-section .section-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flue-section .section-title .btn{
    padding: 10px;
    font-size: 14px;
}
.flue-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 28px;
}
.flue-li{
    width: 295px;
    height: 126px;
    background: #FFFFFF;
    border: 2px solid #F9F9F9;
    color: #000000;
    text-align: left;
}
.flue-li-type{
    padding: 24px 0 0 36px;
    height: 60px;
    font-size: 18px;
    line-height: 1;
    border-bottom: 2px solid #F9F9F9;
}
.flue-li-type > span{
    font-family: fz; margin-right: 8px;
}
.flue-li-box{
    padding: 24px 36px;
    font-size: 16px;
    line-height: 1;
}
.pc_hidden{display: none;}


@media screen and (max-width:768px){
    .mob_hidden{display: none;}
    .container{width: 375px;}
    .banner-main{
        height: 420px;
        min-width: auto;
        background-image: url(/public/img/solve/solve-banner-1-m.jpg);
        background-color: #e1dfe0;
        padding-top: 90px;
    }
    #m2 .banner-main{
        background-image: url(/public/img/solve/solve-banner-2-m.png);
    }
    #m3 .banner-main{
        background-image: url(/public/img/solve/solve-banner-3-m.png);
    }
    #m4 .banner-main{
        background-image: url(/public/img/solve/solve-banner-4-m.jpg);
    }
    .banner-main .banner-m-title{
        font-size: 30px;
        line-height: 36px;
    }
    .banner-main .banner-m-stitle{
        font-size: 14px;
        line-height: 24px;
        padding-top: 28px;
    }
    .banner-main .banner-m-stitle::after{
        width: 32px;
        height: 3px;top: 0;
    }
    .banner-main .banner-m-desc,.banner-main .btn-zx{
        display: none;
    }
    
    .banner-nav{
        width: 100%;
    }
    .banner-nav .banner-nav-list{
        height: 42px;bottom: -24px;
    }
    .banner-nav .banner-nav-list .banner-nav-li{
        line-height: 42px;
        font-size: 12px;
    }

    .com-section{
        padding: 32px 0;
    }
    .section-title{
        font-size: 12px; text-align: left;
    }
    

    
    .adv-section{padding-top: 54px;padding-bottom: 6px;}
    .adv-section .section-title{margin: 0;}
    .adv-section .section-main{
        margin-top: 18px;
    }
    .adv-section .adv-nav-cont{
        display: none;
    }
    .adv-section .adv-main-cont{
        margin-top: 18px;
    }
    .adv-section .adv-main-li{
        display: block;
        padding: 23px 18px 26px;
        background-image: none!important;
        height: 62px; overflow: hidden;
        margin-bottom: 18px;
    }
    .adv-section .adv-main-li .adv-main-title{
        font-size: 15px;
        position: relative;
        display: block;
    }
    .adv-section .adv-main-li.active .adv-main-title{
        color: #3269FF;
    }
    .adv-section .adv-main-li .adv-main-title::after{
        content: "";
        position: absolute;
        width: 8px;
        border-left: 3px solid #000;
        border-top: 3px solid #000;
        right: 2px;
        height: 8px;
        transform: rotate(-135deg);
        top: 1px;
        transition: all ease .3s;
    }
    .adv-section .adv-main-li.active .adv-main-title::after{
        border-left: 3px solid #3269FF;
        border-top: 3px solid #3269FF;
        transform: rotate(45deg);
        top: 5px;
    }
    .adv-section .adv-main-li .adv-main-desc{
        margin-top: 16px;
        padding-top: 0;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 21px;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 309px auto;
        display: none;
        color: #333;
    }
    .adv-section .adv-main-li .adv-main-img{
        display: block; width: 100%; margin-bottom: 14px;
    }
    .adv-section .adv-main-li .adv-main-btn{
        display: none;
        width: 100%;
        padding: 13px 0;
        font-size: 14px;
        line-height: 1;
    }
    .adv-section .adv-main-li.active{
        height: auto;
    }
    .adv-section .adv-main-li.active .adv-main-desc,
    .adv-section .adv-main-li.active .adv-main-btn{display: block;}


    .solve-section{
        padding-bottom: 14px;
    }
    .solve-section .solve-list{
        flex-direction: column;
        align-items: center;
    }
    .solve-section .solve-li{
        padding: 24px; width: 100%;margin-bottom: 18px; height: auto;
    }
    .solve-section .solve-li-vl{
        width: 140px; height: 48px; line-height: 48px; margin-top: 18px; margin-bottom: 0;
    }


    .case-section .section-main{
        flex-direction: column;    margin-top: 18px;
    }
    .case-nav-list{
        display: flex; justify-content: space-between; margin-bottom: 18px;
    }
    .case-section .case-nav-li{
        margin: 0; padding: 10px 18px; height: auto;min-width: 30%;
    }
    .case-section .case-nav-li .mimicImg{
        height: 18px; margin: 0 auto; display: block;
    }
    .case-section .case-nav-li > p{
        display: none;
    }
    .case-section .case-nav-li::after{
        top: auto; bottom: 0;left: 0;right: auto;
    }
    .case-section .case-nav-li:hover::after, .case-nav-li.active::after{
        height: 2px; width: 100%;
    }
    .case-section .case-nav-box{
        width: auto;
    }
    .case-section .case-main-li{
        height: auto; padding-bottom: 28px;
        background-size: 100% auto;
    }
    .case-section .case-main-list{
        margin-right: 0;
    }
    .case-section .case-main-li .case-main-i1{
        height: 24px;
        margin: 78px auto 110px;
    }
    .case-section .case-main-li .case-main-i2{
        height: 30px;margin-left: 18px; background-position: -208px 0;
    }
    .case-section .case-main-li > p{
        width: calc(100% - 36px);
        margin: 17px auto 0;
        font-size: 14px;
        line-height: 21px;
    }



    .flue-list{
        flex-direction: column;
        align-items: center;
    }
    .flue-li{
        width: 100%;
        height: auto;
        border-width: 1px;
        margin-bottom: 18px;
    }
    .flue-li-type {
        padding: 24px 0 0 24px;
        border-bottom: 1px solid #F9F9F9;
    }
    .flue-li-box{
        padding: 18px 24px 24px;
    }
    .flue-section .btn{
        display: block;
        padding: 16px 0; font-size: 16px;
    }
}