/* =====================================================
   移动端页脚优化
   Mobile Footer Optimization
   ===================================================== */

/* =====================================================
   1. 页脚整体优化
   Footer General Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 页脚容器 */
    .footer {
        padding: 30px 15px !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        min-height: auto !important;
    }
    
    /* 页脚内容容器 */
    .footer .container-fluid,
    .footer .bottom_padding {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 页脚列表布局 */
    .footer .list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 25px 12px !important;
    }
    
    .footer .list {
        gap: 20px !important;
    }
}

/* =====================================================
   2. Logo和简介区域优化
   Logo and Description Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* Logo容器 */
    .footer .footIcon {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* Logo图片 */
    .footer .footIcon .logo {
        width: 50% !important;
        max-width: 180px !important;
        min-width: 120px !important;
        height: auto !important;
        margin: 0 auto 15px !important;
        display: block !important;
    }
    
    /* Logo描述 */
    .footer .footIcon .bottom_title {
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #ccc !important;
        padding: 0 10px !important;
        text-align: center !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
    }
}

@media (max-width: 480px) {
    .footer .footIcon .logo {
        width: 60% !important;
        max-width: 150px !important;
    }
    
    .footer .footIcon .bottom_title {
        font-size: 12px !important;
    }
}

/* =====================================================
   3. 导航链接优化
   Navigation Links Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 导航链接容器 */
    .footer .item:first-child {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 15px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
    }
    
    /* 导航链接 */
    .footer .item:first-child a {
        font-size: 14px !important;
        color: #ccc !important;
        text-decoration: none !important;
        padding: 8px 20px !important;
        border-radius: 4px !important;
        transition: all 0.3s ease !important;
        text-align: center !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .footer .item:first-child a:active {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }
    
    .footer .item:first-child a.iconfont {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .footer .item:first-child a {
        font-size: 13px !important;
        padding: 6px 15px !important;
    }
}

/* =====================================================
   4. 联系方式优化
   Contact Information Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 联系方式容器 */
    .footer .item:nth-child(2) {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        padding: 15px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
    }
    
    /* 联系方式项 */
    .footer .item:nth-child(2) .flex_al {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 6px !important;
    }
    
    /* 联系方式图标 */
    .footer .item:nth-child(2) .flex_al img {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        object-fit: contain !important;
    }
    
    /* 联系方式内容 */
    .footer .item:nth-child(2) .flex_al li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    /* 联系方式标题 */
    .footer .item:nth-child(2) .flex_al .mintitle {
        font-size: 12px !important;
        color: #888 !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
    }
    
    /* 联系方式内容文字 */
    .footer .item:nth-child(2) .flex_al span {
        font-size: 14px !important;
        color: #fff !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        word-break: break-word !important;
    }
}

@media (max-width: 480px) {
    .footer .item:nth-child(2) .flex_al {
        padding: 8px !important;
        gap: 8px !important;
    }
    
    .footer .item:nth-child(2) .flex_al img {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
    
    .footer .item:nth-child(2) .flex_al .mintitle {
        font-size: 11px !important;
    }
    
    .footer .item:nth-child(2) .flex_al span {
        font-size: 13px !important;
    }
}

/* =====================================================
   5. 版权信息优化
   Copyright Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 版权信息容器 */
    .footer .bottom {
        margin-top: 30px !important;
        padding: 20px 15px !important;
        text-align: center !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* 版权文字 */
    .footer .bottom {
        font-size: 12px !important;
        line-height: 1.6 !important;
        color: #888 !important;
        word-wrap: break-word !important;
    }
}

@media (max-width: 480px) {
    .footer .bottom {
        padding: 15px 12px !important;
        font-size: 11px !important;
    }
}

/* =====================================================
   6. 页脚间距优化
   Footer Spacing Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 减小页脚内边距 */
    .footer {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    
    /* 减小项目间距 */
    .footer .list > div,
    .footer .list .item {
        margin-bottom: 20px !important;
    }
    
    /* 调整页脚位置 */
    body {
        padding-bottom: 0 !important;
    }
}

/* =====================================================
   7. 触摸优化
   Touch Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 移除点击高亮 */
    .footer a,
    .footer .flex_al {
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* 增大触摸区域 */
    .footer .item:nth-child(2) .flex_al {
        min-height: 44px !important;
    }
    
    .footer .item:first-child a {
        min-height: 44px !important;
    }
    
    /* 触摸反馈 */
    .footer .item:nth-child(2) .flex_al:active,
    .footer .item:first-child a:active {
        background: rgba(255, 255, 255, 0.15) !important;
    }
}

/* =====================================================
   8. 页脚滚动优化
   Footer Scroll Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 页脚内容溢出处理 */
    .footer .list {
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* 长文字换行 */
    .footer .bottom_title,
    .footer .bottom,
    .footer .item:nth-child(2) span {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* =====================================================
   9. 页脚图标优化
   Footer Icon Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 优化图标显示 */
    .footer .item:nth-child(2) .flex_al img {
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        transition: transform 0.3s ease !important;
    }
    
    .footer .item:nth-child(2) .flex_al:active img {
        transform: scale(0.9) !important;
    }
    
    /* 导航图标 */
    .footer .item:first-child a.iconfont {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* =====================================================
   10. 平板特殊优化
   Tablet Special Optimization
   ===================================================== */

@media (min-width: 601px) and (max-width: 768px) {
    /* 页脚布局调整 */
    .footer .list {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
    }
    
    /* Logo大小 */
    .footer .footIcon .logo {
        width: 40% !important;
        max-width: 200px !important;
    }
    
    /* 导航链接布局 */
    .footer .item:first-child {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    .footer .item:first-child a {
        width: auto !important;
        min-width: 80px !important;
    }
    
    /* 联系方式布局 */
    .footer .item:nth-child(2) {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    
    .footer .item:nth-child(2) .flex_al {
        flex: 1 !important;
        max-width: 200px !important;
    }
}

/* =====================================================
   11. 页脚动画优化
   Footer Animation Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 简化动画 */
    .footer .item,
    .footer .footIcon {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================
   12. 页脚背景优化
   Footer Background Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 页脚背景 */
    .footer {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    
    /* 页脚遮罩 */
    .footer::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.3) !important;
        z-index: -1 !important;
    }
}

/* =====================================================
   13. 页脚可访问性优化
   Footer Accessibility Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 焦点样式 */
    .footer a:focus,
    .footer .flex_al:focus {
        outline: 2px solid #0078D7 !important;
        outline-offset: 2px !important;
    }
    
    /* 可读性 */
    .footer .bottom_title,
    .footer .bottom,
    .footer .item:nth-child(2) span {
        color: #ccc !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    }
}

/* =====================================================
   14. 页脚链接优化
   Footer Links Optimization
   ===================================================== */

@media (max-width: 768px) {
    /* 链接样式 */
    .footer a {
        color: #ccc !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
    }
    
    .footer a:active {
        color: #fff !important;
    }
    
    /* 链接悬停（仅在有鼠标时） */
    @media (hover: hover) and (pointer: fine) {
        .footer a:hover {
            color: #fff !important;
        }
    }
}