/* 页面宽度统一修正CSS文件 */
/* 解决产品页面和新闻页面内容宽度超出导航栏的问题 */

/* 全局容器宽度限制 - 与导航栏保持一致 */
.container,
.news-filter-content,
.news-grid,
.news-content,
.p_gridbox,
.main {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* 产品列表页面特定修正 */
.products-banner .container {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 0px !important;
}

/* 面包屑导航宽度统一 */
.breadcrumb {
    width: 100% !important;
}

.breadcrumb-content {
    max-width: 1600px !important;
    margin: 0 auto !important;
    /*padding: 0 20px !important;*/
}

/* 产品网格布局修正 */
.p_gridbox {
    max-width: 1600px !important;
    margin: 0 auto !important;
    /*padding: 0 0px !important;*/
}

/* 产品列表容器 */
.p_list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: flex-start !important;
}

/* 产品项目宽度调整 */
.p_loopitem {
    flex: 0 0 calc(33.333% - 14px) !important;
    max-width: calc(33.333% - 14px) !important;
    margin-bottom: 20px !important;
}

/* 新闻页面容器修正 */
.news-banner .container {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.news-filter {
    width: 100% !important;
}

.news-filter-content {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.news-content {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.news-grid {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
}

/* 新闻详情页面修正 */
.blog-details-page .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.breadcrumb-area .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* 产品详情页面修正 */
.main {
    max-width: 1200px !important;
    margin: 0 auto !important;
    /*padding: 0 20px !important;*/
}

/* 分页导航宽度修正 */
.p_page,
.news-pagination {
    max-width: 1600px !important;
    /*margin: 0 auto !important;*/
    padding: 0 20px !important;
    margin-bottom: 50px;
}

.page_con {
    max-width: 100% !important;
    text-align: center !important;
}

/* 响应式设计 - 平板设备 */
@media (max-width: 768px) {
    .container,
    .breadcrumb-content,
    .news-filter-content,
    .news-grid,
    .news-content,
    .p_gridbox,
    .main {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* 产品项目在移动端单列显示 */
    .p_loopitem {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* 新闻网格在移动端单列显示 */
    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* 响应式设计 - 手机设备 */
@media (max-width: 480px) {
    .container,
    .breadcrumb-content,
    .news-filter-content,
    .news-grid,
    .news-content,
    .p_gridbox,
    .main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* 确保所有内容不会超出容器 */
* {
    box-sizing: border-box !important;
}

/* 防止图片超出容器 */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* 防止表格超出容器 */
table {
    width: 100% !important;
    table-layout: fixed !important;
}

/* 防止长文本超出容器 */
.e_richText-84,
.news-card-content,
.blog-content {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}