@charset "utf-8";
/* CSS Document */



#application{margin: 0 auto; padding: 150px 0;}
#application .title{ position: relative; text-align: center; margin: 0 auto;}
#application .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333;}
#application .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #c7000c; transform: translateX(-50%); content: '';}
#application .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}
#application .layout{margin: 0 auto; padding: 100px 0; }
#application .layout>.lists{margin: 0 auto; }
#application .layout>.lists>ul{margin: 0 auto;}
#application .layout>.lists>ul>li{display: block;float: left;width:31.33%; margin-right: 3%; margin-bottom: 3%; position: relative; box-sizing: border-box; transition: all .35s; }
#application .layout>.lists>ul>li:nth-child(3n){margin-right: 0;}
#application .layout>.lists>ul>li .img{ position: relative; width: 100%; background:#000; overflow: hidden;  text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
#application .layout>.lists>ul>li .img:after{position: absolute;z-index: 60; left: 50%; top: 50%; width: 50px;height: 50px;line-height: 50px; background: #c7000c;border-radius: 100%; text-align: center;opacity: 0; transform: translate(-50%,-80%); font-family: Arial; font-size: 4rem; font-weight: normal; color: #fff; content: '+'; transition: all .35s;}
#application .layout>.lists>ul>li .img>span{position: absolute;z-index: 50; left: 0;bottom: 10%;opacity: 0; width: 100%; text-align: center; font-size: 2rem; color: #fff; transition: all .35s;}
#application .layout>.lists>ul>li .img>img{ width: 100%;height: auto; transition: all .8s;}
#application .layout>.lists>ul>li .tit{font-size:1.6rem; color: #333; text-align: center; padding: 20px 0; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; transition: all .35s;}
#application .layout>.lists>ul>li:hover .img>img{transform: scale(1.05);opacity: .3;}
#application .layout>.lists>ul>li:hover .img:after{ opacity: 1; transform: translate(-50%,-50%); }
#application .layout>.lists>ul>li:hover .img>span{bottom: 30%;opacity: 1;}
#application .layout>.lists>ul>li:hover .tit{ color: #fff;opacity: 0; transform: translateY(-20px);}

#application .layout>.view{margin: 0 auto;}
#application .layout>.view .img{display: block; float: left; width: 30%;}
#application .layout>.view .img>img{width: 100%;height: auto;}
#application .layout>.view .img>img.mob{display: none;}
#application .layout>.view .details{ width: 65%; text-align: left; padding: 10px 0;}
#application .layout>.view .details>.title{ position: relative; font-size: 3rem; border-bottom: 1px solid #eee;text-align: left; padding-bottom: 20px;}
#application .layout>.view .details>.title:after{position: absolute;z-index: 1; left: 0; bottom: -1px; width: 40px;height: 1px; background: #c7000c; content: '';}
#application .layout>.view .details .content{ padding: 50px 0; font-size: 1.6rem; color: #333;  line-height: 3rem;}
#application .layout>.view .details .content>p{display: block; position: relative;margin-bottom: 15px;}
#application .layout>.view .details .content img{max-width: 80%;}
#application .layout>.view .details .content .table-container{position: relative; padding-bottom: 30px;}
#application .layout>.view .details .content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#application .layout>.view .details .content .table-container>.table-wrapper::-webkit-scrollbar {width:1px;height: 1px;}
#application .layout>.view .details .content .table-container>.table-wrapper::-webkit-scrollbar-thumb {background:#666;}
#application .layout>.view .details .content .table-container>.table-wrapper::-webkit-scrollbar-track {border-radius: 0;background: #ededed;}
#application .layout>.view .details .content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#application .layout>.view .details .content table{border-collapse: separate;  empty-cells: hide; box-sizing: border-box; width: 100%!important; min-width: 1200px; background: #fff; overflow: hidden; border: 0;}
#application .layout>.view .details .content table td{ text-align: left;  border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 1.4rem;padding:10px;}
#application .layout>.view .details .content table td:last-child{border-right: 0;}

#application .layout>.view .details .back{text-align: left; padding-top: 50px;}
#application .layout>.view .details .back>a{display: inline-block; border: 1px solid #ccc; padding: 12px 60px; font-size: 1.8rem; border-radius: 50px; transition: all .35s;}
#application .layout>.view .details .back>a:hover{background: #c7000c; color: #fff; border-color: #c7000c; box-shadow: 0 3px 16px rgba(0,0,0,.16);}


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


    #application .layout>.lists>ul>li .img>span{position: absolute;z-index: 50; left: 0;bottom: 10%;opacity: 0; width: 100%; text-align: center; font-size: 1.6rem; }



}

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


    #application .layout>.lists>ul>li .img:after{width: 42px;height: 42px;line-height: 42px; font-size: 3rem; }
    #application .layout>.lists>ul>li .tit{font-size:1.4rem;}
    #application .layout>.lists>ul>li:hover .img:after{ opacity: 1; transform: translate(-50%,-60%); }



    #application .layout>.view .img{width: 40%;}
    #application .layout>.view .details{ width: 55%;}




}


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

    #application .title>h3{ font-size: 3.2rem;}
    #application .title>h4{font-size: 4.5rem;}

    #application .layout>.lists>ul>li{width:48%; margin-right: 0; }
    #application .layout>.lists>ul>li:nth-child(4n){margin-right: 0;}
    #application .layout>.lists>ul>li:nth-child(3n){margin-right: 0;}

    #application .layout>.lists>ul>li:nth-child(even){float: right;}



    #application .layout>.view .img{width: 100%; float: none; display: none; padding-top: 30px;}
    #application .layout>.view .img>img.mob{display: block;}
    #application .layout>.view .img>img.pc{display: none;}
    #application .layout>.view .details{ width: 100%; float: none;}
    #application .layout>.view .details>.img{display: block;}



}

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

    /*#navpart .path{width: 100%; float: none;}*/
    /*#navpart .nav{display: none;}*/

}

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

    #application .title>h3{ font-size: 2.8rem;}
    #application .title>h4{font-size: 4rem;}

}

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




}

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

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

    #application .layout>.view .details>.title{ font-size: 2.4rem;}
    #application .layout>.view .details .content { padding: 20px 0;}
    #application .layout>.view .details .content>p{font-size: 1.4rem;}
    #application .layout>.view .details .content table td{ font-size: 1.2rem;}

    #application .layout>.view .details .back>a{padding: 10px 40px; font-size: 1.4rem;}



}


@media only screen and (max-width:520px) {
    #application{ padding: 60px 0;}
    #application .title>h3{ font-size: 2.4rem; padding: 15px 0;}
    #application .title>h4{font-size: 2.4rem;}

    #application .layout>.lists>ul>li{display: block;float: none!important;width:100%; margin-right: 0;  height: auto; padding-bottom: 30px; }

}