@charset "utf-8";


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

#news .topup{margin: 0 auto;position: relative; }
#news .topup:after{position: absolute;z-index: 12; right: -40%; top: 0; width: 50%; height: 100%; background: #f9f9f9; content: ''; }
#news .topup .swiper{ position: relative; z-index: 16; margin: 0 auto; padding: 0;background: #f9f9f9; border-radius: 30px 0 0 30px;}
#news .topup .swiper .swiper-slide>a{display: block; position: relative;z-index: 50;}
#news .topup .swiper .swiper-slide>a .img{width: 36%;}
#news .topup .swiper .swiper-slide>a .img>img{width: 100%;height: auto; border-radius: 30px;}
#news .topup .swiper .swiper-slide>a .box{ width: 64%;box-sizing: border-box;padding: 50px 0 0 100px; text-align: left;}
#news .topup .swiper .swiper-slide>a .box>.time{font-size: 1.6rem; color: #999; }
#news .topup .swiper .swiper-slide>a .box>.title{ padding: 10px 0; height: 100px; margin-bottom: 40px; position: relative; font-size: 3.6rem; line-height: 4.6rem; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; transition: all .35s;}
#news .topup .swiper .swiper-slide>a .box>.text{ margin-top: 10px; font-size: 1.6rem; color: #666; line-height: 2.8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;overflow: hidden;}
#news .topup .swiper .swiper-slide>a .box>.more{padding-top: 30px;}
#news .topup .swiper .swiper-slide>a .box>.more>p{ position: relative; display: inline-block; color: #0758ab; overflow: hidden; transition: all .35s;}
#news .topup .swiper .swiper-slide>a .box>.more>p>i{position: relative;z-index: 10; display: inline-block;vertical-align: middle; font-size: 2.4rem;  background: #0758ab; color: #fff; border-radius: 100%; transition: all .35s;}
#news .topup .swiper .swiper-slide>a .box>.more>p>span{position: relative;z-index: 10; display: inline-block; font-weight: bold; font-size: 1.8rem; margin-right: 10px;vertical-align: middle;}
#news .topup .swiper .swiper-slide>a:hover .box>.title{color: #0758ab;}
#news .topup .swiper .swiper-slide>a:hover .box>.more>p{color: #333;}
#news .topup .swiper .swiper-slide>a:hover .box>.more>p>i{ background: #333;}
#news .topup .swiper .control{position: absolute;z-index: 21; right: 0;bottom: 30px; display: flex; justify-content: flex-end; align-content: center; align-items: center; }
#news .topup .swiper .control>div{ display: inline-flex; align-items: center; align-content: center; justify-content: center; margin-left: 8px; color: #999; width: 50px;height: 50px; border: 1px solid #ddd; border-radius: 100%; cursor: pointer; transition: all .35s;}
#news .topup .swiper .control>div:hover{color: #0758ab; border-color: #0758ab;}
#news .topup .swiper .swiper-pagination{text-align: right; display: none;}
#news .topup .swiper .swiper-pagination .swiper-pagination-bullet{ width: 10px;height: 10px; border: 2px solid #000;}
#news .topup .swiper .swiper-pagination .swiper-pagination-bullet-active{ border-color: #0758ab; background: none;}

#news .newsletter{margin: 0 auto; padding: 100px 0;}
#news .newsletter .lists{margin: 0 auto;}
#news .newsletter .lists>ul{margin: 0 auto;}
#news .newsletter .lists>ul>li{ position: relative; z-index: 10; display: block; margin-bottom: 3%; border-bottom: 1px solid #eee; padding: 50px; overflow: hidden; box-sizing: border-box; transition: all .35s;}
#news .newsletter .lists>ul>li a{display: block; position: relative; text-align: left;}
#news .newsletter .lists>ul>li a:before, #news .newsletter .lists>ul>li a:after { content: ""; display: table; }
#news .newsletter .lists>ul>li a:after { clear: both; }
#news .newsletter .lists>ul>li a { zoom: 1; }
#news .newsletter .lists>ul>li a>.img{overflow: hidden; width: 20%; float: left;border-radius: 20px;}
#news .newsletter .lists>ul>li a>.img>img{transition: all 1s;}
#news .newsletter .lists>ul>li a>.box{ width: 80%; float: right; position: relative; z-index: 10; box-sizing: border-box; padding: 20px 0 0 100px; overflow: hidden;transition: all .35s;}
#news .newsletter .lists>ul>li a>.box>.time{ position: relative;z-index: 10; font-size: 1.4rem; color: #0758ab;}
#news .newsletter .lists>ul>li a>.box>.title{ margin: 10px auto; position: relative; font-size: 2.4rem; line-height:2.6rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden; color: #000;  transition: all .35s;}
#news .newsletter .lists>ul>li a>.box>.text{ margin-top: 10px; height: 42px; position: relative; font-size: 1.4rem; line-height: 2rem; color: #999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; transition: all .35s;}
#news .newsletter .lists>ul>li a>.box>.more{padding-top: 15px;}
#news .newsletter .lists>ul>li a>.box>.more>p{ position: relative; display: inline-block; padding: 10px 30px; font-size: 1.2rem; color: #666; border-radius: 50px; overflow: hidden; border: 1px solid #ddd; transition: all .35s;}
#news .newsletter .lists>ul>li a>.box>.more>p:after{position: absolute;z-index: 1; left: 0; top: 0; width: 0;height: 100%; background: #0758ab; content: '';transition: all .35s;}
#news .newsletter .lists>ul>li a>.box>.more>p>i{position: relative;z-index: 10; display: inline-block;vertical-align: middle;}
#news .newsletter .lists>ul>li a>.box>.more>p>span{position: relative;z-index: 10; display: inline-block; margin-right: 8px;vertical-align: middle;}
#news .newsletter .lists>ul>li a:hover .box>.title{color: #0758ab;}
#news .newsletter .lists>ul>li a:hover .box>.more>p{border-color: #0758ab; color: #fff;}
#news .newsletter .lists>ul>li a:hover .box>.more>p:after{width: 100%;}
#news .newsletter .lists>ul>li a:hover .img>img{transform: scale(1.1);}
#news .newsletter .lists>ul>li:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.062);border-radius: 20px; }

#news .view{margin: 0 auto;}
#news .view .details{ margin: 0 auto;}
#news .view .details>.title{font-size: 4rem; line-height: 4.6rem; color: #333;}
#news .view .details>.summary{  display: flex;align-content: center; align-items: center; border-bottom: 1px solid #ddd;padding: 20px 0;}
#news .view .details>.summary>div{ display: inline-flex; margin-right: 30px; font-size: 1.6rem; color: #999;}
#news .view .details>.summary>.social{ align-items: center; align-content: center;}
#news .view .details>.summary>.social a{ width: 24px; height: 24px; line-height: 24px; font-size: 12px; transition: all .35s;}
#news .view .details>.summary>.social a:hover{ transform: translateY(-3px);}
#news .view .details>.content{ padding: 50px 0; font-size: 1.6rem; 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 .pageurl{ background: #f9f9f9; padding: 50px; border-radius: 20px; margin: 50px auto;}
#news .view .pageurl>.wrap{ padding: 30px 0; border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
#news .view .pageurl .prev, #news .view .pageurl .next{ display: block; float: left; width: 40%;}
#news .view .pageurl .next{text-align: right;}
#news .view .pageurl .prev a, #news .view .pageurl .next a{display: block; padding: 6px 0; font-size: 1.4rem; color: #666;}
#news .view .pageurl .prev a>i, #news .view .pageurl .next a>i{display: inline-block; vertical-align: middle; background: #ddd; width: 32px;height: 32px;line-height: 32px; text-align: center; border-radius: 100%; margin-right: 6px;}
#news .view .pageurl .next a>i{margin-right: 0; margin-left: 6px;}
#news .view .pageurl .prev a>strong, #news .view .pageurl .next a>strong{ position: relative; font-weight: normal; vertical-align: middle;}
#news .view .pageurl .prev a>span, #news .view .pageurl .next a>span{ display: inline-block;vertical-align: middle; width: 70%; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; padding-left: 6px; color: #999; transition: all .35s;}
#news .view .pageurl .prev a>span.no, #news .view .pageurl .next a>span.no{color: #999!important; text-decoration: none!important;}
#news .view .pageurl .prev a:hover span, #news .view .pageurl .next a:hover span{color:#0758ab;}
#news .view .pageurl .prev a:hover i, #news .view .pageurl .next a:hover i{background: #0758ab; color: #fff;}
#news .view .pageurl .back{display: block; float: left; width: 20%; text-align: center;}
#news .view .pageurl .back a{display: block; font-size: 1.4rem; color: #666;}
#news .view .pageurl .back a>i{display: inline-block; vertical-align: middle;height: 44px;line-height: 44px; text-align: center;}
#news .view .pageurl .back a>span{ display: inline-block;vertical-align: middle; padding-left: 6px; transition: all .35s;}
#news .view .pageurl .back a:hover{color: #0758ab;}

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

    #news .topup .swiper .swiper-slide>a .img{width: 40%;}
    #news .topup .swiper .swiper-slide>a .box{ width: 60%;}

    #news .newsletter .lists>ul>li a>.img{width: 26%; }
    #news .newsletter .lists>ul>li a>.box{ width: 74%;}



}


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

    #news .topup .swiper .swiper-slide>a .box{ padding: 30px 0 0 100px;}
    #news .topup .swiper .swiper-slide>a .box>.title{ height: 90px; font-size: 3.2rem; line-height: 4rem;}
    #news .topup .swiper .control>div{ width: 40px;height: 40px;}

}

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


    #news .topup .swiper .swiper-slide>a .box>.title{height: 70px; font-size: 2.4rem; line-height: 3rem;}


    #news .newsletter .lists>ul>li a>.img{width: 32%; }
    #news .newsletter .lists>ul>li a>.box{ width: 68%;}
    #news .newsletter .lists>ul>li a>.box>.title{ font-size: 2rem;}
    #news .newsletter .lists>ul>li a>.box>.more>p{ padding: 8px 25px;}



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


}

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

    #news .topup .swiper .swiper-slide>a .img{width: 50%;}
    #news .topup .swiper .swiper-slide>a .box{ width: 50%;}
    #news .topup .swiper .swiper-slide>a .box>.title{ height: 100px;  -webkit-line-clamp: 3;}




}



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

    #news .topup .swiper .swiper-slide>a .img{width: 56%;}
    #news .topup .swiper .swiper-slide>a .box{ width: 44%; padding-left:50px; }

    #news .newsletter .lists>ul>li{ padding: 40px;}
    #news .newsletter .lists>ul>li a>.img{width: 40%; }
    #news .newsletter .lists>ul>li a>.box{ width: 60%; padding: 10px 0 0 80px;}

}

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

    #news .topup:after{display: none;}
    #news .topup .swiper{ border-radius: 30px;}
    #news .topup .swiper .swiper-slide>a .img{width: 100%; float: none;}
    #news .topup .swiper .swiper-slide>a .box{ width: 100%; float: none; padding: 50px; }
    #news .topup .swiper .control{right: 30px;}

    #news .newsletter .lists>ul>li a>.box>.title{ font-size: 1.8rem; -webkit-line-clamp: 2;}
    #news .newsletter .lists>ul>li a>.box>.text{display: none;}



    #news .view .details>.title{font-size: 3rem; }
    #news .view .details>.summary>div { font-size: 1.4rem;}
    #news .view .details>.content{ padding: 30px 0; font-size: 1.4rem; line-height: 2.4rem;}



    #news .view .pageurl .prev a>span, #news .view .pageurl .next a>span{  width: 60%;}


}



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

    #news .newsletter .lists>ul>li a>.img{width: 45%; }
    #news .newsletter .lists>ul>li a>.box{ width: 55%; padding: 10px 0 0 50px;}
    #news .newsletter .lists>ul>li a>.box>.title{ font-size: 1.6rem;}





    #news .view .pageurl { padding: 30px; }
    #news .view .pageurl .prev a>span, #news .view .pageurl .next a>span{display: none;}
    #news .view .pageurl .prev a>strong:after, #news .view .pageurl .next a>strong:after {display: none;}
    #news .view .pageurl .prev a>strong, #news .view .pageurl .next a>strong { padding-right: 0;}

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


    #news{ padding: 50px 0;}
    #news .topup{background: #f9f9f9;padding-top: 30px;}
    #news .topup .swiper .swiper-slide>a .box{padding: 30px 20px;}
    #news .topup .swiper .swiper-slide>a .box>.time { font-size: 1.4rem;}
    #news .topup .swiper .swiper-slide>a .box>.title { height: 80px; font-size: 2rem; line-height:2.4rem;}
    #news .topup .swiper .swiper-slide>a .box>.more>p>span{ font-size: 1.4rem;}
    #news .topup .swiper .swiper-slide>a .box>.more>p>i {font-size: 2rem; }
    #news .topup .swiper .control>div{ width: 32px;height: 32px;}

    #news .newsletter{padding: 50px 0;}
    #news .newsletter .lists>ul>li{ padding: 30px; margin-bottom: 30px; border: 1px solid #eee; border-radius: 20px;}
    #news .newsletter .lists>ul>li a>.img{float: none; width: 100%;}
    #news .newsletter .lists>ul>li a>.box{float: none; width: 100%; padding: 20px 10px;}
    #news .newsletter .lists>ul>li a>.box>.more { padding-top: 10px;}
    #news .newsletter .lists>ul>li a>.box>.more>p{ padding: 6px 15px; font-size: 1.2rem;}


    #news .view .details>.summary{display: block;}
    #news .view .details>.title {font-size: 2.4rem;line-height: 3rem;}
    #news .view .details>.content {  padding: 30px 0;  font-size: 1.4rem;  line-height: 2rem; }



    #news .view .pageurl .prev, #news .view .pageurl .next{ width: 35%;}
    #news .view .pageurl .back{width: 30%;}



}


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




}