@charset "UTF-8";

.hire {
    margin-bottom: 70px;
}
.hire-table {
    width: 100%;
}
.hire-table thead {
    background: #0039C8;
}
.hire-table th, .hire-table td {
    padding: 20px 15px;
}
.hire-table th {
    color: #fff;
}
.hire-table th:first-child {
    border-left: 1px solid #0039C8;
}
.hire-table th:last-child {
    border-right: 1px solid #0039C8;
}
.hire-table .hire-table-base td {
    text-align: center;
}
.hire-table td:first-child {
    border-left: 1px solid #f2f2f2;
}
.hire-table td:last-child {
    border-right: 1px solid #f2f2f2;
}

.hire-table .hire-table-detail {
    background: #EEF0F7;
}
.hire-table .hire-table-detail td {
    padding: 0;
}
.hire-table-base tr {
    border-bottom: 1px solid #f2f2f2;
}
.hire-table-base .state1,
.hire-table-base.open .state0 {
    display: none;
}
.hire-table-base.open .state1 {
    display: inherit;
}

.hire-table .apply {
    border: none;
    outline: 0;
    background: #D8D8D8;
    border-radius: 2px;
    color: #333;
    padding: 4px 6px;
    cursor: pointer;
    transition: all .3s;
}
.hire-table .apply:hover {
    background: #bfbcbc;
}
.hire-table-base .apply.state1 {
    background: #0039c8;
    color: #fff;
}
.hire-table-base .apply.state1:hover {
    background: rgba(0, 57, 200, .8);
}

.detail-box {
    display: none;
    padding: 20px 15px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
.hire-table-base.open + tbody .detail-box {
    opacity: 1;
}
.detail-group {
    margin: 10px 4% 0;
}
.detail-base {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}
.db-item {
    flex: 0 0 25%;
    text-align: left;
    padding-right: 20px;
    box-sizing: border-box;
    white-space: nowrap;
    margin-bottom: 15px;
    color: #666666;
}
.detail-duty, .detail-demand {
    margin-bottom: 15px;
}
.dd-title {
    text-align: left;
    padding: 10px 0;
    font-weight: bold;
}
.dd-content {
    text-align: left;
    white-space: break-spaces;
    line-height: 30px;
}
.detail-box .action {
    margin-top: 30px;
}
.detail-box .action button {
    width: 94px;
    height: 39px;
    background: #0039C8;
    border-radius: 2px;
    border: none;
    outline: 0;
    color: #fff;
}
.detail-box .action button:hover {
    background: rgba(0, 57, 200, .8);
}
@media(max-width: 1024px) {
    .detail-group {
        margin: 10px 2% 0;
    }
}
@media(max-width: 768px) {
    .db-item {
        flex: 0 0 33.3333333%;
    }
}
@media(max-width: 640px) {
    .db-item {
        flex: 0 0 50%;
    }
}
@media(max-width: 580px) {
    .hire-table th, .hire-table td {
        padding: 10px 2px;
    }
    .db-item {
        flex: 0 0 100%;
        margin-bottom: 5px;
    }
    .hire-table th:nth-child(2),
    .hire-table td:nth-child(2)
    {
        display: none;
    }
}


/*登录弹窗*/
.dialog {
    display: none;
}
.dialog-mast {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
.dialog {
    position: fixed;
    z-index: 1001;
}
.dialog-wrap {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #ffffff;
    border-radius: 10px;
    width: 526px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dialog-head {
    position: relative;
    padding: 15px 20px;
    height: 54px;
    box-sizing: border-box;
}
.dialog-head .close {
    position: absolute;
    right: 12px;
    top: 15px;
}
.dialog-head .close img {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.dialog-head .title {
    text-align: center;
}
.dialog-hire .dialog-body {
    padding: 0 53px;
    flex: 1;
    overflow-y: auto;
}
.dialog-hire .dialog-body .title {
    text-align: center;
}
.dialog-hire .dialog-body .title img {
    margin-bottom: 20px;
}
.dialog-hire .form {
    margin: 30px 0;
}
.dialog-hire .form .form-item {
    display: flex;
    margin-bottom: 20px;
}

.dialog-hire .form .form-item input {
    border: none;
    outline: 0;
}

.dialog-hire .form .form-item.column {
    flex-direction: column;
}
.upload-wrap {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background: #f2f3f5;
    display: flex;
    align-items: center;
}
.upload-wrap .type {
    margin-right: 20px;
}
.upload-wrap input {
    flex: 1;
}
.dialog-hire .form .phone-code-btn {
    border: none;
    white-space: nowrap;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    background: #0039C8;
    padding: 0 17px;
    cursor: pointer;
}
.dialog-hire .form .form-submit {
    width: 100%;
    background-color: #0039c8;
    color: #ffffff;
}
.dialog-hire .form button[disabled] {
    background: #9b9b9b;
    cursor: no-drop;
}
.dialog-hire .form .other {
    margin: 20px 0;
    text-align: center;
}
.dialog-hire .form .other a {
    color: #0039C8;
}

.dialog-hire .form .tips {
    margin-top: 20px;
    color: #FF0600;
}

@media(max-width: 768px) {
    .dialog-wrap {
        width: 90%;
    }
    .dialog-hire .dialog-body {
        padding: 0 20px;
    }
}
