.conten { display: flex; justify-content: space-between; height: 375px; margin-top: 38px; } .con_tit { position: relative; height: 42px; display: inline-block; color: #333333; font-size: 24px; margin-top: 60px; } .news .con_top { height: 37px; } .tit { display: flex; justify-content: space-between; } .con_tit::before { content: ''; position: absolute; margin-left: 50%; transform: translateX(-50%); bottom: 8px; width: 35px; height: 3px; background-color: #3273c9; } .new_more { margin-top: 60px; } .new_more a { display: inline-block; height: 100%; width: 100%; color: #cccccc; font-size: 17px; } .news_t_l { display: flex; justify-content: space-between; width: 675px; height: 100%; } .news_t_l .img { width: 548px; height: 375px; overflow: hidden; } .news_t_l .img img { height: 100%; width: 100%; transition: all .4s; } .news_t_l .img img:hover { /*transform: scale(1.2);*/ } .news_t_l ul { width: 115px; } .news_t_l ul li { margin-top: 20px; width: 117px; height: 81px; padding: 6px 5px 6px 12px; background: url(../images/new_border2.png) no-repeat center; box-sizing: border-box; } .news_t_l ul li:nth-child(1) { margin-top: 0; } .news_t_l .imgList { width: 98px; height: 66px; } .news_t_l .imgList img { width: 100%; height: 100%; } .news_t_l .active { background: url(../images/new_border.png) no-repeat center; border: 0; } .news_t_r { width: 658px; height: 374px; } .newsList { width: 100%; height: 100%; } .newsList ul li { height: 44px; line-height: 44px; } .newsList .title { float: left; width: calc((100% - 110px) ); } .newsList .title a { color: #333333; } .newsList .title::before { display: inline-block; content: ''; margin-right: 10px; width: 5px; height: 5px; margin-bottom: 2px; background-color: #c4c4c4; } .newsList .date { float: right; color: #999; font-size: 14px; } .newsList ul li:hover .title a { color: #3273c9; } .newsList ul li:hover .title::before { background-color: #3273c9; } /* 下部分新闻列表 */ .news_bottom { display: flex; justify-content: space-between; } .news_b_l { width: 658px; } .news_b_r { width: 658px; } .b_tab { height: 50px; } .b_tab>div { position: relative; display: inline-block; color: #666666; font-size: 22px; height: 24px; cursor: pointer; } .b_tab .active { color: #333333; font-size: 24px; } .b_tab .active::before { content: ''; display: inline-block; position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); width: 35px; height: 3px; background-color: #3273c9; } .news_b_r .new_more { margin-top: 30px; } .news_b_r .tit { align-items: center; } .subject { margin: 60px auto 27px; } .subject h3 { color: #333333; font-size: 24px; } .subject .head { height: 43px; display: flex; justify-content: space-between; } .subject h3 span { color: #bbbbbb; font-size: 10px; } .sub_more { color: #ccc; font-size: 14px; } .subject .img { margin-top: 27px; display: flex; justify-content: space-between; } @media all and (min-width: 0px) and (max-width: 1024px) { .conten { display: block; width: 100%; margin-top: 20px; padding: 0 16px; box-sizing: border-box; } .news_top .conten { height: 190px; } .news_top, .news_bottom, .subject { padding: 0 16px; box-sizing: border-box; } .subject .img { width: 100%; margin-top: 0px; display: inline-block; } .subject .img img { width: 100%; margin: 10px auto; } .news_t_l, .news_b_l, .news_b_r, .news_t_r { width: 100%; } .news_t_l .img { width: 100%; height: auto; } .news_t_l ul { display: none; } .form_r { display: none; } .news_bottom { display: inline-block; width: 100%; } .news_bottom .news_b_r .tit { display: inline-block; margin-top: 60px; } .news_bottom .news_b_r .new_more { display: none; } .newList { /*padding: 0 16px;*/ } .newsList .title { float: left; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .newsList .date { float: left; width: 100%; } .newList .article { margin: 0; } .newList .article li { line-height: 40px; border-bottom: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .newList .time { float: left; width: 100%; } .article { width: 100%; } .conten h1 { font-size: 1.4em; height: auto; margin-bottom: 16px; } .conten .form { margin-bottom: 16px; } .conten .con p { text-indent: 0; } .conten p img { display: block; } .pages span { margin: 0; } .pages a { margin: 0; } }