@charset "utf-8";


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

#news .title{ display: none; position: relative; text-align: center; margin: 0 auto;}
#news .title>h3{ position: relative;z-index: 20; font-size: 3.6rem; padding:30px 0 20px 0; font-weight: bold;}
#news .layout{margin: 0 auto; padding: 50px 0; }
#news .layout>.lists{margin: 0 auto; }
#news .layout>.lists>ul{margin: 0 auto;}
#news .layout>.lists>ul>li{ position: relative; z-index: 10; display: block; float: left; width: 31.33%; margin-right: 3%; margin-bottom: 3%; background: #f7f7f7; overflow: hidden; box-sizing: border-box; transition: all .35s;}
#news .layout>.lists>ul>li:nth-child(3n){ margin-right: 0;}
#news .layout>.lists>ul>li a{display: block; position: relative; text-align: left;}
#news .layout>.lists>ul>li a>.img{overflow: hidden; background: rgba(0,0,0,1);}
#news .layout>.lists>ul>li a>.img>img{transition: all 1s;}
#news .layout>.lists>ul>li a>.box{ position: relative; z-index: 10; transform: translateY(-30px); box-sizing: border-box; padding: 30px 30px 0 30px; overflow: hidden; background: #f7f7f7; transition: all .35s;}
#news .layout>.lists>ul>li a>.box>.time{ position: relative;z-index: 10;}
#news .layout>.lists>ul>li a>.box>.time>span{display: inline-block; text-transform: uppercase; font-size: 1.4rem; color: #333; transition: all .35s;}
#news .layout>.lists>ul>li a>.box>.title{ text-align: left; padding: 10px 0; height: 56px; position: relative; font-size: 1.8rem; line-height: 2.4rem; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; transition: all .35s;}
#news .layout>.lists>ul>li a>.box>.text{ margin-top: 10px; font-size: 1.4rem;font-weight: 200;  color: #999; line-height: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;}
#news .layout>.lists>ul>li a>.box>.more{padding-top: 15px;}
#news .layout>.lists>ul>li a>.box>.more>span{ position: relative; display: inline-block; vertical-align: middle; width: 20px; height: 30px; line-height: 30px;overflow: hidden;color: #00a2f5; transition: all .35s;}
#news .layout>.lists>ul>li a>.box>.more>span>i{ position: absolute; z-index: 1; font-size: 1.2rem; left: 50%;top: 50%; transform: translate(-50%,-50%); transition: transform .5s ease-out;}
#news .layout>.lists>ul>li a>.box>.more>span>i.highlight{transform: translate(-200%,-50%);}
#news .layout>.lists>ul>li a>.box>.more>span.arrow{width: 18px;height: 18px; border: 1px solid #00a2f5; border-radius: 100%;}
#news .layout>.lists>ul>li a>.box>.more>span.txt{ width: auto; font-size: 1.3rem; color: #00a2f5;}
#news .layout>.lists>ul>li:hover{ box-shadow: 8px 8px 20px rgba(0,0,0,.05); background: #00a2f5; }
#news .layout>.lists>ul>li a:hover .img>img{opacity: .3}
#news .layout>.lists>ul>li a:hover .box{ transform: translateY(-50px); background: #00a2f5;}
#news .layout>.lists>ul>li a:hover .box>.time>span{color: rgba(255,255,255,.5)}
#news .layout>.lists>ul>li a:hover .box>.title{color: #fff;}
#news .layout>.lists>ul>li a:hover .box>.text{ color: rgba(255,255,255,.7)}
#news .layout>.lists>ul>li a:hover .box>.more>span>i{ transform: translate(150%,-50%); color: #00a2f5}
#news .layout>.lists>ul>li a:hover .box>.more>span>i.highlight{ transform: translate(-50%,-50%);}
#news .layout>.lists>ul>li a:hover .box>.more>span{border-color: #fff; color: #fff; }
#news .layout>.lists>ul>li a:hover .box>.more>span.arrow{background: #fff;}

#news .view{margin: 0 auto; max-width: 1200px;}
#news .view .back{margin: 0 auto;text-align: left; padding-bottom: 20px;}
#news .view .back>a{display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; color: #00a2f5; border: 1px solid #00a2f5; border-radius: 100%; transition: all .35s;}
#news .view .back>a i{ vertical-align: middle; font-size: 2.4rem;}

#news .view .details{  width: 65%; background: #fff; padding: 50px; text-align: left; box-sizing: border-box;}
#news .view .details>.title{ text-align: left; font-size: 4.6rem; font-weight: bold; line-height: 6rem; color: #000;}
#news .view .details>.summary{text-align: left; border-bottom: 1px solid #eee;padding: 20px 0;}
#news .view .details>.summary>div{float: left;margin-right: 30px; font-size: 1.6rem;font-weight: 200; color: #999;}
#news .view .details>.summary>.time{ line-height: 38px;}
#news .view .details>.summary>.visit{ line-height: 38px;}
#news .view .details>.summary>.social{ float: right; line-height: 38px;}
#news .view .details>.summary>.social a{ width: 20px; height: 20px; line-height: 20px; font-size: 12px; transition: all .35s;}
#news .view .details>.summary>.social a:hover{  transform: translateY(-3px);}
#news .view .details>.summary>.social .social-icon-facebook {color: #fff;background: #44619D;}
#news .view .details>.summary>.social .social-share .social-icon-twitter { color: #fff;background: #55acee;}
#news .view .details>.summary>.social .social-share .social-icon-google { color: #fff;background: #db4437;}
#news .view .details>.summary>.social .social-share .social-icon-linkedin { color: #fff; background: #0077B5;}
#news .view .details>.content{ padding: 50px 0 100px 0; font-size: 1.6rem;font-weight: 200;  line-height: 2.8rem; color: #666;}
#news .view .details>.content>p{margin-bottom: 15px;}
#news .view .details>.content .table-container{position: relative;}
#news .view .details>.content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#news .view .details>.content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#news .view .details>.content table{  box-sizing: border-box; width: 100%!important; min-width: 1200px; border: 1px solid #ddd;}
#news .view .details>.content table td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 1.6rem;padding:15px;}
#news .view .details>.content img{max-width: 100%;height: auto;}
#news .view .details>.pageurl{text-align: left;}
#news .view .details>.pageurl>a{display: inline-block; margin-right: 10px; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #00a2f5; border: 1px solid #eee; transition: all .35s;}
#news .view .details>.pageurl>a>i{font-weight: bold;color: #00a2f5;}
#news .view .details>.pageurl>a:hover{border-color: #00a2f5;}

#news .view .recent{ width: 30%; margin-top: 100px; box-shadow: 0 10px 20px rgba(0,0,0,.1); box-sizing: border-box;padding: 50px;text-align: left;}
#news .view .recent>.title{ display: block; border-bottom: 1px solid #eee;padding-bottom: 20px; text-align: left; font-size: 2.8rem; font-weight: bold; color: #333;}
#news .view .recent>.lists{ padding: 20px 0;]}
#news .view .recent>.lists>a{display: block;position: relative; font-size: 1.4rem; font-weight: 200; line-height: 1.8rem; padding-left: 25px; margin-bottom: 20px; transition: all .35s;}
#news .view .recent>.lists>a>span{ position: absolute; left: 0;top: 0; display: inline-block; text-align: left; width: 20px; height: 20px; line-height: 20px; color: #ccc; overflow: hidden;transition: all .35s;}
#news .view .recent>.lists>a>span>i{ position: absolute; z-index: 1; font-size: 2rem; left: 50%;top: 50%; transform: translate(-50%,-50%); transition: transform .5s ease-out;}
#news .view .recent>.lists>a>span>i.highlight{transform: translate(-200%,-50%);}
#news .view .recent>.lists>a:hover span>i{ transform: translate(150%,-50%); color: #00a2f5}
#news .view .recent>.lists>a:hover span>i.highlight{ transform: translate(-50%,-50%);}



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

    #news .layout>.lists>ul>li a>.box>.time>span{font-size: 1.2rem;}
    #news .layout>.lists>ul>li a>.box>.title{ font-size: 1.6rem;}
    #news .layout>.lists>ul>li a>.box>.text{ font-size: 1.3rem;}
    #news .layout>.lists>ul>li a>.box>.more>span>i{ font-size: 1.8rem;}
    #news .layout>.lists>ul>li a>.box>.more>span.txt{font-size: 1.2rem;}



    #news .view .details{  width: 100%; float: none;}
    #news .view .recent{ width: 100%;float: none;}

}

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

    #news .layout>.lists>ul>li{ width: 48%; margin-right: 0;}
    #news .layout>.lists>ul>li:nth-child(even){float: right;}


    #news .view .details>.title{ font-size:4rem;}

    #news .view .recent>.title{ font-size: 2.4rem;}


}

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

    #news .layout>.lists>ul>li a>.box{ padding: 20px 20px 0 20px;}
    #news .layout>.lists>ul>li a>.box>.title{ font-size: 1.5rem;}
    #news .layout>.lists>ul>li a>.box>.text{ font-size: 1.2rem;}

    #news .view .back>a{width: 30px; height: 30px; line-height: 30px;}
    #news .view .back>a i{ font-size: 1.8rem;}

    #news .view .details>.title{ font-size:3.6rem; line-height: 4rem;}
    #news .view .details>.summary>div{font-size: 1.2rem; }
    #news .view .details>.content{ font-size: 1.4rem; line-height: 2.4rem;}




    #news .view .recent>.title{font-size: 2rem;}
    #news .view .recent>.lists>a{font-size: 1.2rem; line-height: 1.8rem;}




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

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

    #news .layout>.lists>ul>li{ width: 100%;  float: none; margin-bottom: 30px;}
    #news .layout>.lists>ul>li:nth-child(even){float: none;}

    #news .view {padding-top: 60px; }
    #news .view .details { padding: 30px; }
    #news .view .details>.title {font-size: 2.8rem;line-height: 3rem;}
    #news .view .details>.content {  padding: 30px 0;  font-size: 1.4rem;   line-height: 2rem; }

    #news .view .details>.summary>.social{ float: none; display: block;}



}


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


    #news{padding: 60px 0;}

}