:root {
  --brand-red: #ec2f2b;
  --ink: #202124;
  --muted: #858995;
  --line: #e8e9ed;
  --surface: #f0f3f5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { width: 100%; overflow-x: hidden; font-size: 16px; }
body { overflow-x: hidden; background: var(--surface); color: var(--ink); font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; }

.header { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; }
.header .content { display: flex; min-height: 68px; align-items: center; justify-content: space-between; padding: 0 40px; background: rgba(240, 7, 45, .92); }
.header .logo_wrap { display: flex; flex: none; align-items: center; }
.header .logo { width: 152px; height: 52px; object-fit: contain; }
.navigation-list { display: flex; align-items: center; }
.navigation-item { position: relative; }
.navigation-item > .text { display: block; padding: 0 18px; color: #fff; font-size: 16px; line-height: 68px; white-space: nowrap; transition: opacity .2s; }
.navigation-item > .text:hover, .navigation-item > .text.hasactive { opacity: .75; }
.navigation-item .arrow { margin-left: 4px; font-size: 10px; opacity: .7; }
.sub-navigation { position: absolute; z-index: 1002; top: 68px; left: 50%; display: none; min-width: 128px; padding: 8px 0; transform: translateX(-50%); border-radius: 6px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.navigation-item:hover .sub-navigation { display: block; }
.sub-navigation-item a { display: block; padding: 0 20px; color: #333; font-size: 14px; line-height: 38px; white-space: nowrap; }
.sub-navigation-item a:hover { background: #f6f7f9; color: var(--brand-red); }

.jobs-page { min-height: 650px; padding: 92px 24px 72px; }
.jobs-panel { max-width: 960px; margin: 0 auto; padding: 26px 24px 14px; background: #fff; }
.jobs-title { margin-bottom: 34px; text-align: center; }
.jobs-title h1 { font-size: 23px; line-height: 34px; letter-spacing: 0; }
.jobs-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 4px; }
.jobs-controls label { color: var(--muted); font-size: 13px; }
.jobs-controls select { min-width: 152px; height: 38px; margin-left: 10px; padding: 0 34px 0 12px; border: 1px solid #d9dce2; border-radius: 2px; background: #fff; color: #555b68; font: inherit; font-size: 13px; }
#jobCount { color: var(--muted); font-size: 13px; }
#jobStatus { min-height: 24px; color: #b24b22; font-size: 13px; line-height: 24px; }
.job-row { padding: 28px 0 24px; border-bottom: 1px solid var(--line); }
.job-row h2 { margin-bottom: 11px; font-size: 19px; font-weight: 500; line-height: 28px; letter-spacing: 0; }
.job-line { display: flex; color: var(--muted); font-size: 13px; line-height: 22px; }
.job-line span + span::before { width: 1px; height: 12px; margin: 0 12px; background: #d9dce2; content: ""; display: inline-block; vertical-align: -1px; }
.job-category { color: #777d88; }
.job-location, .job-contact, .job-date { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 22px; }
.job-contact a { color: #557fcf; }
.job-contact a:hover { color: var(--brand-red); }
.job-details { margin-top: 17px; color: #666b76; font-size: 13px; line-height: 24px; }
.job-details summary { width: max-content; color: #557fcf; cursor: pointer; }
.job-description { margin-top: 12px; padding: 16px 18px; background: #f7f8fa; white-space: pre-wrap; }
.job-empty { padding: 56px 20px; color: var(--muted); text-align: center; }

.footer { padding: 64px 0 0; background: linear-gradient(90deg, #f1072d, #bd0021); }
.foot { display: flex; max-width: 1280px; margin: 0 auto; padding: 0 40px; justify-content: space-between; gap: 60px; flex-wrap: wrap; }
.foot-logo { width: auto; height: 44px; margin-bottom: 28px; }
.group_mart { display: flex; max-width: 364px; flex-wrap: wrap; gap: 20px 28px; }
.mart-item { display: flex; flex-direction: column; align-items: center; }
.foot_img { width: 100px; height: 100px; }
.foot_font { color: rgba(255,255,255,.82); font-size: 12px; line-height: 16px; }
.foot_down { display: block; margin-top: 8px; text-align: center; }
.group_info { display: flex; gap: 72px; }
.info-col { display: flex; flex-direction: column; }
.foot_tit { margin-bottom: 24px; color: #fff; font-size: 18px; font-weight: 700; line-height: 27px; }
.info-col a.foot_font { margin-bottom: 14px; font-size: 14px; line-height: 20px; }
.info-col a.foot_font:hover { color: #fff; text-decoration: underline; }
.font_phone { color: #fff; font-size: 20px; font-weight: 700; }
.foot-bottom { margin-top: 50px; padding: 24px 16px; border-top: 1px solid rgba(255,255,255,.18); text-align: center; }
.foot_company { color: rgba(255,255,255,.66); font-size: 14px; line-height: 22px; }

@media (max-width: 960px) {
  .group_info { gap: 36px; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .jobs-page { padding: 76px 12px 48px; }
  .jobs-panel { padding: 24px 18px 10px; }
  .jobs-title { margin-bottom: 24px; }
  .jobs-title h1 { font-size: 21px; }
  .jobs-controls { align-items: flex-start; flex-direction: column; gap: 10px; }
  .jobs-controls label, .jobs-controls select { width: 100%; margin-left: 0; }
  .job-row { padding: 24px 0 22px; }
  .job-row h2 { font-size: 18px; }
  .footer { padding-top: 48px; }
  .foot { padding: 0 18px; }
  .group_mart { gap: 20px 18px; }
  .group_info { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot_company { font-size: 12px; }
}