body {background-color: #f5f5f5;}
.newsTop {height: 230px;margin-top: 120px;display: flex;justify-content: space-between;align-items: center;padding: 0 12%;}
.newsTop h2 {font-family: PingFang-SC-Medium;font-size: 56px;line-height: 36px;	color: #333333;}
.newsTop ul {display: flex;align-items: center;}
.newsTop ul li {margin: 0 34px;}
.newsTop ul li:last-child {margin-right: 0;}
.newsTop ul li a {font-family: PingFang-SC-Medium;font-size: 20px;color: #333333;display: flex;flex-direction: column;justify-content: space-between;}
.newsTop ul li a::after {content: '';width: 100%;height: 2px;background-color: transparent;margin-top: 20px;}
.newsTop ul li.active a::after{background-color: #e62129;}
.newsTop ul li.active a {color: #e62129;}
.newsTop ul::-webkit-scrollbar {height: 0;}

.newsmain {padding: 0 12%;}
.newsmain .main { display: grid;grid-template-columns: repeat(3, 1fr);gap: 50px; box-sizing: border-box;margin-bottom: 50px;}
.newsmain .main .newsitem {background-color: #fff;height:auto;box-shadow: 0px 0px 49px 0px rgba(200, 200, 200, 0.4);
border-radius: 10px;border: solid 1px #e0e0e0;overflow: hidden;}
.newsmain .main .newsitem .pic {height: 314px;width: 100%;overflow: hidden;}
.newsmain .main .newsitem .pic img {width: 100%;height: 100%;object-fit: cover;transition: all 1.0s;}
.newsmain .main .newsitem .info {background-color: #fff;padding: 0 32px;}
.newsmain .main .newsitem .info h2 {padding: 36px 0;overflow: hidden;height: 138px;}
.newsmain .main .newsitem .info p {font-family: PingFang-SC-Bold;font-size: 22px;color: #1a1a1a;line-height: 33px;height: 66px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.newsmain .main .newsitem .info .date {height: 81px;border-top: 1px solid #CFCFCF;display: flex;justify-content: space-between;align-items: center;}
.newsmain .main .newsitem .info .date span {font-size: 18px;color: #999999;font-family: PingFang-SC-Bold;}
.newsmain .main .newsitem .info .date i {color: #B3B3B3;font-size: 24px;}
.newsmain .main .newsitem:hover .info .date {border-top: 1px solid #fff;}
.newsmain .main .newsitem:hover .info {background-color: #e62129;}
.newsmain .main .newsitem:hover .info h2 p {color: #fff;}
.newsmain .main .newsitem:hover .info .date span {color: #fff;}
.newsmain .main .newsitem:hover .date i {color: #fff;}

@media only screen and (max-width: 600px) {
 
    .newsTop {height: 120px;margin-top: 64px;padding: 0 4%;flex-direction: column;align-items: flex-start;justify-content: space-around;overflow: hidden;}
    .newsTop h2 {font-size: 24px;}
    .newsTop ul {width: 100%;overflow-x: auto;white-space: nowrap;}
    .newsTop ul li {margin: 0 14px;}
    .newsTop ul li:first-child{margin-left: 0;}
    .newsTop ul li:last-child{margin-right: 0;}
    .newsTop ul li a {font-size: 15px;}

    .newsmain {padding: 0 4%;}
    .newsmain .main { display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px; box-sizing: border-box;margin-bottom: 25px;}
    .newsmain .main .newsitem .pic {height: 160px;width: 100%;overflow: hidden;}
    .newsmain .main .newsitem .info {background-color: #fff;padding: 0 16px;}
    .newsmain .main .newsitem .info h2 {padding: 15px 0; height: 90px;}
    .newsmain .main .newsitem .info h2 p {font-size: 16px;height: 60px;line-height: 30px;}
    .newsmain .main .newsitem .info .date {height: 60px;}
    .newsmain .main .newsitem .info .date span {font-size: 14px;}



}
@media only screen and (min-width: 601px) and (max-width: 992px) {
    .newsTop {height: 120px;flex-direction: column;align-items: flex-start;justify-content: space-around;overflow: hidden;}
    .newsTop h2 {font-size: 28px;}
    .newsTop ul {width: 100%;overflow-x: auto;white-space: nowrap;}
    .newsTop ul li {margin: 0 14px;}
    .newsTop ul li:first-child{margin-left: 0;}
    .newsTop ul li:last-child{margin-right: 0;}
}

@media only screen and (min-width: 601px) and (max-width: 1199px) {
    .newsTop {height: 230px;margin-top: 98px;padding: 0 4%;}
    .newsmain {padding: 0 4%;}


}
@media only screen and (min-width: 1200px) and (max-width: 1440px) {
     .newsTop {margin-top: 98px;}
}