.news_ul { width: 60%; margin-left: 40%; display: flex; justify-content: flex-end; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .news_ul li { padding: 45px 0 35px 0px; margin: 0 50px; font-size: 16px; position: relative; } .news_ul li.active_ul::before { content: ""; width: 100%; height: 3px; background: var(--themeColor); position: absolute; z-index: 11; bottom: -1px; left: 0; } .news_ul li:last-of-type { padding-right: 0; margin-right: 0; } .news_section .ul { margin-top: 100px; display: flex; flex-wrap: wrap; } .news_section .uls { margin: 100px auto; width: 80%; display: grid; grid-template-columns: 1fr; gap: 40px; } .news_section .ul .span2 img{ width: 20px; margin-right: 10px; } .news_section .ul .span1{ display: none; } .news_section .uls .span1 img{ width: 20px; } .news_section .uls .span1{ /*gap: 5px;*/ margin-top: 10px; } .news_section .uls span{ display: flex; gap: 9px; align-items: center; } .news_section .uls li{ width: 100%; padding: 10px; padding-bottom: 0px; transition: all 0.5s; border-bottom: 1px solid rgba(84, 84, 84, 0.2); } .news_section .uls li a{ display: flex; gap: 30px; position: relative; align-items: stretch; } .news_section .uls li span img{ width: 20px; } .news_section .uls .img{ width: 40%; /*padding-bottom: 56%;*/ position: relative; } .news_section .uls .img:before{ content: ""; width: 100%; padding-bottom: 56%; display: block; } .news_section .uls p{ display: -webkit-box; display: -moz-box; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: normal !important; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .news_section .uls .text{ flex: 1; display: flex; flex-direction: column-reverse; padding: 20px 0; position: relative; justify-content: flex-end; } .news_section .uls .btn_a{ position: absolute; bottom: 20px; left: 0; } .news_section>.ul li { width: calc((100% - 60px) / 3); margin-right: 30px; padding: 10px; padding-bottom: 50px; display: flex; flex-direction: column; margin-bottom: 40px; transition: all 0.5s; border-bottom: 1px solid rgba(84, 84, 84, 0.2); } .news_section>.ul li { width: calc((100% - 60px) / 3); margin-right: 30px; padding: 10px; padding-bottom: 50px; display: flex; flex-direction: column; margin-bottom: 40px; transition: all 0.5s; border-bottom: 1px solid rgba(84, 84, 84, 0.2); } .news_section>ul li:hover { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5); } .news_section>ul li:hover .img img{ scale: 1.1; } .news_section>.ul li:nth-child(3n) { margin-right: 0; } .news_section>ul li .img{ overflow: hidden; margin-bottom: 20px; position: relative; } .news_section>ul li .img:before{ content: ""; width: 100%; padding-bottom: 56%; display: block; } .news_section>ul li .img img { width: 100%; /*height: 400px;*/ height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; transition: 0.3s; } .news_section>ul li span { color: #999; font-size: 16px; } .news_section>ul li p { margin-top: 16px; font-size: 20px; color: #545454; margin-bottom: 30px; } .new_detail nav { height: 70px; display: flex; align-items: center; margin-bottom: 55px; } .new_detail nav img { width: 16px; height: 16px; } .new_detail nav a { margin: 0 12px; /*font-size: 14px;*/ font-weight: 800; font-size: 22px; color: #999; } .new_detail nav a:first-of-type { margin-left: 5px; } .new_detail nav a:last-of-type { color: #333; } .share{ display: flex; gap: 20px; } .share img{ width: 30px; } .share a{ position: relative; display: flex; justify-content: center; align-items: center; } .share a:hover .bai{ opacity: 1; } .share a .bai{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: 2; transition: 0.3s; } .new_detail section .news_detail_head { display: flex; align-items: center; justify-content: space-between; text-align: center; margin-bottom: 30px; } .new_detail section .news_detail_head h1 { font-size: 30px; font-weight: normal; color: #333; margin-bottom: 30px; } .new_detail section .news_detail_head span { font-size: 18px; } .new_detail section .news_detail_cent { padding: 40px 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .new_detail .news_detail_cent .detail_h1{ text-align: center; margin-bottom: 30px; } .new_detail section .news_detail_cent img { display: block; max-width:100%; margin: 0 auto; } .new_detail section .news_detail_cent p { font-size: 16px; text-indent: 2em; margin-bottom: 40px; } .new_detail section .new_detail_foot { display: flex; justify-content: space-between; margin-top: 33px; margin-bottom: 100px; font-size: 16px; } .new_detail section .new_detail_foot .foot_div { display: flex; flex-direction: column; align-items: flex-start; } .new_detail section .new_detail_foot .foot_div > div { color: var(--themeColor); } .new_detail section .new_detail_foot .foot_div > div a { color: #333; } .new_detail section .new_detail_foot .btn_a { height: auto; width: 135px; height: 36px; } .new_detail section .new_detail_foot .btn_a .iconfont { margin-left: 10px; } @media (max-width:600px){ .news_section>.ul li{ width: 100%; margin-right: 0; padding-bottom: 20px; margin-bottom: 20px; } .news_section>.ul li p{ font-size: 16px; margin-top: 15px; margin-bottom: 20px; } .new_detail section .new_detail_foot{ flex-direction: column; align-items:flex-end; } .new_detail nav{ flex-wrap: wrap; } .new_detail { padding: 0 5px; } .new_detail section .news_detail_head h1{ font-size: 26px; } .news_section ul.pagination{ margin-top: 0; } .news_section .uls{ margin: 40px auto; width: 100%; } .news_section .uls li{ padding: 0; } .news_section .uls li a{ gap: 10px; } .news_section .uls p{ -webkit-line-clamp:2; margin-top: 0; } .news_section .uls .text{ justify-content:flex-start; height: 100%; padding: 0; position: static; } .news_section .uls .btn_a{ /*bottom: 0;*/ right: 0; left: auto; } .news_section>ul li span{ font-size: 14px; } .news_section .uls li:hover{ box-shadow: normal; } }