/* join-us pages scoped styles */

/* ==================== join-us index ==================== */
#join-page.join-index a {
  color: #fff;
}
#join-page.join-index a:hover {
  color: #0082e6;
}
#join-page.join-index .join-banner {
  background-image: url('/assets/join/banner.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;   /* Vue 全局背景定位 50% 50%，0 0 会把 cover 裁到图边缘 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#join-page.join-index .join-banner .s-48 {
  letter-spacing: calc(var(--letterSpacing) * 0.3);
}
#join-page.join-index .horizontal-transform {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#join-page.join-index .horizontal-transform > .content {
  margin: 0 auto;
}
#join-page.join-index .join-recruit-item {
  margin: 5vh;
}
#join-page.join-index .content .title {
  padding-bottom: 1.875rem;
  position: relative;
}
#join-page.join-index .content .title::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
}
#join-page.join-index .join-recruit-name {
  display: block;
  letter-spacing: calc(var(--letterSpacing) * 0.21);
  margin-right: 1.3125rem;
}
#join-page.join-index .join-recruit-jobs {
  font-size: 1.2rem;
  letter-spacing: calc(var(--letterSpacing) * 0.21);
  margin-right: 1.3125rem;
}
#join-page.join-index .join-wheel {
  margin-top: 1.875rem;
}
#join-page.join-index .horizontal-transform > .pic {
  width: 60%;
  overflow: hidden;
}
#join-page.join-index .horizontal-transform > .pic > img {
  width: 100%;
  object-fit: contain;
}

/* ==================== join-us contact ==================== */
#join-page.join-contact .contact-section {
  padding: 8% 13.6% 8% 14.35%;
  color: #000;
  background: #fff;
  display: flex;
  align-items: center;
  height: auto;
}
#join-page.join-contact .contact-headline {
  font-size: 2.125rem;
  letter-spacing: calc(var(--letterSpacing) * 0.21);
  opacity: 0.8;
  margin-right: 1.5625rem;
}
#join-page.join-contact .contact-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 5.1875rem;
}
#join-page.join-contact .contact-logo {
  object-fit: cover;
  aspect-ratio: 3 / 1;
  object-position: left;
  width: 12rem;
}
#join-page.join-contact .name,
#join-page.join-contact .phone,
#join-page.join-contact .company,
#join-page.join-contact .position,
#join-page.join-contact .email,
#join-page.join-contact .message {
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 174%;
  letter-spacing: calc(var(--letterSpacing) * 0.22);
  width: 31.5625rem;
  margin: 2.125rem 0;
}
#join-page.join-contact .confirm-btn {
  opacity: 0.8;
  background: #000;
  width: 10rem !important;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  letter-spacing: calc(var(--letterSpacing) * 0.15);
  margin-top: 4rem;
  color: #fff;
  cursor: pointer;
}
#join-page.join-contact input {
  width: 100%;
  -webkit-appearance: none;
  outline: none;
  border: none;
  background: none;
  box-sizing: border-box;
  color: #000;
  letter-spacing: calc(var(--letterSpacing) * 0.15);
  font-size: 1.2rem;
  min-height: 2rem;
  padding-right: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
#join-page.join-contact .contact-car {
  width: 100%;
  object-fit: contain;
}
#join-page.join-contact .pic {
  flex: 1;
  display: flex;
}

/* contact modal */
#join-page.join-contact .contact-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#join-page.join-contact .contact-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
#join-page.join-contact .contact-modal-box {
  position: relative;
  background: #fff;
  border-radius: 0.5rem;
  min-width: 20rem;
  padding: 1.5rem;
}
#join-page.join-contact .contact-modal-body {
  color: #000;
  font-size: 1.2rem;
  text-align: center;
  padding: 1rem 0;
}
#join-page.join-contact .contact-modal-footer {
  display: flex;
  justify-content: center;
}
#join-page.join-contact .modal-btn {
  cursor: pointer;
  opacity: 0.8;
  background: #000;
  width: 10rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 768px) {
  /* 以下规则对齐 join-us/index.vue 移动端 @media（迁移时整段漏掉，只剩 banner 高度） */
  #join-page.join-index .join-banner {
     height: 50vh;
  }
  /* Vue: div > .section { height:auto; margin-bottom:5% }
     —— 否则桌面 .section{height:100vh} 会把招聘区块撑成整屏，图片被挤到角落 */
  #join-page.join-index .join-campus-wrap > .section {
    height: auto;
    margin-bottom: 5%;
  }
  /* Vue: .horizontal-transform:nth-child(2n+1){ justify-content:flex-start } */
  #join-page.join-index .horizontal-transform:nth-child(odd) {
    justify-content: flex-start;
  }
  /* Vue: .horizontal-transform > .pic { width:100% } —— campus.png 移动端通栏全宽 */
  #join-page.join-index .horizontal-transform > .pic {
    width: 100%;
  }
  /* Vue: .horizontal-transform > .content { display:flex; flex-direction:column; align-items:center } */
  #join-page.join-index .horizontal-transform > .content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Vue: .s-34 { margin-right:0 }（H5 对应 .join-recruit-name/.join-recruit-jobs） */
  #join-page.join-index .join-recruit-name,
  #join-page.join-index .join-recruit-jobs {
    margin-right: 0;
  }
  /* 对齐 join-us/contact.vue 移动端 @media：表单单列通栏，车辆图独占一行 */
  #join-page.join-contact .contact-section {
    padding: 15% 5%;
    flex-direction: column;
  }
  #join-page.join-contact .contact-section > div,
  #join-page.join-contact .contact-section > div > div {
    width: 100%;
  }
  #join-page.join-contact .pic {
    flex: 1;
    display: flex;
  }
}