/* 只针对电脑端和手机端进行优化 */

/* 手机设备端优化 (max-width: 767px) */
@media screen and (max-width: 767px) {
    /* 调整容器宽度和内边距 */
    .container {
        max-width: 100%;
        padding: 0 15px;
    }

    /* 调整字体大小，优化手机端可读性 */
    body {
        font-size: 14px;
        line-height: 1.6;
    }

    /* 调整标题字体大小 */
    h1 {
        font-size: 22px;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    h3 {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    h4 {
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    /* 调整段落样式 */
    p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    /* 调整链接样式 */
    a {
        font-size: 14px;
    }

    /* 调整列表样式 */
    ul, ol {
        margin-bottom: 15px;
        padding-left: 20px;
    }

    li {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 8px;
    }

    /* 调整按钮样式 */
    .btn {
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 8px;
    }

    /* 调整容器宽度 */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* 调整页面头部 */
    .page-header {
        padding: 30px 0;
        text-align: center;
    }

    /* 调整主要内容区块 */
    section {
        padding: 40px 0;
    }

    /* 调整图片样式 */
    img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

    /* 调整卡片样式 */
    .category-card,
    .solution-card,
    .product-list-item,
    .team-card,
    .news-card,
    .training-card,
    .policy-card {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* 调整培训中心卡片布局，改为单列排列 */
    .training-grid {
        display: block;
    }

    /* 调整培训卡片样式 */
    .training-card {
        margin-bottom: 20px;
        width: 100%;
    }

    /* 调整培训卡片图片样式 */
    .training-image {
        width: 100%;
        height: auto;
    }

    /* 调整培训卡片图片高度 */
    .training-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* 调整培训卡片内容样式 */
    .training-content {
        padding: 20px;
    }

    /* 调整培训卡片标题大小 */
    .training-content h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* 调整培训卡片描述大小 */
    .training-content p {
        font-size: 13px;
        margin-bottom: 12px;
        line-height: 1.5;
    }

    /* 调整培训卡片特性列表 */
    .training-features {
        margin-bottom: 12px;
        padding-left: 20px;
    }

    /* 调整培训卡片特性列表项 */
    .training-features li {
        font-size: 13px;
        margin-bottom: 6px;
        line-height: 1.5;
    }

    /* 调整培训卡片信息样式 */
    .training-info {
        font-size: 13px;
    }

    /* 调整政策卡片布局，改为单列排列 */
    .policy-grid {
        display: block;
    }

    /* 调整政策卡片样式 */
    .policy-card {
        margin-bottom: 15px;
        width: 100%;
        padding: 20px;
    }

    /* 调整政策卡片标题大小 */
    .policy-card h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    /* 调整政策卡片描述大小 */
    .policy-card p {
        font-size: 13px;
        margin-bottom: 0;
        line-height: 1.5;
    }

    /* 调整联系我们页面卡片布局，改为单列排列 */
    .contact-info {
        display: block;
    }

    /* 调整联系卡片样式 */
    .info-card {
        margin-bottom: 20px;
        width: 100%;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
        background-color: var(--white);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* 调整联系卡片图标大小 */
    .info-icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
    }

    /* 调整联系卡片图标图片 */
    .info-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* 调整联系卡片内容样式 */
    .info-content {
        flex: 1;
    }

    /* 调整联系卡片标题大小 */
    .info-content h3 {
        font-size: 16px;
        margin-bottom: 8px;
        color: var(--primary-red);
    }

    /* 调整联系卡片文本大小 */
    .info-content p {
        font-size: 13px;
        margin-bottom: 5px;
        line-height: 1.5;
    }

    /* 调整联系卡片文本最后一行没有下边距 */
    .info-content p:last-child {
        margin-bottom: 0;
    }

    /* 调整地图高度，适应手机屏幕 */
    #map {
        height: 300px !important;
    }

    

    

    /* 调整主要内容区块的内边距 */
    .about-section,
    .mission-section,
    .history-section,
    .team-section,
    .news-section,
    .products-section,
    .product-detail-section,
    .solutions-section {
        padding: 30px 0;
    }

    /* 调整网格布局为单列，确保内容不溢出 */
    .about-intro,
    .mission-grid,
    .timeline,
    .team-grid,
    .qualification-grid,
    .news-grid,
    .product-list,
    .product-detail-wrapper {
        display: block;
    }

    /* 调整元素间距 */
    .intro-image,
    .intro-content,
    .mission-card,
    .timeline-item,
    .team-card,
    .qualification-item,
    .news-card,
    .product-list-item,
    .product-images,
    .product-detail-content,
    .feature-card,
    .solution-card,
    .category-card {
        margin-bottom: 30px;
        width: 100%;
    }

    /* 调整首页产品中心的卡片布局，改为单列排列 */
    .category-grid {
        display: block;
    }

    /* 调整产品中心卡片的样式 */
    .category-card {
        margin-bottom: 15px;
        width: 100%;
    }

    /* 调整产品中心卡片图片的高度，减少图片高度 */
    .category-image {
        height: 150px;
    }

    /* 调整产品中心卡片内容，使文字更紧凑 */
    .category-content h3 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .category-subtitle {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .category-description {
        font-size: 12px;
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .category-content .btn {
        padding: 8px 16px;
        font-size: 13px;
    }

    /* 调整轮播图高度 */
    .banner-carousel {
        height: 400px !important;
    }

    /* 调整首页特性卡片 */
    .feature-card {
        padding: 20px;
    }

    /* 调整首页解决方案卡片布局，改为单列排列 */
    .solution-cards {
        display: block;
    }

    /* 调整解决方案页面卡片布局，改为单列排列 */
    .solutions-grid {
        display: block;
    }

    /* 调整解决方案卡片的样式 */
    .solution-card {
        margin-bottom: 15px;
        width: 100%;
        padding: 0;
    }

    /* 调整解决方案卡片图片的样式，减少图片高度 */
    .solution-image {
        width: 100%;
        height: 150px;
        overflow: hidden;
    }

    /* 调整解决方案卡片图片的高度 */
    .solution-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 调整解决方案卡片内容的样式，使文字更紧凑 */
    .solution-content {
        padding: 15px;
    }

    .solution-content h2 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .solution-content h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .solution-content p {
        font-size: 12px;
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .solution-features {
        margin-bottom: 12px;
        padding-left: 20px;
    }

    .solution-features li {
        font-size: 12px;
        margin-bottom: 6px;
        line-height: 1.4;
    }

    .solution-content .btn {
        padding: 8px 16px;
        font-size: 13px;
    }

    /* 调整首页横幅内容 */
    .banner-content {
        text-align: center;
        padding: 0 20px;
    }

    /* 调整首页横幅标题 */
    .banner-content h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    /* 调整首页横幅描述 */
    .banner-content p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* 调整首页按钮 */
    .banner-content .btn {
        display: block;
        margin: 0 auto;
        max-width: 200px;
    }

    /* 调整首页优势部分为单列布局 */
    .advantages {
        padding: 30px 0;
    }
    
    .advantages .container {
        display: block;
    }
    
    .advantage-card {
        margin-bottom: 30px;
        width: 100%;
    }

    /* 调整时间线样式，确保在手机上显示正常 */
    .timeline::before {
        left: 30px;
    }

    /* 调整时间线年份圆圈大小，优化手机端排版 */
    .timeline-year {
        width: 60px;
        height: 60px;
        font-size: 16px;
        position: absolute;
        left: 0;
        top: 0;
    }

    /* 调整时间线项目样式 */
    .timeline-item {
        flex-direction: column !important;
        gap: 15px;
        padding-left: 80px;
        margin-bottom: 30px;
    }

    /* 调整时间线内容样式 */
    .timeline-content {
        padding: 15px;
        margin-left: 0;
    }

    /* 调整时间线内容标题大小 */
    .timeline-content h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    /* 调整时间线内容描述大小 */
    .timeline-content > p {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 0;
    }

    /* 手机端导航改为侧边栏 */
    .nav-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--white);
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
        z-index: 1001;
        padding-top: 80px;
        transition: right 0.3s ease-in-out;
    }

    .nav-menu.active {
        right: 0;
    }

    /* 添加侧边栏背景遮罩 */
    .nav-menu.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
        animation: fadeIn 0.3s ease;
    }

    /* 确保导航列表垂直排列 */
    .nav-menu ul {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
    }

    /* 确保下拉菜单默认隐藏，只在需要时显示 */
    .nav-menu .dropdown-menu {
        display: none;
        flex-direction: column;
        gap: 0;
        background-color: var(--light-gray);
        padding: 0;
        margin: 0;
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        width: 100%;
    }

    /* 当父菜单项被点击激活时，显示下拉菜单 */
    .nav-menu > ul > li.active .dropdown-menu {
        display: flex;
    }

    /* 确保所有菜单项都垂直排列 */
    .nav-menu li {
        display: block;
        width: 100%;
    }

    /* 确保所有链接都垂直排列 */
    .nav-menu a {
        display: block;
        width: 100%;
        text-align: left;
    }

    /* 调整导航链接样式 */
    .nav-menu > ul > li {
        display: block;
        width: 100%;
    }

    .nav-menu > ul > li > a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid var(--light-gray);
        text-align: left;
    }

    /* 调整下拉菜单链接样式 */
    .dropdown-menu li {
        display: block;
        width: 100%;
    }

    .dropdown-menu li a {
        display: block;
        padding: 12px 20px 12px 40px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        background-color: var(--light-gray);
        text-align: left;
        font-size: 14px;
    }

    /* 汉堡菜单样式 */
    .hamburger {
        display: flex;
        z-index: 1002;
    }

    /* 动画效果 */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* 调整页脚样式，优化手机端显示 */
    .footer {
        padding: 30px 0;
    }

    .footer .container {
        display: block;
    }

    .footer-column {
        margin-bottom: 25px;
        padding: 0 15px;
    }

    .footer-column h3 {
        font-size: 16px;
        margin-bottom: 15px;
        color: var(--primary-red);
    }

    .footer-column p,
    .footer-column a {
        font-size: 13px;
        line-height: 1.6;
        color: var(--black);
        margin-bottom: 8px;
    }

    .footer-column ul {
        padding-left: 20px;
    }

    .footer-column li {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 8px;
    }

    /* 调整版权信息样式 */
    .footer-bottom {
        padding: 15px 0;
        text-align: center;
        font-size: 12px;
        color: var(--silver);
    }

    /* 调整产品详情页样式 */
    /* 单列布局 */
    .product-detail-wrapper {
        display: block;
    }

    /* 调整详情标签页，使其垂直排列 */
    .detail-tabs {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    /* 手机端隐藏overview-features */
    .overview-features {
        display: none;
    }

    .tab-btn {
        flex: 1;
        min-width: 120px;
        padding: 8px 16px;
        font-size: 14px;
    }

    /* 调整产品图片区域 */
    .product-images {
        margin-bottom: 15px;
    }

    /* 调整主要产品图片 */
    .main-product-image {
        margin-bottom: 10px;
    }

    /* 调整主要产品图片高度 */
    .main-product-image img {
        height: auto;
        object-fit: cover;
    }

    /* 调整额外图片网格 */
    .additional-images {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* 调整额外图片高度 */
    .additional-image-item {
        height: 80px;
    }

    /* 调整额外图片 */
    .additional-image-item img {
        height: 100%;
        object-fit: cover;
    }

    /* 调整产品详情内容 */
    .product-detail-content {
        gap: 15px;
    }

    /* 调整产品标题 */
    .product-title-section h2 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    /* 调整产品标签 */
    .product-badge {
        padding: 4px 12px;
        font-size: 11px;
        margin-bottom: 12px;
    }

    /* 调整标签内容区域 */
    .tab-content {
        padding: 15px 0;
    }

    /* 调整标签内容文本 */
    .tab-content p {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    /* 调整标签内容标题 */
    .tab-content h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    /* 调整标签内容列表 */
    .tab-content ul, .tab-content ol {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 12px;
        padding-left: 20px;
    }

    /* 确保所有标签内容都显示，不需要点击按钮 */
    .tab-content {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }

    /* 调整规格参数表格 */
    .specs-table {
        font-size: 13px;
    }

    .specs-table th,
    .specs-table td {
        padding: 10px 8px;
    }

    /* 调整常见问题 */
    .faq-item {
        margin-bottom: 15px;
    }

    .faq-question {
        font-size: 15px;
        padding: 12px 16px;
    }

    .faq-answer {
        font-size: 13px;
        padding: 12px 16px;
    }

    /* 调整产品列表样式 */
    .category-tabs {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .category-tab {
        padding: 8px 16px;
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* 调整产品列表为单列 */
    .product-list {
        display: block;
        margin-top: 20px;
    }

    .product-list-item {
        margin-bottom: 20px;
        width: 100%;
    }

    /* 调整产品列表图片高度，减少图片高度 */
    .product-list-image {
        height: 150px;
    }

    /* 调整产品列表信息，使文字更紧凑 */
    .product-list-info {
        padding: 15px;
    }

    /* 调整产品列表标题 */
    .product-list-info h4 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    /* 调整产品列表描述 */
    .product-list-info > p {
        font-size: 12px;
        margin-bottom: 10px;
        line-height: 1.4;
    }

    /* 调整产品规格标签 */
    .product-list-specs {
        justify-content: center;
        margin-bottom: 12px;
        gap: 8px;
    }

    /* 调整产品规格标签大小 */
    .product-list-spec {
        padding: 4px 8px;
        font-size: 10px;
    }

    /* 调整产品操作按钮 */
    .product-list-actions {
        justify-content: center;
        margin-top: 12px;
        gap: 8px;
    }

    /* 调整产品操作按钮大小 */
    .product-list-actions .btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* 大屏幕设备端保持默认样式，不添加特殊样式 */
/* 电脑端优化通过默认CSS样式实现 */