.con { padding-top: 30px; padding-bottom: 40px; } .new { position: relative; padding-top:40px; padding-bottom: 40px; margin-top: 40px; margin-bottom: 40px; } .new .rg { flex: 0 0 50%; padding-right: 11.12%; margin-left: auto; width: 50%; position: relative; z-index: 2; } .new::before { content: ''; position: absolute; right: 0; top: 0; width: 75%; height: 100%; background-color: #f8f8f8; } .new .new-img { position: absolute; left: 8.542%; top: 50%; width: 26.458%; box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .1); transform: translateY(-50%); } .new .new-img img { width: 100%; height: 100%; max-height: 300px; object-fit: contain; } .new .new-more { display: flex; margin-top: 40px; } .new .new-time { color: #999; line-height: 1.5; } .new .new-tit a { color: #2b2b2b; line-height: 1.5; font-family: "HarmonyOS_Sans_SC_Bold"; margin-top: 7px; transition: all .5s; } .new .new-tit a:hover { color: #e52832; } .new .new-des { color: #666; line-height: 1.75; margin-top:10px; } .new .new-more a { display: flex; width: 90px; height: 30px; border-radius: 4px; color: #666; font-size: 14px; align-items: center; justify-content: center; background-color: #eeeeee; border: 1px solid #dcdcdc; transform: all .5s; overflow: hidden; position: relative; } .new .new-read a img { margin-right: 9px; } .new .new-more a img:nth-child(2){ display: none; } .new .new-down a img { margin-right: 13px; } .new .new-more a:hover{ color: #fff; } .new .new-more a span, .new .new-more a img{ position: relative; z-index: 2; } .new .new-more a:hover img:nth-child(2){ display: block; } .new .new-more a:hover img:nth-child(1){ display: none; } .new .new-more a:after{ content: ''; position: absolute; left: 0; top: 0; width: 0%; height: 100%; transition: all .5s; background-image: linear-gradient(to right, #ff3f48, #db2029); } .new .new-more a:hover:after{ width: 100%; } .new .new-down { margin-left: 20px; } .previous { display: flex; flex-wrap: wrap; margin-top:40px; } .previous-item { flex: 0 0 31.736%; margin-right: 2.396%; padding-left: 3.54%; border: 1px solid #dbdbdb; background-color: #fafafa; padding-right: 1%; padding-top: 3.2%; padding-bottom: 3%; display: flex; position: relative; margin-bottom: 2.396%; } .previous-item:nth-child(3n) { margin-right: 0%; } .previous-item .lf { width: 57px; position: relative; z-index: 2; } .previous-item .lf img { width: 100%; object-fit: contain; } .previous-item .rg { margin-left: 10%; position: relative; z-index: 2; } .previous-item .previous-tit { line-height: 1.5; color: #000; font-weight: 500; } .previous-item .previous-time { line-height: 1.5; font-size: 14px; color: #999; margin-top: 7px; margin-bottom: 16px; } .previous .previous-more { display: flex; align-items: flex-end; } .previous .previous-more>div { width: 16px; } .previous .previous-more>img { width: 100%; height: 100%; } .previous .previous-down { margin-right: 14px; } .previous-item .bj { position: absolute; width: 31.1%; right: 14px; bottom: 12.7%; opacity: 0; transition: all .5s; } .previous-item .bj img { width: 100%; height: 100%; object-fit: contain; } .previous-item:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 5px; background-color: #e52832; transition: all .5s; } .previous-item:hover:after { width: 100%; } .previous-item:hover .bj { opacity: 1; } .report_link { display: flex; justify-content: space-between; margin-top: 20px; } .report_link .report-item { flex: 0 0 48.61%; box-shadow: 0 4px 14px 0 rgba(42, 62, 109, 0.08); background: url('../img/qimg/report_bj.jpg') no-repeat center bottom/cover; padding: 4.3% 5% 8.26%; } .report_link .report-item .reportitem-tit { line-height: 1.2; color: #c9151e; font-family: "HarmonyOS_Sans_SC_Bold"; } .report_link .report-item .reportitem-more a { color: #333; line-height: 1.5; margin-top:20px; transition: all .5s; display: inline-block; } .report_link .report-item .reportitem-more a:hover { color: #c9151e; } @media screen and (max-width:1024px) { .previous-item .lf { width: 45px; } } @media screen and (max-width:768px) { .new .new-img { position: static; transform: none; width: 80%; margin: 0 auto; } .new { background-color: #f8f8f8; padding: 20px 0; margin: 20px 0 40px 0; } .new::before { content: none; } .new .rg { width: 100%; padding: 10% 5% 0; } .new .new-down { margin-left: 10px; } .previous-item { flex: 0 0 100%; margin-right: 0; margin-bottom: 20px; } .previous-item { padding: 5%; } .previous-item:after { height: 3px; } .report_link .report-item { flex: 0 0 100%; padding: 8% 8% 16%; margin-bottom: 15px; } .report_link { flex-wrap: wrap; } .report_link { margin-top: 20px; } .con { padding:20px 0 40px 0; } .previous { margin-top: 20px; } }