/* === Recruitment 页面：首屏大图 / 企业文化轮播 / 三卡片 / 底部结尾大图 ====== */
/* 依赖 top.asp 的全局：.wrap 宽度、:root 变量（--brand/--shadow）等 */

/* -------------------------------------------------------------------------- */
.main{
  max-width: 1550px;
  margin:0 auto;     /* 关键：居中 */
  width:100%;        /* 防止小于 max-width 时不撑开 */
}
/* 通用：按钮 */
.btn{
  display:inline-block;
  padding:12px 22px;
  background:#3388ff;
  color:#fff;
  border-radius:2px;
  font-weight:600;
  text-decoration:none;
}
.btn:hover{ filter:brightness(.95); }

/* -------------------------------------------------------------------------- */
/* 1) 首屏大图 hero（如图 532px 高） */
.hero{
  width:100%;
  height:532px;
  position:relative;
  overflow:hidden;
  background:#000;
}
.hero .hero-bg{
  position:absolute; inset:0;
  background:center/cover no-repeat;
}
.hero .hero-mask{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.hero .wrap{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
}
.hero .hero-content{
  width:520px;
  color:#fff;
  padding-left:30px;
}
.hero h1{
  margin:0 0 10px;
  font-size:44px;
  line-height:1.25;
  font-weight:800;
}
.hero p{
  margin:0 0 24px;
  font-size:18px;
  opacity:.95;
}

/* -------------------------------------------------------------------------- */
/* 2) 企业文化轮播（紧贴 hero，下方圆点，左右箭头） */
.culture{
  padding:0;
  background:#fff;
}
/* 如图：轮播区域宽度跟 wrap 保持一致，但无额外内边距 */
.culture > .wrap{
  padding:0;
}

.culture-swiper{
  position:relative;
  width:100%;
}

.culture-viewport{
  overflow:hidden;
  border-radius:0; /* 如图直角 */
}

.culture-track{
  display:flex;
  will-change:transform;
  transform:translate3d(0,0,0);
}

.culture-slide{
  flex:0 0 100%;
  background:#f3f5f7;
}

.culture-slide img{
  display:block;
  width:100%;
  height:532px;         /* 如图“价值观”那块大约这个高度感 */
  object-fit:cover;
}

/* 左右箭头（如图浮在图片左右中间） */
.culture-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:0;
  border-radius:8px;
  cursor:pointer;
  background:rgba(0,0,0,.28);
  transition:background .15s ease, opacity .15s ease;
  opacity:.9;
}
.culture-arrow:hover{ background:rgba(0,0,0,.42); opacity:1; }
.culture-arrow.prev{ left:12px; }
.culture-arrow.next{ right:12px; }

.culture-arrow::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
}
.culture-arrow.prev::before{ transform:translate(-40%,-50%) rotate(135deg); }
.culture-arrow.next::before{ transform:translate(-60%,-50%) rotate(-45deg); }

/* 底部三点（如图位于轮播下边缘） */
.culture-dots{
  position:absolute;
  left:0; right:0;
  bottom:10px;
  display:flex;
  justify-content:center;
  gap:10px;
  pointer-events:none;
}
.culture-dot{
  pointer-events:auto;
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.35);
  cursor:pointer;
  padding:0;
}
.culture-dot.is-active{
  background:#fff;
  width:20px;
}

/* -------------------------------------------------------------------------- */
/* 3) 三张卡片入口（标题居中 + 三列卡片） */
.cards{
  padding:44px 0 24px;
  background:#fff;
}
.cards h2{
  text-align:center;
  font-size:30px;
  margin:50px 0 50px;
  /*font-weight:700;*/
  color:#111;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.card{
  display:block;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  border:1px solid #f2f2f2;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
/* 卡片图片：鼠标悬停放大 */
.card .thumb{
  height:auto;
  background:#fff;
  border: 25px solid #ffffff;
  border-radius: 5px;
  overflow: hidden;  /* 放大时不溢出容器 */
}
.card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display: block;              /* 去掉 img 底部空隙 */
  transform: scale(1);
  transition: transform 220ms ease;
  transform-origin: center center;
  border-radius: 5px; 
  overflow: hidden;
  border-radius: 0;     /* 避免双重圆角导致边缘发虚（可选） */
}
/* 悬停放大 */
.card:hover .thumb img{ transform: scale(1.08); }

.card .body{
  padding:14px 16px 16px;
}
.card .title{
  font-weight:800;
  font-size:18px;
  margin:0 0 10px;
  border-left:4px solid var(--brand);
  padding-left:10px;
}


.tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tag{
  font-size:12px;
  line-height:20px;
  padding:2px 8px;
  background:#f2f7ff;
  color:var(--brand);
  border-radius:0;
}

/* -------------------------------------------------------------------------- */
/* 4) 底部大横幅（结尾大图） */
.bottom-banner{
  padding:70px 0 60px;
  background:#fff;
}

.bottom-ending{
  width:100%;
}

.ending-link{
  display:block;
  width:100%;
  border-radius:2px;
  overflow:hidden;
}

.ending-link img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
/* === end ================================================================= */

/* =========================
   recruitment.asp 移动端适配（追加到文件末尾）
   ========================= */

*{ box-sizing: border-box; }
img{ max-width: 100%; height: auto; display: block; }

/* 防止任何区域把页面撑出横向滚动条 */
html, body{ width: 100%; overflow-x: hidden; }

/* 通用容器：PC 保持原宽度，手机加内边距防贴边 */
.wrap{
  width: min(1190px, 100%);
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* ========== 首屏 hero ========== */
.hero{ position: relative; }
.hero-bg{
  background-position: center;
  background-size: cover;
}

/* ========== 企业文化轮播（culture-swiper） ========== */
.culture-viewport{
  width: 100%;
  overflow: hidden;
}

.culture-track{
  display: flex;
  will-change: transform;
}

.culture-slide{
  flex: 0 0 100%;
}

.culture-slide img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 箭头按钮：手机上缩小/可选隐藏 */
@media (max-width: 768px){
  .culture-arrow{
    width: 36px;
    height: 36px;
  }
}

/* ========== 三张卡片入口 cards ========== */
.card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* 卡片缩略图比例更稳定（可选） */
.card .thumb{
  overflow: hidden;
}
.card .thumb img{
  width: 100%;
  height: auto;
  display: block;
}

/* 手机：3列 -> 1列，避免挤压导致显示不全 */
@media (max-width: 900px){
  .card-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px){
  .card-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cards h2{
    font-size: 20px;
    line-height: 1.25;
  }

  .card .title{
    font-size: 16px;
  }

  .card .tags{
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ========== 底部横幅 bottom-banner ========== */
.bottom-banner .ending-link,
.bottom-banner img{
  width: 100%;
  display: block;
}


/* 如果底部图在某些机型左右被裁，保证完整显示（会出现留白时可删掉） */
/*
.bottom-banner img{
  object-fit: contain;
  background: #000;
}
*/