/* ============================================================================ 信刻官网 2026 改版 · 设计系统（科技蓝 + 青色） 本文件独立于旧样式，需配合新的页面外壳（xn-header / xn-hero / xn-footer） ==========================================================================*/ :root { /* 主色 */ --c-blue: #055999; --c-blue-d: #04436f; --c-cyan: #6d8caa; --c-cyan-d: #4f6f8d; --c-navy: #0a2740; --c-navy-2: #0f335a; /* 中性 */ --c-ink: #12233a; --c-ink-2: #46586f; --c-ink-3: #7a8ca1; --c-line: #e4ecf6; --c-soft: #f5f9ff; --c-soft-2: #eef5ff; /* 效果 */ --r-sm: 3px; --r: 6px; --r-lg: 8px; --sh-1: 0 2px 10px rgba(10, 39, 64, .05); --sh-2: 0 10px 30px rgba(10, 39, 64, .10); --sh-3: 0 18px 44px rgba(10, 39, 64, .16); --grad: linear-gradient(115deg, #04436f 0%, #055999 52%, #0a5f95 100%); --grad-soft: linear-gradient(135deg, rgba(5, 89, 153, .10), rgba(109, 140, 170, .12)); --ease: cubic-bezier(.22, .61, .36, 1); } /* ---------------------------------------------------------------- 基础 */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.8; color: var(--c-ink-2); background: #fff; overflow-x: hidden; } img { max-width: 100%; height: auto; border: 0; vertical-align: middle; } a { color: var(--c-blue); text-decoration: none; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s; } a:hover, a:focus { color: var(--c-cyan-d); text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: var(--c-ink); font-weight: 700; line-height: 1.35; margin: 0 0 .6em; } p { margin: 0 0 16px; } strong, b { color: var(--c-ink); } ul, ol { margin: 0 0 16px; padding-left: 22px; } ::selection { background: rgba(5, 89, 153, .16); } .xn-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .container { max-width: 1240px; } .img-responsive { max-width: 100%; height: auto; } /* ---------------------------------------------------------------- 页头 */ .xn-header { position: sticky; top: 0; z-index: 900; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--c-line); transition: box-shadow .25s var(--ease); } .xn-header.is-stuck { box-shadow: 0 6px 24px rgba(10, 39, 64, .08); } .xn-header .xn-wrap { display: flex; align-items: center; gap: 18px; height: 74px; } .xn-logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .xn-logo img { height: 40px; width: auto; display: block; } .xn-logo span { font-size: 12.5px; color: var(--c-ink-3); padding-left: 12px; border-left: 1px solid var(--c-line); letter-spacing: .5px; } .xn-nav { margin-left: auto; } .xn-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .xn-nav > ul > li { position: relative; list-style: none; } .xn-nav > ul > li > a { display: flex; align-items: center; gap: 5px; padding: 10px 15px; border-radius: 5px; font-size: 15.5px; font-weight: 600; color: var(--c-ink); white-space: nowrap; } .xn-nav > ul > li > a:hover, .xn-nav > ul > li > a:focus { color: var(--c-blue); background: var(--c-soft-2); } .xn-nav > ul > li.is-active > a { color: #fff; background: var(--grad); box-shadow: 0 8px 20px rgba(5, 89, 153, .28); } .xn-nav .caret { display: none; } .xn-nav .xn-sub { position: absolute; top: calc(100% + 10px); left: 0; min-width: 268px; padding: 10px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .22s var(--ease); max-height: min(72vh, 620px); overflow-y: auto; } .xn-nav li:hover > .xn-sub, .xn-nav li.is-open > .xn-sub { opacity: 1; visibility: visible; transform: translateY(0); } .xn-nav .xn-sub a { display: block; padding: 9px 12px; border-radius: 4px; font-size: 14.5px; color: var(--c-ink-2); white-space: normal; line-height: 1.55; } .xn-nav .xn-sub a:hover { background: var(--c-soft-2); color: var(--c-blue); } .xn-nav .xn-group { margin: 4px 0 8px; } .xn-nav .xn-group > .xn-group-t { display: block; padding: 6px 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: var(--c-ink-3); text-transform: uppercase; } .xn-nav .xn-group ul { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 2px solid var(--c-soft-2); } .xn-nav .xn-group ul a { font-size: 14px; padding: 7px 10px; } .xn-head-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 4px; font-size: 14.5px; font-weight: 700; color: #fff; background: var(--grad); box-shadow: 0 8px 20px rgba(5, 89, 153, .26); } .xn-head-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(5, 89, 153, .34); } .xn-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: 6px; background: #fff; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; } .xn-burger i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--c-ink); transition: .2s; } .xn-burger.on i:nth-child(1) { transform: translateY(7px) rotate(45deg); } .xn-burger.on i:nth-child(2) { opacity: 0; } .xn-burger.on i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------------------------------------------------------------- 首页首屏 */ .xn-home-hero { padding: 0; background: var(--c-navy); } .xn-home-hero::after { display: none; } .xn-hero-carousel { position: relative; overflow: hidden; background: #04142a; aspect-ratio: 1920 / 551; max-height: 540px; } .xn-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); } .xn-hero-slide.is-on { opacity: 1; } .xn-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .xn-hero-dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; gap: 10px; } .xn-hero-dot { width: 30px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: .2s; } .xn-hero-dot.is-on { width: 46px; background: var(--c-cyan); } .xn-hero-bar { background: var(--grad); color: #fff; padding: 30px 0 34px; } .xn-hero-bar .xn-wrap { display: flex; align-items: center; justify-content: space-between; gap: 34px; } .xn-hero-copy h1 { color: #fff; font-size: clamp(22px, 2.35vw, 34px); line-height: 1.3; margin: 0 0 12px; letter-spacing: .5px; } .xn-hero-copy p { color: rgba(255, 255, 255, .9); max-width: 760px; margin: 0 0 20px; font-size: 15.5px; line-height: 1.85; } .xn-hero-stats { display: flex; gap: 32px; flex: 0 0 auto; } .xn-hero-stats > div { text-align: center; } .xn-hero-stats b { display: block; font-size: 22px; line-height: 1.3; color: #fff; } .xn-hero-stats span { font-size: 12.5px; color: rgba(255, 255, 255, .78); } /* ---------------------------------------------------------------- 内页页首 */ .xn-hero { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 82% 8%, rgba(109, 140, 170, .26), transparent 55%), radial-gradient(110% 130% at 12% 92%, rgba(5, 89, 153, .45), transparent 60%), linear-gradient(120deg, #061530 0%, #0f335a 45%, #04436f 100%); color: #fff; } .xn-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px, 56px 56px; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 85%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 85%); } .xn-hero .xn-wrap { position: relative; z-index: 2; padding: 54px 24px 50px; } .xn-crumb { font-size: 13.5px; color: rgba(255, 255, 255, .68); margin-bottom: 18px; } .xn-crumb a { color: rgba(255, 255, 255, .82); } .xn-crumb a:hover { color: #fff; } .xn-crumb i { font-style: normal; margin: 0 8px; opacity: .55; } .xn-hero h1 { color: #fff; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.28; letter-spacing: .5px; margin: 0 0 14px; max-width: 900px; text-shadow: 0 4px 24px rgba(0, 20, 50, .35); } .xn-hero .xn-hero-sub { max-width: 860px; margin: 0 0 26px; font-size: 16px; line-height: 1.85; color: rgba(255, 255, 255, .88); } .xn-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } .xn-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 4px; font-size: 15px; font-weight: 700; border: 1px solid transparent; cursor: pointer; } .xn-btn-primary { background: var(--c-cyan); color: #fff; box-shadow: 0 10px 26px rgba(109, 140, 170, .32); } .xn-btn-primary:hover { background: #85a3be; color: #fff; transform: translateY(-1px); } .xn-btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .45); } .xn-btn-ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: #fff; } /* ---------------------------------------------------------------- 内容区骨架 */ .xn-main { padding: 0 0 10px; } .xn-section { padding: 62px 0; } .xn-section.alt { background: var(--c-soft); } .xn-sec-head { text-align: center; margin: 0 auto 40px; max-width: 860px; } .xn-sec-head .kicker { display: inline-block; margin-bottom: 10px; padding: 5px 14px; border-radius: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-blue); background: var(--c-soft-2); } .xn-sec-head h2 { font-size: clamp(22px, 2vw, 30px); letter-spacing: .5px; margin: 0 0 12px; } .xn-sec-head p { color: var(--c-ink-3); font-size: 15.5px; margin: 0; } .xn-sec-head::after { content: ""; display: block; width: 52px; height: 3px; margin: 18px auto 0; border-radius: 2px; background: var(--grad); } /* 老结构里的居中标题（适用行业 / 相关资质 等）统一成新版式 */ .aboutUs, .aboutUs1 { text-align: center; padding: 0 0 6px; } .aboutUs h2, .aboutUs1 h2, .jumbobox h2 { font-size: clamp(22px, 2vw, 30px); margin: 0 0 12px; color: var(--c-ink); } .jumbobox { padding: 56px 0 10px; } hr.break-small { width: 52px; height: 3px; border: 0; border-radius: 2px; margin: 0 auto 28px; background: var(--grad); opacity: 1; } /* ---------------------------------------------------------------- 正文排版 */ .xn-main p { font-size: 16px; line-height: 1.9; color: var(--c-ink-2); } .xn-main h2 { font-size: clamp(21px, 1.9vw, 27px); margin-top: 1.2em; } .xn-main h3 { font-size: 20px; margin-top: 1.1em; } .xn-main h4 { font-size: 17.5px; } .xn-main img { border-radius: 6px; } .taC, .taC_img { text-align: center; } .taC_img img, .taC img { max-width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--sh-2); } .container10 { max-width: 920px; margin: 0 auto; } .container10 p { font-size: 16px; line-height: 1.95; } .content-group-title3 { font-size: clamp(21px, 2vw, 28px); padding-bottom: 16px; margin: 10px 0 26px; border-bottom: 1px solid var(--c-line); } .container10 p.newscontent, .newscontent { font-size: 17px; font-weight: 700; color: var(--c-ink); margin-top: 28px; } .container10 p.newscontent1, .newscontent1 { font-size: 16px; font-weight: 400; color: var(--c-blue-d); margin-top: 20px; padding-left: 14px; border-left: 3px solid var(--c-cyan); } .container10 img { display: block; margin: 20px auto; } /* ---------------------------------------------------------------- 卡片体系 */ .xn-main .yyjzBox { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); padding: 24px 26px 22px; margin-bottom: 22px; position: relative; overflow: hidden; box-shadow: var(--sh-1); } .xn-main .yyjzBox::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); opacity: .9; } .xn-main .yyjzBox:hover { box-shadow: var(--sh-3); transform: translateY(-3px); border-color: #cfe2f8; } .xn-main .yyjzBox h4 { font-size: 17.5px; margin: 0 0 10px; color: var(--c-navy-2); } .xn-main .yyjzBox h4 i { display: none; } .xn-main .yyjzBox p { margin: 0; font-size: 15px; } /* 首页/内页的内容卡（图片 + 标题 + 摘要 + 按钮） */ .content-list3 { margin: 0; padding: 0; } .content-list3 > ul, .content-list3 ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; list-style: none; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; float: none !important; position: static !important; overflow: visible !important; } .content-list3 > ul > li, .content-list3 ul > li, .content-list3 > li { list-style: none; float: none !important; width: auto !important; max-width: 100% !important; min-width: 0; margin: 0 !important; padding: 0 !important; position: static !important; display: block !important; } .content-warp { display: flex; flex-direction: column; height: 100%; width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); min-width: 0; float: none !important; position: relative; } .content-warp .content-info { float: none !important; width: 100% !important; box-sizing: border-box; } .content-warp:hover { box-shadow: var(--sh-3); transform: translateY(-5px); border-color: #cfe2f8; } .content-warp .content-img { overflow: hidden; } .content-warp .content-img img { width: 100%; display: block; transition: transform .6s var(--ease); } .content-warp:hover .content-img img { transform: scale(1.05); } .content-warp .content-info { padding: 22px 24px 26px; text-align: center; flex: 1 1 auto; } .content-warp .content-info h3 { font-size: 18px; margin: 0 0 10px; color: var(--c-navy-2); } .content-warp .content-info p { font-size: 14.8px; line-height: 1.8; margin: 0 0 16px; } .content-warp .content-info p:last-child { margin-bottom: 0; } .content-warp .content-info a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 22px; border-radius: 4px; font-size: 14px; font-weight: 700; color: var(--c-blue); background: var(--c-soft-2); border: 1px solid #d8e8ff; } .content-warp .content-info a:hover { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(5, 89, 153, .28); } /* 解决方案卡：图片 + 底部渐变标题 */ .content-list3 + * { margin-top: 0; } .content-warp1 { position: relative; height: 100%; border-radius: var(--r-lg); overflow: hidden; background: #0a1b33; box-shadow: var(--sh-2); } .content-warp1:hover { box-shadow: var(--sh-3); transform: translateY(-5px); } .content-warp1 .content-img { height: 100%; } .content-warp1 .hovereffect { position: relative; display: block; height: 100%; overflow: hidden; } .content-warp1 .hovereffect img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); } .content-warp1 .hovereffect:hover img { transform: scale(1.06); } .content-warp1 .overlay { position: absolute !important; left: 0; right: 0; bottom: 0; top: auto !important; display: flex !important; flex-direction: column; justify-content: flex-end; padding: 40px 20px 20px !important; margin: 0 !important; background: linear-gradient(to top, rgba(4, 16, 34, .95) 0%, rgba(4, 16, 34, .62) 45%, rgba(4, 16, 34, 0) 90%) !important; opacity: 1 !important; transform: none !important; text-align: center; } .content-warp1 .overlay h4 { color: #fff !important; background: none !important; padding: 0 !important; font-size: 17.5px; font-weight: 700; margin: 0 !important; line-height: 1.45; transform: none !important; } .content-warp1 .overlay p { color: rgba(255, 255, 255, .84) !important; background: none !important; padding: 0 !important; font-size: 13.8px; line-height: 1.7; margin: 0 !important; max-height: 0; opacity: 0; overflow: hidden; } .content-warp1:hover .overlay p { max-height: 96px; opacity: 1; margin-top: 8px !important; } .content-warp1 .overlay a { color: var(--c-cyan) !important; font-size: 13.5px; } /* 方案/产品页的图文小卡 */ .hrglDiv, .pdsbDiv, .kfhjgkGntdBox_RFID9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .hrglDiv .box, .solution_use .box, .kfhjgkGntdBox_RFID9 .box { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; margin: 0; box-shadow: var(--sh-1); height: 100%; } .hrglDiv .box:hover, .solution_use .box:hover, .kfhjgkGntdBox_RFID9 .box:hover { box-shadow: var(--sh-3); transform: translateY(-4px); } .hrglDiv .box img, .solution_use .box img { width: 100%; display: block; } .hrglDiv .box h3, .hrglDiv .box h4, .solution_use .box h3 { font-size: 17px; margin: 18px 20px 8px; text-align: center; color: var(--c-navy-2); } .hrglDiv .box p, .solution_use .box p { font-size: 14.8px; line-height: 1.8; margin: 0 20px 20px; text-align: center; } /* 产品/方案主图块（pdsbDiv 里的左右图文） */ .pdsbDiv { display: block; } .pdsbDiv .main_poduct { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; margin: 0 0 26px; box-shadow: var(--sh-1); } .pdsbDiv .main_poduct:hover { box-shadow: var(--sh-3); transform: translateY(-4px); } .pdsbDiv .main_poduct img { width: 100%; display: block; } .pdsbDiv .product_main { padding: 16px 20px 22px; } /* 图标小格 */ .kljDiv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .gydyklBox01 { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); padding: 22px 16px; margin: 0; text-align: center; box-shadow: var(--sh-1); } .gydyklBox01:hover { box-shadow: var(--sh-2); transform: translateY(-3px); } .gydyklBox01 .picDiv { height: 62px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .gydyklBox01 .picDiv img { max-height: 62px; width: auto; } /* 6 宫格特性（.yyjzNr2f > .yyjzBox） */ .yyjzNr2f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* 老样式里的浮动/固定宽度统一清掉，交给 grid */ .yyjzBox, .gydyklBox01, .main_poduct, .box, .content-warp, .content-warp1, .kfhjgkGntdBox_RFID9 .box, .hrglDiv .box, .pdsbDiv .main_poduct, .yyjzNr2f > div { float: none !important; } .gydyklBox01 { width: auto !important; max-width: 100%; } /* 旧的标签条底色去掉 */ .product_big_bg1, .product_big_bg1 .top1, .product_big_bg1 .header1, .product_requer > .container > .top1, .nav-v1 { background: transparent !important; background-image: none !important; box-shadow: none !important; } .nav-v1 { border: 0; margin-bottom: 8px; } /* ---------------------------------------------------------------- 标签页 */ .nav-v1 .menu1 { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 26px; padding: 0; border: 0; } .nav-v1 .menu1 > li { list-style: none; } .nav-v1 .menu1 > li > a { display: block; padding: 10px 22px; border-radius: 4px; font-size: 15px; font-weight: 600; color: var(--c-ink-2); background: var(--c-soft); border: 1px solid var(--c-line); } .nav-v1 .menu1 > li > a:hover { color: var(--c-blue); border-color: #cfe2f8; background: #fff; } .nav-v1 .menu1 > li > a.active, .nav-v1 .menu1 > li > a.on, .nav-v1 .menu1 > li > a.cur, .nav-v1 .menu1 > li.color > a, .nav-v1 .menu1 > li:first-child > a { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 8px 20px rgba(5, 89, 153, .26); } .tbc { cursor: pointer; } .tbc.color { color: var(--c-blue) !important; font-weight: 700; } /* 产品型号小标签（DSN20 / DSN50 …） */ .maintab .itemtab > div > a, .tab-btns a, a.model-tab { border-radius: 4px; } /* ---------------------------------------------------------------- 表格 */ .tabtable, .maintab { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.tabtrtd, table.gridtable { width: 100% !important; border-collapse: separate; border-spacing: 0; border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; margin: 18px 0 30px; font-size: 15.2px; background: #fff; box-shadow: var(--sh-1); } table.tabtrtd tr > td, table.gridtable tr > td, table.gridtable tr > th { padding: 14px 18px; border-bottom: 1px solid var(--c-line); border-right: 1px solid var(--c-line); vertical-align: top; line-height: 1.8; color: var(--c-ink-2); } table.tabtrtd tr > td:last-child, table.gridtable tr > td:last-child { border-right: 0; } table.tabtrtd tr:last-child > td, table.gridtable tr:last-child > td { border-bottom: 0; } table.tabtrtd td.tdtab_tr { width: 20%; min-width: 128px; background: var(--c-soft); color: var(--c-navy-2); font-weight: 700; } table.tabtrtd tr:hover > td { background: #fbfdff; } table.tabtrtd td[colspan] { background: linear-gradient(90deg, var(--c-soft-2), #fff); color: var(--c-navy-2); font-weight: 700; font-size: 16px; } table.gridtable th { background: var(--c-soft); color: var(--c-navy-2); font-weight: 700; } table.gridtable tr:nth-child(even) > td { background: #fbfdff; } @media (max-width: 767px) { table.tabtrtd, table.gridtable { display: block; overflow-x: auto; } table.tabtrtd tr > td, table.gridtable tr > td { white-space: normal; } } /* ---------------------------------------------------------------- 新闻列表 */ .rightListBox ul { list-style: none; margin: 0; padding: 0; } .rightListBox ul > li { padding: 26px 0; border-bottom: 1px solid var(--c-line); list-style: none; } .rightListBox ul > li:first-child { padding-top: 8px; } .rightListBox ul > li:hover { background: #fbfdff; } .listCon { display: flex; gap: 24px; align-items: flex-start; } .imgPic { flex: 0 0 244px; max-width: 244px; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); } .imgPic img { width: 100% !important; height: auto !important; display: block; transition: transform .6s var(--ease); } .rightListBox ul > li:hover .imgPic img { transform: scale(1.05); } .listInfo { flex: 1 1 auto; min-width: 0; } .nTitile { font-size: 18px !important; font-weight: 700; margin: 0 0 10px !important; line-height: 1.5; } .nTitile a { color: var(--c-ink) !important; } .nTitile a:hover { color: var(--c-blue) !important; } .listInfo p { font-size: 15px !important; line-height: 1.85 !important; color: var(--c-ink-2) !important; margin: 0 0 12px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .n_bottom { color: var(--c-ink-3) !important; font-size: 13.5px !important; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .n_bottom a { color: var(--c-blue) !important; font-weight: 700; } .n_bottom a:hover { color: var(--c-cyan-d) !important; } @media (max-width: 767px) { .listCon { display: block; } .imgPic { flex-basis: auto; max-width: 100%; margin-bottom: 14px; } } /* ---------------------------------------------------------------- 联系我们页 */ .connet { border-left: 4px solid var(--c-blue); padding: 2px 0 2px 16px; margin: 34px 0 16px; } .connet:first-child { margin-top: 0; } .connet h3, .connet h4, .connet h5 { margin: 0; font-size: 21px; color: var(--c-navy-2); } .connet + p, .connet ~ p { font-size: 16px; } /* ---------------------------------------------------------------- 适用行业 / 客户墙 */ .clients { padding: 56px 0 64px; } .clients .clients-slider .line { display: none; } .clients .item { display: flex; align-items: center; justify-content: center; } .clients .item img { width: 100%; max-width: 250px; border: 1px solid var(--c-line) !important; border-radius: var(--r); background: #fff; box-shadow: var(--sh-1); transition: .25s; } .clients .item:hover img { border-color: #bfdcff !important; box-shadow: var(--sh-2); transform: translateY(-3px); } /* 去掉老 bootstrap 栅格的负边距与内槽，交给我们自己的 grid 控制间距 */ .xn-main .row { margin-left: 0 !important; margin-right: 0 !important; } .xn-main [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } .xn-main .container, .xn-main .container-fluidd { width: auto !important; max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } /* ---------------------------------------------------------------- 页脚 */ .xn-footer { position: relative; background: var(--c-navy); color: #b9cbe0; padding: 60px 0 0; margin-top: 0; font-size: 14.5px; } .xn-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); } .xn-footer a { color: #b9cbe0; } .xn-footer a:hover { color: #fff; } .xn-foot-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; } .xn-footer .xn-foot-col > h4, .xn-footer h4, .xn-footer h5, .xn-footer .widgetheading { color: #fff !important; font-size: 15.5px !important; margin: 0 0 16px !important; padding: 0 0 12px !important; border-bottom: 1px solid rgba(255, 255, 255, .12) !important; border-left: 0 !important; background: none !important; letter-spacing: .5px; } .xn-footer p, .xn-footer address, .xn-footer li, .xn-footer span, .xn-footer div { color: #b9cbe0 !important; } .xn-footer address strong, .xn-footer strong { color: #fff !important; font-weight: 700; } .xn-footer a, .xn-footer a span, .xn-footer a b { color: #b9cbe0 !important; } .xn-footer a:hover, .xn-footer a:hover span { color: #fff !important; } .xn-footer .xn-foot-tel, .xn-footer .xn-foot-tel * { color: #fff !important; } .xn-footer .xn-copyright, .xn-footer .xn-copyright * { color: #8fa6bf !important; } .xn-footer .xn-copyright a { color: #a9bfd6 !important; } .xn-footer .xn-copyright a:hover { color: #fff !important; } .xn-footer img { background: transparent; } .xn-foot-col address { color: #b9cbe0; font-style: normal; line-height: 1.9; margin: 0 0 12px; } .xn-foot-col p { margin: 0 0 10px; color: #b9cbe0; line-height: 1.9; } .xn-foot-col ul { list-style: none; margin: 0; padding: 0; } .xn-foot-col ul li { margin: 0 0 9px; list-style: none; } .xn-foot-col ul li a { display: block; font-size: 14px; line-height: 1.6; } .xn-foot-col ul li a:hover { transform: translateX(3px); } .xn-foot-tel { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: .5px; margin: 4px 0 12px; } .xn-foot-tel i { color: var(--c-cyan); margin-right: 8px; } .xn-foot-qr { width: 92px; height: 92px; border-radius: 5px; background: #fff; padding: 5px; margin-top: 6px; } .xn-foot-qr-text { font-size: 12.5px; color: #8fa6bf; margin-top: 6px; } .xn-copyright { border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 0 22px; text-align: center; font-size: 13px; color: #8fa6bf; line-height: 2; } .xn-copyright a { color: #9fb6cd; } .xn-copyright a:hover { color: #fff; } .xn-copyright img { width: 15px; height: auto; vertical-align: -2px; margin-right: 4px; } /* ---------------------------------------------------------------- 回到顶部 */ .scrollup, .xn-top { position: fixed; right: 24px; bottom: 26px; z-index: 800; width: 46px; height: 46px; border-radius: 6px; border: 0; display: flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-size: 18px; box-shadow: 0 12px 28px rgba(5, 89, 153, .34); opacity: 0; visibility: hidden; transition: .25s; } .scrollup.show, .xn-top.show { opacity: 1; visibility: visible; } .scrollup:hover, .xn-top:hover { color: #fff; transform: translateY(-2px); } .scrollup i, .xn-top i { margin: 0 !important; color: #fff; } /* ---------------------------------------------------------------- 响应式 */ @media (max-width: 1200px) { .xn-foot-grid { grid-template-columns: 1.3fr 1fr 1fr; } .kljDiv { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 991px) { .xn-header .xn-wrap { height: 66px; } .xn-burger { display: flex; } .xn-head-cta { display: none; } .xn-nav { position: fixed; left: 0; right: 0; top: 66px; bottom: 0; margin: 0; padding: 16px 20px 40px; background: #fff; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: .22s var(--ease); box-shadow: var(--sh-3); } .xn-nav.is-open { transform: none; opacity: 1; visibility: visible; } .xn-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; } .xn-nav > ul > li > a { padding: 13px 14px; border-radius: 5px; font-size: 16px; } .xn-nav .xn-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: var(--c-soft); max-height: 0; overflow: hidden; padding: 0 8px; margin: 0 0 4px; border-radius: 5px; transition: max-height .3s var(--ease); } .xn-nav li.is-open > .xn-sub { max-height: 70vh; overflow-y: auto; padding: 8px; } .xn-nav li:hover > .xn-sub { max-height: 0; } /* 移动端只用点击展开 */ .xn-nav li.is-open > .xn-sub { max-height: 70vh; } .content-list3, .hrglDiv, .pdsbDiv, .kfhjgkGntdBox_RFID9, .yyjzNr2f { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content-list3 ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .kljDiv { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xn-section { padding: 44px 0; } .xn-hero .xn-wrap { padding: 38px 24px 36px; } .xn-hero-carousel { aspect-ratio: 16 / 9; } .xn-hero-bar .xn-wrap { flex-direction: column; align-items: flex-start; gap: 22px; } .xn-hero-stats { gap: 24px; } } @media (max-width: 640px) { body { font-size: 15.5px; } .xn-wrap { padding: 0 18px; } .xn-logo img { height: 34px; } .xn-logo span { display: none; } .xn-hero h1 { font-size: 23px; } .xn-hero .xn-hero-sub { font-size: 14.5px; } .content-list3, .hrglDiv, .pdsbDiv, .kfhjgkGntdBox_RFID9, .yyjzNr2f, .kljDiv { grid-template-columns: minmax(0, 1fr); } .content-list3 ul { grid-template-columns: minmax(0, 1fr) !important; } .xn-foot-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } .xn-section { padding: 34px 0; } .xn-btn { padding: 11px 20px; font-size: 14.5px; } .xn-sec-head { margin-bottom: 26px; } } /* 打印 */ @media print { .xn-header, .xn-footer, .xn-top, .scrollup { display: none !important; } body { font-size: 12pt; color: #000; } .xn-main .yyjzBox, .content-warp, table.tabtrtd { box-shadow: none !important; } } /* ---------------------------------------------------------------- 正文详情页卡片化（新闻/公告等 #content3 页） */ .xn-main #content3 { background: var(--c-soft) !important; padding: 40px 0 56px; } .xn-main #content3 > .container10 { width: auto; max-width: 1000px; margin: 0 auto; padding: 38px 44px 46px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-1); } .xn-main #content3 .content-group-title3 { margin: 0 0 14px; padding: 0 0 16px; border-bottom: 2px solid var(--c-line); font-size: 26px; line-height: 1.5; font-weight: 800; color: var(--c-navy); letter-spacing: .2px; } .xn-main #content3 hr { border: 0; border-top: 1px solid var(--c-line); margin: 18px 0 22px; } .xn-main #content3 p { margin: 0 0 16px; font-size: 16px; line-height: 1.95; color: var(--c-ink-2); } .xn-main #content3 p[style*="center"] { margin: 22px 0; } .xn-main #content3 img { max-width: 100%; height: auto; border-radius: var(--r-sm); } .xn-main #content3 p.newscontent { margin: 30px 0 12px; padding-left: 13px; border-left: 4px solid var(--c-cyan); font-size: 18px; font-weight: 800; color: var(--c-navy); } .xn-main #content3 p.newscontent1 { margin: 18px 0 8px; font-size: 16.5px; font-weight: 700; color: var(--c-blue); } @media (max-width: 767px) { .xn-main #content3 > .container10 { padding: 22px 18px 28px; border-radius: 0; border-left: 0; border-right: 0; } .xn-main #content3 .content-group-title3 { font-size: 20px; } .xn-main #content3 p { font-size: 15.5px; } } /* ---------------------------------------------------------------- 首页轮播：产品实拍图（右侧悬浮） */ .xn-hero-slide img.xn-hero-device { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: auto !important; height: 76% !important; max-width: 46%; object-fit: contain; filter: drop-shadow(0 16px 30px rgba(4, 20, 42, .45)); pointer-events: none; } @media (max-width: 900px) { .xn-hero-slide img.xn-hero-device { height: 58% !important; max-width: 54%; right: 3%; } } /* ---------------------------------------------------------------- 正文统一块（normalize.php 产出） */ .xn-figure { text-align: center !important; margin: 22px 0 !important; } .xn-figure img, .xn-main img { max-width: 100%; height: auto; } .xn-figure img { display: inline-block; border-radius: 3px; } .xn-table-card { margin: 22px 0; background: #fff; border: 1px solid var(--c-line); border-radius: 6px; box-shadow: var(--sh-1); overflow-x: auto; } .xn-table-card table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; margin: 0; } .xn-table-card th { padding: 12px 15px; text-align: left; white-space: nowrap; background: var(--c-soft-2); color: var(--c-navy); font-weight: 700; border-bottom: 1px solid var(--c-line); } .xn-table-card td { padding: 11px 15px; color: var(--c-ink-2); border-bottom: 1px solid var(--c-line); } .xn-table-card tr:last-child td { border-bottom: 0; } .xn-table-card tbody tr:nth-child(even) td { background: #fafcff; } @media (max-width: 767px) { .xn-table-card th, .xn-table-card td { padding: 9px 11px; font-size: 14px; } .xn-figure { margin: 16px 0 !important; } } /* ---------------------------------------------------------------- 产品/方案页：锚点标签条 + 图标卡网格 */ .xn-main .nav-v1, .xn-main .top1, .xn-main .header1, .xn-main .product_big_bg1 { background: transparent !important; border: 0 !important; } .xn-main .menu1 { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 26px; padding: 0; list-style: none; border: 0 !important; background: transparent !important; } .xn-main .menu1 > li { margin: 0 !important; float: none !important; width: auto !important; } .xn-main .menu1 > li > a { display: block; padding: 9px 18px; border: 1px solid var(--c-line); border-radius: 4px; background: #fff; color: var(--c-ink-2); font-size: 15px; font-weight: 600; transition: .18s var(--ease); } .xn-main .menu1 > li > a:hover, .xn-main .menu1 > li > a.on { background: var(--c-blue); border-color: var(--c-blue); color: #fff; text-decoration: none; } .xn-main .titleDiv { border: 0 !important; background: transparent !important; margin: 34px 0 14px; padding: 0 !important; } .xn-main .titleDiv h2, .xn-main .content-group-title3 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 0 0 13px; font-size: 21px; font-weight: 800; color: var(--c-navy); border-left: 4px solid var(--c-blue); } .xn-main .titleDiv h2 > i { display: none !important; } .xn-main .bgWhite { background: transparent !important; padding: 0 !important; } .xn-main .kljDiv { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 8px; } .xn-main .kljDiv .gydyklBox01 { float: none !important; width: auto !important; margin: 0 !important; padding: 22px 18px !important; background: #fff; border: 1px solid var(--c-line); border-radius: 6px; text-align: center; box-shadow: var(--sh-1); transition: .2s var(--ease); } .xn-main .kljDiv .gydyklBox01:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #cfdcea; } .xn-main .kljDiv .picDiv { height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .xn-main .kljDiv .picDiv img { max-height: 56px; width: auto; } .xn-main .kljDiv h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 800; color: var(--c-navy); } .xn-main .kljDiv p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--c-ink-3); } @media (max-width: 991px) { .xn-main .kljDiv { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .xn-main .kljDiv { grid-template-columns: 1fr; } .xn-main .menu1 > li > a { padding: 8px 14px; font-size: 14px; } } /* 修正：标签条左对齐、图标卡自适应列宽 */ .xn-main .nav-v1, .xn-main .header1, .xn-main .top1 { text-align: left !important; } .xn-main .menu1 { justify-content: flex-start !important; margin-left: 0 !important; padding-left: 0 !important; } .xn-main .kljDiv { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; justify-content: start !important; margin-left: 0 !important; padding-left: 0 !important; width: auto !important; max-width: 100% !important; } /* 修正2：清除旧版 margin-left 偏移；网格里非卡片子元素不占位 */ .xn-main .nav-v1 { margin: 0 0 22px 0 !important; width: 100% !important; float: none !important; } .xn-main .kljDiv { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .xn-main .kljDiv > *:not(.gydyklBox01) { display: none !important; } @media (max-width: 991px) { .xn-main .kljDiv { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { .xn-main .kljDiv { grid-template-columns: 1fr !important; } } /* 修正3：图标卡改 flex（避开旧 grid 定位残留） */ .xn-main .kljDiv { display: flex !important; flex-wrap: wrap; gap: 14px; align-items: stretch; } .xn-main .kljDiv .gydyklBox01 { flex: 1 1 210px; max-width: calc(25% - 11px); } @media (max-width: 991px) { .xn-main .kljDiv .gydyklBox01 { max-width: calc(50% - 7px); } } @media (max-width: 560px) { .xn-main .kljDiv .gydyklBox01 { max-width: 100%; } } /* ---------------------------------------------------------------- 产品页：型号标签 / 参数表 / 关联产品 */ .xn-main .tabnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; padding: 0; list-style: none; } .xn-main .tabnav > li { float: none !important; margin: 0 !important; } .xn-main .tabnav > li > a { display: block; padding: 9px 20px; border: 1px solid var(--c-line); border-radius: 4px; background: #fff; color: var(--c-ink-2); font-size: 15px; font-weight: 700; } .xn-main .tabnav > li > a.on, .xn-main .tabnav > li > a:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; text-decoration: none; } .xn-main .itemtab { margin: 0 0 26px; padding: 0; border: 0; background: transparent; } .xn-main .itemtab .tabtable { margin-bottom: 14px; } .xn-main .tabtrtd { width: 100%; border-collapse: collapse; font-size: 15px; } .xn-main .tabtrtd th, .xn-main .tabtrtd td { padding: 10px 14px; border: 1px solid var(--c-line); color: var(--c-ink-2); text-align: left; } .xn-main .tabtrtd th { background: var(--c-soft-2); color: var(--c-navy); font-weight: 700; white-space: nowrap; } .xn-main .tabimg { text-align: center; margin: 12px 0 6px; } .xn-main .tabimg img { max-width: 100%; height: auto; } .xn-main .yyjzNr2f { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; } .xn-main .yyjzBox { flex: 1 1 280px; max-width: calc(33.333% - 10px); margin: 0 !important; float: none !important; padding: 20px 18px !important; background: #fff; border: 1px solid var(--c-line); border-radius: 6px; box-shadow: var(--sh-1); } .xn-main .yyjzBox h3, .xn-main .yyjzBox h4 { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; color: var(--c-navy); } .xn-main .yyjzBox p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--c-ink-3); } .xn-main .zhyq_xjbx_Box { margin-top: 14px; } .xn-main .xjbxNr01 { float: none !important; display: inline-flex; align-items: center; gap: 8px; margin: 0 10px 10px 0 !important; padding: 10px 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 4px; font-size: 15px; color: var(--c-ink-2); } .xn-main .pdsbDiv { display: flex; flex-wrap: wrap; gap: 16px; } .xn-main .main_poduct { flex: 1 1 190px; max-width: calc(20% - 13px); margin: 0 !important; float: none !important; padding: 14px !important; background: #fff; border: 1px solid var(--c-line); border-radius: 6px; box-shadow: var(--sh-1); text-align: center; transition: .2s var(--ease); } .xn-main .main_poduct:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .xn-main .main_poduct img { max-width: 100%; height: auto; margin-bottom: 8px; } .xn-main .product_main p, .xn-main .main_poduct p { margin: 0; font-size: 14px; color: var(--c-ink-3); } @media (max-width: 991px) { .xn-main .yyjzBox { max-width: calc(50% - 7px); } .xn-main .main_poduct { max-width: calc(33.333% - 11px); } } @media (max-width: 560px) { .xn-main .yyjzBox, .xn-main .main_poduct { max-width: 100%; } .xn-main .tabtrtd th, .xn-main .tabtrtd td { padding: 8px 10px; font-size: 14px; } } /* 修正4：六宫格强制三列；参数表去掉与卡片重复的边框 */ .xn-main .yyjzBox { flex: 0 0 calc(33.333% - 10px) !important; max-width: none !important; } @media (max-width: 991px) { .xn-main .yyjzBox { flex: 0 0 calc(50% - 7px) !important; } } @media (max-width: 560px) { .xn-main .yyjzBox { flex: 1 1 100% !important; } } .xn-main .tabtable .xn-table-card { border: 0 !important; box-shadow: none !important; } .xn-main .tabtable .xn-table-card { background: transparent !important; } /* 修正5：六宫格统一用 grid，并排除占位元素 */ .xn-main .yyjzNr2f { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .xn-main .yyjzNr2f > *:not(.yyjzBox) { display: none !important; } .xn-main .yyjzBox { flex: none !important; width: auto !important; max-width: none !important; } @media (max-width: 991px) { .xn-main .yyjzNr2f { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .xn-main .yyjzNr2f { grid-template-columns: 1fr; } } /* 修正6：clearfix 伪元素在 grid 里会占一格，导致首卡右移 —— 统一清掉 */ .xn-main .kljDiv::before, .xn-main .kljDiv::after, .xn-main .yyjzNr2f::before, .xn-main .yyjzNr2f::after, .xn-main .pdsbDiv::before, .xn-main .pdsbDiv::after { content: none !important; display: none !important; } /* ---------------------------------------------------------------- 新闻列表页（.case-grids / .listCon） */ .xn-main .plan_title { margin: 0 0 18px; padding: 0; } .xn-main .plan_title h3 { margin: 0; } .xn-main .plan_title h3 > a { display: inline-block; padding: 9px 20px; border: 1px solid var(--c-line); border-radius: 4px; background: #fff; color: var(--c-ink-2); font-size: 15px; font-weight: 700; } .xn-main .plan_title h3 > a.tab-now { background: var(--c-blue); border-color: var(--c-blue); color: #fff; } .xn-main .rightListBox .listCon { display: flex; gap: 18px; align-items: flex-start; margin: 0 0 14px; padding: 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 6px; box-shadow: var(--sh-1); transition: .2s var(--ease); } .xn-main .rightListBox .listCon:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: #cfdcea; } .xn-main .rightListBox .imgPic { flex: 0 0 225px; max-width: 225px; overflow: hidden; border-radius: 4px; } .xn-main .rightListBox .imgPic img { width: 100% !important; height: auto !important; display: block; } .xn-main .rightListBox .listInfo { flex: 1 1 auto; min-width: 0; } .xn-main .rightListBox .nTitile a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; font-size: 17px; line-height: 1.55; font-weight: 800; color: var(--c-navy); } .xn-main .rightListBox .nTitile a:hover { color: var(--c-blue); text-decoration: none; } .xn-main .rightListBox .listInfo > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 10px; font-size: 14.5px; line-height: 1.8; color: var(--c-ink-3); } .xn-main .rightListBox .n_bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: 13.5px; color: var(--c-ink-3); } .xn-main .rightListBox .n_bottom a { color: var(--c-blue); font-weight: 700; } .xn-main .rightListBox .n_bottom i.cur { display: none; } @media (max-width: 640px) { .xn-main .rightListBox .listCon { flex-direction: column; gap: 12px; padding: 13px; } .xn-main .rightListBox .imgPic { flex: none; max-width: 100%; } .xn-main .rightListBox .nTitile a { font-size: 16px; } } /* ---------------------------------------------------------------- 单栏内容页（#content：关于/联系/案例等） */ .xn-main #content { background: var(--c-soft) !important; padding: 40px 0 56px; } .xn-main #content > .container { width: auto; max-width: 1000px; margin: 0 auto; padding: 36px 44px 42px; background: #fff; border: 1px solid var(--c-line); border-radius: 6px; box-shadow: var(--sh-1); } .xn-main #content .connet { margin: 26px 0 10px; } .xn-main #content .connet:first-child { margin-top: 0; } .xn-main #content .connet h3 { margin: 0; padding-left: 13px; border-left: 4px solid var(--c-blue); font-size: 21px; font-weight: 800; color: var(--c-navy); } .xn-main #content .connet a[name] { display: block; } .xn-main #content hr { border: 0; border-top: 1px solid var(--c-line); margin: 14px 0 18px !important; } .xn-main #content p, .xn-main #content address, .xn-main #content li { font-size: 16px; line-height: 1.95; color: var(--c-ink-2); font-style: normal; } .xn-main #content address { margin-bottom: 10px; font-weight: 700; color: var(--c-navy); } .xn-main #content p + p { margin-top: 12px; } /*.xn-main #content a { color: var(--c-blue); }*/ /*更改颜色边框自适应开始NEW*/ .xn-main #content a { color: #fff; } .xn-main #content a:hover { background: transparent; color: #02477b; } .content-warp2 { width: 100%; display: inline-block; padding-bottom: 20px; border: 2px solid #efefef; border-radius: 10px; background-color: #fdfcfc; height: 250px; } @media (max-width: 767px){ .content-listdrive ul li { width: 100%; } } /*更改颜色边框自适应结束NEW*/ /*下载软件文字NEW调整开始*/ .container .boxDiv_001 .boxDiv_a a h5 { color: #3475f7; font-size: 15px; } /*下载软件文字NEW调整结束*/ @media (max-width: 767px) { .xn-main #content > .container { padding: 22px 18px 26px; border: 0; border-radius: 0; } .xn-main #content .connet h3 { font-size: 18px; } .xn-main #content p, .xn-main #content address, .xn-main #content li { font-size: 15.5px; } } /* ---------------------------------------------------------------- 首页：分区节奏（对齐 cdprinter 结构） */ .is-home .xn-main > section { padding: 62px 0; } .is-home .xn-main > section.content1, .is-home .xn-main > section.clients, .is-home .xn-main > section.jumbobox:nth-of-type(even) { background: var(--c-soft); } .is-home .xn-main > section.content, .is-home .xn-main > section.content2 { background: #fff; } .is-home .xn-main h2 { margin: 0 0 10px; text-align: center; font-size: 28px; line-height: 1.35; font-weight: 800; color: var(--c-navy); letter-spacing: .2px; } .is-home .xn-main .aboutUs p, .is-home .xn-main .aboutUs1 p { margin: 0 auto 30px; max-width: 760px; text-align: center; font-size: 15.5px; line-height: 1.85; color: var(--c-ink-3); } .is-home .xn-main .container { max-width: 1240px; } @media (max-width: 767px) { .is-home .xn-main > section { padding: 40px 0; } .is-home .xn-main h2 { font-size: 21px; } .is-home .xn-main .aboutUs p, .is-home .xn-main .aboutUs1 p { margin-bottom: 20px; font-size: 15px; } } /* 修正7：首页分区背景与留白强制统一（覆盖旧 style.css） */ .is-home .xn-main section { padding: 62px 0 !important; background: #fff !important; } .is-home .xn-main section.content1, .is-home .xn-main section.clients { background: var(--c-soft) !important; } .is-home .xn-main section.jumbobox { padding: 0 !important; background: #fff !important; } @media (max-width: 767px) { .is-home .xn-main section { padding: 40px 0 !important; } } /* 修正8：首页产品卡片内部统一（左对齐 + 等高 + 按钮贴底） */ .is-home .content-warp .content-info { display: flex !important; flex-direction: column; height: 100%; padding: 18px 20px 20px !important; text-align: left !important; } .is-home .content-warp .content-info h3 { margin: 0 0 10px !important; font-size: 16.5px !important; line-height: 1.5 !important; font-weight: 800 !important; color: var(--c-navy) !important; text-align: left !important; } .is-home .content-warp .content-info p { flex: 1 1 auto; margin: 0 0 14px !important; font-size: 14px !important; line-height: 1.8 !important; color: var(--c-ink-3) !important; text-align: left !important; } .is-home .content-warp .content-info a, .is-home .content-warp .content-info .btn { align-self: flex-start; margin: 0 !important; padding: 8px 16px !important; border: 1px solid var(--c-line) !important; border-radius: 4px !important; background: #fff !important; color: var(--c-blue) !important; font-size: 13.5px !important; font-weight: 700 !important; } .is-home .content-warp .content-info a:hover { background: var(--c-blue) !important; border-color: var(--c-blue) !important; color: #fff !important; } /* ================================================================ 对齐 www.cdprinter.com.cn 的视觉体系（浅色 · 白卡 · 亮蓝） 来源：cdprinter 站点 assets/site.css ================================================================ */ :root { --c-blue: #0f62fe; --c-blue-d: #0b3ea8; --c-cyan: #12b5a5; --c-cyan-d: #0e9c8e; --c-ink: #0d1b2a; --c-ink-2: #39485a; --c-ink-3: #6b7b8d; --c-line: #e6ebf2; --c-soft: #f5f8fc; --c-soft-2: #eef4fe; --c-navy: #0d1b2a; --c-navy-2: #17293d; --r-sm: 10px; --r: 14px; --r-lg: 16px; --sh-1: 0 4px 16px rgba(13, 27, 42, .06); --sh-2: 0 10px 30px rgba(13, 27, 42, .10); --sh-3: 0 16px 40px rgba(13, 27, 42, .14); --grad: linear-gradient(135deg, #0f62fe, #3d8bff); --grad-soft: linear-gradient(135deg, rgba(15, 98, 254, .10), rgba(18, 181, 165, .10)); } /* 页头：白色粘顶 + 亮蓝强调 */ .xn-header { background: rgba(255, 255, 255, .94) !important; border-bottom: 1px solid var(--c-line) !important; box-shadow: none; } .xn-header.is-sticky { box-shadow: 0 6px 20px rgba(13, 27, 42, .07) !important; } .xn-logo, .xn-logo span { color: var(--c-ink) !important; } .xn-logo span { color: var(--c-ink-3) !important; } .xn-nav > ul > li > a { color: var(--c-ink-2) !important; font-weight: 600; } .xn-nav > ul > li > a:hover, .xn-nav > ul > li.is-active > a { color: var(--c-blue) !important; background: var(--c-soft-2) !important; } .xn-head-cta { background: var(--grad) !important; box-shadow: 0 8px 20px rgba(15, 98, 254, .28) !important; } .xn-burger { border-color: var(--c-line) !important; background: #fff !important; } /* 内页页首：浅色渐变（同 cdprinter .hero） */ .xn-hero:not(.xn-home-hero) { background: radial-gradient(900px 420px at 78% -10%, rgba(18, 181, 165, .16), transparent 60%), radial-gradient(800px 420px at 10% 0%, rgba(15, 98, 254, .14), transparent 55%), linear-gradient(180deg, #fbfdff, #f4f8fe) !important; color: var(--c-ink) !important; border-bottom: 1px solid var(--c-line); } .xn-hero:not(.xn-home-hero)::after { display: none !important; } .xn-hero:not(.xn-home-hero) h1, .xn-hero:not(.xn-home-hero) h2 { color: var(--c-ink) !important; letter-spacing: -.3px; } .xn-hero:not(.xn-home-hero) p { color: var(--c-ink-2) !important; } .xn-hero:not(.xn-home-hero) .xn-crumb, .xn-hero:not(.xn-home-hero) .xn-crumb a { color: var(--c-ink-3) !important; } .xn-hero:not(.xn-home-hero) .xn-btn-ghost { background: #fff !important; border-color: var(--c-line) !important; color: var(--c-ink-2) !important; } .xn-hero:not(.xn-home-hero) .xn-btn-ghost:hover { border-color: var(--c-blue) !important; color: var(--c-blue) !important; } /* 首页首屏文案条：白底深字 */ .xn-home-hero .xn-hero-bar { background: #fff !important; color: var(--c-ink) !important; border-bottom: 1px solid var(--c-line); } .xn-home-hero .xn-hero-bar h1 { color: var(--c-ink) !important; letter-spacing: -.3px; } .xn-home-hero .xn-hero-bar p { color: var(--c-ink-2) !important; } .xn-home-hero .xn-hero-stats b { color: var(--c-blue) !important; } .xn-home-hero .xn-hero-stats span { color: var(--c-ink-3) !important; } .xn-home-hero .xn-btn-ghost { background: #fff !important; border-color: var(--c-line) !important; color: var(--c-ink-2) !important; } .xn-home-hero .xn-btn-ghost:hover { border-color: var(--c-blue) !important; color: var(--c-blue) !important; } /* 容器与字号体系 */ .xn-wrap, .xn-main .container { max-width: 1180px !important; } body.xn-body { font: 16px/1.75 "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif !important; color: var(--c-ink); } .is-home .xn-main h2 { text-align: left !important; font-size: clamp(24px, 2.6vw, 32px) !important; letter-spacing: -.2px; } .is-home .xn-main .aboutUs p, .is-home .xn-main .aboutUs1 p { text-align: left !important; margin: 0 0 28px !important; max-width: none !important; } /* 卡片 / 按钮统一为 cdprinter 语言 */ .xn-main .card, .xn-main .main_poduct, .xn-main .yyjzBox, .xn-main .gydyklBox01, .xn-main .listCon, .xn-main .content-warp .content-info { border-radius: var(--r) !important; border-color: var(--c-line) !important; box-shadow: var(--sh-1) !important; } .xn-main .card:hover, .xn-main .main_poduct:hover, .xn-main .yyjzBox:hover, .xn-main .gydyklBox01:hover, .xn-main .listCon:hover { transform: translateY(-4px); box-shadow: var(--sh-2) !important; border-color: #d5e3ff !important; } .xn-btn-primary { background: var(--grad) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(15, 98, 254, .28) !important; border: 0 !important; } .xn-btn-primary:hover { background: var(--grad) !important; box-shadow: 0 14px 30px rgba(15, 98, 254, .34) !important; } .xn-main .menu1 > li > a.on, .xn-main .menu1 > li > a:hover, .xn-main .tabnav > li > a.on, .xn-main .tabnav > li > a:hover, .xn-main .plan_title h3 > a.tab-now { background: var(--c-blue) !important; border-color: var(--c-blue) !important; } .xn-main .xn-table-card th { background: var(--c-soft-2) !important; color: var(--c-ink) !important; } .xn-main .titleDiv h2, .xn-main .connet h3, .xn-main #content3 .content-group-title3 { border-left-color: var(--c-blue) !important; } /* 页脚：深墨蓝 + 渐变短线（同 cdprinter .site-footer） */ .xn-footer { background: #0d1b2a !important; color: #c7d2dd !important; } .xn-footer h4, .xn-footer h5, .xn-footer .widgetheading { color: #fff !important; position: relative; padding-bottom: 10px; margin-bottom: 14px; font-size: 15px !important; } .xn-footer h4::after, .xn-footer h5::after, .xn-footer .widgetheading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #0f62fe, #12b5a5); } .xn-footer a { color: #c7d2dd !important; } .xn-footer a:hover { color: #fff !important; } /* ---------------------------------------------------------------- 首页后半段：方案卡 / 行业瓦片 / 新闻列表 */ .is-home .content-list3 > ul, .is-home .content-list4 > ul { width: auto !important; margin: 0 !important; padding: 0 !important; } .is-home .hovereffect { position: relative; overflow: hidden; border-radius: var(--r); background: #fff; border: 1px solid var(--c-line); box-shadow: var(--sh-1); transition: .22s var(--ease); } .is-home .hovereffect:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: #d5e3ff; } .is-home .hovereffect > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: none !important; } .is-home .overlay, .is-home .hovereffect .overlay { position: absolute; inset: auto 0 0 0; padding: 34px 16px 14px; background: linear-gradient(180deg, rgba(13, 27, 42, 0), rgba(13, 27, 42, .82) 72%) !important; transform: none !important; opacity: 1 !important; } .is-home .overlay h4 { margin: 0; color: #fff !important; font-size: 15.5px; font-weight: 700; line-height: 1.5; transform: none !important; text-align: left; } .is-home .overlay p { margin: 4px 0 0; color: rgba(255, 255, 255, .78) !important; font-size: 13px; line-height: 1.6; transform: none !important; } .is-home .clients .item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 14px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-1); transition: .22s var(--ease); } .is-home .clients .item:hover { transform: translateY(-4px); border-color: #d5e3ff; box-shadow: var(--sh-2); } .is-home .clients .item img { max-height: 46px; width: auto; margin: 0 !important; } .is-home .clients .item p, .is-home .clients .item h4 { margin: 0 !important; font-size: 14.5px; color: var(--c-ink-2); text-align: center; } .is-home .content-list4 > ul > li { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-1); padding: 16px 18px; margin: 0 0 12px !important; transition: .22s var(--ease); list-style: none; } .is-home .content-list4 > ul > li:hover { transform: translateY(-3px); border-color: #d5e3ff; box-shadow: var(--sh-2); } .is-home .content-list4 h4, .is-home .content-list4 h3 { margin: 0 0 6px !important; font-size: 16px !important; font-weight: 700; color: var(--c-ink); } .is-home .content-list4 p { margin: 0 !important; font-size: 14px; line-height: 1.75; color: var(--c-ink-3); } /* 修正9：解决方案区 li / content-warp1 / content-img 宽度被旧样式置 0，导致卡片不可见 */ .is-home .content-list3 > ul > li { width: auto !important; min-width: 0 !important; float: none !important; } .is-home .content-list3 .content-warp1, .is-home .content-list3 .content-img { width: 100% !important; float: none !important; height: auto !important; } .is-home .content-list3 .hovereffect { width: 100% !important; } /* 修正10：解决方案 ul 宽度与列定义被旧样式锁死为 0 */ .is-home .content-list3 > ul { width: 100% !important; max-width: 100% !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 16px !important; row-gap: 16px !important; } .is-home .content-list3 > ul > li { width: 100% !important; } @media (max-width: 991px) { .is-home .content-list3 > ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { .is-home .content-list3 > ul { grid-template-columns: 1fr !important; } } /* 顶部信息条（对齐 cdprinter 的 .topbar） */ .xn-topbar { background: var(--c-soft); border-bottom: 1px solid var(--c-line); font-size: 13px; color: var(--c-ink-3); } .xn-topbar .xn-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 38px; } .xn-topbar a { color: var(--c-ink-2); } .xn-topbar .tel { font-weight: 700; color: var(--c-blue); } /* 导航去掉胶囊，改为 cdprinter 式下划线激活 */ .xn-nav > ul > li > a { border-radius: 0 !important; padding: 10px 2px !important; margin: 0 14px; position: relative; } .xn-nav > ul > li > a:hover, .xn-nav > ul > li.is-active > a { background: transparent !important; color: var(--c-blue) !important; } .xn-nav > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--c-blue); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); } .xn-nav > ul > li > a:hover::after, .xn-nav > ul > li.is-active > a::after { transform: scaleX(1); } @media (max-width: 991px) { .xn-nav > ul > li > a { margin: 0 !important; padding: 12px 8px !important; } .xn-nav > ul > li > a::after { display: none; } .xn-topbar .xn-wrap { justify-content: center; gap: 10px; font-size: 12px; } } /* 修正11：导航单行不换行（7 项 + CTA 要在 1366 宽度里放下） */ .xn-header .xn-wrap { gap: 18px !important; } .xn-logo span { display: none; } .xn-nav > ul { display: flex !important; flex-wrap: nowrap !important; } .xn-nav > ul > li > a { margin: 0 11px !important; font-size: 15px !important; white-space: nowrap; } .xn-head-cta { padding: 9px 16px !important; font-size: 14px !important; } @media (max-width: 1200px) { .xn-nav > ul > li > a { margin: 0 8px !important; font-size: 14.5px !important; } } /* 修正12：首页新闻/公告区（.content-list4）宽度为 0，内容不可见 */ .is-home .content-list4, .is-home .content-list4 > ul { width: 100% !important; max-width: 100% !important; } .is-home .content-list4 > ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } @media (max-width: 767px) { .is-home .content-list4 > ul { grid-template-columns: 1fr !important; } } /* 修正13：product8 等页旧容器宽度为 0 */ .xn-main .mt50 { width: 100% !important; max-width: 100% !important; height: auto !important; float: none !important; } .xn-main ul.menu { width: 100% !important; float: none !important; } /* 修正14：ul.menu 高度为 0（子项浮动未清除） */ .xn-main ul.menu { display: flex !important; flex-wrap: wrap; gap: 10px; height: auto !important; } .xn-main ul.menu > li { float: none !important; margin: 0 !important; } .xn-main ul.menu > li > a { display: block; padding: 8px 16px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; color: var(--c-ink-2); font-size: 14.5px; } .xn-main ul.menu > li > a:hover { border-color: var(--c-blue); color: var(--c-blue); } /* 修正15：导航子树颜色统一（压掉 Bootstrap/旧 CSS 的 a:hover 干扰） */ .xn-nav a, .xn-nav a:link, .xn-nav a:visited { color: var(--c-ink-2) !important; background: transparent !important; text-decoration: none !important; } .xn-nav > ul > li > a:hover, .xn-nav > ul > li > a:focus, .xn-nav > ul > li > a:active { color: var(--c-blue) !important; background: transparent !important; } .xn-nav > ul > li.is-active > a { color: var(--c-blue) !important; background: transparent !important; } .xn-nav .xn-sub a, .xn-nav .xn-sub a:visited { display: block; padding: 7px 12px; border-radius: 8px; color: var(--c-ink-2) !important; background: transparent !important; font-size: 14px; line-height: 1.5; } .xn-nav .xn-sub a:hover, .xn-nav .xn-sub a:focus, .xn-nav .xn-sub a:active { color: var(--c-blue) !important; background: var(--c-soft-2) !important; } .xn-nav .xn-sub .xn-group-t { display: block; margin: 6px 0 4px; padding: 0 12px; color: var(--c-ink-3) !important; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; } .xn-head-cta, .xn-head-cta:link, .xn-head-cta:visited, .xn-head-cta:hover, .xn-head-cta:focus { color: #fff !important; } @media (max-width: 991px) { .xn-nav > ul > li > a { color: var(--c-ink) !important; } .xn-nav .xn-sub a { padding: 9px 12px; font-size: 14.5px; } } /* 修正16：去掉菜单项被旧样式加的底色方块与点击焦点框 */ .xn-nav > ul > li, .xn-nav > ul > li.is-active, .xn-nav > ul > li.is-open { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; } .xn-nav > ul > li > a, .xn-nav .xn-sub a { background: transparent !important; box-shadow: none !important; border: 0 !important; } .xn-nav a:focus, .xn-nav a:focus-visible, .xn-nav a:active, .xn-head-cta:focus, .xn-head-cta:focus-visible { outline: 0 !important; outline-offset: 0 !important; box-shadow: none !important; } .xn-nav > ul > li > a::after { bottom: -2px; } /* ---------------------------------------------------------------- 页脚：对齐 cdprinter 五栏版式 */ .xn-footer .xn-foot-grid { display: grid !important; grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr !important; gap: 40px 32px !important; align-items: start; } .xn-footer .xn-foot-col { float: none !important; width: auto !important; padding: 0 !important; } .xn-footer .xn-foot-col:first-child { padding-right: 8px !important; } .xn-footer h4, .xn-footer h5, .xn-footer .widgetheading { margin: 0 0 16px !important; font-size: 15px !important; font-weight: 700 !important; } .xn-footer .xn-foot-col ul { margin: 0; padding: 0; list-style: none; } .xn-footer .xn-foot-col li { margin: 0 0 9px !important; line-height: 1.6; } .xn-footer .xn-foot-col a, .xn-footer .xn-foot-col p, .xn-footer address { font-size: 13.5px !important; line-height: 1.75 !important; color: #c7d2dd !important; font-style: normal; } .xn-footer .xn-foot-col a:hover { color: #fff !important; text-decoration: none !important; } .xn-footer .xn-copyright { margin-top: 34px !important; padding-top: 18px !important; border-top: 1px solid rgba(255, 255, 255, .12) !important; font-size: 13px !important; color: #93a3b5 !important; text-align: center; } @media (max-width: 991px) { .xn-footer .xn-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 24px !important; } } @media (max-width: 560px) { .xn-footer .xn-foot-grid { grid-template-columns: 1fr !important; } } /* 修正17：内容页小标题去掉旧 CSS 的浅蓝底条，只保留左侧竖线 */ .xn-main #content .connet h3, .xn-main #content3 .content-group-title3, .xn-main .titleDiv h2 { background: transparent !important; } .xn-main #content .connet { background: transparent !important; border: 0 !important; } /* 修正18：首页标题带与内容合为一体（去除“标题浮空 + 大留白”的割裂感） */ .is-home .jumbobox { padding: 58px 0 0 !important; } .is-home .jumbobox + section, .is-home .jumbobox + div { padding-top: 26px !important; } .is-home .jumbobox:has(+ .content), .is-home .jumbobox:has(+ .clients) { background: var(--c-soft) !important; } .is-home .jumbobox:has(+ .content1), .is-home .jumbobox:has(+ .content2) { background: #fff !important; } .is-home .jumbobox h2 { margin: 0 !important; } /*大标题NEW开始*/ /*大标题NEW结束*/ /* 修正19：适用行业用真实网格，去掉轮播克隆轨，避免 1400px 高的空档 */ .is-home .clients { padding: 26px 0 62px !important; } .is-home .clients-slider { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 14px !important; width: 100% !important; transform: none !important; } .is-home .clients-slider .item { width: auto !important; float: none !important; } .is-home .clients-slider .owl-item.cloned, .is-home .clients-slider .owl-stage-outer { display: none !important; } @media (max-width: 991px) { .is-home .clients-slider { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { .is-home .clients-slider { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* 修正20：标题带继承下方底色（提高权重） */ .is-home .xn-main section.jumbobox:has(+ section.content), .is-home .xn-main section.jumbobox:has(+ section.clients) { background: var(--c-soft) !important; } .is-home .xn-main section.jumbobox:has(+ section.content1), .is-home .xn-main section.jumbobox:has(+ section.content2) { background: #fff !important; } .is-home .xn-main section.jumbobox + section { padding-top: 26px !important; } /* 修正21：Banner 文案层（左侧标题 + 说明，恢复老站信息） */ .xn-hero-cap { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); max-width: 42%; color: #fff; text-shadow: 0 2px 12px rgba(4, 20, 42, .55); } .xn-hero-cap h3 { margin: 0 0 10px !important; font-size: clamp(20px, 2.4vw, 34px) !important; font-weight: 800 !important; line-height: 1.28 !important; color: #fff !important; } .xn-hero-cap p { margin: 0 !important; font-size: clamp(13px, 1.15vw, 17px) !important; line-height: 1.7 !important; color: rgba(255, 255, 255, .92) !important; } @media (max-width: 767px) { .xn-hero-cap { left: 5%; right: 5%; max-width: none; top: auto; bottom: 12px; transform: none; } .xn-hero-cap h3 { font-size: 16px !important; margin-bottom: 4px !important; } .xn-hero-cap p { font-size: 12px !important; } } /* 修正22：首页标题带内容左对齐到容器；去掉居中的装饰短横线 */ .is-home .jumbobox .aboutUs, .is-home .jumbobox .row, .is-home .jumbobox .col-lg-12 { max-width: 1180px !important; margin: 0 auto !important; padding: 0 24px !important; } .is-home .jumbobox h2 { padding: 0 !important; } .is-home .jumbobox hr.break-small, .is-home .jumbobox hr.break-line, .is-home .jumbobox .break-small { display: none !important; } /* 修正23：卡片按内容高度排列，不再被同行最高卡拉高留白 */ .is-home .content-list3 > ul { align-items: start !important; } .is-home .content-warp .content-info { height: auto !important; } /* 修正24：产品卡图片统一 4:3，控制卡片高度 */ .is-home .content-warp .content-img { overflow: hidden; } .is-home .content-warp .content-img img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; } /* 修正25：适用行业瓦片（清掉旧轮播定宽 30px 与嵌套 wrapper） */ .is-home .clients .clients-slider, .is-home .clients .owl-carousel, .is-home .clients .owl-wrapper, .is-home .clients .owl-stage, .is-home .clients .owl-stage-outer, .is-home .clients .owl-item, .is-home .clients .clients-slider > div { display: block !important; width: 100% !important; max-width: 100% !important; transform: none !important; transition: none !important; position: static !important; margin: 0 !important; } .is-home .clients .clients-slider { display: flex !important; flex-wrap: wrap; gap: 14px; } .is-home .clients .item { flex: 0 0 calc(20% - 11.2px) !important; width: auto !important; min-width: 0 !important; float: none !important; margin: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 12px !important; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; } .is-home .clients .item img { width: 76px !important; max-width: 76px !important; height: auto !important; margin: 0 !important; } .is-home .clients .item img:first-child { display: none !important; } .is-home .clients .owl-item.cloned, .is-home .clients .cloned { display: none !important; } @media (max-width: 991px) { .is-home .clients .item { flex: 0 0 calc(33.333% - 9.4px) !important; } } @media (max-width: 560px) { .is-home .clients .item { flex: 0 0 calc(50% - 7px) !important; } } /* 修正26：用 display:contents 拆掉轮播嵌套层，让瓦片真正进入 5 列 flex 网格 */ .is-home .clients .owl-item, .is-home .clients .owl-wrapper, .is-home .clients .owl-stage, .is-home .clients .owl-stage-outer, .is-home .clients .clients-slider > div { display: contents !important; } .is-home .clients .clients-slider { display: flex !important; flex-wrap: wrap; gap: 14px; width: 100% !important; } .is-home .clients .item { flex: 0 0 calc(20% - 11.2px) !important; width: auto !important; } /* 修正27：兜底——瓦片用浮动五列排布（不依赖轮播容器） */ .is-home .clients .clients-slider { display: block !important; } .is-home .clients .owl-stage-outer, .is-home .clients .owl-stage, .is-home .clients .owl-wrapper { display: block !important; } .is-home .clients .owl-item { display: block !important; width: calc(20% - 11.2px) !important; min-width: 0 !important; float: left !important; margin: 0 14px 14px 0 !important; transform: none !important; } .is-home .clients .item { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 100% !important; height: 118px !important; margin: 0 !important; float: none !important; padding: 14px 10px !important; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; } .is-home .clients .item img { width: 74px !important; max-width: 74px !important; height: auto !important; margin: 0 auto !important; } .is-home .clients .item img:first-child { display: none !important; } .is-home .clients .cloned, .is-home .clients .owl-item.cloned { display: none !important; } .is-home .clients .clients-slider::after { content: ""; display: block; clear: both; } @media (max-width: 991px) { .is-home .clients .owl-item { width: calc(33.333% - 9.4px) !important; } } @media (max-width: 560px) { .is-home .clients .owl-item { width: calc(50% - 7px) !important; } } /* 修正28：恢复被 display:contents 拆掉的直接子容器 */ .is-home .clients .clients-slider > div, .is-home .clients .clients-slider > div > div { display: block !important; width: 100% !important; max-width: 100% !important; } /* 修正29：瓦片容器最终为 flex（item 的直接父级就是 .clients-slider） */ .is-home .clients .clients-slider { display: flex !important; flex-wrap: wrap !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; } .is-home .clients .item { flex: 0 0 calc(20% - 11.2px) !important; width: auto !important; min-width: 0 !important; height: 118px !important; margin: 0 !important; float: none !important; } @media (max-width: 991px) { .is-home .clients .item { flex: 0 0 calc(33.333% - 9.4px) !important; } } @media (max-width: 560px) { .is-home .clients .item { flex: 0 0 calc(50% - 7px) !important; } } /* 修正30：适用行业改为静态 10 格（彻底脱离旧轮播） */ .is-home .client-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; width: 100%; margin: 6px 0 0; } .is-home .client-tile { display: flex; align-items: center; justify-content: center; height: 112px; padding: 16px 12px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-1); transition: .22s var(--ease); } .is-home .client-tile:hover { transform: translateY(-3px); border-color: #d5e3ff; box-shadow: var(--sh-2); } .is-home .client-tile img { max-width: 100%; max-height: 72px; width: auto; height: auto; } @media (max-width: 991px) { .is-home .client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .is-home .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 修正31：适用行业 logo 放大（瓦片加高、图片占满可用宽度） */ .is-home .client-tile { height: 150px !important; padding: 18px 16px !important; } .is-home .client-tile img { max-width: 100% !important; width: auto !important; max-height: 112px !important; height: auto !important; object-fit: contain; image-rendering: auto; } @media (max-width: 991px) { .is-home .client-tile { height: 132px !important; } .is-home .client-tile img { max-height: 96px !important; } } @media (max-width: 560px) { .is-home .client-tile { height: 116px !important; } .is-home .client-tile img { max-height: 84px !important; } } /* 修正32：瓦片内 logo 之前被旧规则 img:first-child{display:none} 隐藏 */ .is-home .client-tile img, .is-home .clients .client-tile img:first-child { display: block !important; visibility: visible !important; opacity: 1 !important; max-width: 100% !important; max-height: 112px !important; width: auto !important; height: auto !important; } /* 修正33：合作平台三个入口改为文字卡片（弃用低清店铺截图） */ .is-home .xn-plat { background: #fff !important; padding: 26px 0 62px !important; } .is-home .xn-plat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .is-home .xn-plat-card { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-1); transition: .22s var(--ease); text-decoration: none; } .is-home .xn-plat-card:hover { transform: translateY(-3px); border-color: #d5e3ff; box-shadow: var(--sh-2); text-decoration: none; } .is-home .xn-plat-card strong { font-size: 17px; font-weight: 800; color: var(--c-ink); } .is-home .xn-plat-card span { font-size: 14px; line-height: 1.7; color: var(--c-ink-3); } .is-home .xn-plat-card em { margin-top: 6px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--c-blue); } @media (max-width: 767px) { .is-home .xn-plat-grid { grid-template-columns: 1fr; } } /* 修正34：合作平台卡片被旧 CSS 压成 50px 宽 */ .is-home .xn-plat .container { width: 100% !important; max-width: 1180px !important; padding: 0 24px !important; } .is-home .xn-plat-grid { display: flex !important; flex-wrap: wrap; gap: 16px; width: 100% !important; } .is-home .xn-plat-card { flex: 0 0 calc(33.333% - 10.7px) !important; width: auto !important; float: none !important; min-width: 0 !important; display: flex !important; } .is-home .xn-plat-card strong, .is-home .xn-plat-card span, .is-home .xn-plat-card em { display: block !important; width: auto !important; float: none !important; } @media (max-width: 767px) { .is-home .xn-plat-card { flex: 1 1 100% !important; } } /* 修正35：区块标题与内容左边缘严格对齐，字号收敛 */ .is-home .jumbobox .row, .is-home .jumbobox .col-lg-12 { padding: 0 !important; margin: 0 !important; } .is-home .jumbobox .aboutUs { max-width: 1180px !important; margin: 0 auto !important; padding: 0 24px !important; } .is-home .jumbobox h2 { font-size: 22px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--c-ink) !important; margin: 0 !important; padding: 0 !important; } .is-home .jumbobox { padding: 54px 0 0 !important; } @media (max-width: 767px) { .is-home .jumbobox h2 { font-size: 18px !important; } .is-home .jumbobox { padding: 38px 0 0 !important; } } /* 修正36：适用行业标题带的容器结构不同，统一补上容器宽度 */ .is-home .jumbobox .container, .is-home .jumbobox > div:not(.aboutUs) { max-width: 1180px !important; margin: 0 auto !important; padding: 0 24px !important; width: 100% !important; } .is-home .jumbobox > div:not(.aboutUs) > div { padding: 0 !important; margin: 0 !important; } /* 修正37：删除首页四个区块标题带（智能化产品/解决方案/适用行业/相关资质） */ .is-home .xn-main section.jumbobox { display: none !important; } .is-home .xn-main section.content, .is-home .xn-main section.content1, .is-home .xn-main section.content2, .is-home .xn-main section.clients { padding-top: 64px !important; } .is-home .xn-main section.clients { padding-bottom: 64px !important; } /* 修正38：标题带隐藏后，各内容区块恢复自身留白 */ .is-home .xn-main section.jumbobox + section { padding-top: 64px !important; } .is-home .xn-main section.content { padding: 64px 0 68px !important; } /* 修正39：首页整体感——统一浅底画布 + 收窄区块间距 */ .is-home .xn-main { background: var(--c-soft) !important; } .is-home .xn-main section, .is-home .xn-main .xn-plat { background: transparent !important; padding: 40px 0 !important; } .is-home .xn-main section.xn-home-hero, .is-home .xn-main .xn-hero { padding: 0 !important; background: transparent !important; } .is-home .xn-main section.clients { padding: 40px 0 !important; } .is-home .xn-main #content2 .content-list3 img { display: block; width: 100%; height: auto; padding: 10px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-1); } @media (max-width: 767px) { .is-home .xn-main section, .is-home .xn-main .xn-plat { padding: 26px 0 !important; } } /* 修正40：强制统一各内容区块留白与底色（覆盖此前分散规则） */ .is-home .xn-main section.content, .is-home .xn-main section.content1, .is-home .xn-main section.content2, .is-home .xn-main section.clients { padding: 40px 0 !important; background: transparent !important; } /* 修正41：覆盖“标题带 + 区块”选择器带来的 64px 与浅底 */ .is-home .xn-main section.jumbobox + section.content, .is-home .xn-main section.jumbobox + section.content1, .is-home .xn-main section.jumbobox + section.content2, .is-home .xn-main section.jumbobox + section.clients { padding: 40px 0 !important; background: transparent !important; } .is-home .xn-main section.content { padding: 40px 0 !important; } /* 修正42：用 ID 级选择器最终锁定首页各区块留白与底色 */ .is-home .xn-main #content, .is-home .xn-main #content1, .is-home .xn-main #content2, .is-home .xn-main .clients, .is-home .xn-main .xn-plat { padding: 40px 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* 修正43：进一步压缩模块间距，并清掉列表自带外边距 */ .is-home .xn-main #content, .is-home .xn-main #content1, .is-home .xn-main #content2, .is-home .xn-main .clients, .is-home .xn-main .xn-plat { padding: 20px 0 !important; } .is-home .xn-main .content-list3, .is-home .xn-main .content-list3 > ul, .is-home .xn-main .content-list4, .is-home .xn-main .content-list4 > ul { margin: 0 !important; padding: 0 !important; } .is-home .xn-main .content-list3 > ul { row-gap: 12px !important; column-gap: 16px !important; } .is-home .xn-main .aboutUs, .is-home .xn-main .aboutUs1 { margin: 0 !important; padding: 0 !important; } .is-home .xn-main .container { padding-top: 0 !important; padding-bottom: 0 !important; } @media (max-width: 767px) { .is-home .xn-main #content, .is-home .xn-main #content1, .is-home .xn-main #content2, .is-home .xn-main .clients, .is-home .xn-main .xn-plat { padding: 14px 0 !important; } } /* 修正44：清掉区块内部多余空白（空网格行、空占位、零高元素边距） */ .is-home .xn-main .content-list3 > ul, .is-home .xn-main .content-list4 > ul { align-content: start !important; grid-auto-rows: min-content !important; } .is-home .xn-main li:empty, .is-home .xn-main .content-img:empty, .is-home .xn-main .aboutUs:empty, .is-home .xn-main .aboutUs1:empty, .is-home .xn-main .row:empty { display: none !important; } .is-home .xn-main .content-img { margin: 0 !important; } .is-home .xn-main .content-warp { margin: 0 !important; } .is-home .xn-main #content2 img { margin: 0 !important; } /* 修正45：content-list3 被旧样式给了固定高度，导致下方 260px 空白 */ .is-home .xn-main .content-list3, .is-home .xn-main .content-list3 > ul, .is-home .xn-main .content-list3 > ul > li { height: auto !important; min-height: 0 !important; } /* 修正49：恢复卡片容器宽度（修正48 的 width:auto 覆盖了 100%） */ .is-home .xn-main .content-list3 > ul > li > div, .is-home .xn-main .content-list3 > ul > li > div > div { display: block !important; width: 100% !important; float: none !important; height: auto !important; } .is-home .xn-main .content-list3 .hovereffect { width: 100% !important; height: auto !important; } /* 修正50：去掉 #content 等区块的旧 min-height 与列表底部留白 */ .is-home .xn-main #content, .is-home .xn-main #content1, .is-home .xn-main #content2, .is-home .xn-main .clients { min-height: 0 !important; height: auto !important; } .is-home .xn-main .content-list3 > ul > li { padding-bottom: 0 !important; margin-bottom: 0 !important; } .is-home .xn-main .content-warp { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ================================================================ 首页正文（重排后）：.hs-* 独立体系，与旧的 .content-* 结构脱钩 ================================================================ */ .is-home .hs { padding: 56px 0; background: #fff; } .is-home .hs-soft { background: var(--c-soft); } .is-home .hs .xn-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .is-home .hs-head { margin: 0 0 26px; } .is-home .hs-head h2 { margin: 0 0 6px; font-size: 25px; line-height: 1.4; font-weight: 800; color: var(--c-ink); letter-spacing: -.2px; } .is-home .hs-head p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--c-ink-3); } .is-home .hs-grid { display: grid; gap: 18px; } .is-home .hs-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .is-home .hs-card { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--sh-1); overflow: hidden; transition: .22s var(--ease); text-decoration: none; } .is-home .hs-card:hover { transform: translateY(-4px); border-color: #d5e3ff; box-shadow: var(--sh-2); text-decoration: none; } .is-home .hs-prod { display: flex; flex-direction: column; } .is-home .hs-prod-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-soft); } .is-home .hs-prod-img img { display: block; width: 100%; height: 100%; object-fit: cover; } .is-home .hs-prod-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; } .is-home .hs-prod-body h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.5; font-weight: 800; color: var(--c-ink); } .is-home .hs-prod-body p { flex: 1; margin: 0 0 16px; font-size: 14px; line-height: 1.8; color: var(--c-ink-3); } .is-home .hs-more { font-size: 14px; font-weight: 700; color: var(--c-blue); } .is-home .hs-more span { margin-left: 4px; } .is-home .hs-sol { position: relative; display: block; aspect-ratio: 4 / 3; } .is-home .hs-sol img { display: block; width: 100%; height: 100%; object-fit: cover; } .is-home .hs-sol-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 16px 14px; background: linear-gradient(180deg, rgba(13, 27, 42, 0), rgba(13, 27, 42, .86) 74%); } .is-home .hs-sol-cap span { display: block; font-size: 15px; line-height: 1.5; font-weight: 700; color: #fff; } .is-home .hs-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .is-home .hs-tile { display: flex; align-items: center; justify-content: center; height: 150px; padding: 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--sh-1); transition: .22s var(--ease); } .is-home .hs-tile:hover { transform: translateY(-3px); border-color: #d5e3ff; box-shadow: var(--sh-2); } .is-home .hs-tile img { display: block; max-width: 100%; max-height: 112px; width: auto; height: auto; } .is-home .hs-cert img { display: block; width: 100%; height: auto; padding: 10px; background: #fff; border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--sh-1); } .is-home .hs-plat { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; } .is-home .hs-plat strong { font-size: 17px; font-weight: 800; color: var(--c-ink); } .is-home .hs-plat span { font-size: 14px; line-height: 1.7; color: var(--c-ink-3); } .is-home .hs-plat em { margin-top: 6px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--c-blue); } @media (max-width: 991px) { .is-home .hs { padding: 40px 0; } .is-home .hs-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .is-home .hs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .is-home .hs { padding: 30px 0; } .is-home .hs-g3, .is-home .hs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .is-home .hs-head h2 { font-size: 20px; } .is-home .hs-tile { height: 116px; } } /* 修正51：区块标题与小字描述同一行（标题左、说明右） */ .is-home .hs-head { display: flex !important; align-items: baseline; justify-content: space-between; gap: 24px; margin: 0 0 24px !important; } .is-home .hs-head h2 { margin: 0 !important; flex: 0 0 auto; } .is-home .hs-head p { margin: 0 !important; flex: 0 1 auto; text-align: right; } @media (max-width: 767px) { .is-home .hs-head { flex-direction: column; align-items: flex-start; gap: 6px; } .is-home .hs-head p { text-align: left; } } /* ================================================================ 修正52：首屏 Banner —— 文案与设备图收进内容区，modern 轮播效果 ================================================================ */ .xn-hero-cap { left: calc(50% - 566px) !important; max-width: 46% !important; } .xn-hero-slide img.xn-hero-device { right: calc(50% - 566px) !important; height: 78% !important; max-width: 40% !important; } @media (max-width: 1240px) { .xn-hero-cap { left: 5% !important; } .xn-hero-slide img.xn-hero-device { right: 4% !important; } } /* 轮播：当前屏图片缓慢推近（Ken Burns）+ 文案上浮淡入 */ .xn-hero-slide > img:first-child { transform: scale(1.02); will-change: transform; } .xn-hero-slide.is-on > img:first-child { animation: xnKenBurns 9s ease-out forwards; } @keyframes xnKenBurns { from { transform: scale(1.02); } to { transform: scale(1.09); } } .xn-hero-cap h3, .xn-hero-cap p { opacity: 0; transform: translateY(14px); } .xn-hero-slide.is-on .xn-hero-cap h3 { animation: xnCapIn .62s var(--ease) .12s forwards; } .xn-hero-slide.is-on .xn-hero-cap p { animation: xnCapIn .62s var(--ease) .26s forwards; } @keyframes xnCapIn { to { opacity: 1; transform: none; } } /*查看更多NEW*/ .xn-hero-cap .xnda-link { display: inline-block; /* 关键：转成行内块，margin/top 才会生效 */ position: relative; top: 10px; margin: 0; border: 1px solid #fff; color: #fff; font-size: 15px; padding: 2px 14px; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); text-transform: uppercase; pointer-events: auto !important; z-index: 3; cursor: pointer; border-radius: 3px; } @media (max-width: 767px) { .xn-hero-cap a.xnda-link { top: -4px; font-size:10px !important; color: #fff; } } .xn-hero-cap { position: absolute; z-index: 2; /* 重点，把文案整体抬到设备图片上层 */ } /* 设备图保持穿透点击 */ .xn-hero-slide img.xn-hero-device { pointer-events: none !important; z-index: 1; } .xn-hero-cap .xnda-link:hover { color: #eee; background-color: rgba(44, 182, 253, 0.6); } /*更改框*/ .xnbnc h3 { text-shadow: none; color: #0092f5 !important; } .xnbnc p { text-shadow: none; color: #333333 !important; } @media (max-width: 767px) { .xnbnc h3 , .xnbnc p{ color: #fff !important; } } .xnbnc .bl_color { color: #0d72d0; border:1px solid #0d72d0; text-shadow: none; } @media (max-width: 767px) { .xnbnc .bl_color { color: #fff; border:1px solid #fff; } } /*查看更多结束*/ /* 指示器：胶囊形进度点 */ .xn-hero-dots { display: flex; gap: 8px; justify-content: center; bottom: 18px !important; } .xn-hero-dot { width: 8px !important; height: 8px !important; border-radius: 4px !important; border: 0 !important; background: rgba(255, 255, 255, .55) !important; padding: 0 !important; transition: all .28s var(--ease); } .xn-hero-dot.is-on { width: 30px !important; background: #fff !important; } /* 左右切换箭头（hover 显现） */ .xn-hero-nav { position: absolute; inset: 0; pointer-events: none; } .xn-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(13, 27, 42, .28); backdrop-filter: blur(4px); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .25s var(--ease), background .2s; } .xn-hero-arrow.prev { left: 18px; } .xn-hero-arrow.next { right: 18px; } .xn-hero-carousel:hover .xn-hero-arrow { opacity: 1; } .xn-hero-arrow:hover { background: rgba(15, 98, 254, .85); border-color: transparent; } @media (max-width: 767px) { .xn-hero-arrow { width: 36px; height: 36px; font-size: 20px; } .xn-hero-dot.is-on { width: 22px !important; } } /* 修正53：首屏恢复满宽，文案与设备图拉近 */ .is-home .xn-home-hero, .is-home .xn-home-hero .xn-hero-carousel, .xn-home-hero .xn-hero-slide { width: 100% !important; max-width: none !important; } .xn-hero-cap { left: 6% !important; max-width: 40% !important; } .xn-hero-slide img.xn-hero-device { right: 14% !important; height: 76% !important; max-width: 38% !important; } @media (max-width: 1024px) { .xn-hero-cap { left: 5% !important; max-width: 48% !important; } .xn-hero-slide img.xn-hero-device { right: 6% !important; } } /* 修正54：设备图继续左移，与文案靠拢 */ .xn-hero-slide img.xn-hero-device { right: 27% !important; height: 74% !important; max-width: 34% !important; } .xn-hero-cap { max-width: 42% !important; } @media (max-width: 1024px) { .xn-hero-slide img.xn-hero-device { right: 12% !important; max-width: 40% !important; } .xn-hero-cap { max-width: 46% !important; } } /* 修正55：设备图回原位，改为把文案右移靠近图片 */ .xn-hero-slide img.xn-hero-device { right: 14% !important; height: 76% !important; max-width: 38% !important; } .xn-hero-cap { left: 26% !important; max-width: 34% !important; } @media (max-width: 1024px) { .xn-hero-cap { left: 8% !important; max-width: 44% !important; } .xn-hero-slide img.xn-hero-device { right: 5% !important; } } @media (max-width: 767px) { .xn-hero-cap { left: 5% !important; right: 5% !important; max-width: none !important; } } /* 修正56：确保 Banner 文案始终可见（取消可能残留的淡入初始隐藏状态） */ .xn-hero-cap h3, .xn-hero-cap p { opacity: 1 !important; transform: none !important; animation: none !important; visibility: visible !important; } /* 修正57：文案位置回到中间档（既靠近图片，又不贴到中间） */ .xn-hero-cap { left: 16% !important; max-width: 36% !important; } .is-home .xn-home-hero .xn-hero-cap { left: 16% !important; } @media (max-width: 1024px) { .xn-hero-cap { left: 7% !important; max-width: 44% !important; } } /* 修正58：撤销“非 .yyjzBox 子项隐藏”——它把案例/方案链接卡也藏掉了 */ .xn-main .yyjzNr2f > a, .xn-main .yyjzNr2f > div:not(.yyjzBox) { display: block !important; } .xn-main .yyjzNr2f > a { padding: 18px 20px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-1); text-decoration: none; font-size: 14.5px; line-height: 1.75; color: var(--c-ink-2) !important; transition: .2s var(--ease); } .xn-main .yyjzNr2f > a:hover { transform: translateY(-3px); border-color: #d5e3ff; box-shadow: var(--sh-2); } .xn-main .yyjzNr2f > *:empty { display: none !important; } /* 修正59：行业页案例容器 .yyjzNr2f1 宽度为 0，导致链接文字挤成竖条 */ .xn-main .yyjzNr2f1 { display: flex !important; flex-wrap: wrap; gap: 14px; width: 100% !important; max-width: 100% !important; height: auto !important; } .xn-main .yyjzNr2f1 > a { display: block !important; flex: 1 1 calc(50% - 7px); min-width: 0 !important; padding: 18px 20px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: var(--sh-1); text-decoration: none; font-size: 14.5px; line-height: 1.8; color: var(--c-ink-2) !important; transition: .2s var(--ease); } .xn-main .yyjzNr2f1 > a:hover { transform: translateY(-3px); border-color: #d5e3ff; box-shadow: var(--sh-2); } @media (max-width: 767px) { .xn-main .yyjzNr2f1 > a { flex: 1 1 100%; } } /* ================================================================ 修正60：移动端加固（≤767px）——旧页面的定宽元素强制流体化 ================================================================ */ @media (max-width: 767px) { .xn-main * { max-width: 100% !important; } .xn-main img { width: auto !important; height: auto !important; max-width: 100% !important; } .xn-main table { min-width: 0 !important; } .xn-table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .xn-main .container, .xn-main .row, .xn-main .col-lg-12, .xn-main .col-md-12, .xn-main .content-info, .xn-main .content-img, .xn-main .content-warp, .xn-main .content-warp1, .xn-main .yyjzNr2f, .xn-main .yyjzNr2f1, .xn-main .kljDiv, .xn-main .pdsbDiv, .xn-main .tabtable, .xn-main .itemtab { width: auto !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; } .xn-main .tabtrtd th, .xn-main .tabtrtd td { white-space: normal !important; } .xn-hero-cap h3 { line-height: 1.35 !important; } } /* 修正61：移动端 Banner 文案压到图片下缘，避免压住设备图 */ @media (max-width: 767px) { .xn-hero-cap { left: 0 !important; right: 0 !important; max-width: none !important; top: auto !important; bottom: 0 !important; transform: none !important; padding: 14px 16px 16px !important; background: linear-gradient(180deg, rgba(4, 20, 42, 0), rgba(4, 20, 42, .82) 55%) !important; } .xn-hero-cap h3 { font-size: 15.5px !important; margin: 0 0 4px !important; } .xn-hero-cap p { font-size: 12px !important; line-height: 1.6 !important; } .xn-hero-slide img.xn-hero-device { height: 62% !important; right: 3% !important; top: 38% !important; } .xn-hero-dots { bottom: 6px !important; } } /* ================================================================ 修正62：产品页「产品系列」恢复为多标签切换（DS20 / DS50 / DS100 …） ================================================================ */ .xn-main .tabnav { display: flex !important; flex-wrap: wrap; gap: 8px; padding: 0; margin: 6px 0 18px; list-style: none; } .xn-main .tabnav > li { cursor: pointer; padding: 9px 20px; border: 1px solid var(--c-line); border-radius: 4px; background: #fff; color: var(--c-ink-2); font-size: 15px; font-weight: 700; transition: .18s var(--ease); user-select: none; float: none !important; } .xn-main .tabnav > li + li { margin-left: 0 !important; } .xn-main .tabnav > li:hover { border-color: var(--c-blue); color: var(--c-blue); } .xn-main .tabnav > li.on, .xn-main .tabnav > li.color { background: var(--c-blue) !important; border-color: var(--c-blue) !important; color: #fff !important; } /* 无 JS 时只显示第一组 */ .xn-main .maintab > .itemtab { display: none; } .xn-main .maintab > .itemtab:first-child { display: block; } .xn-main .maintab.js-tabs > .itemtab { display: none !important; } .xn-main .maintab.js-tabs > .itemtab.is-on { display: block !important; } /* 修正63：产品系列标签的真实容器是