/* 联系我们页面样式 */ /* Hero区域 */ .contact-hero { position: relative; width: 100%; height: 60vh; min-height: 400px; overflow: hidden; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } .contact-hero-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .contact-hero-bg .hero-bg-image { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.3; } .contact-hero-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 1; } .hero-logo-section { display: flex; align-items: center; gap: 30px; background: transparent; padding: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; } .hero-logo-icon { flex: 0 0 auto; } .hero-logo-icon img { width: 300px; height: 228px; } .hero-brand { flex: 1; } .brand-title { font-weight: 600; font-size: 138px; color: #EB3D00; text-stroke: 3px #FFFFFF; text-align: left; font-style: normal; text-transform: none; -webkit-text-stroke: 3px #FFFFFF; margin: 0 0 8px 0; line-height: 1.2; } .brand-subtitle { font-weight: 600; font-size: 31px; color: #EB3D00; letter-spacing: 19px; text-align: left; font-style: normal; text-transform: none; margin: 0; } /* 联系信息区域 */ .contact-info { padding: 80px 0; background: #fff; min-height: 60vh; } .contact-title { font-size: 36px; font-weight: bold; color: #333; text-align: center; margin-bottom: 60px; } .contact-items { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 50px; } .contact-item { text-align: center; } .item-title { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 20px; } .item-content { display: flex; align-items: center; justify-content: center; gap: 15px; } .contact-icon { flex: 0 0 auto; width: 40px; height: 40px; background: #fef5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .contact-text { font-size: 20px; color: #666; font-weight: 500; } /* 响应式设计 */ @media (max-width: 992px) { .contact-hero { height: 50vh; min-height: 350px; } .hero-logo-section { flex-direction: column; text-align: center; padding: 0; gap: 15px; background: transparent; border-radius: 0; box-shadow: none; } .hero-logo-icon img { width: 80px; height: 80px; } .brand-title { font-size: 48px; } .brand-subtitle { font-size: 18px; letter-spacing: 1px; } .contact-title { font-size: 28px; } .contact-items { gap: 40px; } .item-title { font-size: 20px; } .contact-text { font-size: 18px; } } @media (max-width: 768px) { .contact-hero { height: 40vh; min-height: 300px; } .hero-logo-section { padding: 0; margin: 0 20px; background: transparent; border-radius: 0; box-shadow: none; } .hero-logo-icon img { width: 60px; height: 60px; } .brand-title { font-size: 36px; } .brand-subtitle { font-size: 16px; letter-spacing: 0.5px; } .contact-info { padding: 60px 0; } .contact-title { font-size: 24px; margin-bottom: 40px; } .contact-items { gap: 30px; padding: 0 20px; } .item-content { flex-direction: column; gap: 10px; } .contact-icon { width: 35px; height: 35px; } .item-title { font-size: 18px; } .contact-text { font-size: 16px; } } @media (max-width: 480px) { .hero-logo-section { padding: 15px 20px; margin: 0 15px; } .brand-title { font-size: 24px; } .brand-subtitle { font-size: 12px; } .contact-title { font-size: 20px; } .item-title { font-size: 16px; } .contact-text { font-size: 14px; } }