.linehide { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .clearfix:after { content: ""; clear: both; height: 0; overflow: hidden; visibility: hidden; display: block; } .clearfix { zoom: 1; } .headline { margin-bottom: 55px; position: relative; } .headline p { font-family: sourcehansanscn, sourcehansanscn; font-weight: bold; font-size: 39px; color: #333333; text-align: center; } .headline a { position: absolute; right: 0; top: 50%; transform: translatey(-50%); font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 20px; color: #999999; } .part1 { padding: 70px 0 35px; } .part1 .layout ul li { float: left; margin-right: 45px; } .part1 .layout ul li:nth-last-child(1) { margin-right: 0; } .part1 .layout ul li:hover a .mark { top: 0; padding: 38px 30px; } .part1 .layout ul li:hover a .mark .name { display: none; } .part1 .layout ul li:hover a .mark .smalltext { opacity: 1; } .part1 .layout ul li a { display: block; position: relative; border-radius: 12px 12px 12px 12px; overflow: hidden; } .part1 .layout ul li a .imgbox { width: 370px; height: 376px; } .part1 .layout ul li a .imgbox img { display: block; width: 100%; height: 100%; } .part1 .layout ul li a .mark { position: absolute; top: 303px; left: 0; height: 100%; background-color: rgba(0, 0, 0, 0.6); padding: 16px 30px; transition: all .3s; } .part1 .layout ul li a .mark .name { font-family: sourcehansanscn, sourcehansanscn; font-weight: bold; font-size: 30px; color: #ffffff; text-align: center; } .part1 .layout ul li a .mark .smalltext { opacity: 0; font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 16px; color: #ffffff; line-height: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part2 { padding: 35px 0; } .part2 .layout img { display: block; width: 100%; } .part3 { padding: 35px 0; } .part3 .layout .tab { margin-bottom: 55px; display: flex; justify-content: center; } .part3 .layout .tab li { position: relative; margin-right: 135px; font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 30px; color: #333333; cursor: pointer; z-index: 2; } .part3 .layout .tab li:nth-last-child(1) { margin-right: 0; } .part3 .layout .tab .on { color: #3a9348; } .part3 .layout .tab .on::after { content: ""; display: block; position: absolute; bottom: 3px; left: 50%; transform: translatex(-50%); width: 153px; height: 9px; background: #54bc41; z-index: -1; } .part3 .layout .contentbox .content { display: none; } .part3 .layout .contentbox .content:nth-child(1) ul li { padding: 30px 40px; float: left; margin-right: 30px; margin-top: 30px; background: #f5faf4; box-shadow: 7px 0px 21px 0px #e3e4e3; } .part3 .layout .contentbox .content:nth-child(1) ul li:nth-child(2n) { margin-right: 0; } .part3 .layout .contentbox .content:nth-child(1) ul li:nth-child(1), .part3 .layout .contentbox .content:nth-child(1) ul li:nth-child(2) { margin-top: 0; } .part3 .layout .contentbox .content:nth-child(1) ul li a { display: flex; align-items: center; } .part3 .layout .contentbox .content:nth-child(1) ul li a .left { margin-right: 39px; display: flex; flex-direction: column; align-items: center; } .part3 .layout .contentbox .content:nth-child(1) ul li a .left .imgbox { margin-bottom: 15px; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; } .part3 .layout .contentbox .content:nth-child(1) ul li a .left .imgbox img { display: block; width: 100%; height: 100%; } .part3 .layout .contentbox .content:nth-child(1) ul li a .left .name { font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 20px; color: #333333; } .part3 .layout .contentbox .content:nth-child(1) ul li a .right .title { margin-bottom: 20px; width: 334px; height: 64px; font-family: sourcehansanscn, sourcehansanscn; font-weight: bold; font-size: 24px; color: #3a9348; line-height: 32px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part3 .layout .contentbox .content:nth-child(1) ul li a .right .time { margin-bottom: 20px; font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 20px; color: #999999; } .part3 .layout .contentbox .content:nth-child(1) ul li a .right .status { width: 108px; height: 35px; background: #b9b9b9; border-radius: 18px 18px 18px 18px; font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 16px; color: #ffffff; text-align: center; line-height: 35px; } .part3 .layout .contentbox .content:nth-child(1) ul li a .right .ing { background: #3a9348; } .part3 .layout .contentbox .content:nth-child(2) ul li { float: left; margin-top: 50px; margin-right: 19px; } .part3 .layout .contentbox .content:nth-child(2) ul li:nth-child(3n) { margin-right: 0; } .part3 .layout .contentbox .content:nth-child(2) ul li:nth-child(1), .part3 .layout .contentbox .content:nth-child(2) ul li:nth-child(2), .part3 .layout .contentbox .content:nth-child(2) ul li:nth-child(3) { margin-top: 0; } .part3 .layout .contentbox .content:nth-child(2) ul li:hover a .imgbox img { transform: scale(1.3); } .part3 .layout .contentbox .content:nth-child(2) ul li:hover a .title { color: #3a9348; } .part3 .layout .contentbox .content:nth-child(2) ul li a { display: block; } .part3 .layout .contentbox .content:nth-child(2) ul li a .imgbox { margin-bottom: 20px; width: 387px; height: 214px; overflow: hidden; } .part3 .layout .contentbox .content:nth-child(2) ul li a .imgbox img { display: block; width: 100%; height: 100%; transition: all .3s; } .part3 .layout .contentbox .content:nth-child(2) ul li a .title { margin-bottom: 15px; width: 387px; font-family: sourcehansanscn, sourcehansanscn; font-weight: bold; font-size: 24px; color: #333333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .part3 .layout .contentbox .content:nth-child(2) ul li a .writer { font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 20px; color: #333333; } .part3 .layout .contentbox .content .more { margin: 30px auto 0; display: block; width: fit-content; font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 20px; color: #999999; } .part3 .layout .contentbox .on { display: block; } .part4 { padding: 35px 0; } .part4 .layout .box { padding: 56px 54px; position: relative; background: #f5faf4; border-radius: 9px 9px 9px 9px; } .part4 .layout .box ul li { margin-bottom: 53px; } .part4 .layout .box ul li:nth-last-child(1) { margin-bottom: 0; } .part4 .layout .box ul li a { display: block; } .part4 .layout .box ul li a .question { margin-bottom: 26px; width: 803px; font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 24px; color: #3a9348; line-height: 28px; } .part4 .layout .box ul li a .answer { width: 803px; font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 20px; color: #666666; line-height: 30px; } .part4 .layout .box .pic { position: absolute; display: block; width: 299px; height: 363px; bottom: -26px; right: -20px; } .part5 { padding: 35px 0; } .part5 .layout ul li { float: left; margin-right: 18px; padding: 39px 22px 47px 32px; background: #f5faf4; border-radius: 9px 9px 9px 9px; transition: all .3s; } .part5 .layout ul li:nth-last-child(1) { margin-right: 0; } .part5 .layout ul li:hover { background: #3a9348; } .part5 .layout ul li:hover .title, .part5 .layout ul li:hover .smalltext { color: #fff; } .part5 .layout ul li:hover img { display: none; } .part5 .layout ul li:hover .on { display: block; } .part5 .layout ul li a { display: block; } .part5 .layout ul li a .title { margin-bottom: 22px; width: 334px; height: 64px; font-family: sourcehansanscn, sourcehansanscn; font-weight: bold; font-size: 24px; color: #333333; line-height: 32px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part5 .layout ul li a .smalltext { margin-bottom: 32px; width: 311px; height: 180px; font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 20px; color: #666666; line-height: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part5 .layout ul li a img { display: block; width: 44px; height: 31px; } .part5 .layout ul li a .on { display: none; }