/* ===================================
   加入我们页面样式 - careers.css
   北京颂宸行科技有限公司官网
   =================================== */

.page-banner { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%); margin-top: 80px; overflow: hidden; }
.page-banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1; }
.page-banner-content { position: relative; z-index: 2; text-align: center; color: white; }
.page-banner-content h1 { font-size: 48px; font-weight: bold; margin-bottom: 16px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); }
.page-banner-content p { font-size: 20px; margin-bottom: 24px; opacity: 0.95; }
.breadcrumb { font-size: 16px; color: rgba(255, 255, 255, 0.9); }
.breadcrumb a { color: rgba(255, 255, 255, 0.9); transition: color 0.3s ease; }
.breadcrumb a:hover { color: var(--secondary-color); }
.breadcrumb span { margin: 0 8px; }

.salary-section { padding: 96px 0; }
.salary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 48px; }
.salary-card { background: white; padding: 48px 32px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); text-align: center; transition: all 0.3s ease; }
.salary-card:hover { transform: translateY(-10px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15); }
.salary-icon { font-size: 56px; margin-bottom: 20px; }
.salary-card h3 { font-size: 22px; font-weight: bold; color: var(--primary-color); margin-bottom: 16px; }
.salary-card p { font-size: 15px; line-height: 1.8; color: var(--text-medium); }
.salary-image-wrapper { text-align: center; }
.salary-image { width: 100%; max-width: 900px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); }

.promotion-section { padding: 96px 0; }
.promotion-image-wrapper { text-align: center; margin-bottom: 40px; }
.promotion-image { width: 100%; max-width: 900px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); }
.promotion-desc { max-width: 800px; margin: 0 auto; text-align: center; }
.promotion-desc p { font-size: 16px; line-height: 2; color: white; margin-bottom: 16px; }

.benefits-section { padding: 96px 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 48px; }
.benefit-item { background: white; padding: 40px 32px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); text-align: center; transition: all 0.3s ease; }
.benefit-item:hover { transform: translateY(-8px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15); }
.benefit-icon { font-size: 48px; display: block; margin-bottom: 20px; }
.benefit-item h4 { font-size: 20px; font-weight: bold; color: var(--text-dark); margin-bottom: 12px; }
.benefit-item p { font-size: 15px; line-height: 1.8; color: var(--text-medium); }
.benefits-image-wrapper { text-align: center; }
.benefits-image { width: 100%; max-width: 900px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); }

.join-section { padding: 96px 0; }
.join-box { background: white; padding: 64px 48px; border-radius: 16px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); }
.join-box h2 { font-size: 36px; font-weight: bold; color: var(--primary-color); margin-bottom: 16px; }
.join-box p { font-size: 18px; color: var(--text-medium); margin-bottom: 32px; }
.join-info { background: var(--bg-light); padding: 32px; border-radius: 12px; margin-bottom: 32px; text-align: left; }
.join-info p { font-size: 16px; line-height: 2; color: var(--text-dark); margin-bottom: 12px; display: flex; align-items: center; }
.join-icon { font-size: 20px; margin-right: 12px; }
.join-info strong { color: var(--primary-color); font-weight: 600; }
.join-buttons { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.join-buttons .btn { padding: 16px 48px; font-size: 18px; }

@media (max-width: 1200px) {
    .salary-grid, .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .page-banner { height: 300px; }
    .page-banner-content h1 { font-size: 36px; }
    .page-banner-content p { font-size: 18px; }
}

@media (max-width: 768px) {
    .page-banner { height: 250px; margin-top: 64px; }
    .page-banner-content h1 { font-size: 28px; }
    .page-banner-content p { font-size: 16px; }
    .salary-grid, .benefits-grid { grid-template-columns: 1fr; gap: 24px; }
    .salary-card, .benefit-item { padding: 32px 24px; }
    .salary-icon, .benefit-icon { font-size: 40px; }
    .join-box { padding: 48px 32px; }
    .join-box h2 { font-size: 28px; }
    .join-box p { font-size: 16px; }
    .join-info { padding: 24px; }
    .join-info p { flex-direction: column; align-items: flex-start; gap: 8px; }
    .join-buttons { flex-direction: column; align-items: center; }
    .join-buttons .btn { width: 100%; max-width: 300px; }
}