/* 全局基础 */
body {
  margin: 0;
  font-family: Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ===== Join Us Hero (参考图结构 + 你的文案) ===== */
.join-hero{
  background:#fff;
  position: relative;
  overflow:hidden;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",
               "Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}

/* 面包屑（右上角） */
.join-hero__breadcrumb{
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px 0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap: 10px;
  color:#b7bcc4;
  font-size: 12px;
}
.join-hero__crumb{
  color:#b7bcc4;
  text-decoration:none;
}
.join-hero__crumb:hover{ color:#8d95a1; }
.join-hero__crumb.is-current{ color:#8d95a1; }
.join-hero__sep{ opacity:.7; }

/* 上半：白底区域 */
.join-hero__top{
  padding: 70px 0 40px;
}
.join-hero__top-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  min-height: 280px;
}

/* 左侧文案容器 */
.join-hero__text{
  max-width: 620px;
  padding-top: 18px;
}

/* ✅ Section 1 标语（主标题） */
.join-hero__h1{
  font-size: 44px;
  font-weight: 300;
  letter-spacing: 0px;
  color:#2b2f36;
  margin: 0 0 26px;
}

/* ✅ 董事长寄语（首屏呈现） */
.join-hero__quote{
  position: relative;
  padding-left: 18px;
  border-left: 3px solid #e3e6ec; /* 很克制的竖线 */
  color:#6f7783;
}
.join-hero__quote p{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.95;
}
.join-hero__quote p:last-child{
  margin-bottom: 0;
}

/* 右侧彩色装饰 */
.join-hero__ornament{
  position:absolute;
  right: 0;
  top: 10px;
  width: 420px;
  height: 260px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  pointer-events:none;
}
.join-hero__ornament img{
  width: 150%;
  height: 110%;
  object-fit: contain;
}

/* 下半：通栏大图 */
.join-hero__banner{
  position: relative;
  height: 340px;
  overflow:hidden;
  background:#111;
}
.join-hero__banner-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* 中间深色半透明矩形（参考图那块） */
.join-hero__banner-mask{
  position:absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 62%;
  height: 100%;
  background: rgba(0,0,0,.25);
}

/* 底部文案 */
.join-hero__banner-text{
  position:absolute;
  left: 19%;
  bottom: 34px;
  z-index: 2;
  color:#fff;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 1px;
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .join-hero__ornament{
    width: 320px;
    height: 210px;
    top: 20px;
  }
  .join-hero__banner-mask{
    width: 80%;
  }
  .join-hero__banner-text{
    left: 10%;
    font-size: 18px;
  }
}

@media (max-width: 768px){
  .join-hero__breadcrumb{
    justify-content:flex-start;
  }
  .join-hero__top{
    padding: 50px 0 26px;
  }
  .join-hero__h1{
    font-size: 30px;
    letter-spacing: 2px;
  }
  .join-hero__ornament{
    display:none;
  }

  .join-hero__banner{
    height: 280px;
  }
  .join-hero__banner-mask{
    width: 100%;
    left:0;
    transform:none;
  }
  .join-hero__banner-text{
    left: 24px;
    right: 24px;
    bottom: 22px;
    font-size: 16px;
  }
}

/* ===== Section 3 | Promise ===== */
.career-promise{
  background:#fff;
  padding: 80px 0 90px;
}

.career-promise__wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 标题行 */
.career-promise__head{
  display: grid;
  grid-template-columns: 340px 1fr; /* 左标题右说明 */
  gap: 28px;
  align-items: start;
}

.career-promise__title{
  display:flex;
  align-items:center;
  gap: 12px;
  font-size: 22px;
  font-weight: 700;
  color:#008BD5;
}

.career-dot{
  width: 6px;
  height: 6px;
  background:#008BD5; /* 参考图的小橙点 */
  display:inline-block;
}

.career-promise__intro{
  margin: 2px 0 0;
  color:#6b7280;
  font-size: 13px;
  line-height: 1.9;
  max-width: 720px;
}

/* 分割线 */
.career-divider{
  height: 1px;
  background:#e5e7eb;
  margin: 28px 0 56px;
}

/* 主体 */
.career-promise__body{
  position: relative;
  padding-top: 40px;
}

/* 顶部胶囊（参考图：福利体系） */
.promise-pill{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  padding: 10px 34px;
  border: 4px solid #ff8a00;
  color:#1f2a37;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  background:#fff;
  line-height: 1;
}

/* 三列卡片布局 */
.promise-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  align-items: start;
  justify-items: center;
  padding-top: 26px;
}

/* 单卡片 */
.promise-card{
  width: 100%;
  max-width: 300px;
  border-radius: 14px;
  background: #f5f7fb; /* 浅灰蓝 */
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .06);
}

/* 卡片顶部蓝条 */
.promise-card__cap{
  background:#008BD5; /* 深蓝 */
  color:#fff;
  text-align:center;
  padding: 12px 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* 内容区 */
.promise-card__content{
  padding: 18px 18px 20px;
}

/* 列表 */
.promise-list{
  margin: 0;
  padding-left: 16px;
  color:#374151;
  font-size: 13px;
  line-height: 2;
}

.promise-list li{
  margin: 6px 0;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .career-promise__head{
    grid-template-columns: 1fr;
  }
  .career-divider{
    margin: 22px 0 40px;
  }
  .promise-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .promise-card{
    max-width: 520px;
  }
}

/* ===== Section 4 | Life / Interview ===== */
.life-sec{
  background:#fff;
  padding: 70px 0 90px;
}

.life-wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.life-title{
  font-size: 56px;
  line-height: 1.1;
  margin: 0 0 34px;
  color:#2b2f36;
  font-weight: 800;
  letter-spacing: 1px;
}

/* 版式：左大 + 右两张 */
.life-grid{
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 44px;
  align-items: start;
}

/* 卡片通用 */
.life-card{
  border-radius: 18px;
  overflow: hidden;
  background:#f3f4f6;
  box-shadow: 0 20px 50px rgba(15,23,42,.08);
}

.life-card__media{
  display:block;
  width: 100%;
  height: 100%;
}

.life-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform .55s ease;
}

.life-card__media:hover img{
  transform: scale(1.02);
}

/* 左大卡尺寸 */
.life-card--big{
  height: 520px;
  position: relative;
}

.life-card__caption{
  margin-top: 18px;
  font-size: 26px;
  font-weight: 800;
  color:#2b2f36;
}

/* 右侧区域 */
.life-right{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.88fr; /* 中图更大，小图稍窄 */
  gap: 30px;
  align-items: start;
}

.life-card--mid{ height: 320px; }
.life-card--sm{ height: 320px; }

/* 控制按钮（底部偏左，参考图位置） */
.life-nav{
  grid-column: 1 / span 2;
  display:flex;
  gap: 16px;
  margin-top: 18px;
  align-items:center;
}

.life-nav__btn{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .15s ease, box-shadow .25s ease;
}

.life-nav__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,23,42,.14);
}

.life-nav__icon{
  font-size: 28px;
  color:#6b7280;
  line-height: 1;
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .life-title{ font-size: 44px; }

  .life-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .life-right{
    grid-template-columns: 1fr 1fr;
  }

  .life-card--big{ height: 420px; }
}

@media (max-width: 768px){
  .life-title{ font-size: 34px; }

  .life-right{
    grid-template-columns: 1fr;
  }

  .life-card--mid,
  .life-card--sm{
    height: 260px;
  }

  .life-card__caption{
    font-size: 20px;
  }

  .life-nav{
    justify-content:flex-start;
  }
}

.mm-people{ 
  padding-left: 110px;
  background:#fff; padding:72px 0 90px; }

.mm-people__inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}
.mm-people__title{
  margin:0 0 28px;
  font-size:58px;
  font-weight:700;
  color:#008BD5;
}

/* 右侧延展到屏幕右边 */
.mm-people__rail{
  width:100%;
}

/* ✅ 关键：不让页面横向滚动，只裁剪卡片 */
.mm-carousel{
  overflow:hidden;            /* 不出滚动条 */
  width:100%;
  position:relative;
}

/* 轨道：用 transform 移动 */
.mm-track{
  display:flex;
  gap:44px;
  will-change: transform;
  transform: translateX(0);
}

/* 卡片尺寸（你可以调成更像图：第一张更大） */
.mm-card{
  flex:0 0 auto;
  width: 520px;
  border-radius:18px;
  overflow:hidden;
  background:#f3f4f6;
  box-shadow: 0 20px 50px rgba(15,23,42,.08);
  transform: scale(.92);
  transform-origin: left center;
  transition: transform .35s ease, box-shadow .35s ease;
}

/* 你要第一张更大：可以给第一张默认宽更大（可选） */
.mm-card.is-active{
  transform: scale(1);
  box-shadow: 0 26px 70px rgba(15,23,42,.14);
}

.mm-card__media{ display:block; }
.mm-card__media img{
  width:100%;
  height: 380px;
  object-fit: cover;
  display:block;
}

/* 标题默认不显示 */
.mm-card__caption{
  display:none;
  padding: 16px 0 0;
  font-size: 28px;
  font-weight: 900;
  color:#2b2f36;
}

/* ✅ 只有 active（第一个）显示标题 */
.mm-card.is-active .mm-card__caption{ display:block; }

/* 按钮 */
.mm-nav{
  display:flex;
  gap:18px;
  margin-top:18px;
  position:relative;
  left:48%;
  transform: translateX(-50%);
  width: fit-content;
}
.mm-nav__btn{
  width:62px;height:62px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.mm-nav__btn span{ font-size:30px; color:#9aa1ac; line-height:1; }
.mm-nav__btn:hover{ transform: translateY(-1px); }


/* 默认卡片（非第一个） */
.mm-card{
  flex:0 0 auto;
  width: 520px;              /* 其他卡片 */
  border-radius:18px;
  overflow:hidden;
  background:#f3f4f6;
  box-shadow: 0 20px 50px rgba(15,23,42,.08);
  transform: scale(.92);
  transform-origin: left center;
  transition: transform .35s ease, box-shadow .35s ease, width .35s ease;
}

/* ✅ 第一个（放大到绿色框级别） */
.mm-card.is-active{
  width: 820px;              /* ← 绿色框的关键：把它调大（比如 780~880） */
  transform: scale(1);       /* 保持 1，不要再放大缩放 */
  box-shadow: 0 26px 70px rgba(15,23,42,.14);
}

/* 图片高度也跟着更“撑开”一点，更像绿色框 */
.mm-card__media img{
  width:100%;
  height: 420px;             /* 默认高度 */
  object-fit: cover;
  display:block;
}

/* active 的图更高一点（可选，但更像你图） */
.mm-card.is-active .mm-card__media img{
  height: 520px;             /* ← 绿色框高度（按你想要的调） */
}

/* =========================
   Mobile / Tablet optimize
   ========================= */
@media (max-width: 1100px){
  .mm-people{
    padding: 44px 0 60px;
    padding-left: 0;
  }

  .mm-people__inner{
    padding: 0 16px;
  }

  .mm-people__title{
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 20px;
  }

  .mm-people__rail{
    padding-left: 16px;
    padding-right: 16px;
  }

  .mm-carousel{
    overflow: hidden;
    width: 100%;
  }

  .mm-track{
    gap: 16px;
  }

  /* 手机端所有卡片基础尺寸 */
  .mm-card{
    width: 78vw;
    max-width: 320px;
    min-width: 260px;
    border-radius: 16px;
    transform: scale(.94);
    transform-origin: center center;
    box-shadow: 0 14px 30px rgba(15,23,42,.10);
    transition: transform .32s ease, box-shadow .32s ease, width .32s ease;
  }

  /* 手机端 active 不要像桌面那样 820px，改成适中的主卡 */
  .mm-card.is-active{
    width: 84vw;
    max-width: 360px;
    min-width: 280px;
    transform: scale(1);
    box-shadow: 0 18px 38px rgba(15,23,42,.14);
  }

  .mm-card__media img{
    height: 220px;
    border-radius: 0;
  }

  .mm-card.is-active .mm-card__media img{
    height: 260px;
  }

  .mm-card__caption{
    padding: 14px 4px 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
  }

  .mm-nav{
    margin-top: 18px;
    left: 50%;
    transform: translateX(-50%);
    gap: 12px;
  }

  .mm-nav__btn{
    width: 48px;
    height: 48px;
    box-shadow: 0 8px 20px rgba(15,23,42,.10);
  }

  .mm-nav__btn span{
    font-size: 24px;
  }
}

/* 更小屏幕再压一层，比如 390px 以下 */
@media (max-width: 640px){
  .mm-people{
    padding: 36px 0 52px;
  }

  .mm-people__inner{
    padding: 0 14px;
  }

  .mm-people__title{
    font-size: 28px;
    margin-bottom: 18px;
  }

  .mm-people__rail{
    padding-left: 14px;
    padding-right: 14px;
  }

  .mm-track{
    gap: 14px;
  }

  .mm-card{
    width: 76vw;
    min-width: 250px;
    max-width: 290px;
    border-radius: 14px;
    transform: scale(.95);
  }

  .mm-card.is-active{
    width: 86vw;
    min-width: 270px;
    max-width: 330px;
  }

  .mm-card__media img{
    height: 200px;
  }

  .mm-card.is-active .mm-card__media img{
    height: 235px;
  }

  .mm-card__caption{
    padding-top: 12px;
    font-size: 18px;
  }

  .mm-nav{
    margin-top: 16px;
    gap: 10px;
  }

  .mm-nav__btn{
    width: 44px;
    height: 44px;
  }

  .mm-nav__btn span{
    font-size: 22px;
  }
}

/* 超小屏再兜底 */
@media (max-width: 390px){
  .mm-card{
    width: 74vw;
    min-width: 235px;
  }

  .mm-card.is-active{
    width: 88vw;
    min-width: 255px;
  }

  .mm-card__media img{
    height: 190px;
  }

  .mm-card.is-active .mm-card__media img{
    height: 220px;
  }

  .mm-card__caption{
    font-size: 17px;
  }
}