.grey_bg {position:relative; margin-top:-60px; background:#f8f8f8} .info_top { padding:60px 0} .info_top .info_image { float:left; width:576px} .info_top .info_cont { float:right; width:632px} .info_top .title { font-size:24px; line-height:26px; font-weight:bold} .info_top .title a { color:#383842} .info_top .title a:hover { color:#aace39} .info_top .time { padding:30px 0 24px; font-size:18px; color:#aace39; font-family:Arial} .info_top .text { color:#383842; line-height:20px; min-height:176px} .info_top .more { display:block; text-indent:6px; width:86px; height:20px; color:#fff; background:url("../images/info_more.jpg") no-repeat} .info_list li { float:left; width:50%} .info_list .list { margin:40px 0 0 -80px} .info_list li { } .info_list li .inner { margin:0 0 0 80px; border-bottom:1px dotted #838383; line-height:48px} .info_list li .time { float:right; color:#aace39; font-family:Arial} .info_list li a { display:block; padding:0 20px 0 15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#626670;background:url("../images/info_arrow.png") no-repeat left center} .info_list li a:hover { color:#aace39} .trends_top .cont { padding:0 0 0 20px} .trends_top .image { float:right; margin:0 0 0 90px; width:37.9%} .trends_top .title { font-size:24px; line-height:26px; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .trends_top .title a { color:#383842} .trends_top .title a:hover { color:#aace39} .trends_top .time { padding:30px 0 24px; font-size:18px; color:#aace39; font-family:Arial} .trends_top .text { color:#383842; line-height:20px; min-height:146px} .trends_top .more { display:block; text-indent:6px; width:86px; height:20px; color:#fff; background:url("../upload/trends_more.jpg") no-repeat} .trends_top .image img { width:100%; height:auto} .trends_top { padding:40px 0; border-bottom:1px dotted #bcbcbc; background:#f9f9f9} .column_box .trends_top:first-child { padding:40px 0;} .trends_box { padding:20px 0 0} .trends_box .list { margin:0 0 0 -80px} .trends_box li { float:left; width:50%;} .trends_box li .inner { height:102px; padding:20px 0; margin:0 0 0 80px; border-bottom:1px dotted #bcbcbc} .trends_box .image { float:right; margin:0 0 0 40px; width:30%} .trends_box .title { font-size:20px; line-height:26px; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .trends_box .title a { color:#383842} .trends_box .title a:hover { color:#aace39} .trends_box .time { padding:10px 0 ; font-size:14px; color:#aace39; font-family:Arial} .trends_box .text { color:#4d4d4d; height:44px; overflow:hidden; line-height:20px;} .grey_news { border-bottom:1px dotted #bcbcbc; background:#f9f9f9} .grey_news .list { padding:30px 20px} .grey_news .list li { line-height:30px} .grey_news .list li a { display:block; color:#383842;overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; font-weight:bold} .grey_news .list li a:hover { color:#aace39} .grey_news .list li .time { float:right; margin:0 0 0 20px; color:#aace39; font-family:Arial} .media_image { padding:60px 0 0} .media_image .list { margin:0 0 0 -5px} .media_image li { float:left; width:33.33%} .media_image li .inner { margin:0 0 0 5px; position:relative} .media_image li img { width:100%; height:auto} .media_image li .text { position:static; left:0; bottom:0; width:100%; height:46px; line-height:46px} .media_image li .text a { display:block; padding:0 15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-size:18px; background:url("../upload/media_bg.png")} .media_image li .text a:hover {background:url("../upload/media_bg_hover.png")} .media_list { padding:20px 0 0} .media_list li { border-bottom:1px dotted #bcbcbc} .media_list li .inner { padding:28px 0} .media_list li .title { padding:0 0 20px; font-size:20px; font-weight:bold} .media_list li .title a { color:#383842} .media_list li .title a:hover { color:#aace39} .media_list li .time { margin:0 0 0 15px; color:#aace39; font-family:Arial; font-size:14px; font-weight:100} .media_list li .text { color:#4d4d4d; line-height:24px} .media_list .list{ margin-bottom:30px;} @media only screen and (max-width: 1366px) { .info_top .info_image{ width:506px; height:304px;} .info_top .info_cont{ width:592px;} .grey_bg > .main{ width:100%;} } @media only screen and (max-width: 1280px) { .info_top .info_cont{ width:512px; margin-right:10px;} } @media only screen and (max-width: 1060px) { .trends_top .cont{ padding-left:5%; width:45%;} .trends_top .image{ margin-left:0; width:40%;} .info_top .info_image{ width:396px; height:237px;} .info_top .info_cont{ width:432px;} } @media only screen and (max-width: 980px) { .trends_top .image{ float:none; width:96%; height:auto;} .trends_top .cont{ width:96%; padding:20px 2%;} .trends_top .text{ min-height:66px; } .trends_box li{ width:100%;} .column_hd{ margin-bottom:10px;} .trends_top .text{ padding-bottom:20px;} .media_image li{ width:100%; margin-bottom:10px;} .media_image .list{ margin:0;} .media_image li .inner{ margin:0;} .info_top{ width:96%; margin:0 auto;} .info_top .info_image{ width:100%; height:auto; margin-bottom:20px;} .info_top .info_cont{ width:100%; height:auto; margin-right:0;} .info_list li{ width:100%;} .grey_bg{ margin:0;} .info_top{ padding:10px 0;} .info_list .list{ margin-left:0; margin-top:20px;} .info_list li .inner{ margin-left:0;} .info_top .text{ margin-bottom:20px;} .info_top .time{ padding:10px 0 10px;} .info_top .title{ font-size:18px; line-height:24px;} .media_list .list{ margin-bottom:20px;} }