@charset "utf-8";

@import url('https://fonts.font.im/css?family=Anton|Do+Hyeon');




#announcement{margin: 0 auto; padding: 110px 0;}
#announcement .title{ width: 30%; text-align: left;}
#announcement .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#announcement .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#announcement .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#announcement .content{ width: 68%;text-align: left;}
#announcement .content>.lists{padding: 10px 0 50px 0;margin: 0 auto;}
#announcement .content>.lists>ul{margin: 0 auto;}
#announcement .content>.lists>ul>li{ position: relative; display: block; border-bottom: 1px solid #d8d8d8;}
#announcement .content>.lists>ul>li:after{position: absolute;z-index: 1; left: 0;bottom: -1px; width: 0;height: 1px; background: #002fa7;opacity: 0; content: '';transition: all .35s;}
#announcement .content>.lists>ul>li:first-child{ border-top: 1px solid #d8d8d8;}
#announcement .content>.lists>ul>li>a{display: flex;padding: 30px 6px; justify-content: space-between;align-items: center;}
#announcement .content>.lists>ul>li>a>.title{ display: inline-block; width: 76%; font-size: 1.6rem; color: #676767; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#announcement .content>.lists>ul>li>a>.more{display: inline-block; width: 26px; height: 26px; line-height: 24px; text-align: center; border: 1px solid #868686; border-radius: 100%; color: #868686; transition: all .35s; }
#announcement .content>.lists>ul>li:hover:after{width: 100%;opacity: 1;}
#announcement .content>.lists>ul>li:hover>a .title{color: #002fa7;}
#announcement .content>.lists>ul>li:hover>a .more{ transform: translateX(5px); background: #002fa7; color: #fff; border-color: #002fa7;}

#announcement .view{margin:  0 auto;}
#announcement .view>.detail{width: 68%; max-width: 1000px; text-align: left;}
#announcement .view>.detail>.time{font-size: 1.4rem; color: #002fa7; transition: all .35s;}
#announcement .view>.detail>.title{ width: 100%; font-size: 3.2rem; font-weight: 500; color: #000; padding: 20px 0; transition: all .35s;}
#announcement .view>.detail>.source{ font-size: 1.4rem; color: #888; border-bottom: 2px solid #e6e6e6; padding: 10px 0;}
#announcement .view>.detail>.files{ width: 100%; padding: 50px 0; text-align: left;}
#announcement .view>.detail>.files>a{display: block; margin-bottom: 10px; font-size: 1.6rem; color: #676767;transition: all .35s;}
#announcement .view>.detail>.files>a>i{display: inline-block; vertical-align: middle; font-size: 3.2rem; color: #de0000; margin-right: 3px;}
#announcement .view>.detail>.files>a>span{display: inline-block;margin-left: 5px; color: #aaa;font-size: 1.4rem;}
#announcement .view>.detail>.files>a:hover{text-decoration: underline; color: #002fa7;}
#announcement .view>.detail>.content{ width: 100%; padding: 50px 0; text-align: left; line-height: 3rem; font-size: 1.6rem; color: #676767;}
#announcement .view>.detail>.content>p{margin-bottom: 50px;}
#announcement .view>.detail>.content img{max-width: 100%; height: auto;}
#announcement .view>.detail>.content .table-container{position: relative;}
#announcement .view>.detail>.content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#announcement .view>.detail>.content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#announcement .view>.detail>.content table{  box-sizing: border-box; width: 100%!important; min-width: 1200px; border: 1px solid #ddd;}
#announcement .view>.detail>.content table td{padding: 10px; border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;}
#announcement .view>.detail>.pageurl{margin: 0 auto; padding: 30px 0; border-top: 2px solid #e6e6e6;}
#announcement .view>.detail>.pageurl>.prev{display: block; float: left; width: 45%; text-align: left;}
#announcement .view>.detail>.pageurl>.next{display: block; float: right; width: 45%; text-align: right;}
#announcement .view>.detail>.pageurl>.prev>a, #announcement .view>.detail>.pageurl>.next>a{display: block;}
#announcement .view>.detail>.pageurl>.prev>a>i, #announcement .view>.detail>.pageurl>.next>a>i{display: block; font-size: 2rem;}
#announcement .view>.detail>.pageurl>.prev>a>span, #announcement .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;}
#announcement .view>.detail>.pageurl>.prev>a:hover, #announcement .view>.detail>.pageurl>.next>a:hover{ color: #002fa7;}
#announcement .view>.detail>.pageurl>.prev>a:hover>span, #announcement .view>.detail>.pageurl>.next>a:hover>span{color: #002fa7;}
#announcement .view>.control{width: 30%; }
#announcement .view>.control>.back{text-align: left; padding-bottom: 40px;}
#announcement .view>.control>.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}
#announcement .view>.control>.back>a>i{display: inline-block; margin-right: 10px;}
#announcement .view>.control>.back>a>span{display: inline-block; }
#announcement .view>.control>.back>a:hover{ border-color: #002fa7; background: #002fa7; color: #fff;}




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

    #announcement .content{ width: 60%;}



}


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


    #announcement .title>h3{ font-size: 2.8rem;}
    #announcement .title>p{ font-size: 1.6rem;}
    #announcement .content{ width: 65%;}

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





}



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

    #announcement .title{ width: 100%;float: none;}
    #announcement .content{ width: 100%; float: none;;}


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

}


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

    #announcement {padding: 80px 0;}

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

}



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


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

    #announcement .content>.lists{padding: 30px 0;}
    #announcement .content>.lists>ul>li>a{padding:20px 6px;}
    #announcement .content>.lists>ul>li>a>.title{  font-size: 1.4rem;}
    #announcement .content>.lists>ul>li>a>.more{width: 20px; height: 20px; line-height: 20px; }
    #announcement .content>.lists>ul>li>a>.more>i{font-size: 1.4rem;}
    #announcement .view>.detail>.title{font-size: 2.4rem;}
    #announcement .view>.detail>.content{line-height: 2.4rem; font-size: 1.4rem;}
    #announcement .view>.control>.back>a{font-size:1.3rem; padding: 8px 16px;}
    #announcement .view>.control>.back>a>i{margin-right: 5px;}

}


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


    #announcement {padding: 50px 0;}
    #announcement .view>.detail>.content {padding: 30px 0;}

}