body {
    min-height: 100%;
    background: #fff;
}
.join-head {
    position: relative;
    width: 7.5rem;
    height: 2.5rem;
    margin-bottom: 3rem;
    background: url(/static/m/img/join_head.png);
    background-size: 100%;
    font-size: .28rem;
}
.join-head h2 {
    position: absolute;
    width: 2rem;
    height: .4rem;
    line-height: .4rem;
    top: 0;
    bottom: .5rem;
    left: 0;
    right: 0;
    margin: auto;
    color: #fff;
    text-align: center;
    font-size: .4rem;
}

.join-head h2::before {
    position: absolute;
    content: '';
    width: .7rem;
    height: 2px;
    left: -.7rem;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
}

.join-head h2::after {
    position: absolute;
    content: '';
    width: .7rem;
    height: 2px;
    right: -.7rem;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
}
.join-head-content {
    position: absolute;
    width: 6.89rem;
    height: 2.88rem;
    padding-top: .2rem;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: -2.5rem;
    background: #fff;
    color: #333;
    box-shadow: 0 7px 30px #d1d1d1;
    text-align: center;
    white-space: nowrap;
}
.join-head-content .email {
    position: relative;
    width: 5rem;
    margin: .3rem auto 0 auto;
}
.join-head-content .email span {
    color: #00b2ff;
}
.join-head-content .logo-email {
    position: absolute;
    left: .2rem;
    top: 0;
    bottom: 0;
    margin: auto;
    width: .35rem;
    height: .24rem;
    background-position: 76.995% 29.128%;
}
.job-box .category {
    width: 6.9rem;
    margin: 0 auto;
    list-style-type: none;
    color: #1b1b1b;
}
.job-box .category::after {
    display: block;
    content: '';
    clear: both;
}
.job-box .category li {
    float: left;
    width: 1.2rem;
    height: .6rem;
    margin: .1rem .09rem;
    line-height: .6rem;
    text-align: center;
    background: #f5f5f5;
    font-size: .25rem;
    border-radius: 2px;
}
.job-box .category .active {
    background: #fff;
    color: #00a2ff;
    border: 1px solid #00a2ff;
}
.job-list {
    margin-top: .3rem;
}
.job-item {
    display: block;
    width: 7.5rem;
    height: 1.7rem;
    padding: .2rem .4rem;
    font-size: .25rem;
    border-top: 1px solid #eee;
}
.job-item-l {
    float: left;
    width: 5rem;
}
.job-item-l h3 {
    height: .8rem;
    line-height: .8rem;
    font-size: .3rem;
    font-weight: bold;
    white-space: nowrap;
}
.job-item-l p {
    color: #999;
}
.job-item-r {
    margin-left: 5rem;
    height: 100%;
    text-align: right;
    white-space: nowrap;
}
.job-item-r h3{
    height: .8rem;
    line-height: .8rem;
    font-size: .3rem;
    color: #f4530c;
}
.job-item-r p {
    color: #999;
}
.icon-pos {
    display: inline-block;
    width: .2rem;
    height: .25rem;
    margin-right: .1rem;
    background-position: 87.959% 28.966%;
}
.job-empty {
    display: none;
    width: 4rem;
    margin: 0 auto;
    text-align: center;
    font-size: .3rem;
    color: #444;
}
.job-empty img {
    display: block;
    width: 100%;
}