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

.main .lists{ width: 100%; background-color: #f0f0f0; padding-bottom: 2.5%;}
.main .lists ul{ width: 90%; margin: 0 auto; padding-top: 5%;}
.main .lists ul li{ float: left; width: 16.66%; text-align: center;}
.main .lists ul li img{ width: 50%; }
.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 2% 0;}
.main .detail li{ width: 40%; float: left; margin: 0 3% 0 3%;}
.main .detail li .leftimg{ width: 20%; float: left; height: 30vh;}
.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: 45vh;}
    .main .banner img{ padding-top: 23vh;}

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

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

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

    .main .detail li .leftimg{ height: 14vh;}
    .main .detail li .leftimg.four{ height: 12vh;}

}
@media screen and ( max-width:415px ){
    .main .banner{ height: 27vh;}
    .main .banner img{ width:55%; padding-top: 17vh;}

    .main .lists ul li{ width: 33%;}
    .main .lists .problem .img{ display: none;}
    .main .lists .problem .text{ width: 100%;}

    .main .detail{ width: 100%;}
    .main .detail li .leftimg{ height: 24vh;}
    .main .detail li .leftimg.three{ height: 21vh;}
}
@media screen and ( max-width:413px ){
    .main .detail li .leftimg{ height: 25vh;}
}
@media screen and ( max-width:376px ){
    .main .banner img{ width:60%; padding-top: 16vh;}
    .main .lists .problem .text p{ line-height: 35px;}

    .main .detail li .leftimg{ height: 27vh;}
    .main .detail li .leftimg.six{ height: 30vh;}
}
@media screen and ( max-width:321px ){
    .main .lists ul li span{ font-size: 12px;}
    .main .lists .problem .text p{ font-size: 12px; line-height: 40px;}

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