@charset "utf-8";
/* ==========================================================================
   Melo 响应式补充样式
   说明：原站 css.css 是固定 1200px 的 PC 版式，本文件不改动原样式，
        仅在中小屏幕下覆盖关键固定宽度/浮动，实现移动端自适应。
   加载顺序：必须在 images/css.css 之后。
   ========================================================================== */

/* ---------- 通用：图片与表格不再撑破布局 ---------- */
img { max-width: 100%; height: auto; }
table { max-width: 100%; }
.wrap img, .wrap2 img, .main img, .sidebar img { max-width: 100%; height: auto; }

/* 正文里的编辑器表格在窄屏横向滚动，避免撑破 */
.main table, .wrap2 table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.main table td, .wrap2 table td { min-width: auto; }

/* ---------- 汉堡按钮（仅移动端显示） ---------- */
.nav-toggle {
    display: none;
    width: 44px; height: 36px;
    background: #e62129; border: 0; border-radius: 4px;
    cursor: pointer; padding: 8px 10px; margin: 27px 0 0 0;
    float: right;
}
.nav-toggle span {
    display: block; height: 3px; background: #fff;
    margin: 4px 0; border-radius: 2px;
    transition: .2s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   断点一：≤1240px —— 内容区随屏收缩（避免 1200px 固定宽出现横向滚动条）
   ========================================================================== */
@media (max-width: 1240px) {
    body { min-width: 0; }
    .wrap, .wrap2, .headerbox, .footer, .menubottom, .lybox2,
    .all_t_home, .footer dt, .footer dd { width: auto; max-width: 1200px; }
    .wrap, .wrap2, .headerbox, .footer { padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
    .headerbox002 { width: auto; }
}

/* ==========================================================================
   断点二：≤1024px —— 平板
   ========================================================================== */
@media (max-width: 1024px) {
    /* 头部：logo 与搜索换行堆叠 */
    .headerbox001 { width: 180px; }
    .headerbox002 { width: auto; margin-left: 15px; }
    .menu li { padding: 0 12px; font-size: 14px; }

    /* 侧边栏与主体堆叠 */
    .sidebar, .main { float: none; width: 100%; }
    .sidebar { margin-bottom: 15px; }
    .main { margin-bottom: 20px; }

    /* 首页产品卡片三列变两列 */
    .meitipic22, .meitipic33 { width: 48%; margin-right: 4%; }
    .meitipic22 dt, .meitipic33 dt,
    .meitipic22 dd, .meitipic33 dd { width: 100%; }
    .meitipic22:nth-child(2n), .meitipic33:nth-child(2n) { margin-right: 0; }

    /* 内页通栏图高度收缩 */
    .nbp, .nbp2, .nbp3 { height: 240px; background-size: cover !important; }

    /* 底部联系/留言区两栏变一栏 */
    .lybox1, .lybox2 { float: none; width: 100%; }
}

/* ==========================================================================
   断点三：≤768px —— 手机
   ========================================================================== */
@media (max-width: 768px) {
    /* 头部整体纵向排布 */
    .headerbox001, .headerbox002, .headerbox003 {
        float: none; width: auto; margin-left: 0; height: auto;
    }
    .headerbox001 { padding: 10px 0; text-align: left; }
    .headerbox001 img { max-height: 55px; width: auto; }
    .headerbox002 { min-height: 52px; }
    .headerbox003 { padding: 6px 0 12px; }
    .headerbox003 dl dd, .headerbox003 dl dt { float: none; width: auto; padding-top: 0; }

    /* 汉堡按钮出现，导航默认收起 */
    .nav-toggle { display: block; }
    .menu { width: 100%; }
    .menu > ul { display: none; height: auto; line-height: normal; background: #fff; border-top: 1px solid #eee; }
    .menu.open > ul { display: block; }
    .menu li {
        float: none; width: 100%; box-sizing: border-box;
        height: auto; line-height: 44px; text-align: left;
        padding: 0; background: none; border-bottom: 1px solid #f0f0f0;
    }
    .menu li a { padding: 0 15px; }
    /* 二级菜单：手机无 hover，直接展开并缩进 */
    .menu ul ul {
        visibility: visible; position: static;
        height: auto; line-height: 38px; padding-left: 0; display: block;
    }
    .menu ul ul li {
        width: 100%; clear: none; padding-left: 25px;
        height: auto; line-height: 38px; background: #fafafa;
        border-bottom: 1px solid #f2f2f2; font-size: 13px;
    }
    .menu ul ul li a { width: auto; background: none; color: #333; height: auto; }

    /* 搜索框 */
    .s_input { width: 100% !important; box-sizing: border-box; }
    .search_main { width: 100%; }

    /* 首页产品卡片单列 */
    .meitipic22, .meitipic33 { width: 100%; margin-right: 0; margin-bottom: 12px; }
    .meitipic22 dt, .meitipic33 dt { height: auto; }

    /* 内页通栏图 */
    .nbp, .nbp2, .nbp3 { height: 150px; background-size: cover !important; }

    /* 标题栏与面包屑 */
    .all_t, .all_t_wz { height: auto; line-height: 34px; }
    .all_t_home { width: auto; float: none; text-align: left; }

    /* 分类快捷导航（红色按钮）换行平铺 */
    .cpdh li { display: block; margin: 6px 10px; }
    .cpdh ul ul { position: static; visibility: visible; height: auto; }
    .cpdh ul ul li { width: auto; float: none; padding-left: 30px; }

    /* 产品详情：图文区不再并排 */
    .cpxx, .cpxq { float: none !important; width: 100% !important; }

    /* 页脚 */
    .footer { line-height: 24px; padding: 12px 10px; }
    .footer dt, .footer dd { float: none; width: auto; text-align: center; }

    /* 留言表单 */
    .lybox { height: auto; background: none; padding-bottom: 15px; }
    .lybox1, .lybox2 { width: 100%; }

    /* 首页幻灯片：交给 JS 组件，这里只保证不溢出 */
    .hdp12, .slider, .banner { max-width: 100%; overflow: hidden; }
}

/* ==========================================================================
   断点四：≤480px —— 小屏手机
   ========================================================================== */
@media (max-width: 480px) {
    .wrap, .wrap2, .headerbox { padding-left: 6px; padding-right: 6px; }
    .menu li { font-size: 15px; }
    .nbp, .nbp2, .nbp3 { height: 110px; }
    h1, h2, h3 { font-size: 18px; }
}