@charset "utf-8";
/* ==========================================================================
   通锐复材 站点样式：顶部导航 + 首页轮播
   样式参考：模板 k520（AmazeUI + Swiper 结构）
   说明：本文件在 style.css 之后加载，使用 .tr- 前缀避免与默认模板冲突
   ========================================================================== */

:root {
    --tr-main: #0066cc;        /* 主色：导航下划线、悬停高亮 */
    --tr-dark: #1e2136;        /* 轮播图底色 */
    --tr-nav-h: 100px;         /* 首页导航栏高度 */
}

/* 容器（参考站点 .am-container） */
.tr-container {
    max-width: 1430px;
    margin: 0 auto;
    padding: 0 15px;
}

.tr-container::after {
    content: "";
    display: block;
    clear: both;
}

/* --------------------------------------------------------------------------
   1. 顶部导航
   - 默认（内页）：白底、深色文字、吸顶
   - 首页：.has-overlay-header 下透明浮于轮播之上，滚动后加深色背景并吸附顶部
   -------------------------------------------------------------------------- */
.tr-header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1920;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    transition: all .3s linear;
}

.tr-header .tr-container {
    position: relative;
}

/* Logo */
.tr-logo {
    float: left;
    padding-top: 18px;
}

.tr-logo img {
    float: left;
    height: 40px;
    width: auto;
}

.tr-logo-txt {
    float: left;
    display: block;
    color: #222;
    line-height: 1;
    padding-top: 4px;
}

.tr-logo-txt .cn {
    display: block;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
}

.tr-logo-txt .en {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    color: #999;
    margin-top: 4px;
    text-transform: uppercase;
}

/* 导航主体（整体略向右靠，右端与容器右边对齐） */
.tr-menu {
    float: right;
    width: 70%;
    padding-right: 0;
}

.tr-nav {
    float: left;
    width: 94%;
    /* 整体向右挪一点：左偏 6%，右端与容器右边对齐 */
    margin-left: 6%;
}

.tr-ulnav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tr-ulnav > li {
    position: relative;
    flex: auto;
    -webkit-box-flex: auto;
    text-align: center;
}

.tr-ulnav > li > a {
    display: inline-block;
    line-height: 76px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    position: relative;
    transition: color .3s linear;
}

.tr-ulnav > li > a i {
    margin-left: 4px;
    font-size: 12px;
}

/* 悬停 / 当前栏目下划线 */
.tr-ulnav > li > a:before {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: var(--tr-main);
    position: absolute;
    left: 50%;
    margin-left: -50%;
    bottom: 20px;
    transition: all .3s linear;
}

.tr-ulnav > li:hover > a:before,
.tr-ulnav > li.active > a:before,
.tr-ulnav > li.on > a:before {
    width: 100%;
}

.tr-ulnav > li:hover > a,
.tr-ulnav > li.active > a {
    color: var(--tr-main);
}

/* 下级菜单（白色卡片 + 小三角） */
.tr-ulnav > li .tr-subnav {
    position: absolute;
    width: 100%;
    left: 0;
    top: 68px;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    box-shadow: 0 2px 38px rgba(0, 0, 0, .1);
    border-left: 1px solid #f5f5f5;
    border-right: 1px solid #f5f5f5;
    border-radius: 5px;
    height: auto;
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    transition: all .36s ease;
}

.tr-ulnav > li .tr-subnav:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: -8px;
    margin-left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #fff;
}

.tr-ulnav > li:hover .tr-subnav {
    opacity: 1;
    visibility: visible;
    top: 90px;
}

.tr-ulnav > li .tr-subnav li {
    border-bottom: 1px solid #f5f5f5;
}

.tr-ulnav > li .tr-subnav li:first-child {
    border-radius: 5px 5px 0 0;
}

.tr-ulnav > li .tr-subnav li:last-child {
    border-bottom: none;
    border-radius: 0 0 5px 5px;
}

.tr-ulnav > li .tr-subnav li a {
    display: block;
    padding: 8px 5px;
    line-height: 22px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    transition: all .2s ease-in-out;
}

.tr-ulnav > li .tr-subnav li a:hover {
    color: var(--tr-main);
}

/* 移动端展开箭头（桌面隐藏） */
.tr-ulnav > li .tr-xm {
    display: none;
}

/* 汉堡按钮（移动端显示） */
.tr-menu-bar {
    display: none;
}

/* 首页：透明悬浮 */
.has-overlay-header .tr-header {
    position: absolute;
    background: transparent;
    box-shadow: none;
}

.has-overlay-header .tr-logo {
    padding-top: 29px;
}

/* 首页首屏为深色背景，原 logo 为近黑色，反相为白色以保证可见 */
.has-overlay-header .tr-logo img {
    filter: brightness(0) invert(1);
}

.has-overlay-header .tr-logo-txt,
.has-overlay-header .tr-logo-txt .en {
    color: #fff;
}

.has-overlay-header .tr-ulnav > li > a {
    color: #fff;
    line-height: var(--tr-nav-h);
}

.has-overlay-header .tr-ulnav > li > a:before {
    bottom: 28px;
}

.has-overlay-header .tr-ulnav > li:hover > a,
.has-overlay-header .tr-ulnav > li.active > a {
    color: #fff;
}

/* 滚动后吸附：内页白色吸顶 */
.tr-header.tr-fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
}

/* 滚动后吸附：首页深色吸顶（保持白色文字、高度收窄） */
.has-overlay-header .tr-header.tr-fixed {
    --tr-nav-h: 72px;
    background: rgba(0, 0, 0, .9);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}

.has-overlay-header .tr-header.tr-fixed .tr-logo {
    padding-top: 16px;
}

.has-overlay-header .tr-header.tr-fixed .tr-ulnav > li > a:before {
    bottom: 16px;
}

/* --------------------------------------------------------------------------
   2. 移动端导航遮罩
   -------------------------------------------------------------------------- */
.tr-warpbg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .88);
    z-index: 1990;
    display: none;
}

/* 导航抽屉关闭按钮（仅移动端显示） */
.tr-nav-close {
    display: none;
}

/* --------------------------------------------------------------------------
   3. 首页轮播图
   -------------------------------------------------------------------------- */
.tr-banner {
    position: relative;
    background: var(--tr-dark);
    overflow: hidden;
}

.tr-banner .swiper-slide {
    position: relative;
    overflow: hidden;
    background: var(--tr-dark);
}

.tr-banner .tr-banitem,
.tr-banner .tr-banitem a {
    display: block;
}

.tr-banner .tr-img100 {
    display: block;
    width: 100%;
    height: 640px;
    object-fit: cover;
}

/* 当前张：缓慢缩小的动效 */
.tr-banner .swiper-slide-active .tr-banitem .tr-img100 {
    -webkit-animation: tr-banner-zoom 6s ease 1 forwards;
    animation: tr-banner-zoom 6s ease 1 forwards;
}

@keyframes tr-banner-zoom {
    from {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* 分页：右侧竖排圆环 */
.tr-ban-yuand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}

.tr-ban-yuand .tr-container {
    position: relative;
}

.tr-banner .tr-banpa {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    float: right;
    text-align: center;
}

.tr-banner .tr-banpa .swiper-pagination-bullet {
    display: block;
    width: 14px;
    height: 14px;
    margin: 25px 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0);
    opacity: 1;
    border-radius: 50%;
    position: relative;
    pointer-events: auto;
    cursor: pointer;
    transition: border-color .3s linear;
}

.tr-banner .tr-banpa .swiper-pagination-bullet:before {
    content: "";
    display: block;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.tr-banner .tr-banpa .swiper-pagination-bullet-active {
    background: none;
    border-color: rgba(255, 255, 255, 1);
}

/* 左右箭头：默认极淡，悬停变亮 */
.tr-banner .swiper-button-next,
.tr-banner .swiper-button-prev {
    --swiper-navigation-size: 36px;
    --swiper-navigation-color: #fff;
    background: none;
    opacity: .2;
    transition: opacity .3s linear;
}

.tr-banner .swiper-button-next {
    right: 30px;
    left: auto;
}

.tr-banner .swiper-button-prev {
    left: 30px;
    right: auto;
}

.tr-banner .swiper-button-next:hover,
.tr-banner .swiper-button-prev:hover {
    opacity: .8;
}

/* --------------------------------------------------------------------------
   4. 响应式
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1680px) {
    .tr-container {
        max-width: 1300px;
    }
}

@media screen and (max-width: 1440px) {
    .tr-container {
        max-width: 1200px;
    }

    .tr-ulnav > li > a {
        font-size: 15px;
    }

    .tr-banner .tr-img100 {
        height: 560px;
    }
}

@media screen and (max-width: 1199px) {
    .tr-menu {
        width: 76%;
        padding-right: 0;
    }

    .tr-ulnav > li > a {
        font-size: 14px;
    }

    .tr-banner .tr-img100 {
        height: 460px;
    }
}

@media screen and (max-width: 1024px) {
    .tr-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* logo */
    .tr-logo,
    .has-overlay-header .tr-logo {
        padding-top: 12px;
    }

    .tr-logo img {
        height: 36px;
    }

    .tr-logo-txt .cn {
        font-size: 20px;
    }

    .tr-logo-txt .en {
        font-size: 10px;
    }

    /* 汉堡按钮 */
    .tr-menu-bar {
        display: block;
        width: 26px;
        height: 18px;
        float: right;
        position: absolute;
        right: 1.5rem;
        top: 22px;
        border-bottom: 2px solid #333;
        cursor: pointer;
        z-index: 1993;
    }

    .tr-menu-bar:after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background: #333;
        position: absolute;
        left: 0;
        top: 0;
    }

    .tr-menu-bar:before {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background: #333;
        position: absolute;
        left: 0;
        top: 50%;
    }

    .has-overlay-header .tr-menu-bar,
    .has-overlay-header .tr-menu-bar:after,
    .has-overlay-header .tr-menu-bar:before {
        border-color: #fff;
        background-color: #fff;
    }

    .has-overlay-header .tr-menu-bar {
        background: none;
    }

    /* 抽屉式导航 */
    .tr-nav {
        position: fixed;
        width: 100%;
        height: 100%;
        left: -100%;
        top: 0;
        z-index: 99999;
        float: none;
        margin-left: 0;   /* 桌面端的右移偏移在抽屉模式下取消 */
        transition: all .3s linear;
    }

    .tr-nav.active {
        left: 0;
    }

    .tr-ulnav {
        display: block;
        width: 62%;
        height: 100%;
        background: #737e8a;
        overflow-y: auto;
        position: relative;
    }

    .tr-ulnav > li {
        width: 100%;
        float: none;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        text-align: left;
        flex: none;
    }

    .tr-ulnav > li > a,
    .has-overlay-header .tr-ulnav > li > a {
        display: block;
        line-height: 56px;
        padding: 0 1.5rem;
        color: #fff;
        font-weight: 400;
    }

    .tr-ulnav > li > a:before,
    .tr-ulnav > li:hover > a:before {
        display: none;
        width: 0;
    }

    .tr-ulnav > li > a i {
        display: none;
    }

    .tr-ulnav > li .tr-xm {
        display: block;
        position: absolute;
        width: 56px;
        right: 0;
        top: 0;
        line-height: 56px;
        text-align: center;
        color: rgba(255, 255, 255, .81);
        cursor: pointer;
    }

    .tr-ulnav > li .tr-subnav,
    .tr-ulnav > li:hover .tr-subnav {
        position: relative;
        display: none;
        left: auto;
        top: 0;
        width: 100%;
        opacity: 1;
        visibility: visible;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: rgba(0, 0, 0, .18);
    }

    .tr-ulnav > li .tr-subnav:before {
        display: none;
    }

    .tr-ulnav > li .tr-subnav.show {
        display: block;
    }

    .tr-ulnav > li .tr-subnav li {
        border-bottom-color: rgba(255, 255, 255, .08);
    }

    .tr-ulnav > li .tr-subnav li a {
        color: rgba(255, 255, 255, .85);
        padding-left: 2.6rem;
        line-height: 44px;
    }

    .tr-nav-close {
        display: block;
        position: absolute;
        right: 38%;
        top: 10px;
        color: rgba(255, 255, 255, .7);
        font-size: 22px;
        z-index: 10;
        cursor: pointer;
    }

    .tr-nav-close:hover {
        color: #fff;
    }

    .tr-warpbg.show {
        display: block;
    }

    /* 轮播 */
    .tr-banner .tr-img100 {
        height: 52vw;
        min-height: 200px;
    }

    .tr-banner .swiper-button-next,
    .tr-banner .swiper-button-prev {
        opacity: 0;
    }

    .tr-banner .tr-banpa .swiper-pagination-bullet {
        margin: 15px 0;
    }
}

@media screen and (max-width: 767px) {
    .tr-ulnav {
        width: 72%;
    }

    .tr-nav-close {
        right: 28%;
    }

    .tr-ulnav > li > a,
    .has-overlay-header .tr-ulnav > li > a {
        line-height: 50px;
    }

    .tr-ulnav > li .tr-xm {
        line-height: 50px;
    }
}

/* --------------------------------------------------------------------------
   5. 首页「关于我们」板块（样式参考 k712 模板）
   -------------------------------------------------------------------------- */
.tr-about {
    position: relative;
    padding: 80px 0 70px;
    background: #f5f8fc;
    overflow: hidden;
}

.tr-about-box {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    position: relative;
}

/* 左侧文字 */
.tr-ab-txt {
    width: 45%;
    position: relative;
    z-index: 2;
}

.tr-main-title b {
    display: block;
    font-size: 45px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--tr-main);
}

.tr-main-title p {
    margin: 0;
    font-size: 45px;
    line-height: 1.1;
    font-weight: bold;
    color: rgba(0, 0, 0, .12);
    font-family: Arial, Helvetica, sans-serif;
}

.tr-ab-con p {
    font-size: 16px;
    line-height: 30px;
    color: #333;
    margin-top: 20px;
    text-align: justify;
}

.tr-ab-more {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    height: 47px;
    line-height: 45px;
    padding: 0 30px;
    max-width: 160px;
    margin-top: 30px;
    color: #fff;
    background: var(--tr-main);
    border: 1px solid var(--tr-main);
    border-radius: 50px;
    overflow: hidden;
    white-space: nowrap;
    transition: all .5s ease 0s;
}

.tr-ab-more i {
    margin-right: 10px;
    color: #fff;
    transition: all .5s ease 0s;
}

.tr-ab-more em {
    font-style: normal;
    color: #fff;
}

.tr-ab-more:hover {
    color: #fff;
    padding-left: 50px;
    max-width: 220px;
}

/* 右侧配图 */
.tr-ab-right {
    position: absolute;
    width: 50%;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 5;
}

.tr-ab-pic {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* 数据统计 */
.tr-ab-bottom {
    width: 100%;
    position: relative;
    z-index: 99;
    margin: 60px auto 0;
}

.tr-ab-bottom ul {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tr-ab-bottom ul li {
    width: 23%;
    padding: 40px 0 30px;
    background: #fff;
    box-shadow: 0 .25rem 1rem 0 rgba(100, 100, 100, .24);
    position: relative;
    transition: all .3s linear;
}

.tr-ab-bottom ul li:hover {
    background-color: var(--tr-main);
    cursor: pointer;
    border-color: var(--tr-main);
}

.tr-ab-num {
    display: flex;
    align-items: center;
    padding-left: 15%;
}

.tr-ab-num b {
    color: var(--tr-main);
    font-size: 55px;
    line-height: 55px;
    font-weight: bolder;
    margin-bottom: 10px;
}

.tr-ab-num i {
    font-style: normal;
    font-size: 24px;
    line-height: 24px;
    color: #666;
    padding-left: 6px;
}

.tr-ab-bottom li > i {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    color: var(--tr-main);
}

.tr-ab-bottom li p {
    color: #666;
    font-size: 18px;
    line-height: 24px;
    padding-left: 15%;
    margin: 0;
}

.tr-ab-bottom li:hover p,
.tr-ab-bottom li:hover b,
.tr-ab-bottom li:hover i {
    color: #fff;
}

@media screen and (max-width: 1440px) {
    .tr-main-title b,
    .tr-main-title p {
        font-size: 38px;
    }
}

@media screen and (max-width: 1199px) {
    .tr-about {
        padding: 50px 0 45px;
    }

    .tr-main-title b {
        font-size: 34px;
        line-height: 34px;
    }

    .tr-main-title p {
        font-size: 30px;
    }

    .tr-about-box {
        padding-bottom: 60px;
    }

    .tr-ab-con p {
        line-height: 25px;
        margin-top: 15px;
    }

    .tr-ab-more {
        height: 42px;
        line-height: 40px;
        padding: 0 20px;
        max-width: 140px;
        margin-top: 20px;
    }

    .tr-ab-bottom ul li {
        padding: 30px 0 20px;
    }

    .tr-ab-bottom li b {
        font-size: 35px;
        line-height: 35px;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 768px) {
    .tr-about {
        padding: 30px 0 40px;
    }

    .tr-main-title {
        margin: 10px 0 15px;
    }

    .tr-main-title b {
        font-size: 30px;
        line-height: 32px;
    }

    .tr-main-title p {
        font-size: 26px;
    }

    /* 窄屏：上下排列，配图变成底部横幅（预留 160px + 间距，避免遮住按钮） */
    .tr-about-box {
        flex-direction: column;
        padding-bottom: 180px;
    }

    .tr-ab-txt {
        width: 100%;
    }

    .tr-ab-con p {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }

    .tr-ab-more {
        font-size: 15px;
        height: 37px;
        line-height: 35px;
        padding: 0 20px;
        max-width: 140px;
        margin-top: 30px;
    }

    .tr-ab-right {
        width: 100%;
        height: 160px;
        position: absolute;
        left: 0;
        bottom: 0;
        top: auto;
        right: auto;
    }

    .tr-ab-bottom {
        margin-top: 20px;
    }

    .tr-ab-bottom ul li {
        width: 48%;
        padding: 20px 0;
        margin: 5px 0;
    }

    .tr-ab-num {
        padding-left: 10%;
    }

    .tr-ab-num b {
        font-size: 22px;
        line-height: 22px;
        margin-bottom: 5px;
    }

    .tr-ab-num i {
        font-size: 16px;
        line-height: 16px;
    }

    .tr-ab-bottom li > i {
        font-size: 22px;
        width: 22px;
        height: 22px;
        line-height: 22px;
        top: 10px;
        right: 10px;
    }

    .tr-ab-bottom li p {
        font-size: 15px;
        line-height: 20px;
        padding-left: 10%;
    }
}

/* --------------------------------------------------------------------------
   6. 首页「产品中心」板块（对齐 k712：标题 + 左侧分类标签 + 右侧产品卡片）
      卡片：标题 → 描述 → 带阴影图 → 「查看详情」按钮；hover 整卡变蓝
   -------------------------------------------------------------------------- */
.tr-products {
    position: relative;
    padding: 80px 0;
    background: #fff;
}

.tr-products .tr-main-title {
    margin-bottom: 30px;
}

.tr-pro-box {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

/* 左侧分类标签 */
.tr-pro-tabs {
    width: 20%;
    flex: 0 0 20%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tr-pro-tabs li {
    padding: 15px 10px;
    font-size: 18px;
    text-align: center;
    color: #333;
    cursor: pointer;
    margin-bottom: 10px;
    background: #f4f6f9;
    transition: all .3s ease;
}

.tr-pro-tabs li:hover,
.tr-pro-tabs li.active {
    background: var(--tr-main);
    color: #fff;
}

/* 右侧产品轮播：一排 3 个，多的用左右箭头翻 */
.tr-pro-view {
    flex: 1;
    min-width: 0;
    position: relative;
}

.tr-pro-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.tr-pro-track::-webkit-scrollbar {
    display: none;
}

.tr-pro-item {
    flex: 0 0 calc((100% - 60px) / 3);
    min-width: 0;
}

/* 左右箭头（右上角） */
.tr-pro-nav {
    position: absolute;
    top: -48px;
    right: 0;
    display: flex;
    gap: 10px;
    z-index: 5;
}

.tr-pro-prev,
.tr-pro-next {
    display: block;
    width: 44px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background: rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: all .3s ease;
    user-select: none;
}

.tr-pro-prev:hover,
.tr-pro-next:hover {
    background: var(--tr-main);
}

.tr-pro-prev.is-off,
.tr-pro-next.is-off {
    opacity: .35;
    cursor: not-allowed;
}

.tr-pro-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    padding: 20px;
    border: 1px solid #f0f2f5;
    color: #333;
    transition: all .3s ease;
}

.tr-pro-card:hover {
    background: var(--tr-main);
    border-color: var(--tr-main);
    color: #fff;
}

.tr-pro-name {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .3s ease;
}

.tr-pro-card:hover .tr-pro-name {
    color: #fff;
}

.tr-pro-desc {
    margin: 15px 0;
    font-size: 15px;
    line-height: 24px;
    color: #666;
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    min-height: 72px;
    transition: color .3s ease;
}

.tr-pro-card:hover .tr-pro-desc {
    color: rgba(255, 255, 255, .9);
}

.tr-pro-pic {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 0 10px #ccc;
}

.tr-pro-pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.tr-pro-card:hover .tr-pro-pic img {
    transform: scale(1.1);
}

.tr-pro-more {
    display: block;
    width: 100px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: var(--tr-main);
    color: #fff;
    margin-top: auto;
    align-self: flex-start;
    transition: all .3s ease;
}

.tr-pro-card:hover .tr-pro-more {
    background: #fff;
    color: var(--tr-main);
}

@media screen and (max-width: 992px) {
    .tr-pro-item {
        flex: 0 0 calc((100% - 30px) / 2);
    }
}

@media screen and (max-width: 768px) {
    .tr-products {
        padding: 30px 0 40px;
    }

    .tr-products .tr-main-title {
        margin-bottom: 25px;
    }

    .tr-pro-box {
        flex-direction: column;
        gap: 16px;
    }

    .tr-pro-tabs {
        width: 100%;
        flex: none;
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
    }

    .tr-pro-tabs li {
        flex: 1 0 auto;
        margin-bottom: 0;
        margin-right: 10px;
        padding: 12px 14px;
    }

    .tr-pro-tabs li:last-child {
        margin-right: 0;
    }

    .tr-pro-item {
        flex: 0 0 100%;
    }

    .tr-pro-nav {
        position: static;
        justify-content: flex-end;
        margin-bottom: 12px;
    }
}

/* --------------------------------------------------------------------------
   7. 内页（产品中心栏目页）
   -------------------------------------------------------------------------- */
.tr-page-hero {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0a2540 0%, #0f4c81 100%);
    color: #fff;
    overflow: hidden;
}

.tr-page-hero-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .55;
}

.tr-page-hero .tr-container {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}

.tr-page-hero h1 {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
}

.tr-breadcrumb {
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}

.tr-breadcrumb a {
    color: rgba(255, 255, 255, .85);
}

.tr-breadcrumb a:hover {
    color: #fff;
}

.tr-products-page {
    padding: 60px 0 70px;
}

.tr-pro-tabs a {
    display: block;
    color: inherit;
}

.tr-pro-tabs li.active a,
.tr-pro-tabs li:hover a {
    color: #fff;
}

.tr-pro-page {
    margin-top: 40px;
    text-align: center;
}

.tr-pro-page ul,
.tr-pro-page .pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tr-pro-page a,
.tr-pro-page span,
.tr-pro-page .page-item {
    display: inline-block;
    min-width: 36px;
    height: 36px;
    line-height: 34px;
    padding: 0 8px;
    border: 1px solid #e5e9f0;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
}

.tr-pro-page a:hover,
.tr-pro-page .active a,
.tr-pro-page .page-num-current {
    background: var(--tr-main);
    border-color: var(--tr-main);
    color: #fff;
}

@media screen and (max-width: 768px) {
    .tr-page-hero {
        min-height: 200px;
    }

    .tr-page-hero h1 {
        font-size: 26px;
    }
}

/* --------------------------------------------------------------------------
   8. 首页「选择我们的理由」板块（红底 + 白卡片：图标 + 标题 + 描述）
   -------------------------------------------------------------------------- */
.tr-reasons {
    position: relative;
    padding: 70px 0;
    background: linear-gradient(160deg, #d3261a 0%, #a21006 100%);
    color: #fff;
}

.tr-reason-title {
    text-align: center;
    margin-bottom: 40px;
}

.tr-reason-title b {
    display: block;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
}

.tr-reason-title p {
    margin: 8px 0 0;
    font-size: 16px;
    color: rgba(255, 255, 255, .75);
}

.tr-reason-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.tr-reason-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 34px 30px;
    background: #fff;
    transition: all .3s ease;
}

/* 悬浮时卡片上方浮现淡红色雾状渐层 */
.tr-reason-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 68%;
    background: linear-gradient(to bottom, rgba(211, 38, 26, .18), rgba(211, 38, 26, 0));
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.tr-reason-card:hover::before {
    opacity: 1;
}

.tr-reason-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.tr-reason-ico {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    color: #cf2114;
    font-size: 34px;
    line-height: 1;
    padding-top: 2px;
}

.tr-reason-txt {
    position: relative;
    z-index: 1;
}

.tr-reason-txt h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

.tr-reason-txt p {
    margin: 0;
    font-size: 15px;
    line-height: 25px;
    color: #666;
}

@media screen and (max-width: 992px) {
    .tr-reason-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .tr-reasons {
        padding: 40px 0;
    }

    .tr-reason-title b {
        font-size: 24px;
    }

    .tr-reason-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tr-reason-card {
        padding: 24px 20px;
    }
}

/* --------------------------------------------------------------------------
   9. 首页「服务流程」板块（红底延续：居中标题 + 一排步骤 + 箭头）
   -------------------------------------------------------------------------- */
.tr-process {
    margin-top: 60px;
}

.tr-process-title {
    text-align: center;
    margin-bottom: 30px;
}

.tr-process-title b {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}

.tr-process-title p {
    margin: 8px 0 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .7);
}

.tr-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 10px;
    max-width: 1200px;
    margin: 0 auto;
}

.tr-flow-item b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.tr-flow-item b em {
    font-style: normal;
    color: #f6b3a6;
}

.tr-flow-item p {
    margin: 6px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .65);
    white-space: nowrap;
}

.tr-flow-arrow {
    color: rgba(255, 255, 255, .6);
    font-size: 15px;
}

@media screen and (max-width: 992px) {
    .tr-flow {
        justify-content: center;
        gap: 20px 22px;
    }
}

@media screen and (max-width: 768px) {
    .tr-process {
        margin-top: 40px;
    }

    .tr-process-title b {
        font-size: 24px;
    }

    .tr-flow {
        gap: 16px 18px;
    }

    .tr-flow-arrow {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   10. 首页板块出场动画（滑入视口即触发）
   -------------------------------------------------------------------------- */
/* 初始隐藏仅在 JS 已就绪（body.reveal-ready）时生效，JS 未加载则正常显示（降级） */
body.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
                transform .9s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

body.reveal-ready .reveal.in-view {
    opacity: 1;
    transform: none;
}

/* 可选方向变体：从左 / 从右滑入 */
body.reveal-ready .reveal--left {
    transform: translateX(-48px);
}

body.reveal-ready .reveal--right {
    transform: translateX(48px);
}

body.reveal-ready .reveal--left.in-view,
body.reveal-ready .reveal--right.in-view {
    transform: none;
}

/* 尊重系统「减少动态效果」偏好：直接显示，不做位移动画 */
@media (prefers-reduced-motion: reduce) {
    body.reveal-ready .reveal,
    body.reveal-ready .tr-flow > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* 服务流程七项：待「选择我们的理由」板块入场后，按出现顺序逐个显现 */
body.reveal-ready .tr-flow > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}

body.reveal-ready .tr-reasons.in-view .tr-flow > * {
    opacity: 1;
    transform: none;
}

/* 首页「应用领域」板块（一整屏大图 + 图下方切换项，鼠标悬停切换大图与文案）
   数据来自栏目 home-solutions（catid=17，模型：解决方案），按字段 prod_cate 分组：
   board=碳纤维板 / tube=碳纤维管材 / cnc=精密加工件
   全屏图：.tr-apps-bg 的 background-image（模板内联，默认 /uploads/banner/home-banner-1~3.jpg） */
.tr-apps {
    --tr-apps-accent: #58aef7;   /* 大图上的强调色 */
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px + 100px);   /* 一屏再高一点，让大图更高；顶部掖进导航下方避免露红 */
    min-height: calc(100svh - 64px + 100px);
    background: #0d1522;
    overflow: hidden;
}

/* 滚动吸附：滚轮滚到「应用领域」附近会自动对齐到整屏，正好落在吸顶导航下方，
   上一板块的红色就不会露出来。仅在桌面（整屏布局）启用，避免中小屏被强行吸附。 */
html {
    scroll-padding-top: 64px;   /* 比吸顶导航(72px)略小：吸附后板块顶部掖进导航下方，红色不再露出 */
}

@media (min-width: 1200px) {
    html {
        scroll-snap-type: y proximity;
    }

    #applications {
        scroll-snap-align: start;
    }
}

/* ---------- 一整屏大图舞台 ---------- */
.tr-apps-stage {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 90px 0;
    overflow: hidden;
}

/* 每个分组一张全屏图（铺满整个板块，含切换卡区域），切换时交叉淡入 + 缓慢收放 */
.tr-apps-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .9s ease, transform 2s ease;
}

.tr-apps-bg.active {
    opacity: 1;
    transform: scale(1);
}

.tr-apps-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.tr-apps-title b {
    display: block;
    font-size: 45px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 2px;
    color: #0e1c2e;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.tr-apps-title p {
    margin: 8px 0 0;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    color: #2b74b4;
}

.tr-apps-lead {
    max-width: 760px;
    margin: 22px 0 0;
    font-size: 16px;
    line-height: 1.95;
    color: rgba(14, 28, 46, .78);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}

/* 分组文案面板：同一时间只显示当前分组，切换时淡入并轻微上移 */
.tr-apps-panel {
    display: none;
}

/* 注意：不要用 animation-fill-mode: both，动画被浏览器跳过时面板会停在 opacity:0 而看不见 */
.tr-apps-panel.active {
    display: block;
    -webkit-animation: tr-apps-fade .8s ease;
    animation: tr-apps-fade .8s ease;
}

@keyframes tr-apps-fade {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/* ---------- 图下方切换项（鼠标悬停即切换上方大图） ---------- */
.tr-apps-switch {
    position: relative;
    z-index: 2;
    padding: 6px 0 52px;
}

.tr-apps-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.tr-app-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px 20px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(13, 21, 34, .12);
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(13, 21, 34, .12);
    cursor: pointer;
    overflow: hidden;
    transition: all .35s ease;
}

/* 底部进度条：当前分组铺满，用来提示大图正在切换 */
.tr-app-tab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--tr-apps-accent);
    transition: none;   /* 变为非激活时立即归零，避免回缩动画 */
}

.tr-app-tab:hover,
.tr-app-tab.active {
    background: #fff;
    border-color: rgba(88, 174, 247, .85);
    box-shadow: 0 16px 34px rgba(13, 21, 34, .2);
    transform: translateY(-2px);
}

/* 当前行业：底部蓝条按轮播周期(2s)线性加载到底，与自动轮播同步 */
.tr-app-tab.active::after {
    width: 100%;
    transition: width var(--tr-apps-delay, 2s) linear;   /* 与后台设置的轮播间隔同步（由脚本写入该变量） */
}

.tr-app-tabico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(88, 174, 247, .16);
    color: #2b74b4;
    font-size: 19px;
    transition: all .35s ease;
}

.tr-app-tab:hover .tr-app-tabico,
.tr-app-tab.active .tr-app-tabico {
    background: var(--tr-apps-accent);
    color: #fff;
}

.tr-app-tabtxt {
    display: block;
    min-width: 0;
}

.tr-app-tabtxt b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #0e1c2e;
    transition: color .35s ease;
}

.tr-app-tabtxt em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 13px;
    color: rgba(14, 28, 46, .62);
    transition: color .35s ease;
}

.tr-app-tab.active .tr-app-tabtxt b {
    color: #2b74b4;
}

/* 序号：01/02/03 */
.tr-app-tabnum {
    margin-left: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: rgba(14, 28, 46, .22);
    transition: color .35s ease;
}

.tr-app-tab:hover .tr-app-tabnum,
.tr-app-tab.active .tr-app-tabnum {
    color: rgba(43, 116, 180, .85);
}

/* ---------- 应用领域响应式 ---------- */
@media screen and (max-width: 1440px) {
    .tr-apps-title b {
        font-size: 38px;
    }

    .tr-apps-title p {
        font-size: 19px;
    }
}

@media screen and (max-width: 1199px) {
    /* 中等屏不再强撑整屏高度，按内容高度排布 */
    .tr-apps {
        min-height: auto;
    }

    .tr-apps-stage {
        min-height: auto;
        padding: 80px 0;
    }

    .tr-apps-title b {
        font-size: 34px;
    }

    .tr-apps-title p {
        font-size: 17px;
        letter-spacing: 2px;
    }

    .tr-apps-lead {
        margin-top: 18px;
        font-size: 15px;
    }

    .tr-apps-tabs {
        gap: 12px;
    }

    .tr-app-tab {
        padding: 15px 16px 17px;
    }
}

@media screen and (max-width: 992px) {
    .tr-app-tabtxt b {
        font-size: 16px;
    }

    .tr-app-tabnum {
        font-size: 20px;
    }
}

@media screen and (max-width: 768px) {
    .tr-apps-stage {
        min-height: auto;
        padding: 54px 0 58px;
        align-items: flex-start;
    }

    .tr-apps-title b {
        font-size: 28px;
    }

    .tr-apps-title p {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .tr-apps-lead {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.85;
    }

    .tr-apps-switch {
        padding: 0 0 40px;
    }

    .tr-apps-tabs {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .tr-app-tab {
        flex: 1 1 0;
        justify-content: center;
        gap: 8px;
        padding: 11px 8px 13px;
    }

    .tr-app-tabico {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .tr-app-tabtxt em,
    .tr-app-tabnum {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .tr-apps-title b {
        font-size: 24px;
    }

    .tr-apps-title p {
        font-size: 12px;
    }

    .tr-app-tabtxt b {
        font-size: 14px;
    }
}



/* 首页「新闻资讯」板块（左侧蓝色标题 + 4 列新闻卡 + 上一页/下一页） */
.tr-news {
    position: relative;
    padding: 76px 0 64px;
    background: #f6f8fb;
    overflow: hidden;
}

.tr-news::before {
    content: "";
    position: absolute;
    top: -140px;
    right: -60px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 115, 190, .07) 0%, rgba(0, 115, 190, 0) 68%);
    pointer-events: none;
}

.tr-news .tr-container {
    position: relative;
    z-index: 1;
}

.tr-news-head {
    margin-bottom: 34px;
}

.tr-news-title {
    position: relative;
    margin: 0;
    padding-left: 16px;
    font-size: 28px;
    font-weight: 700;
    color: var(--tr-main);
    letter-spacing: 1px;
}

.tr-news-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 26px;
    background: var(--tr-main);
}

.tr-news-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.tr-news-item {
    flex: 0 0 calc((100% - 72px) / 4);
    max-width: calc((100% - 72px) / 4);
    display: block;
    text-decoration: none;
    transition: transform .3s ease;
}

.tr-news-item:hover {
    transform: translateY(-4px);
}

.tr-news-pic {
    display: block;
    position: relative;
    padding-top: 72%;
    overflow: hidden;
    background: #eef1f5;
}

.tr-news-pic img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.tr-news-item:hover .tr-news-pic img {
    transform: scale(1.06);
}

.tr-news-name {
    margin: 18px 0 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .3s ease;
}

.tr-news-item:hover .tr-news-name {
    color: var(--tr-main);
}

.tr-news-desc {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.8;
    color: #888;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tr-news-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    transition: color .3s ease;
}

.tr-news-more i {
    font-size: 12px;
    transition: transform .3s ease;
}

.tr-news-item:hover .tr-news-more {
    color: var(--tr-main);
}

.tr-news-item:hover .tr-news-more i {
    transform: translateX(4px);
}

.tr-news-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 46px;
}

.tr-news-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 120px;
    height: 42px;
    padding: 0 20px;
    background: #d9dde3;
    color: #4a4f57;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: all .3s ease;
}

.tr-news-btn:hover {
    background: var(--tr-main);
    color: #fff;
}

.tr-news-btn.is-off {
    opacity: .45;
    cursor: not-allowed;
}

@media screen and (max-width: 992px) {
    .tr-news-item {
        flex: 0 0 calc((100% - 48px) / 3);
        max-width: calc((100% - 48px) / 3);
    }
}

@media screen and (max-width: 768px) {
    .tr-news {
        padding: 46px 0 40px;
    }

    .tr-news-title {
        font-size: 22px;
    }

    .tr-news-grid {
        gap: 16px;
    }

    .tr-news-item {
        flex: 0 0 calc((100% - 16px) / 2);
        max-width: calc((100% - 16px) / 2);
    }
}

@media screen and (max-width: 480px) {
    .tr-news-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .tr-news-btn {
        min-width: 100px;
    }
}


/* ==========================================================================
   站点自定义页脚（深色底 + 主色点缀）
   ========================================================================== */
.tr-footer {
    background: #141c2b;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    line-height: 1.8;
}

.tr-foot-main {
    padding: 64px 0 48px;
}

.tr-foot-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: 44px;
}

/* 公司信息 */
.tr-foot-logo img {
    max-height: 46px;
    margin-bottom: 20px;
    /* 页脚为深色底，原 logo 近黑色，反相为白色 */
    filter: brightness(0) invert(1);
}

.tr-foot-logo {
    display: block;
    margin-bottom: 20px;
    text-decoration: none;
}

.tr-foot-logo .cn {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.tr-foot-logo .en {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .42);
}

.tr-foot-desc {
    margin: 0;
    color: rgba(255, 255, 255, .55);
}

/* 栏目标题 */
.tr-foot-title {
    position: relative;
    margin: 0 0 24px;
    padding-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.tr-foot-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--tr-main);
}

/* 链接列表 */
.tr-foot-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tr-foot-links li {
    margin-bottom: 12px;
}

.tr-foot-links a {
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    transition: all .3s ease;
}

.tr-foot-links a:hover {
    color: #fff;
    padding-left: 5px;
}

/* 联系方式 */
.tr-foot-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tr-foot-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.tr-foot-list i {
    margin-top: 6px;
    color: var(--tr-main);
}

/* 版权栏 */
.tr-foot-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 20px 0 22px;
    font-size: 13px;
}

.tr-foot-bottom .tr-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 24px;
    text-align: center;
}

.tr-foot-bottom p {
    margin: 0;
}

.tr-foot-bottom a {
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
}

.tr-foot-bottom a:hover {
    color: #fff;
}

.tr-foot-links-bar {
    width: 100%;
    padding-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, .4);
}

.tr-foot-links-bar a {
    margin-left: 12px;
}

@media screen and (max-width: 992px) {
    .tr-foot-row {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

@media screen and (max-width: 640px) {
    .tr-foot-main {
        padding: 46px 0 34px;
    }

    .tr-foot-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* ==========================================================================
   「关于我们」页面（page/page_about.html）
   ========================================================================== */

/* --------------------------------------------------------------------------
   11.1 首屏大图（栏目大图）
   -------------------------------------------------------------------------- */
.tr-page-hero--about {
    min-height: 460px;
    padding: 60px 0;
    background: linear-gradient(135deg, #062338 0%, #0b4a75 100%);
}

.tr-page-hero--about .tr-page-hero-bg {
    opacity: 1;
}

/* 文字左对齐（覆盖默认模板的居中） */
.tr-page-hero--about .tr-container {
    z-index: 2;
    text-align: left;
}

.tr-hero-inner {
    max-width: 780px;
}

.tr-hero-en {
    margin: 0 0 14px;
    font-size: 15px;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, .72);
}

.tr-page-hero--about h1 {
    margin: 0;
    font-size: 46px;
    letter-spacing: 2px;
}

.tr-hero-desc {
    max-width: 780px;
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .82);
}

/* --------------------------------------------------------------------------
   11.2 内页板块标题（中文 + 英文小字）
   -------------------------------------------------------------------------- */
.tr-sec-title b {
    display: block;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    color: #222;
}

.tr-sec-title p {
    margin: 8px 0 0;
    font-size: 15px;
    letter-spacing: 1px;
    color: #9aa4b1;
}

.tr-sec-title--center {
    margin-bottom: 40px;
    text-align: center;
}

.tr-sec-title--light b {
    color: #fff;
}

.tr-sec-title--light p {
    color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------------------
   11.3 公司简介（左文右图 + 打勾要点）
   -------------------------------------------------------------------------- */
.tr-ab-profile {
    padding: 76px 0 70px;
    background: #fff;
}

.tr-ab-profile-box {
    display: flex;
    align-items: center;
    gap: 60px;
}

.tr-ab-profile-txt {
    flex: 1;
    min-width: 0;
}

.tr-ab-para {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.95;
    color: #555;
    text-align: justify;
}

.tr-ab-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    margin: 28px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid #eef1f5;
    list-style: none;
}

.tr-ab-points li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}

.tr-ab-points i {
    margin-top: 4px;
    font-size: 14px;
    color: var(--tr-main);
}

.tr-ab-profile-pic {
    flex: 0 0 42%;
    max-width: 42%;
}

.tr-ab-profile-pic img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 18px 40px rgba(6, 26, 43, .16);
}

/* --------------------------------------------------------------------------
   11.4 核心产品与典型应用（2 列卡片：图标 + 名称 + 说明 + 应用标签）
   -------------------------------------------------------------------------- */
.tr-ab-biz {
    padding: 76px 0 70px;
    background: #f5f8fc;
}

.tr-ab-biz-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.tr-ab-biz-card {
    padding: 32px 30px;
    background: #fff;
    border: 1px solid #eef1f5;
    transition: all .35s ease;
}

/* 奇数个卡片时，最后一张铺满整行 */
.tr-ab-biz-card:last-child:nth-child(odd) {
    grid-column: span 2;
}

.tr-ab-biz-card:hover {
    border-color: transparent;
    box-shadow: 0 16px 36px rgba(6, 26, 43, .12);
    transform: translateY(-4px);
}

.tr-ab-biz-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tr-ab-biz-head i {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background: var(--tr-main);
    border-radius: 50%;
}

.tr-ab-biz-head h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #222;
}

.tr-ab-biz-desc {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.9;
    color: #666;
    text-align: justify;
}

.tr-ab-biz-apply {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed #e3e8ef;
}

.tr-ab-biz-apply em {
    display: block;
    margin-bottom: 10px;
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    color: var(--tr-main);
}

.tr-ab-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tr-ab-tags i {
    display: inline-block;
    padding: 5px 12px;
    font-style: normal;
    font-size: 13px;
    line-height: 1.4;
    color: #4a5568;
    background: #eef3f9;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   11.5 企业文化与服务理念（深色底 + 3 列卡片）
   -------------------------------------------------------------------------- */
.tr-ab-culture {
    padding: 76px 0 80px;
    background: linear-gradient(160deg, #0d2338 0%, #103a5c 100%);
}

.tr-ab-culture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.tr-ab-culture-card {
    padding: 32px 28px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: all .35s ease;
}

.tr-ab-culture-card:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .28);
    transform: translateY(-4px);
}

.tr-ab-culture-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tr-ab-culture-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    font-size: 20px;
    color: #fff;
    background: var(--tr-main);
    border-radius: 50%;
}

.tr-ab-culture-head h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
}

.tr-ab-culture-head h3 em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .45);
}

.tr-ab-culture-desc {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .7);
    text-align: justify;
}

/* --------------------------------------------------------------------------
   11.6 关于我们页面响应式
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
    .tr-page-hero--about {
        min-height: 400px;
    }

    .tr-page-hero--about h1 {
        font-size: 38px;
    }

    .tr-ab-profile-box {
        gap: 40px;
    }
}

@media screen and (max-width: 992px) {
    .tr-ab-profile-box {
        flex-direction: column;
        align-items: stretch;
    }

    .tr-ab-profile-pic {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .tr-ab-biz-grid {
        grid-template-columns: 1fr;
    }

    .tr-ab-biz-card:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .tr-ab-culture-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .tr-page-hero--about {
        min-height: 320px;
        padding: 44px 0;
    }

    .tr-page-hero--about h1 {
        font-size: 28px;
    }

    .tr-hero-en {
        margin-bottom: 10px;
        font-size: 13px;
        letter-spacing: 3px;
    }

    .tr-hero-desc {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.8;
    }

    .tr-sec-title b {
        font-size: 24px;
    }

    .tr-sec-title--center {
        margin-bottom: 28px;
    }

    .tr-ab-profile {
        padding: 44px 0 40px;
    }

    .tr-ab-points {
        grid-template-columns: 1fr;
    }

    .tr-ab-biz {
        padding: 44px 0 40px;
    }

    .tr-ab-biz-card {
        padding: 24px 20px;
    }

    .tr-ab-biz-head h3 {
        font-size: 17px;
    }

    .tr-ab-culture {
        padding: 44px 0 48px;
    }

    .tr-ab-culture-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tr-ab-culture-card {
        padding: 24px 20px;
    }
}


/* ==========================================================================
   产品中心栏目页（list/products.html）：左侧分类 + 右侧紧凑卡片网格
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 左侧分类导航
   -------------------------------------------------------------------------- */
.tr-pro-side {
    flex: 0 0 240px;
    width: 240px;
}

.tr-pro-side-title {
    position: relative;
    margin: 0 0 16px;
    padding-left: 14px;
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

.tr-pro-side-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: var(--tr-main);
}

/* 分类按钮：纵向列表（覆盖首页横向胶囊样式） */
.tr-products-page .tr-pro-tabs {
    display: block;
    width: 100%;
    flex: none;
    background: #fff;
    border: 1px solid #eef1f5;
}

.tr-products-page .tr-pro-tabs li {
    margin: 0;
    padding: 0;
    font-size: 15px;
    text-align: left;
    background: transparent;
    border-bottom: 1px solid #eef1f5;
    transition: background .25s ease;
}

.tr-products-page .tr-pro-tabs li:last-child {
    border-bottom: 0;
}

.tr-products-page .tr-pro-tabs li a {
    display: block;
    padding: 14px 18px;
    color: #333;
}

.tr-products-page .tr-pro-tabs li:hover,
.tr-products-page .tr-pro-tabs li.active {
    background: var(--tr-main);
}

.tr-products-page .tr-pro-tabs li:hover a,
.tr-products-page .tr-pro-tabs li.active a {
    color: #fff;
}

/* 询价引导 */
.tr-pro-cta {
    margin-top: 24px;
    padding: 22px 20px;
    background: #f5f8fc;
    border: 1px solid #eef1f5;
}

.tr-pro-cta p {
    margin: 0 0 14px;
    font-size: 14px;
    color: #666;
}

.tr-pro-cta-btn {
    display: block;
    padding: 11px 10px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background: var(--tr-main);
    border-radius: 4px;
    text-decoration: none;
    transition: background .3s ease;
}

.tr-pro-cta-btn i {
    margin-right: 6px;
}

.tr-pro-cta-btn:hover {
    color: #fff;
    background: #0a4f96;
}

/* --------------------------------------------------------------------------
   12.2 右侧产品网格（3 列）
   -------------------------------------------------------------------------- */
.tr-pro-main {
    flex: 1;
    min-width: 0;
}

.tr-pro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* --------------------------------------------------------------------------
   12.3 产品卡片：图片固定 4:3 + 标题 + 简介（整体高度可控，不再撑满整屏）
   -------------------------------------------------------------------------- */
.tr-pcard {
    display: block;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eef1f5;
    text-decoration: none;
    transition: all .3s ease;
}

.tr-pcard:hover {
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(6, 26, 43, .12);
    transform: translateY(-4px);
}

.tr-pcard-pic {
    display: block;
    position: relative;
    padding-top: 75%;
    overflow: hidden;
    background: #eef1f5;
}

.tr-pcard-pic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.tr-pcard:hover .tr-pcard-pic img {
    transform: scale(1.06);
}

.tr-pcard-body {
    display: block;
    padding: 18px 18px 20px;
}

.tr-pcard-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #222;
    transition: color .3s ease;
}

.tr-pcard:hover .tr-pcard-name {
    color: var(--tr-main);
}

.tr-pcard-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.75;
    color: #888;
}

.tr-pcard-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    font-size: 13px;
    color: #999;
    transition: color .3s ease;
}

.tr-pcard-more i {
    font-size: 12px;
    transition: transform .3s ease;
}

.tr-pcard:hover .tr-pcard-more {
    color: var(--tr-main);
}

.tr-pcard:hover .tr-pcard-more i {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   12.4 产品中心响应式
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
    .tr-pro-side {
        flex: 0 0 200px;
        width: 200px;
    }

    .tr-pro-grid {
        gap: 18px;
    }
}

@media screen and (max-width: 992px) {
    .tr-pro-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .tr-pro-box {
        flex-direction: column;
        gap: 20px;
    }

    .tr-pro-side {
        flex: none;
        width: 100%;
    }

    /* 分类改为横向滚动 */
    .tr-products-page .tr-pro-tabs {
        display: flex;
        overflow-x: auto;
        border: 1px solid #eef1f5;
    }

    .tr-products-page .tr-pro-tabs li {
        flex: 1 0 auto;
        white-space: nowrap;
        border-right: 1px solid #eef1f5;
        border-bottom: 0;
    }

    .tr-products-page .tr-pro-tabs li a {
        padding: 12px 16px;
    }

    .tr-pro-cta {
        display: none;
    }

    .tr-pro-grid {
        gap: 14px;
    }

    .tr-pcard-body {
        padding: 14px 14px 16px;
    }

    .tr-pcard-name {
        height: 44px;
        font-size: 15px;
        line-height: 22px;
    }

    .tr-pcard-more {
        margin-top: 10px;
    }
}

/* ==========================================================================
   12.5 产品详情页（show/show_product.html）
   ========================================================================== */
.tr-product-detail {
    padding: 50px 0 60px;
    background: #fff;
}

.tr-product-detail-box {
    display: flex;
    gap: 44px;
    align-items: stretch;
}

.tr-product-gallery {
    flex: 0 0 46%;
    max-width: 46%;
}

.tr-product-gallery .tr-pimg {
    display: block;
    position: relative;
    padding-top: 75%;
    overflow: hidden;
    background: #eef1f5;
    border: 1px solid #eef1f5;
    border-radius: 6px;
}

.tr-product-gallery .tr-pimg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tr-product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tr-product-info-bottom {
    margin-top: auto;
}

.tr-product-cate {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    font-size: 13px;
    color: var(--tr-main);
    background: #eaf3fb;
    border-radius: 20px;
    text-decoration: none;
}

.tr-product-cate:hover {
    color: var(--tr-main);
}

.tr-product-info h1 {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin: 0 0 14px;
    line-height: 1.3;
}

.tr-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
    font-size: 13px;
    color: #999;
}

.tr-product-meta i {
    margin-right: 5px;
    color: #bbb;
}

.tr-product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: #f5f8fc;
    border-radius: 6px;
}

.tr-product-price .label {
    font-size: 14px;
    color: #666;
}

.tr-product-price .val {
    font-size: 26px;
    font-weight: 700;
    color: #d3261a;
}

.tr-product-intro {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 26px;
}

/* 多图缩略图：产品图在前，多图依次排开，悬浮/选中高亮 */
.tr-product-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.tr-product-thumbs .tr-thumb {
    width: 76px;
    height: 76px;
    border: 2px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease;
    background: #f7f7f7;
}

.tr-product-thumbs .tr-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tr-product-thumbs .tr-thumb:hover,
.tr-product-thumbs .tr-thumb.is-active {
    border-color: var(--tr-main);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.tr-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tr-product-actions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 26px;
    font-size: 15px;
    border-radius: 4px;
    text-decoration: none;
    transition: all .3s ease;
}

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

.tr-btn-primary:hover {
    color: #fff;
    background: #0a4f96;
}

.tr-btn-ghost {
    color: var(--tr-main);
    border: 1px solid var(--tr-main);
    background: transparent;
}

.tr-btn-ghost:hover {
    color: #fff;
    background: var(--tr-main);
}

.tr-product-content {
    margin-top: 46px;
    padding-top: 36px;
    border-top: 1px solid #eef1f5;
}

.tr-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin: 0 0 20px;
}

.tr-section-title:before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    margin-right: 10px;
    vertical-align: -3px;
    background: var(--tr-main);
    border-radius: 2px;
}

.tr-product-content .main-content {
    font-size: 15px;
    line-height: 1.9;
    color: #444;
}

.tr-product-related {
    padding: 10px 0 60px;
    background: #fff;
}

.tr-product-foot {
    padding: 0 0 70px;
    background: #fff;
}

.tr-product-foot .tr-article-foot {
    padding-top: 0;
    border-top: 0;
}

@media screen and (max-width: 768px) {
    .tr-product-detail-box {
        flex-direction: column;
        gap: 24px;
    }

    .tr-product-gallery {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .tr-product-info h1 {
        font-size: 23px;
    }

    .tr-product-actions a {
        flex: 1;
        justify-content: center;
    }
}

/* ==========================================================================
   13. 新闻资讯（列表页 list/list_news.html + 详情页 show/show_news.html）
   ========================================================================== */

/* ---------- 13.1 列表页布局（左侧栏 + 右侧资讯网格） ---------- */
.tr-news-page {
    padding: 60px 0 70px;
    background: #f6f8fb;
}

.tr-news-layout {
    display: flex;
    align-items: flex-start;
    gap: 34px;
}

.tr-news-side {
    flex: 0 0 260px;
    width: 260px;
}

.tr-news-main {
    flex: 1;
    min-width: 0;
}

/* ---------- 13.2 侧栏组件 ---------- */
.tr-news-widget {
    margin-bottom: 26px;
    padding: 22px 20px 24px;
    background: #fff;
    border: 1px solid #eef1f5;
}

.tr-news-widget:last-child {
    margin-bottom: 0;
}

.tr-news-widget-title {
    position: relative;
    margin: 0 0 18px;
    padding-left: 14px;
    font-size: 17px;
    font-weight: 700;
    color: #222;
}

.tr-news-widget-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background: var(--tr-main);
}

/* 热门资讯：缩略图 + 标题 + 日期 */
.tr-news-hot {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tr-news-hot li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed #eef1f5;
}

.tr-news-hot li:first-child {
    padding-top: 0;
}

.tr-news-hot li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.tr-news-hot-pic {
    flex: 0 0 72px;
    width: 72px;
    height: 56px;
    overflow: hidden;
    background: #eef1f5;
}

.tr-news-hot-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.tr-news-hot li:hover .tr-news-hot-pic img {
    transform: scale(1.08);
}

.tr-news-hot-txt {
    flex: 1;
    min-width: 0;
}

.tr-news-hot-txt a {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .3s ease;
}

.tr-news-hot-txt a:hover {
    color: var(--tr-main);
}

.tr-news-hot-date {
    margin-top: 6px;
    font-size: 12px;
    color: #aaa;
}

.tr-news-hot-date i {
    margin-right: 4px;
}

/* 标签云 */
.tr-news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tr-news-tags li {
    margin: 0;
}

.tr-news-tags a {
    display: inline-block;
    padding: 6px 13px;
    font-size: 13px;
    color: #4a5568;
    background: #f0f4f9;
    border-radius: 4px;
    text-decoration: none;
    transition: all .3s ease;
}

.tr-news-tags a:hover {
    color: #fff;
    background: var(--tr-main);
}

/* 侧栏 CTA */
.tr-news-cta {
    padding: 22px 20px;
    background: linear-gradient(160deg, #0d2338 0%, #103a5c 100%);
    border: 0;
}

.tr-news-cta p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
}

.tr-news-cta-btn {
    display: block;
    padding: 11px 10px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background: var(--tr-main);
    border-radius: 4px;
    text-decoration: none;
    transition: background .3s ease;
}

.tr-news-cta-btn i {
    margin-right: 6px;
}

.tr-news-cta-btn:hover {
    color: #fff;
    background: #0a4f96;
}

/* ---------- 13.3 资讯列表（卡片网格） ---------- */
.tr-news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* 资讯卡片 */
.tr-ncard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef1f5;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

.tr-ncard:hover {
    box-shadow: 0 14px 32px rgba(16, 42, 67, .12);
    transform: translateY(-4px);
    border-color: #dbe6f3;
}

.tr-ncard-pic {
    position: relative;
    display: block;
    height: 164px;
    overflow: hidden;
    background: #eef1f5;
}

.tr-ncard-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.tr-ncard:hover .tr-ncard-pic img {
    transform: scale(1.06);
}

/* 分类胶囊 */
.tr-ncard-badge {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    padding: 4px 12px;
    font-size: 12px;
    color: #fff;
    background: var(--tr-main);
    border-radius: 3px;
    letter-spacing: .5px;
}

.tr-ncard-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 18px;
}

.tr-ncard-date {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 8px;
}

.tr-ncard-date i {
    margin-right: 5px;
}

.tr-ncard-title {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    color: #1a1f29;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .3s ease;
}

.tr-ncard:hover .tr-ncard-title {
    color: var(--tr-main);
}

.tr-ncard-desc {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #888;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tr-ncard-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid #f0f3f7;
    font-size: 12.5px;
    color: #999;
}

.tr-ncard-foot .tr-ncard-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.tr-ncard-foot .tr-ncard-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tr-ncard-foot .tr-ncard-meta i {
    font-size: 12px;
    color: var(--tr-main);
}

.tr-ncard-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--tr-main);
    font-weight: 600;
    transition: gap .3s ease;
}

.tr-ncard:hover .tr-ncard-more {
    gap: 9px;
}

.tr-news-page .tr-pro-page {
    margin-top: 40px;
    text-align: center;
}

/* ---------- 13.4 详情页 ---------- */
.tr-news-detail {
    padding: 56px 0 70px;
    background: #f6f8fb;
}

.tr-news-detail-layout {
    display: flex;
    align-items: flex-start;
    gap: 34px;
}

.tr-news-detail-main {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #eef1f5;
}

.tr-article {
    padding: 34px 36px 36px;
}

.tr-article-head {
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef1f5;
}

.tr-article-title {
    margin: 0 0 14px;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
    color: #1a1f29;
}

.tr-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: #999;
}

.tr-article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tr-article-meta i {
    font-size: 13px;
    color: var(--tr-main);
}

.tr-article-meta a {
    color: var(--tr-main);
    text-decoration: none;
}

.tr-article-body {
    font-size: 15px;
    line-height: 1.95;
    color: #444;
    word-break: break-word;
}

.tr-article-body p {
    margin: 0 0 18px;
    text-align: justify;
}

.tr-article-body img {
    max-width: 100%;
    height: auto;
    margin: 8px 0;
}

.tr-article-body h2,
.tr-article-body h3,
.tr-article-body h4 {
    margin: 26px 0 14px;
    font-weight: 700;
    color: #222;
}

.tr-article-body h2 { font-size: 22px; }
.tr-article-body h3 { font-size: 19px; }
.tr-article-body h4 { font-size: 17px; }

.tr-article-body blockquote {
    margin: 18px 0;
    padding: 12px 18px;
    background: #f5f8fc;
    border-left: 4px solid var(--tr-main);
    color: #555;
}

.tr-article-body a {
    color: var(--tr-main);
}

.tr-article-body ul,
.tr-article-body ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.tr-article-body li {
    margin-bottom: 6px;
}

/* 标签 + 分享 */
.tr-article-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #eef1f5;
}

.tr-article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tr-article-tags .tr-tag-label {
    font-size: 13px;
    color: #888;
}

.tr-article-tags a {
    display: inline-block;
    padding: 5px 12px;
    font-size: 13px;
    color: #4a5568;
    background: #f0f4f9;
    border-radius: 4px;
    text-decoration: none;
    transition: all .3s ease;
}

.tr-article-tags a:hover {
    color: #fff;
    background: var(--tr-main);
}

.tr-article-share {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #888;
}

.tr-article-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f4f9;
    color: #4a5568;
    text-decoration: none;
    transition: all .3s ease;
}

.tr-article-share a:hover {
    color: #fff;
    background: var(--tr-main);
}

/* 上一篇 / 下一篇 */
.tr-article-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #eef1f5;
}

.tr-article-nav a {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    padding: 14px 18px;
    background: #f5f8fc;
    border: 1px solid #eef1f5;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: all .3s ease;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tr-article-nav a:hover {
    border-color: var(--tr-main);
    color: var(--tr-main);
}

.tr-article-nav .tr-anav-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #aaa;
}

.tr-article-nav a.next {
    text-align: right;
}

.tr-news-detail-side {
    flex: 0 0 300px;
    width: 300px;
}

.tr-news-detail-side .tr-news-widget {
    margin-bottom: 22px;
}

/* 详情页封面大图 */
.tr-article-cover {
    margin: 0 0 28px;
    border-radius: 8px;
    overflow: hidden;
    background: #eef1f5;
}

.tr-article-cover img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
}

/* ---------- 13.5 响应式 ---------- */
@media screen and (max-width: 992px) {
    .tr-news-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .tr-news-detail-side {
        flex: 0 0 260px;
        width: 260px;
    }
}

@media screen and (max-width: 768px) {
    .tr-news-page {
        padding: 38px 0 44px;
    }

    .tr-news-layout {
        flex-direction: column;
        gap: 22px;
    }

    .tr-news-side {
        flex: none;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .tr-news-widget {
        margin-bottom: 0;
    }

    .tr-news-cta {
        grid-column: span 2;
    }

    .tr-news-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tr-news-detail {
        padding: 38px 0 44px;
    }

    .tr-news-detail-layout {
        flex-direction: column;
        gap: 22px;
    }

    .tr-news-detail-main,
    .tr-news-detail-side {
        width: 100%;
        flex: none;
    }

    .tr-article {
        padding: 22px 18px 24px;
    }

    .tr-article-title {
        font-size: 22px;
    }
}

@media screen and (max-width: 480px) {
    .tr-news-side {
        grid-template-columns: 1fr;
    }

    .tr-news-cta {
        grid-column: auto;
    }
}

/* ==========================================================================
   14. 「应用领域」页（列表：list/applications.html  行业详情：show/show_application.html）
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 行业列表（应用领域页）
   -------------------------------------------------------------------------- */
.tr-appi {
    padding: 76px 0 66px;
    background: #fff;
}

.tr-appi-lead {
    max-width: 800px;
    margin: 0 auto 42px;
    font-size: 15px;
    line-height: 1.95;
    color: #66727f;
    text-align: center;
}

.tr-appi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.tr-appi-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef1f5;
    text-decoration: none;
    overflow: hidden;
    transition: all .35s ease;
}

.tr-appi-card:hover {
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(6, 26, 43, .14);
    transform: translateY(-4px);
}

.tr-appi-cardpic {
    display: block;
    position: relative;
    padding-top: 62%;
    overflow: hidden;
    background: #eef1f5;
}

.tr-appi-cardpic img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.tr-appi-card:hover .tr-appi-cardpic img {
    transform: scale(1.06);
}

.tr-appi-cardbody {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 20px 20px 22px;
}

.tr-appi-en {
    display: block;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 2px;
    color: #9aa4b1;
    text-transform: uppercase;
}

.tr-appi-name {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    font-size: 19px;
    font-weight: 700;
    color: #222;
    transition: color .3s ease;
}


/* ==========================================================================
   「联系我们」页面（page/page_contact.html）
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.1 首屏大图（栏目图）
   -------------------------------------------------------------------------- */
.tr-page-hero--contact {
    min-height: 460px;
    padding: 60px 0;
    background: linear-gradient(135deg, #062338 0%, #0b4a75 100%);
}

.tr-page-hero--contact .tr-page-hero-bg {
    opacity: 1;
}

/* 文字左对齐（覆盖默认模板的居中） */
.tr-page-hero--contact .tr-container {
    z-index: 2;
    text-align: left;
}

.tr-page-hero--contact h1 {
    margin: 0;
    font-size: 46px;
    letter-spacing: 2px;
}

/* --------------------------------------------------------------------------
   13.2 联系方式（四张卡片）
   -------------------------------------------------------------------------- */
.tr-ct-info {
    padding: 76px 0 70px;
    background: #fff;
}

.tr-ct-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.tr-ct-info-card {
    padding: 34px 24px;
    text-align: center;
    background: #f7f9fc;
    border: 1px solid #eef1f5;
    transition: all .35s ease;
}

.tr-ct-info-card:hover {
    background: #fff;
    border-color: transparent;
    box-shadow: 0 16px 36px rgba(6, 26, 43, .12);
    transform: translateY(-4px);
}

.tr-ct-info-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 22px;
    color: #fff;
    background: var(--tr-main);
    border-radius: 50%;
}

.tr-ct-info-card h3 {
    margin: 18px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

.tr-ct-info-value {
    display: block;
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: #0b4a75;
    word-break: break-all;
    transition: color .3s ease;
}

a.tr-ct-info-value:hover {
    color: var(--tr-main);
}

/* --------------------------------------------------------------------------
   13.3 在线留言（左侧说明 + 右侧表单）
   -------------------------------------------------------------------------- */
.tr-ct-form {
    padding: 70px 0 80px;
    background: #f5f8fc;
}

.tr-ct-form-box {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.tr-ct-form-txt {
    flex: 1;
    min-width: 0;
}

.tr-ct-para {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.95;
    color: #555;
    text-align: justify;
}

/* 复用「关于我们」的打勾列表样式，这里改为单列 */
.tr-ct-points {
    grid-template-columns: 1fr;
    gap: 10px;
}

.tr-ct-form-main {
    flex: 0 0 52%;
    max-width: 52%;
    padding: 34px 32px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(6, 26, 43, .08);
}

/* 表单字段 */
.tr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tr-field {
    margin: 0;
}

.tr-field--full {
    grid-column: 1 / -1;
}

.tr-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

.tr-field label i {
    font-style: normal;
    color: #e8590c;
}

.tr-field input,
.tr-field textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    color: #333;
    background: #f7f9fc;
    border: 1px solid #e3e8ef;
    border-radius: 0;
    outline: none;
    transition: border-color .25s ease, background .25s ease;
}

.tr-field input:focus,
.tr-field textarea:focus {
    background: #fff;
    border-color: var(--tr-main);
}

.tr-field textarea {
    height: 130px;
    resize: vertical;
}

.tr-form-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tr-form-captcha-input {
    flex: 1;
}

.tr-form-captcha-btn {
    flex: 0 0 138px;
    width: 138px;
}

.tr-form-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
}

.tr-form-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 34px;
    font-size: 15px;
    color: #fff;
    background: var(--tr-main);
    border: 0;
    cursor: pointer;
    transition: background .3s ease;
}

.tr-form-btn:hover {
    background: #0052a3;
}

.tr-form-tip {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #9aa4b1;
}

/* --------------------------------------------------------------------------
   13.4 联系我们页面响应式
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
    .tr-page-hero--contact {
        min-height: 400px;
    }

    .tr-page-hero--contact h1 {
        font-size: 38px;
    }

    .tr-ct-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tr-ct-form-box {
        gap: 36px;
    }
}

@media screen and (max-width: 992px) {
    .tr-ct-form-box {
        flex-direction: column;
        align-items: stretch;
    }

    .tr-ct-form-main {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .tr-page-hero--contact {
        min-height: 320px;
        padding: 44px 0;
    }

    .tr-page-hero--contact h1 {
        font-size: 28px;
    }

    .tr-ct-info {
        padding: 44px 0 40px;
    }

    .tr-ct-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tr-ct-info-card {
        padding: 26px 20px;
    }

    .tr-ct-form {
        padding: 44px 0 48px;
    }

    .tr-ct-form-main {
        padding: 24px 20px;
    }

    .tr-form-grid {
        grid-template-columns: 1fr;
    }

    .tr-form-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}


/* ==========================================================================
   14. 屏幕右侧悬浮咨询按钮（微信 / QQ：鼠标悬浮或移动端点击展开二维码）
   二维码取自「首页页脚」的微信二维码 / QQ 二维码字段（栏目ID=22）
   ========================================================================== */
.tr-side-bar {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1900;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tr-side-item {
    position: relative;
}

.tr-side-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(6, 26, 43, .22);
    transition: background .3s ease;
}

.tr-side-btn i {
    font-size: 26px;
}

/* 微信 */
.tr-side-btn--wx {
    background: #2aa666;
}

.tr-side-btn--wx:hover {
    background: #1f8f56;
}

/* QQ */
.tr-side-btn--qq {
    background: #12b7f5;
}

.tr-side-btn--qq:hover {
    background: #0d9fd6;
}

/* 二维码浮层：right:100% 贴住按钮，padding-right 顶住按钮，避免鼠标平移时丢 hover */
.tr-side-pop {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    padding-right: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
}

.tr-side-pop-in {
    padding: 10px 10px 8px;
    text-align: center;
    background: #fff;
    box-shadow: 0 12px 30px rgba(6, 26, 43, .18);
}

.tr-side-pop-in img {
    display: block;
    width: 150px;
    height: 150px;
}

.tr-side-pop-in > span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
}

/* 桌面端悬浮、移动端点击（.show 由 tongrui.js 添加） */
.tr-side-item:hover .tr-side-pop,
.tr-side-item.show .tr-side-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

@media screen and (max-width: 768px) {
    .tr-side-bar {
        right: 12px;
        gap: 8px;
    }

    .tr-side-btn {
        width: 46px;
        height: 46px;
        border-radius: 8px;
    }

    .tr-side-btn i {
        font-size: 22px;
    }

    .tr-side-pop-in img {
        width: 120px;
        height: 120px;
    }
}

.tr-appi-name i {
    font-size: 16px;
    color: var(--tr-main);
}

.tr-appi-card:hover .tr-appi-name {
    color: var(--tr-main);
}

.tr-appi-sub {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #4d5b6b;
}

/* 行业卡片：简介最多显示 3 行，超出部分省略（当前文案约 2 行，不会触发省略号） */
.tr-appi-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.8;
    color: #8a949f;
}

/* 行业卡片底部：典型部件单独一行并固定在卡片底部
   （行业不做详情页，部件直接列在卡片上；共用一行的卡片底边对齐） */
.tr-appi-parts-line {
    display: block;
    margin-top: auto;
    padding-top: 12px;
    font-size: 12px;
    line-height: 1.7;
    color: #9aa4b1;
    border-top: 1px dashed #e8edf3;
}

.tr-appi-parts-line i {
    margin-right: 4px;
    color: var(--tr-main);
}

/* --------------------------------------------------------------------------
   14.2 典型应用场景（按产品类型切换）
   -------------------------------------------------------------------------- */
.tr-appi-scenes-sec {
    padding: 72px 0 76px;
    background: #f6f8fb;
}

.tr-appi-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
}

.tr-appi-tabs li {
    padding: 9px 22px;
    font-size: 14px;
    color: #4d5b6b;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 999px;
    cursor: pointer;
    transition: all .3s ease;
}

.tr-appi-tabs li:hover,
.tr-appi-tabs li.active {
    color: #fff;
    background: var(--tr-main);
    border-color: var(--tr-main);
    box-shadow: 0 10px 22px rgba(0, 102, 204, .22);
}

.tr-appi-scenes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.tr-scene {
    position: relative;
    padding: 22px 20px 20px;
    background: #fff;
    border: 1px solid #eef1f5;
    transition: all .35s ease;
}

.tr-scene:hover {
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(6, 26, 43, .1);
    transform: translateY(-3px);
}

.tr-scene-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    font-size: 17px;
    color: var(--tr-main);
    background: rgba(0, 102, 204, .08);
    border-radius: 10px;
}

.tr-scene-name {
    display: block;
    padding-right: 76px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
}

.tr-scene-tag {
    position: absolute;
    right: 20px;
    top: 26px;
    padding: 3px 9px;
    font-size: 12px;
    color: #5b7ea0;
    background: #f0f5fa;
    border-radius: 3px;
}

.tr-scene-desc {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.8;
    color: #7d8794;
}

.tr-scene-parts {
    margin: 12px 0 0;
    padding-top: 12px;
    font-size: 12px;
    line-height: 1.7;
    color: #9aa4b1;
    border-top: 1px dashed #e8edf3;
}

.tr-scene-parts i {
    margin-right: 4px;
    color: var(--tr-main);
}

/* --------------------------------------------------------------------------
   14.3 询价 CTA
   -------------------------------------------------------------------------- */
.tr-appi-cta {
    padding: 62px 0 72px;
    background: #fff;
}

.tr-appi-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 30px 34px;
    background: #f7f9fc;
    border: 1px solid #eef1f5;
    border-left: 4px solid var(--tr-main);
}

.tr-appi-cta-txt b {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

.tr-appi-cta-txt p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.8;
    color: #66727f;
}

.tr-appi-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tr-appi-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1px solid #d8e0ea;
    text-decoration: none;
    white-space: nowrap;
    transition: all .3s ease;
}

.tr-appi-btn:hover {
    color: var(--tr-main);
    border-color: var(--tr-main);
}

.tr-appi-btn--main {
    color: #fff;
    background: var(--tr-main);
    border-color: var(--tr-main);
}

.tr-appi-btn--main:hover {
    color: #fff;
    background: #00559f;
    border-color: #00559f;
}

/* --------------------------------------------------------------------------
   14.4 行业详情页
   -------------------------------------------------------------------------- */
.tr-appi-hero {
    min-height: 380px;
    padding: 40px 0;
}

.tr-appi-hero-en {
    margin: 0 0 12px;
    font-size: 13px;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, .72);
    text-transform: uppercase;
}

.tr-appi-detail {
    padding: 66px 0 70px;
    background: #fff;
}

.tr-appi-detail-layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.tr-appi-detail-main {
    flex: 1 1 auto;
    min-width: 0;
}

.tr-appi-side {
    flex: 0 0 320px;
    width: 320px;
}

.tr-appi-block + .tr-appi-block {
    margin-top: 52px;
}

.tr-appi-block .tr-sec-title {
    margin-bottom: 18px;
}

.tr-appi-block .tr-sec-title b {
    font-size: 26px;
}

.tr-appi-intro {
    margin: 0 0 24px;
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.95;
    color: #33404f;
    border-left: 3px solid var(--tr-main);
}

.tr-appi-industry-scenes .tr-appi-scenes {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.tr-appi-empty {
    margin: 16px 0 0;
    padding: 16px 18px;
    font-size: 14px;
    color: #66727f;
    background: #f7f9fc;
    border: 1px dashed #dde5ee;
}

/* 侧栏卡片 */
.tr-side-card {
    padding: 22px 20px;
    background: #f7f9fc;
    border: 1px solid #eef1f5;
}

.tr-side-card + .tr-side-card {
    margin-top: 18px;
}

.tr-side-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

.tr-side-title i {
    margin-right: 8px;
    color: var(--tr-main);
}

.tr-appi-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tr-appi-part {
    padding: 5px 12px;
    font-size: 13px;
    color: #4a5568;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 999px;
}

.tr-appi-prods {
    display: grid;
    gap: 10px;
}

.tr-appi-prod {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1px solid #e3e9f0;
    text-decoration: none;
    transition: all .3s ease;
}

.tr-appi-prod em {
    font-style: normal;
    font-size: 12px;
    color: #9aa4b1;
}

.tr-appi-prod em i {
    margin-left: 3px;
    font-size: 11px;
}

.tr-appi-prod:hover {
    border-color: var(--tr-main);
    color: var(--tr-main);
}

.tr-appi-prod.is-rel {
    background: #f2f8ff;
    border-color: var(--tr-main);
}

.tr-appi-prod.is-rel b {
    color: var(--tr-main);
}

.tr-side-card--cta {
    background: linear-gradient(135deg, #0a2540 0%, #0f4c81 100%);
    border: 0;
}

.tr-side-card--cta b {
    display: block;
    font-size: 17px;
    color: #fff;
}

.tr-side-card--cta p {
    margin: 10px 0 18px;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .76);
}

.tr-side-card--cta .tr-appi-btn {
    width: 100%;
    justify-content: center;
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   14.5 其他应用领域
   -------------------------------------------------------------------------- */
.tr-appi-others {
    padding: 66px 0 76px;
    background: #f6f8fb;
}

.tr-appi-minis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.tr-appi-mini {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #eef1f5;
    text-decoration: none;
    transition: all .3s ease;
}

.tr-appi-mini:hover {
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(6, 26, 43, .1);
    transform: translateY(-3px);
}

.tr-appi-mini-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    font-size: 18px;
    color: var(--tr-main);
    background: rgba(0, 102, 204, .08);
    border-radius: 10px;
}

.tr-appi-mini-txt {
    min-width: 0;
}

.tr-appi-mini-txt b {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #222;
    transition: color .3s ease;
}

.tr-appi-mini-txt em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 13px;
    color: #9aa4b1;
}

.tr-appi-mini:hover .tr-appi-mini-txt b {
    color: var(--tr-main);
}

/* --------------------------------------------------------------------------
   14.6 响应式
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
    .tr-appi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tr-appi-detail-layout {
        gap: 28px;
    }

    .tr-appi-side {
        flex: 0 0 280px;
        width: 280px;
    }

    .tr-appi-minis {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 992px) {
    .tr-appi {
        padding: 60px 0 54px;
    }

    .tr-appi-scenes-sec {
        padding: 56px 0 60px;
    }

    .tr-appi-detail-layout {
        flex-direction: column;
    }

    .tr-appi-side {
        width: 100%;
        flex: none;
    }

    .tr-appi-hero {
        min-height: 300px;
    }
}

@media screen and (max-width: 768px) {
    .tr-appi {
        padding: 44px 0 40px;
    }

    .tr-appi-lead {
        margin-bottom: 28px;
        font-size: 14px;
        text-align: left;
    }

    .tr-appi-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tr-appi-name {
        font-size: 17px;
    }

    .tr-appi-scenes-sec {
        padding: 44px 0 46px;
    }

    .tr-appi-tabs {
        gap: 8px;
        margin-bottom: 24px;
    }

    .tr-appi-tabs li {
        padding: 7px 16px;
        font-size: 13px;
    }

    .tr-appi-scenes {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tr-appi-cta {
        padding: 40px 0 46px;
    }

    .tr-appi-cta-inner {
        padding: 22px 18px;
    }

    .tr-appi-cta-btns {
        width: 100%;
    }

    .tr-appi-btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 11px 16px;
    }

    .tr-appi-detail {
        padding: 42px 0 46px;
    }

    .tr-appi-block .tr-sec-title b {
        font-size: 21px;
    }

    .tr-appi-intro {
        font-size: 14px;
    }

    .tr-scene-name {
        padding-right: 66px;
    }

    .tr-appi-others {
        padding: 44px 0 48px;
    }

    .tr-appi-minis {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tr-appi-hero {
        min-height: 260px;
        padding: 30px 0;
    }

    .tr-appi-hero-en {
        font-size: 12px;
        letter-spacing: 3px;
    }
}

/* --------------------------------------------------------------------------
   14.7 首页「应用领域」板块的入口链接（进入应用领域页面）
   -------------------------------------------------------------------------- */
.tr-apps-allmore {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 24px;
    padding: 10px 24px;
    font-size: 14px;
    color: #0e1c2e;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(13, 21, 34, .12);
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(13, 21, 34, .12);
    text-decoration: none;
    transition: all .3s ease;
}

.tr-apps-allmore i {
    font-size: 12px;
    transition: transform .3s ease;
}

.tr-apps-allmore:hover {
    color: #fff;
    background: var(--tr-apps-accent);
    border-color: var(--tr-apps-accent);
}

.tr-apps-allmore:hover i {
    transform: translateX(3px);
}

@media screen and (max-width: 768px) {
    .tr-apps-allmore {
        margin-top: 18px;
        padding: 9px 18px;
        font-size: 13px;
    }
}

@media screen and (max-width: 480px) {
    .tr-appi-cardbody {
        padding: 16px 16px 18px;
    }

    .tr-appi-name {
        font-size: 16px;
    }

    .tr-appi-cta-txt b {
        font-size: 17px;
    }

    .tr-appi-cta-btns {
        flex-direction: column;
    }

    .tr-appi-btn {
        width: 100%;
    }
}