/* ---------- Language Switcher ---------- */

.lang-switcher { position: relative; display: inline-block; }

.lang-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0;

    width: 34px;

    height: 34px;

    padding: 0;

    border: 1px solid #ccc;

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    font-size: 12px;

    color: #333;

    transition: background .3s, color .3s, border-color .3s;

}

.lang-btn:hover { background: rgba(0,0,0,.06); border-color: var(--primary); color: var(--primary); }

.lang-arrow { display: none; font-size: 10px; transition: transform 0.3s; }

.lang-switcher.open .lang-arrow { transform: rotate(180deg); }

.lang-dropdown {

    position: absolute;

    top: calc(100% + 6px);

    right: 0;

    min-width: 160px;

    background: #fff;

    border-radius: 8px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.12);

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition: all 0.3s;

    z-index: 1200;

    border: 1px solid #eee;

}

.lang-switcher.open .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-item {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    text-decoration: none;

    color: #333;

    font-size: 14px;

    transition: background 0.2s;

}

.lang-item:hover { background: #f5f5f5; }

.lang-item.active { background: #006f1b; color: #fff; }

.lang-item i { font-size: 12px; width: 16px; text-align: center; }

/* 閫忔槑瀵艰埅涓烘繁鑹叉笎鍙樿儗鏅細鎸夐挳鏂囧瓧涓庣櫧鑹插渾妗嗕繚璇佸彲瑙侊紱涓嬫媺闈㈡澘涓虹櫧搴曪紝鍐呴儴淇濇寔娣辫壊鏂囧瓧 */

.header .lang-btn { color: #fff; border-color: rgba(255,255,255,.7); }

.header .lang-btn:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }

.header .lang-dropdown .lang-item { color: #333; }

.header .lang-dropdown .lang-item.active { color: #fff; }



/* ==========================================================

   瑙嗚鍗忚皟澧炲�?�?缁熶竴鐗堝潡鏍囬瑁呴グ銆佹彁鍗囧彲璇绘€т笌鑺傚鎰?

   ========================================================== */



/* 鐗堝潡鏍囬瑁呴グ鏉＄粺涓€瀹氫箟鍦?style.css �?.section-head.center::after */



/* 鍙傝路瀵艰鏍囬淇濇寔涓€鑷磋楗伴鏍?*/

.visit-title { position: relative; padding-bottom: 18px; }

.visit-title::after {

    content: "";

    position: absolute;

    left: 50%; bottom: 0;

    transform: translateX(-50%);

    width: 48px; height: 3px;

    border-radius: 2px;

    background: var(--primary);

}



/* 骞荤伅鏍囬澧炲姞鏂囧瓧闃村奖锛屼繚璇佷换鎰忚儗鏅浘涓婄殑鍙鎬?*/

.banner .child .fz30 {

    text-shadow: 0 2px 14px rgba(0,0,0,.55);

    font-weight: 700;

}



/* 鍗＄墖缁熶竴鎮诞鎶崌锛屽己鍖栦氦浜掍竴鑷存劅锛堜笉褰卞搷鏃㈡湁鍥剧墖缂╂斁�?*/

.news-card:hover,

.tri-card:hover,

.video-card:hover,

.topic-card:hover {

    box-shadow: 0 12px 34px rgba(0,0,0,.16);

}







/* ==========================================================

   椤堕儴鎼滅储鎸夐挳锛堝渾褰㈣竟妗嗭紝涓庤瑷€鎸夐挳椋庢牸鍛煎簲�?

   ========================================================== */

.tools .sc { display: inline-flex; align-items: center; }

.tools .sc a {

    display: inline-flex; align-items: center; justify-content: center;

    width: 34px; height: 34px;

    color: #fff; font-size: 14px;

    border: 1px solid rgba(255,255,255,.7);

    border-radius: 50%;

    transition: background .3s, color .3s, border-color .3s;

}

.tools .sc a:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }

/* 鐧藉簳瀵艰埅锛坔eader2锛変笅鎼滅储鍥炬爣涓烘繁鑹诧紝hover 鍙樺搧鐗岀�?*/

.header2 .tools .sc a { color: #333; border-color: #ccc; }

.header2 .tools .sc a:hover { background: rgba(0,0,0,.06); border-color: var(--primary); color: var(--primary); }



/* ==========================================================

   鎼滅储寮瑰眰锛堝眳涓ā鎬侊級

   ========================================================== */

.search-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.55);

    z-index: 2000;

    opacity: 0;

    visibility: hidden;

    transition: opacity .28s ease, visibility .28s;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}

.search-overlay.open { opacity: 1; visibility: visible; }

.search-overlay-box {

    position: relative;

    width: min(680px, 92vw);

    background: #fff;

    border-radius: 14px;

    padding: 34px 38px;

    display: flex;

    align-items: center;

    gap: 12px;

    box-shadow: 0 24px 60px rgba(0,0,0,.3);

    transform: translateY(24px) scale(.96);

    opacity: 0;

    transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s;

}

.search-overlay.open .search-overlay-box {

    transform: translateY(0) scale(1);

    opacity: 1;

}

.search-overlay-input {

    flex: 1;

    height: 48px;

    border: none;

    outline: none;

    font-size: 17px;

    color: #333;

    background: transparent;

    border-bottom: 2px solid #e5e5e5;

    transition: border-color .25s;

    padding: 0 4px;

}

.search-overlay-input:focus { border-color: var(--primary); }

.search-overlay-btn {

    flex: 0 0 auto;

    height: 48px;

    padding: 0 22px;

    background: var(--primary);

    color: #fff;

    border: none;

    border-radius: 4px;

    font-size: 15px;

    cursor: pointer;

    transition: background .25s;

    display: flex;

    align-items: center;

    gap: 6px;

}

.search-overlay-btn:hover { background: #7a0507; }

.search-overlay-close {

    position: absolute;

    top: -26px; right: -26px;

    width: 36px; height: 36px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.12);

    color: #fff;

    font-size: 26px;

    line-height: 1;

    cursor: pointer;

    transition: color .2s, background .2s, transform .25s;

}

.search-overlay-close:hover { color: #fff; background: var(--primary); transform: rotate(90deg); }



@media (max-width: 850px) {

    .search-overlay-box { padding: 28px 24px; }

    .search-overlay-input { height: 44px; font-size: 15px; }

    .search-overlay-btn { height: 44px; padding: 0 16px; font-size: 13px; }

    .search-overlay-close { top: -22px; right: -22px; width: 30px; height: 30px; font-size: 22px; }

}



/* ==========================================================

   鍗曢〉妯℃澘 page-single锛坅bout.html 鍏辩敤锛?

   ========================================================== */

/* 鍙栨秷棣栭〉鍙屽眰鍥哄畾缁撴瀯锛屾敼涓烘甯告枃妗ｆ祦锛岀‘淇濋〉鑴氫笌鍐呭鍙 */

body.page-single { overflow: auto; }

body.page-single .body_home { display: none; }

body.page-single .body_b { position: static; height: auto; overflow: visible; display: block; top: auto; bottom: auto; left: auto; right: auto; transition: none; z-index: auto; }

body.page-single .body_b.showdiv .header2 { transform: none; opacity: 1; transition: none; }

body.page-single .body_b .pad { display: none; }



/* 鏍忕洰澶у�?banner锛氳儗鏅浘鏆楀�?+ 妯＄硦锛屼笂鏂规樉绀烘爮鐩悕绉颁笌褰撳墠浣嶇疆 */

.page-banner { position: relative; width: 100%; height: 380px; overflow: hidden; background: #000; margin-top: 84px; display: flex; align-items: center; justify-content: center; }

.page-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(2px) brightness(0.65); transform: scale(1.05); }

.page-banner__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); }

.page-banner__inner { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 20px; }

.page-breadcrumb { font-size: 14px; opacity: 0.85; margin-bottom: 12px; }

.page-breadcrumb a { color: #fff; text-decoration: none; transition: color .25s; }

.page-breadcrumb a:hover { color: var(--primary); }

.page-breadcrumb .sep { margin: 0 8px; opacity: 0.7; }

.page-banner__title { font-size: 42px; font-weight: 700; letter-spacing: 2px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); margin: 0; }



/* 鍐呭鍖猴細宸︿晶瀛愭爮鐩�?+ 鍙充晶鏍忕洰鍐呭�?*/

.single-page { padding: 50px 0 90px; background: #f8f8f8; }

.single-layout { display: flex; align-items: flex-start; gap: 30px; }



/* 宸︿晶瀵艰�?*/

.single-aside { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 26px; }

.aside-nav:not(:has(li)) { display: none; }


 

.aside-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,40,24,.04), 0 10px 28px rgba(16,40,24,.07);
    transition: transform .3s ease, box-shadow .3s ease;
}
.aside-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(16,40,24,.05), 0 18px 40px rgba(16,40,24,.12);
}
.single-aside__title .title-deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    animation: asideOrb 5.5s ease-in-out infinite;
}
.single-aside__title .title-deco--tr {               /* 右上 半圆 */
    width: 60px; height: 60px;
    top: -10px; right: -20px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,143,35,.12) 0%, rgba(0,143,35,.03) 100%);
    transform-origin: 100% 0;
}
@keyframes asideOrb {
    0%, 100% { transform: scale(0.95); }
    50%      { transform: scale(1.02); }
}

.single-aside__title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 18px;
    font-size: 16px;
    font-weight: 700;
    color: #12301b;
    letter-spacing: .5px;
    background: linear-gradient(135deg, #e7f3ea 0%, #f9fdfa 78%);
    border-bottom: 1px solid #dfeee2;
    overflow: hidden;
}
.single-aside__title > * { position: relative; z-index: 1; }
.single-aside__title::before {
    content: "";
    width: 4px; height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary), #7ed99a);
}
.single-subnav { list-style: none; padding: 12px; margin: 0; position: relative; z-index: 1; }
.single-subnav li { margin: 4px 0; position: relative; }
.single-subnav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    border-radius: 10px;
    color: #4a5c51;
    text-decoration: none;
    font-size: 14.5px;
    transition: all .28s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
}
.single-subnav a > span { flex: 1; min-width: 0; }
.single-subnav .nav-icon { font-size: 12px; color: #b4c1b8; transition: all .28s; }
.single-subnav > li > a:hover { color: var(--primary); background: #f4f9f5; padding-left: 18px; }
.single-subnav > li > a:hover .nav-icon { color: var(--primary); transform: translateX(3px); }
/* 顶层栏目选中态：绿条 + 渐变底（仅限顶层 li，子菜单不受影响） */
.single-subnav > li.active > a {
    color: var(--primary);
    font-weight: 600;
    background: linear-gradient(90deg, rgba(0,143,35,.13) 0%, rgba(0,143,35,.02) 85%);
}
/* 「全部」入口：默认选中态（品牌绿实心），与子栏目区分 */
.single-subnav > li.all-link > a,
.single-subnav > li.all-link.active > a {
    color: #fff;
    font-weight: 600;
    background: var(--primary);
    box-shadow: 0 8px 18px rgba(0, 143, 35, .24);
}
.single-subnav > li.all-link > a .nav-icon { color: #fff; opacity: 1; }
.single-subnav > li.all-link > a:hover { color: #fff; background: var(--primary-dark); padding-left: 18px; }
.single-subnav > li.all-link > a:hover .nav-icon { color: #fff; }
/* 右侧内容数量徽标 */
.single-subnav .nav-count {
    margin-left: auto;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: #8a9790;
    background: #eef2f0;
    border-radius: 999px;
    transition: color .28s, background .28s;
}
.single-subnav > li > a:hover .nav-count { color: var(--primary); background: rgba(0, 143, 35, .1); }
.single-subnav > li.active > a .nav-count { color: var(--primary); background: #dbefe0; }
.single-subnav > li.all-link > a .nav-count,
.single-subnav > li.all-link > a:hover .nav-count { color: var(--primary); background: #fff; }
.single-subnav > li.active > a::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 58%;
    border-radius: 0 4px 4px 0;
    background: var(--primary);
}
.single-subnav > li.active > a .nav-icon { color: var(--primary); }
.single-subnav:empty { display: none; }

/* ===== 子菜单（公司动态下所有层级的子项统一用轻量样式） ===== */
.single-subnav__sub {
    display: none;
    list-style: none;
    margin: 2px 0 4px 26px;
    padding: 0;
    border-left: none;
}
.single-subnav li.has-sub.open > .single-subnav__sub { display: block; }

/* 展开/收起箭头（a 内最左，有子级才显示） */
.single-subnav .sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #b4c1b8;
    font-style: normal;
    font-size: 11px;
    cursor: pointer;
    transition: transform .28s, color .25s;
}
.single-subnav .sub-toggle::before {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.single-subnav li.has-sub > a .nav-icon { display: none; }
.single-subnav li:not(.has-sub) > a .sub-toggle { display: none; }
.single-subnav a:hover .sub-toggle { color: var(--primary); }
.single-subnav li.has-sub.open > a .sub-toggle { transform: rotate(180deg); color: var(--primary); }

/* 子级链接：未选中黑字、无背景；右内距与顶级一致保证数量对齐 */
.single-subnav__sub a {
    padding: 8px 14px;
    font-size: 13.5px;
    gap: 8px;
    color: #333;
    background: none;
}
.single-subnav__sub a > span { flex: 1; min-width: 0; }
.single-subnav__sub a:hover { background: none; color: var(--primary); }
.single-subnav__sub .nav-icon { font-size: 11px; color: #b4c1b8; }
/* 子级数量：与顶级一致的圆形徽标，右对齐 */
.single-subnav__sub .nav-count {
    margin-left: auto;
    min-width: 22px;
    height: 20px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 600;
    color: #8a9790;
    background: #eef2f0;
    border-radius: 999px;
}
.single-subnav__sub a:hover .nav-count { color: var(--primary); background: rgba(0, 143, 35, .1); }

/* 子级选中（含 JS 补的祖先链）：只变主色加粗，无背景框、无绿条 */
.single-subnav__sub li.active > a,
.single-subnav__sub li.cur > a {
    color: var(--primary);
    font-weight: 600;
    background: none;
}
.single-subnav__sub li.active > a::before,
.single-subnav__sub li.cur > a::before { display: none; }
.single-subnav__sub li.active > a .nav-count,
.single-subnav__sub li.cur > a .nav-count { color: var(--primary); background: #dbefe0; }

.aside-contact__list { padding: 22px 18px 26px; margin: 0; list-style: none; position: relative; z-index: 1; }
.aside-contact__list li { display: flex; align-items: center; gap: 12px; color: #56685d; font-size: 14px; line-height: 1.7; margin-bottom: 20px; }

/* 电话 两行样式 */
.aside-contact__list li:last-child { margin-bottom: 0; }
.aside-contact__box { display: flex; flex-direction: column; line-height: 1.3; }
.aside-contact__label { font-size: 12px; color: #8a9790; letter-spacing: .5px; }

/* 底部链接按钮 */
.aside-contact__btn {
    display: block;
    margin: 8px 18px 22px;
    padding: 10px 0;
    text-align: center;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background .25s, transform .2s;
    position: relative;
    z-index: 1;
}
.aside-contact__btn:hover { background: var(--primary-dark); transform: translateY(-1px); }

.aside-contact__val   { font-size: 14px; color: #2f4137;  margin-top: 2px; }

/* 联系方式：线条图标 + 淡色圆角方形背景 */
.aside-contact__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(0, 143, 35, .08);
    color: var(--primary);
    transition: background .3s, color .3s, transform .3s;
}
.aside-contact__ico svg { width: 19px; height: 19px; display: block; }
.aside-contact__list li:hover .aside-contact__ico {
    background: var(--primary);
    color: #fff;
    transform: scale(1.06);
}



.single-main {
    position: relative;
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 10px;
    padding: 48px 44px 52px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(16,40,24,.04), 0 14px 38px rgba(16,40,24,.09);
}
.single-main::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(0,143,35,.55) 0%, rgba(0,111,27,.40) 60%, rgba(0,111,27,.15) 100%);
}
/* 单页排版 */
.single-title { font-size: 28px; color: #222; line-height: 1.4; margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid #eee; }
.single-content { font-size: 16px; line-height: 1.9; color: #444; }
.single-content > *:first-child { margin-top: 0; }
.single-content h2 { font-size: 24px; color: #222; margin: 36px 0 18px; padding-bottom: 12px; border-bottom: 1px solid #eee; position: relative; }
.single-content h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 50px; height: 2px; background: var(--primary); }
.single-content h3 { font-size: 20px; color: #333; margin: 28px 0 14px; }
.single-content p { margin: 0 0 18px; }
.single-content img { max-width: 100%; height: auto; display: block; margin: 24px auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* 连续多图横向并排（由 lightbox.js 运行时生成 .sb-row / 或直接标记段落） */
.sb-row,
.single-content p:has(> img + img) {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin: 24px 0;
}
.sb-row img,
.single-content p:has(> img + img) img {
    display: block;
    margin: 0;
    flex: 1 1 0;
    min-width: 180px;
    max-width: 100%;
    border-radius: 8px;
}
/* 每行第一张更宽，占比更多 */
.sb-row img:first-child,
.single-content p:has(> img + img) img:nth-child(1) {
    flex: 2 1 0;
}
@media (max-width: 640px) {
    .sb-row img,
    .single-content p:has(> img + img) img { flex-basis: 100%; }
}
.single-content ul, .single-content ol { padding-left: 0; margin: 0 0 20px; list-style: none; }
.single-content ul li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.single-content ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.single-content a { color: var(--primary); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s; }
.single-content a:hover { border-bottom-color: var(--primary); }
.single-content blockquote { margin: 24px 0; padding: 16px 24px; border-left: 4px solid var(--primary); background: #f7fbf8; color: #555; }

/* ============ 图片灯箱（点击放大 + 左右切换） ============ */
.lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 20, 12, .93);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.lb-overlay.open { opacity: 1; visibility: visible; }
.lb-hide { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.lb-img {
    max-width: 90vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
    transform: scale(.96);
    transition: transform .3s var(--ease);
}
.lb-overlay.open .lb-img { transform: scale(1); }
.lb-close {
    position: absolute;
    top: 18px; right: 26px;
    font-size: 40px;
    line-height: 1;
    color: #fff;
    opacity: .8;
    cursor: pointer;
    transition: opacity .2s, transform .2s;
    z-index: 2;
}
.lb-close:hover { opacity: 1; transform: rotate(90deg); }
.lb-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px; height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-radius: 50%;
    cursor: pointer;
    transition: background .25s, transform .25s;
    z-index: 2;
}
.lb-btn:hover { background: var(--primary); transform: translateY(-50%) scale(1.08); }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-counter {
    position: absolute;
    right: 28px; bottom: 22px;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    opacity: .75;
    z-index: 2;
}
@media (max-width: 640px) {
    .lb-btn { width: 44px; height: 44px; font-size: 20px; }
    .lb-prev { left: 10px; }
    .lb-next { right: 10px; }
    .lb-close { top: 10px; right: 14px; font-size: 32px; }
}


@media (max-width: 480px) {

    .pagebar .pagination { gap: 4px; }

    .pagination a { padding: 0 10px; height: 36px; line-height: 34px; min-width: 36px; font-size: 12px; margin: 2px; }

    .pagination span { padding: 0 6px; height: 28px; line-height: 28px; margin: 2px; font-size: 11px; }

}



/* 鏂囩珷鍏冧俊�?+ 涓婁笅绡?*/

.article-meta { display: flex; flex-wrap: wrap; gap: 20px; color: #999; font-size: 14px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px dashed #eee; }

.article-meta i { margin-right: 5px; color: var(--primary); }

.article-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 22px; border-top: 1px solid #eee; font-size: 14px; color: #666; }

.article-nav a { color: var(--primary); text-decoration: none; }

.article-nav i { color: var(--primary); }



/* 浜у搧璇︽�?*/

.prod-detail { display: flex; gap: 30px; align-items: flex-start; margin-bottom: 30px; }

.prod-detail__img { width: 360px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: #f3f3f3; }

.prod-detail__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prod-detail__info { flex: 1; min-width: 0; }

.prod-detail__desc { color: #555; font-size: 15px; line-height: 1.9; margin: 0 0 18px; }

.prod-detail__spec { list-style: none; padding: 0; margin: 0; }

.prod-detail__spec li { display: flex; padding: 12px 0; border-bottom: 1px dashed #eee; font-size: 14px; }

.prod-detail__spec li span { width: 80px; color: #999; flex-shrink: 0; }

.prod-detail__spec li b { color: #333; font-weight: 600; }



/* ============ 鍦ㄧ嚎鐣欒█琛ㄥ�?============ */

.msg-tips {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    background: #f0fff4;

    border: 1px solid #ffe0e0;

    color: #b04a4a;

    border-radius: 10px;

    padding: 14px 18px;

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 28px;

}

.msg-tips i { margin-top: 3px; color: #e74c3c; }

.msg-tips .req { color: #ef4444; font-weight: 700; }

.msg-form { background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); padding: 30px; }

.form-row { display: flex; gap: 24px; }

.form-row .form-group { flex: 1; }

.form-group { margin-bottom: 22px; }

.form-group label { display: block; font-size: 14px; color: #333; margin-bottom: 8px; font-weight: 600; }

.form-group label .req { color: #ef4444; }

.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid #e3e3e3;

    border-radius: 8px;

    font-size: 14px;

    color: #444;

    background: #fafafa;

    transition: border-color .2s, background .2s, box-shadow .2s;

    box-sizing: border-box;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--primary);

    background: #fff;

    box-shadow: 0 0 0 3px rgba(0, 143, 35, 0.08);

}

.form-group textarea { min-height: 130px; resize: vertical; }

.captcha-row { display: flex; gap: 14px; align-items: center; }

.captcha-input { flex: 1; }

.captcha-img { height: 45px; border-radius: 8px; cursor: pointer; border: 1px solid #e3e3e3; }

.form-submit { display: flex; gap: 14px; margin-top: 4px; }

.btn-submit, .btn-reset {

    border: none;

    border-radius: 8px;

    padding: 13px 34px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all .25s;

}

.btn-submit { background: var(--primary); color: #fff; }

.btn-submit:hover { background: #006f1b; }

.btn-submit:disabled { opacity: .7; cursor: not-allowed; }

.btn-reset { background: #f0f0f0; color: #666; }

.btn-reset:hover { background: #e4e4e4; }



/* ============ 鎻愪氦缁撴灉寮圭�?============ */

.custom-toast-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .5);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10000;

    opacity: 0;

    visibility: hidden;

    transition: opacity .25s, visibility .25s;

}

.custom-toast-overlay.active { opacity: 1; visibility: visible; }

.custom-toast {

    position: relative;

    width: 340px;

    max-width: 86vw;

    background: #fff;

    border-radius: 14px;

    padding: 34px 26px 26px;

    text-align: center;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);

    transform: translateY(12px);

    transition: transform .25s;

}

.custom-toast-overlay.active .custom-toast { transform: translateY(0); }

.custom-toast-close { position: absolute; top: 12px; right: 16px; border: none; background: none; font-size: 22px; color: #bbb; cursor: pointer; line-height: 1; }

.custom-toast-close:hover { color: #888; }

.custom-toast-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; }

.custom-toast-icon.success { background: #2ecc71; }

.custom-toast-icon.fail { background: #e74c3c; }

.custom-toast-title { font-size: 18px; font-weight: 700; color: #222; margin-bottom: 8px; }

.custom-toast-text { font-size: 14px; color: #777; line-height: 1.6; margin-bottom: 22px; }

.custom-toast-btn { border: none; background: var(--primary); color: #fff; border-radius: 8px; padding: 11px 36px; font-size: 15px; font-weight: 600; cursor: pointer; }

.custom-toast-btn:hover { background: #006f1b; }



/* ============ 鑱旂郴鏂瑰紡椤甸�?============ */

.contact-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-bottom: 30px;

}

.contact-card {

    display: flex;

    align-items: center;

    gap: 16px;

    background: #fff;

    border-radius: 10px;

    padding: 22px 20px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);

    transition: transform .25s, box-shadow .25s;

}

.contact-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); }

.contact-card__icon {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 143, 35, 0.08);

    color: var(--primary);

    font-size: 20px;

}

.contact-card__body h4 { margin: 0 0 6px; font-size: 15px; color: #333; font-weight: 600; }

.contact-card__body p { margin: 0; font-size: 14px; color: #666; line-height: 1.5; word-break: break-all; }

.contact-map {

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    min-height: 300px;

    cursor: pointer;

    background: #e9eef5;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #fff;

    text-align: center;

    padding: 30px;

}

.contact-map__img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: blur(7px);

    transform: scale(1.15);

    transition: transform .45s ease, filter .45s ease;

    z-index: 0;

}

.contact-map:hover .contact-map__img { transform: scale(1.32); }

.contact-map__shade {

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(0, 143, 35, 0.55), rgba(0, 111, 27, 0.45));

    z-index: 1;

}

.contact-map > i, .contact-map > p { position: relative; z-index: 2; }

.contact-map__marker { font-size: 40px; }

.contact-map__hint { margin: 0; font-size: 16px; font-weight: 600; }

.contact-map__addr { margin: 0; font-size: 13px; opacity: .85; max-width: 80%; }

.contact-cta {

    margin-top: 30px;

    background: #fff;

    border-radius: 10px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);

    padding: 24px 26px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 16px;

}

.contact-cta p { margin: 0; color: #555; font-size: 15px; }

.contact-cta__btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: var(--primary);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    padding: 12px 28px;

    border-radius: 8px;

    transition: background .25s;

}

.contact-cta__btn:hover { background: #006f1b; }

.contact-cta__btn i { transition: transform .25s; }

.contact-cta__btn:hover i { transform: translateX(4px); }



/* ============ 鏂伴�?鏂囩珷鍒楄〃锛堝乏鍥惧彸鏂囷級 ============ */

.news-list { display: flex; flex-direction: column; gap: 16px; }

.news-item {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    background: #fff;

    border-radius: 10px;

    padding: 18px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);

    text-decoration: none;

    color: inherit;

    transition: transform .25s, box-shadow .25s;

}

.news-item:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1); }

.news-item__img {

    width: 220px;

    height: 150px;

    flex-shrink: 0;

    border-radius: 8px;

    overflow: hidden;

    background: #f3f3f3;

}

.news-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.news-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 4px 0; }

.news-item__title {

    font-size: 18px;

    color: #222;

    margin: 0 0 10px;

    font-weight: 600;

    transition: color .2s;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.news-item:hover .news-item__title { color: var(--primary); }

.news-item__meta { display: flex; gap: 16px; color: #999; font-size: 13px; margin-bottom: 12px; }

.news-item__meta i { margin-right: 4px; }

.news-item__desc {

    color: #777;

    font-size: 14px;

    line-height: 1.7;

    margin: 0;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



/* ============ 通用图片卡片列表（案例等�?============ */

.list-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

}

.list-card {

    display: flex;

    flex-direction: column;

    background: #fff;

    border: 1px solid #eee;

    border-radius: 12px;

    overflow: hidden;

    transition: transform .28s, box-shadow .28s, border-color .28s;

}

.list-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12); border-color: transparent; }

.list-card__media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f3f3; }

.list-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }

.list-card:hover .list-card__media img { transform: scale(1.07); }

.list-card__tag {

    position: absolute;

    left: 14px; top: 14px;

    padding: 4px 12px;

    background: var(--primary);

    color: #fff;

    font-size: 12px;

    border-radius: 20px;

    z-index: 2;

}

.list-card__body { padding: 18px 18px 20px; }

.list-card__title {

    margin: 0 0 10px;

    font-size: 17px;

    font-weight: 600;

    color: #222;

    line-height: 1.5;

    transition: color .2s;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.list-card:hover .list-card__title { color: var(--primary); }

.list-card__meta { display: flex; gap: 16px; color: #999; font-size: 13px; }

.list-card__meta i { margin-right: 4px; }

/* ============ 搜索页搜索表单 ============ */
.search-page-form {
    display: flex;
    gap: 10px;
    margin-bottom: 26px;
}
.search-page-form input {
    flex: 1;
    height: 46px;
    padding: 0 16px;
    font-size: 14px;
    color: #333;
    background: #f7faf8;
    border: 1px solid #e3ebe6;
    border-radius: 10px;
    outline: none;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.search-page-form input:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 143, 35, .1);
}
.search-page-form button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 46px;
    padding: 0 28px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .25s, transform .25s;
}
.search-page-form button:hover { background: var(--primary-dark); }
.search-page-form button i { font-size: 13px; }
@media (max-width: 640px) {
    .search-page-form { flex-direction: column; }
    .search-page-form button { width: 100%; justify-content: center; }
}

/* ============ 产品卡片网格 ============ */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.prod-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: transform .28s, box-shadow .28s, border-color .28s;
}
.prod-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12); border-color: transparent; }
.prod-card__img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f3f3; }
.prod-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.prod-card:hover .prod-card__img img { transform: scale(1.07); }
.prod-card__body { flex: 1; display: flex; flex-direction: column; padding: 18px 18px 20px; }
.prod-card__title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: #222;
    line-height: 1.5;
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prod-card:hover .prod-card__title { color: var(--primary); }
.prod-card__desc {
    margin: 0 0 14px;
    color: #777;
    font-size: 13.5px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prod-card__more { margin-top: auto; padding-top: 12px; color: var(--primary); font-size: 13.5px; font-weight: 600; }
.prod-card__more i { transition: transform .25s; display: inline-block; }
.prod-card:hover .prod-card__more i { transform: translateX(4px); }



@media (max-width: 1100px) {

    .list-grid, .prod-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 850px) {

    .page-banner { margin-top: 60px; height: 220px; }

    .page-banner__title { font-size: 28px; }

    .page-breadcrumb { font-size: 13px; }

    .single-page { padding: 30px 0 56px; }

    .single-layout { flex-direction: column; gap: 24px; }

    /* 移动端隐藏整个左侧版块（导航 + 联系方式），内容单栏铺满 */
    .single-aside { display: none; }

    .single-main { padding: 24px; }

    .single-content h2 { font-size: 20px; }

    .single-content h3 { font-size: 18px; }

    .single-content { font-size: 15px; }

    .list-grid, .prod-grid { grid-template-columns: 1fr; }

    .prod-detail { flex-direction: column; gap: 18px; }

    .prod-detail__img { width: 100%; }

    .form-row { flex-direction: column; gap: 0; }

    .form-group { margin-bottom: 18px; }

    .msg-form { padding: 20px; }

    .form-submit { flex-direction: column; }

    .btn-submit, .btn-reset { width: 100%; }

    .captcha-row { flex-direction: column; align-items: stretch; }

    .captcha-img { width: 100%; height: auto; }

    .contact-grid { grid-template-columns: 1fr; }

    .contact-cta { flex-direction: column; align-items: flex-start; }

    .news-item { flex-direction: column; }

    .news-item__img { width: 100%; height: 180px; }

    .news-item__title { font-size: 16px; }

    .news-item__desc { -webkit-line-clamp: 2; }

}



@media (max-width: 640px) {

    .news-item__desc { display: none; }

}



#hides {display:none;}
 .pagebar .pagination {
   --pg: #6b7280;
   --pg-dark: #4b5563;
   --pg-soft: rgba(107, 114, 128, 0.10);
   --pg-shadow: rgba(107, 114, 128, 0.25);
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 44px 0 48px;
   gap: 10px;
   flex-wrap: wrap;
 }
 .pagination a {
   background: #ffffff;
   border: 1px solid #e2e8f0;
   color: #475569;
   font-size: 14px;
   font-weight: 600;
   padding: 0 16px;
   margin: 0;
   border-radius: 12px;
   height: 44px;
   line-height: 42px;
   min-width: 44px;
   text-align: center;
   text-decoration: none;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
 }
 .pagination a::before {
   content: '';
   position: absolute;
   top: 0;
   left: -120%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
   transition: left 0.55s;
 }
 .pagination a:hover::before { left: 120%; }
 .pagination a:hover {
   color: #ffffff;
   background: var(--pg);
   border-color: var(--pg);
   transform: translateY(-2px);
   box-shadow: 0 10px 24px var(--pg-shadow);
 }
 .pagination a.page-num-current {
   color: #ffffff;
   background: linear-gradient(135deg, #6b7280, #4b5563);
   border-color: var(--pg-dark);
   font-weight: 700;
   transform: translateY(-1px);
   box-shadow: 0 8px 20px var(--pg-shadow);
   position: relative;
 }
 .pagination a.page-num-current:hover {
   background: linear-gradient(135deg, #4b5563, #374151);
 }
 .pagination a.page-num:not(.page-num-current):hover {
   background: linear-gradient(135deg, #9ca3af, #6b7280);
   border-color: var(--pg);
   box-shadow: 0 8px 18px var(--pg-shadow);
 }
 .pagination span {
   color: #6b7280;
   font-size: 13px;
   padding: 0 12px;
   margin: 0 8px;
   font-weight: 500;
   background: #f1f5f9;
   border-radius: 8px;
   height: 36px;
   line-height: 36px;
   border: 1px solid #e2e8f0;
   display: inline-flex;
   align-items: center;
 }
 .pagination a.hidden-sm { display: inline-flex; }
 /* 特殊按钮样式 */
 .pagination a[title*="首页"], .pagination a[title*="尾页"] { font-weight: 700; letter-spacing: 1px; }
 .pagination a[title*="上一页"], .pagination a[title*="下一页"] { font-weight: 700; }
 /* 加载动画效果 */
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
 .pagination a.loading { animation: pulse 1.5s infinite; }
 .page { text-align: center; padding: 60px 20px; color: #6b7280; font-size: 16px; background: #f8fafc; border-radius: 12px; margin: 40px 0; border: 2px dashed #e2e8f0; }
 /* 响应式设计 */
 @media (max-width: 768px) {
   .pagebar .pagination { margin: 30px 0; gap: 6px; }
   .pagination a { padding: 0 12px; height: 40px; line-height: 38px; min-width: 40px; font-size: 13px; border-radius: 10px; }
   .pagination span { padding: 0 8px; height: 32px; line-height: 32px; font-size: 12px; margin: 0 4px; }
   .pagination a.hidden-sm { display: none; }
 }
 @media (max-width: 480px) {
   .pagebar .pagination { gap: 4px; }
   .pagination a { padding: 0 10px; height: 36px; line-height: 34px; min-width: 36px; font-size: 12px; margin: 2px; }
   .pagination span { padding: 0 6px; height: 28px; line-height: 28px; margin: 2px; font-size: 11px; }
 }