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


#jobs{margin: 0 auto; padding: 150px 0;}

#jobs .title{ position: relative; text-align: center; margin: 0 auto;}
#jobs .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333;}
#jobs .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #c7000c; transform: translateX(-50%); content: '';}
#jobs .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}
#jobs .layout{margin: 0 auto; padding: 100px 0; }
#jobs .layout>.lists{ margin: 0 auto;}
#jobs .layout>.lists .th{background: #333;background: linear-gradient( to bottom, #333 0%, #666 100%);padding: 30px 0; border-radius: 16px 0 16px 0; transition: all .35s;}
#jobs .layout>.lists .th>ul>li{display: block;float: left;width: 18.33%; box-sizing: border-box; font-size: 1.8rem; color: #fff;font-weight: 900; text-align: left;}
#jobs .layout>.lists .th>ul>li.tit{width: 40%;padding-left: 3%;}
#jobs .layout>.lists .th>ul>li:last-child{width: 5%;}
#jobs .layout>.lists .td{padding: 15px 0;}
#jobs .layout>.lists .td>ul{ margin: 0 auto;  background: #fff; border-bottom: 1px solid #eee; transition: all .35s;}
#jobs .layout>.lists .td>ul>li{display: block;float: left;width: 18.33%; padding: 25px 0;cursor: pointer; box-sizing: border-box; font-size: 1.6rem; color: #999; text-align: left;}
#jobs .layout>.lists .td>ul>li.tit{width: 40%; padding-left: 3%; color: #555;cursor: pointer; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#jobs .layout>.lists .td>ul>li.on{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#jobs .layout>.lists .td>ul>li:nth-child(5){width: 5%;}
#jobs .layout>.lists .td>ul>li>span{display: none;}
#jobs .layout>.lists .td>ul>li.view{text-align: left;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
#jobs .layout>.lists .td>ul>li.view>a{display: inline-block; background: #c7000c;border-radius: 100%;width: 26px; line-height: 26px;text-align: center;transition: all .35s; }
#jobs .layout>.lists .td>ul>li.view>a>i{font-size: 1.6rem; color: #fff;transition: all .35s;}
#jobs .layout>.lists .td>ul>li.view>a>span{display: none;}
#jobs .layout>.lists .td>ul>li.details{ display: none; float: none!important; width: 100% !important; text-align: left; cursor: default; clear: both;}
#jobs .layout>.lists .td>ul>li.details .items{ padding: 30px 3% 20px 3%;}
#jobs .layout>.lists .td>ul>li.details .items>.title{text-align: left; font-weight: bold; color: #666;}
#jobs .layout>.lists .td>ul>li.details .items>.content{text-align: left; font-size: 1.4rem; line-height: 2.2rem; color: #666; padding-top: 15px;}
#jobs .layout>.lists .td>ul>li.details .for{ padding: 10px 3%; font-size: 1.4rem;color: #333;}

#jobs .layout>.lists .td>ul:hover{ box-shadow: 0 2px 20px rgba(0,0,0,.016);}
#jobs .layout>.lists .td>ul:hover .view>a{transform: scale(0.9);}
#jobs .layout>.lists .td>ul:hover .view>a:hover, #jobs .layout>.lists .td>ul.active>li.view>a{background: #333}
#jobs .layout>.lists .td>ul.active>li.tit{color: #c7000c;}


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

    #jobs .layout>.lists .th>ul>li{width: 17.33%;}
    #jobs .layout>.lists .th>ul>li:nth-child(5){width: 8%;}

    #jobs .layout>.lists .td>ul>li{width: 17.33%;}
    #jobs .layout>.lists .td>ul>li:nth-child(5){width: 8%;}

}



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

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

    #jobs .layout>.lists .th>ul>li{ font-size: 1.6rem; }
    #jobs .layout>.lists .td>ul>li{font-size: 1.4rem;}

    #jobs .layout>.lists .td>ul>li.view>a{width: 20px; line-height: 20px;}
    #jobs .layout>.lists .td>ul>li.view>a>i{font-size: 1.4rem;}


}


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

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


}

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

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

    #jobs .layout>.lists .th{padding: 16px 0;}
    #jobs .layout>.lists .th>ul>li{ font-size: 1.4rem; }
    #jobs .layout>.lists .th>ul>li.on{display: none;}
    #jobs .layout>.lists .th>ul>li.tit{ width: 84%;padding-left: 20px;}
    #jobs .layout>.lists .th>ul>li.view{ width: 16%;}


    #jobs .layout>.lists .td>ul>li{font-size: 1.4rem; padding: 15px 0;}
    #jobs .layout>.lists .td>ul>li.tit{ width: 84%;padding-left: 20px;}
    #jobs .layout>.lists .td>ul>li.on{display: none;}
    #jobs .layout>.lists .td>ul>li.view{ width: 16%;}


    #jobs .layout>.lists .td>ul>li.details .items{ padding: 20px;}
    #jobs .layout>.lists .td>ul>li.details .items>.content{ font-size: 1.2rem; line-height: 2rem;}

    #jobs .layout>.lists .td>ul>li.details .for{ padding: 10px 20px; font-size: 1.2rem;}





}




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

    #jobs{ padding: 60px 0;}

    #jobs .title>h3{ font-size: 2.4rem; padding: 15px 0;}
    #jobs .title>h4{font-size: 2.4rem;}




}