.kv {
  background-image: url("");
}
.job-detail {
  padding: 120px 0 ;
  background-color: #f6f8fb;
}
.job-detail .container {
  background-color: white;
  padding: 60px 50px;
  max-width: 1200px;
  margin: 0 auto;
  width: calc(90vw - 50px);
  color: #444;
  position: relative;
}
.job-detail .container .back-btn {position: absolute;right:50px;top: -55px;padding: 7px 22px;}
.jobs-tltle{position: relative; top: -100px;left: 0;line-height: 0;  font-size: 28px; color: #2c5dbc;}


.job-detail .container .title {display: flex;justify-content: space-between;width: 100%;flex-wrap: wrap;flex-direction: row;align-content: center;align-items: center;margin:20px 0 0 0;}
.job-detail .container .title h2 {color: #333;font-size: 20px;font-weight:normal;}
.job-detail .container .title h3 {color: #333;font-size: 20px;font-weight:normal;}
.job-detail .container .title span{font-size:15px;font-weight:normal;margin:0 0 0 20px;color:#555;}

.job-detail .container hr {
  opacity: 0.2;
  margin: 30px 0 0 0;
}
.job-detail .container .date {
  margin-bottom: 14px;
  color: #888;
  font-size: 16px;
}
.job-detail .container .sub-title {
  font-size: 20px;
  color: #333;
  margin: 30px 0 14px 0;
}
.job-detail .container .job-info {
  line-height: 2;
  font-size: 18px;
}
.job-detail .container .btn-group {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
.job-detail .container .apply-btn {
  margin-top: 40px;
  padding: 10px 42px;
  letter-spacing: 1px;
}
.job-detail .container #confirm-apply {
  margin-top: 40px;
}
.job-detail .container .download-btn {
  background-color: #E65804;
  padding: 0 20px;
  border-radius: 4px;
  color: white;
  display: flex;
  align-items: center;
  height: 44px;
  gap: 10px;
  line-height: 1;
  width: fit-content;
}
.job-detail .container .upload-btn {
  margin: 30px auto 0 auto;
  padding: 0 50px;
  height: 50px;
  display: flex;
  align-items: center;
}

.hide{
  display: none;
}

.submit-group{
    width: 80%!important;
padding-top: 30px;
display: flex;
align-items: flex-start !important;
gap: 20px;
flex-direction: column !important;
}
.form-table{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:  center;
  gap: 4%;
  padding: 40px 0;
}

.form-table .form-item{
  width: 80%;
  display: flex;
  align-items: center;
  margin: 0 0 20px 0;
}

.text-group{display: flex; flex-direction: column !important; align-items: flex-start !important;  flex-wrap: nowrap !important;gap: 15px;}
.text-group>textarea{    width: 95% !important;}

.form-table .half-item{
  width: 38%;
}

.form-table .form-item>label{
    min-width: 120px;
    display: inline-block;
    text-align:left;
    padding: 0 15px 0 0;
}

.form-table .form-item>label i{color: #ff0000;font-style: normal;text-align: center;}
.files-group h3 i{color: #ff0000;font-style: normal;text-align: center;}

.form-table .form-item>input{width: 100%;border-color: transparent;border-style: solid;border-width: 1px; outline: none;padding: 14px;border-radius: 5px; background-color: #f5f5f5;font-size: 16px;    color: #333;font-family: auto;}
.form-table .form-item>select{width: 100%;border-color: transparent;border-style: solid;border-width: 1px; outline: none;padding: 14px;border-radius: 5px; background-color: #f5f5f5;font-size: 16px;    color: #333;font-family: auto;}
.form-table .form-item input[type="radio"]{margin: 0 0 0 20px;    color: #333;font-family: auto;}


.more-input{width: 100%; max-width: 100%; border-color: transparent;border-style: solid;border-width: 1px;  outline: none; padding: 14px; border-radius: 5px;  background-color: #f5f5f5;
  margin: 0px;}

.form-table .form-item>textarea{
  width: 100%;
  border-color: transparent;border-style: solid;border-width: 1px; 
  outline: none;
  padding: 20px;
  border-radius: 5px;
  background-color: #f5f5f5;
  font-size: 16px;
      color: #333;
      font-family: auto;
}


.submit-btn{width: 280px;}

.captcha{
  display: flex;
   display: flex;
  align-items: center;
  gap: 10px;
}
 .captcha input {
  max-width: 200px;
  width: 100%;
  border: none;
  outline: none;
  padding: 14px;
  border-radius: 5px;
  background-color: #f5f5f5;
}
 .captcha img {
  height: 36.5px;
  width: 118px;
}
.files-group{margin: 30px 0 20px 0; display: flex; flex-direction: column;flex-wrap: wrap;width: 80%;   justify-content: space-around;    border-top: 1px #ebebeb solid;   padding: 30px 0 0 0;}
.files-group span{    display: flex;align-content: center;   flex-wrap: wrap;   flex-direction: row;align-items: center;justify-content: flex-start;gap: 20px;}
.files-group h3{font-size: 16px; font-weight: normal;  margin: 10px 0 10px 0;  text-align: left;min-width: 120px;display: flex;
    flex-direction: row;align-items: center;}
.files-group i{font-size: 14px;font-style: normal;clear: both;color: #c91919; line-height:40px;}


.loading{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  z-index: 9999;
  left: 0;
  top: 0;
}

.loading div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  color: white;
  font-size: 24px;
  opacity: .9;
}
.pointers{cursor: pointer;text-decoration:underline;}
.pointers:hover{color:#2c5dbc}

@media screen and (max-width: 1025px) {
  .job-detail { padding: 180px 0;}
  .job-detail .container {padding: 30px 20px;width: 80vw;}
  .jobs-tltle{top: -65px; left: 0;}
  .job-detail .container .back-btn {position: absolute;right: 20px;top:-55px;}
}

    
@media screen and (max-width: 850px) {
    .form-table {display: flex;  gap: 4%; padding: 40px 0;width: 100%; flex-wrap: wrap; justify-content: space-around; flex-direction: column;align-content: center;}
.form-table .half-item { width: 85%;}
.job-detail .container .title h2{font-size: 20px;line-height:28px}
.job-detail .container .title h3{font-size: 18px;line-height:28px;color: #888;}
.job-detail .container span{font-size: 14px;color:#555;}
}

@media screen and (max-width: 550px) {
    .job-detail {  padding: 180px 0; }
    .job-detail .container{padding: 20px 20px;}
     .form-table .half-item {width: 95%;font-size:14px;}
     .form-table .form-item{width: 95%;font-size:14px;margin: 10px 0;}
    .job-detail .container .back-btn{padding: 4px 10px;right: 10px;  top: -58px;}
    .form-table .form-item>label{min-width: 23%;display: inline-block;  text-align: left;  padding: 0 12px 0 0;font-size:14px;}
    .form-table .form-item>input{font-size:14px;}
    .form-table .form-item .radio-group{width:100%;font-size:14px;}
    .form-table .form-item>textarea{font-size:14px;}
    .form-table .form-item>select{font-size:14px;}
    .more-input{max-width: 100%;width:100%;padding: 10px;margin:0;}
    .form-table .submit-group{ display: flex;   align-items: center;  flex-direction: column;}
    .form-table .text-group{display: flex;flex-wrap: wrap;flex-direction: column;align-items: flex-start;gap: 10px;}
    .form-table .text-group>textarea{width: 88% !important;}
    .files-group span{gap: 5px;  margin: 0 0 20px 0;}
    .files-group{width: 95% ;}
    .job-detail .container .title{gap:20px;}
    .job-detail .container .title h2{width:100%}
    .submit-group{width: 95% !important;}
    .submit-btn{width: 86%;margin: 10px auto;}
    .job-detail .container .title h3{font-size:16px;line-height:10px;color: #888;}
}
@media screen and (max-width: 450px) {
    .jobs-tltle{font-size: 22px;}
}
    

.show-hr-qrcode{
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  z-index: 999;
}

.hr-qrcode-container{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;

}

#close-hr-qrcode{
  position: absolute;
  top: 105%;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.2s ease;
  cursor: pointer;
}
#close-hr-qrcode:hover{
  transform: translateX(-50%) scale(1.1);
}

.hr-tips{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 30px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  z-index: 999;
  color: white;
  font-size: 20px;
}


.error-tips{
  border-color: #c91919 !important;
}