@charset "utf-8";

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




#jobs{margin: 0 auto; padding: 110px 0;}
#jobs .title{ width: 30%; text-align: left;}
#jobs .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#jobs .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#jobs .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#jobs .content{ width: 68%;text-align: left;}
#jobs .content>.nav{text-align: center;}
#jobs .content>.nav>ul{margin: 0 auto;}
#jobs .content>.nav>ul>li{ display: block; width: 50%; float: left;}
#jobs .content>.nav>ul>li>a{display: block; height: 70px; line-height: 70px; color: #000; font-size: 3rem; background: #f2f3f5; transition: all .35s;}
#jobs .content>.nav>ul>li>a.active{background: #002fa7; color: #fff;}
#jobs .content>.lists{padding: 50px 0;margin: 0 auto;}
#jobs .content>.lists .list-th{border-bottom:1px solid #ccc; padding: 15px 0; transition: all .35s;}
#jobs .content>.lists .list-th>ul>li{display: block;float: left;width: 22%; box-sizing: border-box; font-size: 2.2rem; padding-left: 6px; color: #000; text-align: left;}
#jobs .content>.lists .list-th>ul>li:last-child{width: 12%; }
#jobs .content>.lists .list-td{ margin: 0 auto;}
#jobs .content>.lists .list-td>a{display: block; border-bottom: 1px solid #ccc;}
#jobs .content>.lists .list-td>a>ul{ margin: 0 auto; height: 50px; line-height: 50px; background: #fff; transition: all .35s;}
#jobs .content>.lists .list-td>a>ul>li{display: block;float: left;width: 22%; box-sizing: border-box; padding-left: 6px;font-size: 1.6rem; color: #676767; text-align: left; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#jobs .content>.lists .list-td>a>ul>li:last-child{width: 12%; }
#jobs .content>.lists .list-td>a>ul>li>span{display: none;}
#jobs .content>.lists .list-td>a:hover ul{background: #f2f3f5;}




#jobs .view{margin:  0 auto;}
#jobs .view>.detail{width: 68%; max-width: 1000px; text-align: left;}
#jobs .view>.detail>.title{font-size: 3.2rem; font-weight: 500; color: #000; padding: 20px 0; transition: all .35s;}
#jobs .view>.detail>.source{ font-size: 1.4rem; color: #888; border-bottom: 2px solid #e6e6e6; padding: 10px 0;}
#jobs .view>.detail>.tags{padding: 10px 0; text-align: left;}
#jobs .view>.detail>.tags>.item{ padding: 20px 0 10px 0;  border-bottom: 1px solid #ccc; text-align: left;}
#jobs .view>.detail>.tags>.item>.title{ padding: 10px 0; width: 100%; float: none;font-size: 2.2rem; color: #000;}
#jobs .view>.detail>.tags>.item>.content{ width: 80%; float: none; line-height: 3rem; font-size: 1.6rem; color: #676767;}
#jobs .view>.detail>.tags>.item>.content>p{margin-bottom: 50px;}
#jobs .view>.detail>.tags>.item>.content img{max-width: 100%; height: auto;}
#jobs .view>.detail>.tags>.item>.content .table-container{position: relative;}
#jobs .view>.detail>.tags>.item>.content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#jobs .view>.detail>.tags>.item>.content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#jobs .view>.detail>.tags>.item>.content table{  box-sizing: border-box; width: 100%!important; min-width: 1200px; border: 1px solid #ddd;}
#jobs .view>.detail>.tags>.item>.content table td{padding: 10px; border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;}
#jobs .view>.detail>.apply{ padding-top: 20px; display: inline-flex; align-items: center; text-align: left;}
#jobs .view>.detail>.apply>a{display: inline-block; border: 1px solid #888; font-size: 1.6rem; color: #676767; padding: 12px 30px; border-radius: 50px; transition: all .35s; margin-right: 20px;}
#jobs .view>.detail>.apply>span{display: inline-block; font-size: 1.6rem; color: #888;}
#jobs .view>.detail>.apply>a:hover{background: #002fa7; border-color: #002fa7; box-shadow: 0 2px 16px rgba(0,0,0,.1); color: #fff;}
#jobs .view>.control{width: 30%; }
#jobs .view>.control>.back{text-align: left; padding-bottom: 40px;}
#jobs .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}
#jobs .view>.control>.back>a>i{display: inline-block; margin-right: 10px;}
#jobs .view>.control>.back>a>span{display: inline-block; }
#jobs .view>.control>.back>a:hover{ border-color: #002fa7; background: #002fa7; color: #fff;}












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

    #jobs .content{ width: 60%;}

    #jobs .content>.lists .list-th>ul>li{width: 21.5%;}
    #jobs .content>.lists .list-th>ul>li:last-child{width: 14%; }
    #jobs .content>.lists .list-td>a>ul>li{width: 21.5%;}
    #jobs .content>.lists .list-td>a>ul>li:last-child{width: 14%; }


}

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





}

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


    #jobs .title>h3{ font-size: 2.8rem;}
    #jobs .title>p{ font-size: 1.6rem;}
    #jobs .content{ width: 65%;}
    #jobs .content>.nav>ul>li>a{font-size: 2.4rem;}

    #jobs .view>.detail>.tags>.item>.title{ font-size: 2rem;}
    #jobs .view>.detail>.tags>.item>.content{line-height: 2.8rem; font-size: 1.5rem;}
    #jobs .view>.control{width: 28%;}


}

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

    #jobs .content>.lists .list-th>ul>li{width: 21%;}
    #jobs .content>.lists .list-th>ul>li:last-child{width: 16%; }
    #jobs .content>.lists .list-td>a>ul>li{width: 21%;}
    #jobs .content>.lists .list-td>a>ul>li:last-child{width: 16%; }

}

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

    #jobs .title{ width: 100%;float: none;}
    #jobs .content{ width: 100%; float: none; padding-top: 40px;}
    #jobs .content>.lists .list-th>ul>li{font-size: 2rem;}
    #jobs .content>.lists .list-td>a>ul>li{font-size: 1.5rem; }



    #jobs .view>.detail{width: 100%; max-width: none; float: none;}
    #jobs .view>.detail>.tags>.item>.content{padding-top: 0; width: 100%;}
    #jobs .view>.control{float: none; width: 100%;}



}

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


}

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

    #jobs {padding: 80px 0;}

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

}

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



}


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


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

    #jobs .content>.nav>ul>li>a{height: 50px; line-height: 50px; font-size:1.6rem;}
    #jobs .content>.lists{padding: 30px 0;}
    #jobs .content>.lists .list-th>ul>li{display: none;}
    #jobs .content>.lists .list-th>ul>li:first-child{display: block;float: none; font-size: 1.8rem; width: 100%;}
    #jobs .content>.lists .list-td>a>ul{height: auto; line-height: inherit; padding: 15px 0;}
    #jobs .content>.lists .list-td>a>ul>li{ width: 50% !important;font-size: 1.3rem; margin-bottom: 5px; }
    #jobs .content>.lists .list-td>a>ul>li:first-child{float:none; width: 100% !important; font-size: 1.6rem;color: #555; padding-bottom: 5px;}
    #jobs .content>.lists .list-td>a>ul>li>span{display: inline-block; font-size: 1.3rem;}



    #jobs .view>.detail>.title{font-size: 2.4rem;}
    #jobs .view>.detail>.tags { padding:0;}
    #jobs .view>.detail>.tags>.item>.title{ font-size: 1.8rem; padding-top: 0;}
    #jobs .view>.detail>.tags>.item>.content{line-height: 2.4rem; font-size: 1.4rem;}
    #jobs .view>.detail>.apply{display: block; text-align: center;}
    #jobs .view>.detail>.apply>a{display: block; margin-right: 0}
    #jobs .view>.detail>.apply>span{ display: block; font-size: 1.4rem; padding-top: 10px; }


    #jobs .view>.control>.back>a{font-size:1.3rem; padding: 8px 16px;}
    #jobs .view>.control>.back>a>i{ margin-right: 5px;font-size: 1.2rem;}


}


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


    #jobs {padding: 50px 0;}


}