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

#jobs{ position: relative;z-index: 5; background: #fff; margin: 0 auto;}

#jobs .list{margin: 0 auto;}
#jobs .list>ul{margin: 0 auto;}
#jobs .list>ul>li{ position: relative; display: block; float: left;width: 31.33%; margin-right: 3%; margin-bottom: 3%; box-sizing: border-box; overflow: hidden;transition: all .35s; }
#jobs .list>ul>li:nth-child(3n){margin-right: 0;}
#jobs .list>ul>li>a{display: block;zoom: 1;padding: 50px; background: #eee;transition: all .35s;  }
#jobs .list>ul>li>a:before, #jobs .list>ul>li>a:after { content: ""; display: table; }
#jobs .list>ul>li>a:after { clear: both; }
#jobs .list>ul>li>a .tit{font-size: 2.4rem; color: #333; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#jobs .list>ul>li>a .num{font-size: 1.4rem; color: #999; padding-top: 8px; transition: all .35s;}
#jobs .list>ul>li>a .ico{ position: absolute;z-index: 3; right: 30px;bottom: -12px; transition: all .3s;}
#jobs .list>ul>li>a .ico>i{font-size: 9rem; color: rgba(0,0,0,.1); transition: all .35s; }
#jobs .list>ul>li>a:hover{background: rgba(1,64,153,1); background:linear-gradient(to right bottom,#3aa9ff,#0061ac);}
#jobs .list>ul>li>a:hover .tit{color: rgba(255,255,255,1);}
#jobs .list>ul>li>a:hover .num{color: rgba(255,255,255,.6);}
#jobs .list>ul>li>a:hover .ico{transform: scale(1.1); bottom: -10px;}
#jobs .list>ul>li>a:hover .ico>i{ color: rgba(255,255,255,.8);}

#jobs .view{ position: relative; margin:0 auto; padding: 50px 0; width: 60%;}
#jobs .view:after{position: absolute;z-index: 3; right: -30%;bottom: -5%;font-size: 30rem; font-family: iconfont; color: rgba(0,0,0,.061); content: '\e616';}
#jobs .view>.title{ text-align: left; border-bottom: 1px solid #ddd; padding: 20px 0; }
#jobs .view>.title>.tit{font-size: 3.6rem; font-weight:700;color: #333;}
#jobs .view>.title>.expire{font-size: 1.6rem;color: #888;padding-top: 10px;}
#jobs .view>.close{ position: absolute;z-index: 43;right: 0;top: 20px; transition: all .5s;}
#jobs .view>.close>i{font-size: 4.2rem; font-weight: 200; color: rgba(1,64,153,1); cursor: pointer;}
#jobs .view>.close:hover{transform:rotate(180deg);}

#jobs .view>.container{ position: relative; margin:40px auto; height: 360px; overflow-y: auto;}
#jobs .view>.container::-webkit-scrollbar {width:5px;height: 1px;}
#jobs .view>.container::-webkit-scrollbar-thumb {background:#666;}
#jobs .view>.container::-webkit-scrollbar-track { box-shadow: 0 0 0 rgba(255,255,255,1); border-radius: 10px;background: none;}


#jobs .view>.container>.item{margin-bottom: 20px; width: 56%;}
#jobs .view>.container>.item>.tit{ padding: 10px 0; font-size: 1.8rem; font-weight: 700; color: #ccc;}
#jobs .view>.container>.item>.con{text-align: left;}
#jobs .view>.container>.item>.con>p{font-size: 1.4rem;color: #666; width: 50%;float: left; padding: 3px 0; box-sizing: border-box;}
#jobs .view>.container>.item>.con>p.w100{width: 100%;float: none; line-height: 2rem;}







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

    #jobs .list>ul>li>a{padding: 40px 50px; }


}

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

    #jobs .list>ul>li>a{padding: 32px 50px; }

}

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

    #jobs .list>ul>li>a{padding: 25px 50px; }
    #jobs .list>ul>li>a .tit{font-size: 2rem;}
    #jobs .list>ul>li>a .ico>i{font-size: 7rem; }

}

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

    #jobs .list>ul>li{ width:48.5%; margin-right: 0;}
    #jobs .list>ul>li:nth-child(3n){margin-right: 0;}
    #jobs .list>ul>li:nth-child(even){float: right;}

    #jobs .view>.container>.item{width: 100%;}


}

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

    #jobs .view{ width: 70%;}
    #jobs .view:after{font-size: 20rem;}
    #jobs .view>.title>.tit{font-size: 3rem;}


}



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

    #jobs .list>ul>li{ width:100%;  float: none; margin-bottom: 20px;}
    #jobs .list>ul>li:nth-child(even){float: none;}
    #jobs .list>ul>li>a{padding: 20px 30px;}
    #jobs .list>ul>li>a .tit{font-size: 1.8rem;}


    #jobs .view:after{font-size: 16rem;}
    #jobs .view>.title>.tit{font-size: 2.4rem;}
    #jobs .view>.container>.item>.con>p{width: 100%;float: none;}

}