.pgcases {
    background: url("../images/pgcases.jpg")  50% 50% no-repeat;
}

/*--------------------case cover page---------------------------------------*/
.ca_name {
    width: 110%;
    height: 440px;
    overflow: hidden;
    margin: 100px 0;
}

.ca_name a {
    display: block;
    float: left;
    width: 370px;
    height: 200px;
    margin: 0 40px 40px 0;
    line-height: 200px;
    text-align: center;
    font-size: 22px;
    color: #333;
    background: #f5f5f5;
    background: url("../images/cv1.jpg") /*tpa=https://static.zzboiler.com/web/img/cases/cv1.jpg*/;
    transition: all .2s;
}

.ca_name a:hover, .ca_name a.on {
    color: #FFFFFF;
    background: url("../images/cv1b.jpg") /*tpa=https://static.zzboiler.com/web/img/cases/cv1b.jpg*/;
}

.ca_name .ca2 {
    background: url("../images/cv2.jpg") /*tpa=https://static.zzboiler.com/web/img/cases/cv2.jpg*/;
}

.ca_name .ca2:hover {
    background: url("../images/cv2b.jpg") /*tpa=https://static.zzboiler.com/web/img/cases/cv2b.jpg*/;
}

.ca_name .ca3 {
    background: url("../images/cv3.jpg") /*tpa=https://static.zzboiler.com/web/img/cases/cv3.jpg*/;
}

.ca_name .ca3:hover {
    background: url("../images/cv3b.jpg") ;
}

.ca_name .ca4 {
    background: url("../images/cv4.jpg") ;
}

.ca_name .ca4:hover {
    background: url("../images/cv4b.jpg");
}

.ca_name .ca5 {
    background: url("../images/cv5.jpg") ;
}

.ca_name .ca5:hover {
    background: url("../images/cv5b.jpg") ;
}

.ca_name .ca6 {
    background: url("../images/cv6.jpg") ;
}

.ca_name .ca6:hover {
    background: url("../images/cv6b.jpg") ;
}

.ca_name + .rongliang {
    margin: 100px 0;
}

.an_pro dl, .ca_name a {
    position: relative;
}

.an_pro dl dd span, .ca_name a dd span {
    font-size: 16px !important;
}

.an_pro dl:after, .ca_name a:after {
    content: " ";
    display: block;
    width: 0;
    height: 1px;
    background: #ff3f3b;
    position: absolute;
    bottom: 0;
    transition: all 0.3s cubic-bezier(0.55, 0.09, 0.68, 0.53);
}

.an_pro dl:hover:after, .an_pro dl.on:after, .ca_name a:hover:after, .ca_name a.on:after {
    width: 100%;
}

/*-------china cases--------*/
.ovcase {
    width: 100%;
    height: 500px;
}

.ovcase .map {
    width: 575px;
    height: 470px;
    float: left;
    position: relative;
}

.ovcase .map li {
    position: absolute;
    cursor: pointer;
}

.ovcase .map li:hover, .ovcase .map li.on {
    color: #ff3f3b;
}

.tbs {
    width: 570px;
    float: right;
    height: 490px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.tbs::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
    opacity: .5;
}

.tbs::-webkit-scrollbar-thumb {
    border-radius: 10px; /* -webkit-box-shadow: inset 0 0 6px rgba(0,140,125,.3); */
    background-color: #fc3f3c36;
    opacity: 0.3;
}

.tbs table {
    width: 564px;
    position: relative;
    border-collapse: collapse;
}

.tbs td {
    text-align: center;
    border: 1px solid #EEEEEE;
    vertical-align: middle;
}

.tbs tr {
    height: 60px;
    line-height: 60px;
}

.tbs thead {
    background: #ff3f3b;
    color: #FFFFFF;
}

.tbs tbody {
    background: #FFFFFF;
    color: #666666;
}

/*----partner------*/
.parbox {
    margin: 30px auto 0;
}

.partner {
    width: 100%;
}

.partner ul {
    width: 110%;
    height: 400px;
}

.partner li {
    width: 270px;
    height: 180px;
    float: left;
    margin: 0 30px 30px 0;
    border: 1px solid #efefef;
    border-radius: 4px;
    position: relative;
    transition: height .2s, border .2s;
}

.partner li a {
    display: none;
    width: 270px;
    height: 180px;
    background: rgba(65, 66, 84, 0.8);
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    transition: all .2s;
}


.partner li img {
    width: 100%;
    height: 180px;
}

.partner li a > p {
    display: table-cell;
    vertical-align: middle;
    color: #FFFFFF;
    text-align: center;
    font-size: 12px;
}

.partner li span {
    display: block;
    font-size: 18px;
    margin-bottom: -5px;
}

.partner li:after {
    display: none;
    width: 100%;
    height: 10px;
    position: absolute;
    background: url("../images/tria_up.png")  center no-repeat;
    content: " ";
    clear: both;
    transition: all .3s;
    opacity: 0;
    clear: both;
}

.partner li:hover a {
    display: table;
}

.partner li em {
    display: block;
    position: absolute;
}

.partner div {
    position: absolute;
    background: #f5f5f5;
    width: 1200px;
    top: 180px;
    padding: 30px 0;
    display: none;
}

.partner div p {
    text-indent: 2em;
    width: 990px;
    padding: 0 100px;
    text-align: justify;
}

.partner div:after {
    display: block;
    content: " ";
    clear: both;
}

/*-------------------------case list page-------------------------------*/
.cls {
    margin: 100px auto;
    position: relative;
}

/*------clnav---------*/
.clnav {
    width: 200px;
    float: left;
    border-right: 1px solid #e6e6e6;
    height: 525px;
}

.clnav li {
    width: 180px;
    text-align: right;
    font-size: 16px;
    color: #666666;
    margin-top: 50px;
    position: relative;
}

.clnav li:after {
    content: " ";
    display: block;
    width: 12px;
    height: 12px;
    background-color: #e6e6e6;
    position: absolute;
    right: -27px;
    top: 8px;
    border-radius: 50%;
}

.clnav li.on a, .clnav li:hover a {
    color: #ff3f3b;
}

.clnav li.on:after, .clnav li:hover:after {
    background-color: #ff3f3b;
}

.clnav .ichat {
    color: #ff3f3b;
}

.cl_fix {
    position: fixed;
    top: 90px;
}

.cl_ab {
    position: absolute;
    bottom: 40px;
}

/*--------*/
.clcon {
    width: 980px;
    float: right;
}

.clcon dl {
    width: 410px;
    height: 160px;
    float: left;
    margin: 0 0 30px 30px;
    padding: 20px;
    border: 1px solid #e6e6e6;
}

.clcon dl a {
    display: block;
}

.clcon dl dt {
    width: 240px;
    height: 160px;
    float: left;
    overflow: hidden;
}

.clcon dl img {
    width: 100%;
}

.clcon dl dd {
    width: 160px;
    height: 160px;
    float: right;
    color: #666666;
    position: relative;
    padding-left: 10px;
    line-height: 18px;
}

.clcon dl span, .clcon dl em {
    display: block;
}

.clcon dl span {
    font-size: 24px;
    color: #333333;
    margin: 5px 0 10px;
    line-height: 28px;
}

.clcon dl em {
    color: #999999;
    position: absolute;
    bottom: 0;
    font-style: normal;
}

.clcon dl a:hover span {
    color: #ff3f3b;
}

/*------------case content page--------------------*/
.csum {
    height: 190px;
    background: #fafafa;
    padding: 25px 30px 25px;
    margin: 100px auto 70px;
}

.csum .ctit {
    font-size: 30px;
    color: #333333;
}

.csum .ctit a {
    font-size: 14px;
    float: right;
    color: #ff3f3b;
}

.csum span {
    display: block;
    color: #aaaaaa;
    margin: 10px auto 25px;
}

.csum .cinfo {
    width: 100%;
    padding-top: 30px;
    border-top: #dddddd 1px solid;
}

.csum dl {
    width: 25%;
    margin-top: 0;
}

.csum dl dd {
    width: 210px;
}

.cit {
    width: 100%;
    margin-bottom: 80px;
}

.cit .imgs {
    width: 110%;
    height: 380px;
}

.cit .imgs img {
    width: 570px;
    height: 380px;
    float: left;
    margin-right: 50px;
}

.cit .imgone {
    width: 100%;
    height: 400px;
}

.cit .imgone img {
    width: 600px;
    height: 400px;
    margin: 0 auto;
    display: block;
}

.cit .cns {
    height: 110px;
    width: 100%;
    text-align: center;
    margin-top: 60px;
}

.cit .cns a {
    display: inline-block;
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid #ff3f3b;
    background: #ff3f3b;
    color: #FFFFFF;
    margin-right: 30px;
}

.cit .cns a.fa {
    background: #fff;
    color: #ff3f3b;
}

.cit .cns a.govs {
    border-color: #cccccc;
    color: #666666;
    background: #FFFFFF;
}

.cit .cns span {
    display: block;
    color: #ff3f3b;
    font-size: 16px;
    line-height: 75px;
}

.cit p {
    text-indent: 2em;
}

/*-------*/
.ind_cases {
    width: 110%;
    height: 240px;
}

.ind_cases a {
    width: 578px;
    height: 38px;
    line-height: 38px;
    border: #f0f0f0 1px solid;
    color: #666666;
    text-align: center;
    padding: 10px 0;
    display: block;
    border-bottom-color: white;
    transition: background .2s, border .2s;
    float: left;
    margin-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ind_cases a:hover {
    background: #ff3f3b;
    border-color: red;
    color: #FFFFFF;
}

.ind_cases a:hover span {
    border-color: #ffb2b1;
}

.ind_cases a:last-child, .ind_cases a:nth-child(7) {
    border-bottom-color: #f0f0f0;
}

.ind_cases span {
    display: block;
    width: 198px;
    float: left;
    border-right: 1px solid #f0f0f0;
    transition: all .2s;
}

/*-------*/
.man_form {
    margin-bottom: 90px;
}

.rele_pro {
    width: 110%;
    height: 200px;
    margin-bottom: 90px;
}

.rele_pro dl {
    width: 580px;
    height: 100%;
    float: left;
    margin-right: 35px;
    background: #f5f5f5;
}

.rele_pro dl dt {
    width: 300px;
    float: left;
    background: #fafafa;
    height: 100%;
    overflow: hidden;
}

.rele_pro dl dt img {
    width: 100%;
}

.rele_pro dl dd {
    padding: 15px 20px;
    float: left;
    width: 240px;
}

.rele_pro dl dd span {
    font-size: 18px;
    color: #333333;
    display: block;
}

.rele_pro dl dd p {
    margin: 5px 0;
}

.rele_pro dl dd > a, .an_pro dl dd > a {
    display: inline-block;
    width: 58px;
    height: 22px;
    line-height: 22px;
    border: 1px solid #ff3f3b;
    text-align: center;
    border-radius: 4px;
    background: #ff3f3b;
    color: #FFFFFF;
    margin-right: 5px;
}

.rele_pro dl dd > a.chat, .an_pro dl dd > a.chat {
    background: none;
    color: #ff3f3b;
    transition: all .2s;
}

.rele_pro dl dd > a.chat:hover, .an_pro dl dd > a.chat:hover {
    background: #ff3f3b;
    color: #FFFFFF;
}

.rele_pro dl dd > a:last-child, .an_pro dl dd > a:last-child {
    margin-right: 0;
}

/*-------------*/
.an_pro {
    width: 110%;
    height: 300px;
    margin-bottom: 90px;
}

.an_pro dl {
    width: 270px;
    height: 300px;
    float: left;
    background: #f5f5f5;
    margin-right: 40px;
    position: relative;
}

.an_pro dl dt {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.an_pro dl dt img {
    width: 100%;
}

.an_pro dl dd {
    text-align: center;
}

.an_pro dl dd span {
    display: block;
    color: #333333;
    font-size: 18px;
    margin: 10px auto 8px;
    width: 80%;
}

/*-----------------------classic list page-------------------------------------------*/
/*----------------*/
.cl_list {
    width: 110%;
    margin-top: 100px;
}

.cl_list dl {
    width: 340px;
    margin: 0 40px 40px 0;
    padding: 30px 0 30px 30px;
    height: 110px;
    float: left;
    background: #f5f5f5;
    position: relative;
}

.cl_list dl:after {
    content: " ";
    display: block;
    width: 0;
    height: 1px;
    background: #ff3f3b;
    position: absolute;
    bottom: 0;
    transition: all 0.2s cubic-bezier(0.55, 0.09, 0.68, 0.53);
    left: -0px;
}

.cl_list dl:hover:after {
    width: 100%;
}

.cl_list dt {
    width: 110px;
    height: 110px;
    float: left;
    overflow: hidden;
    border-radius: 4px;
}

.cl_list img {
    width: 100%;
    height: 100%;
}

.cl_list dd {
    width: 210px;
    height: 100%;
    float: right;
    color: #666666;
    padding-top: 3px;
}

.cl_list a {
    font-size: 18px;
    color: #333333;
    display: block;
}

.cl_list a:hover {
    color: #ff3f3b;
}

.cl_list .det {
    width: 98px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ff3f3b;
    text-align: center;
    color: #ff3f3b;
    margin-top: 15px;
    border-radius: 4px;
    font-size: 14px;
}

.cl_list .det:hover {
    background: #ff3f3b;
    color: #FFFFFF;
}

#loadmore, #loadcase {
    background: url("../images/go_more.gif")  no-repeat center top;
    width: 162px;
    line-height: 62px;
    height: 65px;
    text-align: center;
    margin: 0 auto 100px;
    display: block;
    bottom: 0;
    color: #ff2020;
    font-size: 16px;
    cursor: pointer;
}

#loadmore span, #loadcase span {
    color: #999999;
    font-style: italic;
    display: none;
}

.over {
    background: none !important;
    cursor: default !important;
}

.over span {
    display: block !important;
}

#loadmore img, #loadcase img {
    width: 30px;
    height: 30px;
}

#loadcase {
    margin-bottom: 0;
}

/*-------------------classic content page----------------------------*/
.tsum {
    width: 100%;
    height: 400px;
    margin-top: 100px;
}

.tsum .timg {
    width: 580px;
    height: 100%;
    float: left;
    position: relative;
}

.tsum .timg img {
    display: block;
    width: 100%;
}

.tsum .timg span {
    display: block;
    position: absolute;
    right: 10px;
    bottom: 3px;
    color: #FFFFFF;
    opacity: .5;
}

.tinfo {
    width: 540px;
    height: 340px;
    background: #f5f5f5;
    float: right;
    padding: 30px 20px;
}

.tinfo .tt {
    width: 100%;
    height: 80px;
}

.tinfo .tt dt {
    width: 80px;
    height: 80px;
    background: #FFFFFF;
    border-radius: 5px;
    float: left;
    overflow: hidden;
}

.tinfo .tt dt img {
    width: 100%;
}

.tinfo .tt dd {
    width: 440px;
    height: 79px;
    border-bottom: 1px solid #cccccc;
    float: right;
}

.tinfo .tt dd span {
    display: block;
    font-size: 24px;
    line-height: 30px;
    color: #333333;
}

.tinfo .tt dd h1 {
    display: block;
    font-size: 24px;
    line-height: 30px;
    color: #333333;
}

.tinfo .tt dd em {
    font-style: normal;
    display: block;
    color: #CCCCCC;
}

.tinfo .cinfo {
    margin-top: 30px;
}

.tinfo .cinfo dl {
    margin-bottom: 40px;
    margin-top: 0;
}

.tinfo .cinfo dd {
    width: 195px;
}

.tinfo .cns {
    width: 100%;
    height: 40px;
    text-align: center;
}

.tinfo .cns a {
    display: inline-block;
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: #ff3f3b 1px solid;
    color: #ff3f3b;
    margin-top: -10px;
}

.tinfo .cns .chat {
    margin-right: 30px;
    background: #ff3f3b;
    color: #FFFFFF;
}

.ttxt {
    margin: 20px 0 90px;
    width: 100%;
    text-align: justify;
}

.ttxt p {
    text-indent: 2em;
}

@media screen and (max-width: 1199px) {
    .pgcases {
        background: url("../images/pgcases_s.jpg")  50% 50% no-repeat;
    }

    /*--------case cover page----------*/
    .ca_name {
        height: 365px;
    }

    .ca_name a {
        width: 317px;
        margin: 0 20px 20px 0;
        height: 171px;
        line-height: 170px;
    }

    .tbs {
        width: 370px;
    }

    .tbs table {
        width: 364px;
    }

    .partner ul {
        height: 580px;
    }

    .partner li {
        width: 223px;
        height: 133px;
    }

    .partner li img {
        margin: 11px 56px 0;
    }

    .partner li a {
        height: 133px;
    }

    /*------------case list page------------------*/
    .clcon {
        width: 580px;
    }

    /*---------------case content page----------------------*/
    .csum dl dd {
        width: 158px;
    }

    .cit .imgs {
        height: 313px;
    }

    .cit .imgs img {
        width: 470px;
        height: auto;
    }

    .ind_cases a {
        width: 478px;
    }

    .rele_pro dl {
        width: 475px;
    }

    .rele_pro dl dd {
        width: 175px;
    }

    .an_pro {
        height: 280px;
    }

    .an_pro dl {
        width: 236px;
        height: 280px;
        margin-right: 15px;
    }

    .an_pro dt {
        height: auto;
    }

    /*------------------classic cover page--------------------------*/
    .cl_list dl {
        width: 323px;
        margin: 0 20px 20px 0;
        padding: 20px 0 20px 20px;
    }

    .cl_list dl dd {
        width: 198px;
    }

    /*----------------classic content page-----------------------*/
    .tsum {
        height: 330px;
    }

    .tsum .timg {
        width: 480px;
    }

    .tsum .tinfo {
        width: 440px;
        height: 270px;
    }

    .tsum .tt dd {
        width: 340px;
    }

    .tsum .cinfo {
        margin-top: 20px;
    }

    .tsum .cinfo dl {
        margin-bottom: 15px;
    }

    .tsum .cinfo dd {
        width: 150px;
    }

    .tsum .cns {
        margin-top: 8px;
    }
}