/* CSS Document */

:root {
    --primary: #D32F2F;
    --primary-light: #B71C1C;
    --hover-shadow: 0 8px 25px rgba(211, 47, 47, 0.35);
    
    /* 蓝色调 */
    --secondary:#0E42B3;
    --secondary-light:#083496;
    --secondary-hover-shadow:0 8px 25px rgba(14,66,179,0.3);
    
    /*lm-banner-bg*/
    --primary-lm-banner-bg:linear-gradient(135deg, #dcd8d8 0%, #e8e4e4 50%, #ded9d9 100%);
    --secondary-lm-banner-bg:linear-gradient(135deg, #cbd8e6 0%, #dfe9f3 50%, #cdddec 100%);
}
.primary-svg-color{
    fill:var(--primary);
}

/* ====================通用CSS样式====================*/
*{margin:0; padding:0; box-sizing:border-box;outline: none !important;}
body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;color: #1e1e2a; background: #fff; line-height: 1.5; font-size: 14px;overflow-y: scroll;}
ul,li{list-style: none;}
a{text-decoration: none; cursor: pointer; color: inherit;}
img{max-width:100%; border:0; display:block;}
button,input{outline:none; border:none; background:transparent;}
button, a, .btn {-webkit-tap-highlight-color: transparent;}
div, span, h1, h2, h3, h4, h5, h6, ul, li, ol, p, dt, dd, dl, input, button, select, textarea, label, img, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,.relative{
	position:relative;
}
.container{width: 1280px;max-width: 100%;margin: 0 auto;padding: 0 20px;}
/*  ========= 产品内容页 面包屑导航 =========  */
.breadcrumb a{
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    line-height: 24px;
    color: #333 !important;
    margin: 0 4px;
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;    
}
.breadcrumb ol li:first-child a{
    margin: 0 4px 0 0;
}
.breadcrumb a:hover:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #ec3b3b;    
}
.breadcrumb{
    margin: 8px 0;
    width:100%;
    margin-top:12px;
    margin-bottom:12px; 
}
.breadcrumb ol{
    display:flex;
    align-items:center;
}
.breadcrumb ol li{
    display: contents;
}
.breadcrumb a:hover{
    color:#ec3b3b !important;
}
.breadcrumb strong{
    color: #4b5b76;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -ms-flex-negative: 1;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    line-height: 24px;
    margin: 0 4px;
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;    
    font-weight:500;
}
.breadcrumb .current-page{
    color: #a3adb7;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -ms-flex-negative: 1;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    line-height: 24px;
    margin: 0 4px;
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;    
    font-weight:500;
}
.breadcrumb i{
    margin:0 5px;
    color: #333;
    line-height:24px;
}

/* ====================站点页头样式====================*/
.site-header{width:100%;}

.site-header__topbar{
    height: 40px; line-height: 40px; background: #f7f7f7; color: #333;
}
.topbar-left{float:left;}
.topbar-left i { margin-right: 6px; color:var(--primary);}
.topbar-right {float:right;display:flex;}

.lang-btn {
    display: flex; align-items: center; gap: 5px; color: #333; font-size: 13px;
    cursor: pointer; padding: 0 8px;margin-left:15px;cursor: pointer;
}
.site-header__extra-item *{
     cursor: pointer;
}
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3); z-index: 9998; display: none;
}
.lang-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 670px; background: #fff; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 9999; display: none;
    min-height: 220px;padding:40px 0;
}
.lang-modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #666;
    transition: 0.2s;
    border-radius: 50%;
}
.lang-modal-close:hover {
    background: #f2f2f2; color: #000;
}
.lang-modal-title {
    font-size: 16px; font-weight: 600; margin-bottom: 24px; text-align: center;
}
.lang-list {
    display: flex; flex-direction: row; flex-wrap: wrap;gap: 16px;
}
.lang-item {
    width: 150px;
    padding: 14px 12px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: 0.2s;
    justify-content: center;
    text-align: center;
}
.lang-item:hover { background: #f0f4fe; color:var(--primary); }
.lang-item.active { color:var(--primary); font-weight: 500; background: #e8f0ff; }

.site-header__wrapper{
    height: 120px; transition: all 0.25s;
}
.site-header__wrapper .container{
    display: flex; align-items: center; height: 100%; gap: 20px;
}
.site-header__logo{
	height: 48px;
	display: block;
	float: left;
	display: flex;
	align-items: center;
}
.site-header__logo img{width:90px;height:auto;filter: saturate(0) brightness(0);transform: translateZ(0);}
.site-header__company{ margin-left: 24px; }
.site-header__company-name{
    font-size: 18px; font-weight: 700; color: #1a1e2b; margin-bottom: 4px; letter-spacing: 0.3px;
}
.site-header__company-meta{
    font-size: 13px; color: #5e5e6e; display: flex; align-items: center; gap: 12px;
}
.site-header__company-meta i { color:var(--primary); width: 16px; margin-right: 4px; }
.site-header__company-extra{
    display: flex; gap: 20px; margin-top: 5px; font-size: 13px; color: #4a4a5a;
}
.site-header__extra-item{
    display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.site-header__wrapper .contact-btn{
    color: #4a4a5a;
    transition: 0.2s;
    cursor: pointer;
    font-size: inherit;
}
.site-header__wrapper .contact-btn:hover{
    color:var(--primary);
}
.site-footer .contact-btn{
    color: #c6c9d6;
    transition: 0.2s;
    cursor: pointer;
    font-size: inherit;
}
.site-footer .contact-btn:hover{
    color: #ffffff;
}
.copy-feedback {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85); color: white; padding: 12px 24px;
    border-radius: 6px; font-size: 14px; font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999; opacity: 0; transition: 0.3s ease;
    pointer-events: none;
}
.copy-feedback.show { opacity: 1; transform: translate(-50%, 10px); }

.site-header__right{ margin-left: auto; }
.site-header__search{
    width: 320px; height: 40px; display: flex; align-items: center;
    border: 1px solid #e2e4e9; border-radius: 24px; background: #fafbfc;
    overflow: hidden; transition: box-shadow 0.15s;
}
.site-header__search:focus-within{ box-shadow: 0 0 0 2px rgba(14,66,179,0.15); border-color:var(--primary); }
.site-header__search-input{
    flex: 1; padding: 0 16px; font-size: 14px; color: #1e1e2a;
}
.site-header__search-input::placeholder{ color: #9aa0ab; }
.site-header__search-btn{
    width: 48px; height: 100%; background:#383434; color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s;
}
.site-header__search-btn:hover{ background:#D32F2F; }

.site-header__navbar{
    height: 50px; background:#383434; width: 100%;
}
.site-header__navbar .container{ height: 100%; }
.site-header__nav-list{
    display: flex; height: 100%; align-items: stretch;
}
.site-header__nav-item{
    flex: 1;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.site-header__nav-item:hover,
.site-header__nav-item.is-active{
    background:#d32f2f;
}
.site-header__nav-link{
    color: #fff; font-size: 15px; font-weight: 500;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    gap: 6px; white-space: nowrap;
    letter-spacing: 0.3px;
    padding:0 30px;
}
.site-header__nav-item.is-active .site-header__nav-link{ font-weight: 600; }

.site-header__nav-menu,
.site-header__sub-menu{
    position: absolute; top: 100%; left: 0;
    min-width: 200px;
    width: auto; white-space: nowrap;
    background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border-radius: 6px; z-index: 1000; display: none;
    animation: fadeInNav 0.18s ease;
    overflow: visible;
    padding: 6px 0;
}
.site-header__sub-menu{
    left: 100%; top: 0;
    margin-left: 2px;
}
.site-header__menu-item{
    position: relative;
    width: 100%;
}
.site-header__menu-link{
    display: flex; align-items: center; justify-content: space-between;
    height: 44px; line-height: 44px; padding: 0 20px;
    font-size: 14px; color: #1e1e2a; background: #fff;
    transition: all 0.15s;
    width: 100%; white-space: nowrap;
}
.site-header__menu-link i{ font-size: 12px; color: #7c7f8c; margin-left: 12px; }
.site-header__menu-link:hover{
    background: #f0f4fe; color:var(--primary);
}
.site-header__menu-link:hover i{ color:var(--primary); }

@keyframes fadeInNav{
    from{ opacity: 0; transform: translateY(5px); }
    to{ opacity: 1; transform: translateY(0); }
}

.tooltip {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    transform: translate(-50%, -120%);
}
.wechat-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}
.wechat-modal.show {
	display: flex;
}
.wechat-modal__content {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.2);
	max-width: 360px;
	width: 100%;
	padding: 30px 20px 20px;
	text-align: center;
	position: relative;
	animation: wechatModalIn 0.3s ease;
}
@keyframes wechatModalIn {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}
.wechat-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	background: #f5f5f5;
	border: none;
	border-radius: 50%;
	font-size: 20px;
	line-height: 32px;
	cursor: pointer;
	color: #666;
	transition: background 0.2s;
}
.wechat-modal__close:hover {
	background: #eee;
	color: #000;
}
.wechat-modal__body img {
	width: 200px;
	height: 200px;
	margin: 0 auto 16px;
	border: 1px solid #eee;
	border-radius: 8px;
}
.wechat-modal__body p {
	font-size: 15px;
	color: #333;
	margin: 0;
}

.shop-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: shopModalFadeIn 0.2s ease;
}
.shop-modal.show {
    display: flex;
}
@keyframes shopModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.shop-modal__content {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: shopModalScaleIn 0.3s ease;
}
@keyframes shopModalScaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.shop-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    background: #fafafc;
}
.shop-modal__title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0;
}
.shop-modal__close {
    width: 36px;
    height: 36px;
    background: #f5f7fa;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.shop-modal__close:hover {
    background: #eee;
    transform: rotate(90deg);
}
.shop-modal__close svg {
    width: 18px;
    height: 18px;
}
.shop-modal__body {
    padding: 16px 16px 25px 16px;
}
.shop-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    margin-bottom: 12px;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}
.shop-card:last-child {
    margin-bottom: 0;
}
.shop-card:hover {
    border-color:var(--primary);
    box-shadow: 0 4px 12px rgba(14,66,179,0.1);
    transform: translateY(-2px);
}
.shop-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.shop-card__icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}
.shop-card__icon--alibaba {
    background: linear-gradient(135deg, #ff6a00 0%, #ff9900 100%);
}
.shop-card__icon--aliexpress {
    background: linear-gradient(135deg, #e6321a 0%, #ff5a3c 100%);
}
.shop-card__icon--tmall {
    background: linear-gradient(135deg, #ff0036 0%, #ff4466 100%);
}
.shop-card__info {
    flex: 1;
    min-width: 0;
}
.shop-card__name {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0 0 4px;
    line-height: 1.3;
}
.shop-card__desc {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}
.shop-card__arrow {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}
.shop-card:hover .shop-card__arrow {
    transform: translateX(4px);
}
.shop-card:hover .shop-card__arrow svg {
    stroke:var(--primary);
}
.open-modal-btn {
    display: inline-block;
    margin: 50px auto;
    padding: 12px 24px;
    background:var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}
.open-modal-btn:hover {
    background: #0c3596;
}
.shop-card__icon img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
    display: block;
}

.site-footer {
    background: #2c2c32; padding: 50px 0 0; width: 100%; position: relative;
}
.site-footer::before{
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--primary);
}
.footer-container{ width: 1280px; max-width: 100%; margin: 0 auto; padding: 0 20px; }
.footer-main{
    display: grid;     grid-template-columns: 2.2fr 1fr 1.5fr 2fr; gap: 36px; padding-bottom: 40px;
}
.footer-title{
    font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 18px; position: relative; padding-bottom: 10px;
}
.footer-title::after{
    content: ""; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--primary);
}
.footer-desc{
    color: #c6c9d6; font-size: 14px; line-height: 1.7; margin-bottom: 14px; max-width: 380px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.footer-desc a {
    color: #fff; margin-left: 6px; text-decoration: underline; text-underline-offset: 2px;
    font-weight: 500; transition: color 0.2s;
}
.footer-desc a:hover { color: #d9e0ff; }

.footer-link-list{ display: flex; flex-direction: column; gap: 12px; }
.footer-link-item a{ color: #c6c9d6; font-size: 14px; transition: 0.2s; }
.footer-link-item a:hover{ color: #ffffff; }

.footer-contact-list{ display: flex; flex-direction: column; gap: 16px; }
.contact-item{ 
    display: flex; align-items: center;
    gap: 12px; 
}
.contact-icon{
    width: 28px; height: 28px; background: var(--primary); color: #fff;
    border-radius: 6px; display: flex !important; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.contact-text{ color: #c6c9d6; font-size: 14px; line-height: 1.5; }
.footer-bottom{
    background: #1f1f26; padding: 18px 0; margin-top: 10px;
}
.footer-bottom-container{
    width: 1280px; max-width: 100%; margin: 0 auto; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;
}
.footer-copyright{ color: rgba(255,255,255,0.75); font-size: 13px; }
.footer-copyright .ICP{
    color: #fff;
    text-decoration: underline;
}
.footer-copyright .line{margin:0 8px;}
.footer-legal-list{ display: flex; gap: 28px; }
.footer-legal-item a{ color: rgba(255,255,255,0.75); font-size: 13px; transition: 0.2s;text-decoration: underline;}
.footer-legal-item a:hover{ color: #fff; }

.footer-social-list{ display: flex; gap: 12px; margin-top: 12px; position: relative; }
.footer-social-link{
    width: 38px; height: 38px; background: #3a3a44; color: #ddd;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; font-size: 18px; cursor: pointer;
    position: relative;
}
.footer-social-link:hover{ background:var(--primary); color: #fff; }

/* =======================网站边栏&工具栏样式====================== */
.float-bar {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-40%);
    z-index: 999;
    background: #ffffff;
    border: 2px solid var(--primary);
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 56px;
    will-change: box-shadow;
    width:83px;
}

.float-bar:hover {
    box-shadow: 0 6px 28px rgba(0, 102, 204, 0.2);
}

.float-bar .bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    border: none;
    background: transparent;
    outline: none;
}

.float-bar .bar-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle, rgba(0, 102, 204, 0.3) 0%, transparent 70%);
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.float-bar .bar-item:active::after {
    opacity: 1;
    transition: opacity 0s;
}

.float-bar .bar-item i {
    font-size: 22px;
    color:var(--primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.float-bar .bar-item span {
    font-size: 11px;
    color: #444444;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.float-bar .bar-item:hover {
    background:var(--primary);
    /*box-shadow: 0 4px 14px rgba(0, 102, 204, 0.35);*/
    box-shadow:var(--hover-shadow);
}

.float-bar .bar-item:hover i,
.float-bar .bar-item:hover span {
    color: #ffffff;
}

.float-bar .bar-item.active {
    background: rgba(0, 102, 204, 0.08);
}

.float-bar .bar-item.active i {
    color: #004d99;
}

.float-bar .bar-divider {
    width: 60%;
    height: 1px;
    background: rgba(0, 102, 204, 0.25);
    margin: 6px auto;
    pointer-events: none;
}

.float-bar .back-top {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.float-bar .back-top.is-at-top {
    opacity: 0.4;
    pointer-events: none;
}

.float-bar .back-top.is-at-top:hover {
    all: unset;
    cursor: default;
}

.float-bar .back-top.is-active {
    opacity: 1;
    pointer-events: auto;
    animation: pulse-hint 0.6s ease;
}

.float-bar .back-top.is-active:hover i {
    animation: bounce-up 0.5s ease infinite;
}

@keyframes pulse-hint {
    0%,100% { transform: scale(1); }
    40% { transform: scale(1.12); }
}

@keyframes bounce-up {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.float-bar .qrcode-tip {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 6px 28px rgba(0, 102, 204, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 12px;
    z-index: 998;
    white-space: nowrap;
    width:172px;
    height:auto;
}

.float-bar .qrcode-tip img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    border: 2px dashed #e0e0e0;
    border-radius: 10px;
    padding: 6px;
    background: #fafafa;
}

.float-bar .qrcode-tip .uid {
    font-size: 12px;
    font-weight: 600;
    color: #444444;
    margin-top: 10px;
    text-align: center;
}

.float-bar .qrcode-trigger:hover .qrcode-tip {
    opacity: 1;
    visibility: visible;
}

.float-bar .tip-bubble {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 10px;
    white-space: nowrap;
    z-index: 998;
}

.float-bar .tip-bubble::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(0, 0, 0, 0.85);
}

.float-bar .bar-item:hover .tip-bubble {
    opacity: 1;
    visibility: visible;
}
/* 适配双二维码的气泡框 */
.float-bar .qrcode-tip.multi-qr {
    width: auto; /* 取消固定宽度，自适应 */
    min-width: 260px;
    padding: 16px 20px;
    white-space: normal; /* 必须取消禁止换行 */
    margin-right: 12px;
}
.float-bar .qrcode-tip.multi-qr .qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.float-bar .qrcode-tip.multi-qr img {
    width: 110px; /* 缩小尺寸以适应并排 */
    height: 110px;
    border: 1px solid #f0f0f0;
    padding: 4px;
    border-radius: 8px;
}
.float-bar .qrcode-tip.multi-qr .uid {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    margin-top: 8px;
}
.qrcode-tip .qr-name {
    font-size: 13px;   
    font-weight: 600;
    color: #333;
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;  
}
.qrcode-tip.multi-qr .qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 双二维码弹窗里的头部标题 */
.float-bar .qrcode-tip.multi-qr .qr-header {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 12px;       /* 与下方二维码保持距离 */
    padding-bottom: 8px;       /* 底部内边距 */
    border-bottom: 1px solid #f0f0f0; /* 标题下方的浅灰色分割线，增加层次感 */
}
.float-bar .qrcode-tip.multi-qr .qr-boxs{
    display:flex;
}
.toast {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(-120px);
    z-index: 2000;
    background: #333;
    color: #fff;
    padding: 10px 22px;
    border-radius: 24px;
    font-size: 13px;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    will-change: transform, opacity;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast.success {
    background: #2e7d32;
}


/*========================首页CSS样式=======================*/

/*-------线性直线运动模组banner-------*/
.lm-banner,
.lm-banner * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.lm-banner {
    font-family: 'Noto Sans SC', system-ui, sans-serif;
    width: 100%;
}

.lm-banner .banner-container {
    position: relative;
    width: 100%;
    min-height: 500px;
    background: var(--primary-lm-banner-bg);
    overflow: hidden;
}

.lm-banner .grid-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(211, 47, 47, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(211, 47, 47, 0.04) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

.lm-banner .decorative-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.lm-banner .line {
    position: absolute;
    background: linear-gradient(90deg, transparent, #D32F2F, transparent);
    height: 2px;
    opacity: 0.5;
}

.lm-banner .line-1 {
    top: 20%;
    width: 60%;
    left: 20%;
    animation: lm-slideLine 8s infinite;
}
.lm-banner .line-2 {
    top: 50%;
    width: 80%;
    left: 10%;
    animation: lm-slideLine 10s infinite reverse;
}
.lm-banner .line-3 {
    top: 80%;
    width: 50%;
    left: 25%;
    animation: lm-slideLine 6s infinite;
}

@keyframes lm-slideLine {
    0%,
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
}

.lm-banner .corner-decoration {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(211, 47, 47, 0.3);
    pointer-events: none;
}
.lm-banner .corner-tl {
    top: 30px;
    left: 30px;
    border-right: none;
    border-bottom: none;
}
.lm-banner .corner-br {
    bottom: 30px;
    right: 30px;
    border-top: none;
    border-left: none;
}

.lm-banner .banner-main {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    min-height: 500px;
    flex-wrap: wrap;
}

.lm-banner .content {
    flex: 0 0 520px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #212529;
    padding: 40px 0;
}

.lm-banner .tagline {
    font-size: 16px;
    letter-spacing: 3px;
    color: var(--primary);
    margin-bottom: 12px;
    font-weight: 700;
    
}

.lm-banner .main-title {
    font-size: 52px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(211, 47, 47, 0.1);
}

.lm-banner .main-title .highlight {
    color: var(--primary);
    display: block;
}

.lm-banner .description {
    font-size: 18px;
    color: #495057;
    max-width: 480px;
    line-height: 1.7;
    margin-bottom: 35px;
}

.lm-banner .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.lm-banner .visual-col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 20px;
}

.lm-banner .module-logo-text {
    display: none;
}

.lm-banner .module-svg {
    width: 664px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
    margin-right: 13px;
}

.lm-banner .module-rail {
    fill: #adb5bd;
    stroke: #6c757d;
    stroke-width: 2;
}

.lm-banner .module-block {
    fill: #495057;
    stroke-width: 2.5;
    animation: lm-moveBlock 4s ease-in-out infinite;
}

@keyframes lm-moveBlock {
    0%,
    100% {
        transform: translateX(-220px);
    }
    50% {
        transform: translateX(180px);
    }
}
.lm-banner circle.primary-svg-color {
    fill: #9e9e9e;
}
.lm-banner .module-screw {
    stroke: #343a40;
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 10 5;
    animation: lm-rotateScrew 2s linear infinite;
}

@keyframes lm-rotateScrew {
    to {
        stroke-dashoffset: -30;
    }
}

.lm-banner .annot-line {
    stroke: #D32F2F;
    stroke-width: 1.5;
    stroke-dasharray: 5 3;
    fill: none;
    pointer-events: none;
    transition: all 0.3s ease;
}

.lm-banner .annot-text {
    fill: #212529;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    dominant-baseline: central;
    text-anchor: middle;
    pointer-events: none;
    transition: fill 0.3s ease;
}

.lm-banner .annot-bg {
    fill: rgba(255, 255, 255, 0.94);
    rx: 6;
    ry: 6;
    stroke: rgba(211, 47, 47, 0.3);
    stroke-width: 1;
    pointer-events: all;
    cursor: pointer;
    transition: all 0.35s ease;
}

/* 标注组悬停效果 - 边框高亮+虚线发光 */
.lm-banner .annotation-group {
    cursor: pointer;
}
.lm-banner .annotation-group:hover .annot-bg {
	stroke: #D32F2F;
	stroke-width: 2.5;
	stroke-dasharray: 6 3; 
}
.lm-banner .annotation-group:hover .annot-line {
    stroke: #D32F2F;
    stroke-width: 2.8;
    filter: drop-shadow(0 0 8px rgba(211, 47, 47, 0.55));
    opacity: 1;
}
.lm-banner .annotation-group:hover .annot-text {
    fill: #B71C1C;
    font-weight: 700;
}
.lm-banner .annotation-group:hover .check-icon rect {
    filter: drop-shadow(0 0 4px rgba(39, 174, 96, 0.5));
}

.lm-banner .tech-specs {
    display: flex;
    gap: 20px;
    margin-right: 80px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lm-banner .spec-item {
    width: 90px;
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.lm-banner .spec-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.2);
}

.lm-banner .detail-img {
    width: 100%;
    height: 103px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.lm-banner .detail-label {
    font-size: 11px;
    color: #495057;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
    margin-top: 4px;
}

.lm-banner .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: var(--primary);
    border: 2px solid var(--primary);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
}

.lm-banner .cta-button:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    box-shadow: var(--hover-shadow);
    transform: translateY(-2px);
}

.lm-banner .arrow-icon {
    transition: transform 0.3s ease;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: white;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lm-banner .cta-button:hover .arrow-icon {
    transform: translateX(5px);
}

/* 在线咨询按钮 - 更新样式 */
.lm-banner .secondary-button {
    display: inline-flex;
    align-items: center;
    padding: 16px 40px;
    background: transparent;
    border: 2px solid #4a5562;
    color: #1e1e2a;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.35s ease;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.lm-banner .secondary-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #4a5562;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.35s ease;
    border-radius: 2px;
}

.lm-banner .secondary-button:hover {
        background: #4a5562;
	color: #ffffff;
	transform: translateY(-2px);
}
.lm-banner .secondary-button:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
}

.lm-banner .secondary-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(74, 85, 98, 0.3);
    transition: all 0.1s ease;
}

.lm-banner .spec-item {
    font-family: inherit;
    border: 1px solid #e0e0e0;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    width: 90px;
    height: 100px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-align: center;
}

.lm-banner .spec-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.2);
}

.lm-banner .tech-specs-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: -10px;
    margin-right: 13px;
    z-index: 2;
}

.lm-banner .specs-viewport {
    width: 568px !important;
    overflow: hidden;
}

.lm-banner .tech-specs {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    transition: transform 0.3s ease;
    width: max-content;
}

.lm-banner .spec-item {
    flex: 0 0 127px !important;
    width: 127px !important;
    height: 140px !important;
    box-sizing: border-box;
    font-family: inherit;
    border: 1px solid #e0e0e0;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-align: center;
}
.lm-banner .spec-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.2);
}

.lm-banner .spec-slide-btn {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #ffffff;
    color: #444444;
    border: 1px solid #44444480;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 3;
    flex-shrink: 0;
}
.lm-banner .spec-slide-btn:hover {
    background: #D32F2F;
    color: #fff;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.25);
    border: 1px solid #e57373;
}
.lm-banner .spec-slide-btn:active {
    transform: scale(0.95);
}
.lm-banner .spec-slide-btn svg {
    width: 14px;
    height: 14px;
}

.lm-banner .block-logo-bg {
    fill: #D32F2F;
    rx: 4;
    ry: 4;
}

.lm-banner .block-logo-img {
    pointer-events: none;
}

/* =======================桥接价值2====================== */
.bridge-stats {
  padding: 50px 0;
  background: #ffffff;
  width: 100%;
}
/* 父级只保留：flex + 居中 + 两端分布 */
.bridge-stats .stats-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 项目不设宽度、不居中、内容自然左对齐 */
.bridge-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.bridge-stats .stat-item i {
  font-size: 38px;
  color: #444444;
  line-height: 1;
}
.bridge-stats .stat-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bridge-stats .stat-number {
  font-size:26px;
  font-weight: 700;
  color: #444444;
  line-height: 1.1;
}
.bridge-stats .stat-label {
  font-size:14px;
  color: #555555;
  line-height: 1.4;
}

/* =======================rx-linear-modules 独立样式====================== */
/* ============================================
   线性模组组件 · 独立命名空间 .rx-linear-modules
   弹窗样式前缀 rx-dl-
   ============================================ */
.rx-linear-modules {
    padding:50px 0;
    background: #f7f9fc;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.index-container .section__header {
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 20px;
    position: relative;
}

/* 添加红色装饰线，与导航高亮呼应 */
.index-container .section__title::after {
    content: '';
    position: absolute;
    bottom:-5px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #d32f2f;
}

.index-container .section__title {
    font-size: 32px;
    font-weight: 700;
    color:#383434;
    margin: 0 0 8px;
}

.index-container .section__en-sub {
    font-size: 14px;
    color:#9e9e9e;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 500;
}

.index-container .section__desc {
    font-size: 15px;
    color: #484747;
    max-width:800px;
    margin: 0 auto;
    padding-bottom: 20px;
}

.rx-linear-modules .product-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.rx-linear-modules .product-card-new {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.03);
    border: 1px solid #e8e8e8;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2,0,0,1);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.rx-linear-modules .product-card-new:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 30px -8px rgba(0,0,0,0.08);
    border-color: #d0d0d0;
}
.rx-linear-modules .card-image-area {
    position: relative;
    height:200px;
    background: linear-gradient(135deg, #f2f3f9, #e2e4ea);
    overflow: hidden;
}
.rx-linear-modules .card-image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
    opacity: 0.95;
}
.rx-linear-modules .product-card-new:hover .card-image-area img {
    transform: scale(1.05);
    opacity: 1;
}
.rx-linear-modules .series-tag {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background:#5d5a5a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 30px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 2;
}
.rx-linear-modules .card-content {
    padding: 18px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.rx-linear-modules .product-name {
    font-size: 18px;
    font-weight: 700;
    color: #1e2b3c;
    margin-bottom: 12px;
    display: flex;
    flex: 1;
}
.rx-linear-modules .product-name a {
    color: inherit;
    text-decoration: none;
}
.rx-linear-modules .product-name a:hover {
    color: #d32f2f;
}
.rx-linear-modules .spec-list {
    margin-bottom: 16px;
}
.rx-linear-modules .spec-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #dce1e8;
    font-size: 13px;
}
.rx-linear-modules .spec-label {
    color: #5e6f7e;
}
.rx-linear-modules .spec-value {
    font-weight: 600;
    color: #1f2a36;
}
.rx-linear-modules .spec-value.highlight {
    color: #d32f2f;
    font-weight: 700;
}
.rx-linear-modules .button-group {
    display: flex;
    gap: 10px;
    margin-top: auto;
}
.rx-linear-modules .btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.rx-linear-modules .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(211,47,47,0.25);
}
.rx-linear-modules .btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
.rx-linear-modules .rx-btn-outline-primary {
    border-color: #4a5562;
    color: #4a5562;
}
.rx-linear-modules .rx-btn-outline-primary:hover {
    background-color: #d32f2f;
    color: #fff;
    border-color: #d32f2f;
}
.rx-linear-modules .rx-btn-outline-dark {
    border-color: #4a5562;
    color: #4a5562;
}
.rx-linear-modules .rx-btn-outline-dark:hover {
    background-color: #f2f5f8;
    border-color: #1e2b3c;
    color: #1e2b3c;
}

/* ========== 弹窗 (独立前缀 rx-dl-) ========== */
.rx-dl-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    padding: 15px;
}
.rx-dl-overlay.active {
    visibility: visible;
    opacity: 1;
}
.rx-dl-container {
    background: #fff;
    width: 100%;
    max-width: 1280px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    border: 1px solid #e8e8e8;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding:0 20px;
}
.rx-dl-overlay.active .rx-dl-container {
    transform: scale(1);
}
.rx-dl-header {
    padding: 20px 24px;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.rx-dl-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e2b3c;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.rx-dl-close {
    background: #f8f9fa;
    border: none;
    font-size: 20px;
    color: #64748b;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    outline: none;
}
.rx-dl-close:hover {
    background-color: #eef2ff;
    color: #d32f2f;
    transform: rotate(90deg);
}
.rx-dl-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.rx-linear-modules .series-table-container {
    display: none;
}
.rx-linear-modules .series-table-container.active {
    display: block;
    animation: rx-fadeIn 0.3s ease;
}
@keyframes rx-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.rx-linear-modules .series-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.rx-linear-modules .series-subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #1e2b3c;
    margin: 0;
}
.rx-linear-modules .model-tabs-wrapper {
    margin-left: auto;
}
.rx-linear-modules .model-tabs {
    display: flex;
    gap: 8px;
}
.rx-linear-modules .model-tab {
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    border: 1.5px solid #dde3e9;
    background: #fff;
    color: #4a5562;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    outline: none;
}
.rx-linear-modules .model-tab.active {
    background: #d32f2f;
    border-color: #d32f2f;
    color: #fff;
    box-shadow: 0 4px 10px rgba(211,47,47,0.15);
}
.rx-linear-modules .model-tab:hover:not(.active) {
    border-color: #d32f2f;
    color: #d32f2f;
}

.rx-linear-modules .model-panels-wrapper {
    position: relative;
    height:296px;
    overflow: hidden;
    background: #fafbfc;
    border-radius: 12px;
    border: 1px solid #e9edf2;
    margin-bottom: 20px;
}
.rx-linear-modules .model-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    animation: rx-panelFade 0.25s;
}
.rx-linear-modules .model-panel.active {
    display: flex;
}
@keyframes rx-panelFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.rx-linear-modules .model-panel .table-scroll-wrap {
    flex: 1;
    overflow: auto;
    border-radius: 0 0 12px 12px;
}

.rx-linear-modules .model-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.rx-linear-modules .model-table thead th {
    text-align: center;
    padding: 12px 10px;
    font-weight: 600;
    font-size: 13px;
    color: #3e4d5e;
    white-space: nowrap;
    background: linear-gradient(180deg, #f4f7fa, #eef1f6);
    position: sticky;
    top: 0;
    z-index: 4;
    border-bottom: 2px solid #dde3e9;
}
.rx-linear-modules .model-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 6;
    background: linear-gradient(180deg, #f4f7fa, #eef1f6);
    border-radius: 8px 0 0 0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.06);
}
.rx-linear-modules .model-table tbody td {
    padding: 15px 10px;
    font-size: 13px;
    color: #1f2a36;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #edf2f7;
}
.rx-linear-modules .model-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    font-weight: 700;
    color: #1e2b3c;
    background-color: #fff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.06);
}
.rx-linear-modules .model-table tbody tr:hover td {
    background-color: #f4f7fc;
}
.rx-linear-modules .model-table tbody tr:hover td:first-child {
    background-color: #f4f7fc;
}
.rx-linear-modules .model-table tbody tr:last-child td {
    border-bottom: none;
}

.rx-linear-modules .download-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
}
.rx-linear-modules .download-bar .pdf-download-btn {
    background: #d32f2f;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    outline: none;
}
.rx-linear-modules .download-bar .pdf-download-btn:hover {
    background: #b71c1c;
    transform: translateY(-2px);
}

.rx-linear-modules .download-bar .model-dropdown {
    position: relative;
    display: inline-block;
}
.rx-linear-modules .download-bar .model-dropdown-btn {
    background: #d32f2f;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    outline: none;
}
.rx-linear-modules .download-bar .model-dropdown-btn:hover {
    background: #b71c1c;
    transform: translateY(-2px);
}

.rx-linear-modules .download-bar .model-dropdown-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    border: 1px solid #e8e8e8;
    min-width: 210px;
    max-height: 180px;
    overflow-y: auto;
    z-index: 110;
    display: none;
    padding: 4px 0;
    list-style: none;
    margin: 0;
}
.rx-linear-modules .download-bar .model-dropdown-menu.show {
    display: block;
    animation: rx-slideUp 0.2s ease;
}
@keyframes rx-slideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.rx-linear-modules .download-bar .model-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 18px;
    font-size: 14px;
    color: #333;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
    outline: none;
    font-family: inherit;
}
.rx-linear-modules .download-bar .model-dropdown-item:hover {
    background: #eef2ff;
    color: #d32f2f;
}
.rx-linear-modules .download-bar .model-dropdown-item:focus-visible {
    background: #eef2ff;
    color: #d32f2f;
    outline: 2px solid #d32f2f;
    outline-offset: -2px;
    border-radius: 4px;
}
.rx-linear-modules .download-bar .model-dropdown-item i {
    color: #d32f2f;
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.rx-dl-footer-note {
    margin-top: 20px;
    font-size: 13px;
    color: #4a5562;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px dashed #dce1e8;
    padding-top: 16px;
    gap: 6px;
}

.rx-linear-modules .custom-note {
    text-align: center;
    margin-top: 24px;
    color: #666;
    font-size: 14px;
}


/* =======================首页 关于我们章节====================== */
.BusinessOverview{
    padding-bottom:50px;
    background: #fff;
}
.BusinessOverview .company-profile.bg{
    background: linear-gradient(rgb(4 8 19 / 47%), rgb(7 5 16 / 69%)), url(/static/images/HomeAbout-UsBackground.jpg) center top no-repeat scroll rgb(245 247 250);
    font-family: Roboto;
    width:100%;
    margin: 0 auto;
    height:480px;
}
.BusinessOverview .hd{
    padding-bottom:50px;
}
.BusinessOverview .bd{
    display:flex;
    justify-content:space-between;
}
.BusinessOverview .hd h3{
    font-size: 40px;
    color: #fff;
    font-weight: 600;
    letter-spacing: .56px;
    display: block;
	padding-top:50px;
    text-align: center;
    line-height:40px;
}
.BusinessOverview .hd-line{
    width: 122px;
    height: 3px;
    display: block;
    margin: 30px auto 0;
    background-color: #fff;
}
.BusinessOverview .video-wrapper{
    display: inline-block;
    overflow: hidden;
    height: 450px;
}
.BusinessOverview .video-player{
    width: 820px;
    height: 450px;    
}
.BusinessOverview .video-player.full-screen{
    width: 100vw;
    height: 100vh;
}
.BusinessOverview .video-player video{
    background: #000;
    display: block;
    height: 100%;
    width: 100%;    
    object-fit: cover;
}
.BusinessOverview .video-player .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
}
.BusinessOverview .video-player .center-control{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.BusinessOverview .video-player .center-control .center-wrapper{
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
    display:inline-block;
    max-width:120px;
    width: 23%;    
}
.BusinessOverview .video-player .center-control .play-button{
    background-color: transparent;
    border: none;
    outline: 0;
    padding: 0;
    width: 90px;
    height:90px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translateX(-45px) translateY(-45px);
    cursor: pointer;
}
.BusinessOverview .video-player .bvp-icon.play{
    height: 40%;
    left: 30%;
    top: 30%;
    width: 40%;
    z-index: 1;    
}
.BusinessOverview .video-player .bvp-icon{
    position: absolute;
}
.BusinessOverview .video-player .bvp-icon.circle{
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;    
}
.BusinessOverview .video-player:hover .control-bar{
    opacity: 1;    
}
.BusinessOverview .video-player .control-bar{
    background: rgba(0,0,0,.1);
    bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    font-size: 16px;
    height: 40px;
    left: 0;
    line-height: 26px;
    opacity: 0.8;
    padding: 7px 3px;
    position: absolute;
    -webkit-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    white-space: nowrap;
    width: 100%;
    z-index: 2;   
}
.BusinessOverview .video-player .control-bar-item{
    display: inline-block;
    margin: 0;
    vertical-align: top;
}
.BusinessOverview .video-player .control-bar .left-panel,
.BusinessOverview .video-player .control-bar .right-panel{
    width: 26px;
}
.BusinessOverview .video-player .control-bar .center-panel{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: calc(100% - 62px);
    height:100%;
}
.BusinessOverview .video-player .control-bar .play-button{
    display: inline-block;
    margin: 0;
    vertical-align: top;
    height: 26px;
    width: 26px;    
    background-color: transparent;
    border: none;
    outline: 0;
    padding: 0;    
}
.BusinessOverview .video-player .control-bar .play-icon,
.BusinessOverview .video-player .control-bar .pause-icon{
    height: 18px;

    width: 18px;
    cursor: pointer;
    margin-left:5px;
}
.BusinessOverview .video-player .control-bar .progress-wrapper{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 6px;
    width: calc(100% - 90px);
    display: inline-block;
    margin: 0;
    vertical-align: top;  
    height: 100%;    
	margin-left: 3px;
}
.BusinessOverview .video-player .control-bar .progress-wrapper .current-time,
.BusinessOverview .video-player .control-bar .progress-wrapper .total-time{
    width: 40px;    
    margin: 0;
    vertical-align: top;  
    height: 100%;      
}
.BusinessOverview .video-player .control-bar .progress-wrapper .progress-bar{
    margin: 0 3px;
    width: calc(100% - 86px);    
    margin: 0;
    vertical-align: top;  
    height: 100%;   
    display: inline-block;    
}
.BusinessOverview .video-player .control-bar .progress-wrapper .progress-bar .control-progress{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    height: 13px;
    margin-top: 7px;
    padding: 5px 0;
    white-space: nowrap;
    width: 100%;    
}
.BusinessOverview .video-player .control-bar .progress-wrapper .progress-bar .progress-inner{
    background: hsla(0,0%,100%,.4);
    display: inline-block;
    height: 3px;
    position: relative;
    vertical-align: top;
    width: calc(100% - 13px);    
}
.BusinessOverview .video-player .control-bar .progress-wrapper .progress-bar .reached{
    background: #ff5000;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;    
}
.BusinessOverview .video-player .control-bar .progress-wrapper .progress-bar .indicator{
    background: #fff;
    border-radius: 100%;
    display: inline-block;
    height: 12px;
    position: absolute;
    top: -5px;
    width: 12px;
    z-index: 2;
}
.BusinessOverview .video-player .control-bar .volume{
    display: inline-block;
    margin: 0;
    vertical-align: top;
}
.BusinessOverview .video-player .control-bar .volume-button{
    height: 22px;
    vertical-align: top;
    width: 22px;
    display: inline-block;
    margin: 0;
    background-color: transparent;
    border: none;
    outline: 0;
    padding: 0;    
}
.BusinessOverview .video-player .control-bar .bvp-icon.volume,
.BusinessOverview .video-player .control-bar .bvp-icon.volume-off{
    display: inline-block;
    height: 100%;
    vertical-align: top;
    width: 100%;
    position:absolute;
    top:50%;
    left:50%;
    transform: translateX(-13px) translateY(-9px);
    cursor: pointer;
}
.BusinessOverview .video-player .control-bar .bvp-icon.volume{
    display:block;    
}
.BusinessOverview .video-player .control-bar .bvp-icon.volume-off{
    display:none;
}
.BusinessOverview .video-player .control-bar .volume-bar{
    margin-left: 3px;
    width: 50px;   
    display: inline-block;
    margin: 0;
    vertical-align: top;    
}
.BusinessOverview .video-player .control-bar .volume-bar .control-progress{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    height: 13px;
    margin-top: 7px;
    padding: 5px 0;
    white-space: nowrap;
    width: 100%;    
}
.BusinessOverview .video-player .control-bar .volume-bar .progress-inner{
    background: hsla(0,0%,100%,.4);
    display: inline-block;
    height: 3px;
    position: relative;
    vertical-align: top;
    width: calc(100% - 13px);    
}
.BusinessOverview .video-player .control-bar .volume-bar .reached{
    background: #ff5000;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;    
}
.BusinessOverview .video-player .control-bar .volume-bar .indicator{
    background: #fff;
    border-radius: 100%;
    display: inline-block;
    height: 12px;
    position: absolute;
    top: -5px;
    width: 12px;
    z-index: 2;
}
.BusinessOverview .video-player .control-bar .fullscreen-button{
    display: inline-block;
    margin: 0;
    vertical-align: top;

    height: 26px;
    width: 26px;
    background-color: transparent;
    border: none;
    outline: 0;
    padding: 0;
    
    cursor: pointer;
    
}
.BusinessOverview .video-player .control-bar .fullscreen-icon{
    display: inline-block;
    height: 100%;
    vertical-align: top;
    width: 100%;
}
.BusinessOverview .company-profile-box{
    width: 420px;
    display: inline-block;
    padding: 30px 25px 0;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    height: 450px;
    margin-left: -4px;
}
.BusinessOverview .company-profile-box .title{
    font-size: 24px;
    height: 28px;
    line-height: 28px;
    width: 100%;
    margin-bottom: 15px;
    color: #232323;
    display: block;
    word-break: break-word;
    white-space: normal;
    overflow: hidden;
    font-weight: 500;    
}
.BusinessOverview .company-profile-box .content{
    padding-right: 15px;
    overflow: hidden;
    overflow-y: auto;
    max-height: 300px;
    color: #232323;
    word-break: break-word;
    white-space: normal;
    text-decoration: none;
    display: block;
    text-indent: 2px;
    font-size: 15px;
    line-height: 25px;
}
.BusinessOverview .company-profile-box .content H3{
    line-height: 1.5;
    color: #333;
    margin: 0 0 8px 0;
    text-align: justify;
}
.BusinessOverview .company-profile-box .content p {
    line-height: 1.5;
    color: #333;
    margin: 0 0 8px 0;
    text-align: justify;
}
.BusinessOverview .company-profile-box .more{
    height: 28px;
    margin-top: 30px;
    display: inline-block;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.BusinessOverview .company-profile-box .more img{
    max-width: 177px;
    display: inline-block;
    overflow: hidden;    
}
@keyframes swing-horizontally {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}
.BusinessOverview .company-profile-box .more:hover img {
    animation: swing-horizontally 1s infinite;
}

/* 关于我们 可视化数据 */
.VisualOverview{
    padding:20px 0;
    margin-top: 143px;
}
.VisualOverview .overview-outer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.VisualOverview .overview-main {
    width: 1200px;
    height: 120px;
    position: relative;
}
.VisualOverview .overview-wrapper {
    display: flex;
    height: 100%;
}
.VisualOverview .overview-item {
    width: 200px;
    min-width: 200px;
    height: 100%;
    flex-shrink: 0;
    text-align: center;
    padding: 20px;
    margin: 0;
    box-sizing: border-box;
}
.VisualOverview .data-number p{
    width: 100%;
    font-weight: 600;
    letter-spacing: .56px;
    overflow: hidden;
    display: block;
    word-break: break-word;
    white-space: normal;
    transition: all .5s;
    margin: 0;  
}
.VisualOverview .data-number .zm {
    color: #383434;
    opacity: 1;
    visibility: visible;
}
.VisualOverview .data-number .fm {
    color:#444444;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.VisualOverview .data-number:hover .zm {
    visibility: hidden;
    opacity: 0;
}
.VisualOverview .data-number:hover .fm {
    visibility: visible;
    opacity: 1;
}
.VisualOverview .data-number {
    font-size: 36px;
    font-weight: bold;
    color: #0E42B3;
    margin-bottom: 8px;
    user-select: none;
    line-height: 50px;
    height: 50px;    
}
.VisualOverview .data-label {
    font-size: 15px;
    color: #666666;
    line-height: 1.4;
    user-select: none;
    height:44px;
}

/* 工厂实拍 */
.ProductionEnvironment {
    width: 100%;
    overflow: hidden;
}
.ProductionEnvironment .container{
    overflow: hidden;
}
.ProductionEnvironment .image-group-list {
    position: relative;
    padding: 0;
    margin: 0;
    left: 0;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    transition: none;
}
.ProductionEnvironment .image-group-item {
    width:290px;
    height: 230px;
    flex-shrink: 0;
    margin: 0 5px;
    display: flex;
    flex-direction: column;

    gap: 6px;
    padding: 2px;
    transition: all 0.3s ease;
}
.ProductionEnvironment .image-group-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 1;
}
.ProductionEnvironment .image-group-item:hover {
    transform: translateY(-4px);
}
.ProductionEnvironment .image-group-item:hover img {
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 1px 7px 12px rgba(220, 38, 38, 0.2);
    filter: brightness(1.05) contrast(1.05);
}
.ProductionEnvironment .image-group-title {
    text-align: center;
    font-size: 14px;
    color: #333;
    line-height: 24px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
}
.ProductionEnvironment .image-group-item:hover .image-group-title {
    color:#d32f2f;
    font-weight: 600;
}		


/* =======================标准化生产流程====================== */
.process-section {
    background: #f7faff;
    padding-bottom: 50px;
    padding-top: 50px;
}
.process-section .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.process-section .gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:10px;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
    background:#fff;
}
.process-section .gallery-item img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:all 0.5s ease;
}
.process-section .overlay{
    position:absolute;
    padding:20px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.8),
        rgba(0,0,0,0.4),
        transparent
    );
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    opacity:0;
    transform:translateY(40px);
    transition:all 0.4s ease;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.process-section .overlay .step{
    position:absolute;
    top:15px;
    right:20px;
    font-size:30px;
    font-weight:bold;
    opacity:0.15;
}
.process-section .overlay h4{
    font-size:12px;
    letter-spacing:2px;
    opacity:0.7;
}
.process-section .overlay h3{
    font-size:18px;
    margin:5px 0;
}
.process-section .overlay p{
    font-size:13px;
    line-height:1.5;
}
.process-section .gallery-item:hover img{
    transform:scale(1.08);
    filter:brightness(0.7);
}
.process-section .gallery-item:hover .overlay{
    opacity:1;
    transform:translateY(0);
}
/* ====================== 专利证书 ====================== */
.patent-module-wrapper {
	width: 100%;
	border-radius: 24px;
	box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.12);
	padding:50px 0;
}

/* 专利证书轮播核心样式 */
.rx-certificate {
	position: relative;
	width: 100%;
}

.rx-certificate .carousel {
	width: 100%;
	height: 380px;
	overflow: hidden;
	position: relative;
}

.rx-certificate .carousel-track {
	display: flex;
	height: 100%;
	transition: transform 0.5s ease;
}

.rx-certificate .carousel-slide {
	flex: 0 0 100%;
	height: 100%;
}

.rx-certificate .goods-list {
	display: flex;
	justify-content: space-between;
	height: 370px;
	padding: 0 10px;
	gap: 15px;
}

.rx-certificate .goods-item {
	width: 22%;
	height: 370px;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	background: #f9f9f9;
}

/* 悬停放大镜手势 */
.rx-certificate .goods-item img {
	width: 100%;
	height: 100%;
	transition: transform 0.4s ease;
	cursor: zoom-in;
}

.rx-certificate .goods-item:hover {
	transform: translateY(-6px);
}

.rx-certificate .goods-item:hover img {
	transform: scale(1.03);
}

/* 轮播左右箭头 */
.rx-certificate .carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
    background:rgb(23 23 23 / 48%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
	outline: none;
	opacity: 1;
}

.rx-certificate .carousel-arrow svg {
	width: 20px;
	height: 20px;
	fill: #fff;
	pointer-events: none;
}

.rx-certificate .arrow-prev {
	left: -60px;
}

.rx-certificate .arrow-next {
	right: -60px;
}

.rx-certificate:hover .carousel-arrow {
	opacity: 1;
}

.rx-certificate .carousel-arrow:hover {
	background:#D32F2F;
    box-shadow: 0 8px 25px rgba(211, 47, 47, 0.35);
	transform: translateY(-50%) scale(1.08);
}

.rx-section {
	opacity: 1 !important;
	transform: none !important;
}

/********************** 专利专属弹窗样式 **********************/
.rx-patent-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;

	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.rx-patent-modal-content {
	max-width: 90%;
	max-height: 90vh;
	object-fit: contain;
}

/* 精致关闭按钮 */
.rx-patent-modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	color: #fff;
	font-size: 28px;
	font-weight: 300;
	cursor: pointer;
	transition: 0.3s;
	z-index: 10000;
	line-height: 1;
}

.rx-patent-modal-close:hover {
	color: #40A9FF;
}

/* 弹窗翻页按钮：完美居中 */
.rx-patent-modal-prev, .rx-patent-modal-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	cursor: pointer;
	transition: 0.3s;
	user-select: none;
	border-radius: 50%;
}

.rx-patent-modal-prev { left: 20px; }
.rx-patent-modal-next { right: 20px; }

.rx-patent-modal-prev svg, .rx-patent-modal-next svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.rx-patent-modal-prev:hover, .rx-patent-modal-next:hover {
	color: #40A9FF;
	background: rgba(255,255,255,0.1);
}
/* ================== OEM &ODM 服务章节模块 ================== */
.u-section {
    background: url(/static/images/service.webp) center top no-repeat scroll rgb(245 247 250);
    width: 100%;
    margin: 0 auto;
    padding: 60px 0;
    text-align: center;
    color: #ffffff;    
}
.u-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.u-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.u-desc {
    font-size: 16px;
    margin-bottom: 50px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.u-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.u-card {
    background: #ffffff;
    color: #1e1e1e;
    padding: 36px 32px 40px;
    width: 480px;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.03);
    text-align: center;
    display: flex;
    flex-direction: column;
    border: 1px solid #eef2f6;
    transition: all 0.3s ease;
}

.u-card:hover {
    box-shadow: 0 12px 24px rgba(14, 66, 179, 0.15), 0 4px 8px rgba(14, 66, 179, 0.1);
    transform: translateY(-4px);
}

.u-card__title {
    font-size: 24px;
    color: #0E42B3;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 14px;
    position: relative;
}

.u-card__title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #0E42B3;
    margin: 10px auto 0;
    border-radius: 2px;
}

.u-card__text {
    line-height: 1.75;
    font-size: 16px;
    color: #2c3e50;
    margin-bottom: 28px;
    text-align: justify;
    flex: 1 0 auto;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #b9c4d0 #f0f3f7;
}

.u-card__text::-webkit-scrollbar {
    width: 5px;
}
.u-card__text::-webkit-scrollbar-track {
    background: #f0f3f7;
    border-radius: 10px;
}
.u-card__text::-webkit-scrollbar-thumb {
    background: #b9c4d0;
    border-radius: 10px;
}
.u-card__text::-webkit-scrollbar-thumb:hover {
    background: #8f9eae;
}

.u-features, .u-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
    gap: 20px 12px;
    flex-wrap: wrap;
}

.u-feature-item, .u-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.u-feature-icon, .u-step-icon {
    font-size: 40px;
    color: #0E42B3;
}

.u-feature-item span:last-child,
.u-step-item span:last-child {
    font-size: 15px;
    font-weight: 500;
    color: #1f2a36;
    max-width: 110px;
    word-break: break-word;
    text-align: center;
    line-height: 1.4;
}

.u-btn {
    background-color: #0E42B3;
    color: #fff;
    border: none;
    padding: 14px 32px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin-top: auto;
    align-self: center;
    letter-spacing: 0.8px;
    min-width: 150px;
}

.u-btn:hover {
    background-color: #083496;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 66, 179, 0.2);
}

/* ================== 弹窗样式 ================== */
.u-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(3px);
}

.u-modal.show {
    opacity: 1;
    visibility: visible;
}

.u-modal__content {
    width: 90%;
    max-width: 500px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.u-modal.show .u-modal__content {
    transform: translateY(0);
}

.u-modal__header {
    padding: 18px 24px;
    background: #f0f2f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.u-modal__header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.u-modal__header h3 i {
    color: #0E42B3;
}

.u-modal__close {
    background: none;
    border: none;
    color: #4b5563;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.u-modal__close:hover {
    color: #1f2937;
}

.u-modal__body {
    overflow-y: auto;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: #b9c4d0 #f1f3f5;
}

.u-modal__body::-webkit-scrollbar {
    width: 5px;
}
.u-modal__body::-webkit-scrollbar-track {
    background: #f1f3f5;
}
.u-modal__body::-webkit-scrollbar-thumb {
    background: #b9c4d0;
    border-radius: 10px;
}

.u-form {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;         
}

.u-form__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.u-form__item label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    text-align: left;
}

.u-form__item input,
.u-form__item textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: border 0.3s, box-shadow 0.3s;
    background: #fff;
}

.u-form__item input:focus,
.u-form__item textarea:focus {
    border-color: #0E42B3;
    box-shadow: 0 0 0 2px rgba(14, 66, 179, 0.15);
}

.u-form__item textarea {
    height: 140px;           
    resize: none;      
    overflow-y: auto;      
}

.u-response-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f0f4ff;
    border-radius: 40px;
    padding: 10px 16px;
    border: 1px dashed #0E42B3;
    color: #0E42B3;
    font-weight: 500;
    font-size: 15px;
    margin-top: 8px;
}

.u-response-badge i {
    color: #0E42B3;
}

.u-form button[type="button"] {
    width: 100%;
    padding: 14px;
    background: #0E42B3;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.u-form button[type="submit"]:hover {
    background: #083496;
}

/* =======================常见模组搭建类型====================== */
.dj {
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
    background: #f0f3f8;
    background-image:
        radial-gradient(ellipse at 15% 20%, rgba(8, 52, 150, 0.03) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 70%, rgba(77, 163, 255, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(8, 52, 150, 0.02) 0%, transparent 70%);
    padding:50px 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.dj__showcase {
    position: relative;
    height: 420px;
    border-radius: 24px;
    overflow: hidden;
    background: 
        repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255,255,255,0.015) 60px, rgba(255,255,255,0.015) 61px),
        repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255,255,255,0.015) 60px, rgba(255,255,255,0.015) 61px),
        linear-gradient(145deg, #1a1c1f 0%, #25282d 25%, #2f3238 50%, #26292f 75%, #17191c 100%);
    box-shadow: 
        0px 3px 20px rgba(80, 80, 80, 0.3),
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 0 120px rgba(120, 120, 120, 0.1);
    transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.dj__showcase:hover {
    box-shadow: 
        0px 6px 24px rgba(80, 80, 80, 0.4),
        0 0 0 1px rgba(255,255,255,0.12) inset,
        0 0 180px rgba(120, 120, 120, 0.15);
}
.dj__showcase::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 120px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}
.dj__showcase::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 30%;
    width: 350px;
    height: 80px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}
.dj__showcase-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    will-change: transform;
}

.dj__showcase-item {
    flex: 0 0 100%;
    display: flex;
    position: relative;
}
.dj__showcase-img {
    width: 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background:
        radial-gradient(ellipse at 40% 45%, rgba(255,255,255,0.04) 0%, transparent 65%),
        radial-gradient(ellipse at 60% 55%, rgba(255,255,255,0.03) 0%, transparent 60%),
        linear-gradient(160deg, #1a1c1f 0%, #23262b 40%, #2c2f35 100%);
    overflow: hidden;
}

.dj__showcase-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px),
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px);
    pointer-events: none;
    z-index: 0;
}

/* 图片区中央发光：白色呼吸灯 */
.dj__showcase-img::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    animation: dj-pulse-glow 4s ease-in-out infinite;
}

.dj__showcase-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.3));
}

.dj__showcase-img img:hover {
    transform: scale(1.06);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
}

/* ========== 右侧内容区 ========== */
.dj__showcase-content {
    width: 48%;
    padding: 32px 64px 32px 36px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.4s ease;
}

.dj__showcase-content:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* 标签：白色半透明，圆点白色 */
.dj__showcase-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 22px;
    margin-bottom: 16px;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 500;
    color: #ddd;
    width: fit-content;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.dj__showcase-tag::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,0.6);
    animation: dj-dot-pulse 2s ease-in-out infinite;
}

/* 标题及下划线：白色渐变 */
.dj__showcase-content-title {
    font-size: 27px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    color: #ffffff;
    position: relative;
}

.dj__showcase-content-title::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffffff, rgba(255,255,255,0.2));
    margin-top: 10px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dj__showcase-content:hover .dj__showcase-content-title::after {
    width: 56px;
}

/* 列表 */
.dj__showcase-list {
    list-style: none;
    margin-bottom: 20px;
    color: #ccc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dj__showcase-list li {
    font-size: 13.5px;
    line-height: 1.7;
    padding-left: 20px;
    position: relative;
    transition: transform 0.2s, color 0.2s;
}

.dj__showcase-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255,255,255,0.35);
    transform: rotate(45deg);
    transition: all 0.2s;
}

.dj__showcase-list li:hover {
    color: #fff;
    transform: translateX(3px);
}

.dj__showcase-list li:hover::before {
    background: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
    transform: rotate(45deg) scale(1.2);
}

.dj__showcase-list li strong {
    color: #f0f0f0;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ========== 按钮：白色边框 + 悬停微光 ========== */
.dj-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 11px 28px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    width: fit-content;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    outline: none;
    border: none;
}

.dj-btn--outline {
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    background: transparent;
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
}

.dj-btn--outline::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #3a3d42 0%, #4a4e54 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    border-radius: 30px;
}

.dj-btn--outline:hover {
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255,255,255,0.15), 0 8px 25px rgba(0,0,0,0.4);
    transform: translateY(-2px);
    gap: 12px;
    background: rgba(255,255,255,0.08);
}

.dj-btn--outline:hover::before {
    opacity: 0.15;  /* 轻微灰底，避免太抢眼 */
}

.dj-btn span,
.dj-btn {
    position: relative;
    z-index: 1;
}

.dj-btn__arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 16px;
    line-height: 1;
}

.dj-btn:hover .dj-btn__arrow {
    transform: translateX(4px);
}

/* ========== 左右箭头 ========== */
.dj__slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    outline: none;
}

.dj__slider-nav:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    transform: translateY(-50%) scale(1.08);
}

.dj__slider-nav:active {
    transform: translateY(-50%) scale(0.94);
    transition: transform 0.1s ease;
}

.dj__slider-nav--prev {
    left: 16px;
}

.dj__slider-nav--next {
    right: 16px;
}

.dj__slider-nav svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    transition: transform 0.2s;
}

.dj__slider-nav--prev:hover svg {
    transform: translateX(-3px);
}

.dj__slider-nav--next:hover svg {
    transform: translateX(3px);
}

/* ========== 指示点 ========== */
.dj__slider-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.dj__slider-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    outline: none;
}

.dj__slider-dot:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.3);
}

.dj__slider-dot.active {
    background: #ffffff;
    width: 28px;
    border-radius: 10px;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.5), 0 0 28px rgba(255, 255, 255, 0.15);
    cursor: default;
}
.dj__modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(3px);
}
.dj__modal.show {
    opacity: 1;
    visibility: visible;
}
.dj__modal-content {
    width: 90%;
    max-width: 500px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.dj__modal.show .dj__modal-content {
    transform: translateY(0);
}
.dj__modal-header {
    padding: 18px 24px;
    background: #f0f2f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}
.dj__modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dj__modal-title i {
    color: #0E42B3;
}
.dj__modal-close {
    background: none;
    border: none;
    color: #4b5563;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    outline: none;
}
.dj__modal-close:hover {
    color: #1f2937;
}
.dj__modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: #b9c4d0 #f1f3f5;
}
.dj__modal-body::-webkit-scrollbar {
    width: 5px;
}
.dj__modal-body::-webkit-scrollbar-track {
    background: #f1f3f5;
}
.dj__modal-body::-webkit-scrollbar-thumb {
    background: #b9c4d0;
    border-radius: 10px;
}
.dj__form {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}
.dj__form-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dj__form-label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    text-align: left;
}
.dj__form-input,
.dj__form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: border 0.3s, box-shadow 0.3s;
    background: #fff;
}
.dj__form-input:focus,
.dj__form-textarea:focus {
    border-color: #0E42B3;
    box-shadow: 0 0 0 2px rgba(14, 66, 179, 0.15);
}
.dj__form-textarea {
    height: 140px;
    resize: none;
    overflow-y: auto;
}
.dj__form-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f0f4ff;
    border-radius: 40px;
    padding: 10px 16px;
    border: 1px dashed #0E42B3;
    color: #0E42B3;
    font-weight: 500;
    font-size: 15px;
    margin-top: 8px;
}
.dj__form-badge i {
    color: #0E42B3;
}
.dj__form-submit {
    width: 100%;
    padding: 14px;
    background: #0E42B3;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    outline: none;
}
.dj__form-submit:hover {
    background: #083496;
}
@keyframes dj-shimmer-line {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes dj-pulse-glow {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes dj-dot-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.3); }
}
/* ========== Logo墙========== */
.dj .logo-wall {
    margin-top: 50px;
}
.dj .logo-wall h3 {
    text-align: center;
    font-size: 24px;
    color: #1e293b;
    margin-bottom: 28px;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
}
.dj .logo-wall h3::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #4da3ff, rgba(77, 163, 255, 0.3));
    margin: 10px auto 0;
}
.dj .logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.dj .logo-item {
    width: calc((100% - 80px) / 6);
    min-width: 140px;
    aspect-ratio: 191 / 139;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    margin-right: 16px;
    margin-bottom: 16px;
    padding: 14px;
    box-sizing: border-box;
}
.dj .logo-item:nth-child(6n) {
    margin-right: 0;
}
.dj .logo-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;          /* 重点：显示完整 logo，不裁切 */
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(0%);
}
.dj .logo-item:hover {
    background: #fff;
    border-color: rgba(77, 163, 255, 0.25);
    box-shadow: 0 6px 20px rgba(8, 52, 150, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
    transform: translateY(-3px);
}
.dj .logo-item:hover img {
    transform: scale(1.04);
}

/* ====================== 技术文章 ====================== */
.dk-articles { padding:50px 0; background:#f8f9fa; }
.dk-articles .articles-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.dk-articles .article-card {
    background: #fff; border-radius: 12px; overflow: hidden;
        box-shadow: 0 5px 9px rgba(0,0,0,0.05); border: 1px solid #eee;
    transition: 0.3s;
}
.dk-articles .article-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgb(255 64 64 / 10%);
    border-color: #d32f2f;
}
.dk-articles .article-img {
    height: 180px; background:#eaecef; display: flex;
    align-items: center; justify-content: center;
    font-size: 40px; color: #40a9ff;
}
.dk-articles .article-img img {
    width:auto;
    height: 100%;
}
.dk-articles .article-body { padding: 24px; }
.dk-articles .article-title {
    font-size: 18px; font-weight: 700; color: #222; margin-bottom: 10px;
    line-height: 1.5;
}
.dk-articles .article-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.dk-articles .article-title a:hover {
    color:#d32f2f;
}
.dk-articles .article-desc {
    font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dk-articles .article-more {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; color:var(--primary); font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.dk-articles .article-more i { transition: 0.2s; }
.dk-articles .article-more:hover i { transform: translateX(4px); }

/* =======================直线模组栏目====================== */
.page-title-section {
    padding: 36px 0;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    min-height: 200px;
    display: flex;
    align-items: center;
    position: relative;
    background: #f7f5f4;
}

.page-title-section .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-title-section h1 {
    font-size: 28px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
    position: relative;
    display: inline-block;
}

.page-title-section h1::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: #d32f2f;
    border-radius: 1px;
}

.page-title-section p {
    font-size: 15px;
    color: #6b7280;
    margin-top: 12px;
    line-height: 1.5;
    width: 80%;
    margin: 15px auto 0;
}
.page-title-section .sub-prefix {
    font-size: 13px;
    color: #9ca3af; /* 比描述文字更浅的灰色 */
    letter-spacing: 2px; /* 字间距拉开显得精致 */
    text-transform: uppercase;
    margin-bottom: 4px;
}


.product-chapter{
    padding:30px 0;
}
.product-chapter .card-content {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 60px;
    justify-content: flex-start;    
}
.product-chapter .model-series-card {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: 0.2s;
    border: 1px solid #e9edf2;
    display:block;
    max-width:calc((100% - 2 * 36px) / 3);
    margin-bottom:18px;
}

/* 添加到CSS中 */
.model-series-card {
    /* 初始隐藏按钮区域 */
    --btn-loading: 1;
}

.model-series-card.loaded {
    --btn-loading: 0;
}

.model-switch {
    opacity: calc(1 - var(--btn-loading));
    transition: opacity 0.2s ease;
}

.product-chapter .model-series-card.hidden{
    display:none;
}
.product-chapter .model-series-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -12px rgba(0,0,0,0.1);
}
/*RX卡片*/
.product-chapter .ms-header {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid #d0d0d0;
    background: linear-gradient(135deg, #f7f4f4, #fdfcfc);
    display:block;
}
.product-chapter .ms-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333333;
}
.product-chapter .ms-header h3 {
    font-size: 0.85rem;
    color: #666666;
    margin-top: 4px;
    font-weight:500;
}
.product-chapter .ms-body {
    padding: 20px;
}
.product-chapter .model-switch {
    background: #f8f8f8;
    border-radius: 40px;
    padding: 4px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    height: 40px;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}
.product-chapter .model-switch .swiper-wrapper {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease-out;
}
.product-chapter .model-switch .swiper-slide {
    height: auto;
    padding: 0 2px;
    width: auto !important;
    flex-shrink: 0;
}
.product-chapter .model-btn {
    background: transparent;
    border: none;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #666666;
    cursor: pointer;
    transition: 0.2s;
    white-space: nowrap;
    width: 80px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-chapter .model-btn.active {
    background:#d32f2f;
    color: white;
    box-shadow: 0 2px 6px rgba(223, 58, 58, 0.2);
}
.product-chapter .model-btn:hover:not(.active) {
    background: #f0f0f0;
}
.product-chapter .ms-img {
    text-align: center;
    margin-bottom: 16px;
    position: relative;
}
.product-chapter .ms-img .swiper-wrapper {
    align-items: center;
}
.product-chapter .ms-img .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product-chapter .ms-img img {
    width: 320px;
    height: 190px;
    object-fit: contain;
    border-radius: 12px;
    background: #fefefe;
    border: 1px solid #e8e8e8;
}
.product-chapter .img-caption {
    font-size: 12px;
    color: #777777;
    margin-top: 6px;
    margin-bottom: 8px;
}
/* 优化后的参数区域样式 - 直接替换原有代码 */
.product-chapter .img-params {
    display: flex;
    flex-direction: column;
    width: 320px;
    gap: 8px;
    margin-top: 12px;
    border-radius: 12px;
}
.product-chapter .img-param-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #495057;
    padding: 6px 8px;
    background: #ffffff;
    border-radius: 8px;
    transition: all 0.2s ease;
    line-height: 1.4;
}
.product-chapter .img-param-item:hover {
    background: #f1f3f5;
    transform: translateX(2px);
}
.product-chapter .img-param-item i {
    font-size: 0.9rem;
    color:#d32f2f;
    min-width: 16px;
    text-align: center;
}
.product-chapter .img-param-label {
    color: #6c757d;
    flex-shrink: 0;
}
.product-chapter .img-param-value {
    font-weight: 600;
    color: #212529;
    margin-left: auto;
    text-align: right;
    word-break: break-word;
    white-space: nowrap;        /* 强制不换行 */
    overflow: hidden;           /* 溢出隐藏 */
    text-overflow: ellipsis;    /* 省略号 */
    padding-left:20px;
}
.product-chapter .ms-img-prev, 
.product-chapter .ms-img-next {
    position: absolute;
    top: 96px;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #666666;
    border: 1px solid #e8e8e8;
}
.product-chapter .ms-img-prev {
    left: 10px;
}
.product-chapter .ms-img-next {
    right: 10px;
}
.product-chapter .ms-img-prev::after, .ms-img-next::after {
    font-size: 12px !important;
    font-weight: bold;
}
.product-chapter .model-list {
    margin: 16px 0 8px 0;
    border-top: 1px solid #e8e8e8;
    padding-top: 12px;
}
.product-chapter .model-list-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666666;
    margin-bottom: 12px;
}
.product-chapter .model-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    height:64px;
    overflow: hidden;
}
.product-chapter .model-tag {
    width: calc((100% - 4 * 8px) / 4);
    text-align: center;
    padding: 4px 8px;
    background: #f0f0f0;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #666666;
    text-decoration: none;
    transition: 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    cursor: pointer;
    margin-bottom: 6px;
    height: 26px;
}
.product-chapter .model-tag:hover {
    background: #e0e0e0;
    text-decoration: underline;
}
.product-chapter .icons {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    margin-top: 12px;
}
.product-chapter .icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background:#444444;
    padding:10px 14px;
    border-radius: 40px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #666666;
    text-decoration: none;
    transition: 0.2s;
}
.product-chapter .icon i {
    font-size: 0.9rem;
}
.product-chapter .icon:hover {
    background:#d32f2f;
    color: #555555;
}
.product-chapter .model-btn {
    width: 72px;
    padding: 6px 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-chapter .ms-img-prev,
.product-chapter .ms-img-next {
    outline: none;                     
    user-select: none;                 
    -webkit-tap-highlight-color: transparent;
}
.product-chapter .ms-img .swiper-slide {
    user-select: none;
}
.product-chapter .ms-img img {
    -webkit-user-drag: none;          
    user-select: none;
}
.product-chapter .ms-img {
  cursor: grab;
}
.product-chapter .ms-img:active {
  cursor: grabbing;
}	
.product-chapter .icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #444444;
	padding:10px 14px;
	border-radius: 40px;
	font-size: 0.75rem;
	font-weight: 500;
	color: #ffffff;
	text-decoration: none;
	transition: 0.2s;
	border: none;
	cursor: pointer;
	width: 100%;
}	
.product-chapter .icon:hover{
	background: #d32f2f;
	color: #ffffff;
}





.sidebar-shared-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Inter", system-ui, "Microsoft YaHei", sans-serif;
    color: #333;
    line-height: 1.8;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}
/* ── 资料下载中心 样式文件 ── */
html { scroll-behavior: smooth; }
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1e1e2a; background: #fafbfc; line-height: 1.6; font-size: 14px;
 }
a { text-decoration: none; color: inherit; }
ul,li { list-style: none; }
button { cursor: pointer; border: none; outline: none; background: none; font-family: inherit; font-size: inherit; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
 
.sidebar-shared-wrapper a {
    color: #d32f2f;
    text-decoration: none;
    transition: all 0.3s;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
 
.sidebar-shared-wrapper a:hover {
    color: #d32f2f;
}
/* ── Filter Bar ── */
.dl_filter-bar{background:#fafbfc;border-bottom:1px solid #e9edf2;position:sticky;top:0;z-index:90;transition:box-shadow .3s ease;}
.dl_filter-bar--sticky{box-shadow:0 4px 20px rgba(0,0,0,.08);}
.dl_filter-bar__inner{display:flex;align-items:center;gap:16px;padding:20px 0;flex-wrap:wrap;justify-content:space-between;}
.dl_filter-bar__left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.dl_filter-bar__right{display:flex;align-items:center;gap:12px;}
.dl_filter-bar__search{position:relative;width:260px;}
.dl_filter-bar__search-input{width:100%;padding:10px 38px 10px 14px;border:1px solid #e0e0e0;border-radius:6px;font-size:13px;outline:none;transition:all .2s;background:#f9fafb;}
.dl_filter-bar__search-input:focus{border-color:#D32F2F;background:#fff;box-shadow:0 0 0 2px rgba(211,47,47,.08);}
.dl_filter-bar__search-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#aaa;transition:color .2s;}
.dl_filter-bar__search-btn:hover{color:#D32F2F;}
.dl_filter-bar__select{padding:10px 32px 10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:13px;outline:none;appearance:none;background:#f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;cursor:pointer;transition:all .2s;}
.dl_filter-bar__select:focus{border-color:#D32F2F;}
.dl_filter-bar__count{font-size:13px;color:#999;white-space:nowrap;}
.dl_view-toggle{display:flex;border:1px solid #e0e0e0;border-radius:6px;overflow:hidden;}
.dl_view-toggle__btn{padding:8px 16px;font-size:13px;color:#999;transition:all .2s;}
.dl_view-toggle__btn.dl_is-active,.dl_view-toggle__btn:hover{background:#D32F2F;color:#fff;}
.dl_filter-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border-radius:6px;font-size:13px;font-weight:500;transition:all .2s;white-space:nowrap;}
.dl_filter-btn--pdf{background:#3a3a3a;color:#fff;}
.dl_filter-btn--pdf:hover{background:#D32F2F;box-shadow:0 2px 8px rgba(211,47,47,.3);}
.dl_filter-btn--consult{background:#fff;color:#5e6f7e;border:1px solid #e5e7eb;}
.dl_filter-btn--consult:hover{background:#fce4e4;border-color:#D32F2F;color:#D32F2F;}
.dl_page-indicator{display:inline-flex;align-items:center;gap:2px;font-size:13px;color:#5e6f7e;font-weight:500;margin-left:auto;}
.dl_page-indicator button{width:26px;height:26px;border-radius:6px;border:1px solid transparent;background:transparent;color:#999;display:inline-flex;align-items:center;justify-content:center;transition:all .2s;cursor:pointer;font-size:12px;}
.dl_page-indicator button svg{width:14px;height:14px;stroke:currentColor;}
.dl_page-indicator button:hover{background:#D32F2F;color:#fff;border-color:#D32F2F;}
.dl_page-indicator button:hover svg{stroke:#fff;}
.dl_page-indicator button:disabled{opacity:.3;pointer-events:none;}
.dl_page-indicator .dl_page-num{font-weight:600;color:#1e1e2a;min-width:38px;text-align:center;font-size:13px;user-select:none;}
 
.sidebar-shared-wrapper img {
    max-width: 100%;
    height: auto;
    border: 0;
    display: block;
}
/* ── Category Tabs ── */
.dl_category-tabs{display:flex;gap:0;padding:20px 0 0px;flex-wrap:wrap;border-bottom:2px solid #eee;margin-bottom:24px}
.dl_category-tab{padding:10px 24px 20px;font-size:14px;color:#5e6f7e;transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-2px;background:none;font-weight:500;}
.dl_category-tab:hover{color:#D32F2F;}
.dl_category-tab.dl_active{color:#D32F2F;border-bottom-color:#D32F2F;font-weight:700;}
 
.sidebar-shared-wrapper .main-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    width: 1280px;
    margin: 0 auto 40px;
    padding: 0 20px;
    flex: 1;
}
/* ── PDF Section ── */
.dl_pdf-manual-section{margin-bottom:36px;}
#dl_modelSection{scroll-margin-top:100px;}
.dl_pdf-manual-section__header{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.dl_pdf-manual-section__header i{font-size:24px;color:#D32F2F;}
.dl_pdf-manual-section__header h2{font-size:20px;font-weight:700;}
.dl_pdf-manual-section__header span{font-size:14px;color:#999;background:#f8f9fa;padding:2px 12px;border-radius:12px;}
.dl_pdf-manual-section__body .tab-panel{display:none;}
.dl_pdf-manual-section__body .tab-panel.show{display:block;}
.dl_pdf-manual-row{display:grid;grid-template-columns:1.5fr 2fr 180px;gap:20px;align-items:center;background:#fff;padding:22px 28px;border-radius:20px;margin-bottom:12px;border:1px solid #e9edf2;transition:all 0.28s ease;box-shadow:0 8px 20px rgba(0,0,0,.05);}
.dl_pdf-manual-row:hover{box-shadow:0 20px 30px -12px rgba(0,0,0,.1);transform:translateY(-2px);border-color:#d0d0d0;}
.dl_pdf-manual-row.dl_is-single{grid-template-columns:1.5fr 180px;}
.dl_pdf-manual-row__info{display:flex;align-items:center;gap:16px;}
.dl_pdf-manual-row__icon{width:52px;height:52px;border-radius:14px;background:#fce4e4;display:flex;align-items:center;justify-content:center;font-size:24px;color:#D32F2F;flex-shrink:0;}
.dl_pdf-manual-row__name{font-size:16px;font-weight:700;color:#1a1a1a;}
.dl_pdf-manual-row__desc{font-size:13px;color:#999;margin-top:4px;}
.dl_pdf-manual-row__params{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 20px;}
.dl_pdf-manual-row__param-label{font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.5px;}
.dl_pdf-manual-row__param-value{font-size:14px;font-weight:600;color:#1a1a1a;}
.dl_pdf-manual-row__actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;}
 
.sidebar-shared-wrapper .sidebar {
    position: sticky;
    top: 20px;
    align-self: start;
}
/* ── Buttons ── */
.dl_btn-download{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;background:#D32F2F;color:#fff;border-radius:8px;font-size:13px;font-weight:600;transition:all .25s;white-space:nowrap;}
.dl_btn-download:hover{background:#B71C1C;box-shadow:0 4px 14px rgba(211,47,47,.35);transform:translateY(-1px);}
.dl_btn-download:active{transform:translateY(0);}
.dl_btn-preview{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-weight:500;color:#5e6f7e;transition:all .25s;white-space:nowrap;background:#fff;}
.dl_btn-preview:hover{border-color:#D32F2F;color:#D32F2F;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.dl_btn-detail{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border:1px solid #e5e7eb;border-radius:7px;font-size:12px;color:#5e6f7e;transition:all .25s;white-space:nowrap;background:#fff;}
.dl_btn-detail:hover{border-color:#D32F2F;color:#D32F2F;box-shadow:0 2px 6px rgba(0,0,0,.04);}
 
.sidebar-shared-wrapper .sidebar-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    transition: box-shadow 0.2s, cursor 0.2s, background-color 0.2s;
}
/* ── 卡片网格 ── */
.dl_file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
 
.sidebar-shared-wrapper .sidebar-title {
    font-size: 16px;
    font-weight: 600;
    color: #2C3E50;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* ── 模型卡片 ── */
.dl_model-series-card{background:#fff;border-radius:20px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;border:1px solid #e9edf2;display:flex;flex-direction:column;cursor:grab;}
.dl_model-series-card:hover{transform:translateY(-4px);box-shadow:0 20px 30px -12px rgba(0,0,0,.1);}
.dl_model-series-card:active{cursor:grabbing;}
.dl_ms-header{padding:20px 16px;text-align:center;border-bottom:1px solid #d0d0d0;background:linear-gradient(135deg,#f7f4f4,#fdfcfc);}
.dl_ms-header h2{font-size:1.4rem;font-weight:700;color:#333;margin:0;}
.dl_ms-body{padding:16px 20px 20px;flex:1;display:flex;flex-direction:column;}
.dl_ms-img{text-align:center;margin-bottom:12px;position:relative;overflow:hidden;user-select:none;}
.dl_card-slides{display:flex;transition:transform .35s ease;will-change:transform;}
.dl_card-slides .swiper-slide{flex:0 0 100%;min-width:100%;display:flex;flex-direction:column;align-items:center;user-select:none;}
.dl_ms-img img{width:100%;height:auto;max-height:220px;object-fit:contain;border-radius:12px;background:#f8f9fa;border:1px solid #e8e8e8;-webkit-user-drag:none;pointer-events:none;}
.dl_img-caption{font-size:12px;color:#777;margin-top:6px;margin-bottom:6px;user-select:none;}
.dl_img-params{display:flex;flex-direction:column;width:90%;gap:6px;margin-top:8px;border-radius:12px;}
.dl_img-param-item{width:100%;display:flex;align-items:center;gap:10px;font-size:13px;color:#495057;padding:6px 10px;background:#fff;border-radius:8px;transition:all .2s ease;line-height:1.5;box-sizing:border-box;}
.dl_img-param-item:hover{background:#f1f3f5;transform:translateX(2px);}
.dl_img-param-item i{font-size:.85rem;color:#d32f2f;min-width:16px;text-align:center;flex-shrink:0;}
.dl_img-param-label{color:#6c757d;flex-shrink:0;white-space:nowrap;font-size:12px;}
.dl_img-param-value{font-weight:600;color:#212529;margin-left:auto;text-align:right;word-break:break-word;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:16px;flex-shrink:0;font-size:13px;}
.dl_ms-img-prev,.dl_ms-img-next{position:absolute;top:90px;width:30px;height:30px;background:rgba(255,255,255,.9);border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;color:#555;border:1px solid #e0e0e0;outline:none;transition:background .2s,color .2s,box-shadow .2s;}
.dl_ms-img-prev:hover,.dl_ms-img-next:hover{background:#fff;color:#d32f2f;}
.dl_ms-img-prev{left:8px;}.dl_ms-img-next{right:8px;}
.dl_ms-img-prev::after,.dl_ms-img-next::after{font-size:11px !important;font-weight:bold;font-family:'swiper-icons';}
.dl_card-icons{display:flex;gap:10px;justify-content:space-between;margin-top:auto;padding-top:12px;}
.dl_card-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border-radius:50px;font-size:.75rem;font-weight:500;text-decoration:none;transition:all .2s;border:none;cursor:pointer;flex:1;outline:none;white-space:nowrap;}
.dl_card-btn i{font-size:.85rem;}
.dl_card-btn--download{background:#555;color:#fff;}
.dl_card-btn--download:hover{background:#D32F2F;color:#fff;transform:translateY(-2px);box-shadow:0 4px 14px rgba(211,47,47,.25);}
.dl_card-btn--detail{background:#fff;color:#5e6f7e;border:1px solid #e5e7eb;border-radius:50px;}
.dl_card-btn--detail:hover{background:#D32F2F;color:#fff;border-color:#D32F2F;transform:translateY(-2px);box-shadow:0 4px 14px rgba(211,47,47,.2);}
 
.sidebar-shared-wrapper .category-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* ── List View ── */
.dl_file-list__header{display:grid;grid-template-columns:48px 160px 1fr auto;gap:12px;padding:14px 20px;font-size:14px;color:#999;font-weight:600;letter-spacing:.5px;background:#f8f9fa;border-radius:8px;margin-bottom:4px;}
.dl_file-item{display:grid;grid-template-columns:48px 160px 1fr auto;gap:12px;align-items:center;padding:14px 20px;border-bottom:1px solid #f0f0f0;transition:all .2s;background:#fff;}
.dl_file-item:first-of-type{border-radius:8px 8px 0 0;}
.dl_file-item:last-of-type{border-radius:0 0 8px 8px;border-bottom:none;}
.dl_file-item:hover{background:#f8f9fa;}
.dl_file-item__thumb{width:42px;height:42px;border-radius:6px;object-fit:contain;background:#f8f9fa;border:1px solid #eee;cursor:pointer;transition:border-color .2s;}
.dl_file-item__thumb:hover{border-color:#D32F2F;}
.dl_file-item__name{font-weight:600;font-size:14px;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:24px;}
.dl_file-item__specs-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-right:24px;}
.dl_spec-tag{font-size:12px;color:#5e6f7e;background:#f0f2f5;padding:3px 10px;border-radius:6px;white-space:nowrap;}
.dl_file-item__actions{display:flex;gap:6px;justify-content:flex-start;}
.dl_file-item__actions .dl_btn-download{padding:5px 12px;font-size:12px;gap:4px;background:#3a3a3a;color:#fff;border:none;border-radius:6px;}
.dl_file-item__actions .dl_btn-download:hover{background:#D32F2F;}
.dl_file-item__actions .dl_btn-detail{padding:5px 12px;font-size:12px;gap:4px;}
#dl_fileListContainer{min-height:320px;}
 
.sidebar-shared-wrapper .category-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
}
/* ── Pagination ── */
.dl_pagination{display:flex;gap:6px;justify-content:center;padding:55px 0 48px;}
.dl_pagination button{width:38px;height:38px;border-radius:12px;border:1px solid #e9edf2;font-size:13px;font-weight:500;color:#5e6f7e;transition:all .2s;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.03);}
.dl_pagination button:hover{border-color:#D32F2F;color:#D32F2F;box-shadow:0 8px 20px rgba(0,0,0,.1);}
.dl_pagination button.dl_active{background:#D32F2F;color:#fff;border-color:#D32F2F;box-shadow:0 2px 10px rgba(211,47,47,.3);}
.dl_pagination button:disabled{opacity:0.35;pointer-events:none;}
 
.sidebar-shared-wrapper .category-list a:hover {
    background: #0066CC;
    color: #fff;
    border-color: #0066CC;
    transform: translateX(4px);
    text-decoration: none;
}
/* ── Modal ── */
.dl_modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:24px;animation:fadeIn .2s ease;}
.dl_modal-overlay.dl_active{display:flex;}
.dl_modal-container{background:#fff;border-radius:20px;max-width:1240px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.25);position:relative;animation:slideUp .25s ease;}
.dl_modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#aaa;z-index:10;transition:all .25s;background:#fff;border:1px solid #e0e0e0;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.dl_modal-close:hover{background:#D32F2F;color:#fff;border-color:#D32F2F;}
.dl_modal-layout{display:flex;}
.dl_modal-image{flex:0 0 44%;border-radius:14px 0 0 14px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;min-height:420px;background:#f8f9fa;}
.dl_modal-swiper{width:100%;height:100%;}
.dl_modal-swiper .swiper-slide{display:flex;align-items:center;justify-content:center;cursor:grab;}
.dl_modal-swiper .swiper-slide:active{cursor:grabbing;}
.dl_modal-product-img{width:100%;min-height:380px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:background .4s;padding:20px 20px 40px;background:#fff;}
.dl_modal-product-img img{max-width:90%;max-height:90%;object-fit:contain;border-radius:8px;}
.dl_modal-product-img .dl_img-label{font-size:13px;font-weight:600;color:#555;margin-top:6px;}
.dl_modal-swiper .swiper-pagination{bottom:10px;font-size:13px;font-weight:600;color:#5e6f7e;}
.dl_modal-swiper .swiper-button-prev,.dl_modal-swiper .swiper-button-next{width:36px;height:36px;background:rgba(255,255,255,.92);border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.1);color:#1e1e2a;top:50%;transform:translateY(-50%);}
.dl_modal-swiper .swiper-button-prev:hover,.dl_modal-swiper .swiper-button-next:hover{background:#fff;color:#D32F2F;box-shadow:0 4px 16px rgba(0,0,0,.15);}
.dl_modal-swiper .swiper-button-prev{left:8px;}.dl_modal-swiper .swiper-button-next{right:8px;}
.dl_modal-swiper .swiper-button-prev:after,.dl_modal-swiper .swiper-button-next:after{font-size:16px;font-weight:bold;}
 
.sidebar-shared-wrapper .category-list .count {
    background: #e0e0e0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}
.dl_modal-info{flex:1;padding:36px 40px 32px;display:flex;flex-direction:column;overflow-y:auto;}
.dl_modal-title{font-size:20px;font-weight:700;margin-bottom:4px;color:#1a1a1a;}
.dl_modal-subtitle{font-size:14px;color:#999;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #f0f0f0;}
.dl_modal-motor-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap;}
.dl_modal-motor-tab{padding:7px 18px;border-radius:6px;font-size:13px;font-weight:500;background:#fff;color:#5e6f7e;border:1px solid #e5e7eb;transition:all .2s;cursor:pointer;}
.dl_modal-motor-tab.dl_active{background:#D32F2F;color:#fff;border-color:#D32F2F;}
.dl_modal-motor-tab:hover:not(.dl_active){border-color:#D32F2F;color:#D32F2F;background:#fce4e4;}
.dl_modal-params{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 20px;margin-bottom:8px;}
.dl_modal-param-label{font-size:12px;color:#999;margin-bottom:3px;}
.dl_modal-param-value{font-size:15px;font-weight:600;color:#1a1a1a;padding-bottom:8px;border-bottom:1px solid #f5f5f5;}
 
.sidebar-shared-wrapper .category-list a:hover .count {
    background: #fff;
    color: #0066CC;
}
.dl_modal-desc{margin-top:auto;border-top:1px solid #eee;padding-top:16px;display:flex;flex-direction:column;gap:10px;}
.dl_modal-desc__hint{font-size:12px;color:#999;margin:0;}
.dl_modal-desc__btns{display:flex;gap:12px;}
.dl_modal-action-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .25s;}
.dl_modal-action-btn--pdf{background:#3a3a3a;color:#fff;border:none;}
.dl_modal-action-btn--pdf:hover{background:#D32F2F;box-shadow:0 4px 16px rgba(211,47,47,.35);transform:translateY(-1px);}
.dl_modal-action-btn--zip{background:#fff;color:#1a1a1a;border:1px solid #e5e7eb;}
.dl_modal-action-btn--zip:hover{border-color:#1a1a1a;background:#f8f8f8;transform:translateY(-1px);}
 
.sidebar-shared-wrapper .recommend-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-shared-wrapper .recommend-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
}

.sidebar-shared-wrapper .recommend-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-shared-wrapper .recommend-img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #e9ecef;
}

.sidebar-shared-wrapper .recommend-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.sidebar-shared-wrapper .recommend-item:hover img {
    transform: scale(1.05);
}

.sidebar-shared-wrapper .recommend-info {
    flex: 1;
    min-width: 0;
}

.sidebar-shared-wrapper .recommend-title {
    font-size: 14px;
    font-weight: 500;
    color: #1a2b3c;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    display: block;
}

.sidebar-shared-wrapper .recommend-item:hover .recommend-title {
    color: #d32f2f;
    text-decoration: none;
}

.sidebar-shared-wrapper .recommend-spec {
    font-size: 12px;
    color: #2c3e50;
    background: #eef2f6;
    padding: 4px 0px;
    border-radius: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
    display: inline-block;
    overflow: hidden;
    width: -webkit-fill-available;
}

.sidebar-shared-wrapper .recommend-date {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.sidebar-shared-wrapper .contact-form .form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 16px;
    outline: none;
    transition: all 0.3s;
    font-family: inherit;
}

.sidebar-shared-wrapper .contact-form .form-control:focus {
border-color: #d32f2f;
box-shadow: 0 0 0 2px rgba(211,47,47,0.1);
}

.sidebar-shared-wrapper .contact-form textarea {
    resize: none;
    min-height: 100px;
}

.sidebar-shared-wrapper .contact-form .submit-btn {
    width: 100%;
    padding: 12px;
    background: #383434;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.sidebar-shared-wrapper .contact-form .submit-btn:hover {
    background: #d32f2f;
}

.sidebar-shared-wrapper .contact-close-btn {
    width: 28px;
    height: 28px;
    background: #f0f0f0;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    border: none;
    outline: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    display: none;
}

.sidebar-shared-wrapper .contact-close-btn svg {
    width: 16px;
    height: 16px;
    stroke: #555;
    stroke-width: 2;
    transition: stroke 0.2s ease;
}

.sidebar-shared-wrapper .contact-close-btn:hover {
    background: #d32f2f;
    transform: scale(1.05);
}

.sidebar-shared-wrapper .contact-close-btn:hover svg {
    stroke: #fff;
}

.sidebar-shared-wrapper .contact-form-section.fixed .contact-close-btn {
    display: flex;
}

.sidebar-shared-wrapper .contact-form-section.clickable {
    cursor: pointer;
    transition: box-shadow 0.2s, background-color 0.2s;
}

.sidebar-shared-wrapper .contact-form-section.clickable:hover {
    background-color: #f2f2f2;  /* 原 #eef2f6 → 中性灰 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.sidebar-shared-wrapper .contact-form-section {
    transition: box-shadow 0.3s ease;
    will-change: transform, opacity;
}

.sidebar-shared-wrapper .contact-form-section.fixed {
    position: fixed !important;
    bottom: 80px;
    right: 120px;
    width: 320px;
    z-index: 99;
    margin: 0 !important;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 24px;
    animation: sidebarFormFadeIn 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
    cursor: default;
}

.sidebar-shared-wrapper .contact-form-section.fixed.clickable {
    cursor: default;
    background-color: #f8f9fa;
}

.sidebar-shared-wrapper .contact-form-section.fixed.clickable:hover {
    background-color: #f8f9fa;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

@keyframes sidebarFormFadeIn {
    0% { opacity: 0; transform: scale(0.9) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ======================
   文章列表页专属样式
====================== */
.article-list-page .article-list-header {
    border-bottom: 2px solid #eef2f6;
    padding-bottom:12px;
}
.article-list-page .article-list-header h1 {
    font-size:24px;
    font-weight: 700;
    color: #2C3E50;
}
.article-list-page .article-list-subtitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.article-list-page .article-list-desc {
    font-size: 15px;
    color: #6b7a8c;
}
.article-list-page .article-list-count {
    /* 背景与边框：柔和微妙的灰色背景 + 极浅边框 */
    background: #f8f9fc;
    border: 1px solid #e9ecf0;
    
    /* 文字颜色：深灰色，降低视觉重量 */
    color: #2c3e4e;
    
    /* 圆角更大更柔和，内边距更舒适 */
    padding: 6px 14px;
    border-radius: 100px;
    
    /* 字体样式 */
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    
    /* 布局保持不变 */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    /* 添加一点轻度阴影，增加层次感（可选，看喜好） */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 1px 1px rgba(0, 0, 0, 0.02);
    
    /* 平滑过渡（用于 hover 效果） */
    transition: all 0.2s ease;
}

/* SVG 图标单独微调：颜色柔和、粗细合适 */
.article-list-page .article-list-count svg {
    stroke: #7f8c9a;
    stroke-width: 1.8;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 可选：轻微的 hover 效果，让交互更细腻 */
.article-list-page .article-list-count:hover {
    background: #f1f4fa;
    border-color: #dfe3e9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}


.article-list-page .article-card {
    display: flex;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid #e9ecef;
    transition: all 0.25s;
    cursor: pointer;
}
.article-list-page .article-card:hover {
    background: #fafbfc;
    padding: 24px 8px;
    margin: 0 -8px;
    border-radius: 12px;
    border-bottom: transparent;
    box-shadow: 0 6px 16px rgba(0,0,0,0.03);
}
.article-list-page .article-card-img {
    flex-shrink: 0;
    width: 220px;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f3f5;
}
.article-list-page .article-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.article-list-page .article-card-img:hover img {
    transform: scale(1.03);
}
.article-list-page .article-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.article-list-page .article-card-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
}
.article-list-page .article-card-title a {
    color: #1a2b3c;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-list-page .article-card-title a:hover {
    color: #d32f2f;
    text-decoration: none;
}
.article-list-page .article-card-excerpt {
    font-size: 15px;
    color: #555;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-list-page .article-card-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: #7a8a9a;
    margin-top: 12px;
}
.article-list-page .article-card-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.article-list-page .article-pagination {
  margin-top:30px;
}
.article-list-page .article-pagination .pagination {
  display: flex;
  flex-wrap: wrap; /* 小屏幕自动换行 */
  justify-content: center;
  align-items: center;
  gap: 8px; /* 优化间距，更紧凑美观 */
  padding: 0;
  margin: 0;
  list-style: none; /* 清除默认列表样式 */
}

/* 统一按钮基础样式 */
.article-list-page .article-pagination a,
.article-list-page .article-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  background: #fff;
  border: 1px solid #dee2e6;
  color: #2C3E50;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}

/* 悬停效果 */
.article-list-page .article-pagination a:hover:not(.disabled) {
  background: #d32f2f;
  border-color: #d32f2f;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,102,204,0.2);
}

/* 当前页样式（修复优先级问题，强制生效） */
.article-list-page .article-pagination .current a {
  background: #d32f2f;
  border-color: #d32f2f;
  color: #fff;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* 禁用状态样式（不可点击、灰色） */
.article-list-page .article-pagination a.disabled {
  background: #f8f9fa;
  border-color: #e9ecef;
  color: #adb5bd;
  cursor: not-allowed;
  transform: none;
}
.article-list-page .article-pagination a.disabled:hover {
  background: #f8f9fa;
  border-color: #e9ecef;
  color: #adb5bd;
  transform: none;
  box-shadow: none;
}

/* 省略号样式 */
.article-list-page .article-pagination .dots {
  border: none;
  background: transparent;
  color: #6c757d;
  cursor: default;
  transform: none;
}
.article-list-page .article-pagination .dots:hover {
  transform: none;
}

/* ======================
   文章详情页专属样式
====================== */
.article-page-wrapper .article-main {
    min-width: 0;
}

.article-page-wrapper .article-header {
    margin-bottom:16px;
}

/* 分类标签：黑色背景，白色文字 */
.article-page-wrapper .article-category {
    display: inline-block;
    padding: 6px 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    background-color: #383434;   /* 原蓝色 #0066CC → 黑色 */
    white-space: nowrap;
}

.article-page-wrapper .article-title {
    font-size: 28px;
    font-weight: 600;
    color: #222;                 /* 原 #2C3E50 偏蓝 → 深灰 */
    line-height: 1.4;
}

.article-page-wrapper .article-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    color: #999;
    margin-top: 16px;
    width: 100%;
}

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

.article-page-wrapper .article-body {
    max-width: 100%;
}

/* ================== 基础文章排版 ================== */
.article-page-wrapper .article-body p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 24px;
}

/* 文章导航 */
.article-page-wrapper .article-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
    gap: 20px;
}

.article-page-wrapper .article-nav a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    width: 48%;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
}

/* 导航悬停：浅红背景 + 红色阴影 */
.article-page-wrapper .article-nav a:hover {
    background-color: #fce4e4;                              /* 原 #e8f4fc → 浅红 */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.1);         /* 原蓝色阴影 → 红色 */
}

.article-page-wrapper .nav-thumb {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.article-page-wrapper .nav-text {
    flex: 1;
    min-width: 0;
}

.article-page-wrapper .article-nav .nav-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.article-page-wrapper .article-nav .nav-title {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*======================系列专题======================*/
.sm-btn {
    padding: 14px 32px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    outline: none;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s;
}
.sm-btn i,
.sm-btn svg {
    margin-right: 8px;
}
.sm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.sm-btn-group .sm-btn--primary {
    background:#d32f2f;
    color: #fff;
}
.sm-btn--primary:hover {
    background:#e53935;
}
.sm-btn--accent {
    background:#383434;
    color: #fff;
    padding: 13px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    font-size: 15px;
    font-family: inherit;
    max-height: 500px !important;
    overflow: auto !important;    
    resize: vertical !important;
    padding-left:30px;
    padding-right:30px;
}
.sm-btn--accent:hover {
    background: var(--primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sm-section-title {
    font-size: 32px;
    margin-bottom: 32px;
    text-align: center;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 16px;
    color: #1a1e2b;
}
.sm-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #0E42B3, #FF6B35);
    border-radius: 2px;
}
.sm-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: #555;
    border: none;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: all 0.3s;
    outline: none;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.sm-carousel-btn:hover {
    background:#d32f2f;
    color: #fff;
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 14px rgba(211, 47, 47, 0.35);
}
.sm-carousel-btn--prev {
    left:-60px;
}
.sm-carousel-btn--next {
    right:-60px;
}
.sm-main-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* KV区域 */
.sm-kv {
    display: flex;
    gap: 48px;
    margin-bottom: 64px;
    align-items: center;
}
.sm-kv .sm-kv-text {
    flex: 1;
}
.sm-kv .sm-kv-text h1 {
    font-size:26px;
    line-height: 52px;
    margin-bottom: 16px;
    color: #1a1e2b;
    letter-spacing: 0.5px;
}
.sm-kv .sm-kv-subtitle {
    font-size: 16px;
    color: #5e5e6e;
    margin-bottom: 24px;
}
.sm-kv .sm-kv-features {
    margin-bottom: 32px;
}
.sm-kv .sm-kv-features li {
    margin-bottom: 10px;
    padding-left: 28px;
    position: relative;
    font-size: 15px;
    color: #1a1e2b;
}
.sm-kv .sm-kv-features li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color:#d32f2f;
    font-size: 14px;
}
.sm-kv .sm-btn-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.sm-kv .sm-kv-visual {
    flex: 1;
    border-radius: 10px;
    text-align: center;
    width: 740px;
}

/* 核心型号卡片 */
.sm-models {
    margin-bottom: 64px;
}
.sm-models .sm-model-carousel-container {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    overflow: visible;
}
.sm-models .sm-model-cards {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: 8px;
    scroll-snap-type: x mandatory;
    padding-top: 5px;
}
.sm-models .sm-model-cards::-webkit-scrollbar {
    height: 0;
}
.sm-models .sm-model-card {
    flex: 0 0 auto;
    width: calc((100% - 48px) / 3);
    min-width: 320px;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
    background: #fff;
    scroll-snap-align: start;
}
.sm-models .sm-model-card:hover {
    border-color: #d32f2f;
    transform: translateY(-3px);
    box-shadow: 0 4px 14px rgba(211, 47, 47, 0.35);
}
.sm-models .sm-card-header {
    background: #f7f7f7;
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid #e8eaef;
}
.sm-models .sm-card-header h3 {
    font-size: 24px;
    color:#444444;
    letter-spacing: 0.5px;
}
.sm-models .sm-card-header span {
    font-size: 13px;
    color: #5e5e6e;
    display: block;
    margin-top: 2px;
}
.sm-models .card-img-slider {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f8f9fa;
}
.sm-models .card-img-slider .slider-track {
    display: flex;
    transition: transform 0.4s ease;
    height: 100%;
    position: relative;
    z-index: 1;
}
.sm-models .card-img-slider .slider-item {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5, #eaeaea);
    pointer-events: auto;       /* 保证可以悬停 */
    cursor: pointer;
}

.sm-models .card-img-slider .slider-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
    pointer-events: none;       /* 图片不用响应鼠标，但父级会 */
    filter: drop-shadow(4px 2px 10px rgba(0, 0, 0, 0.3));
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* 悬停效果：浮起 + 阴影加深 */
.sm-models .slider-track:hover .slider-item img {
    filter: drop-shadow(8px 6px 16px rgba(0, 0, 0, 0.25));
    transform: translateY(-4px);
}
.sm-models .card-img-slider .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(183 174 174 / 29%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.25s;
    font-size: 14px;
    pointer-events: auto;
}
.sm-models .card-img-slider .slider-arrow:hover {
    background: #d32f2f;
    color: #fff;
    box-shadow: 0 4px 14px rgba(211, 47, 47, 0.35);
}
.sm-models .card-img-slider .slider-arrow--prev {
    left: 10px;
}
.sm-models .card-img-slider .slider-arrow--next {
    right: 10px;
}
.sm-models .slider-item-desc {
    text-align: center;
    font-size: 12px;
    color: #666;
    padding: 6px 0 4px;
    background: #fafbfc;
}
.sm-models .sm-card-params {
    padding: 16px 20px;
}
.sm-models .sm-card-params ul {
    list-style: none;
}
.sm-models .sm-card-params li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f1f4;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sm-models .sm-card-params li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.sm-models .sm-param-highlight {
    color:#d32f2f;
    font-weight: bold;
    font-size: 15px;
}
.sm-models .sm-param-normal {
    color: #1a1e2b;
    font-weight: normal;
    font-size: 14px;
}
.sm-models .sm-card-params .params-group {
    display: none;
}
.sm-models .sm-card-params .params-group[data-group="0"] {
    display: block;
}
.sm-models .sm-card-footer {
    padding: 16px 20px;
    text-align: center;
    background: #f7f7f7;
    border-top: 1px solid #e8eaef;
}
.sm-models .sm-card-footer .sm-btn--primary{
    background: #444444;
    color: #fff;
}
.sm-models .sm-card-footer .sm-btn--primary:hover{
    background:#d32f2f;
}
.sm-models .sm-card-footer .sm-btn {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 11px 0;
}

/* 参数对比表 */
.sm-compare {
    margin-bottom: 24px;
}
.sm-compare .sm-table-wrapper {
    width: 100%;
    max-height: 550px;
    overflow: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    cursor: grab;
    user-select: none;
    background: #fff;
}
.sm-compare .sm-table-wrapper:active {
    cursor: grabbing;
}
.sm-compare .sm-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.sm-compare .sm-compare-table thead th {
    position: sticky;
    top: 0;
    background: #f2f2f2;
    z-index: 2;
    font-weight: 600;
    color: #1a1e2b;
    letter-spacing: 0.3px;
}
.sm-compare .sm-compare-table th,
.sm-compare .sm-compare-table td {
    padding: 16px 24px;
    text-align: center;
    border: 1px solid #e8eaef;
    white-space: nowrap;
	border-top:0;
}
.sm-compare .sm-compare-table tbody tr {
    transition: background 0.2s;
}
.sm-compare .sm-compare-table tbody tr:hover {
    background:#f9efef;
}
.sm-compare .sm-compare-table tbody td.highlight {
  background-color: #f9efef;
}

/* 3D模型下载 */
.sm-download {
    background: #fff;
    border: 1px solid #e2e4e9;
    border-radius: 10px;
    padding: 32px;
    margin-bottom: 64px;
    display: flex;
    gap: 40px;
    align-items: center;
}
.sm-download .sm-download__left {
    flex: 0 0 300px;
}
.sm-download .sm-download__left i{
    color: #d32f2f;
    margin-right: 8px;
}
.sm-download .sm-download__left h3 {
    font-size: 24px;
    color: #1a1e2b;
    margin-bottom: 12px;
}
.sm-download .sm-download__left p {
    font-size: 15px;
    color: #5e5e6e;
    line-height: 1.6;
}
.sm-download .sm-download__right {
    flex: 1;
}
.sm-download .sm-download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.sm-download .sm-download-btn {
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #1a1e2b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}
.sm-download .sm-download-btn:hover {
    border-color: #d32f2f;
    background: rgba(211, 47, 47, 0.05);
    color: #d32f2f;
    transform: translateY(-2px);
}

/* 推荐产品 */
.sm-recommend {
    margin-bottom: 64px;
    border-top: 1px solid #e8eaef;
    padding-top: 32px;
}
.truss-custom .sm-recommend{
    padding-top:80px;
}
.sm-recommend .sm-recommend-subtitle {
    text-align: center;
    margin-top: -16px;
    margin-bottom: 28px;
    color: #5e5e6e;
    font-size: 15px;
}
.sm-recommend .sm-recommend-carousel-container {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    overflow: visible;
}
.sm-recommend .sm-recommend-cards {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 4px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.sm-recommend .sm-recommend-cards::-webkit-scrollbar {
    height: 0;
}
.sm-recommend .sm-recommend-card {
    flex: 0 0 auto;
    width: calc((100% - 54px) / 4);
    min-width: 260px;
    background: #fff;
    border: 1px solid #e2e4e9;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
    scroll-snap-align: start;
}
.sm-recommend .sm-recommend-card:hover{
    border-color: #d32f2f;
    border-color: #d32f2f;
    box-shadow: 0 12px 28px rgba(211, 47, 47, 0.18);
    transform: translateY(-3px);
}    
.sm-recommend .sm-recommend-card__img {
    height: 160px;
    background: linear-gradient(135deg, #f5f5f5, #eaeaea);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5e5e6e;
    font-size: 14px;
}
.sm-recommend .sm-recommend-card__content {
    padding: 20px 18px;
}
.sm-recommend .sm-recommend-card__title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1e2b;
    margin-bottom: 8px;
}
.sm-recommend .sm-recommend-card__desc {
    font-size: 13px;
    color: #5e5e6e;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;    
}
.sm-recommend .sm-recommend-card__link {
    font-size: 14px;
    color:#d32f2f;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: 0.2s;
}
.sm-recommend .sm-recommend-card:hover .sm-recommend-card__link {
    color: #d32f2f;
    text-decoration: underline;
}

/* 询价表单 */
.sm-inquiry {
    padding:50px 0;
}
.sm-inquiry-bg{
    background: #f7f7f7;
    padding: 36px 32px;
    border-radius: 10px;
    margin-bottom: 64px;
}
.sm-inquiry .sm-inquiry-subtitle {
    text-align: center;
    margin-bottom: 28px;
    color: #5e5e6e;
    font-size: 15px;
}
.sm-inquiry .sm-inquiry-form {
    max-width: 820px;
    margin: 0 auto;
}
.sm-inquiry .sm-inquiry-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.sm-inquiry .sm-form-step label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1a1e2b;
}
.sm-inquiry .sm-form-step input,
.sm-inquiry .sm-form-step textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    transition: 0.3s;
    background: #fff;
    font-family: inherit;
}
.sm-inquiry .sm-form-step input:focus,
.sm-inquiry .sm-form-step textarea:focus {
    border-color: #0E42B3;
    box-shadow: 0 0 0 3px rgba(14, 66, 179, 0.08);
}
.sm-inquiry .sm-inquiry-result {
    text-align: center;
    padding: 28px;
    background: #fff;
    border-radius: 8px;
    display: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-top: 24px;
}
.sm-inquiry .sm-inquiry-result.sm-show {
    display: block;
}
.sm-inquiry .sm-inquiry-result h3 {
    color: #0E42B3;
}

/* 技术文章 */
.sm-articles {
    margin-bottom: 64px;
}
.sm-articles .sm-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:36px;
    padding:10px 0;
}
.sm-articles .sm-article-card {
    background: #fff;
    border: 1px solid #e2e4e9;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.sm-articles .sm-article-card:hover {
    border-color: #d32f2f;
    box-shadow: 0 12px 28px rgba(211, 47, 47, 0.18);
    transform: translateY(-4px);
}
.sm-articles .sm-article-card__img {
    height: 180px;
    background: linear-gradient(135deg, #f5f5f5, #eaeaea);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5e5e6e;
    font-size: 14px;
}
/* 图片本身添加过渡，实现平滑缩放 */
.sm-articles .sm-article-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.sm-articles .sm-article-card:hover .sm-article-card__img img {
    transform: scale(1.06);
}
.sm-articles .sm-article-card__content {
    padding: 24px 20px;
}
.sm-articles .sm-article-card__title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1e2b;
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sm-articles .sm-article-card__desc {
    font-size: 14px;
    color: #5e5e6e;
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sm-articles .sm-article-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #5e5e6e;
}

/* 产品画廊 */
.product-gallery button {
    outline: none !important;
    box-shadow: none !important;
}
.product-gallery {
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    border-radius: 20px;
    padding: 0;
    border: none;
}
.product-gallery .container {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px 0 0;
}
.product-gallery .main-viewer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 740px;
}
.product-gallery .gallery-stage-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.product-gallery .thumbnail-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 80px;
    width: 80px;
    height: 500px;
    max-height: 500px;
    background: #fafafc;
    border-radius: 16px;
    padding: 8px 4px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.product-gallery .thumbnail-scroll-up,
.product-gallery .thumbnail-scroll-down {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    color: #3b3b45;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    outline: none;
}
.product-gallery .thumbnail-scroll-up {
    opacity: 0.4;
    pointer-events: none;
}
.product-gallery .thumbnail-scroll-up.active {
    opacity: 1;
    pointer-events: auto;
    background: #e6e9f0;
}
.product-gallery .thumbnail-scroll-down {
    opacity: 0.4;
    pointer-events: none;
}
.product-gallery .thumbnail-scroll-down.active {
    opacity: 1;
    pointer-events: auto;
    background: #e6e9f0;
}
.product-gallery .thumbnail-scroll-up:hover,
.product-gallery .thumbnail-scroll-down:hover {
    background: #dadfe8;
}
.product-gallery .thumbnail-scroll-up:active,
.product-gallery .thumbnail-scroll-down:active {
    transform: scale(0.94);
}
.product-gallery .thumbnail-list {
    flex: 1 1 auto;
    min-height: 0;
    width: 80px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f4f4f4;
}
.product-gallery .thumbnail-list::-webkit-scrollbar {
    width: 4px;
}
.product-gallery .thumbnail-list::-webkit-scrollbar-track {
    background: #f4f4f4;
    border-radius: 4px;
}
.product-gallery .thumbnail-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}
.product-gallery .thumbnail-list:hover::-webkit-scrollbar-thumb {
    background: #b9bfc7;
}
.product-gallery .thumbnail-item {
    position: relative;
    width: 64px;
    height: 64px;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #f5f7fb;
    flex-shrink: 0;
    opacity: 0.75;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    padding: 0 !important;
    margin: 0;
}
.product-gallery .thumbnail-item:hover {
    opacity: 0.92;
    transform: scale(1.02);
}
.product-gallery .thumbnail-item.is-selected {
    border-color: #000000;
    opacity: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transform: scale(1.01);
}
.product-gallery .thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-gallery .thumbnail-play-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(0 0 0 / 22%);
    color: #fff;
    pointer-events: none;
    backdrop-filter: blur(2px);
    top: 50%;
    left: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}
.product-gallery .thumbnail-item.is-selected .thumbnail-play-icon{
    display:none !important;
}

.product-gallery .main-stage {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: min(calc((80px * 2) + 500px), 100%);
    height: 500px;
    background: #ffffff;
    border-radius: 20px;
    overflow: visible;
}
.product-gallery .stage-gutter {
    width: 70px;
    flex-shrink: 0;
    background: #f4f4f4;
}
.product-gallery .stage-gutter--left {
    border-radius: 20px 0 0 20px;
}
.product-gallery .stage-gutter--right {
    border-radius: 0 20px 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding-top: 24px;
}
.product-gallery .viewer-white {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    width: 500px;
    height: 100%;
    background: #fff;
    overflow: hidden;
    cursor: crosshair;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
}
.product-gallery .gutter-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #ffffffdd;
    backdrop-filter: blur(4px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: 0.2s;
    display: grid;
    place-items: center;
    outline: none;
    color: #333;
    flex-shrink: 0;
}
.product-gallery .gutter-icon-btn:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #0E42B3;
    transform: scale(1.05);
}
.product-gallery .gutter-icon-btn svg {
    width: 18px;
    height: 18px;
}
.product-gallery .slide-prev,
.product-gallery .slide-next {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #ffffffdd;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transform: translateY(-50%);
    transition: 0.2s;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-gallery .slide-prev {
    left: calc((70px - 40px) / 2);
}
.product-gallery .slide-next {
    right: calc((70px - 20px) / 2);
}
.product-gallery .slide-prev:hover,
.product-gallery .slide-next:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.product-gallery .viewer-canvas {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}
.product-gallery .primary-image {
    width: 500px;
    height: 500px;
    object-fit: contain;
    display: block;
    transition: none;
}
.product-gallery .magnifier-glass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    display: none;
    z-index: 10;
    cursor: none;
    background-color: #fff;
}
.product-gallery .primary-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0b0b0f;
    z-index: 2;
    border-radius: 14px;
    display: none;
    cursor: pointer;
    object-fit: cover;
}
.product-gallery .video-control-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 12;
    border-radius: 0 0 14px 14px;
}
.product-gallery .video-control-bar.active {
    display: flex;
    pointer-events: auto;
    opacity: 1;
}
.product-gallery .control-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 40px;
    transition: 0.15s;
    outline: none;
}
.product-gallery .control-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}
.product-gallery .control-left,
.product-gallery .control-right {
    flex-shrink: 0;
}
.product-gallery .control-right {
    margin-left: 5px;
}
.product-gallery .control-center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
}
.product-gallery .time {
    width: 44px;
    color: #fff;
    font-size: 13px;
    font-family: monospace;
    text-align: center;
}
.product-gallery .progress-container {
    flex: 1;
    cursor: pointer;
    position: relative;
    height: 5px;
}
.product-gallery .progress-bg {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    position: relative;
}
.product-gallery .progress-reached {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ff6a00;
    width: 0%;
    border-radius: 8px;
}
.product-gallery .progress-indicator {
    background: #fff;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    position: absolute;
    top: -3.5px;
    left: 0%;
    transform: translateX(-50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.product-gallery .volume-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
}
.product-gallery .volume-bar-container {
    width: 60px;
    height: 4px;
    cursor: pointer;
    position: relative;
}
.product-gallery .volume-bg {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
}
.product-gallery .volume-reached {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ff6a00;
    width: 100%;
    border-radius: 8px;
}
.product-gallery .volume-indicator {
    background: #fff;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    position: absolute;
    top: -3px;
    left: 100%;
    transform: translateX(-50%);
}
.product-gallery .media-tabs {
    display: inline-flex;
    padding: 4px;
    background: #f4f4f4;
    border-radius: 60px;
    gap: 4px;
    margin-left: 80px;
    margin-top: 4px;
}
.product-gallery .media-tab {
    border: none;
    background: transparent;
    padding: 6px 24px;
    border-radius: 60px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s;
    outline: none;
}
.product-gallery .media-tab.is-selected {
    background: #ffffff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
    color: #000;
}
.product-gallery__title {
    word-break: break-all;
    background: none !important;
    -webkit-text-fill-color: #222 !important;
    margin-bottom: 6px;
    line-height: 26px;
    font-weight: 600;
    font-size: 18px;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #222;
    letter-spacing: 0;
}
.product-gallery .control-btn svg {
    width: 16px;
    height: 16px;
}
.product-gallery .play-pause-btn svg {
    width: 14px;
    height: 14px;
}

/* 全屏预览弹窗 */
.fullscreen-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.96);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 24px;
    backdrop-filter: blur(4px);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.fullscreen-modal[hidden] {
    display: none !important;
}
.fullscreen-modal .modal-header-bar {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 16px;
    z-index: 10001;
    pointer-events: none;
}
.fullscreen-modal .modal-header-bar span {
    background: rgba(0, 0, 0, 0.6);
    padding: 6px 16px;
    border-radius: 40px;
    backdrop-filter: blur(8px);
    font-size: 14px;
    letter-spacing: 1px;
}
.fullscreen-modal .modal-close-btn {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: 0.2s;
    pointer-events: auto;
    outline: none;
}
.fullscreen-modal .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.02);
}
.fullscreen-modal .modal-close-btn svg {
    width: 22px;
    height: 22px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}
.fullscreen-modal .modal-core-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 1200px;
}
.fullscreen-modal .modal-thumb-wrapper {
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: transparent;
}
.fullscreen-modal .modal-thumb-scroll-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: 0.2s;
    outline: none;
}
.fullscreen-modal .modal-thumb-scroll-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}
.fullscreen-modal .modal-thumb-scroll-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.fullscreen-modal .modal-thumb-scroll-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}
.fullscreen-modal .modal-thumb-list {
    width: 80px;
    height: 492px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fullscreen-modal .modal-thumb-list::-webkit-scrollbar {
    display: none;
}
.fullscreen-modal .modal-thumb-item {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: 0.2s;
    background: #2c2c2c;
    flex-shrink: 0;
}
.fullscreen-modal .modal-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #fff;
}
.fullscreen-modal .modal-thumb-item.active {
    border-color: #ff8c00;
    box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.6);
    transform: scale(1.02);
}
.fullscreen-modal .modal-main-pic {
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    cursor: crosshair;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
.fullscreen-modal .modal-main-pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: none;
    pointer-events: auto;
    background-color: #fff;
}
.fullscreen-modal .modal-magnifier {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    display: none;
    z-index: 20;
    cursor: none;
    border-radius: 24px;
    background-color: #fff;
}
.fullscreen-modal .modal-vertical-nav {
    width: 60px;
    display: flex;
    justify-content: center;
}
.fullscreen-modal .nav-stack {
    background: rgba(30, 30, 30, 0.7);
    backdrop-filter: blur(12px);
    border-radius: 60px;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.fullscreen-modal .nav-arrow {
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: 0.2s;
    outline: none;
}
.fullscreen-modal .nav-arrow:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}
.fullscreen-modal .nav-arrow svg {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

/* 复制提示 */
.copy-feedback {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    opacity: 0;
    transition: 0.3s ease;
    pointer-events: none;
}
.copy-feedback.show {
    opacity: 1;
    transform: translate(-50%, 10px);
}






/*=========================多轴专题=============================*/
	.ms-section {
		padding: 80px 0;
		transition: all 0.6s ease;
	}

	.ms-title {
		text-align: center;
		margin-bottom:30px;
		color: #2A3A4D;
	}

	.ms-title h2 {
		font-size: 36px;
		margin-bottom: 15px;
		position: relative;
		display: inline-block;
		font-weight: 700;
	}

	.ms-title h2::after {
		content: "";
		width: 80px;
		height: 4px;
		background: #0E42B3;
		position: absolute;
		bottom: -12px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 2px;
	}

	.ms-title p {
		color: #666666;
		font-size: 16px;
		max-width: 1000px;
		margin: 20px auto 0;
		line-height: 1.6;
	}

	/* 导航栏 —— 横向滑动优化 */
	/*.ms-header {*/
	/*	position: fixed;*/
	/*	top: 0;*/
	/*	width: 100%;*/
	/*	background: rgba(26, 42, 58, 0.9);*/
	/*	backdrop-filter: blur(10px);*/
	/*	box-shadow: 0 2px 15px rgba(0,0,0,0.2);*/
	/*	z-index: 999;*/
	/*	opacity: 0;*/
	/*	visibility: hidden;*/
	/*	transition: all 0.3s ease;*/
	/*}*/
	/*.ms-header.show {*/
	/*	opacity: 1;*/
	/*	visibility: visible;*/
	/*}*/

	/*.ms-header .nav {*/
	/*	display: flex;*/
	/*	justify-content: space-between;*/
	/*	align-items: center;*/
	/*	height: 70px;*/
	/*}*/

	/*.ms-header .nav-left {*/
	/*	display: flex;*/
	/*	align-items: center;*/
	/*	flex: 1;*/
	/*	min-width: 0;*/
	/*	overflow: hidden;*/
	/*}*/

	/*.ms-header .nav-list {*/
	/*	display: flex;*/
	/*	flex-wrap: nowrap;*/
	/*	overflow-x: auto;*/
	/*	overflow-y: hidden;*/
	/*	scroll-behavior: smooth;*/
	/*	-webkit-overflow-scrolling: touch;*/
	/*	scrollbar-width: none;*/
	/*	-ms-overflow-style: none;*/
	/*	margin: 0;*/
	/*	padding: 0;*/
	/*	white-space: nowrap;*/
	/*}*/

	/*.ms-header .nav-list::-webkit-scrollbar {*/
	/*	display: none;*/
	/*}*/

	/*.ms-header .nav-list li {*/
	/*	margin-right: 30px;*/
	/*	flex-shrink: 0;*/
	/*}*/

	/*.ms-header .nav-list a {*/
	/*	text-decoration: none;*/
	/*	color: #ffffff;*/
	/*	font-size: 16px;*/
	/*	font-weight: 500;*/
	/*	transition: 0.3s;*/
	/*	padding: 5px 0;*/
	/*	white-space: nowrap;*/
	/*}*/

	/*.ms-header .nav-list a:hover, */
	/*.ms-header .nav-list a.active {*/
	/*	color: #40A9FF;*/
	/*}*/

	/*.ms-header .nav-right {*/
	/*	display: flex;*/
	/*	gap: 15px;*/
	/*	margin-left: 30px;*/
	/*	flex-shrink: 0;*/
	/*}*/

	/*.ms-header .header-btn {*/
	/*	display: inline-flex;*/
	/*	align-items: center;*/
	/*	justify-content: center;*/
	/*	padding: 8px 22px;*/
	/*	border-radius: 6px;*/
	/*	font-size: 14px;*/
	/*	font-weight: 600;*/
	/*	text-decoration: none;*/
	/*	transition: all 0.3s ease;*/
	/*	white-space: nowrap;*/
	/*	border: 2px solid transparent;*/
	/*	cursor: pointer;*/
	/*	background: none;*/
	/*}*/
	/*.ms-header .header-btn i {*/
	/*	margin-right: 8px;*/
	/*}*/

	/*.ms-header .btn-primary {*/
	/*	background: #40A9FF;*/
	/*	color: #1a2a3a;*/
	/*	border-color: #40A9FF;*/
	/*}*/

	/*.ms-header .btn-primary:hover {*/
	/*	background: transparent;*/
	/*	color: #40A9FF;*/
	/*	transform: translateY(-2px);*/
	/*	box-shadow: 0 8px 20px rgba(64,169,255,0.2);*/
	/*}*/

	/*.ms-header .btn-outline {*/
	/*	background: transparent;*/
	/*	color: #ffffff;*/
	/*	border-color: #5d6d7e;*/
	/*}*/

	/*.ms-header .btn-outline:hover {*/
	/*	background: #5d6d7e;*/
	/*	border-color: #5d6d7e;*/
	/*	transform: translateY(-2px);*/
	/*	color: #ffffff;*/
	/*}*/

	/* Banner */
	.ms-banner {
		position: relative;
		width: 100%;
		height: 500px;
		overflow: hidden;
		margin-top: 0;
        background: linear-gradient(135deg, #cbd8e6 0%, #dfe9f3 50%, #cdddec 100%);
	}
	.ms-banner .grid-bg {
		position: absolute;
		width: 100%;
		height: 100%;
	    background-image: linear-gradient(rgba(0, 122, 204, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 122, 204, 0.06) 1px, transparent 1px);
		background-size: 30px 30px;
	}
	.ms-banner .decorative-lines { position: absolute; width: 100%; height: 100%; }
	.ms-banner .line {
		position: absolute;
		background: linear-gradient(90deg, transparent, #40A9FF, transparent);
		height: 2px;
		opacity: 0.6;
	}
	.ms-banner .line-1 { top: 20%; width: 60%; left: 20%; animation: slideLine 8s infinite; }
	.ms-banner .line-2 { top: 50%; width: 80%; left: 10%; animation: slideLine 10s infinite reverse; }
	.ms-banner .line-3 { top: 80%; width: 50%; left: 25%; animation: slideLine 6s infinite; }
	@keyframes slideLine {
		0% { transform: translateX(-100%); opacity: 0; }
		50% { opacity: 0.8; }
		100% { transform: translateX(100%); opacity: 0; }
	}
	.ms-banner .corner-decoration {
		position: absolute;
		width: 120px;
		height: 120px;
		border: 2px solid #5d6d7e;
	}
	.ms-banner .corner-tl { top: 30px; left: 30px; border-right: none; border-bottom: none; }
	.ms-banner .corner-br { bottom: 30px; right: 30px; border-top: none; border-left: none; }
	.ms-banner .module-svg {
		position: absolute;
		right: -5%;
		top: 50%;
		transform: translateY(-50%);
		width: 750px;
		max-height: 350px;
		z-index: 5;
	    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.3));
	}
	
/* 导轨样式 */
.ms-banner .module-rail { stroke-width: 2;     fill: #adb5bd;
    stroke: #6c757d;}
/* 滑块样式 */
.ms-banner .module-block {     fill: #495057;
    stroke: #007acc; stroke-width: 2.5; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));}

/* 丝杆样式及旋转动画 */
.ms-banner .module-screw {stroke: #7aaaff;stroke-width: 3;fill: none;stroke-dasharray: 10 5;animation: rotateScrew 2s linear infinite;
}
@keyframes rotateScrew { to { stroke-dashoffset: -30; } }		
	
	.ms-banner .content {
		position: relative;
		z-index: 10;
		height: 500px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #ffffff;
		max-width: 580px;
		width: 580px;
	}
	.ms-banner .tagline {
		font-size: 14px;
		letter-spacing: 3px;
		color: #40A9FF;
		text-transform: uppercase;
		margin-bottom: 15px;
		font-weight: 700;
		white-space: nowrap;
	}
	.ms-banner .main-title {
        -webkit-background-clip: text;
        font-size: 52px;
        font-weight: 900;
        line-height: 1.2;
        margin-bottom: 20px;
        text-shadow: 0 2px 10px rgba(0,122,204,0.1);
        color: #212529;
	}
	.ms-banner .highlight {
		font-size: 18px;
		color: #40A9FF;
		line-height: 1.7;
		margin-bottom: 20px;
		font-weight: 500;
	}
	.ms-banner .description {
        font-size: 18px;
        color: #495057;
        max-width: 580px;
        line-height: 1.7;
        margin-bottom: 35px;
	}
	.ms-banner .btn-group { display: flex; gap: 15px; flex-wrap: wrap; }
	.ms-banner .cta-button {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 16px 40px;
        background: #0E42B3;
        border: 2px solid #0E42B3;
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        border-radius: 4px;
        white-space: nowrap;
	}
	.ms-banner .cta-button:hover {
        background: #083496;
        border-color: #083496;
        box-shadow: 0 8px 25px rgba(14,66,179,0.3);
        transform: translateY(-2px);
	}
	.ms-banner .secondary-button {
        display: inline-flex;
        align-items: center;
        padding: 16px 40px;
        background: transparent;
        border: 2px solid #4a5562;
        color: #1e1e2a;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        border-radius: 4px;
        white-space: nowrap;
	}
	.ms-banner .secondary-button:hover {
        background: #4a5562;
        color: #ffffff;
        transform: translateY(-2px);
	}
    .ms-banner .secondary-button i{
        margin-right:8px;
    }


	/* 业务概述 */
	.ms-intro { background: #F5F7FA; }
	.ms-intro .intro-content { display: flex; flex-wrap: wrap; gap: 50px; align-items: center; }
	.ms-intro .intro-text { flex: 1; min-width: 320px; line-height: 1.9; color: #333333; }
	.ms-intro .intro-text h3 { font-size: 22px; color: #2A3A4D; margin-bottom: 20px; font-weight: 600; }
	.ms-intro .intro-text p { margin-bottom: 18px; color: #666666;font-size:15px}
	.ms-intro .intro-img { flex: 1; min-width: 320px; position: relative; }
	.ms-intro .intro-img img { width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); transition: transform 0.5s ease; }
	.ms-intro .intro-img:hover img { transform: scale(1.02); }
	.ms-intro .intro-img::before {
		content: "";
		position: absolute;
		top: -20px;
		right: -20px;
		width: 100%;
		height: 100%;
		border: 3px solid #0E42B3;
		border-radius: 12px;
		z-index: -1;
		opacity: 0.3;
	}

	/* 搭建类型 */
	.ms-product .product-card {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 30px;
		margin-bottom: 40px;
	}
	.ms-product .card {
		background: #ffffff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 4px 15px rgba(0,0,0,0.08);
		transition: all 0.4s ease;
		position: relative;
		border-top: 3px solid transparent;
	}
	.ms-product .card::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 4px;
		background: linear-gradient(90deg, #0E42B3, #40A9FF);
		transform: scaleX(0);
		transition: transform 0.4s ease;
	}
	.ms-product .card:hover { transform: translateY(-10px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
	.ms-product .card:hover::before { transform: scaleX(1); }
	.ms-product .card img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.5s ease; 
        background: linear-gradient(135deg, #e8ecf4 0%, #dce1ed 100%);
	}
	.ms-product .card:hover img { transform: scale(1.05); }
	.ms-product .card-body { padding: 25px; }
	.ms-product .card-body h3 { font-size: 20px; color: #2A3A4D; margin-bottom: 12px; font-weight: 600; }
	.ms-product .card-body p { font-size: 14px; color: #666666; line-height: 1.6; margin-bottom: 18px; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
	}
	.ms-product .card-body .tags { display: flex; flex-wrap: wrap; gap: 8px; }
	.ms-product .card-body .tag {
		padding: 5px 12px;
		background: rgba(14, 66, 179, 0.1);
		color: #0E42B3;
		font-size: 12px;
		border-radius: 20px;
		font-weight: 500;
	}

	/* 核心优势 */
	.au-advantages {
		background-color: #2a3a4d;
		color: #ffffff;
	}
	.au-advantages .section-title h2 { color: #ffffff; }
	.au-advantages .section-title p { color: rgba(255,255,255,0.8); }
	.au-advantages .advantages-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30px;
	}
	.au-advantages .advantage-card {
		background: rgba(255,255,255,0.06);
		padding: 40px 25px;
		border-radius: 8px;
		text-align: center;
		transition: all 0.3s ease;
		border-top: 3px solid transparent;
	}
	.au-advantages .advantage-card:hover {
		transform: translateY(-8px);
		background: rgba(255,255,255,0.1);
		box-shadow: 0 15px 30px rgba(64,169,255,0.15);
		border-top-color: #40A9FF;
	}
	.au-advantages .advantage-card svg {
		width: 55px;
		height: 55px;
		fill: #40A9FF;
		margin-bottom: 25px;
		transition: all 0.3s ease;
	}
	.au-advantages .advantage-card:hover svg { fill: #40A9FF; transform: scale(1.1); }
	.au-advantages .advantage-card h4 { font-size: 1.25rem; color: #ffffff; margin-bottom: 15px; font-weight: 600; }
	.au-advantages .advantage-card p { color: rgba(255,255,255,0.75); font-size: 0.95rem; line-height: 1.6; }

	/* 应用行业 */
	.ms-application {
		background: #edf2f7;
	}
	.ms-application .app-grid { 
		display: grid; 
		grid-template-columns: repeat(3, 1fr); 
		gap: 25px; 
	}
	.ms-application .app-item {
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 3px 10px rgba(0,0,0,0.05);
		transition: 0.3s;
	}
	.ms-application .app-item:hover { transform: translateY(-5px); }
	.ms-application .app-item img { width: 100%; height: 200px; object-fit: cover; }
	.ms-application .app-item .app-text { padding: 15px; text-align: center; font-size: 14px; font-weight: 500; color: #333; }

	/* 专利证书 */
	.ms-certificate-wrapper {
		background: #ffffff;
		padding:80px 0;
	}
	.ms-certificate .carousel {
		width: 100%;
		height: 380px;
		overflow: hidden;
	}
	.ms-certificate .goods-list {
		display: flex;
		justify-content: space-between;
		height: 370px;
		padding: 0 10px;
		gap: 15px;
	}
	.ms-certificate .goods-item {
		width: 24%;
		height: 370px;
		border-radius: 12px;
		overflow: hidden;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		cursor: pointer;
		box-shadow: 0 4px 12px rgba(0,0,0,0.08);
		background: #f9f9f9;
	}
	.ms-certificate .goods-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s ease;
	}
	.ms-certificate .goods-item:hover {
		transform: translateY(-6px);
		box-shadow: 0 12px 24px rgba(64,169,255,0.2);
	}
	.ms-certificate .goods-item:hover img {
		transform: scale(1.03);
	}
	/* 公司实力（核心实力） */
	.ms-strength { 
		text-align: center;
		background: #F8FAFC;
	}
	.ms-strength .strength-content {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 30px;
		margin-top: 50px;
	}
	.ms-strength .strength-item {
		padding: 40px 30px;
		background: #ffffff;
		border-radius: 12px;
		transition: all 0.3s ease;
		border-top: 3px solid transparent;
	}
	.ms-strength .strength-item:hover { 
		transform: translateY(-5px); 
		box-shadow: 0 8px 25px rgba(0,0,0,0.1); 
		border-top-color: #0E42B3;
	}
	.ms-strength .strength-item .number { 
		font-size: 48px; 
		font-weight: 900; 
		color: #0E42B3; 
		margin-bottom: 10px; 
	}
	.ms-strength .strength-item h3 { font-size: 20px; color: #2A3A4D; margin-bottom: 15px; }
	.ms-strength .strength-item p { color: #666666; line-height: 1.6; }

	/* 产品系列展示 */
	.ms-product-series {
		background: #F1F5F9;
	}
	.series-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 30px;
	}
	.series-card {
		background: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 4px 15px rgba(0,0,0,0.08);
		transition: all 0.3s ease;
		border-top: 3px solid transparent;
	}
	.series-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 12px 30px rgba(0,0,0,0.15);
		border-top-color: #0E42B3;
	}
	.series-card img {
		width: 100%;
		height: 180px;
		object-fit: cover;
	}
	.series-card-body {
		padding: 25px;
	}
	.series-card-body h3 {
		font-size: 20px;
		color: #2A3A4D;
		margin-bottom: 12px;
		font-weight: 600;
	}
	.series-card-body p {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		margin-bottom: 15px;
	}
	.series-card-body .learn-more {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		color: #0E42B3;
		text-decoration: none;
		font-weight: 500;
		font-size: 14px;
		transition: gap 0.3s ease;
	}
	.series-card-body .learn-more:hover {
		gap: 10px;
	}

	/* OEM/ODM 服务板块 */
	.ms-oem-section {
		background: #EEF2F8;
	}
	.ms-oem-cards {
		display: flex;
		justify-content: center;
		gap: 30px;
		flex-wrap: wrap;
		padding: 0;
	}
	.ms-oem-card {
		background: #ffffff;
		color: #1e1e1e;
		padding: 36px 32px 40px;
		width: 48%;
		max-width: 48%;
		border-radius: 12px;
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
		text-align: center;
		display: flex;
		flex-direction: column;
		border: 1px solid #eef2f6;
		transition: all 0.3s ease;
	}
	.ms-oem-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 12px 22px rgba(0, 0, 0, 0.08);
		border-top-color: #0E42B3;
	}
	.ms-oem-card__title {
		font-size: 30px;
		color: #2A3A4D;
		font-weight: 700;
		margin-bottom: 16px;
		position: relative;
		padding-bottom: 14px;
	}
	.ms-oem-card__title::after {
		content: "";
		display: block;
		width: 50px;
		height: 3px;
		background: #0E42B3;
		margin: 10px auto 0;
		border-radius: 2px;
	}
	.ms-oem-card__text {
		line-height: 1.75;
		font-size: 16px;
		color: #666666;
		margin-bottom: 28px;
		text-align: justify;
		flex: 1 0 auto;
		max-height:340px;
		overflow-y: auto;
		padding-right: 10px;
	}
	.ms-oem-card__text::-webkit-scrollbar { width: 5px; }
	.ms-oem-card__text::-webkit-scrollbar-track { background: #f0f3f7; border-radius: 10px; }
	.ms-oem-card__text::-webkit-scrollbar-thumb { background: #b9c4d0; border-radius: 10px; }

	.ms-oem-features {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 32px;
		flex-wrap: wrap;
		gap: 20px 12px;
	}
	.ms-oem-feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.ms-oem-feature-icon {
		font-size: 40px;
		color: #0E42B3;
		transition: 0.3s;
	}
	.ms-oem-feature-item:hover .ms-oem-feature-icon {
		color: #40A9FF;
		transform: scale(1.1);
	}
	.ms-oem-feature-item span {
		font-size: 15px;
		font-weight: 500;
		color: #2A3A4D;
		max-width: 110px;
		word-break: break-word;
		text-align: center;
		line-height: 1.4;
	}

	.ms-oem-steps {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 45px;
		margin-bottom: 32px;
		flex-wrap: wrap;
	}
	.ms-oem-step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.ms-oem-step-icon {
		font-size: 40px;
		color: #0E42B3;
		transition: 0.3s;
	}
	.ms-oem-step-item:hover .ms-oem-step-icon {
		color: #40A9FF;
		transform: scale(1.1);
	}

	.ms-oem-btn {
		background-color: #0E42B3;
		color: #ffffff;
		border: none;
		padding: 14px 32px;
		font-size: 17px;
		font-weight: 600;
		border-radius: 6px;
		cursor: pointer;
		text-decoration: none;
		display: inline-block;
		transition: all 0.3s ease;
		letter-spacing: 0.8px;
		align-self: center;
		width: fit-content;
		min-width: 150px;
	}
	.ms-oem-btn:hover {
		background-color: #0C3694;
		transform: translateY(-2px);
	}
	.ms-response-badge i {
		color: #0E42B3;
	}
	.ms-oem-form button {
		width: 100%;
		padding: 14px;
		background: #0E42B3;
		color: #fff;
		border: none;
		border-radius: 40px;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.25s;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-top: 8px;
		border: 1px solid #0E42B3;
	}
	.ms-oem-form button:hover {
		background: #0C3694;
		box-shadow: 0 6px 12px rgba(14,66,179,0.2);
	}

	/* 文章推荐 */
	.ms-articles {
		padding: 80px 0;
		background: #f8f9fa;
	}
	.ms-articles .container {
		max-width: 1280px;
	}
	.ms-articles .ms-title {
		text-align: center;
		margin-bottom: 40px;
	}
	.ms-articles-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
	.ms-article-card {
		background: #fff;
		border: 1px solid #e2e4e9;
		border-radius: 10px;
		overflow: hidden;
		transition: all 0.3s ease;
		text-decoration: none;
		color: inherit;
		display: block;
	}
	.ms-article-card:hover {
		border-color: #0E42B3;
		box-shadow: 0 12px 28px rgba(14, 66, 179, 0.18);
		transform: translateY(-4px);
	}
	.ms-article-card__img {
		height: 180px;
		background: linear-gradient(135deg, #e8ecf4 0%, #dce1ed 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #5e5e6e;
		font-size: 14px;
	}
	.ms-article-card__content {
		padding: 24px 20px;
	}
	.ms-article-card__title {
		font-size: 18px;
		font-weight: 600;
		color: #1a1e2b;
		margin-bottom: 12px;
		line-height: 1.4;
	}
	.ms-article-card__desc {
		font-size: 14px;
		color: #5e5e6e;
		line-height: 1.6;
		margin-bottom: 16px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.ms-article-card__meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
		color: #5e5e6e;
	}
	.ms-article-card__meta i{
	    margin-right:8px;
	}

	/* 联系我们 */
	.ms-custom {
		background: linear-gradient(135deg, #1a2a3a 0%, #2c3e50 100%);
		color: #ffffff;
		text-align: center;
		padding: 70px 0;
		position: relative;
		overflow: hidden;
	}
	.ms-custom::before {
		content: "";
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(64,169,255,0.1) 0%, transparent 60%);
		animation: rotate 20s linear infinite;
	}
	@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
	.ms-custom .container { position: relative; z-index: 1; }
	.ms-custom h2 { font-size: 32px; margin-bottom: 15px; font-weight: 700; }
	.ms-custom p { max-width: 700px; margin: 0 auto 30px; font-size: 16px; line-height: 1.7; opacity: 0.95; }
	.ms-custom .contact-buttons {
		display: flex;
		gap: 20px;
		justify-content: center;
		flex-wrap: wrap;
	}
	.ms-custom .contact-btn {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 16px 35px;
		border-radius: 8px;
		text-decoration: none;
		font-weight: bold;
		transition: all 0.3s ease;
		border: 2px solid transparent;
		cursor: pointer;
		font-size: 16px;
		background: none;
	}
	.ms-custom .btn-primary {
		background: #40A9FF;
		color: #1a2a3a;
		border-color: #40A9FF;
	}
	.ms-custom .btn-primary:hover {
		background: transparent;
		color: #40A9FF;
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(64,169,255,0.2);
	}
	.ms-custom .btn-secondary {
		background: transparent;
		color: #ffffff;
		border-color: #5d6d7e;
	}
	.ms-custom .btn-secondary:hover {
		background: #5d6d7e;
		border-color: #5d6d7e;
		transform: translateY(-2px);
	}

	/* 底部 */
	.ms-footer {
		background: #0f1923;
		color: #ffffff;
		padding: 50px 0 20px;
	}
	.ms-footer .footer-content {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 40px;
		margin-bottom: 40px;
	}
	.ms-footer .footer-item h3 { font-size: 20px; margin-bottom: 20px; color: #40A9FF; }
	.ms-footer .footer-item p, 
	.ms-footer .footer-item a {
		color: rgba(255,255,255,0.8);
		line-height: 1.8;
		font-size: 14px;
		text-decoration: none;
		transition: 0.3s;
	}
	.ms-footer .footer-item a:hover { color: #ffffff; padding-left: 5px; }
	.ms-footer .footer-bottom {
		text-align: center;
		padding-top: 20px;
		border-top: 1px solid rgba(255,255,255,0.1);
		color: rgba(255,255,255,0.6);
		font-size: 14px;
	}

    /* 产品网格 */
    .ms-linear-modules .product-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .ms-linear-modules .sm-recommend-cards-wrapper {
        position: relative;
        margin: 0 auto;
        width: calc(100% + 80px);
        max-width: 1360px;
        left: -40px;
        padding:10px 0;
    }
    .ms-linear-modules .sm-recommend-prev,
    .ms-linear-modules .sm-recommend-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        background: #fff;
        border: 1px solid #e2e4e9;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s;
        font-size: 18px;
        color: #666;
        outline: none;
    }
    .ms-linear-modules .sm-recommend-prev:hover,
    .ms-linear-modules .sm-recommend-next:hover {
        background: #0E42B3;
        border-color: #0E42B3;
        color: #fff;
        box-shadow: 0 4px 12px rgba(14, 66, 179, 0.3);
    }
    .ms-linear-modules .sm-recommend-prev:focus,
    .ms-linear-modules .sm-recommend-next:focus {
        outline: none;
    }
    .ms-linear-modules .sm-recommend-prev {
        left: 0;
    }
    .ms-linear-modules .sm-recommend-next {
        right: 0;
    }
    .ms-linear-modules .sm-recommend-cards-container {
        overflow: hidden;
        margin: 0 50px;
        padding:10px 0;
    }
    .ms-linear-modules .sm-recommend-dots {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 24px;
    }
    .ms-linear-modules .sm-recommend-dot {
        width: 10px;
        height: 10px;
        background: #d0d5dd;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s;
    }
    .ms-linear-modules .sm-recommend-dot.active {
        width: 24px;
        border-radius: 5px;
        background: #0E42B3;
    }
    .ms-linear-modules .sm-recommend-cards {
        display: flex;
        gap: 24px;
        position: relative;
        transition: transform 0.4s ease;
    }
    .ms-linear-modules .sm-recommend-card {
        flex: 0 0 calc((100% - 72px) / 4);
        background: #fff;
        border: 1px solid #e2e4e9;
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.3s;
        text-decoration: none;
        color: inherit;
        display: block;
        position: relative;
    }
    .ms-linear-modules .sm-recommend-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: transparent;
        border-radius: 10px 10px 0 0;
        transition: background 0.3s;
    }
    .ms-linear-modules .sm-recommend-card:hover::before {
        background: #0E42B3;
    }
    .ms-linear-modules .sm-recommend-card:hover {
        border-color: #0E42B3;
        box-shadow: 0 12px 28px rgba(14, 66, 179, 0.18);
        transform: translateY(-3px);
    }
    .ms-linear-modules .sm-recommend-card__img {
        position: relative;
        height: 160px;
        background: linear-gradient(135deg, #e8ecf4 0%, #dce1ed 100%);
        overflow: hidden;
    }
    .ms-linear-modules .sm-recommend-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .ms-linear-modules .sm-recommend-card:hover .sm-recommend-card__img img {
        transform: scale(1.05);
    }
    .ms-linear-modules .type-badge {
        position: absolute;
        bottom: 12px;
        right: 12px;
        background: rgba(255, 255, 255, 0.98);
        color: #0E42B3;
        font-size: 11px;
        font-weight: 500;
        padding: 3px 10px;
        border-radius: 30px;
        border: 1px solid #0E42B3;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }
    .ms-linear-modules .sm-recommend-card__content {
        padding: 18px 16px;
    }
    .ms-linear-modules .sm-recommend-card__title {
        font-size: 16px;
        font-weight: 600;
        color: #1a1e2b;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ms-linear-modules .sm-recommend-card__desc {
        font-size: 13px;
        color: #5e5e6e;
        line-height: 1.5;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ms-linear-modules .sm-recommend-card__link {
        font-size: 14px;
        color: #0E42B3;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: 0.2s;
    }
    .ms-linear-modules .sm-recommend-card:hover .sm-recommend-card__link {
        color: #FF6B35;
        gap: 8px;
    }
    

        /* ============================================================
           2. 关于我们页面布局 (About Page Layout)
           ============================================================ */
        .about-page {
            width: 100%;
            min-height: 100vh;
        }

        .about-page .about-page__container {
            width: 1280px;
            max-width: 100%;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* ============================================================
           4. 选项卡组件 (About Tabs)
           ============================================================ */
        .about-page .about-tabs {
            width: 100%;
            margin: 0 auto;
        }

        .about-page .about-tabs__nav {
            display: flex;
            gap: 8px;
            border-bottom: 2px solid #e8eaee;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .about-page .about-tabs__nav-btn {
            padding: 14px 28px;
            font-size: 15px;
            font-weight: 500;
            background: #fff;
            border: none;
            cursor: pointer;
            transition: 0.2s;
            color: #666;
            border-radius: 6px 6px 0 0;
        }

        .about-page .about-tabs__nav-btn--active {
            color: #d32f2f;
            border-bottom: 3px solid #d32f2f;
            font-weight: 600;
        }

        .about-page .about-tabs__nav-btn:hover:not(.about-tabs__nav-btn--active) {
            color: #B71C1C;
            background: #fff5f7;
        }

        .about-page .about-tabs__panel {
            display: none;
            animation: about-tabs-fade 0.3s ease;

        }

        .about-page .about-tabs__panel--active {
            display: block;
        }

        @keyframes about-tabs-fade {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .about-page .about-tabs__panel-title {
            font-size: 24px;
            color: #1e1e2a;
            margin-bottom: 24px;
            font-weight: 600;
        }

        /* ============================================================
           5. 公司简介区域 (Company Intro Section)
           ============================================================ */
        .about-page .intro-section {
            display: flex;
            gap: 40px;
            align-items: flex-start;
        }
.about-page .intro-section__text {
    flex: 1;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    /* Firefox：极低透明度蓝色滑块 + 极浅灰白轨道 */
    scrollbar-color: rgba(14, 66, 179, 0.35) #f8f8f8;
}

.about-page .intro-section__text::-webkit-scrollbar {
    width: 6px;
}

.about-page .intro-section__text::-webkit-scrollbar-track {
    background: #f8f8f8;
    border-radius: 10px;
}

.about-page .intro-section__text::-webkit-scrollbar-thumb {
    background: rgba(14, 66, 179, 0.35);
    border-radius: 10px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

/* hover轻微加深，保留交互提示，不突兀 */
.about-page .intro-section__text::-webkit-scrollbar-thumb:hover {
    background: rgba(14, 66, 179, 0.5);
}

.about-page .intro-section__text::-webkit-scrollbar-thumb:active {
    background: rgba(14, 66, 179, 0.65);
}

        .about-page .intro-section__text p {
            margin-bottom: 16px;
            word-break: break-word;
        }

        .about-page .intro-section__text strong {
            color:#d32f2f;
        }

        .about-page .intro-section__media {
            flex: 1;
            border-radius: 8px;
            overflow: hidden;
            min-width: 0;
        }

        /* ============================================================
           6. 媒体轮播组件 (Media Carousel)
           ============================================================ */
        .about-page .media-carousel {
            --carousel-slider-height: 320px;
            --carousel-thumb-height: 90px;
            --carousel-accent: #ff7a00;
            --carousel-transition: 0.3s;
            --carousel-arrow-color: #fff;

            width: 100%;
            height: calc(var(--carousel-slider-height) + var(--carousel-thumb-height));
            position: relative;
            overflow: hidden;
            background: #000;
        }

        /* 轮播视口 */
        .about-page .media-carousel__viewport {
            width: 100%;
            height: var(--carousel-slider-height);
            position: relative;
            overflow: hidden;
        }

        .about-page .media-carousel__track {
            height: 100%;
            display: flex;
            transition: var(--carousel-transition);
        }

        .about-page .media-carousel__slide {
            width: 100%;
            height: 100%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .about-page .media-carousel__slide img,
        .about-page .media-carousel__slide video {
            width: 100%;
            height: var(--carousel-slider-height);
            object-fit: cover;
        }

        /* 水印标识 */
        .about-page .media-carousel__badge {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 3;
        }

        .about-page .media-carousel__badge img {
            height: 24px;
        }

        /* 轮播箭头 */
        .about-page .media-carousel__arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-130%);
            width: 40px;
            height: 40px;
            z-index: 3;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.3);
            border: none;
            border-radius: 50%;
            display: grid;
            place-items: center;
            transition: opacity 0.2s, background 0.2s;
        }

        .about-page .media-carousel__arrow--prev {
            left: 10px;
        }

        .about-page .media-carousel__arrow--next {
            right: 10px;
        }

        .about-page .media-carousel__arrow svg {
            width: 20px;
            height: 20px;
            fill: var(--carousel-arrow-color);
        }

        .about-page .media-carousel__arrow--disabled {
            opacity: 0.3;
            cursor: not-allowed;
            background: transparent;
        }

        .about-page .media-carousel__arrow:not(.media-carousel__arrow--disabled):hover {
            background: rgba(0, 0, 0, 0.55);
        }

        /* 缩略图导航栏 */
        .about-page .media-carousel__thumbnail-bar {
            width: 100%;
            height: var(--carousel-thumb-height);
            background: #fff;
            padding: 10px 40px;
            position: relative;
            display: flex;
            align-items: center;
        }

        .about-page .media-carousel__thumbnail-scroll {
            width: 100%;
            overflow: hidden;
        }

        .about-page .media-carousel__thumbnail-list {
            display: flex;
            gap: 8px;
            list-style: none;
            transition: var(--carousel-transition);
            will-change: transform;
        }

        .about-page .media-carousel__thumbnail {
            width: 128px;
            height: 70px;
            flex-shrink: 0;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 6px;
            overflow: hidden;
            transition: border-color 0.2s;
        }

        .about-page .media-carousel__thumbnail--active {
            border-color: var(--carousel-accent);
        }

        .about-page .media-carousel__thumbnail-item {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-blend-mode: darken;
            background-color: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .about-page .media-carousel__thumbnail-label {
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            text-align: center;
            white-space: nowrap;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
            pointer-events: none;
        }

        /* 缩略图滚动箭头 */
        .about-page .media-carousel__thumbnail-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            cursor: pointer;
            z-index: 2;
            display: grid;
            place-items: center;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: all 0.2s;
        }

        .about-page .media-carousel__thumbnail-arrow--prev {
            left: 0;
        }

        .about-page .media-carousel__thumbnail-arrow--next {
            right: 0;
        }

        .about-page .media-carousel__thumbnail-arrow svg {
            width: 18px;
            height: 18px;
            fill: #333;
        }

        .about-page .media-carousel__thumbnail-arrow:hover {
            background: #0E42B3;
            box-shadow: 0 4px 12px rgba(14, 66, 179, 0.3);
        }

        .about-page .media-carousel__thumbnail-arrow:hover svg {
            fill: #fff;
        }

        .about-page .media-carousel__thumbnail-arrow--disabled {
            opacity: 0.3;
            pointer-events: none;
            background: rgba(255, 255, 255, 0.6);
        }

        /* ============================================================
           7. 视频播放器组件 (Video Player)
           ============================================================ */
        .about-page .video-player {
            --vp-accent: #ff7a00;
            --vp-control-height: 44px;
            position: relative;
            width: 100%;
            height: 100%;
        }

        .about-page .video-player__overlay-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 5;
            display: none;
            transition: opacity 0.2s;
        }

        .about-page .video-player__overlay-play--visible {
            display: flex;
        }

        .about-page .video-player__control-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: var(--vp-control-height);
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            padding: 0 16px;
            gap: 12px;
            z-index: 4;
            backdrop-filter: blur(2px);
        }

        .about-page .video-player__control-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            cursor: pointer;
            flex-shrink: 0;
        }

        /* 进度条 */
        .about-page .video-player__progress {
            flex: 1;
            height: 5px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            cursor: pointer;
            position: relative;
        }

        .about-page .video-player__progress-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0%;
            background: var(--vp-accent);
            border-radius: 3px;
            transition: width 0.05s linear;
            pointer-events: none;
        }

        .about-page .video-player__progress-thumb {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 14px;
            height: 14px;
            background: var(--vp-accent);
            border: 2px solid white;
            border-radius: 50%;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            z-index: 3;
            left: 0%;
            pointer-events: none;
        }

        /* 音量控制 */
        .about-page .video-player__volume {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .about-page .video-player__volume-slider {
            width: 70px;
            height: 4px;
            -webkit-appearance: none;
            background: transparent;
            border-radius: 2px;
            cursor: pointer;
        }

        .about-page .video-player__volume-slider::-webkit-slider-runnable-track {
            height: 4px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
        }

        .about-page .video-player__volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--vp-accent);
            border: 2px solid #fff;
            margin-top: -5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        .about-page .video-player__volume-slider::-moz-range-track {
            height: 4px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
        }

        .about-page .video-player__volume-slider::-moz-range-thumb {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--vp-accent);
            border: 2px solid #fff;
        }

        /* 图标切换 */
        .about-page .video-player__icon--hidden {
            display: none;
        }

        /* ============================================================
           8. 时间线组件 (Timeline)
           ============================================================ */
        .about-page .timeline {
            position: relative;
            max-width: 900px;
            margin: 0 auto;
            padding-left: 40px;
        }

        .about-page .timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #e8eaee;
        }

        .about-page .timeline__item {
            position: relative;
            margin-bottom: 30px;
            display: flex;
            align-items: flex-start;
            gap: 30px;
        }

        .about-page .timeline__year {
            min-width: 90px;
            height: 36px;
            line-height: 36px;
            background:#d32f2f;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            flex-shrink: 0;
        }

        .about-page .timeline__year::before {
            content: '';
            position: absolute;
            left: -44px;
            top: 10px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background:#d32f2f;
        }

        .about-page .timeline__content {
            flex: 1;
            padding: 12px 18px;
            background: #fafbfc;
            border-radius: 6px;
            border: 1px solid #eee;
        }

        /* ============================================================
           9. 资质卡片组件 (Qualification Grid)
           ============================================================ */
        .about-page .qualification-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .about-page .qualification-card {
            padding: 24px;
            background: #fff;
            border: 1px solid #e8eaee;
            border-radius: 8px;
            text-align: center;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .about-page .qualification-card:hover {
            border-color: #0E42B3;
            box-shadow: 0 4px 12px rgba(14, 66, 179, 0.1);
        }

        .about-page .qualification-card__image {
            width: 100%;
            height:370px;
            object-fit: contain;
            margin-bottom: 12px;
            border-radius: 4px;
        }

        .about-page .qualification-card__title {
            margin-bottom: 8px;
            color: #1e1e2a;
        }

        .about-page .qualification-card__desc {
            font-size: 13px;
            color: #666;
        }
        
        
        
        




/*========================== 桁架机械手专题样式 ===============================*/
/* ===================== 命名空间：truss-custom ===================== */
/* 所有样式均限定在此命名空间下，避免与其他页面样式冲突 */
/* 其他页面如需使用某个章节，请在外层包裹 <div class="truss-custom"> ... </div> */
.truss-custom {
    color: #1e1e2a;
    background: #fff;
    line-height: 1.5;
    font-size: 14px;
}

.truss-custom ul,
.truss-custom li {
    list-style: none;
}

.truss-custom a {
    text-decoration: none;
    color: inherit;
}

.truss-custom img {
    max-width: 100%;
    border: 0;
    display: block;
}

.truss-custom .container {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.truss-custom .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.truss-custom .section-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1e1e2a;
    margin-bottom: 15px;
}

.truss-custom .section-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #d32f2f;
    margin: 15px auto 0;
}

.truss-custom .section-header p {
    font-size: 16px;
    color: #5e5e6e;
    max-width: 700px;
    margin: 0 auto;
}

/* ===================== 轮播图：滑动效果 ===================== */
.truss-custom .hero-banner {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.truss-custom .hero-banner__wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.truss-custom .hero-banner__slide {
    min-width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

.truss-custom .hero-banner__slide::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path fill="rgba(255,255,255,0.03)" d="M950,50c0,0-400,100-400,450s400,450,400,450V50z"/></svg>') no-repeat center;
    background-size: cover;
}

.truss-custom .hero-banner__slide .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.truss-custom .hero-banner__content {
    color: #fff;
    max-width: 650px;
}

.truss-custom .hero-banner__tagline {
    font-size: 14px;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.truss-custom .hero-banner__title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.truss-custom .hero-banner__title span {
    color: #d32f2f;
}

.truss-custom .hero-banner__desc {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 35px;
}

.truss-custom .hero-banner__btns {
    display: flex;
    gap: 20px;
}

.truss-custom .hero-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: #d32f2f;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.truss-custom .hero-banner__btn:hover {
    background: #b71c1c;
}

.truss-custom .hero-banner__btn--outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.truss-custom .hero-banner__btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.truss-custom .hero-banner__visual {
    width: 550px;
    height: 450px;
}

.truss-custom .hero-banner__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===================== 圆形翻页按钮 ===================== */
.truss-custom .banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.truss-custom .banner-nav:hover {
    background: #d32f2f;
    border-color: #d32f2f;
    transform: translateY(-50%) scale(1.1);
}

.truss-custom .banner-nav.prev {
    left: 30px;
}

.truss-custom .banner-nav.next {
    right: 30px;
}

.truss-custom .banner-nav svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

/* ===================== 长条分页器 + 平滑进度动画 ===================== */
.truss-custom .hero-banner__pagination {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.truss-custom .hero-banner__pagination-bar {
    width: 40px;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.truss-custom .hero-banner__pagination-bar span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #d32f2f;
    transition: none;
}

.truss-custom .hero-banner__pagination-bar.active span {
    width: 100%;
    transition: width 5s linear;
}

/* ===================== 卡片样式 ===================== */
.truss-custom .solutions-section {
    padding: 80px 0;
    background: #f8f9fa;
}

/* 核心卡片样式 */
.truss-custom .solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.truss-custom .zt_solution__card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.truss-custom .zt_solution__card:hover {
    transform: translateY(-5px);
    border-color: #d32f2f;
}

.truss-custom .zt_solution__image {
    height: 220px;
    overflow: hidden;
    background: linear-gradient(135deg, #f9f9f9, #ececec);
    border-radius: 16px;
}

.truss-custom .zt_solution__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

/* ✅ 优化：型号标签 高级简约样式 */
.truss-custom .zt_solution__model {
    font-size: 13px;
    font-weight: 600;
    color: #d32f2f;
    /* 左侧小竖线点缀，精致不突兀 */
    padding-left: 8px;
    border-left: 3px solid #d32f2f;
    margin-bottom: 10px;
}

.truss-custom .zt_solution__content {
    padding:20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.truss-custom .zt_solution__name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1e1e2a;
}

/* 描述文字：显示3行 */
.truss-custom .zt_solution__desc {
    font-size: 15px;
    color: #5e5e6e;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truss-custom .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.truss-custom .pagination__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e8e8e8;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #5e5e6e;
}

.truss-custom .pagination__btn:hover {
    border-color: #d32f2f;
    color: #d32f2f;
}

.truss-custom .pagination__btn.is-active {
    background: #d32f2f;
    border-color: #d32f2f;
    color: #fff;
}

.truss-custom .pagination__btn--prev,
.truss-custom .pagination__btn--next {
    width: auto;
    padding: 0 15px;
    border-radius: 20px;
}

.truss-custom .pagination__dots {
    color: #5e5e6e;
    padding: 0 5px;
}

/* ===================== 定制流程 ===================== */
.truss-custom .process-section {
    padding: 80px 0;
    background: #f1f5f9;
}

.truss-custom .process-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    position: relative;
}

.truss-custom .process-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #e8e8e8;
    z-index: 1;
}

.truss-custom .process-step {
    flex: 1;
    min-width: 180px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.truss-custom .process-step__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: #f8f9fa;
    border: 2px solid #e8e8e8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #2c3e50;
    transition: all 0.3s ease;
}

.truss-custom .process-step:hover .process-step__icon {
    background: #d32f2f;
    border-color: #d32f2f;
    color: #fff;
    transform: translateY(-5px);
}

.truss-custom .process-step__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1e1e2a;
}

.truss-custom .process-step__desc {
    font-size: 14px;
    color: #5e5e6e;
    line-height: 1.6;
}

/* ===================== 应用场景 ===================== */
.truss-custom .applications-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.truss-custom .applications-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.truss-custom .application-card {
    background: #f8f9fa;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.truss-custom .application-card:hover {
    transform: translateY(-5px);
    border-color: #d32f2f;
    background: #fff;
}

.truss-custom .application-card__image {
    height: 180px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 48px;
    transition: all 0.3s ease;
    overflow:hidden;
}

.truss-custom .application-card__content {
    padding: 24px;
}

.truss-custom .application-card__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1e1e2a;
}

.truss-custom .application-card__desc {
    font-size: 14px;
    color: #5e5e6e;
    line-height: 1.6;
}

/* ===================== 咨询模块 ===================== */
.truss-custom .cta-section {
    padding: 80px 0;
    background: #ffffff;
}

.truss-custom .cta-inner {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border-radius: 20px;
    padding: 70px 40px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.truss-custom .cta-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path fill="rgba(255,255,255,0.02)" d="M0,500c0,0,200-200,500-200s500,200,500,200-200,200-500,200S0,500,0,500z"/></svg>') no-repeat center;
    background-size: cover;
}

.truss-custom .cta-content {
    position: relative;
    z-index: 1;
}

.truss-custom .cta-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 15px;
}

.truss-custom .cta-desc {
    font-size: 18px;
    margin-bottom: 40px;
    opacity: 0.9;
}

.truss-custom .cta-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.truss-custom .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 45px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.truss-custom .cta-btn--primary {
    background: #d32f2f;
    color: #fff;
}

.truss-custom .cta-btn--primary:hover {
    background: #b71c1c;
}

.truss-custom .cta-btn--secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.truss-custom .cta-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}        

.tab-note{
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #ef1f1f;
    margin-top:40px;
}
.tab-note i{
    color: var(--primary);
    margin-right:5px;
}
.tab-note .note-text{
    display: inline;
    color: inherit;    
}

/*================ 多轴线性运动平台 首页展示 ===================*/
.Assemble-section {
    padding-bottom:50px;
    background: #f7f9fc;    
}

.Assemble__header {
    display: flex;
    align-items: flex-start;          /* 顶部对齐，避免多行导航时垂直居中错位 */
    justify-content: space-between;
    margin-bottom:20px;
    gap: 30px;
}

.Assemble__title {
    font-size: 24px;
    font-weight: 700;
    color: #383434;
    border-left: 4px solid #d32f2f;
    padding-left: 14px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.Assemble__subtitle {
    font-size: 15px;
    font-weight: 400;
    color: #888;
    margin-left: 8px;
}

/* 导航容器：自动换行，无需滚动 */
.Assemble__nav-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.Assemble__nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;                  /* 允许换行 */
    justify-content: flex-end;
}

.Assemble__nav-btn {
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 4px;
    transition: color 0.3s, background 0.3s, box-shadow 0.3s;
    white-space: nowrap;
}

.Assemble__nav-btn:hover {
    color: #d32f2f;
    background: rgba(211, 47, 47, 0.05);
}

.Assemble__nav-btn.active {
    color: #d32f2f;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 0 #d32f2f;
}

.Assemble-section .swiper-horizontal{
    height:534px !important;
}

.Assemble-swiper {
    width: 100%;
    cursor: grab;
}

.Assemble-swiper:active {
    cursor: grabbing;
}

.slide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
}

.Assemble-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e8e8e8;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.Assemble-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.Assemble-card.empty {
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
    border-color: transparent;
    background: transparent;
}

.Assemble-image-box {
    background: #f8f9fa;
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
    height:200px;
}

.Assemble-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
    display: block;
}

.Assemble-card:hover .Assemble-image {
    transform: scale(1.05);
}

.Assemble-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    background: #fff;
    text-align: center;
    letter-spacing: 0.3px;
    border-top: 1px solid #f0f0f0;
    transition: color 0.3s, background 0.3s;
}

.Assemble-card:hover .Assemble-name {
    color: #d32f2f;
    background: #fefafa;
}

.Assemble-pagination {
    margin-top:40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Assemble-pagination .swiper-pagination-bullet {
    width: 22px;
    height: 3px;
    border-radius: 1.5px;
    background: #c8c8c8;
    opacity: 1;
    margin: 0 5px;
    transition: all 0.35s;
    cursor: pointer;
}

.Assemble-pagination .swiper-pagination-bullet-active {
    background: #d32f2f;
    width: 38px;
}




.diy-section__header{
    text-align: center;
    margin-bottom: 0;
    position: relative;
}
.diy-section__title{
    font-size: 32px;
    font-weight: 700;
    color: #383434;
    margin: 0 0 12px;
}
.diy-section__title::after{
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #d32f2f; 
}
.diy-section__desc{
    font-size: 15px;
    color: #484747;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 20px;
    padding-top: 12px;
}
.diy-section__desc em{
    font-weight:600;
    color: #d32f2f;    
}

/* ========== ContactPage 命名空间 ========== */
.ContactPage { width: 100%; min-height: 100vh; background: #fefefe; }

/* 顶部横幅 */
.ContactPage-banner {
    height: 260px;
    background:#f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid #f0e8e8;
    margin-bottom: 48px;
    position: relative;
    overflow: hidden;
}
.ContactPage-banner::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -80px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(211, 47, 47, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.ContactPage-banner::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(211, 47, 47, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.ContactPage-bannerContent { width: 100%; position: relative; z-index: 1; }
.ContactPage-pageTitle { font-size: 38px; font-weight: 700; color: #1e1e2a; margin-bottom: 12px; letter-spacing: 0.02em; }
.ContactPage-pageTitle span { color: #d32f2f; }
.ContactPage-pageSubtitle { font-size: 16px; color: #777; letter-spacing: 0.04em; }

/* 通用容器 */
.ContactPage-container { width: 1280px; max-width: 100%;     margin: 25px auto 0; padding: 0 20px; }

/* 两栏布局 */
.ContactPage-contactContainer { display: flex; gap: 48px; margin-bottom: 48px; }
.ContactPage-contactInfo { flex: 1; min-width: 0; }
.ContactPage-contactForm { flex: 1; min-width: 0; }

/* 区域标题 */
.ContactPage-sectionTitle {
    font-size: 24px;
    color: #1e1e2a;
    margin-bottom: 28px;
    font-weight: 600;
    position: relative;
    padding-bottom: 14px;
    letter-spacing: 0.01em;
}
.ContactPage-sectionTitle::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 56px;
    height: 3px;
    background: #d32f2f;
}

/* 联系方式卡片 */
.ContactPage-contactDetail {
    background: #fefefe;
    border-radius: 10px;
    padding: 32px 28px;
    border: 1px solid #f0e8e8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03), 0 2px 12px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s;
}
.ContactPage-contactDetail:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 4px 20px rgba(211, 47, 47, 0.04); }
.ContactPage-contactItemList { display: flex; flex-direction: column; gap: 22px; }
.ContactPage-contactItem { display: flex; align-items: center; gap: 16px; }
.ContactPage-contactIcon {
    width: 42px;
    height: 42px;
    background: #d32f2f;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.18);
}
.ContactPage-contactContent { flex: 1; }
.ContactPage-contactLabel { font-size: 15px; font-weight: 600; color: #1e1e2a; margin-bottom: 8px; }
.ContactPage-contactValue { font-size: 14px; color: #555; line-height: 1.7; }
.ContactPage-contactValue p { margin: 0 0 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ContactPage-contactValue strong { font-weight: 600; color: #333; font-size: 13px; min-width: 42px; }

/* 可复制文本 */
.ContactPage-copyable {
    color: #d32f2f;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    user-select: all;
}
.ContactPage-copyable:hover { color: #b71c1c; text-decoration: underline; text-underline-offset: 3px; }
.ContactPage-copyable.is-copied-flash { animation: ContactPage-copyFlash 0.6s ease; }
@keyframes ContactPage-copyFlash {
    0% { background: rgba(211, 47, 47, 0.12); border-radius: 3px; }
    100% { background: transparent; }
}
.ContactPage-contactDivider { display: inline-block; margin: 0 6px; color: #ccc; user-select: none; }

/* 官方店铺 Logo (采用 SVG 内嵌数据，无外部图片依赖) */
.ContactPage-storeLogos { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 4px; }
.ContactPage-storeLogoLink {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}
.ContactPage-storeLogoLink:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
.ContactPage-storeLogoLink img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    background: #ffffff;
    border: 1px solid #f0e0e0;
    transition: border-color 0.25s;
}
.ContactPage-storeLogoLink:hover img { border-color: #d32f2f; box-shadow: 0 4px 12px rgba(211, 47, 47, 0.15); }

/* 气泡提示 (位于图标下方，纯CSS) */
.ContactPage-storeLogoLink::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: #2c2c2c;
    color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.ContactPage-storeLogoLink::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    border: 6px solid transparent;
    border-bottom-color: #2c2c2c;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 20;
}
.ContactPage-storeLogoLink:hover::after,
.ContactPage-storeLogoLink:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 地图区域 */
.ContactPage-mapSection { margin-bottom: 64px; }
.ContactPage-mapWrapper {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #f0e8e8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03), 0 2px 12px rgba(0, 0, 0, 0.02);
    background: #faf5f5;
    min-height: 360px;
}
.ContactPage-mapPlaceholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf5f5;
    z-index: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: 10px;
}
.ContactPage-mapPlaceholder.is-hidden { opacity: 0; }
.ContactPage-mapPlaceholderInner { text-align: center; color: #888; }
.ContactPage-mapPlaceholderInner i { font-size: 38px; color: #d32f2f; margin-bottom: 10px; opacity: 0.6; animation: mapPulse 2s infinite; }
@keyframes mapPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.08); opacity: 0.9; }
}
.ContactPage-mapWrapper iframe {
    width: 100%;
    height: 460px;
    border: none;
    display: block;
    border-radius: 10px;
    position: relative;
    z-index: 0;
}

/* 表单样式 */
.ContactPage-formGroup { margin-bottom: 20px; }
.ContactPage-formRow { display: flex; gap: 20px; margin-bottom: 20px; }
.ContactPage-formRow .ContactPage-formGroup { flex: 1; margin-bottom: 0; }
.ContactPage-formLabel { display: block; font-size: 14px; font-weight: 500; color: #1e1e2a; margin-bottom: 8px; }
.ContactPage-formLabel .ContactPage-required { color: #d32f2f; margin-left: 3px; }
.ContactPage-formInput, .ContactPage-formTextarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #e8e4e4;
    border-radius: 8px;
    font-size: 14px;
    color: #1e1e2a;
    transition: all 0.25s;
    background: #fefefe;
}
.ContactPage-formInput:focus, .ContactPage-formTextarea:focus {
    border-color: #d32f2f;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.07);
    background: #fff;
}
.ContactPage-formTextarea { resize: vertical; min-height: 130px; line-height: 1.7; }
.ContactPage-formSubmit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: #d32f2f;
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 2px 6px rgba(211, 47, 47, 0.2);
}
.ContactPage-formSubmit:hover { background: #b71c1c; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(211, 47, 47, 0.28); }
.ContactPage-formSubmit:active { transform: translateY(0); }
.ContactPage-formSubmit i { font-size: 14px; transition: transform 0.25s; }
.ContactPage-formSubmit:hover i { transform: translateX(3px); }

/* Toast 提示 */
.ContactPage-toast {
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%) translateY(24px);
    background: #333;
    color: #fff;
    padding: 10px 24px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    white-space: nowrap;
}
.ContactPage-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }



/* ====================== 产品选型模块 ====================== */
.motionbox-products {
    padding: 80px 0;
    background: #fdfdfd;
}
.motionbox-products__tabs-content {
    border-radius: 8px;
    overflow: hidden;
}
.motionbox-products__tab-panel {
    display: block;
    animation: motionboxFadeIn 0.5s ease;
}
@keyframes motionboxFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.motionbox-products__carousel-outer {
    position: relative;
    width: 100%;
}
.motionbox-products__carousel {
    position: relative;
    width: 100%;
    padding: 0 0 50px;
    box-sizing: border-box;
    margin: 0 -30px;
    overflow: visible;
}
.motionbox-products__carousel-viewport {
    overflow: hidden;
    width: 100%;
}
.motionbox-products__carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}
.motionbox-products__carousel-slide {
    flex: 0 0 calc(33.333% - 20px);
    margin: 0 10px;
    box-sizing: border-box;
}

/* 产品卡片 */
.motionbox-products__card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e0e6ed;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.motionbox-products__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(211, 47, 47, 0.12);
}
.motionbox-products__card-header {
    width: 100%;
    height: 240px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.motionbox-products__card-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.motionbox-products__card-title-box {
    text-align: center;
    padding: 20px 20px 5px;
}
.motionbox-products__card-title {
    font-size: 20px;
    font-weight: 900;
    color: #383434;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.motionbox-products__param-list {
    list-style: none;
    padding: 5px 20px 10px;
    flex: 1;
}
.motionbox-products__param-list li {
    padding: 10px 12px;
    font-size: 14px;
    color: #2c3e50;
    border-bottom: 1px dashed #e0e6ed;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 4px;
}
.motionbox-products__param-list li:hover {
    background-color: #f8f9fa;
}
.motionbox-products__param-icon {
    margin-right: 10px;
    flex-shrink: 0;
    color: #d32f2f;
    font-size: 10px;
}
.motionbox-products__card-buttons {
    display: flex;
    gap: 10px;
    padding: 0 20px 20px;
    margin-top: auto;
}
.motionbox-btn {
    flex: 1;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.motionbox-btn--primary {
    background: #383434;
    color: #ffffff;
    border: 2px solid #383434;
}
.motionbox-btn--primary:hover {
    background: #d32f2f;
    color: #ffffff;
    border-color: #d32f2f;
}
.motionbox-btn--secondary {
    background: #f5f7fa;
    color: #383434;
    border: 2px solid #e0e6ed;
}
.motionbox-btn--secondary:hover {
    background: #e0e6ed;
}

/* 轮播箭头 */
.motionbox-products__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgb(199 192 192 / 12%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #968f8f;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    border: 2px solid #968f8f;
    z-index: 10;
    outline: none;
}
.motionbox-products__arrow:hover {
    background: #d32f2f;
    color: #ffffff;
}
.motionbox-products__arrow--prev {
    left: -22px;
}
.motionbox-products__arrow--next {
    right: -22px;
}
.motionbox-products__pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.motionbox-products__pagination-dot {
    width: 22px;
    height: 6px;
    border-radius: 3px;
    background: #ccc;
    cursor: pointer;
}
.motionbox-products__pagination-dot.active {
    background: #d32f2f;
    width: 30px;
}
.motionbox-products__pagination-dot:hover:not(.active) {
    background: #b0b0b0;
}
.motionbox-products__params-data {
    display: none;
}

/* 弹窗样式 */
.motionbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.motionbox-modal.active {
    opacity: 1;
    visibility: visible;
}
.motionbox-modal__wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
}
.motionbox-modal__container {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}
.motionbox-modal.active .motionbox-modal__container {
    transform: scale(1);
}
.motionbox-modal__header {
    padding: 20px 24px;
    border-bottom: 1px solid #e0e6ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.motionbox-modal__header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #383434;
}
.motionbox-modal__close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #7f8c8d;
    transition: color 0.2s;
    line-height: 1;
    outline: none;
}
.motionbox-modal__close:hover {
    color: #d32f2f;
}
.motionbox-modal__body {
    flex: 1;
    display: flex;
    padding: 0;
    overflow: hidden;
}
.motionbox-modal__image-wrapper {
    width: 40%;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
.motionbox-modal__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 350px;
    transition: all 0.3s ease;
}
.motionbox-modal__image-wrapper:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(211, 47, 47, 0.2));
}
.motionbox-modal__content {
    width: 60%;
    padding: 15px 15px 15px 0;
    overflow-y: auto;
    background: #fafafa;
}
.motionbox-modal__nav {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d32f2f;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    outline: none;
    border: 1px solid rgba(211, 47, 47, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
}
.motionbox-modal.active .motionbox-modal__nav {
    opacity: 1;
    visibility: visible;
}
.motionbox-modal__nav:hover {
    background: #d32f2f;
    color: #fff;
    border-color: #d32f2f;
}
.motionbox-modal__nav--prev {
    left: -82px;
}
.motionbox-modal__nav--next {
    right: -82px;
}
.motionbox-modal__params-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background: #fff;
}
.motionbox-modal__params-table th,
.motionbox-modal__params-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #ecf0f1;
    text-align: left;
}
.motionbox-modal__params-table th {
    background: #fff;
    font-weight: 700;
    color: #383434;
    width: 35%;
}
.motionbox-modal__params-table tr:last-child td,
.motionbox-modal__params-table tr:last-child th {
    border-bottom: none;
}

/* ====================== 服务与支持 ====================== */
.motionbox-service {
    padding: 80px 0;
    background: #f9f9f9;
}
.motionbox-service__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}
.motionbox-service__item {
    text-align: center;
    padding: 40px 30px;
    border-radius: 12px;
    border: 2px solid #e0e6ed;
    transition: all 0.3s ease;
    background: #fff;
}
.motionbox-service__item:hover {
    border-color: #d32f2f;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.motionbox-service__icon {
    font-size: 48px;
    color: #d32f2f;
    margin-bottom: 12px;
}
.motionbox-service__title {
    font-size: 22px;
    font-weight: 700;
    color: #383434;
    margin-bottom: 15px;
}
.motionbox-service__desc {
    font-size: 15px;
    color: #7f8c8d;
    line-height: 1.7;
}

/* ====================== 核心优势 - 深色冲击版 ====================== */
.motionbox-advantages {
    background-color: #222528;
    background-image: radial-gradient(circle, #3a3d40 1px, transparent 1px);
    background-size: 24px 24px;
    padding: 80px 0;
    position: relative;
    color: #ffffff;
}
.motionbox-advantages .diy-section__title {
    color: #ffffff;
}
.motionbox-advantages .diy-section__desc {
    color: rgba(255, 255, 255, 0.8);
}
.motionbox-advantages__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 10px 0;
}
.motionbox-advantages__card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(4px);
    padding: 50px 25px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    position: relative;
}
.motionbox-advantages__card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 30px rgba(211, 47, 47, 0.2);
    border-top-color: #d32f2f;
}
.motionbox-advantages__card svg {
    width: 70px;
    height: 70px;
    fill: #d32f2f;
    margin-bottom: 18px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}
.motionbox-advantages__card:hover svg {
    fill: #ef5350;
    transform: scale(1.1);
}
.motionbox-advantages__card h4 {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 12px;
    font-weight: 700;
}
.motionbox-advantages__card p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* ====================== 应用行业 ====================== */
.motionbox-application {
    background: #edf2f7;
}
.motionbox-application__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.motionbox-application__item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
}
.motionbox-application__item:hover {
    transform: translateY(-5px);
}
.motionbox-application__item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.motionbox-application__item-text {
    padding: 15px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* ====================== 专利证书 ====================== */
.motionbox-certificate {
    background: #ffffff;
    padding: 80px 0;
}
.motionbox-certificate__carousel {
    width: 100%;
    height: 380px;
    overflow: hidden;
}
.motionbox-certificate__list {
    display: flex;
    justify-content: space-between;
    height: 370px;
    padding: 0 10px;
    gap: 15px;
}
.motionbox-certificate__item {
    width: 24%;
    height: 370px;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background: #f9f9f9;
}
.motionbox-certificate__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.motionbox-certificate__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(211, 47, 47, 0.2);
}
.motionbox-certificate__item:hover img {
    transform: scale(1.03);
}

/* ====================== 公司实力（核心实力） ====================== */
.motionbox-strength {
    text-align: center;
    background: #F8FAFC;
}
.motionbox-strength__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}
.motionbox-strength__item {
    padding: 40px 30px;
    background: #ffffff;
    border-radius: 12px;
    transition: all 0.3s ease;
    border-top: 3px solid transparent;
}
.motionbox-strength__item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-top-color: #d32f2f;
}
.motionbox-strength__item .number {
    font-size: 48px;
    font-weight: 900;
    color: #d32f2f;
    margin-bottom: 10px;
}
.motionbox-strength__item h3 {
    font-size: 20px;
    color: #383434;
    margin-bottom: 15px;
}
.motionbox-strength__item p {
    color: #666666;
    line-height: 1.6;
}

/* ====================== 产品系列展示 ====================== */
.motionbox-product-series {
    background: #F1F5F9;
}
.motionbox-product-series__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.motionbox-product-series__card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-top: 3px solid transparent;
}
.motionbox-product-series__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    border-top-color: #d32f2f;
}
.motionbox-product-series__card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.motionbox-product-series__card-body {
    padding: 25px;
}
.motionbox-product-series__card-body h3 {
    font-size: 20px;
    color: #383434;
    margin-bottom: 12px;
    font-weight: 600;
}
.motionbox-product-series__card-body p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}
.motionbox-product-series__card-body .learn-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #d32f2f;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: gap 0.3s ease;
}
.motionbox-product-series__card-body .learn-more:hover {
    gap: 10px;
}

/* ====================== OEM/ODM 服务板块 ====================== */
.motionbox-oem {
    background: #EEF2F8;
}
.motionbox-oem__cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 0;
}
.motionbox-oem__card {
    background: #ffffff;
    color: #1e1e1e;
    padding: 36px 32px 40px;
    width: 48%;
    max-width: 48%;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
    text-align: center;
    display: flex;
    flex-direction: column;
    border: 1px solid #eef2f6;
    transition: all 0.3s ease;
}
.motionbox-oem__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.08);
    border-top-color: #d32f2f;
}
.motionbox-oem__card-title {
    font-size: 30px;
    color: #383434;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 14px;
}
.motionbox-oem__card-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #d32f2f;
    margin: 10px auto 0;
    border-radius: 2px;
}
.motionbox-oem__card-text {
    line-height: 1.75;
    font-size: 16px;
    color: #666666;
    margin-bottom: 28px;
    text-align: justify;
    flex: 1 0 auto;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 10px;
}
.motionbox-oem__card-text::-webkit-scrollbar {
    width: 5px;
}
.motionbox-oem__card-text::-webkit-scrollbar-track {
    background: #f0f3f7;
    border-radius: 10px;
}
.motionbox-oem__card-text::-webkit-scrollbar-thumb {
    background: #b9c4d0;
    border-radius: 10px;
}
.motionbox-oem__features {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 20px 12px;
}
.motionbox-oem__feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.motionbox-oem__feature-icon {
    font-size: 40px;
    color: #d32f2f;
    transition: 0.3s;
}
.motionbox-oem__feature-item:hover .motionbox-oem__feature-icon {
    color: #b71c1c;
    transform: scale(1.1);
}
.motionbox-oem__feature-item span {
    font-size: 15px;
    font-weight: 500;
    color: #383434;
    max-width: 110px;
    word-break: break-word;
    text-align: center;
    line-height: 1.4;
}
.motionbox-oem__steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.motionbox-oem__step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.motionbox-oem__step-icon {
    font-size: 40px;
    color: #d32f2f;
    transition: 0.3s;
}
.motionbox-oem__step-item:hover .motionbox-oem__step-icon {
    color: #b71c1c;
    transform: scale(1.1);
}
.motionbox-oem__btn {
    background-color: #383434;
    color: #ffffff;
    border: none;
    padding: 14px 32px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    letter-spacing: 0.8px;
    align-self: center;
    width: fit-content;
    min-width: 150px;
}
.motionbox-oem__btn:hover {
    background-color: #d32f2f;
    transform: translateY(-2px);
}
.motionbox-oem__response-badge i {
    color: #d32f2f;
}
.motionbox-oem__form button {
    width: 100%;
    padding: 14px;
    background: #383434;
    color: #fff;
    border: none;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    border: 1px solid #383434;
}
.motionbox-oem__form button:hover {
    background: #d32f2f;
    border-color: #d32f2f;
    box-shadow: 0 6px 12px rgba(211, 47, 47, 0.25);
}


/*列表分页通用*/
.list-pagination {
  margin-top:30px;
}
.list-pagination .pagination {
  display: flex;
  flex-wrap: wrap; /* 小屏幕自动换行 */
  justify-content: center;
  align-items: center;
  gap: 8px; /* 优化间距，更紧凑美观 */
  padding: 0;
  margin: 0;
  list-style: none; /* 清除默认列表样式 */
}

/* 统一按钮基础样式 */
.list-pagination a,
.list-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  background: #fff;
  border: 1px solid #dee2e6;
  color: #2C3E50;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}

/* 悬停效果 */
.list-pagination a:hover:not(.disabled) {
  background: #d32f2f;
  border-color: #d32f2f;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,102,204,0.2);
}

/* 当前页样式（修复优先级问题，强制生效） */
.list-pagination .current a {
  background: #d32f2f;
  border-color: #d32f2f;
  color: #fff;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* 禁用状态样式（不可点击、灰色） */
.list-pagination a.disabled {
  background: #f8f9fa;
  border-color: #e9ecef;
  color: #adb5bd;
  cursor: not-allowed;
  transform: none;
}
.list-pagination a.disabled:hover {
  background: #f8f9fa;
  border-color: #e9ecef;
  color: #adb5bd;
  transform: none;
  box-shadow: none;
}






























/* ========== 海报：zt_banner_gantry ========== */
.zt_banner_gantry {
    width: 100%;
    max-width: 1920px;
    height: 500px;
    margin: 0 auto;
    background-color: #0a0f16;
    /* ★ 背景图URL占位 —— 请将图片地址填入 url('') 内 */
    background-image: url("/static/images/0b45de9432fd6aaf5f161f2e526d8089.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

.zt_banner_gantry .container {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* 更新的 tagline 样式 —— 全大写英文，固定宽度，更厚重的字重 */
.zt_banner_gantry .content .tagline {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 3px;
    line-height: 1.5;
    font-weight: 700;
    position: relative;
    display: inline-block;
    width: 620px;
    max-width: 100%;
    margin-bottom: 0;
    margin-bottom:12px;
    display:block;
}

/* 保留红色装饰竖线 */
.zt_banner_gantry .content .tagline::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: #e53935;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 1px;
}

.zt_banner_gantry .content .main-title {
    color: #FFFFFF;
    letter-spacing: -0.5px;
    font-size: 52px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(211, 47, 47, 0.1);
}

.zt_banner_gantry .content .highlight {
    color: #e53935;
    display: block;
    font-weight: 800;
    margin-top:5px;
}

.zt_banner_gantry .content .description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
    max-width: 620px;
    margin: 20px 0 36px 0;
    font-weight: 400;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.zt_banner_gantry .button-group {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.zt_banner_gantry .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: #e53935;
    border: 2px solid #e53935;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.zt_banner_gantry .btn-primary:hover {
    background: #b71c1c;
    border-color: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(229, 57, 53, 0.4);
}

.zt_banner_gantry .btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 40px;
	background: transparent; /* 保持透明背景 */
	border: 2px solid #f0f3f8;
	color: #f0f3f8;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.35s ease;
	text-decoration: none;
	border-radius: 4px;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

/* 添加伪元素作为渐变背景层 */
.zt_banner_gantry .btn-secondary::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #4c535d, #5d666f, #7c828a);
	opacity: 0; /* 默认隐藏渐变 */
	transition: opacity 0.5s ease; /* 平滑过渡透明度 */
	z-index: -1;
	border-radius: 2px; /* 匹配按钮圆角 */
}

.zt_banner_gantry .btn-secondary:hover {
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
	border-color: rgba(240, 243, 248, 0.8); /* 可选：悬停时边框变浅 */
}

/* 悬停时显示渐变背景 */
.zt_banner_gantry .btn-secondary:hover::before {
	opacity: 1;
}

.zt_banner_gantry .icon-arrow,
.zt_banner_gantry .icon-pdf {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s;
}

.zt_banner_gantry .btn-primary:hover .icon-arrow {
    transform: translateX(5px);
}

.zt_banner_gantry .btn-secondary:hover .icon-pdf {
    transform: translateY(2px);
}

.zt_banner_gantry .content {
    animation: fadeSlideUp 0.55s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
    padding: 40px 0;
    width:770px;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.zt_banner_gantry .btn-primary:focus-visible,
.zt_banner_gantry .btn-secondary:focus-visible {
    outline: 3px solid #ff8a80;
    outline-offset: 3px;
    border-radius: 4px;
}



/* ========== 新增Banner样式：zt_banner_controlbox ========== */
.zt_banner_controlbox_white {
    width: 100%;
    max-width: 1920px;
    height: 500px;
    margin: 0 auto;
    background-color: #ffffff; 
    background-image: url("/static/images/69f581a2578bc77e97bdf47d4c660959.jpg"); 
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    display: flex;
    align-items: center;
    position: relative;
}

/* 左侧渐变遮罩 */
.zt_banner_controlbox_white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.zt_banner_controlbox_white .container {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

.zt_banner_controlbox_white .content {
    animation: fadeSlideUp 0.55s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
    padding: 40px 0;
    width: 720px;
}

/* ========== 文字样式 ========== */
.zt_banner_controlbox_white .content .tagline {
    font-size: 16px;
    color: #555555; 
    letter-spacing: 3px;
    line-height: 1.5;
    font-weight: 700;
    position: relative;
    display: block;
    width: 620px;
    max-width: 100%;
    margin-bottom: 12px;
}

.zt_banner_controlbox_white .content .tagline::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: #e53935;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 1px;
}

.zt_banner_controlbox_white .content .main-title {
    color: #111111; 
    letter-spacing: -0.5px;
    font-size: 52px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.zt_banner_controlbox_white .content .highlight {
    color: #e53935;
    display: block;
    font-weight: 800;
    margin-top: 5px;
}

.zt_banner_controlbox_white .content .description {
    font-size: 18px;
    color: #444444; 
    line-height: 1.6;
    max-width: 650px;
    margin: 20px 0 36px 0;
    font-weight: 400;
}

/* ========== 按钮样式 ========== */
.zt_banner_controlbox_white .button-group {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.zt_banner_controlbox_white .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: #e53935;
    border: 2px solid #e53935;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(229, 57, 53, 0.15);
}

.zt_banner_controlbox_white .btn-primary:hover {
    background: #b71c1c;
    border-color: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(229, 57, 53, 0.3);
}

.zt_banner_controlbox_white .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: transparent;
    border: 2px solid #222222;
    color: #222222;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.35s ease;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.zt_banner_controlbox_white .btn-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #222222;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    border-radius: 2px;
}

.zt_banner_controlbox_white .btn-secondary:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
    border-color: #222222;
}

.zt_banner_controlbox_white .btn-secondary:hover::before {
    opacity: 1;
}

/* ========== 图标及动画 ========== */
.zt_banner_controlbox_white .icon-arrow,
.zt_banner_controlbox_white .icon-pdf {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s;
}

.zt_banner_controlbox_white .btn-primary:hover .icon-arrow {
    transform: translateX(5px);
}

.zt_banner_controlbox_white .btn-secondary:hover .icon-pdf {
    transform: translateY(2px);
}

.zt_banner_controlbox_white .btn-primary:focus-visible,
.zt_banner_controlbox_white .btn-secondary:focus-visible {
    outline: 3px solid #ff8a80;
    outline-offset: 3px;
    border-radius: 4px;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 海报：运动控制箱zt_banner_motion_box ========== */
.zt_banner_motion_box {
    width: 100%;
    max-width: 1920px;
    height: 500px;
    margin: 0 auto;
    background-color: #f5f7fa;
    background-image: url(/static/images/banner_box.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

/* 背景暗层（提升文字可读性） */
.zt_banner_motion_box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(10 15 22 / 7%);
    z-index: 1;
}

.zt_banner_motion_box .container {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* 英文标签样式 */
.zt_banner_motion_box .content .tagline {
    font-size: 16px;
    color: rgb(6 6 6 / 75%);
    letter-spacing: 3px;
    line-height: 1.5;
    font-weight: 700;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    width: 620px;
    max-width: 100%;
    margin-bottom: 12px;
}

/* 红色装饰竖线 */
.zt_banner_motion_box .content .tagline::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: #e53935;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 1px;
}

/* 主标题样式 */
.zt_banner_motion_box .content .main-title {
    color: #000000;
    letter-spacing: -0.5px;
    font-size: 52px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(211, 47, 47, 0.1);
    max-width: 620px;
}

/* 高亮文字 */
.zt_banner_motion_box .content .highlight {
    color: #e53935;
    display: block;
    font-weight: 800;
    margin-top: 5px;
}

/* 描述文本 */
.zt_banner_motion_box .content .description {
    font-size: 18px;
    color: rgb(0 0 0 / 88%);
    line-height: 1.6;
    max-width: 620px;
    margin: 20px 0 36px 0;
    font-weight: 400;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    height:112px;
    overflow: hidden;
}

/* 按钮组 */
.zt_banner_motion_box .button-group {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

/* 主按钮 */
.zt_banner_motion_box .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: #e53935;
    border: 2px solid #e53935;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.zt_banner_motion_box .btn-primary:hover {
    background: #b71c1c;
    border-color: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(229, 57, 53, 0.4);
}

/* 次要按钮 */
.zt_banner_motion_box .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: transparent;
    border: 2px solid #000000;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.35s ease;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* 次要按钮渐变背景伪元素 */
.zt_banner_motion_box .btn-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8c8f93, #82878e, #7a808a);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    border-radius: 2px;
}

.zt_banner_motion_box .btn-secondary:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgb(0 0 0 / 25%);
    border-color: rgb(99 101 105 / 80%);
}

.zt_banner_motion_box .btn-secondary:hover::before {
    opacity: 1;
}

/* 图标样式 */
.zt_banner_motion_box .icon-arrow,
.zt_banner_motion_box .icon-pdf {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s;
}

.zt_banner_motion_box .btn-primary:hover .icon-arrow {
    transform: translateX(5px);
}

.zt_banner_motion_box .btn-secondary:hover .icon-pdf {
    transform: translateY(2px);
}

/* 内容入场动画 */
.zt_banner_motion_box .content {
    animation: fadeSlideUp 0.55s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
    padding: 40px 0;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 焦点样式（无障碍） */
.zt_banner_motion_box .btn-primary:focus-visible,
.zt_banner_motion_box .btn-secondary:focus-visible {
    outline: 3px solid #ff8a80;
    outline-offset: 3px;
    border-radius: 4px;
}                    



/* ========== 全新banner：多轴精密线性模组 ========== */
/* ★ 背景图URL占位 — 请将你的背景图地址填入下方 url('') 内，建议尺寸≥1920x500px，主体偏暗或干净以突显文字 */
.zt_banner_linear {
    width: 100%;
    max-width: 1920px;
    height: 500px;
    margin: 0 auto;
    background-color: transparent;
    /* ★ 背景图占位：请替换引号内的地址为你的实际图片URL */
    background-image: url("/static/images/2483a6d40b7e66cba5759454f04f4f5b.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

/* 可选：如果背景图较亮，可增加半透明遮罩提升文字可读性（默认不加遮罩，保持背景干净） */
/*
.zt_banner_linear::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.25);
    z-index: 1;
}
.zt_banner_linear .container {
    z-index: 2;
}
*/

/* 内容容器 */
.zt_banner_linear .container {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* 左侧内容动画 */
.zt_banner_linear .content {
    animation: fadeSlideUp 0.55s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
    padding: 40px 0;
}

/* tagline 全大写英文 + 深色文字 + 红色竖线装饰 */
.zt_banner_linear .content .tagline {
    font-size: 16px;
    color: #2c2f36;
    letter-spacing: 3px;
    line-height: 1.5;
    font-weight: 700;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    width: 620px;
    max-width: 100%;
    margin-bottom: 12px;
    text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

.zt_banner_linear .content .tagline::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: #e53935;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 1px;
}

/* 主标题 */
.zt_banner_linear .content .main-title {
    color: #121212;
    letter-spacing: -0.5px;
    font-size: 52px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 18px;
    text-shadow: 0 1px 3px rgba(255,255,255,0.2);
}

.zt_banner_linear .content .highlight {
    color: #e53935;
    display: block;
    font-weight: 800;
    margin-top: 5px;
    font-size: 0.9em;
    letter-spacing: -0.2px;
    text-shadow: 0 0 3px rgba(255,255,255,0.5);
}

/* 描述文案 */
.zt_banner_linear .content .description {
    font-size: 18px;
    color: #1f2229;
    line-height: 1.55;
    max-width: 620px;
    margin: 18px 0 32px 0;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}

/* 按钮组 */
.zt_banner_linear .button-group {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

/* 主按钮 */
.zt_banner_linear .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: var(--primary);
    border: 2px solid var(--primary);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
}

.zt_banner_linear .btn-primary:hover {
    background: #b71c1c;
    border-color: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(229, 57, 53, 0.35);
}

/* 次按钮 */
.zt_banner_linear .btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 16px 40px;
    background: transparent;
    border: 2px solid #4a5562;
    color: #1e1e2a;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.35s ease;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.zt_banner_linear .btn-secondary:hover {
    background: #4a5562;
    color: #ffffff;
    transform: translateY(-2px);
}

/* 按钮图标 */
.zt_banner_linear .icon-arrow,
.zt_banner_linear .icon-pdf {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}
.zt_banner_linear .icon-pdf{
    margin-right:8px;
}

.zt_banner_linear .btn-primary:hover .icon-arrow {
    transform: translateX(5px);
}

.zt_banner_linear .btn-secondary:hover .icon-pdf {
    transform: translateY(-2px);
}

/* 无障碍焦点 */
.zt_banner_linear .btn-primary:focus-visible,
.zt_banner_linear .btn-secondary:focus-visible {
    outline: 3px solid #ff8a80;
    outline-offset: 3px;
    border-radius: 4px;
}

/* 动画 */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



















.dz_main{
    background: #f1f5f9;
    color: #1a1a1a;
    line-height: 1.6;
}
.dz_main.truss-custom .process-section{
    background: #f1f5f9;
}
.dz_main.truss-custom .sm-recommend{
    padding: 80px 0 0;
    margin-bottom: 0;
    background: #fff;
}
.dz_main.truss-custom .sm-inquiry{
    background: #fff;    
    padding:80px 0;
}
.dz_main.truss-custom .sm-inquiry-bg{
    margin-bottom:0;
}
.dz_main.truss-custom .sm-articles{
    background:#fff;
}
.dz_main.truss-custom .sm-inquiry-bg{
    padding: 50px 32px;
}
.dz_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    font-family: inherit;
}
.dz_btn-primary {
    background: #0f172a;
    color: #fff;
}
.dz_btn-primary:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3);
}
.dz_btn-outline {
    background: #fff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}
.dz_btn-outline:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: #fff5f5;
}

.dz_plan-section {
    padding:80px 0;
    background:#fff;
}
.dz_plan-section h2 {
    text-align: center;
    margin-bottom: 12px;
    font-size: 1.8rem;
}
.dz_plan-subtitle {
    text-align: center;
    color: #64748b;
    margin-bottom: 32px;
}

.dz_series-tabs-wrapper {
    position: sticky;
    top: 0;
    z-index: 500;
    background: #fff;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.dz_series-tabs-wrapper.dz_stuck{
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
}
.dz_series-tabs-wrapper.dz_faded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    margin-bottom:0px !important;
}
.dz_series-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    padding:12px 0;    
}
.dz_series-tab {
    padding: 10px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    transition: all 0.25s;
    font-family: inherit;
    white-space: nowrap;
}
.dz_series-tab:focus {
    outline: none;
    box-shadow: none;
}
.dz_series-tab:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: #fff5f5;
}
.dz_series-tab.dz_active {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}
.dz_series-tab.dz_active:hover {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}

.dz_card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom:60px;
    transition: opacity 0.2s;
    margin-top:24px;    
}
.dz_card-grid.dz_switching {
    opacity: 0.4;
    pointer-events: none;
}
.dz_img-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    border: 1px solid #e2e8f0;
    position: relative;
}
.dz_img-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.12);
    border-color: #dc2626;
}
.dz_img-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: contain;
    padding: 16px;
    background: linear-gradient(135deg, #f5f5f5, #eaeaea);
    height:220px;
}
.dz_img-card__caption {
    text-align: center;
    padding: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    border-top: 1px solid #f1f5f9;
}
.dz_img-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #0f172a;
    color: #fff;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 20px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.25s;
    pointer-events: none;
}
.dz_img-card:hover .dz_img-card__badge {
    opacity: 1;
    transform: translateY(0);
    background: #dc2626;
}

.dz_bottom-cta {
    text-align: center;
    background: #f9f9f9;
    border-radius: 20px;
    padding: 48px 24px;
    border: 1px solid #e2e8f0;
}
.dz_bottom-cta h3 {
    font-size: 1.3rem;
    margin-bottom: 8px;
}
.dz_bottom-cta p {
    color: #64748b;
    margin: 12px 0 24px;
    font-size: 0.95rem;
}

.dz_app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.dz_app-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    cursor: default;
}
.dz_app-card:hover {
    border-color: #dc2626;
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.12);
    transform: none;
}
.dz_app-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/2;
    background: #f8fafc;
}
.dz_app-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}
.dz_app-card:hover .dz_app-img img {
    transform: none;
}
.dz_app-badge {
    display: none;
}
.dz_app-info {
    padding: 20px;
}
.dz_app-info h4 {
    font-size: 1rem;
    margin-bottom: 8px;
    color: #0f172a;
}
.dz_app-info p {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.6;
}

.dz_modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.dz_modal-overlay.dz_active {
    opacity: 1;
    visibility: visible;
}
.dz_modal-content {
    background: #fff;
    border-radius: 24px;
    padding: 36px 32px 32px;
    max-width: 480px;
    width: 100%;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    border: 1px solid #e2e8f0;
}
.dz_modal-overlay.dz_active .dz_modal-content {
    transform: translateY(0) scale(1);
}
.dz_modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #94a3b8;
    font-size: 1.2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.dz_modal-close:hover {
    background: #f1f5f9;
    color: #dc2626;
}
.dz_modal-header h3 {
    font-size: 1.4rem;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dz_modal-header p {
    color: #64748b;
    font-size: 0.85rem;
}
.dz_form-field {
    margin-bottom: 18px;
    margin-top:18px;
}
.dz_form-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #334155;
}
.dz_form-field input,
.dz_form-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 0.9rem;
    outline: none;
    transition: 0.2s;
    font-family: inherit;
    resize: vertical;
}
.dz_form-field input:focus,
.dz_form-field textarea:focus {
    background: #fff;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.dz_btn-submit {
    width: 100%;
    padding: 14px;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    transition: all 0.25s;
    margin-top: 8px;
}
.dz_btn-submit:hover {
    background: #dc2626;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
}
.dz_btn-submit:disabled {
    opacity: 0.6;
    pointer-events: none;
}
.dz_success-message {
    display: none;
    margin-top: 18px;
    padding: 14px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    color: #15803d;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}
.dz_success-message.dz_show {
    display: flex;
}

/* ========== 灯箱样式（Swiper版） ========== */
.dz_lightbox {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10000;
    background: rgb(32 33 37 / 94%);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.dz_lightbox.dz_active { opacity: 1; visibility: visible; }

.dz_lightbox-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90vw;
    max-width: 1200px;
    max-height: 85vh;
    transform: scale(0.95);
    transition: transform 0.25s ease;
    user-select: none;
}
.dz_lightbox.dz_active .dz_lightbox-content { transform: scale(1); }

.dz_lightbox-swiper-container {
    width: 100%;
    max-height: 65vh;
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    /* 新增手势样式 */
    cursor: grab;
}
.dz_lightbox-swiper-container:active {
    cursor: grabbing;
}

/* Swiper 幻灯片样式 */
.dz_lightbox-swiper-container .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5, #eaeaea);
    height:600px;
}
.dz_lightbox-swiper-container img {
    max-width: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    height:400px;
}

/* 左右箭头（固定在 Swiper 两侧） */
.dz_lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none; color: #fff;
    font-size: 1.3rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 10001;
    transition: background 0.2s, transform 0.15s;
    outline: none;
    background: rgb(142 137 137 / 70%);
}
.dz_lightbox-arrow:hover {
    background: rgb(39 38 38 / 70%);
    transform: translateY(-50%) scale(1.08);
}
.dz_lightbox-arrow:active { transform: translateY(-50%) scale(0.94); }
.dz_lightbox-arrow:disabled { opacity: 0.25; pointer-events: none; }
.dz_lightbox-arrow--left { left: 16px; }
.dz_lightbox-arrow--right { right: 16px; }

/* 关闭按钮（右上角） */
.dz_lightbox-close {
    position: fixed;
    top: 20px; right: 20px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none; color: #fff;
    font-size: 1.3rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 10001;
    transition: background 0.2s, transform 0.15s;
    outline: none;
}
.dz_lightbox-close:hover { background:#d32f2f; transform: scale(1.08); }
.dz_lightbox-close:active { transform: scale(0.94); }

/* ESC 提示（左上角） */
.dz_lightbox-esc-hint {
    position: fixed;
    top: 20px; left: 20px;
    z-index: 10001;
    background: rgba(15, 23, 42, 0.55);
    color: #cbd5e1;
    font-size: 0.72rem;
    padding: 6px 14px;
    border-radius: 20px;
    display: flex; align-items: center; gap: 7px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.dz_lightbox-esc-hint kbd {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-family: inherit;
    color: #fff;
}

/* 底部信息 */
.dz_lightbox-caption { color: #e2e8f0; margin-top: 14px; font-size: 0.95rem; font-weight: 500; text-align: center; }
.dz_lightbox-counter { color:#c1d0e4; font-size: 0.8rem; margin-top: 4px; }
.dz_lightbox-hint { color: #c1d0e4; font-size: 0.75rem; margin-top: 8px; display: flex; align-items: center; gap: 6px; }

.dz_cases-section {
    padding:80px 0;
    background: #f8f9fa;
}








/*========================= 客服iframe =========================*/
#kefu-wrapper {
    position: fixed;
    right: 110px;
    bottom:12%;          /* 改为 bottom 定位，更符合常见聊天窗口习惯 */
    width: 451px;
    z-index: 9999;
    display: none;         /* 默认隐藏，由 JS 控制显示 */
    border-radius: 12px;
box-shadow: 1px 6px 20px rgba(0,0,0,0.15);
    overflow: hidden;
    transition: none;      /* 拖拽时移除过渡，避免卡顿 */
}

/* ---- 头部容器 ---- */
.kefu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #4a4a5a 0%, #3a3a4a 100%);
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.kefu-header:active {
    cursor: grabbing;
}

/* ---- 左侧信息区 ---- */
.kefu-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 头像 */
.kefu-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.kefu-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #fff;
    border-radius: 6px;
}

/* 标题 */
.kefu-header-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.3px;
}

/* 在线状态 */
.kefu-header-subtitle {
    font-size: 11px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 1px;
}

.kefu-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74,222,128,0.6);
    animation: kefu-pulse-dot 2s ease-in-out infinite;
}

@keyframes kefu-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.2); }
}

/* ---- 右侧按钮区 ---- */
.kefu-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* 单个按钮基础样式 */
.kefu-expand-btn,
.kefu-close-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    padding: 6px;
    display: flex;
    align-items: center;
    line-height: 1;
    transition: background 0.2s, opacity 0.2s;
}
.kefu-expand-btn:hover,
.kefu-close-btn:hover {
    background: rgba(255,255,255,0.2);
    opacity: 1;
}
.kefu-expand-btn:active,
.kefu-close-btn:active {
    background: rgba(255,255,255,0.25);
}

/* ---- 右侧滑入动画 ---- */
#kefu-wrapper.anim-slideRight.show {
    display: block !important;
    animation: slideRightIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#kefu-wrapper.anim-slideRight.hide {
    animation: slideRightOut 0.25s cubic-bezier(0.55, 0, 0.55, 0.2) forwards;
}
@keyframes slideRightIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}
@keyframes slideRightOut {
    from { transform: translateX(0);   opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}


















/*============================= 多语言CSS ===============================*/
/*==============英语===============*/
.en_page .lm-banner .main-title{
    font-size:40px !important;
}
.en_page .lm-banner .main-title .highlight{
    font-size:32px !important;
}
.en_page .zt_banner_gantry .content .main-title{
    font-size:40px !important;
}
/*==============日语===============*/
.jp_page .zt_banner_gantry .content .main-title{
    font-size:40px !important;
    width:650px !important;
}
.jp_page .bridge-stats .stat-number{
    font-size:24px !important;
}
.jp_page .BusinessOverview .hd h3{
    font-size:35px !important;
}
.jp_page .VisualOverview .data-number{
    font-size:30px !important;
}


/*页头部分*/
.language_syntax .site-header__company-meta{
    font-size: 15px !important;
}
.language_syntax .site-header__company-extra{
    font-size: 15px !important;
}
.language_syntax .rx-linear-modules .spec-item{
    font-size: 15px !important;
}
.language_syntax .tab-note{
    font-size: 15px !important;
}
.language_syntax .BusinessOverview .company-profile-box .content p{
    font-size: 15px !important;
}

/*通用部分*/
.lang-img{
    width:20px;
}
.fa-globe{
    display:none !important;
}
.language_syntax .BusinessOverview .company-profile-box .content H3{
    text-align: inherit !important;
    font-size: 16px;
}
.language_syntax .BusinessOverview .company-profile-box .content p{
    text-align: inherit !important;
}
.language_syntax .diy-section__desc{
    max-width:80% !important;
}
.language_syntax .truss-custom .section-header p{
    max-width:80% !important;
}
.language_syntax .contact-icon{
    font-size: 16px !important;
}
.language_syntax .footer-main{
    grid-template-columns: 2.2fr 1fr 1.6fr 1.5fr !important;
}

.language_syntax .zt_banner_controlbox_white .content .main-title{
    font-size:40px !important;
}


/*==========================================多语言字体===============================================*/
/* ===== 拉丁 / 西里尔 / 希腊 ===== */
.af_page, .sq_page, .ay_page, .az_page, .bm_page, .eu_page, .be_page, .bs_page,
.bg_page, .ca_page, .ceb_page, .ny_page, .co_page, .hr_page, .cs_page, .da_page,
.nl_page, .en_page, .eo_page, .et_page, .ee_page, .tl_page, .fi_page, .fr_page,
.fy_page, .gl_page, .de_page, .el_page, .gn_page, .ht_page, .ha_page, .haw_page,
.hmn_page, .hu_page, .is_page, .ig_page, .ilo_page, .id_page, .ga_page, .it_page,
.jw_page, .kk_page, .rw_page, .kri_page, .ku_page, .ky_page, .la_page, .lv_page,
.ln_page, .lt_page, .lg_page, .lb_page, .mk_page, .mg_page, .ms_page, .mt_page,
.mi_page, .lus_page, .mn_page, .no_page, .om_page, .pl_page, .pt_page, .qu_page,
.ro_page, .ru_page, .sm_page, .gd_page, .nso_page, .sr_page, .st_page, .sn_page,
.sk_page, .sl_page, .so_page, .es_page, .su_page, .sw_page, .sv_page, .tg_page,
.tt_page, .ts_page, .tr_page, .tk_page, .ak_page, .uk_page, .uz_page, .vi_page,
.cy_page, .xh_page, .yo_page, .zu_page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ===== 简体中文 ===== */
.zh-CN_page {
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ===== 繁体中文 ===== */
.zh-TW_page {
    font-family: "PingFang TC", "Microsoft JhengHei", "Hiragino Sans CNS",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ===== 日文 ===== */
.ja_page {
    font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", "MS PGothic",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ===== 韩文 ===== */
.ko_page {
    font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", "Noto Sans KR",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ===== 阿拉伯字母体系 (阿拉伯语、波斯语、乌尔都语、普什图语、信德语、维吾尔语、索拉尼库尔德语) ===== */
.ar_page, .fa_page, .ur_page, .ps_page, .sd_page, .ug_page, .ckb_page {
    font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", "Arial", sans-serif;
}
/* ===== 希伯来字母体系 (希伯来语、意第绪语) ===== */
.iw_page, .yi_page {
    font-family: "Arial Hebrew", "Noto Sans Hebrew", "Helvetica Neue", sans-serif;
}
/* ===== 天城文 (印地语、马拉地语、尼泊尔语、梵语、博杰普尔语、多格拉语、孔卡尼语、迈蒂利语) ===== */
.hi_page, .mr_page, .ne_page, .sa_page, .bho_page, .doi_page, .gom_page, .mai_page {
    font-family: "Devanagari Sangam MN", "Noto Sans Devanagari", "Kohinoor Devanagari", sans-serif;
}
/* ===== 孟加拉文 (孟加拉语、阿萨姆语、梅泰语) ===== */
.bn_page, .as_page, .mni-Mtei_page {
    font-family: "Bangla Sangam MN", "Noto Sans Bengali", "Arial", sans-serif;
}
/* ===== 古吉拉特文 ===== */
.gu_page {
    font-family: "Gujarati Sangam MN", "Noto Sans Gujarati", sans-serif;
}
/* ===== 卡纳达文 ===== */
.kn_page {
    font-family: "Kannada Sangam MN", "Noto Sans Kannada", sans-serif;
}
/* ===== 马拉雅拉姆文 ===== */
.ml_page {
    font-family: "Malayalam Sangam MN", "Noto Sans Malayalam", sans-serif;
}
/* ===== 奥里亚文 ===== */
.or_page {
    font-family: "Noto Sans Oriya", "Arial", sans-serif;
}
/* ===== 旁遮普文 (古木基文) ===== */
.pa_page {
    font-family: "Gurmukhi MN", "Noto Sans Gurmukhi", sans-serif;
}
/* ===== 泰米尔文 ===== */
.ta_page {
    font-family: "Tamil Sangam MN", "Noto Sans Tamil", sans-serif;
}
/* ===== 泰卢固文 ===== */
.te_page {
    font-family: "Telugu Sangam MN", "Noto Sans Telugu", sans-serif;
}
/* ===== 僧伽罗文 ===== */
.si_page {
    font-family: "Sinhala Sangam MN", "Noto Sans Sinhala", sans-serif;
}
/* ===== 缅甸文 ===== */
.my_page {
    font-family: "Myanmar Sangam MN", "Noto Sans Myanmar", "Myanmar Text", sans-serif;
}
/* ===== 高棉文 ===== */
.km_page {
    font-family: "Khmer Sangam MN", "Noto Sans Khmer", "Leelawadee UI", sans-serif;
}
/* ===== 老挝文 ===== */
.lo_page {
    font-family: "Lao Sangam MN", "Noto Sans Lao", "DokChampa", sans-serif;
}
/* ===== 泰文 ===== */
.th_page {
    font-family: "Thonburi", "Leelawadee UI", "Noto Sans Thai", sans-serif;
}
/* ===== 格鲁吉亚文 ===== */
.ka_page {
    font-family: "Noto Sans Georgian", "Helvetica Neue", sans-serif;
}
/* ===== 亚美尼亚文 ===== */
.hy_page {
    font-family: "Noto Sans Armenian", "Helvetica Neue", sans-serif;
}
/* ===== 吉兹字母 (阿姆哈拉语、提格里尼亚语) ===== */
.am_page, .ti_page {
    font-family: "Noto Sans Ethiopic", "Kefa", "Nyala", sans-serif;
}
/* ===== 它拿文 (迪维希语) ===== */
.dv_page {
    font-family: "Noto Sans Thaana", sans-serif;
}