body{ background: #EEEEF3; } .newsList{ width: 1064px; margin: 0 auto; min-height: 485px; padding-bottom: 57px; } .newsList .title{ height: 42px; margin: 27px 0 32px; } .newsList .title .tit{ color: #232D6F; } .newsList .title a{ height: 40px; float: left; width: 90px; line-height: 40px; text-align: center; font-size: 16px; color: #404348; border: 1px solid #ebebeb; background: #ffffff; position: relative; border-right-width:0; padding-left: 20px; } .newsList .title a:first-child{ padding-left: 8px; } .newsList .title a::after,.newsList .title a::before{ content: ""; position: absolute; border-style: solid; border-color:transparent #d3d2d2; border-width: 20px 0 20px 20px; right: -20px; top: 0; z-index: 2; } .newsList .title a::after{ right: -19px; border-color:transparent #ffffff; } .newsList .newsHead{ height: 440px; position: relative; } .newsList .img_nothing{ position: relative; width: 100%; display: inline-block; height: 693px; } .newsList .img_nothing img{ position: absolute; top: 107px; left: 340px; width: 355px; height: 427px; display: inline-block; } .newsList .newsHead img{ width: 100%; height: 100%; } .newsList .newsHead>div{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; /*background: rgba(0,0,0,.4);*/ text-align: center; } .newsList .newsHead>div h1{ font-size: 30px; color: #ffffff; line-height: 34px; width: 477px; height: 107px; margin: 90px auto 0; font-weight: bold; } .newsList .newsHead>div h1:hover{ color: #1588e3; } .newsList .newsHead>div p{ font-size: 16px; color: #eeeeee; line-height: 24px; width: 700px; height: 115px; margin: 0 auto; } .newsList .newsHead>div .btn{ font-size: 14px; color: #ffffff; width: 168px; height: 40px; display: block; margin: 0 auto; /*background: #1588e3;*/ line-height: 40px; border-radius: 20px; } .newsList .newsHead>div .btn:hover{ /*background: #156ce3;*/ } .newsList .list{ margin-top: 6px; } .newsList .list li{ float: left; width: 328.5px; height: 390px; border: 1px solid #ebebeb; background: #ffffff; margin-top: 20px; margin-right: 35px; } .newsList .list li:nth-child(3n){ margin-right: 0; } .newsList .list li div{ margin: 9px 9px 0; height: 220px; border: 1px solid #dae3ef; overflow: hidden; } .newsList .list li div img{ width: 100%; height: 100%; transition: all .5s ease-out; } .newsList .list li div img:hover{ transform: matrix(1.04,0,0,1.04,0,0); } .newsList .list li h1{ width: 280px; margin: 10px auto 0; font-size: 16px; color: #2f2f2f; font-weight: bold; } .newsList .list li h1:hover{ color: #1588e3; } .newsList .list li p{ width: 280px; margin: 0 auto; } .newsList .list li p.p1{ font-size: 14px; height: 39px; color: #777676; line-height: 20px; margin-top: 15px; } .newsList .list li p.p2{ font-size: 14px; color: #ababab; margin-top: 10px; line-height: 20px; } @media screen and (max-width:1200px) { .newsList{ width: 950px; } .newsList .list{ display: flex; justify-content: space-between; flex-wrap: wrap; } .newsList .list::after{ content: ''; width: 302%; display: block; height: 0; } .newsList .list li { float: none; width: 32%; margin-right: auto; } .newsList .list li:nth-child(3n){ margin-right: auto; } } @media screen and (max-width:1020px) { .newsList{ width: 90%; } .newsList .list li { width: 48%; } } @media screen and (max-width:767px) { .newsList .list li h1 { width: 100%; box-sizing: border-box; padding: 0 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; } .newsList .list li p.p1,.newsList .list li p{ width: 100%; box-sizing: border-box; padding: 0 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; } .newsList .list li, .newsList .list li div { height: auto; } .newsList .newsHead>div h1,.newsList .newsHead>div p{ width: 100%; height: auto; } .loadMore { width: 290px; } .newsList .newsHead{ height: auto; } }