body {
  padding-top: 50px;
  /* background: linear-gradient(180deg, rgba(250, 248, 245, 1) 0%, rgba(250, 248, 245, 0) 100%);
  background-repeat: no-repeat; */
}
.banner-container {
  color: #fff;
  height: 300px;
  background: #F7C234 url(../images/recruit_detail_banner.png) no-repeat center center / cover;
}
.banner-container h1 {
  font-size: 36px;
  line-height: 1.5;
  margin-top: 55px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 942px;
  height: 102px;
  box-sizing: border-box;
}
.banner-container.company h1 {
  margin-top: 85px;
}
.banner-container .content {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.6;
}
.data-container {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 0 0 20px 20px;
  height: 138px;
  width: 1184px;
  margin: 0 auto;
}
.data-container .data-item {
  width: 250px;
  height: 108px;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  align-items: center;
  line-height: 2;
  border-radius: 10px;
}
.data-container .data-item.active,
.data-container .data-item:hover {
  background: linear-gradient(0deg, rgba(223, 178, 53, 0.1) 0%, rgba(251, 239, 238, 0) 100%);
}
.data-container .data-item .number {
  color: #F7C234;
  font-size: 36px;
  font-weight: 600;
}
.data-container .data-item .name {
  color: #000;
  font-size: 16px;
}
.detail-container {
  margin-top: 20px;
}
.detail-container .detail-left {
  border-radius: 13px;
  background-color: #fff;
  float: left;
  width: 785px;
  padding: 20px;
  box-sizing: border-box;
}
.detail-container .detail-right {
  float: right;
  width: 379px;
}
.detail-container .detail-right .data-wrapper {
  border-radius: 13px;
  background-color: #fff;
  padding: 16px 0;
  color: #000;
  font-size: 20px;
  line-height: 50px;
}

.detail-container .detail-right .data-wrapper .data-item {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  color: #000;
}
.detail-container .detail-right .data-wrapper .data-item.active,
.detail-container .detail-right .data-wrapper .data-item:hover {
  background: linear-gradient(90deg, rgba(223, 178, 53, 0.1) 0%, rgba(251, 239, 238, 0) 100%);
}
.detail-container .detail-right .data-wrapper .data-item .number {
  color: #a6a6a6;
  font-size: 14px;
}
.detail-container .detail-right .join-btn {
  height: 180px;
  background: #F7C234 url(../images/recruit_detail_btn.png) no-repeat center center / cover;
  border-radius: 13px;
  color: #fff;
  text-align: center;
  margin-top: 20px;
  line-height: 1.5;
  cursor: pointer;
}
.detail-container .detail-right .join-btn.disabled {
  background: #F7C234 url(../images/exam_detail_entry_disabled.png) no-repeat center center / cover;
}
.detail-container .detail-right .join-btn .identity {
  padding-top: 45px;
  font-size: 16px;
}
.detail-container .detail-right .join-btn .btn-use {
  padding-top: 5px;
  font-size: 24px;
}
.detail-container .detail-right .join-btn .tips {
  padding-top: 10px;
  font-size: 14px;
}
.detail-container .company-list-wrapper {
  float: left;
  width: 805px;
}
.detail-container .company-list {
  overflow: hidden;
}
.company-list .company-item {
  width: 386px;
  float: left;
  margin-right: 12px;
  margin-bottom: 20px;
  border-radius: 12px;
  height: 180px;
  overflow: hidden;
  background-color: #fff;
}
.company-list .company-item:hover {
  box-shadow: 0 16px 40px 0 rgb(138 149 158 / 20%);
  transition: all 0.4s;
}
.company-list .company-item .company-top {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: linear-gradient(90deg, rgba(223, 178, 53, 0.1) 0%, rgba(251, 239, 238, 0) 100%);
  height: 80px;
}
.company-list .company-item .company-top .img-wrapper {
  width: 45px;
  height: 45px;
  border-radius: 2px;
  background-color: #f7f7f7;
}
.company-list .company-item .company-top .img-wrapper img {
  width: 45px;
  height: 45px;
  display: block;
}
.company-list .company-item .company-top .company-info {
  color: #666;
  height: 45px;
  margin-left: 15px;
}
.company-list .company-item .company-bottom {
  height: 100px;
  padding: 15px 20px;
  box-sizing: border-box;
}
.company-list .company-item .company-bottom p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  line-height: 1.5;
  color: #383838;
  font-size: 12px;
}
.conditions {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.conditions .condition {
  padding: 0 8px;
  position: relative;
}
.conditions .condition:first-child {
  padding-left: 0;
}
.conditions .condition:first-child:before {
  display: none;
}
.company-list .company-item .conditions .condition:before {
  content: '';
  border-radius: 50%;
  width: 2px;
  height: 8px;
  background-color: #e5e5e5;
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
}
.detail-container .candidate-list-wrapper {
  float: left;
  width: 805px;
}
.detail-container .candidate-list {
  overflow: hidden;
}

.candidate-item {
  float: left;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  width: 386px;
  height: 188px;
  padding: 0 20px;
  box-sizing: border-box;
  margin-right: 12px;
  margin-bottom: 20px;
}
.candidate-item:hover {
  box-shadow: 0 16px 40px 0 rgb(138 149 158 / 20%);
  transition: all 0.4s;
}
.candidate-item .candidate-top {
  height: 75px;
  display: flex;
  align-items: center;
}
.candidate-item .candidate-top .avatar {
  width: 45px;
  height: 45px;
  border-radius: 6px;
}
.candidate-item .candidate-top .content {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 45px;
}
.candidate-item .candidate-top .content .name {
  color: #000;
  font-size: 14px;
}
.conditions {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.candidate-middle-wrapper {
  display: flex;
  align-items: center;
}
.candidate-middle-wrapper .icon {
  width: 18px;
  margin-right: 8px;
}
.candidate-top .conditions {
  color: #666666;
}
.candidate-middle .conditions {
  color: #383838;
}

.candidate-item .conditions .condition:before {
  content: '';
  border-radius: 50%;
  width: 2px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
}
.candidate-top .condition:before {
  background-color: #666666;
}
.candidate-middle .condition:before {
  background-color: #383838;
}
.candidate-item .candidate-middle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 45px;
  color: #383838;
  font-size: 12px;
}
.candidate-item .candidate-bottom {
  margin-top: 10px;
}
.candidate-item .candidate-bottom p {
  font-size: 12px;
  color: #666666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 20px;
}
.detail-container .job-list-wrapper {
  float: left;
  width: 785px;
}
.detail-container .job-list {
  overflow: hidden;
}
.detail-container .job-list .job-item {
  position: relative;
  background: #fff;
  border-radius: 12px;
  transition: all 0.2s linear;
  cursor: pointer;
  margin-bottom: 20px;
}

.detail-container .job-list .job-item:hover {
  box-shadow: 0 16px 40px 0 hsla(0, 0%, 60%, 0.3);
  z-index: 3;
}
.job-item .job-card-left {
  padding: 16px 0 16px 24px;
  height: 88px;
  display: block;
  box-sizing: border-box;
}
.job-item .job-card-left {
  float: left;
  width: 430px;
}
.job-item .job-card-left .job-title {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 500;
  color: #222;
  line-height: 22px;
  transition: all 0.2s linear;
  max-width: 300px;
}
.job-item .job-card-left:hover .job-title {
  color: #00a6a7;
}
.job-item .job-card-left .job-title .job-name {
  float: left;
  max-width: 172px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-item .job-card-left .job-title .job-area-wrapper {
  float: left;
  margin-left: 12px;
  line-height: 22px;
}
.job-item .job-card-left .job-title .job-area-wrapper .job-area {
  float: left;
  max-width: 214px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-item .job-card-left .job-title .job-area-wrapper:before {
  content: '[';
  float: left;
  font-size: 16px;
}
.job-item .job-card-left .job-title .job-area-wrapper:after {
  content: ']';
  float: left;
  font-size: 16px;
}
.job-item .job-card-left .job-info {
  margin-top: 12px;
  height: 22px;
  overflow: hidden;
}
.job-item .job-card-left .salary {
  font-size: 16px;
  font-weight: 500;
  color: #fe574a;
  line-height: 22px;
  float: left;
}
.job-item .job-card-left .tag-list {
  float: left;
  margin-left: 12px;
  max-width: 172px;
  height: 22px;
  overflow: hidden;
}
.job-item .job-card-left .tag-list li {
  padding: 2px 8px;
  float: left;
  background: #f8f8f8;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 18px;
}
.job-item .job-card-left .tag-list li + li {
  margin-left: 8px;
}
.job-item .job-card-right {
  padding: 16px 24px 16px 10px;
  overflow: hidden;
  float: left;
  width: 355px;
  box-sizing: border-box;
}

.job-item .job-card-right .company-logo {
  float: left;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #f8f8f8;
  box-sizing: border-box;
}
.job-item .job-card-right .company-logo img {
  width: 100%;
  height: 100%;
}
.job-item .job-card-right .company-info {
  margin-left: 12px;
  float: left;
}
.job-item .job-card-right .company-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  height: 22px;
}
.job-item .job-card-right .company-name a {
  display: inline-block;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 196px;
  vertical-align: middle;
  transition: all 0.2s linear;
}
.job-item .job-card-right .company-tag-list {
  margin-top: 12px;
  height: 22px;
  overflow: hidden;
  max-width: 250px;
}
.job-item .job-card-right .company-tag-list li {
  display: inline-block;
  background: #f8f8f8;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 18px;
}
.job-item .job-card-right .company-tag-list li + li {
  margin-left: 8px;
}
.job-item .job-card-footer {
  padding: 15px 24px;
  /* background: linear-gradient(90deg, #f5fcfc, #fcfbfa); */
  background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgb(247 197 62) 100%);
  border-radius: 0 0 12px 12px;
  cursor: pointer;
}
.job-item .job-card-footer .tag-list {
  overflow: hidden;
  height: 18px;
  margin-left: -8px;
}
.job-item .job-card-footer .tag-list {
  float: left;
  width: 322px;
  margin-right: 84px;
  font-size: 0;
}
.job-item .job-card-footer .tag-list li {
  display: inline-block;
  position: relative;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 18px;
  white-space: nowrap;
}
.job-item .job-card-footer .tag-list li + li:before {
  content: ' ';
  position: absolute;
  top: 4px;
  left: 0;
  width: 1px;
  height: 10px;
  background: #e0e0e0;
  z-index: 1;
}
.job-item .job-card-footer .info-desc {
  float: left;
  width: 320px;
  margin-left: 18px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 18px;
  word-break: break-word;
  -ms-word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-job-wrapper {
  width: 1030px;
  padding: 38px 0;
  background-color: #fff;
  border-radius: 15px;
  margin: 0 auto;
}
.company-job-wrapper .dialog-header {
  text-align: center;
  color: #524b6b;
  line-height: 1.5;
  width: 600px;
  margin: 0 auto;
}
.company-job-wrapper .dialog-header h1 {
  font-size: 16px;
  color: #150b3d;
  margin-bottom: 15px;
}
.company-job-wrapper .dialog-body {
  width: 819px;
  margin: 70px auto 0;
}
.company-job-wrapper .dialog-body .tips {
  text-align: center;
  color: #F7C234;
  font-size: 16px;
}
.company-job-wrapper .dialog-body .job-list {
  overflow: auto;
  width: 835px;
  max-height: 190px;
}
.company-job-wrapper .dialog-body .job-list .job-item {
  width: 265px;
  height: 90px;
  margin-right: 12px;
  float: left;
  border: 1px solid #e5e5e5;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.company-job-wrapper .dialog-body .job-list .job-item.active {
  border-color: #F7C234;
}
.company-job-wrapper .dialog-body .job-list .job-item .job-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}
.company-job-wrapper .dialog-body .job-list .job-item .job-top .name {
  color: #000;
  max-width: 65%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.company-job-wrapper .dialog-body .job-list .job-item .job-top .salary {
  color: #F7C234;
  max-width: 35%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.company-job-wrapper .dialog-body .job-list .job-item .job-bottom {
  color: #a6a6a6;
}
.company-job-wrapper .dialog-footer {
  margin-top: 55px;
}
.company-job-wrapper .dialog-footer .btn {
  margin: 0 auto;
  width: 190px;
  height: 50px;
  line-height: 50px;
  display: block;
  font-size: 14px;
  color: #fff;
  background-color: #F7C234;
  border-radius: 6px;
  cursor: pointer;
  border: none;
}
.company-job-wrapper .dialog-footer .close {
  margin: 32px auto 0;
  width: 80px;
  display: block;
  font-size: 14px;
  color: #F7C234;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
}