/*** responsive.css  自适应页面样式
 * 在保留原有 layui 框架与页面大框架不变的前提下，补充响应式规则
 * 断点：1200px / 992px / 768px / 480px
 ******************************************************/

/* ---------- 基础：图片与表格自适应 ---------- */
img { max-width: 100%; height: auto; }
table { max-width: 100%; }
.layui-table { width: 100% !important; }

/* ---------- body 与外层容器 ---------- */
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
}

/* ---------- 顶部导航：默认横向滚动兜底 ---------- */
#topNavigation {
    position: relative;
    width: 100% !important;
    z-index: 9999;
}
/* 悬浮二级菜单：置顶、完全可见、美化样式 */
.layui-nav .layui-nav-child {
    z-index: 10000;
    opacity: 1 !important;
    display: none !important;
    min-width: 150px !important;          /* 固定合适宽度，不挤压 */
    border: 1px solid #e8e8e8 !important; /* 边框更清晰 */
    border-radius: 6px !important;        /* 圆角更柔和 */
    box-shadow: 0 6px 18px rgba(0,0,0,0.10) !important; /* 阴影立体感 */
    padding: 6px 0 !important;
    overflow: hidden;                      /* 圆角内裁切 */
}
.layui-nav .layui-nav-child dd a {
    font-size: 15px !important;            /* 比一级导航小，建立层级 */
    font-weight: 400 !important;
    line-height: 38px !important;          /* 紧凑高度 */
    color: #555 !important;
    padding: 0 24px !important;
    white-space: nowrap !important;
    transition: color 0.2s, background-color 0.2s !important;
}
.layui-nav .layui-nav-child dd a:hover {
    color: #19a389 !important;             /* 悬浮品牌色 */
    background-color: #f3f9f8 !important;
}
.layui-nav .layui-nav-item:hover .layui-nav-child {
    display: block !important;
}
/* 桌面端允许导航纵向溢出，使悬浮下拉菜单正常显示（移动端保留横向滚动） */
@media screen and (min-width: 769px) {
    #topNavigation .layui-nav { overflow: visible !important; }
}
#topNavigation .layui-nav {
    max-width: 100%;
    padding: 0 10px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#topNavigation .layui-nav::-webkit-scrollbar { display: none; }
#topNavigation .layui-nav-item a { white-space: nowrap; }
#logoimg { max-height: 60px; width: auto; }

/* ---------- 移动端导航切换按钮（默认隐藏） ---------- */
.jc-nav-toggle {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    background: #5A6794;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 22px;
    cursor: pointer;
    z-index: 1000;
    line-height: 44px;
    text-align: center;
    padding: 0;
}

/* ---------- footer：清除固定宽度，移动端堆叠 ---------- */
.footer {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 280px;
    padding: 2rem 1rem 0 1rem !important;
    box-sizing: border-box;
}
.wrapper-footer { width: 100% !important; max-width: 1200px; margin: 0 auto; }
.wrapper-footer .wrapper-footer-li .logo {
    margin: 0 auto !important;
    width: 160px;
    height: auto;
}

/* ---------- jf-container 与公共块：默认下放到 100% ---------- */
.jf-container { width: 100% !important; max-width: 1200px; padding: 0 15px; box-sizing: border-box; }
.jf-pagenav { padding: 30px 0; }

/* ---------- 返回导航样式：返回上一页独占左侧一列，其余两行四列 ---------- */
.jf-pagenav .jf-container {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    overflow: visible !important;
}
.jf-pagenav .returnpage {
    float: none !important;
    margin: 0 !important;
    width: auto;
    flex-shrink: 0;
    height: auto;
    line-height: 1.6;
    font-size: 16px;
    border-bottom: 2px solid #5A6794;
    padding: 0 20px 6px 0;
    box-sizing: border-box;
    white-space: nowrap;
    align-self: center;
}
.jf-pagenav .returnpage a {
    text-decoration: none;
    color: #383735;
    transition: color 0.2s;
}
.jf-pagenav .returnpage:hover a { color: #16baaa; }
.jf-pagenav .jf-pagenav-li {
    float: none !important;
    width: auto !important;
    flex: 1 1 auto;
    overflow: visible !important;
    zoom: normal;
}
.jf-pagenav .jf-pagenav-li ul {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 0;
}
.jf-pagenav .jf-pagenav-li li {
    float: none !important;
    display: flex !important;
    align-items: center;
    width: 25% !important;
    height: auto;
    line-height: 1.6;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
}
.jf-pagenav .jf-pagenav-li li span.iconfont {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    margin: 0 8px 0 0 !important;
    color: #5A6794;
    transition: all 0.8s;
}
.jf-pagenav .jf-pagenav-li li:hover span.iconfont {
    margin: 0 4px 0 12px !important;
}
.jf-pagenav .jf-pagenav-li li a {
    font-size: 14px;
    color: #383735;
    text-decoration: none;
    transition: color 0.2s;
}
.jf-pagenav .jf-pagenav-li li:hover a { color: #16baaa; }
.jf-pagenav .jf-pagenav-li li.active a { color: #5A6794; font-weight: 600; }
.jf-pagenav .clear { display: none !important; }

/* ---------- 业务模块（index.html 等）：保证图片与文字堆叠 ---------- */
.jf-scheme-container { margin: 30px auto !important; }
.jf-sy-scheme-lefttxt { padding: 40px 30px !important; height: auto !important; }
.jf-sy-scheme-rightimg img { display: block; width: 100%; height: auto; }

/* ---------- 产品列表（cpxx.html）固定宽度兜底 ---------- */
.cpms,
.cplist,
.cateslist,
.main_right,
.tabMenu,
.news_list {
    width: 100% !important;
    max-width: 1200px;
    box-sizing: border-box;
}
.tabMenu ul,
.tabMenu .tabSide,
.tabMenu div.active { width: 100% !important; box-sizing: border-box; }
.layui-tab,
.layui-tab .layui-tab-title,
.layui-tab-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
.layui-tab .layui-tab-title { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
.cateslist dl { width: 100%; }
.cateslist dl dd {
    width: 30% !important;
    margin: 10px 1.5% !important;
    box-sizing: border-box;
}
.cateslist dl dd img,
.cateslist dl dd .img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
}

/* ---------- 招聘卡片（rczp.html .fenlei） ---------- */
.fenlei {
    width: 30% !important;
    margin: 10px 1.5% !important;
    box-sizing: border-box;
    vertical-align: top;
}

/* ---------- 新闻列表（hydt.html） ---------- */
.newsimg { width: 100% !important; max-width: 610px; height: auto !important; margin-left: 0 !important; }
.hynews { width: 100% !important; max-width: 610px; margin: 20px auto !important; }
.leftnews, .rightnews { margin: 0 !important; width: 100% !important; }

/* ---------- 静态新闻列表（hydt1-hydt10） ---------- */
.hydt-news-list {
    max-width: 1170px;
    margin: 30px auto;
    padding: 0 20px;
    text-align: left;
}
.hydt-news-item {
    display: flex;
    gap: 25px;
    padding: 25px 0;
    border-bottom: 1px solid #e8e8e8;
    align-items: flex-start;
}
.hydt-news-item:last-child { border-bottom: none; }
.hydt-news-img {
    flex: 0 0 320px;
    max-width: 320px;
    display: block;
    overflow: hidden;
    border-radius: 4px;
}
.hydt-news-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.hydt-news-img:hover img { transform: scale(1.05); }
.hydt-news-info {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 5px;
}
.hydt-news-date {
    font-size: 13px;
    color: #999;
    margin-bottom: 10px;
}
.hydt-news-info h3 {
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 12px !important;
    font-weight: 500;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}
.hydt-news-info h3 a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
    word-break: break-word;
    line-height: 1.6;
}
.hydt-news-info h3 a:hover { color: #16baaa; }
.hydt-news-more {
    display: block !important;
    font-size: 13px;
    color: #5A6794;
    text-decoration: none;
    padding: 6px 0 0 0;
    margin-top: 8px;
    transition: color 0.2s;
    clear: both;
    width: auto !important;
    height: auto !important;
    float: none !important;
}
.hydt-news-more:hover { color: #16baaa; }

/* ---------- 公司简介图（gyjc.html）等内嵌大图 ---------- */
.video-player video { width: 100% !important; max-height: 70vh; object-fit: cover; }

/* ---------- 新闻详情页内嵌图片 ---------- */
.news_list img,
.post-entry img { max-width: 100% !important; height: auto !important; }

/* ====================================================================
   断点 1：<= 1200px  平板横屏 / 小笔记本
   ==================================================================== */
@media screen and (max-width: 1200px) {
    .jf-container { width: 100% !important; }
    .footer { padding: 2rem 2rem 0 2rem !important; }

    /* 招聘卡片改为两列 */
    .fenlei { width: 47% !important; }

    /* 产品分类两列 */
    .cateslist dl dd { width: 47% !important; margin: 10px 1.5% !important; }
}

/* ====================================================================
   断点 2：<= 992px  平板竖屏
   ==================================================================== */
@media screen and (max-width: 992px) {
    /* 顶部导航：显示汉堡按钮 */
    .jc-nav-toggle { display: block; }
    #topNavigation .layui-nav {
        white-space: normal;
        overflow-x: visible;
        height: 60px;
        overflow: hidden;
    }
    #topNavigation.jc-nav-open .layui-nav {
        height: auto;
        overflow: visible;
        padding-bottom: 10px;
    }
    #topNavigation .layui-nav > li:first-child {
        /* logo 行 */
        float: none;
        display: block;
        height: 60px;
        line-height: 60px;
    }
    #topNavigation .layui-nav-item {
        display: none;
        float: none !important;
        width: 100%;
        text-align: left;
        line-height: 44px;
        height: 44px;
    }
    #topNavigation .layui-nav-item a {
        display: block;
        padding: 0 20px;
        height: 44px;
        line-height: 44px;
    }
    #topNavigation.jc-nav-open .layui-nav-item { display: block; }

    /* 业务模块：左右堆叠为上下 */
    .jf-scheme-container,
    .jf-scheme-container.flexstart {
        flex-direction: column !important;
    }
    .jf-scheme-container.jf-mobile-scheme-txtup {
        flex-direction: column !important;
    }
    .jf-sy-scheme-lefttxt,
    .jf-sy-scheme-rightimg {
        width: 100% !important;
        flex: none !important;
    }

    /* footer 改为两列 */
    .wrapper-footer .wrapper-footer-li {
        width: 50% !important;
        padding: 10px 15px !important;
        margin-bottom: 20px;
        box-sizing: border-box;
    }
    .wrapper-footer .wrapper-footer-li:first-child { text-align: left; }

    /* 返回导航：平板改为上下堆叠，导航两列 */
    .jf-pagenav .jf-container { flex-direction: column !important; gap: 10px; }
    .jf-pagenav .returnpage { width: 100%; padding: 0 0 6px 0; }
    .jf-pagenav .jf-pagenav-li li { width: 50% !important; padding: 0 8px; }
    .jf-pagenav .jf-pagenav-li li a { font-size: 13px; }

    /* 静态新闻列表：平板缩小图片 */
    .hydt-news-item { gap: 18px; padding: 20px 0; }
    .hydt-news-img { flex: 0 0 240px; max-width: 240px; }
    .hydt-news-img img { height: 150px; }
    .hydt-news-info h3 { font-size: 16px; }
}

/* ====================================================================
   断点 3：<= 768px  手机
   ==================================================================== */
@media screen and (max-width: 768px) {
    body { font-size: 14px; }

    /* footer 改为单列 */
    .wrapper-footer .wrapper-footer-li {
        width: 100% !important;
        text-align: left !important;
        padding: 10px 15px !important;
    }
    .wrapper-footer .wrapper-footer-li .logo { margin: 0 !important; }
    .wrapper-footer .wrapper-footer-li:first-child { text-align: left; }
    .footer2 { padding: 20px 15px !important; font-size: 12px; line-height: 22px; }

    /* 招聘卡片单列 */
    .fenlei { width: 100% !important; margin: 10px 0 !important; }

    /* 产品分类单列 */
    .cateslist dl dd { width: 100% !important; margin: 10px 0 !important; }
    .cateslist dl dd img,
    .cateslist dl dd .img { aspect-ratio: auto; }

    /* 业务模块文字内边距 */
    .jf-sy-scheme-lefttxt { padding: 24px 18px !important; }
    .jf-sy-scheme-lefttxt h1,
    .jf-sy-scheme-lefttxt > div:first-child { font-size: 20px !important; }
    .jf-sy-scheme-lefttxt p { font-size: 14px !important; line-height: 24px !important; }

    /* 返回导航：手机单列 */
    .jf-pagenav { padding: 20px 0; }
    .jf-pagenav .jf-container { gap: 8px; }
    .jf-pagenav .returnpage { font-size: 14px; }
    .jf-pagenav .jf-pagenav-li li { width: 100% !important; padding: 0 8px; }
    .jf-pagenav .jf-pagenav-li li a { font-size: 13px; }

    /* 轮播图高度 */
    .layui-carousel { height: 220px !important; }

    /* 公司新闻表格：横向滚动 */
    .layui-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* 行业动态列表 */
    .aboutus_tab_wrapper { height: auto !important; padding: 1rem !important; }
    .aboutus_tab_container { flex-direction: column; }
    .aboutus_tab_wrapper .list_left_text,
    .aboutus_tab_wrapper .list_right_img { width: 100% !important; float: none !important; }

    /* 固定右侧悬浮图标 */
    body > div[style*="position: fixed"] { right: 5px !important; bottom: 100px !important; }
    body > div[style*="position: fixed"] img { width: 40px; height: 40px; }

    /* 弹层在小屏撑满 */
    .layui-layer { width: 92% !important; max-width: 92vw !important; left: 4% !important; }
    .layui-layer-page { width: 92% !important; }

    /* 新闻详情图片 */
    .news_list img[style*="width"],
    .post-entry img[style*="width"] { width: 100% !important; }

    /* 视频高度 */
    .video-player video { max-height: 50vh; }

    /* 静态新闻列表：手机改为上下堆叠 */
    .hydt-news-item { flex-direction: column; gap: 15px; padding: 20px 0; }
    .hydt-news-img { flex: none; max-width: 100%; width: 100%; }
    .hydt-news-img img { height: 180px; }
    .hydt-news-info h3 { font-size: 16px; }
    .hydt-news-list { padding: 0 15px; }
}

/* ====================================================================
   断点 4：<= 480px  小屏手机
   ==================================================================== */
@media screen and (max-width: 480px) {
    .layui-carousel { height: 160px !important; }
    .jf-sy-scheme-lefttxt > div:first-child { font-size: 18px !important; }
    .wrapper-footer li .title { font-size: 16px !important; }
    .wrapper-footer li .text { font-size: 13px !important; line-height: 22px; }
    .footer .qrList .qrimg { width: 44px !important; margin-right: 10px !important; }
    .footer .qrList .qr { width: 100px !important; height: 100px !important; }
}