@charset "utf-8";
/* CSS Document */


#news{margin: 0 auto; padding: 60px 0;}
#news>.title{ text-align: center; margin: 0 auto;padding: 50px 0;}
#news>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}

#news>.display{margin: 0 auto; padding: 50px 0;}
#news>.display .list>ul>li{display: block; padding: 30px 0 0 0; transition: all .35s; }
#news>.display .list>ul>li>a{display: block;zoom: 1; padding-bottom: 30px; border-bottom: 1px solid #eee; }
#news>.display .list>ul>li:last-child>a{border-bottom: 0;}
#news>.display .list>ul>li>a:before, #news>.display ul.item_SON>li>a:after { content: ""; display: table; }
#news>.display .list>ul>li>a:after { clear: both; }
#news>.display .list>ul>li>a .img{ position: relative; width: 25%; box-sizing: border-box; overflow: hidden;}
#news>.display .list>ul>li>a .img>img{width: 100%;height: auto; transition: all 1s;}
#news>.display .list>ul>li>a .box{ width: 63%; box-sizing: border-box; padding: 20px 100px; text-align: left;}
#news>.display .list>ul>li>a .box>.tit{font-size: 2.4rem; color: #333; overflow: hidden; text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#news>.display .list>ul>li>a .box>.txt{ margin-top: 20px; font-size: 1.6rem; color: #999; line-height: 2.8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;}
#news>.display .list>ul>li>a .time{ width: 12%; display: block; box-sizing: border-box; text-align: center; padding: 20px 0;}
#news>.display .list>ul>li>a .time>.dd{ font-size: 6rem; font-family: Arial; font-weight: 700;transition: all .35s;}
#news>.display .list>ul>li>a .time>.ym{ font-size: 1.6rem; font-family: Arial; color: #ccc;  font-weight: 700; transition: all .35s;}
#news>.display .list>ul>li>a:hover .tit{color: rgba(0,91,97,1);}
#news>.display .list>ul>li>a:hover .img>img{transform: scale(1.1);}
#news>.display .list>ul>li>a:hover .img:after{height: 100%;}
#news>.display .list>ul>li:hover{background: #f2fafb;}
#news>.display .list>ul>li:hover a{border-color: transparent;}


#news>.view{margin: 0 auto; padding: 150px 0 50px 0;}
#news>.view .title{text-align: left; font-size: 4rem; color: #333; padding: 20px 0;}
#news>.view .group{text-align:left; border-bottom: 1px solid #ddd; padding: 30px 0;}
#news>.view .group>.counts{display: inline-block;float: left; font-size: 1.6rem; color: #666;padding-right: 50px;}
#news>.view .group>.time{ position: relative; display: inline-block;float: left;font-size: 1.6rem; color: #666; padding: 0 50px;}
#news>.view .group>.time:after{position: absolute;z-index: 1; left: 0;top: 50%; margin-top: -7px; width: 1px; height: 14px; background: #ccc;content: ''; }
#news>.view .group>.time:before{position: absolute;z-index: 1; right: 0;top: 50%; margin-top: -7px; width: 1px; height: 14px; background: #ccc;content: ''; }
#news>.view .group>.share{display: inline-block;float: left; padding-left:50px; box-sizing: border-box; width: 300px;}
#news>.view .group>.share>.tit{display: block;float: left; font-size: 1.6rem; color: #666;}
#news>.view .group>.share>.bshare-custom{float: left;}
#news>.view .group>.share>.bshare-custom a{ margin-left: 20px; padding-left: 0!important; background: none!important; text-decoration: none!important;}
#news>.view .group>.share>.bshare-custom a.iconfont{font-size: 2rem; color: #999!important; transition: all .35s;}
#news>.view .group>.share>.bshare-custom a:hover{color: rgba(14,189,201,1)!important;}
#news>.view .content{ padding: 50px 0;margin: 0 auto;font-size: 1.6rem; color: #333; line-height: 2.8rem;}
#news>.view .content img{ max-width: 60%;height: auto; vertical-align: middle;}
#news>.view .content>p{ margin-bottom: 20px;}

#news>.view .pageurl{ border-top: 1px solid #ddd; padding: 30px 0;}
#news>.view .pageurl>.url{display: block;width: 70%;}
#news>.view .pageurl>.url>a{display: block; padding: 6px 0; font-size: 1.4rem; color: #666;}
#news>.view .pageurl>.url>a>strong{ position: relative; padding-right: 13px;}
#news>.view .pageurl>.url>a>strong:after{position: absolute;z-index: 1; right: 0;top: 0; width: 10px; height: 100%; content: '锛?;}
#news>.view .pageurl>.url>a>span{color: #666; transition: all .35s;}
#news>.view .pageurl>.url>a>span.no{color: #999!important; text-decoration: none!important;}
#news>.view .pageurl>.url>a:hover span{color: rgba(0,91,97,1); text-decoration: underline;}
#news>.view .pageurl>.back{width: 160px; text-align: center;}
#news>.view .pageurl>.back>a{display: block; padding: 10px 0; font-size: 1.6rem; color: rgba(14,189,201,1); border: 2px solid rgba(14,189,201,1); border-radius: 5px; transition: all .35s;}
#news>.view .pageurl>.back>a:hover{background: rgba(14,189,201,1); color: #fff;}



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

    #news>.display .list>ul>li>a .box{ padding: 20px 80px;}
    #news>.display .list>ul>li>a .box>.tit{font-size: 2rem;}
    #news>.display .list>ul>li>a .box>.txt{ font-size: 1.4rem; line-height: 2.4rem;}

}


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

    #news{padding: 30px 0;}
    #news>.title{padding: 10px 0;}
    #news>.title>h3{ font-size: 3.2rem;}
    #news>.display .list>ul>li>a .box{ padding: 20px 50px;}
    #news>.display .list>ul>li>a .box>.tit{font-size: 1.8rem;}
    #news>.display .list>ul>li>a .time>.dd{ font-size: 4.8rem;}
    #news>.display .list>ul>li>a .time>.ym{ font-size: 1.4rem;}


    #news>.view .title{text-align: center; font-size: 3.2rem;}
    #news>.view .group{text-align:center;}
    #news>.view .group>.counts{float: none; padding-right: 30px;}
    #news>.view .group>.time{float: none; padding: 0 30px;}
    #news>.view .group>.share{float: none; width: auto; padding-left: 30px;}
}

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

    #news>.display .list>ul>li>a .box{ padding: 10px 30px;}
    #news>.display .list>ul>li>a .box>.txt{ margin-top: 10px;}

    #news>.view .content{ font-size: 1.4rem; line-height: 2.4rem;}
    #news>.view .content img{ max-width: 100%;}

}


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

    #news>.title>h3{ font-size: 2.8rem;}

    #news>.display .list>ul>li>a .img{ width: 100%; float: none;}
    #news>.display .list>ul>li>a .box{ width: 100%; float: none; padding: 20px;}
    #news>.display .list>ul>li>a .box>.tit{font-size: 2.2rem;}
    #news>.display .list>ul>li>a .time{ position: relative;z-index: 10; left: 0; margin-top:-80px; width: 90px; height: 80px; padding-top: 10px; background: rgba(0,91,97,.8); float: none;}
    #news>.display .list>ul>li>a .time>.dd{ font-size: 4rem; color: #fff;}
    #news>.display .list>ul>li>a .time>.ym{ font-size: 1.2rem; color: rgba(255,255,255,.8);}





    #news>.view .title{font-size:2.8rem;}
    #news>.view .group>.counts{ font-size: 1.4rem;}
    #news>.view .group>.time{font-size: 1.4rem;}
    #news>.view .group>.share>.tit{font-size: 1.4rem;}
    #news>.view .group>.share>.bshare-custom a{ margin-left: 10px;}


    #news>.view .pageurl>.url{float: none; width: 100%;}
    #news>.view .pageurl>.url>a{display: block; padding: 10px 0; text-align: center; margin-bottom: 5px; font-size: 1.6rem; color: #666; border: 2px solid #ccc; border-radius: 5px; transition: all .35s;}
    #news>.view .pageurl>.url>a>strong{font-weight: normal; padding-right: 0;}
    #news>.view .pageurl>.url>a>span{ display: none;}
    #news>.view .pageurl>.back{width: 100%; float: none;}
    #news>.view .pageurl>.back>a{background: rgba(14,189,201,1); color: #fff;}


}

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

    #news>.title>h3{ font-size: 2.4rem;}
    #news>.display{padding:30px 0;}

    #news>.display .list>ul>li>a .box>.tit{font-size: 2rem;}
    #news>.display .list>ul>li>a .time{ margin-top:-60px; width: 70px; height: 60px; padding-top: 6px;}
    #news>.display .list>ul>li>a .time>.dd{ font-size: 3rem;}



    #news>.view{padding: 80px 0 0 0;}
    #news>.view .title{font-size:2.2rem;}
    #news>.view .group{padding: 20px 0;}
    #news>.view .group>.counts{padding-right: 10px; font-size: 1.2rem;}
    #news>.view .group>.time{font-size: 1.2rem;padding: 0 10px;}
    #news>.view .group>.time:before{display: none;}
    #news>.view .group>.share{display: block; text-align: center; padding:10px 0 0 0;}
    #news>.view .group>.share>.tit{display: none;float: none;}
    #news>.view .group>.share>.bshare-custom{display: inline-block;float: none;}


}