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


#jobs{margin: 0 auto; padding: 60px 0;}
#jobs>.title{ text-align: center; margin: 0 auto;padding: 50px 0;}
#jobs>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}

#jobs>.display{margin: 0 auto; padding: 50px 0;}
#jobs>.display>.describe{ font-size: 1.6rem; color: #999; text-align: center; line-height: 2.8rem;margin: 0 auto; padding-bottom: 50px;}
#jobs>.display .list>ul>li{display: block;float: left; width: 31.33%; box-sizing: border-box; background: #f2fafb;text-align: left; margin-bottom: 3%; margin-right:3%; overflow: hidden; transition: all .35s; }
#jobs>.display .list>ul>li:nth-child(3n){ margin-right: 0;}
#jobs>.display .list>ul>li>a{display: block; padding: 50px;}
#jobs>.display .list>ul>li>a .box{ position: relative; text-align: left;}
#jobs>.display .list>ul>li>a .box>.num{position: absolute;z-index: 10; top: 3px; right: 0; display: inline-block;padding: 5px 8px; background: rgba(201,14,14,1); font-size: 1.4rem; font-weight: bold; color: #fff; transition: all .35s;}
#jobs>.display .list>ul>li>a .box>.tit{font-size: 2.4rem; font-weight: bold; color: #333; overflow: hidden; text-overflow:ellipsis;white-space: nowrap; box-sizing: border-box; padding-right: 80px; transition: all .35s;}
#jobs>.display .list>ul>li>a .box>.add{padding: 15px 0; line-height: 2.4rem; font-size: 1.6rem; color: #333; border-bottom: 1px solid rgba(0,0,0,.06);}
#jobs>.display .list>ul>li>a .box>.add>i{float: left;font-size: 2rem; margin-right: 6px;}
#jobs>.display .list>ul>li>a .box>.dept{font-size: 1.4rem; line-height: 2rem; color: #999; padding-top: 10px; padding-left: 3px;}
#jobs>.display .list>ul>li>a .box>.dept>i{float: left; margin-right: 6px;}
#jobs>.display .list>ul>li:hover{ transform: translateY(-8px);}
#jobs>.display .list>ul>li:hover .box>.tit{color: rgba(1,83,139,1);}
#jobs>.display .list>ul>li:hover .box>.add{color: rgba(1,83,139,1);}


#jobs>.view{ position: relative; margin:0 auto; width: 90%;}
#jobs>.view>.title{ text-align: left; border-bottom: 1px solid #ddd; padding: 30px 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(14,189,201,1); cursor: pointer;}
#jobs>.view>.close:hover{transform:rotate(180deg);}
#jobs>.view>.container{ position: relative; margin:40px auto 0 auto; 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: 70%;}
#jobs>.view>.container>.item>.tit{ padding: 10px 0; font-size: 1.8rem; font-weight: bold; color: rgba(1,83,139,1);}
#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: 1480px) {

    #jobs>.display .list>ul>li>a .box>.tit{font-size: 2.2rem;}

}




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

    #jobs>.display .list>ul>li>a .box>.tit{font-size: 2rem;}



}

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

    #jobs>.display .list>ul>li>a{padding: 30px;}
    #jobs>.display .list>ul>li>a .box>.tit{font-size: 1.8rem;}


    #jobs>.view>.container>.item{width: 100%;}
    #jobs>.view>.title>.tit{font-size: 3rem;}
}


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

    #jobs{padding: 30px 0;}
    #jobs>.title{padding: 10px 0;}
    #jobs>.title>h3{ font-size: 3.2rem;}

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



}

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

    #jobs>.display>.describe{ font-size: 1.4rem; line-height: 2.4rem; padding-bottom: 30px;}

    #jobs>.view>.title>.tit{font-size: 2.4rem;}
    #jobs>.view>.title>.expire{font-size: 1.4rem;}

}


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

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

    #jobs>.display .list>ul>li{float: none; width:100%; }

    #jobs>.display .list>ul>li>a .box>.add{line-height: 2rem; font-size: 1.4rem;}
    #jobs>.display .list>ul>li>a .box>.add>i{ margin-right: 4px;}
    #jobs>.display .list>ul>li>a .box>.dept{font-size: 1.2rem; line-height: 1.8rem; }


    #jobs>.view>.title>.tit{font-size: 2rem;}
    #jobs>.view>.close>i{font-size: 3.2rem; }
    #jobs>.view>.container>.item>.tit{ font-size: 1.6rem;}
    #jobs>.view>.container>.item>.con>p{width: 100%;float: none;}

}

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

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


}