html, body {
    /*height: 100vh;*/
    /*width: 100vw;*/
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    background-color: #f9fcff;
    background-image: url(/images/bg/bg-s-rt.png),url(/images/bg/bg-s-rb.png),url(/images/bg/bg-s-lt.png),url(/images/bg/bg-s-lb.png),url(/images/bg/bg-s-c.png),url(/images/bg/wz/bl.png),url(/images/bg/wz/br.png);
    background-position: right top,right 0,left top,left bottom,center center,left bottom 30px,right bottom 30px;
    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
    background-size: auto, cover, auto, auto, cover, 55% auto,70% 8%;
    background-attachment: fixed;
}
/*#region header*/
header {
    background: #e8f3ffad !important;
    border-bottom: 2px solid #ffffffb8;
    position: relative;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10000;
}
    /*#region logo*/
    header .layui-nav {
        background-color: unset;
    }

.layui-nav * {
    color: #4c4c4c !important;
}

header .layui-nav button {
    color: #fff !important;
}

header h1 {
    position: relative;
    height: 60px;
    color: #386089;
    display: inline-block;
    padding-left: 140px;
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-image: url(/images/logo.png);
    background-size: 120px;
    border-bottom: solid 1px rgb(255 255 255 / .20);
    font-size: 24px;
    text-shadow: 0 1px #000;
}

    header h1 em {
        color: #ff6a00;
        font-size: 14px;
        font-style: normal;
        margin: 4px;
    }
/*#endregion*/
/*#endregion*/
/*#region NavMenus*/
#NavMenus {
    float: right;
    display: inline-block;
    font-family: "黑体";
    font-size: 24px !important;
}

    #NavMenus a, #NavMenus i {
        font-family: "黑体";
        font-size: 14px !important;
        color: #386089 !important;
    }

    #NavMenus i {
        color: #386089 !important;
        margin-right: 4px;
    }

    #NavMenus ul {
        color: #000b !important;
    }

#show_CurTime {
    color: #7a1212 !important;
    line-height: 20px !important;
}
/*#endregion*/
/*#region UserLoginBase*/
#form_UserLoginBase {
    display: inline-block !important;
    float: right;
    margin-left: 40px;
    margin-right: 20px;
    font-size: 18px;
    color: #ff6a00 !important;
}

header #form_UserLoginBase img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin: 4px 8px;
    padding: 2px;
    border: solid 1px #4c4c4c;
}

header #form_UserLoginBase > span {
    font-size: 16px;
}

#form_UserLoginBase .layui-icon-username:before {
    font-size: 24px !important;
    border-radius: 2px;
    padding: 2px;
    cursor: pointer;
    margin: 4px;
}
/* #endregion*/

/*#region main*/
main {
    margin-bottom: 32px;
}
/* #endregion*/


/*#region section*/
section {
    position: relative;
    max-width: 2100px;
    margin: 0 auto;
}

    section > fieldset {
        border-color: #a9a9a9 !important;
        text-align: center
    }

        section > fieldset > legend {
            font-size: 32px !important;
            font-weight: 700;
            color: #003e76;
            text-shadow: 0 1px rgb(255 255 255)
        }

    section.banner {
        margin: 0 auto;
        margin-top: 64px;
    }

        section.banner > img {
            width: 100%;
        }

        section.banner > .product {
            position: absolute;
            z-index: 999;
            width: 100%;
            height: 100%;
            bottom:0px !important;
            text-align: center;
        }

    section.server,
    section.sewage,
    section.rain,
    section.treatment,
    section.about,
    section.cases,
    section.pro {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 10px auto;
    }

    section.par {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 10px auto;
    }

.layui-panel {
    padding: 20px;
    background: rgb(255 255 255 / .45);
    border-radius: 4px;
    box-sizing: border-box;
    border-color: rgb(255 255 255 / 0.5);
}
/* #endregion*/
/*#region form_Product*/
#form_Product {
    max-width: 2100px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgb(255 255 255 / 0.5);
    margin: 0 auto !important;
}
/* #endregion*/

/*#region section.complete*/
section.complete {
}

    section.complete .Intro {
        background-image: url('/images/aboutus/bg_p_04.jpg');
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100%;
        text-align: center;
    }

        section.complete .Intro > div.img {
            border: solid 1px #3860898c;
            border-radius: 8px;
        }

        section.complete .Intro h4 {
            position: absolute;
            top: 50px;
            left: 30px;
            font-size: 32px;
            line-height: 32px;
        }

            section.complete .Intro h4 b {
                background: rgb(144 209 239 / 40%);
                border-radius: 8px;
                margin: 4px;
                padding: 8px;
                text-shadow: 0 1px #fff;
                color: #155a7a;
            }

        section.complete .Intro h5 {
            color: white;
            position: absolute;
            top: 300px;
            right: 50px;
            padding: 20px;
            box-sizing: border-box;
            font-size: 24px;
            border: solid 1px #f2ff00;
            text-shadow: 1px 2px #000b
        }

            section.complete .Intro h5 b {
                display: block;
                margin: 10px;
                padding: 10px;
                background: #3860898c;
            }

    section.complete ul.grid {
        display: inline-grid;
        grid-template-columns: repeat(3,380px);
        grid-gap: 10px;
        margin:30px  ;
    }

        section.complete ul.grid li {
            position: relative;
            padding:8px;
            
          
            border-radius: 10px;
            border: solid 1px #b0b0b0;
            
        }


            section.complete ul.grid li h4 {
                font-size: 24px;
                background: #99c9f38c;
                color: #105781;
                position: absolute;
                bottom: 0px;
                width: 100%;
                left: 0;
                box-sizing: border-box;
                font-size: 18px;
                text-align: center;
                padding: 4px;
                text-shadow: 0 1px #fff;
            }

/* #endregion*/

/*#region section.xbd*/
section.xbd {
    position: relative;
}

    section.xbd .layui-col-xl6.Intro {
        background-image: url('/images/aboutus/bg_p_03.png');
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100% 300px;
    }

    section.xbd .Intro > div.img {
        border: solid 1px #c57322;
        border-radius: 4px;
    }

    section.xbd .layui-col-xl6.Intro h4 {
        position: absolute;
        bottom: 300px;
        left: 200px;
        font-size: 32px;
    }

        section.xbd .layui-col-xl6.Intro h4 b {
            border-radius: 8px;
            margin: 4px;
            padding: 8px;
            text-shadow: 2px 3px #ffffff;
            color: #6c0000;
        }

    section.xbd .layui-col-xl6 p {
        position: absolute;
        bottom: 40px;
        left: 200px;
        font-size: 24px;
        color: #fff700;
        text-shadow: 1px 2px #3e0000;
    }

    section.xbd ul.advantage {
        display: inline-grid;
        grid-template-columns: repeat(2,160px);
        grid-gap: 10px;
        margin: 20px;
    }

        section.xbd ul.advantage li h4 {
            font-size: 24px;
            background: #000;
            color: white;
            width: 100%;
            box-sizing: border-box;
            font-size: 18px;
            text-align: center;
            padding: 4px;
            border-radius: 4px;
        }

    section.xbd ul.feature {
        display: inline-grid;
        grid-template-columns: repeat(2,240px);
        grid-gap: 20px;
        margin: 40px;
    }

        section.xbd ul.feature li img {
            border-radius: 8px;
            box-sizing: border-box;
            padding: 2px;
            border: 1px solid #898989;
            text-shadow: 1px 3px #3860898c
        }


        section.xbd ul.feature li h4 {
            font-size: 24px;
            background: #6e2900;
            color: white;
            width: 100%;
            box-sizing: border-box;
            font-size: 18px;
            text-align: center;
            padding: 4px;
            border-radius: 4px;
            margin: 2px;
        }

    section.xbd li {
        position: relative;
    }
/* #endregion*/
/*#region section.rain*/
section.rain {
    margin-bottom: 40px;
}

    section.rain .text {
        position: absolute;
        left: 0;
        top: 0;
        background: #ffffff69
    }

    section.rain .text {
        z-index: 999 !important;
    }

        section.rain .text img {
            height: 586px;
        }



section.rain ul.grid {
    display: inline-grid;
    grid-template-columns: repeat(2,300px);
    grid-gap: 10px;
    margin: 20px auto !important;
    text-align: center !important;
    align-content: center !important;
}



    section.rain ul.grid li {
        box-sizing: border-box;
        border-radius: 10px;
        border: solid 1px #386089;
        padding: 10px;
        position: relative;
        justify-content: center; /* 水平居中 */
        align-content: center; /* 垂直居中 */
        place-self: center;
    }


        section.rain ul.grid li h4 {
            font-size: 24px;
            background: #386089e0;
            color: white;
            padding: 4px;
            border-radius: 4px;
            font-size: 18px;
        }


/* #endregion*/
/*#region section.treatment*/
section.treatment {
}

    section.treatment .text {
        position: absolute;
        left: 0;
        top: 0;
        background: #ffffff69
    }



    section.treatment .Intro > div.img {
        border: solid 1px #00345c;
        border-radius: 4px;
    }

    section.treatment ul {
        display: grid;
        grid-template-columns: repeat(3,200px);
        /*grid-template-columns: repeat(auto-fill,200px);*/
        /*grid-template-rows: 100px 100px 100px;*/
        grid-gap: 30px;
        margin: 40px;
    }

    section.treatment li {
        position: relative;
        box-sizing: border-box;
        /* 
        padding: 10px;
        border-radius: 10px;
        vertical-align: top;
        border: solid 1px #386089;
        margin: 10px;
       
       */
    }


        section.treatment li h4 {
            font-size: 24px;
            background: #3860898c;
            color: white;
            position: absolute;
            bottom: 0px;
            width: 100%;
            padding: 4px;
            box-sizing: border-box;
            font-size: 18px;
        }

    section.treatment .ico {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 999 !important;
    }

    section.treatment .img {
        text-align: center;
        background-image: url('/images/aboutus/bg_p_01.gif');
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
    }

        section.treatment .img img {
            z-index: -1 !important;
        }

    section.treatment .ico img {
        margin: 4px;
        text-align: center;
    }

    section.treatment .text {
        position: absolute;
        top: 30px;
        left: 30px;
        z-index: 999 !important;
    }

        section.treatment .text h1 {
            color: #025c70;
            font-size: 32px;
            border-bottom: double 2px #025c70;
            padding: 8px;
        }
/* #endregion*/
/*#region section.sewage*/
section.sewage {
    margin-bottom: 40px;
}

    section.sewage .layui-col-xl4 {
        text-align: center;
    }

        section.sewage .layui-col-xl4 div {
            display: inline-block;
            width: 240px;
            margin: 20px;
        }

            section.sewage .layui-col-xl4 div h4 {
                background: #386089;
                color: white;
                padding: 4px;
                border-radius: 4px;
            }


    section.sewage ul {
        display: grid;
        grid-template-columns: repeat(2,48%);
        grid-gap: 20px;
        margin: 40px;
    }

    section.sewage li {
        background: #f9fcff;
        padding: 8px;
        border-radius: 8px;
        border: solid 1px #386089;
        box-sizing: border-box;
    }

        section.sewage li img {
            width: 100%;
            border-radius: 8px;
        }

        section.sewage li i {
            font-size: 24px;
            margin: 10px;
            color: white;
            background: #386089;
            display: inline-block;
            height: 20px;
            width: 20px;
            padding: 10px;
            border-radius: 50%;
            text-align: center;
            vertical-align: central;
            font-style: normal;
            font-weight: bold;
        }

        section.sewage li h4 {
            font-size: 24px;
            margin: 10px;
            color: #386089
        }

        section.sewage li div {
            display: inline-block;
            width: 48%;
            text-align: center;
            vertical-align: text-top;
        }

    section.sewage .layui-col-xl4 div {
        vertical-align: text-top;
        text-indent: 1rem;
    }

/* #endregion*/


/*#region section.about*/
section.about .layui-col-xl8 {
    margin-top: 32px;
}

section.about .Intro h4 {
    font-size: 24px;
    border-bottom: #e7e7e7 4px solid;
    padding: 10px;
}

section.about .Intro p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 32px;
    text-indent: 20px;
    margin: 20px;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

section.about .Intro button {
    background: #386089
}
/* #endregion*/
/*#region section.server*/
section.server {
    margin-bottom: 40px;
}

    section.server h1 {
        line-height: 48px;
    }

    section.server ul {
        display: block;
        vertical-align: top;
    }

    section.server li {
        display: inline-block;
        margin: 10px;
        box-sizing: border-box;
        background: #f9fcff;
        padding: 10px;
        border-radius: 20px;
        width: 300px;
        height: 200px;
        vertical-align: top;
    }

        section.server li i {
            font-size: 48px;
            margin: 10px;
            color: #ff6a00;
        }

        section.server li h4 {
            font-size: 24px;
            margin: 10px;
        }

        section.server li div {
        }
/* #endregion*/
/*#region dtree-Special*/
.dtree-Special li {
    line-height: 50px;
    font-size: 16px;
    cursor: pointer;
}

    .dtree-Special li:hover {
        background: #bde5ef
    }

    .dtree-Special li img {
        width: 32px;
        height: 32px;
        padding: 2px;
        border-radius: 50%;
    }

.dtree-Class li {
    line-height: 50px;
    font-size: 16px;
    cursor: pointer;
}

    .dtree-Class li:hover {
        background: #bde5ef
    }

    .dtree-Class li img {
        width: 32px;
        height: 32px;
        padding: 2px;
        border-radius: 50%;
    }
/* #endregion*/
/*#region  list-Products*/
.list-Products {
    text-align: center;
}

    .list-Products li {
        display: inline-block;
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
    }

        .list-Products li div {
            display: inline-block;
            border-radius: 8px;
            box-sizing: border-box;
            margin: 20px;
            position: relative;
        }

        .list-Products li img {
            width: 240px;
            height: 240px;
            border-radius: 8px;
            border-bottom-left-radius: unset;
            border-bottom-right-radius: unset;
        }

        .list-Products li span {
            display: block;
            width: 240px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #f3f3f3;
            border: solid 1px #f3f3f3;
        }

        .list-Products li em {
            display: block;
            width: 100%;
            height: 240px;
            z-index: 6;
            background: #fffa007f;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: auto;
            visibility: hidden;
        }
/*  .list-Products li .visibility {
          
            visibility: visible !important;
        }*/

/*#endregion*/
/*#region list-Cases*/
.list-Cases {
    text-align: center;
}

    .list-Cases li {
        display: inline-block;
        cursor: pointer;
    }

        .list-Cases li div {
            display: inline-block;
            margin: 20px;
            border-radius: 8px;
            text-align: center;
            position: relative;
        }

        .list-Cases li img {
            display: inline-block;
            height: 226px;
            width: 300px;
            border-radius: 8px;
        }

        .list-Cases li:hover img {
            -webkit-filter: contrast(90%);
            filter: contrast(90%);
        }

        .list-Cases li span {
            display: block;
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #ffffff52;
            position: absolute;
            bottom: 0px;
            color: #fff;
            /*text-shadow:0 2px #4c4c4c*/
            text-shadow: -1px -1px 0 #000b, 1px -1px 0 #000b, -1px 1px 0 #000b, 1px 1px 0 #000b;
        }
/* #endregion*/
/*#region list-Qualifications*/
.list-Qualifications {
    text-align: center;
}

    .list-Qualifications li {
        display: inline-block;
        cursor: pointer;
    }

        .list-Qualifications li div {
            display: inline-block;
            border: solid 1px #f0f0f0;
            padding: 8px;
            border-radius: 4px;
            text-align: center;
            margin: 8px;
        }

        .list-Qualifications li img {
            width: 300px;
            height: 226px;
            border: solid 1px #f3f3f3;
        }

        .list-Qualifications li:hover img {
            -webkit-filter: contrast(90%);
            filter: contrast(90%);
        }

        .list-Qualifications li span {
            display: block;
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #f3f3f3;
            border: solid 1px #f3f3f3;
        }

        .list-Qualifications li.vertical img {
            width: 165px;
        }

        .list-Qualifications li.vertical span {
            width: 165px;
        }

.layui-panel.Special {
    margin-bottom: 15px;
}
/* #endregion*/
/*#region footer*/
footer {
    display: block;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.7);
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 4px;
}

    footer div {
        display: inline-block;
        line-height: 24px;
    }
/* #endregion*/
/*#region Search_Tags*/
.Search_Tags {
    display: block;
    box-sizing: border-box;
    line-height: 34px;
    padding: 2px 4px
}

    .Search_Tags a {
        display: inline-block;
        border: solid 1px #6060606b;
        height: 22px;
        line-height: 22px;
        padding: 0 4px;
        border-radius: 2px;
        background-color: #eedc98;
        margin: 0 4px;
        cursor: pointer;
        padding: 4px 6px
    }

        .Search_Tags a:hover {
            color: orange
        }

        .Search_Tags a i:before {
            font-family: "FontAwesome";
            content: "\f00d";
            margin-left: 4px;
            font-style: normal
        }

        .Search_Tags a i:hover:before {
            color: red
        }
/*#endregion*/
/*#region screen*/
@media screen and (max-width:450px) {
    #form_UserLoginBase li {
        height: 60px;
    }

    #U_NickName {
        display: none;
    }

    header h1 {
        position: relative;
        height: 60px;
        color: #386089;
        display: inline-block;
        padding-left: 60px;
        background-repeat: no-repeat;
        background-position: left 10px center;
        background-image: url(/images/icon.png);
        background-size: 48px;
        border-bottom: solid 1px rgb(255 255 255 / .20);
    }
}

@media screen and (max-width:500px) {
    #U_NickName span {
        display: none;
    }

    .layui-card-body {
        padding: 0;
    }

    .layui-card-header {
        height: 32px;
        line-height: 32px;
    }

        .layui-card-header h1 {
            font-size: 14px;
        }

    .layui-panel {
        padding: 0;
    }

    .list-Products li {
        width: 49vw;
        box-sizing: border-box;
    }

    .list-Products div {
        margin: 4px;
    }

    .list-Products li span {
        width: 140px;
    }

    .list-Products li img {
        width: 120px;
        height: 120px;
    }

    .list-Cases li {
        width: 49vw;
        box-sizing: border-box;
    }

    .list-Cases div {
        margin: 4px;
    }

    .list-Cases li span {
        width: 140px;
    }

    .list-Cases li img {
        width: 140px;
        height: 140px;
    }

    .list-Qualifications li {
        width: 49vw;
        box-sizing: border-box;
    }

    .list-Qualifications div {
        margin: 4px;
    }

    .list-Qualifications li span {
        width: 140px;
    }

    .list-Qualifications li img {
        width: 140px;
        height: 100px;
    }

    .list-Qualifications li.vertical img {
        width: 140px;
        height: 180px;
    }

    .list-Qualifications li.vertical span {
        width: 140px;
    }

    .list-Pagination {
        text-align: center;
    }

    .layui-laypage-count,
    .layui-laypage-skip,
    .layui-laypage-limits {
        display: none !important;
    }

    .dtree-Class li {
        display: inline-block;
    }

    .dtree-Special li {
        margin: 2px;
        padding: 0 2px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        width: 30vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
    }

    .ToolBar_Search {
        border-bottom: solid 1px #e1e1e1;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

        .ToolBar_Search ul {
            text-align: center;
        }

        .ToolBar_Search .layui-inline {
            margin: unset !important;
        }

    .search-tags,
    .search-Field .layui-input-inline {
        display: none !important;
    }

    .search-keyword {
        width: 120px !important;
        margin-left: -8px;
    }

    .search-submit {
        margin: 0px;
    }

    header * {
        display: inline-block;
    }

    #NavMenus li {
        width: 30vw;
    }

    span.copyright::before {
        background-size: 200px !important;
    }
}

@media screen and (max-width:767.98px) {
    #nav-CurTime {
        display: none;
    }

    .layui-container {
        padding: 0 0px;
    }

    .layui-hide-xs {
        display: none !important
    }

    .layui-show-xs-block {
        display: block !important
    }

    .layui-show-xs-inline {
        display: inline !important
    }

    .layui-show-xs-inline-block {
        display: inline-block !important
    }

    footer * {
        display: block !important;
        float: unset !important;
        text-align: center;
        line-height: 24px;
    }
}

@media screen and (max-width:1400px) {
    #NavMenus {
        clear: both;
        background: rgba(255,255,255,0.4) !important;
        width: 100%;
    }

    #nav-CurTime {
        float: right;
    }

    .dtree-Special ul > * {
        text-align: center;
    }

    .dtree-Special li {
        display: inline-block !important;
        margin: 4px;
        border: solid 1px #CCCCCC;
        padding: 4px 8px;
        border-radius: 4px;
        background: #ecfcff;
    }

    .dtree-Class ul {
        display: block;
        text-align: center;
    }

    .dtree-Class li {
        display: inline-block;
        margin: 4px;
        line-height: unset;
    }
}

@media screen and (min-width:2000px) {
    section.pro .layui-col-xl3 {
        width: 15%;
    }

    section.pro .layui-col-xl9 {
        width: 85%;
    }

    section.cases .layui-col-xl3 {
        width: 15%;
    }

    section.cases .layui-col-xl9 {
        width: 85%;
    }
}
/* #endregion*/
.ToolBar_Search .layui-inline {
    margin: 4px;
}



.layui-card-header .btn_more {
    position: absolute;
    right: 12px;
    top: 2px;
    display: inline-block;
}

    .layui-card-header .btn_more::before {
        font-family: 'FontAwesome';
        content: "\f03a";
        color: #888888;
        font-size: 14px;
    }

    .layui-card-header .btn_more:hover:before {
        color: #ff6a00;
        cursor: pointer;
    }
.img.layui-carousel {
    background-color: unset !important;
    z-index: 0 !important;
}

[carousel-item] > * {
    background-color: unset !important;
    z-index: 0 !important;
}