.img-lists .sz_list li { float: left; width: 90%; margin-top: 15px; transition: all 0.3s; position: relative; top: 0; border: 1px solid #ccc; margin-left: 0;} .img-lists ul li a { overflow: hidden; padding: 1% 1% .5% 1%;} .img-lists .sz_list li a .pic { padding-top: 36%; display: inline-block;} .img-lists .sz_list li a > div.info .title{ color: #00469c; font-size: 19px; font-weight: 600; padding-top: 15px;} .img-lists .sz_list li a > div.info .cont{ white-space: inherit; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; line-height: 2;} .tit{ color: #00469c; font-weight: 600; margin-top: 20px;} .ld_list{ float:left; width:50% ;} .img-lists ul li:nth-child(2n) { margin-left: 5%;} a:hover .pic img { transform: scale(1);} .pic { width: 30%;} .img-lists ul li:nth-child(2n+1) { margin-left: 0%;} .img-lists ul li a > div.info { float: right; width: 68%;} .img-lists ul li:hover .info p{ color: #333; font-weight: 500;} .img-lists .sz_list .ld_3{ width: 45%;} .img-lists ul { float:left;} @media screen and (max-width: 1024px) { .img-lists .sz_list li a > div.info .cont{ margin-top: 3% !important;} .img-lists .sz_list li a > div.info .title{ padding-top: 0;} .img-lists .sz_list li { width: 100%; margin-left: 0; margin-top: 20px;} .ld_list{ width:48%;} .ld_list2{ margin-left:2% ;} .img-lists .sz_list li a > div.info .cont{ font-size: 14px;} .img-lists .sz_list li a > div.info .title { font-size: 17px;} } @media screen and (max-width: 900px) { .ld_list{ width:100%;} .ld_list2{ margin-left:0;} .img-lists .sz_list .ld_3 { width: 100%;} .img-lists ul li:nth-child(2n) { margin-left: 0;} .img-lists .sz_list li a > div.info .title{ padding-top: 0;} .img-lists ul li a > div.info{ padding:0;} .img-lists .sz_list li a > div.info .cont{ line-height: 2;} } @media screen and (max-width: 500px) { .img-lists .sz_list li a > div.info .cont{ line-height: 1.5;} }