.join-intro { text-align:center; margin-bottom:64px; }
.join-intro h2 { font-size:32px; font-weight:700; color:#333; margin:0 0 16px; letter-spacing:-0.01em; }
.join-intro p { font-size:15px; color:#777; line-height:1.9; max-width:720px; margin:0 auto; }

.join-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:72px; }
.join-stat { background:#fff; border:1px solid #eee; border-radius:2px; padding:32px 20px; text-align:center; transition:all .35s ease; }
.join-stat:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.08); border-color:#E02B2B; }
.join-stat-num { font-size:36px; font-weight:800; color:#666; line-height:1; margin-bottom:8px; }
.join-stat-label { font-size:13px; color:#999; }

.join-filter { display:flex; gap:12px; margin-bottom:40px; flex-wrap:wrap; }
.join-filter-btn { padding:10px 24px; border:1px solid #e0e0e0; border-radius:999px; background:#fff; font-size:14px; color:#555; cursor:pointer; transition:all .3s ease; }
.join-filter-btn:hover, .join-filter-btn.active { background:#E02B2B; color:#fff; border-color:#E02B2B; }

.job-list { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.job-card { background:#fff; border:1px solid #eee; border-radius:2px; padding:28px; transition:all .35s ease; position:relative; overflow:hidden; }

@media(max-width:1023px) {
  .job-list { grid-template-columns:1fr; }
  .job-card { padding:24px; }
  .job-title { font-size:18px; }
  .job-section li { font-size:13px; }
}
.job-card:hover { box-shadow:0 16px 48px rgba(0,0,0,.08); border-color:#ddd; transform:translateY(-2px); }
.job-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.job-title-wrap { flex:1; }
.job-title { font-size:22px; font-weight:700; color:#333; margin:0 0 8px; }
.job-dept { display:inline-block; font-size:12px; color:#E02B2B; background:#FFF0F0; padding:4px 14px; border-radius:999px; font-weight:600; }
.job-tags { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.job-tag { font-size:12px; color:#777; background:#f8f8f8; padding:6px 14px; border-radius:2px; border:1px solid #f0f0f0; }

.job-section { margin-bottom:20px; }
.job-section h4 { font-size:14px; font-weight:700; color:#333; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.job-section h4::before { content:''; width:6px; height:6px; border-radius:50%; background:#E02B2B; }
.job-section ul { margin:0; padding:0; list-style:none; }
.job-section li { font-size:13.5px; color:#777; line-height:2; padding-left:14px; position:relative; }
.job-section li::before { content:'·'; position:absolute; left:0; color:#ccc; font-weight:bold; }

.join-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:64px; }
.benefit-card { background:#fff; border:1px solid #e0e0e0; border-radius:2px; padding:28px; text-align:center; transition:all .35s ease; }
.benefit-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,.08); border-color:#ccc; }

.benefit-card h4 { font-size:16px; font-weight:700; color:#333; margin:0 0 8px; }
.benefit-card p { font-size:13px; color:#888; line-height:1.8; margin:0; }

.join-contact { background:#fff; border:1px solid #e0e0e0; border-radius:2px; padding:48px 40px; margin-top:64px; text-align:center; }
.join-contact h3 { font-size:24px; font-weight:700; color:#333; margin:0 0 12px; }
.join-contact p { font-size:14px; color:#777; margin:0 auto 24px; max-width:640px; line-height:1.9; }
.join-contact-email { font-size:18px; font-weight:700; color:#E02B2B; }

@media(max-width:1023px) {
  .join-stats { grid-template-columns:repeat(2,1fr); }
  .join-benefits { grid-template-columns:1fr; }
  .job-header { flex-direction:column; }
  .job-card { padding:24px; }
}


/* 抖动动画 */



/* 招聘卡片hover效果 */
.job-card:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  border-color:#E02B2B;
}

/* 福利卡片hover效果 */
.benefit-card:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(0,0,0,.08);
  border-color:#E02B2B;
}

/* 底部联系区域hover效果 */
.join-contact {
  transition: all .35s ease;
}
.join-contact:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(0,0,0,.08);
  border-color:#E02B2B;
}

/* 福利图标：无背景框，36px 定宽，按原始比例自适应 */
.icon-box { width:36px; margin:0 auto 16px; flex-shrink:0; transition:transform .35s ease; }
.icon-box img { width:36px; height:auto; display:block; }
.icon-box:hover { transform:scale(1.12); }