/* 响应式样式 */

/* 平板端 (1024px以下) */
@media screen and (max-width: 1024px) {
  .container {
    max-width: 100%;
    padding: 0 30px;
  }

  /* 导航栏 */
  .nav-search {
    width: 180px;
  }

  .search-input {
    width: 180px;
  }

  .nav-icons {
    gap: 8px;
  }

  .nav-icon-btn {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Banner */
  .banner {
    min-height: 600px;
  }

  .banner-title {
    font-size: 42px;
  }

  /* 产品区域 */
  .section-title {
    font-size: 30px;
  }

  .section-subtitle {
    font-size: 13px;
  }

  /* 特点区域 */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  /* 虚位以待 */
  .placeholder-boxes {
    flex-wrap: wrap;
  }

  .placeholder-box {
    width: calc(50% - 12px);
  }

  /* 页脚 */
  .footer-content {
    flex-direction: column;
    gap: 35px;
  }

  .footer-right {
    gap: 35px;
  }
}

/* 移动端 (768px以下) */
@media screen and (max-width: 768px) {
  /* 防止横向滚动 - 只在移动端应用 */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  html {
    font-size: 14px; /* 基准字体，用于rem计算 */
  }

  .container {
    padding: 0 1.43rem; /* 20px / 14px = 1.43rem */
    width: 100%;
    max-width: 100%;
  }

  /* 导航栏 */
  .hamburger-menu {
    display: flex;
  }

  .nav-search,
  .nav-icons {
    display: none;
  }

  .nav-list {
    display: none;
    position: fixed;
    top: 5.71rem; /* 80px / 14px = 5.71rem */
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    padding: 1.43rem; /* 20px / 14px */
    box-shadow: 0 0.29rem 0.86rem rgba(0, 0, 0, 0.15); /* 4px, 12px */
    gap: 0;
    z-index: 99;
  }

  .nav-list li {
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
  }

  .nav-list li:last-child {
    border-bottom: none;
  }

  .nav-list a {
    display: block;
    padding: 1.07rem 0.71rem; /* 15px, 10px */
    width: 100%;
    color: #000000 !important;
    font-weight: 500;
  }

  .nav-list a.active::after {
    display: none;
  }

  .nav-list a.active {
    color: #1a73e8;
    background-color: rgba(26, 115, 232, 0.08);
  }

  .nav-list.active {
    display: flex;
  }

  .hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(0.57rem, 0.57rem); /* 8px */
  }

  .hamburger-menu.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(0.57rem, -0.57rem); /* 8px */
  }

  /* Banner */
  .banner {
    min-height: 39.29rem; /* 550px / 14px */
    overflow: hidden;
  }

  .banner-content {
    max-width: 100%;
    text-align: center;
  }

  .banner-title {
    font-size: 2.57rem; /* 36px / 14px */
  }

  .banner-subtitle {
    font-size: 0.93rem; /* 13px / 14px */
  }

  .banner-desc {
    font-size: 1rem; /* 14px / 14px */
  }

  .banner-btn {
    padding: 0.86rem 2.5rem; /* 12px, 35px */
    margin: 0 auto; /* 居中显示 */
  }

  /* 产品区域 */
  .products-section {
    overflow: hidden;
    padding: 4.29rem 1.43rem; /* 60px, 20px */
  }

  .section-header {
    margin-bottom: 2.86rem; /* 40px */
  }

  .section-title {
    font-size: 1.86rem; /* 26px / 14px */
  }

  .section-subtitle {
    font-size: 0.93rem; /* 13px / 14px */
  }

  .products-slider-wrapper {
    flex-direction: column;
    gap: 0;
    padding: 0 1.07rem; /* 15px */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .products-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .swiper-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 1.79rem 0 3.21rem; /* 25px, 45px */
  }

  .slider-btn {
    display: none;
  }

  .product-card {
    width: 100%;
  }

  .product-image {
    height: 20rem; /* 280px / 14px */
  }

  .product-icon {
    width: 3.57rem; /* 50px / 14px */
    height: 3.57rem;
    top: 1.43rem; /* 20px */
    left: 1.43rem;
  }

  .product-info {
    padding: 1.57rem; /* 22px / 14px */
  }

  .product-name {
    font-size: 1.21rem; /* 17px / 14px */
  }

  .product-desc {
    font-size: 0.86rem; /* 12px / 14px */
  }

  /* 特点区域 */
  .features-section {
    min-height: auto;
    padding: 4.29rem 0; /* 60px / 14px */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .features-bg {
    width: 100%;
    max-width: 100%;
  }

  .section-title-white {
    font-size: 1.86rem; /* 26px / 14px */
  }

  .section-subtitle-white {
    font-size: 0.93rem; /* 13px / 14px */
    margin-bottom: 2.86rem; /* 40px */
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 1.43rem; /* 20px */
    width: 100%;
    max-width: 100%;
  }

  .feature-card {
    width: 100%;
    max-width: 100%;
    position: relative;
    height: 50vh;
    max-height: 35.71rem; /* 500px / 14px */
    min-height: 25rem; /* 350px / 14px */
    display: flex;
    align-items: center;
    margin-bottom: 0;
  }

  .feature-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .feature-card-bg img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    max-height: 100%;
  }

  .feature-card-bg .bg-white {
    height: 38vh;
  }

  .feature-card-bg .bg-black {
    height: 42vh;
  }

  .feature-card-bg .bg-white,
  .feature-card-bg .bg-black {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .feature-content {
    padding: 3.57rem 2.14rem; /* 50px, 30px */
    position: relative;
    z-index: 3;
    width: 100%;
  }

  .feature-icon-box {
    width: 5rem; /* 70px / 14px */
    height: 5rem;
    margin-bottom: 1.43rem; /* 20px */
  }

  .feature-title {
    font-size: 1.29rem; /* 18px / 14px */
  }

  .feature-desc {
    font-size: 0.86rem; /* 12px / 14px */
  }

  /* 虚位以待 */
  .placeholder-section {
    padding: 4.29rem 0; /* 60px / 14px */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .placeholder-section img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .placeholder-title {
    font-size: 1.86rem; /* 26px / 14px */
    margin-bottom: 2.5rem; /* 35px */
  }

  .placeholder-boxes {
    flex-direction: column;
    align-items: center;
    gap: 1.43rem; /* 20px */
    width: 100%;
    max-width: 100%;
  }

  .placeholder-box {
    width: 100%;
    max-width: 21.43rem; /* 300px / 14px */
    height: 12.86rem; /* 180px / 14px */
  }

  .placeholder-subtitle {
    font-size: 1.43rem; /* 20px / 14px */
  }

  /* 页脚 */
  .footer {
    padding: 2.86rem 0 1.43rem; /* 40px, 20px */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .footer-content {
    gap: 2.14rem; /* 30px */
    width: 100%;
    max-width: 100%;
  }

  .footer-left {
    max-width: 100%;
    text-align: center;
  }

  .footer-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.43rem; /* 20px */
  }

  .footer-company-info {
    font-size: 0.86rem; /* 12px / 14px */
    width: 100%;
    max-width: 100%;
    line-height: 1.8;
    margin-bottom: 1.43rem; /* 20px */
    color: rgba(255, 255, 255, 0.7);
  }

  .footer-social {
    justify-content: center;
    margin-bottom: 2.14rem; /* 30px */
  }

  .footer-right {
    width: 100%;
    max-width: 100%;
  }

  .footer-links-group {
    width: 100%;
    max-width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-links-title {
    font-size: 1.07rem; /* 15px / 14px */
    padding: 1.29rem 0; /* 18px */
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
    user-select: none;
  }

  .footer-links-title::after {
    content: "+";
    font-size: 1.43rem; /* 20px / 14px */
    font-weight: 300;
    transition: transform 0.3s ease;
    color: rgba(255, 255, 255, 0.6);
  }

  .footer-links-group.active .footer-links-title::after {
    transform: rotate(45deg);
  }

  .footer-links {
    max-height: 0;
    overflow: hidden;
    transition:
      max-height 0.3s ease,
      padding 0.3s ease;
    padding: 0;
  }

  .footer-links-group.active .footer-links {
    max-height: 21.43rem; /* 300px / 14px */
    padding-bottom: 1.07rem; /* 15px */
  }

  .footer-links a {
    font-size: 0.93rem; /* 13px / 14px */
    padding: 0.57rem 0; /* 8px */
    display: block;
    color: rgba(255, 255, 255, 0.6);
    transition:
      color 0.3s ease,
      padding-left 0.3s ease;
  }

  .footer-links a:hover {
    color: rgba(255, 255, 255, 0.9);
    padding-left: 0.36rem; /* 5px */
  }

  .footer-bottom {
    padding-top: 1.43rem; /* 20px */
    width: 100%;
    max-width: 100%;
  }

  .footer-copyright {
    font-size: 0.79rem; /* 11px / 14px */
  }
}

/* 小屏幕移动端 (480px以下) */
@media screen and (max-width: 480px) {
  .container {
    padding: 0 1.07rem; /* 15px / 14px */
    width: 100%;
    max-width: 100%;
  }

  /* 导航栏 */
  .header {
    height: 5rem; /* 70px / 14px */
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.71rem 0; /* 10px / 14px */
  }

  .logo img {
    height: 2.71rem; /* 38px / 14px */
  }

  .nav-list {
    top: 5rem; /* 70px */
  }

  /* Banner */
  .banner {
    min-height: 35.71rem; /* 500px / 14px */
  }

  .banner-title {
    font-size: 2.14rem; /* 30px / 14px */
  }

  .banner-subtitle {
    font-size: 0.86rem; /* 12px / 14px */
  }

  .banner-desc {
    font-size: 0.93rem; /* 13px / 14px */
  }

  .banner-btn {
    padding: 0.71rem 2rem; /* 10px, 28px */
    font-size: 1rem; /* 14px / 14px */
  }

  /* 产品区域 */
  .section-title {
    font-size: 1.71rem; /* 24px / 14px */
  }

  .section-subtitle {
    font-size: 0.86rem; /* 12px / 14px */
  }

  .product-image {
    height: 17.14rem; /* 240px / 14px */
  }

  .product-icon {
    width: 3.21rem; /* 45px / 14px */
    height: 3.21rem;
    top: 1.07rem; /* 15px */
    left: 1.07rem;
  }

  .product-info {
    padding: 1.43rem; /* 20px / 14px */
  }

  .product-name {
    font-size: 1.14rem; /* 16px / 14px */
  }

  .product-link {
    font-size: 0.93rem; /* 13px / 14px */
    margin-top: 0.86rem; /* 12px */
  }

  /* 特点区域 */
  .section-title-white {
    font-size: 1.71rem; /* 24px / 14px */
  }

  .section-subtitle-white {
    font-size: 0.86rem; /* 12px / 14px */
  }

  .feature-content {
    padding: 2.5rem 1.43rem; /* 35px, 20px */
  }

  .feature-icon-box {
    width: 4.64rem; /* 65px / 14px */
    height: 4.64rem;
  }

  .feature-icon-box img {
    width: 2.86rem; /* 40px / 14px */
    height: 2.86rem;
  }

  .feature-title {
    font-size: 1.21rem; /* 17px / 14px */
  }

  .feature-desc {
    font-size: 0.86rem; /* 12px / 14px */
  }

  /* 虚位以待 */
  .placeholder-title {
    font-size: 1.71rem; /* 24px / 14px */
  }

  .placeholder-box {
    height: 11.43rem; /* 160px / 14px */
  }

  .placeholder-subtitle {
    font-size: 1.29rem; /* 18px / 14px */
  }

  /* 页脚 */
  .footer-company-info {
    font-size: 0.86rem; /* 12px / 14px */
  }

  .social-link {
    width: 2.14rem; /* 30px / 14px */
    height: 2.14rem;
  }

  .social-link img {
    width: 1.14rem; /* 16px / 14px */
    height: 1.14rem;
  }

  .footer-links-title {
    font-size: 0.93rem; /* 13px / 14px */
  }

  .footer-links a {
    font-size: 0.86rem; /* 12px / 14px */
  }

  .footer-copyright {
    font-size: 0.71rem; /* 10px / 14px */
  }
}


/* 产品页面响应式样式 */

/* 平板端 */
@media screen and (max-width: 1024px) {
  /* 产品Banner */
  .products-banner {
    height: 350px;
  }

  /* 产品布局 */
  .products-layout {
    flex-direction: column;
  }

  .products-sidebar {
    width: 100%;
    margin-bottom: 30px;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* 移动端 */
@media screen and (max-width: 768px) {
  /* 产品Banner */
  .products-banner {
    height: 250px;
  }

  /* 产品内容区域 */
  .products-content-section {
    padding: 40px 0 60px;
  }

  /* 侧边栏 */
  .sidebar-title {
    font-size: 16px;
    padding: 16px 20px;
  }

  .sidebar-menu-link {
    padding: 14px 20px;
    font-size: 14px;
  }

  .sidebar-submenu a {
    padding: 10px 20px 10px 40px;
    font-size: 13px;
  }

  /* 产品网格 */
  .products-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .product-card-image {
    height: 200px;
  }

  .product-card-content {
    padding: 20px;
  }

  .product-card-model {
    font-size: 18px;
  }

  .product-card-desc {
    font-size: 13px;
    min-height: auto;
  }

  /* 分页器 */
  .pagination {
    gap: 8px;
  }

  .pagination-btn,
  .pagination-number {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

/* 产品详情页响应式 - 平板端 */
@media screen and (max-width: 1024px) {
  .product-detail-layout {
    gap: 20px;
  }

  .product-detail-grid {
    gap: 40px;
  }

  .product-model {
    font-size: 28px;
  }

  .product-subtitle {
    font-size: 16px;
  }

  .related-products-grid {
    grid-template-columns: 1fr;
  }
}

/* 产品详情页响应式 - 移动端 */
@media screen and (max-width: 768px) {
  /* Banner */
  .products-banner {
    height: 30vh;
  }

  .banner-title {
    font-size: 32px;
  }

  .banner-subtitle {
    font-size: 14px;
  }

  /* 面包屑导航 */
  .breadcrumb {
    font-size: 12px;
    gap: 8px;
    margin-bottom: 20px;
  }

  /* 产品详情布局 */
  .product-detail-content-section {
    padding: 20px 0 40px;
  }

  .product-detail-layout {
    flex-direction: column;
    gap: 20px;
  }

  /* 左侧边栏 */
  .products-sidebar {
    width: 100%;
  }

  /* 产品详情卡片 */
  .product-detail-card {
    padding: 20px;
  }

  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* 产品图片 */
  .product-image-main {
    height: 300px;
  }

  .product-thumb {
    width: 70px;
    height: 70px;
  }

  /* 产品信息 */
  .product-header {
    margin-bottom: 15px;
  }

  .product-category {
    font-size: 18px;
  }

  .product-model {
    font-size: 24px;
  }

  .product-subtitle {
    font-size: 14px;
  }

  .product-description {
    font-size: 14px;
    margin-bottom: 20px;
  }

  /* 操作按钮 */
  .product-actions {
    flex-direction: column;
    gap: 12px;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

  /* 产品特性 */
  .product-features {
    flex-direction: column;
    gap: 15px;
    padding-top: 20px;
  }

  .feature-icon {
    width: 50px;
    height: 50px;
  }

  /* Tab切换 */
  .product-tabs {
    margin-bottom: 15px;
  }

  .tabs-header {
    overflow-x: auto;
  }

  .tab-btn {
    padding: 16px 20px;
    font-size: 14px;
    white-space: nowrap;
  }

  .tabs-content {
    padding: 20px;
  }

  .tab-parameters-table td {
    padding: 12px 10px;
    font-size: 14px;
  }

  .tab-parameters-table td:first-child {
    width: 100px;
  }

  /* 相关产品 */
  .related-products {
    padding: 20px;
  }

  .related-title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .related-products-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .related-product-image {
    height: 200px;
  }

  .related-product-content {
    padding: 20px;
  }

  .related-product-model {
    font-size: 20px;
  }
}

/* 技术支持页面响应式 - 平板端 */
@media screen and (max-width: 1024px) {
  .contact-grid {
    gap: 20px;
  }

  .contact-card {
    padding: 30px;
  }
}

/* 技术支持页面响应式 - 移动端 */
@media screen and (max-width: 768px) {
  /* Banner */
  .support-banner {
    height: 100vh;
    min-height: 500px;
  }

  .support-banner .banner-content {
    text-align: center;
    max-width: 100%;
  }

  .support-banner .banner-subtitle {
    font-size: 12px;
    margin-bottom: 15px;
  }

  .support-banner .banner-title {
    font-size: 36px;
    margin-bottom: 25px;
  }

  .support-banner .banner-info {
    margin-bottom: 30px;
  }

  .support-banner .banner-phone,
  .support-banner .banner-time {
    font-size: 14px;
  }

  .support-banner .banner-qrcode {
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }

  /* 联系方式区域 */
  .contact-section {
    padding: 40px 0;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contact-card {
    flex-direction: column;
    padding: 25px;
    text-align: center;
  }

  .contact-card:last-child {
    grid-column: 1;
    max-width: 100%;
  }

  .contact-info {
    margin-bottom: 20px;
  }

  .contact-title {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .contact-item {
    font-size: 13px;
  }

  .contact-qrcode {
    margin-left: 0;
    width: 90px;
    height: 90px;
  }
}

/* 小屏幕移动端 */
@media screen and (max-width: 480px) {
  .support-banner .banner-title {
    font-size: 30px;
  }

  .support-banner .banner-qrcode {
    width: 90px;
    height: 90px;
  }

  .contact-card {
    padding: 20px;
  }

  .contact-title {
    font-size: 16px;
  }

  .contact-item {
    font-size: 12px;
  }

  .contact-qrcode {
    width: 80px;
    height: 80px;
  }
}

/* 关于我们页面响应式 - 平板端 */
@media screen and (max-width: 1024px) {
  .about-banner {
    min-height: 400px;
    padding: 100px 0 60px;
  }

  .about-banner .banner-title {
    font-size: 40px;
  }

  .company-info-layout {
    gap: 40px;
  }

  .info-decoration {
    width: 300px;
    height: 200px;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .honors-grid {
    gap: 20px;
  }

  .honor-card {
    height: 300px;
  }

  .qualifications-slider-wrapper {
    gap: 20px;
  }
}

/* 关于我们页面响应式 - 移动端 */
@media screen and (max-width: 768px) {
  /* Banner */
  .about-banner {
    min-height: 350px;
    padding: 80px 0 40px;
  }

  .about-banner::after {
    width: 70%;
    opacity: 0.5;
  }

  .about-banner .banner-subtitle {
    font-size: 12px;
  }

  .about-banner .banner-title {
    font-size: 32px;
    margin-bottom: 15px;
  }

  .about-banner .banner-desc {
    font-size: 14px;
  }

  /* 企业信息 */
  .company-info-section {
    padding: 40px 0;
  }

  .company-info-layout {
    flex-direction: column;
    gap: 30px;
  }

  .company-info-card {
    max-width: 100%;
    padding: 30px;
  }

  .info-title {
    font-size: 24px;
  }

  .info-text {
    font-size: 14px;
  }

  .info-decoration {
    width: 100%;
    height: 180px;
  }

  /* 核心价值观 */
  .core-values-section {
    padding: 40px 0;
  }

  .section-header {
    margin-bottom: 30px;
  }

  .section-title {
    font-size: 26px;
  }

  .section-desc {
    font-size: 14px;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .value-card {
    padding: 30px 20px;
    min-height: 160px;
  }

  .value-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
  }

  .value-name {
    font-size: 16px;
  }

  /* 荣誉展示 */
  .honors-section {
    padding: 40px 0;
  }

  .honors-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .honor-card {
    height: 250px;
  }

  .honor-overlay {
    padding: 20px;
  }

  .honor-title {
    font-size: 20px;
  }

  .honor-desc {
    font-size: 13px;
  }

  /* 企业资质 */
  .qualifications-section {
    padding: 40px 0;
  }

  .qualifications-slider-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .slider-btn {
    display: none;
  }

  .qualification-image {
    height: 250px;
  }

  /* 团队展示 */
  .team-section {
    min-height: 400px;
    padding: 40px 0;
  }

  .team-info-card {
    max-width: 100%;
    padding: 30px;
  }

  .team-title {
    font-size: 26px;
  }

  .team-text {
    font-size: 14px;
  }
}

/* 小屏幕移动端 */
@media screen and (max-width: 480px) {
  .about-banner {
    min-height: 300px;
  }

  .about-banner .banner-title {
    font-size: 28px;
  }

  .company-info-card {
    padding: 25px;
  }

  .info-title {
    font-size: 22px;
  }

  .section-title {
    font-size: 24px;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .value-card {
    min-height: 140px;
  }

  .honor-card {
    height: 220px;
  }

  .qualification-image {
    height: 220px;
  }

  .team-info-card {
    padding: 25px;
  }

  .team-title {
    font-size: 24px;
  }
}
