@charset "utf-8";
/* CSS Document */
html, body {background: #f3f3f3!important;}

#news{ position: relative;z-index: 5; background: #f3f3f3; margin: 0 auto; padding-bottom: 50px;}


#news .headlines{ position: relative; background: #fff;box-sizing: border-box;padding: 30px; margin: 100px auto 50px auto;}
#news .headlines>.img{ text-align:left;width: 50%;background: #000;}
#news .headlines>.img img{width: 100%;height: auto; transition: all .35s;}
#news .headlines>.con{ position: absolute; z-index: 3;right: 0;top: 0; width: 50%; height: 100%;text-align: left;padding: 50px; box-sizing: border-box;}
#news .headlines>.con>.tip{text-align: left;padding: 10px 0;}
#news .headlines>.con>.tip>span{display: inline-block;background: rgba(146,191,46,1); padding: 3px 10px; font-size: 14px;color: #fff;}
#news .headlines>.con>.time{  padding: 20px 0; text-align: left;font-size: 16px;color: #999; font-family: Arial; font-weight: 100; transition: all .35s;}
#news .headlines>.con>.tit{ text-align: left;}
#news .headlines>.con>.tit>a{display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp:2;  overflow: hidden; color: #333;font-size: 36px;color: #333;transition: all .35s;}
#news .headlines>.con>.txt{ margin: 20px auto; font-size: 16px; line-height: 32px; color: #999; display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp:2;  overflow: hidden; transition: all .35s;}
#news .headlines>.con>.details{ position: absolute;z-index: 3;bottom:50px; left: 50px;}
#news .headlines>.con>.details>a{ display: inline-block; padding: 7px 20px;  border: 1px solid #ccc; border-radius: 3px;  overflow: hidden; text-align: center;transition: all .35s;}
#news .headlines>.con>.details>a>span{display: inline-block; float: left; font-size: 12px; color:#666;margin-right: 5px; font-family: "Microsoft YaHei"; transition: all .35s;}
#news .headlines>.con>.details>a>i{color: #666; font-size: 16px;}
#news .headlines>.con>.details>a:hover{background: rgba(38,87,161,1);border: 1px solid rgba(38,87,161,1);}
#news .headlines>.con>.details>a:hover>span{color: #fff;}
#news .headlines>.con>.details>a:hover>i{color: #fff;}
#news .headlines>.con>.tit>a:hover{color: rgba(38,87,161,1);}
#news .headlines>.img:hover img{opacity: .6;}

#news .list{ margin: 0 auto;}
#news .list>ul{margin: 0 auto;}
#news .list>ul>li{display: block;float: left;width:31.33%; margin-right: 3%; margin-bottom: 3%; height: 0; padding-bottom: 36%; position: relative;  background: #fff; transition: all .35s; }
#news .list>ul>li:nth-child(3n){margin-right: 0;}
#news .list>ul>li .img{text-align: center;overflow: hidden;}
#news .list>ul>li .img>img{width: 100%;height: auto;object-fit: cover; transition: all .8s;}
#news .list>ul>li .con{ position: relative; padding: 30px;box-sizing: border-box;}
#news .list>ul>li .con>.tit{font-size:20px; color: #333; margin-bottom: 10px; display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp:2;  overflow: hidden; transition: all .35s;}
#news .list>ul>li .con>.txt{ margin: 5px auto; font-size: 14px; line-height: 24px; color: #999; display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp:2;  overflow: hidden; transition: all .35s;}
#news .list>ul>li .time{ position: absolute;z-index: 2; left: 30px;bottom: 30px; font-size: 12px; color: #999;}
#news .list>ul>li .details{ position: absolute;z-index: 3;bottom:20px; right: 10px; padding: 7px 20px;  border: 1px solid transparent;  overflow: hidden; text-align: center;transition: all .35s;}
#news .list>ul>li .details>span{display: inline-block; float: left; font-size: 12px; color:#666;opacity: 0; margin-right: 5px; font-family: "Microsoft YaHei"; transition: all .35s;}
#news .list>ul>li .details>i{color: #999; font-size: 16px;}
#news .list>ul>li:hover{box-shadow: 0 0 20px rgba(0,0,0,.16);}
#news .list>ul>li:hover .img>img{transform: scale(1.3);}
#news .list>ul>li:hover .con>.tit{color: rgba(38,87,161,1);}
#news .list>ul>li:hover .con>.txt{color: #777;}
#news .list>ul>li:hover .details{ right: 20px; border: 1px solid #ccc; border-radius: 3px;}
#news .list>ul>li:hover .details>span{opacity: 1;}


#news .view{background: #fff; padding: 80px 200px; box-sizing: border-box; margin: 50px auto;}
#news .view>.title{ font-size: 32px;color: #333; transition: all .35s;}
#news .view>.time{font-size: 14px;color: #999;padding: 20px 0; border-bottom: 1px solid #eee;}
#news .view>.text{ text-align: left; padding: 50px 0; border-bottom: 1px solid #eee;}
#news .view>.text>p{display: block; margin-bottom: 20px; font-size: 16px; color: #666; line-height: 28px;}
#news .view>.pageurl{ text-align: left;padding-top: 30px;}
#news .view>.pageurl a{display: inline-block; margin-bottom: 30px; padding-right: 40px; font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; background: #eee; color: #666;transition: all .35s;}
#news .view>.pageurl a>strong{ font-weight: 400; display: inline-block; color: #666; padding: 15px 40px; border-right: 16px solid #fff; margin-right: 40px;transition: all .35s;}
#news .view>.pageurl a:hover>strong{background: rgba(38,87,161,1);color: #fff;}
#news .view>.pageurl a:hover{color: rgba(38,87,161,1);}


@media only screen and (max-width: 1460px){

    #news .list>ul>li{padding-bottom: 38%;}


}


@media only screen and (max-width: 1280px){

    #news .headlines>.con>.time{  padding: 10px 0;}
    #news .headlines>.con>.tit>a{font-size: 28px;}
    #news .headlines>.con>.txt{ margin: 12px auto; font-size: 15px; line-height: 28px;}
    #news .headlines>.con>.view{ bottom:30px;}

    #news .list>ul>li{padding-bottom: 40%;}
    #news .list>ul>li .con>.tit{font-size:18px;}


    #news .view{padding: 50px}
    #news .view>.title{ font-size: 24px;}
    #news .view>.time{font-size: 12px;}
    #news .view>.text>p{font-size: 14px; line-height: 24px;}

    #news .view>.pageurl a{padding-right: 20px; font-size: 12px;}
    #news .view>.pageurl a>strong{ padding: 12px 20px; margin-right:20px;}
}


@media only screen and (max-width: 1080px){

    #news .headlines>.con>.tip>span{font-size: 12px;}
    #news .headlines>.con>.tit>a{font-size: 24px;}
    #news .headlines>.con>.txt{ margin: 10px auto; font-size: 14px;}

    #news .list>ul>li{width:48%; margin-right: 0; padding-bottom: 56%; }
    #news .list>ul>li:nth-child(3n){margin-right: 0;}
    #news .list>ul>li:nth-child(even){float: right;}


}

@media only screen and (max-width: 840px){

    #news .headlines>.img{ float:none;width: 100%;}
    #news .headlines>.con{ float:none; position: relative; width: 100%; height: auto;padding: 30px 0;}
    #news .headlines>.con>.view{ position: relative;z-index: 3;bottom:0; left: 0;}

    #news .list>ul>li{padding-bottom: 60%; }

    #news .view>.title{ font-size: 18px;}
    #news .view>.pageurl{text-align: center;}
    #news .view>.pageurl a{padding: 0; display: inline-block; margin: 0 10px;}
    #news .view>.pageurl a>span{display: none;}
    #news .view>.pageurl a>strong{ border: 0; margin-right: 0;padding: 10px 20px;}
}


@media only screen and (max-width: 740px){
    #news .list>ul>li{padding-bottom: 70%; }

}

@media only screen and (max-width: 640px){

    #news .headlines{ padding: 20px;}

    #news .list>ul>li{display: block;float: none!important;width:100%; margin-right: 0;  height: auto; padding-bottom: 30px; }
    #news .list>ul>li .time{ position: relative;left: 30px;bottom: 0;}


}


@media only screen and (max-width: 420px){
    #news .headlines>.con>.tit>a{font-size: 20px;}
    #news .headlines>.con>.txt{ margin: 8px auto; font-size: 13px; line-height: 24px;}
    #news .list>ul>li .con{ padding: 30px 20px;}
    #news .list>ul>li .time{ left: 20px;}
    #news .list>ul>li .con>.txt{ font-size: 13px; }

}