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

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

.main .lists .problem{ width: 70%; margin: 0 auto; padding-top: 2%;}
.main .lists .problem .img{ width: 25%;float: left;}
.main .lists .problem .img img{ width: 80%;float: left;}
.main .lists .problem .text{ width: 70%;float: left;}
.main .lists .problem .text span{ display: inline-block; font-size: 14px; line-height: 35px;
    color: #333; background-color: white; padding: 0 10px; border-radius:10px; margin: 10px;}

.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: 35vh;}
.main .detail li .leftimg.diff{ height: 32vh;}
.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: 23vh;}

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

    .main .lists .problem{width: 88%;}
    .main .lists .problem .img img{ width: 80%;float: left;}

    .main .detail li{ width: 85%;}
    .main .detail li .leftimg{ width: 18%;}
    .main .detail li .leftimg.one{ height: 12vh;}
    .main .detail li .leftimg.two{ height: 17vh;}
    .main .detail li .leftimg.seven{ height: 24vh;}
}
@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 ul li.sixli{ margin-bottom: 33px;}
    .main .lists .problem .img{ display: none;}
    .main .lists .problem .text{ width: 100%;}
    .main .lists .problem .text span{ line-height: 27px; margin: 5px;}
    .main .lists ul li span{ line-height: 14px;}

    .main .detail{ width: 100%;}
    .main .detail li{ margin-left: 7%;}

    .main .detail li .leftimg.two{ height: 19vh;}
    .main .detail li .leftimg.three{ height: 24vh;}
    .main .detail li .leftimg.four{ height: 29vh;}
    .main .detail li .leftimg.six{ height: 34vh;}
    .main .detail li .leftimg.seven{ height: 39vh;}
    .main .detail li .leftimg.eight{ height: 29vh;}

}
@media screen and ( max-width:413px ){

    .main .detail li .leftimg.two{ height: 21vh;}
    .main .detail li .leftimg.three{ height: 25vh;}
    .main .detail li .leftimg.four{ height: 30vh;}
    .main .detail li .leftimg.seven{ height: 40vh;}
    .main .detail li .leftimg.eight{ height: 30vh;}

}
@media screen and ( max-width:376px ){
    .main .banner img{ width:60%; padding-top: 16vh;}

    .main .detail li .leftimg{ height: 27vh;}
    .main .detail li .leftimg.two{ height: 21vh;}
    .main .detail li .leftimg.three{ height: 31vh;}
    .main .detail li .leftimg.four{ height: 35vh;}
    .main .detail li .leftimg.six{ height: 35vh;}
    .main .detail li .leftimg.seven{ height: 45vh;}
    .main .detail li .leftimg.eight{ height: 35vh;}

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

}
@media screen and ( max-width:321px ){
    .main .lists ul li span{ font-size: 12px;}
    .main .lists .problem{ width:97%; margin: 0 auto;}
    .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;}
}