@charset "utf-8";






#analysis{margin: 0 auto; padding: 140px 0;}
#analysis .title{text-align: left;}
#analysis .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#analysis .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#analysis .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#analysis .catalog{ padding: 25px 0; margin: 0 auto; text-align: right;}
#analysis .catalog>ul{display: flex; align-items: center; justify-content: flex-end;flex-wrap: wrap}
#analysis .catalog>ul>li{display: inline-block; margin-left: 25px;}
#analysis .catalog>ul>li>a{display: block; font-size: 1.6rem; color: #676767;transition: all .35s;}
#analysis .catalog>ul>li>a.active{color: #002fa7;}
#analysis .catalog>ul>li>a:hover{color:#002fa7;}
#analysis .lists{margin: 0 auto; padding-bottom: 50px;}
#analysis .lists>ul{margin:  0 auto;}
#analysis .lists>ul>li{display:inline-block; float: left; width: 32%; margin-right: 2%; margin-bottom: 2%; }
#analysis .lists>ul>li:nth-child(3n){margin-right: 0;}
#analysis .lists>ul>li>a{ position: relative; display: block;overflow: hidden;}
#analysis .lists>ul>li>a:before{position: absolute;z-index: 10; left:0;top: 0; width: 100%; height: 100%; opacity: 0; background: rgba(0,0,0,.3); content: '';transition: all .35s;}
#analysis .lists>ul>li>a>.img{overflow: hidden; transition: all .35s;}
#analysis .lists>ul>li>a>.img>.pic{background-position: center center; background-repeat: no-repeat; background-size: cover; transition: all .8s;}
#analysis .lists>ul>li>a>.img img{ max-width: 100%; max-height: 100%; width: 100%;height: auto;}
#analysis .lists>ul>li>a>.box{ position: absolute; z-index: 60; left: 50%; top: 50%; transform: translate(-50%,-30%); width: 80%; opacity: 0; text-align: center; transition: all .35s;}
#analysis .lists>ul>li>a>.box>.title{ margin:0 auto; padding: 5px 0; text-align: center; font-size: 2.2rem; color: #fff; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#analysis .lists>ul>li>a>.box>.text{ margin: 0 auto; font-size: 1.6rem; color: #fff; line-height: 2.4rem;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;transition: all .35s;}
#analysis .lists>ul>li>a:hover:before{ opacity: 1;}
#analysis .lists>ul>li>a:hover .img>.pic{transform: scale(1.03);}
#analysis .lists>ul>li>a:hover .box{transform: translate(-50%,-50%);opacity: 1;}


#analysis .view{margin:  0 auto;padding: 40px 0;}
#analysis .view>.detail{width: 68%; max-width: 1000px; text-align: left;}
#analysis .view>.detail>.time{font-size: 1.4rem; color: #002fa7; transition: all .35s;}
#analysis .view>.detail>.title{font-size: 3.2rem; font-weight: 500; color: #000; padding: 20px 0; transition: all .35s;}
#analysis .view>.detail>.source{ font-size: 1.4rem; color: #888; border-bottom: 2px solid #e6e6e6; padding: 10px 0;}
#analysis .view>.detail>.intro{ display: none; padding-bottom: 50px;}
#analysis .view>.detail>.intro>.title{font-size: 2rem; color: #000;}
#analysis .view>.detail>.intro>.text{ padding: 10px 0; font-size: 1.6rem;line-height: 3rem; color: #676767;}
#analysis .view>.detail>.content{padding: 50px 0; text-align: left; line-height: 3rem; font-size: 1.6rem; color: #676767;}
#analysis .view>.detail>.content>p{margin-bottom: 50px;}
#analysis .view>.detail>.content img{max-width: 100%; height: auto;}
#analysis .view>.detail>.content .table-container{position: relative;}
#analysis .view>.detail>.content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#analysis .view>.detail>.content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#analysis .view>.detail>.content table{  box-sizing: border-box; width: 100%!important; min-width: 1200px; border: 1px solid #ddd;}
#analysis .view>.detail>.content table td{padding: 10px; border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;}
#analysis .view>.detail>.pageurl{margin: 0 auto; padding: 30px 0; border-top: 2px solid #e6e6e6;}
#analysis .view>.detail>.pageurl>.prev{display: block; float: left; width: 45%; text-align: left;}
#analysis .view>.detail>.pageurl>.next{display: block; float: right; width: 45%; text-align: right;}
#analysis .view>.detail>.pageurl>.prev>a, #analysis .view>.detail>.pageurl>.next>a{display: block;}
#analysis .view>.detail>.pageurl>.prev>a>i, #analysis .view>.detail>.pageurl>.next>a>i{display: block; font-size: 2rem;}
#analysis .view>.detail>.pageurl>.prev>a>span, #analysis .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;}
#analysis .view>.detail>.pageurl>.prev>a:hover, #analysis .view>.detail>.pageurl>.next>a:hover{ color: #002fa7;}
#analysis .view>.detail>.pageurl>.prev>a:hover>span, #analysis .view>.detail>.pageurl>.next>a:hover>span{color: #002fa7;}

#analysis .view>.intro{width: 30%; }
#analysis .view>.intro>.back{text-align: left; padding-bottom: 40px;}
#analysis .view>.intro>.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}
#analysis .view>.intro>.back>a>i{display: inline-block; margin-right: 10px;}
#analysis .view>.intro>.back>a>span{display: inline-block; }
#analysis .view>.intro>.back>a:hover{ border-color: #002fa7; background: #002fa7; color: #fff;}
#analysis .view>.intro>.info{padding: 90px 0;}
#analysis .view>.intro>.info>.title{font-size: 2rem; color: #000;}
#analysis .view>.intro>.info>.text{ padding: 10px 0; font-size: 1.6rem;line-height: 3rem; color: #676767;}


@media only screen and (max-width: 1380px){

    #analysis .title>h3{ font-size: 2.8rem;}
    #analysis .title>p{ font-size: 1.6rem;}

    #analysis .lists>ul>li>a:before{opacity: 1;}
    #analysis .lists>ul>li>a>.box>.title{font-size: 2rem; }
    #analysis .lists>ul>li>a>.box>.text{ font-size: 1.5rem; line-height: 2.4rem;}




    #analysis .view>.detail>.content{line-height: 2.8rem; font-size: 1.5rem;}
    #analysis .view>.intro{width: 28%;}


}


@media only screen and (max-width: 1080px){


    #analysis .lists>ul>li{float: left; width: 49%; margin-right: 0;}
    #analysis .lists>ul>li:nth-child(even){float: right;}


    #analysis .view>.detail{width: 100%; max-width: none; float: none;}
    #analysis .view>.detail>.intro{display: block; padding-top: 20px;}
    #analysis .view>.detail>.pageurl>.prev>a>span, #analysis .view>.detail>.pageurl>.next>a>span{display: none;}

    #analysis .view>.intro{float: none; width: 100%;}
    #analysis .view>.intro>.info{display: none;}




}


@media only screen and (max-width: 860px){

    #analysis{padding: 80px 0;}
    #analysis .catalog>ul{ justify-content: flex-start;}
    #analysis .catalog>ul>li{margin-left: 0;margin-right: 25px;}
    #analysis .lists>ul>li{display:block; float: none; width: 100%; margin-bottom: 20px;}
    #analysis .lists>ul>li:nth-child(even){float: none;}
    #analysis .lists>ul>li>a>.box{ opacity: 1; }
    #analysis .lists>ul>li>a>.box>.title{ font-size: 1.8rem; }

    #analysis .view>.detail>.title{font-size: 2.8rem;}





}

@media only screen and (max-width: 640px){

    #analysis .title>h3{ font-size: 2rem;padding-bottom: 10px;}
    #analysis .title>p{ font-size: 1.4rem;padding-top: 5px;}

    #analysis .catalog>ul>li {margin-right: 15px; margin-bottom: 10px; }

    #analysis .lists>ul>li>a>.box>.title{ font-size: 1.8rem; }
    #analysis .lists>ul>li>a>.box>.text{ font-size: 1.3rem; }


    #analysis .view>.detail>.title{font-size: 2.4rem;}
    #analysis .view>.detail>.content{line-height: 2.4rem; font-size: 1.4rem;}
    #analysis .view>.detail>.intro>.title{font-size: 1.8rem;}
    #analysis .view>.detail>.intro>.text{ font-size: 1.4rem;line-height: 2.4rem;}

    #analysis .view>.intro>.back>a{font-size:1.3rem; padding: 8px 16px;}
    #analysis .view>.intro>.back>a>i{ margin-right: 5px; font-size: 1.2rem;}



}




@media only screen and (max-width: 520px){

    #analysis {padding: 50px 0;}
    #analysis .view>.detail>.content {padding: 30px 0;}

}
