/* ============================================================
   JINGLEIKE 首页改版 · 增量覆盖样式
   - 后置加载，原 style.css 不动，回滚只需删掉 index.htm 里的一行 link
   - 品牌色取自站内 banner：藏青 #0a2a43 + 青绿 #129c85
   ============================================================ */

:root {
    --jlk-navy: #0a2a43;
    --jlk-navy-2: #10324f;
    --jlk-teal: #129c85;
    --jlk-teal-dark: #0c7d6b;
    --jlk-line: #e6ebef;
    --jlk-muted: #6b7784;
    --jlk-soft: #f4f7f9;
    --jlk-radius: 6px;
}

/* ---------- 1. 版心与板块节奏 ---------- */
.index_main .layout {
    width: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.index_product,
.banner_layer,
.index_featured,
.index_cates,
.index_stats,
.index_adv,
.index_cases {
    margin-bottom: 80px;
}
.index_ad {
    padding-top: 34px;
    margin-bottom: 70px;
}

/* ---------- 2. 板块标题：居中 + 青绿短下划线 ---------- */
.index_hd {
    margin-bottom: 46px;
    text-align: center;
}
.index_hd .hd_title,
.index_hd .hd_title a {
    color: var(--jlk-navy);
    font-size: 30px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.index_hd .hd_title:after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin: 16px auto 0;
    background: var(--jlk-teal);
    border-radius: 2px;
}
.index_hd .hd_desc {
    max-width: 780px;
    margin: 0 auto;
    padding-top: 14px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--jlk-muted);
}

/* ---------- 3. 产品卡：白卡 + 方图 + 参数 + 询盘按钮 ---------- */
.index_main .product_item .item_title {
    padding: 0;
}
.product_item figure {
    height: 100%;
    margin: 0 10px 20px;
    background: #fff;
    border: 1px solid var(--jlk-line);
    border-radius: var(--jlk-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.product_item figure:hover {
    border-color: #d3dee6;
    box-shadow: 0 10px 26px rgba(10, 42, 67, .10);
    transform: translateY(-3px);
}

/* 方图容器：统一比例，contain 不裁产品 */
.product_item .item_img {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 96%;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}
.product_item .item_img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 14px;
    box-sizing: border-box;
    object-fit: contain;
    transition: transform .45s ease;
}
.product_item figure:hover .item_img img {
    transform: scale(1.05);
}
/* 覆盖整卡的链接：item_img 用 padding 撑高，必须用 inset 定位，否则高度塌成 0 */
.product_item .item_img a {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    z-index: 2;
}
/* 干掉 .swiper-wrapper li a:before 蒙在商品图上的黑色渐变 */
.product_item .item_img a:before {
    display: none;
}

/* 标题：最多 2 行、行数固定，不再截成半句 */
.index_main .product_item .item_title,
.index_main .product_item .item_title a {
    font-size: 14px;
    line-height: 1.6;
    color: var(--jlk-navy);
}
.index_main .product_item .item_title {
    padding: 14px 14px 6px;
}
.index_main .product_item .item_title a,
.index_main .index_product .item_title a,
.index_main .index_featured .item_title a {
    display: -webkit-box;
    height: auto;
    min-height: 3.2em;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color .3s ease;
}
.product_item figure:hover .item_title a {
    color: var(--jlk-teal);
}

/* 参数行 */
.item_spec {
    height: 3.3em;
    margin: 0;
    padding: 0 14px 12px;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--jlk-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 询盘按钮 */
.item_cta {
    display: block;
    height: 38px;
    margin: 0 14px 14px;
    background: var(--jlk-teal);
    border-radius: 4px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 38px;
    text-align: center;
    letter-spacing: .02em;
    transition: background-color .25s ease;
}
.product_item figure:hover .item_cta {
    background: var(--jlk-teal-dark);
}

/* 每行数量：桌面 4 列 */
.index_main .index_product .product_item,
.index_main .index_featured .product_item {
    float: left;
    width: 25%;
    max-width: 25%;
    flex: 0 0 25%;
}
.index_main .index_product .product_items,
.index_main .index_featured .product_items {
    justify-content: flex-start;
}

/* HOT PRODUCTS：模板没有加载 Swiper 的样式表，滑块靠内联宽高硬撑，
   与卡片自身边距叠加后会横向溢出（第 4 张被裁）。
   这里用 !important 压过 Swiper 写在内联 style 上的宽度与 transform，
   把这排压平成与 PRODUCTS 一致的静态 4 列网格。
   注意：Swiper 即使被压平，仍可能在 resize 时重写内联宽高，
   所以宽度与 transform 必须带 !important 才会一直生效。 */
.index_main .index_product .index_bd > .layout {
    display: block;
}
.index_main .index_product .featured_slider {
    display: block !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
}
.index_main .index_product .product_items {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    width: auto !important;
    transform: none !important;
    margin-left: -10px;
    margin-right: -10px;
}
.index_main .index_product .product_item {
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 25% !important;
    margin-right: 0 !important;
    float: none;
}
/* 由 float 改 flex 后，被压平淡化的 swiper-slide 不再需要行内块行为 */
.index_main .index_product .product_item.swiper-slide {
    display: block;
}
/* 压平为网格后，滑块箭头失去意义，直接隐藏（否则会浮在卡片上方） */
.index_main .index_product .index_swiper_control {
    display: none;
}
/* 结构冗余说明：外层 div.featured_slider 本身带 swiper-wrapper，
   里面又嵌了一层 ul.swiper-wrapper —— Swiper 认到的“slide”其实是整个 ul，
   所以宽度算错。把外层容器彻底退出 Swiper 的定位体系。 */
.index_main .index_product .featured_slider.swiper-wrapper {
    overflow: visible !important;
    position: static !important;
    will-change: auto !important;
}

/* ---------- 4. 公司简介 + 数据指标条 ---------- */
.index_stats {
    padding: 0;
}
.stats_intro {
    max-width: 880px;
    margin: 0 auto 46px;
    text-align: center;
    font-size: 15px;
    line-height: 1.9;
    color: var(--jlk-muted);
}
.stats_band {
    background: var(--jlk-soft);
    border-radius: var(--jlk-radius);
    padding: 52px 30px;
}
.stats_row {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.stat_item {
    position: relative;
    flex: 1 1 25%;
    max-width: 25%;
    padding: 0 16px;
    box-sizing: border-box;
}
.stat_item + .stat_item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    width: 1px;
    height: 80%;
    background: #dae3e9;
}
.stat_ico {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    color: var(--jlk-teal);
}
.stat_ico svg {
    display: block;
    width: 100%;
    height: 100%;
}
.stat_num {
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    color: var(--jlk-teal);
    letter-spacing: -.01em;
}
.stat_label {
    margin-top: 12px;
    font-size: 14px;
    color: var(--jlk-navy);
}
.stats_more {
    margin-top: 44px;
    text-align: center;
}
.link_more {
    display: inline-block;
    min-width: 168px;
    height: 44px;
    padding: 0 34px;
    background: var(--jlk-teal);
    border-radius: 4px;
    color: #fff !important;
    font-size: 15px;
    line-height: 44px;
    text-align: center;
    transition: background-color .25s ease;
    box-sizing: border-box;
}
.link_more:hover {
    background: var(--jlk-teal-dark);
}

/* ---------- 5. 四大优势 ---------- */
.index_adv .adv_row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.adv_item {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 10px 20px;
    box-sizing: border-box;
}
.adv_inner {
    height: 100%;
    padding: 34px 26px 30px;
    background: #fff;
    border: 1px solid var(--jlk-line);
    border-radius: var(--jlk-radius);
    box-sizing: border-box;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.adv_inner:hover {
    border-color: #d3dee6;
    box-shadow: 0 10px 26px rgba(10, 42, 67, .08);
    transform: translateY(-3px);
}
.adv_ico {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    color: var(--jlk-teal);
}
.adv_ico svg {
    display: block;
    width: 100%;
    height: 100%;
}
.adv_tit {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--jlk-navy);
    letter-spacing: 0;
}
.adv_desc {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--jlk-muted);
}

/* ---------- 6. 客户案例 & 新闻（左大卡 + 右侧列表） ---------- */
.case_news_grid {
    display: flex;
    gap: 20px;
    align-items: stretch;
}
.cn_feature {
    flex: 1 1 44%;
    min-width: 0;
    display: flex;
}
.cn_side {
    flex: 1 1 56%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cn_item {
    background: #fff;
    border: 1px solid var(--jlk-line);
    border-radius: var(--jlk-radius);
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.cn_item:hover {
    border-color: #d3dee6;
    box-shadow: 0 10px 26px rgba(10, 42, 67, .08);
    transform: translateY(-3px);
}
.cn_link {
    display: block;
    height: 100%;
}
.cn_img {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    overflow: hidden;
    background: var(--jlk-soft);
}
.cn_img img,
.cn_thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.cn_item:hover .cn_img img,
.cn_item:hover .cn_thumb img {
    transform: scale(1.04);
}
.cn_body {
    padding: 20px 22px 24px;
}
.cn_date {
    display: block;
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--jlk-teal);
    letter-spacing: .04em;
}
.cn_title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--jlk-navy);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cn_desc {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--jlk-muted);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.cn_more {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--jlk-teal);
}
.cn_item:hover .cn_more {
    color: var(--jlk-teal-dark);
}

/* 左侧大卡：图撑满剩余高度 */
.cn_feature .cn_item {
    width: 100%;
}
.cn_big .cn_link {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.cn_big .cn_img {
    flex: 1 1 auto;
    height: auto;
    min-height: 220px;
    padding-bottom: 0;
}
.cn_big .cn_body {
    flex: 0 0 auto;
    padding: 26px 28px 30px;
}
.cn_big .cn_title {
    font-size: 21px;
    -webkit-line-clamp: 3;
}

/* 右侧列表：缩略图 + 文字的横向卡 */
.cn_side .cn_item {
    display: flex;
    flex: 1 1 auto;
}
.cn_side .cn_link {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.cn_thumb {
    position: relative;
    flex: 0 0 34%;
    overflow: hidden;
    background: var(--jlk-soft);
}
.cn_side .cn_body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cn_side .cn_title {
    font-size: 15px;
}

/* ---------- 7. 底部快捷入口四卡 ---------- */
.cate_item .item_inner {
    height: 100%;
    margin: 0 10px;
    padding: 34px 26px 30px;
    background: #fff;
    border: 1px solid var(--jlk-line);
    border-radius: var(--jlk-radius);
    text-align: left;
    box-sizing: border-box;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.cate_item .item_inner:hover {
    border-color: #d3dee6;
    box-shadow: 0 10px 26px rgba(10, 42, 67, .08);
    transform: translateY(-3px);
}
.cate_item .item_img,
.cate_item .item_img img {
    width: 40px;
    height: 40px;
}
.cate_item .item_img {
    margin-bottom: 20px;
}
.cate_item .item_img:before,
.cate_item .item_img:after {
    display: none;
}
.cate_item .item_inner:hover .item_img img {
    transform: none;
}
.cate_item .item_info {
    padding: 0;
}
.cate_item .item_tit {
    height: auto;
    margin-bottom: 10px;
    color: var(--jlk-navy);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}
.cate_item .item_desc {
    height: auto;
    max-height: 5.4em;
    padding: 0;
    overflow: hidden;
    color: var(--jlk-muted);
    font-size: 13.5px;
    line-height: 1.8;
    box-sizing: border-box;
}
.cate_item .item_inner .item_desc:before {
    display: none;
}

/* ---------- 8. 页脚可读性 ---------- */
.foot_bar .coyright,
.foot_bar .foot_left,
.foot_bar .foot_right a {
    color: #8794a0;
    font-size: 13px;
}
.foot_bar .foot_right a:hover {
    color: var(--jlk-teal);
}
.foot_item .title {
    color: var(--jlk-navy);
    font-size: 17px;
    font-weight: 600;
}
.foot_item a:hover {
    color: var(--jlk-teal);
}

/* ---------- 9. 响应式 ---------- */
@media only screen and (max-width: 1199px) and (min-width: 992px) {
    .index_main .index_product .product_item,
    .index_main .index_featured .product_item {
        width: 33.3333%;
        max-width: 33.3333%;
        flex: 0 0 33.3333%;
    }
    .index_hd .hd_title {
        font-size: 26px;
    }
    .adv_item {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .case_news_grid {
        gap: 16px;
    }
    .cn_big .cn_title {
        font-size: 18px;
    }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
    .index_main .index_product .product_item,
    .index_main .index_featured .product_item {
        width: 33.3333%;
        max-width: 33.3333%;
        flex: 0 0 33.3333%;
    }
    .index_hd .hd_title {
        font-size: 24px;
    }
    .stat_item {
        flex: 0 0 50%;
        max-width: 50%;
        padding-bottom: 28px;
    }
    .stat_item + .stat_item:before {
        display: none;
    }
    .adv_item {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .case_news_grid {
        gap: 16px;
    }
    .cn_big .cn_title {
        font-size: 18px;
    }
}

@media only screen and (max-width: 767px) {
    .index_product,
    .banner_layer,
    .index_featured,
    .index_cates,
    .index_stats,
    .index_adv,
    .index_cases {
        margin-bottom: 46px;
    }
    .index_hd {
        margin-bottom: 28px;
    }
    .index_hd .hd_title {
        font-size: 21px;
    }
    .index_hd .hd_desc {
        font-size: 13.5px;
    }
    .index_main .index_product .product_item,
    .index_main .index_featured .product_item {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }
    .product_item figure,
    .index_featured .product_item figure {
        margin: 0 5px 10px;
    }
    .index_main .product_item .item_title {
        padding: 12px 12px 5px;
    }
    .index_main .product_item .item_title,
    .index_main .product_item .item_title a {
        font-size: 13.5px;
    }
    .item_spec {
        padding: 0 12px 10px;
        font-size: 12px;
    }
    .item_cta {
        height: 34px;
        margin: 0 12px 12px;
        font-size: 12.5px;
        line-height: 34px;
    }
    .stats_band {
        padding: 34px 16px;
    }
    .stat_item {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 10px 26px;
    }
    .stat_item + .stat_item:before {
        display: none;
    }
    .stat_num {
        font-size: 28px;
    }
    .stat_label {
        font-size: 12.5px;
    }
    .adv_item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .adv_inner {
        padding: 26px 22px 24px;
    }
    .case_news_grid {
        flex-direction: column;
        gap: 14px;
    }
    .cn_big .cn_img {
        min-height: 180px;
    }
    .cn_big .cn_body {
        padding: 20px 22px 24px;
    }
    .cn_big .cn_title {
        font-size: 17px;
    }
    .cn_thumb {
        flex: 0 0 38%;
    }
    .cate_item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .cate_item .item_inner {
        margin: 0 0 14px;
        padding: 26px 22px 24px;
    }
}

/* ============================================================
   10. 蓝色遗留色统一为品牌青绿
   ------------------------------------------------------------
   原模板 style.css 整体是蓝色主题（主蓝 #02a0e1 / 浅蓝 #53b9e3 /
   亮蓝 #13adeb / 深蓝 #1f2d5e）。换青绿体系后，导航当前项、页脚
   顶部横线、订阅按钮等处仍在吃原模板的蓝，这里集中覆盖一遍。
   ============================================================ */

/* --- 链接与通用按钮 --- */
a:hover { color: var(--jlk-teal); }
.sys_btn { background-color: var(--jlk-teal); }
.sys_btn:hover { color: #fff !important; background-color: var(--jlk-teal-dark); }
.btn_wave_circle { background-color: var(--jlk-teal); }
.gotop { background-color: var(--jlk-teal); }

/* --- 顶部导航：当前项 / hover / 下拉菜单装饰 --- */
.nav_wrap .head_nav li.active > a,
.nav_wrap .head_nav > li:hover > a,
.nav_wrap .head_nav > li li:hover > a { color: var(--jlk-teal); }
.nav_wrap .head_nav > li li a:before,
.nav_wrap .head_nav li ul:before { background-color: var(--jlk-teal); }
.nav_wrap .head_nav > li li:hover > a b:after { border-left-color: var(--jlk-teal); }
.fixed-nav .nav_wrap { background-color: var(--jlk-navy); }

/* --- 首屏轮播：箭头 hover 与分页点 --- */
.slider_banner .swiper-button-prev:hover,
.slider_banner .swiper-button-next:hover {
    border-color: var(--jlk-teal);
    background-color: var(--jlk-teal);
}
.slider_banner .swiper-pagination-bullet-active { border-color: var(--jlk-teal); }
.slider_banner .swiper-pagination-bullet-active:before { background-color: var(--jlk-teal); }

/* --- 页脚：顶部横线 / 列表强调 / 右下角链接 / 订阅按钮 --- */
.foot_service { border-top-color: var(--jlk-teal); }
.foot_txt_list li a:before,
.news_cell .news_tit a:before { background-color: var(--jlk-teal); }
.foot_bar .foot_right,
.foot_bar .foot_right a { color: var(--jlk-teal); }
.company_subscribe .sys_btn {
    display: block;
    background-color: var(--jlk-teal);
    border-radius: var(--jlk-radius);
    letter-spacing: .06em;
}
.company_subscribe .sys_btn:hover { background-color: var(--jlk-teal-dark); }

/* --- 卡片 hover 标题 --- */
.index_ad .ad_item:hover .item_title,
.product_item figure:hover .item_title a { color: var(--jlk-teal); }

/* --- 内页连带项（产品详情 / 侧栏 / 搜索），顺手统一 --- */
.product-btn-wrap .email,
.product-btn-wrap .pdf { background: var(--jlk-teal); border-color: var(--jlk-teal); }
.product-btn-wrap a:hover { color: var(--jlk-teal) !important; }
.side-tit-bar .side-tit,
.side-cate li .icon-cate:hover,
.detail-tabs .title.current,
.goods-may-like .title { background: var(--jlk-navy); border-color: var(--jlk-navy); }
.side-cate li.nav-current > .icon-cate,
.side-cate li:hover > .icon-cate { color: var(--jlk-navy); }
.product-view .image-additional li.current img { border-color: var(--jlk-teal); }
.side-cate li li a:hover,
.blog-item .item-info .item-more { color: var(--jlk-teal); }
.blog-item .item-info .item-more:after,
.blog-item .item-info .item-more:hover { background-color: var(--jlk-teal); }

/* ============================================================
   11. 底部快捷入口四卡：图标统一为品牌青绿
   ------------------------------------------------------------
   cate01~cate04.png 原本是红 / 紫 / 蓝 / 青四种不同色相的方块图标，
   并排放会打散品牌色感。用滤镜链归一：grayscale 先把四种色相压成
   灰（消除色差）→ sepia 染成棕黄 → hue-rotate 把棕黄转到青绿。
   图标里的白色符号饱和度为 0，整条链路都不会改变它。
   ============================================================ */
.index_cates .cate_item .item_img img {
    -webkit-filter: grayscale(1) sepia(1) saturate(4.2) hue-rotate(128deg) brightness(.9);
    filter: grayscale(1) sepia(1) saturate(4.2) hue-rotate(128deg) brightness(.9);
}

/* ============================================================
   12. 案例区：文章没有缩略图时，不留“暂无图片”占位
   ------------------------------------------------------------
   新闻类文档多数没设缩略图。实测易优并不会输出空的 src，
   而是回落到系统默认占位图 /uploads/thumb/300_300/not_adv.jpeg，
   于是右栏挂着灰色的相机占位符，观感很差。
   这里按该路径把它换掉，改用品牌青绿渐变补位，保住右栏版式。
   ============================================================ */
.index_cases .cn_thumb img[src*="not_adv"],
.index_cases .cn_thumb img[src=""] { display: none; }
.index_cases .cn_thumb:has(img[src*="not_adv"]),
.index_cases .cn_thumb:has(img[src=""]) {
    background: linear-gradient(135deg, rgba(18, 156, 133, .95), rgba(10, 42, 67, .95));
}
.index_cases .cn_thumb:has(img[src*="not_adv"]):after,
.index_cases .cn_thumb:has(img[src=""]):after {
    content: "JINGLEIKE";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
}

/* ============================================================
   13. 页脚新闻标题
   ------------------------------------------------------------
   footer.htm 原文用 titlelen='20' 截标题，英文会被硬砍成
   “32 Real UV LED Curin”（已放宽上限）。但真正的元凶是原模板
   把 .news_tit 锁死在 height:1.8em —— 正好一行，超出直接 overflow
   裁掉。这里必须先把 height 放开，再交给 2 行省略号接管截断，
   否则改多大 titlelen 都只会显示一行。
   ============================================================ */
.news_cell .news_tit {
    height: auto;
    max-height: 3em;
    overflow: hidden;
}
.news_cell .news_tit a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* 页脚六个社交图标原本是红 / 蓝 / 紫等各色方块，并排很跳，
   与整站青绿体系打架。常态压成中性灰并入版面，hover 再恢复
   各平台本色——既统一，又不牺牲“一眼认出是哪个平台”。 */
.foot_sns img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: .55;
    transition: filter .25s ease, opacity .25s ease;
}
.foot_sns a:hover img {
    -webkit-filter: none;
    filter: none;
    opacity: 1;
}