/*main*/
.main .banner{ width: 100%; height: 50vh; background: url("../images/xiaozhen_banner.jpg") no-repeat; background-size: cover; text-align: center;}
.main .banner img{ width:40%; padding-top: 25vh;}

.main .lists{ width: 100%; background-color: #f0f0f0; padding-bottom: 2.5%;}
.main .lists ul{ width: 80%; margin: 0 auto; padding-top: 4%;}
.main .lists ul li{ float: left; width: 20%; text-align: center;}
.main .lists ul li img{ width: 45%; }
.main .lists ul li span{ font-size: 14px; line-height: 40px; color: #333;}

.main .lists .problem{ width: 60%; margin: 0 auto; padding-top: 2%;}
.main .lists .problem .img{ width: 30%;float: left;}
.main .lists .problem .img img{ width: 80%;float: left;}
.main .lists .problem .text{ width: 70%;float: left;}
.main .lists .problem .text p{ font-size: 14px; line-height: 50px; color: #333;}

.main .detail{ width: 90%; margin: 0 auto; padding: 5% 0 3% 0;}
.main .detail li{ width: 40%; float: left; margin: 0 0 0 7%;}
.main .detail li .leftimg{ width: 20%; float: left; height: 25vh;}
.main .detail li .leftimg.five{ width: 10%; float: left; height: 20vh;}
.main .detail li .leftimg img{ width: 55%; float: left;}
.main .detail li .righttext h5{ font-size: 16px; color: #333; margin-bottom: 3%}
.main .detail li .righttext p{ font-size: 14px; color: #333; line-height:5vh;}


@media screen and ( max-width:1025px ){
    .main .banner{ height: 42vh;}
    .main .banner img{ padding-top: 22vh;}

    .main .lists .problem{width: 76%;}
    .main .detail li{ width: 80%; float: none; margin-bottom: 5%;}
    .main .detail li .leftimg{ width: 15%; height: 11vh;}
    .main .detail li .leftimg.five{ width: 15%;}
}
@media screen and ( max-width:769px ){
    .main .banner{ height: 27vh;}
    .main .banner img{ padding-top: 15vh;}

    .main .lists .problem{width: 88%;}

    .main .lists ul li span{ font-size: 13px;}

    .main .detail li{ width:80%; float: none; margin-bottom: 5%;}
    .main .detail li .leftimg.one{ height: 14vh;}
}
@media screen and ( max-width:415px ){
    .main .banner{ height: 27vh;}
    .main .banner img{ width:55%; padding-top: 16vh;}

    .main .lists ul{ width: 90%; padding-top: 5%;}
    .main .lists ul li{ width: 33%;}
    .main .lists .problem .text p{ line-height: 37px;}
    .main .lists .problem .img{ display: none;}
    .main .lists .problem .text{ width: 100%;}

    .main .detail{ width: 100%;}
    .main .detail li .leftimg{ height: 14vh;}
    .main .detail li .leftimg.one{ height: 19vh;}
}
@media screen and ( max-width:413px ){

    .main .detail li .leftimg.one{ height: 20vh;}
    .main .detail li .leftimg.four{ height: 15vh;}

}
@media screen and ( max-width:376px ){
    .main .banner img{ width:60%; padding-top: 15vh;}
    .main .lists ul li span{ font-size: 12px; line-height: 30px;}

    .main .lists .problem .text p{ line-height: 32px;}

    .main .detail li .leftimg{ height: 15vh;}
    .main .detail li .leftimg.one{ height: 25vh;}
    .main .detail li .leftimg.five{ height: 25vh;}

}
@media screen and ( max-width:321px ){
    .main .lists ul li span{ font-size: 12px; line-height: 30px;}
    .main .lists .problem{ width: 89%;}
    .main .lists .problem .text p{ font-size: 12px; line-height: 30px;}

    .main .detail li .righttext h5{ font-size: 14px;}
    .main .detail li .righttext p{ font-size: 12px;}
}