@charset "utf-8";






#activity{margin: 0 auto; padding: 140px 0;}
#activity .title{text-align: left;}
#activity .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#activity .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#activity .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#activity .lists{margin: 0 auto; padding: 50px 0;}
#activity .lists>ul{margin:  0 auto;}
#activity .lists>ul>li{display:inline-block; float: left; width: 32%; margin-right: 2%; margin-bottom: 5%; }
#activity .lists>ul>li:nth-child(3n){ margin-right: 0;}
#activity .lists>ul>li>a{ position: relative; display: block;overflow: hidden;}
#activity .lists>ul>li>a>.img{overflow: hidden; transition: all .35s;}
#activity .lists>ul>li>a>.img>.pic{background-position: center center; background-repeat: no-repeat; background-size: cover; transition: all .8s;}
#activity .lists>ul>li>a>.img img{ max-width: 100%; max-height: 100%; width: 100%;height: auto;}
#activity .lists>ul>li>a>.box{ position: relative; text-align: left;padding: 10px 0; border-bottom: 2px solid #ebeced;}
#activity .lists>ul>li>a>.box:after{position: absolute;z-index: 23; left: 0; bottom: -2px; width: 0;height: 2px;background: #002fa7; content: '';transition: all .35s;}
#activity .lists>ul>li>a>.box:before{position: absolute;z-index: 10; right: -20px;bottom: 10px; width: 16px; height: 16px; opacity: 0; background: url("../img/ico_plus.png") no-repeat; content: '';transition: all .35s;}
#activity .lists>ul>li>a>.box>.date{ padding: 10px 0; font-size: 1.4rem; color: #888;transition: all .35s;}
#activity .lists>ul>li>a>.box>.title{ margin: 10px 0; text-align: left; font-size: 1.7rem; color: #000; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#activity .lists>ul>li>a>.box>.text{ margin: 10px auto 30px auto; font-size: 1.4rem; color: #888; line-height: 2.4rem;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;transition: all .35s;}
#activity .lists>ul>li>a>.box>.more{display: block;  text-align: left;}
#activity .lists>ul>li>a>.box>.more>span{display: inline-block;font-size: 1.4rem; color: #888; transition: all .35s;}
#activity .lists>ul>li>a:hover .box:after{ width: 100%; }
#activity .lists>ul>li>a:hover .box:before{ right: 0; opacity: 1;}
#activity .lists>ul>li>a:hover .img>.pic{transform: scale(1.08);}
#activity .lists>ul>li>a:hover .box>.date{color: #002fa7;}
#activity .lists>ul>li>a:hover .box>.title{color: #002fa7;}
#activity .lists>ul>li>a:hover .box>.text{color: #002fa7;}
#activity .lists>ul>li>a:hover .box>.more>span{color: #002fa7;}


#activity .view{margin:  0 auto;padding: 40px 0;}
#activity .view>.detail{width: 65%; max-width: 910px; text-align: left;}
#activity .view>.detail>.back{text-align: left; padding-bottom: 40px;}
#activity .view>.detail>.back>a{display: inline-flex; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 30px; font-size:1.6rem; padding: 10px 30px;color: #676767; transition: all .5s}
#activity .view>.detail>.back>a>i{display: inline-block; margin-right: 10px;}
#activity .view>.detail>.back>a>span{display: inline-block; }
#activity .view>.detail>.back>a:hover{ border-color: #002fa7; background: #002fa7; color: #fff;}
#activity .view>.detail>.time{font-size: 1.4rem; color: #002fa7; transition: all .35s;}
#activity .view>.detail>.title{font-size: 3.2rem; font-weight: 500; color: #000; padding: 20px 0; transition: all .35s;}
#activity .view>.detail>.source{ font-size: 1.4rem; color: #888; border-bottom: 2px solid #e6e6e6; padding: 10px 0;}
#activity .view>.detail>.content{padding: 50px 0; text-align: left; line-height: 3rem; font-size: 1.6rem; color: #676767;}
#activity .view>.detail>.content>p{margin-bottom: 50px;}
#activity .view>.detail>.content img{max-width: 100%; height: auto;}
#activity .view>.detail>.content .table-container{position: relative;}
#activity .view>.detail>.content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#activity .view>.detail>.content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#activity .view>.detail>.content table{  box-sizing: border-box; width: 100%!important; min-width: 1200px; border: 1px solid #ddd;}
#activity .view>.detail>.content table td{padding: 10px; border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;}
#activity .view>.detail>.pageurl{margin: 0 auto; padding: 30px 0; border-top: 2px solid #e6e6e6;}
#activity .view>.detail>.pageurl>.prev{display: block; float: left; width: 45%; text-align: left;}
#activity .view>.detail>.pageurl>.next{display: block; float: right; width: 45%; text-align: right;}
#activity .view>.detail>.pageurl>.prev>a, #activity .view>.detail>.pageurl>.next>a{display: block;}
#activity .view>.detail>.pageurl>.prev>a>i, #activity .view>.detail>.pageurl>.next>a>i{display: block; font-size: 2rem;}
#activity .view>.detail>.pageurl>.prev>a>span, #activity .view>.detail>.pageurl>.next>a>span{display: block; font-size: 1.4rem; color: #888; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#activity .view>.detail>.pageurl>.prev>a:hover, #activity .view>.detail>.pageurl>.next>a:hover{ color: #002fa7;}
#activity .view>.detail>.pageurl>.prev>a:hover>span, #activity .view>.detail>.pageurl>.next>a:hover>span{color: #002fa7;}
#activity .view>.toolbar{width: 30%; float: right; padding-top: 240px;}
#activity .view>.toolbar>.nav{display: block;}
#activity .view>.toolbar>.nav>ul{display: block;margin:  0 auto;}
#activity .view>.toolbar>.nav>ul>li{display: block; border-bottom: 1px solid #e6e6e6; transition: all .35s;}
#activity .view>.toolbar>.nav>ul>li>a{ position: relative; display: block; padding: 20px 0; font-size: 1.6rem; color: #676767; transition: all .35s;}
#activity .view>.toolbar>.nav>ul>li>a>i{position: absolute;z-index: 10; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.6rem;}
#activity .view>.toolbar>.nav>ul>li:hover a{ color: #002fa7;}
#activity .view>.toolbar>.nav>ul>li:hover{ border-color: #002fa7;}
#activity .view>.toolbar>.recommend{ padding: 40px 0;}
#activity .view>.toolbar>.recommend>.title{font-size: 2rem; color: #000; padding: 20px 0;}
#activity .view>.toolbar>.recommend>.list{margin: 0 auto;}
#activity .view>.toolbar>.recommend>.list>ul{margin: 0 auto;}
#activity .view>.toolbar>.recommend>.list>ul>li{display: block; margin-bottom: 20px;}
#activity .view>.toolbar>.recommend>.list>ul>li>a{display: block;}
#activity .view>.toolbar>.recommend>.list>ul>li>a .img{ text-align: center;overflow: hidden;}
#activity .view>.toolbar>.recommend>.list>ul>li>a .img>img{transition: all .8s;}
#activity .view>.toolbar>.recommend>.list>ul>li>a .box{padding: 20px 0; text-align: left;}
#activity .view>.toolbar>.recommend>.list>ul>li>a .box>.title{font-size: 1.6rem; color: #000;transition: all .35s;}
#activity .view>.toolbar>.recommend>.list>ul>li>a .box>.text{ padding: 10px 0; font-size: 1.4rem; color: #888; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#activity .view>.toolbar>.recommend>.list>ul>li>a:hover .title{color: #002fa7;}
#activity .view>.toolbar>.recommend>.list>ul>li>a:hover .text{color: #002fa7;}
#activity .view>.toolbar>.recommend>.list>ul>li>a:hover .img>img{transform: scale(1.03);}



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

    #activity .title>h3{ font-size: 2.8rem;}
    #activity .title>p{ font-size: 1.6rem;}

    #activity .view>.detail>.content{line-height: 2.8rem; font-size: 1.5rem;}
    #activity .view>.toolbar{width: 28%;}


}

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

    #activity .lists>ul>li:nth-child(1) .img{ height: auto;}

}

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


    #activity .lists>ul>li{ float: left; width: 48%; margin-right: 0!important;}
    #activity .lists>ul>li:nth-child(2n){ float: right;}





    #activity .view>.detail{width: 100%; max-width: none; float: none;}
    #activity .view>.detail>.pageurl>.prev>a>span, #activity .view>.detail>.pageurl>.next>a>span{display: none;}

    #activity .view>.toolbar{display: none;}




}


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

    #activity{padding: 80px 0;}

    #activity .lists>ul>li{display:block; float: none; width: 100%;}
    #activity .lists>ul>li:nth-child(1){ width: 100%;}
    #activity .lists>ul>li:nth-child(2n){ float: none;}
    #activity .lists>ul>li>a>.box:before{right: 0;opacity: 1;}
    #activity .lists>ul>li>a>.box>.more>span{ color: #002fa7;}


    #activity .view>.detail>.title{font-size: 2.8rem;}





}

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

    #activity .title>h3{ font-size: 2rem; padding-bottom: 10px;}
    #activity .title>p{ font-size: 1.4rem; padding-top: 5px;}


    #activity .lists>ul>li{margin-bottom: 50px;}
    #activity .lists>ul>li:nth-child(1) .box>.text {margin: 10px auto 20px auto;}

    #activity .view>.detail>.title{font-size: 2.4rem;}
    #activity .view>.detail>.content{line-height: 2.4rem; font-size: 1.4rem;padding: 20px 0;}
    #activity .view>.detail>.back>a{font-size:1.3rem; padding: 8px 16px;}
    #activity .view>.detail>.back>a>i{ margin-right: 5px;font-size: 1.2rem;}


}




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

    #activity {padding: 50px 0;}



}