@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-header(1920)：抽屉导航 .tr-nav 在 header 的层叠上下文里，
   遮罩若高于 header 会把整个抽屉一起盖黑，导致打开菜单后满屏漆黑 */
.tr-warpbg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .88);
    z-index: 1910;
    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;
    }

    /* 抽屉展开时头部让出底色：否则右上角会留一条白色 header 底色，
       与右侧遮罩拼接得很生硬（旧浏览器不支持 :has 时自动忽略） */
    .tr-header:has(.tr-nav.active) {
        background: transparent;
        box-shadow: none;
    }

    /* 抽屉打开时收掉汉堡按钮，避免和关闭按钮并存、误点后又触发一次打开 */
    .tr-header:has(.tr-nav.active) .tr-menu-bar {
        display: none;
    }

    .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%;
        /* 与桌面端一致：正文完整展示，不再截到 5 行加省略号 */
    }

    .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 {
        align-items: stretch;
    }

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

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

    /* 上面的 .tr-ab-bottom li b（0,1,2）特异性高于 .tr-ab-num b（0,1,1），
       这里必须用同样长度以上的选择器才能把字号压下来 */
    .tr-ab-bottom li .tr-ab-num b {
        font-size: 26px;
        line-height: 28px;
        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;
        /* 纵向排列时必须拉伸子项：否则 column 方向沿用桌面的 flex-start，
           产品卡会按内容（图片原始宽）撑成 2000px+ 的巨卡 */
        align-items: stretch;
    }

    .tr-pro-view {
        width: 100%;
    }

    /* 四个分类折成两列铺满，避免最右侧「碳纤维加工」被横向裁掉看不见 */
    .tr-pro-tabs {
        width: 100%;
        flex: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        overflow: visible;
        white-space: normal;
    }

    .tr-pro-tabs li {
        flex: 1 1 calc(50% - 4px);
        margin: 0;
        padding: 12px 10px;
    }

    .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 span 会连
   .pagination_info > span（「共 X 页 Y 条数据」）一起套上方框并限高，
   导致说明文字被挤成竖排 */
.tr-pro-page ul.pagination > li > a,
.tr-pro-page ul.pagination > li > span {
    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 ul.pagination > li > a:hover,
.tr-pro-page ul.pagination > li.active > a,
.tr-pro-page ul.pagination > li.active > span,
.tr-pro-page .page-num-current {
    background: var(--tr-main);
    border-color: var(--tr-main);
    color: #fff;
}

/* 分页容器：空间不足时整块换行，明细说明另起一行居中 */
.tr-pro-page .pagination-block {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0;
}

.tr-pro-page .pagination_info {
    justify-content: center;
}

.tr-pro-page .pagination_info span {
    display: inline;
    width: auto;
    min-width: 0;
    height: auto;
    line-height: 1.6;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #888;
    font-size: 13px;
    white-space: normal;
}

@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;
    }

    /* 窄屏改成两列网格：flex 换行时每行宽度随文案变化，会一行一个缩进，看着错位 */
    .tr-flow {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
        justify-content: normal;
    }

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

    .tr-flow-item {
        text-align: center;
    }

    .tr-flow-item b,
    .tr-flow-item p {
        white-space: normal;
    }

    /* 步数为奇数时（如 7 步），最后一项独占一行并居中；偶数时保持两列对齐 */
    .tr-flow-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   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 {
    /* removed: scroll-padding-top */   /* 比吸顶导航(72px)略小：吸附后板块顶部掖进导航下方，红色不再露出 */
}

@media (min-width: 1200px) {
    html {
        /* removed: scroll-snap-type */
    }

    #applications {
        /* removed: scroll-snap-align */
    }
}

/* ---------- 一整屏大图舞台 ---------- */
.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;
    }

    /* 两列网格：原来 4 个平分一行，单卡仅 ~78px，图标占 38px 后文字被压成 14px 竖排 */
    .tr-apps-tabs {
        flex-wrap: wrap;
        gap: 10px;
    }

    .tr-app-tab {
        flex: 0 0 calc(50% - 5px);
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 14px;
    }

    .tr-app-tabtxt {
        flex: 1 1 auto;
    }

    .tr-app-tabtxt b {
        white-space: normal;
    }

    .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) {
    /* 手机页脚：不再单列堆叠（那样会拉到 1100px+）。
       logo/简介 与 联系方式 各占一整行，两个链接分组并排，间距同步收紧。 */
    .tr-foot-main {
        padding: 32px 0 24px;
    }

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

    .tr-foot-about {
        grid-column: 1 / -1;
    }

    .tr-foot-contact {
        grid-column: 1 / -1;
        padding-top: 18px;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .tr-foot-logo {
        margin-bottom: 10px;
    }

    .tr-foot-logo img {
        max-height: 34px;
        margin-bottom: 10px;
    }

    .tr-foot-desc {
        font-size: 13px;
        line-height: 1.7;
    }

    .tr-foot-title {
        margin-bottom: 12px;
        padding-bottom: 9px;
        font-size: 15px;
    }

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

    .tr-foot-links a {
        font-size: 13px;
    }

    /* 联系方式两列排：电话 / 邮箱 / QQ 占位短，长地址整行 */
    .tr-foot-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 14px;
        font-size: 13px;
    }

    .tr-foot-list li {
        margin-bottom: 0;
        gap: 8px;
    }

    .tr-foot-list i {
        margin-top: 4px;
    }

    .tr-foot-list li:last-child {
        grid-column: 1 / -1;
    }

    .tr-foot-bottom {
        padding: 16px 0;
        font-size: 12px;
    }

    /* 12px 时版权句会折成两行、把「所有」孤零零甩到第二行，缩一档正好一行 */
    .tr-foot-copy {
        font-size: 11px;
    }

    .tr-foot-bottom .tr-container {
        gap: 4px 14px;
    }
}


/* ==========================================================================
   「关于我们」页面（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 工艺与品控（一段文字描述 + 九宫格图片）
   -------------------------------------------------------------------------- */
.tr-ab-craft {
    padding: 76px 0 80px;
    background: #fff;
}

.tr-ab-craft-desc {
    max-width: 880px;
    margin: 0 auto 40px;
    text-align: center;
}

.tr-ab-craft-desc p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.95;
    color: #555;
}

.tr-ab-craft-desc p:last-child {
    margin-bottom: 0;
}

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

.tr-ab-craft-item {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #eef3f9;
    aspect-ratio: 3 / 2;
}

.tr-ab-craft-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.tr-ab-craft-item:hover img {
    transform: scale(1.06);
}

@media screen and (max-width: 992px) {
    .tr-ab-craft-grid {
        gap: 12px;
    }
}

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

    .tr-ab-craft-desc {
        margin-bottom: 28px;
    }

    .tr-ab-craft-desc p {
        font-size: 14px;
        line-height: 1.85;
    }

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

/* --------------------------------------------------------------------------
   11.7 关于我们页面响应式
   -------------------------------------------------------------------------- */
@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;
    }
}

/* ===== 公司介绍页：数据指标 + 图墙 ===== */
.tr-ab-stats { padding: 70px 0 76px; background: #f5f8fc; }
.tr-ab-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 36px; }
.tr-ab-num { display: block; padding: 30px 18px; text-align: center; background: #fff; border: 1px solid #eef1f5; transition: all .35s ease; }
.tr-ab-num:hover { border-color: transparent; box-shadow: 0 16px 36px rgba(6,26,43,.12); transform: translateY(-4px); }
.tr-ab-num b { display: block; font-family: DIN-Bold, Arial, sans-serif; font-size: 38px; line-height: 1; color: #0066cc; }
.tr-ab-num span { display: block; margin-top: 10px; font-size: 14px; color: #666; }
.tr-ab-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.tr-ab-gallery figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #eef3f9; }
.tr-ab-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.tr-ab-gallery figure:hover img { transform: scale(1.05); }

/* ===== 发展历程页：时间轴 ===== */
.tr-ab-timeline { padding: 70px 0 84px; background: #fff; }
.tr-tl { position: relative; max-width: 940px; margin: 42px auto 0; padding: 0; list-style: none; }
.tr-tl::before { content: ''; position: absolute; left: 128px; top: 8px; bottom: 14px; width: 2px; background: #e3eaf2; }
.tr-tl li { position: relative; display: flex; padding-bottom: 34px; }
.tr-tl li:last-child { padding-bottom: 0; }
.tr-tl .y { flex: 0 0 128px; padding-right: 30px; text-align: right; font-size: 22px; font-weight: 700; line-height: 1.2; color: #0066cc; }
.tr-tl .dot { position: absolute; left: 122px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #0066cc; border: 3px solid #fff; box-shadow: 0 0 0 2px #d6e4f2; }
.tr-tl .bd { flex: 1; padding-left: 36px; }
.tr-tl .bd h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #222; }
.tr-tl .bd p { margin: 0; font-size: 14px; line-height: 1.9; color: #666; }

@media (max-width: 992px) {
    .tr-ab-nums { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .tr-ab-gallery { gap: 12px; }
    .tr-tl::before { left: 92px; }
    .tr-tl .y { flex: 0 0 92px; padding-right: 22px; font-size: 19px; }
    .tr-tl .dot { left: 86px; }
    .tr-tl .bd { padding-left: 28px; }
}
@media (max-width: 750px) {
    .tr-ab-stats { padding: 44px 0 48px; }
    .tr-ab-nums { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }
    .tr-ab-num { padding: 20px 12px; }
    .tr-ab-num b { font-size: 26px; }
    .tr-ab-num span { font-size: 12px; margin-top: 6px; }
    .tr-ab-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }
    .tr-ab-timeline { padding: 44px 0 52px; }
    .tr-tl { margin-top: 26px; }
    .tr-tl::before { left: 6px; }
    .tr-tl li { display: block; padding-bottom: 26px; padding-left: 30px; }
    .tr-tl .y { flex: none; padding: 0 0 6px; text-align: left; font-size: 18px; }
    .tr-tl .dot { left: 0; top: 4px; }
    .tr-tl .bd { padding-left: 0; }
    .tr-tl .bd h4 { font-size: 15px; }
    .tr-tl .bd p { font-size: 13px; }

}

/* ===== 关于我们页：页内锚点导航 ===== */
.tr-subnav { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #eef1f5; box-shadow: 0 2px 10px rgba(6,26,43,.05); }
.tr-subnav ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.tr-subnav li a { position: relative; display: block; padding: 0 34px; line-height: 54px; font-size: 16px; color: #333; transition: color .25s ease; }
.tr-subnav li a:hover { color: #0066cc; }
.tr-subnav li.on a { color: #0066cc; font-weight: 700; }
.tr-subnav li.on a::after { content: ''; position: absolute; left: 34px; right: 34px; bottom: 0; height: 2px; background: #0066cc; }
@media (max-width: 750px) { .tr-subnav ul { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; } .tr-subnav li a { padding: 0 15px; line-height: 46px; font-size: 14px; white-space: nowrap; } .tr-subnav li.on a::after { left: 15px; right: 15px; } }