@charset "utf-8";

#news{margin: 0 auto;}
#news .wrap{margin: 0 auto; padding: 100px 0;}

#news .theme{ margin: 0 auto;}
#news .theme>.title{display: block; text-align: left; margin: 0 auto;}
#news .theme>.title>h3{ position: relative; padding-bottom: 20px; display: block; font-size: 3.2rem; color: #333;}
#news .theme>.intro{ width: 70%; margin: 0 auto; padding: 30px 0; text-align: center;font-size: 1.6rem; color: rgba(255,255,255,.5); line-height: 2.4rem;}

#news .container{margin: 0 auto; padding: 50px 0;}
#news .container>.lists{margin: 0 auto;}
#news .container>.lists>ul{margin: 0 auto;}
#news .container>.lists>ul>li{ position: relative; z-index: 10; display: block; float: left; width: 22.75%; margin-right: 3%; margin-bottom: 3%; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.1); overflow: hidden; box-sizing: border-box; transition: all .35s;}
#news .container>.lists>ul>li:nth-child(4n){ margin-right: 0;}
#news .container>.lists>ul>li a{display: block; position: relative; text-align: left;padding: 20px;}
#news .container>.lists>ul>li a>.img{overflow: hidden;}
#news .container>.lists>ul>li a>.img>img{transition: all 1s;}
#news .container>.lists>ul>li a>.box{ position: relative; z-index: 10; box-sizing: border-box; padding-top: 30px; overflow: hidden;transition: all .35s;}
#news .container>.lists>ul>li a>.box>.time{ position: relative;z-index: 10; border-top: 1px solid #eee; padding-top: 15px;}
#news .container>.lists>ul>li a>.box>.time>i{display: inline-block; vertical-align: middle; color: #cc151e; font-size: 2rem; margin-right: 10px;}
#news .container>.lists>ul>li a>.box>.time>span{display: inline-block; vertical-align: middle; text-transform: uppercase; font-size: 1.6rem; color: #666;}
#news .container>.lists>ul>li a>.box>.title{ padding: 10px 0; height: 60px; position: relative; font-size: 2rem; font-weight: bold; line-height: 2.4rem; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; transition: all .35s;}
#news .container>.lists>ul>li a>.box>.text{ margin: 20px auto; height: 45px; font-size: 1.4rem; color: #999; line-height: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;}
#news .container>.lists>ul>li:hover{ box-shadow: 0 2px 16px rgba(40,27,110,.3);}
#news .container>.lists>ul>li a:hover .img>img{ transform: scale(1.1)}
#news .container>.lists>ul>li:hover .box>.title{color: #281b6e;}

#news .view{margin: 0 auto;}
#news .view>.layout{margin: 0 auto;}
#news .view>.layout .details{ width: 64%; text-align: left;}
#news .view>.layout .details>.title{ font-size: 3.6rem; font-weight: bold; line-height: 4rem; color: #000;}
#news .view>.layout .details>.time{font-size: 1.6rem;; color: #999; padding: 20px 0;}
#news .view>.layout .details>.time>i{display: inline-block; vertical-align: middle; color: #cc151e; font-size: 2rem; margin-right: 10px;}
#news .view>.layout .details>.time>span{display: inline-block;vertical-align: middle;}
#news .view>.layout .details>.content{ margin: 0 auto;padding: 30px 0; text-align: left; font-size: 1.6rem; color: #333; line-height: 2.4rem;}
#news .view>.layout .details>.content>p{margin-bottom: 20px;}
#news .view>.layout .latest{ width: 28%; box-sizing: border-box;padding: 30px 0; text-align: left;}
#news .view>.layout .latest>.title{ position: relative; padding: 15px 0; font-size: 2rem; font-weight: bold; color: #333; box-sizing: border-box; border-bottom: 1px solid #eee;}
#news .view>.layout .latest>.title:after{position: absolute;z-index: 12; left: 0;bottom: -1px; width: 42px;height: 2px;background: #cc151e; content: '';}
#news .view>.layout .latest>.lists{padding: 30px 0;}
#news .view>.layout .latest>.lists>ul{margin: 0 auto;}
#news .view>.layout .latest>.lists>ul>li{display: block; border-bottom: 1px solid #eee; padding: 30px 0; transition: all .35s;}
#news .view>.layout .latest>.lists>ul>li:last-child{border-bottom: 0;}
#news .view>.layout .latest>.lists>ul>li>a{display: flex; justify-content: space-between; transition: all .35s;}
#news .view>.layout .latest>.lists>ul>li>a .img{display: inline-block; width: 45%;}
#news .view>.layout .latest>.lists>ul>li>a .box{display: inline-block; width: 55%; padding-left: 6%; box-sizing: border-box; flex: 1;}
#news .view>.layout .latest>.lists>ul>li>a .box>.title{ display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;font-size: 1.6rem; font-weight: bold; color: #333; line-height: 2rem; transition: all .35s;}
#news .view>.layout .latest>.lists>ul>li>a .box>.time{ margin-top: 10px; font-size: 1.3rem; color: #281b6e;}
#news .view>.layout .latest>.lists>ul>li>a .box>.time>i{display: inline-block; vertical-align: middle; color: #281b6e; font-size: 1.8rem; margin-right: 5px;}
#news .view>.layout .latest>.lists>ul>li>a .box>.time>span{display: inline-block; vertical-align: middle;}
#news .view>.layout .latest>.lists>ul>li>a:hover{transform: scale(.96)}
#news .view>.layout .latest>.lists>ul>li>a:hover .title{color: #cc151e;}
#news .view>.layout .latest>.share .social-share .social-share-icon { width: 30px;height: 30px; line-height: 30px; font-size: 1.4rem;}
#news .view>.layout .latest>.share .social-share .social-icon-facebook{ background: #44619D; border-color: #44619D; color: #fff;}
#news .view>.layout .latest>.share .social-share .social-icon-X{ background: #000; border-color: #000; color: #fff;}
#news .view>.layout .latest>.share .social-share .social-icon-google{ background: #db4437; border-color: #db4437; color: #fff;}
#news .view>.layout .latest>.share .social-share .social-icon-linkedin{ background: #0077B5; border-color: #0077B5; color: #fff;}

#news .view>.layout .pageurl{ clear: both; width: 100%; box-sizing: border-box; text-align: left;padding: 20px 34% 20px 0; margin: 0 auto;}
#news .view>.layout .pageurl>a{display: flex; align-items: center; align-content: center;}
#news .view>.layout .pageurl>a>strong{ position: relative; display: inline-block; margin-right: 15px; font-size: 1.8rem; color: #281b6e;}
#news .view>.layout .pageurl>a>strong:after{position: absolute;z-index: 12; right: -12px; top: 50%; transform: translateY(-50%); width: 10px; height: 20px; line-height: 20px; content: ':'; transition: all .35s;}
#news .view>.layout .pageurl>a>span{display: inline-block; font-size: 1.4rem; color: #666; border-bottom: 1px solid transparent; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#news .view>.layout .pageurl>a:hover span{ border-color: #281b6e; color: #281b6e;}




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

    #news .container>.lists>ul>li a>.box>.title{ font-size: 1.8rem;}


    #news .view>.layout .details>.title{ font-size: 3rem;}
    #news .view>.layout .latest>.lists>ul>li>a .box>.title{ font-size: 1.4rem; line-height: 1.8rem;}


}



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

    #news .container>.layout>.content>.rows{padding: 24px 0;}

}

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

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


    #news .container>.lists>ul>li{ width: 31.33%;}
    #news .container>.lists>ul>li:nth-child(4n){ margin-right: 3%;}
    #news .container>.lists>ul>li:nth-child(3n){ margin-right: 0;}



    #news .view>.layout .details>.title{ font-size: 2.8rem;}
    #news .view>.layout .latest>.lists>ul>li>a .img{width: 50%;}
    #news .view>.layout .latest>.lists>ul>li>a .box{ width: 50%;}
    #news .view>.layout .latest>.lists>ul>li>a .box>.time{font-size: 1.2rem;}


}



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

    #news .view>.layout .details{ float: none; width: 100%;}
    #news .view>.layout .latest{ float: none; width: 100%;}
    #news .view>.layout .latest>.title{display: none;}
    #news .view>.layout .latest>.lists{display: none;}

    #news .view>.layout .pageurl{ padding: 20px 0;  border-top: 1px solid #eee;}
}


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

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

    #news .container>.lists>ul>li{ width: 48.5%; margin-right: 0;}
    #news .container>.lists>ul>li:nth-child(4n){ margin-right: 0;}
    #news .container>.lists>ul>li:nth-child(even){ float: right;}


    #news .view>.layout .details>.title{ font-size: 2.4rem; line-height: 3rem;}
    #news .view>.layout .details>.time {  font-size: 1.4rem; }
    #news .view>.layout .details>.content{ font-size: 1.4rem;line-height: 2rem;}
    #news .view>.layout .pageurl>a>strong{ font-size: 1.6rem; }
    #news .view>.layout .pageurl>a>span{ font-size: 1.3rem;}
}



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

    #news .wrap{padding: 50px 0;}

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

    #news .container>.lists>ul>li{ width: 100%; float: none; margin-bottom: 20px;}
    #news .container>.lists>ul>li:nth-child(even){ float: none;}
    #news .container>.lists>ul>li a>.box>.title { display: block; -webkit-line-clamp: none;overflow: visible; font-size: 1.6rem; height: auto;}
    #news .container>.lists>ul>li a>.box>.time>i{font-size: 1.6rem;}
    #news .container>.lists>ul>li a>.box>.time>span { font-size: 1.2rem; }

    #news .view>.layout .details>.title{ font-size: 2rem; line-height: 2.4rem;}
    #news .view>.layout .details>.time {  font-size: 1.2rem; }
    #news .view>.layout .pageurl>a{ background: #281b6e; border: 1px solid #281b6e; color: #fff; margin: 5px auto; padding: 10px; text-align: center; border-radius: 3px;}
    #news .view>.layout .pageurl>a>strong{ flex: auto; font-size: 1.4rem; color: #fff; margin-right: 0; }
    #news .view>.layout .pageurl>a>strong:after{display: none;}
    #news .view>.layout .pageurl>a>span{display: none;}
    #news .view>.layout .pageurl>a:hover{background: transparent; border-color: #281b6e;}
    #news .view>.layout .pageurl>a:hover strong{color: #281b6e;}

}


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



}