:root { --wrap: 1240px; --head-h: 78px; --logo-h: 52px; --logo-h-m: 38px; --logo-maxw: 250px; --radius: 3px; --radius-lg: 4px; --sec-y: clamp(28px, 4vw, 48px); --t-h2: clamp(22px, 2.4vw, 28px); }
.t-listing { background: var(--c-bg); }
.t-listing *, .t-listing *::before, .t-listing *::after { transition-duration: 220ms; }
.listing-head { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.listing-head-in { display: flex; align-items: center; gap: 20px; min-height: var(--head-h); }
.listing-head .logo { flex-shrink: 0; max-width: 250px; }
.listing-head .logo-text b { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.listing-nav { margin-left: auto; min-width: 0; }
.listing-nav .menu > ul > li > a { padding: 0 clamp(7px, 1vw, 14px); font-size: 14px; }
.listing-nav .menu > ul > li.on > a { color: var(--c-primary); }
.listing-nav .menu .sub { background: var(--c-bg); }
.listing-head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.listing-head .burger, .listing-nojs { display: none; }
.listing-announcement { background: var(--c-surface); border-bottom: 1px solid var(--c-line); font-size: 13px; }
.listing-announcement-in { display: flex; align-items: center; gap: 20px; min-height: 42px; }
.listing-announcement-label { display: flex; align-items: center; gap: 8px; color: var(--c-primary); font-weight: 600; flex-shrink: 0; }
.listing-announcement-window { flex: 1; min-width: 0; }
.listing-announcement-track li { display: flex; align-items: center; gap: 16px; min-height: 42px; }
.listing-announcement-track li a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-announcement-track time { color: var(--c-muted); flex-shrink: 0; }
.listing-announcement.is-ready:not(.is-paused) .listing-announcement-window { height: 42px; overflow: hidden; }
.listing-announcement.is-ready:not(.is-paused) .listing-announcement-track { animation: var(--notice-animation) calc(var(--notice-count) * 5s) linear infinite; }
.listing-announcement:hover .listing-announcement-track, .listing-announcement:focus-within .listing-announcement-track { animation-play-state: paused !important; }
.listing-notice-toggle { display: none; flex-shrink: 0; background: var(--c-bg); color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 3px; padding: 3px 8px; font-size: 12px; }
.listing-announcement.is-ready .listing-notice-toggle { display: block; }
.listing-announcement.is-paused .listing-announcement-in { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
.listing-announcement-slogan { margin: 0; color: var(--c-muted); padding: 8px 0; }
/* Each notice rests for most of its slot; the last stays visible until the loop resets. */
@keyframes listing-notice-2 { 0%, 42% { transform: translateY(0px); } 50%, 100% { transform: translateY(-42px); } }
@keyframes listing-notice-3 { 0%, 28% { transform: translateY(0px); } 33.333%, 61.333% { transform: translateY(-42px); } 66.667%, 100% { transform: translateY(-84px); } }
@keyframes listing-notice-4 { 0%, 21% { transform: translateY(0px); } 25%, 46% { transform: translateY(-42px); } 50%, 71% { transform: translateY(-84px); } 75%, 100% { transform: translateY(-126px); } }
@keyframes listing-notice-5 { 0%, 16.8% { transform: translateY(0px); } 20%, 36.8% { transform: translateY(-42px); } 40%, 56.8% { transform: translateY(-84px); } 60%, 76.8% { transform: translateY(-126px); } 80%, 100% { transform: translateY(-168px); } }
.listing-hero { border-bottom: 1px solid var(--c-line); }
.t-listing .listing-carousel .slide { position: relative; inset: auto; opacity: 1; visibility: visible; }
.listing-carousel picture { display: block; width: 100%; aspect-ratio: 4/1; }
.listing-carousel picture img { width: 100%; height: 100%; object-fit: cover; }
.t-listing .carousel .slide.on img { animation: none; }
.listing-carousel.is-ready .slides { aspect-ratio: 4/1; }
.listing-carousel.is-ready .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 220ms, visibility 220ms; }
.listing-carousel.is-ready .slide.on { opacity: 1; visibility: visible; }
.listing-carousel.is-ready picture { height: 100%; aspect-ratio: auto; }
.listing-hero-copy { background: var(--c-bg); border-left: 4px solid var(--c-primary); padding: 18px 0; }
.listing-hero-copy > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.listing-carousel.is-ready .listing-hero-copy { position: absolute; left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); bottom: 24px; width: min(740px, 75%); padding: 16px 24px; }
.listing-carousel.is-ready .listing-hero-copy > .wrap { width: auto; padding: 0; }
.listing-hero-title { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.35; font-weight: 700; margin: 0 0 6px; }
.listing-hero-text { color: var(--c-muted); margin: 0; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.listing-hero-copy .btn { flex-shrink: 0; padding: 10px 16px; font-size: 14px; }
.listing-car-controls { display: none; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
.is-ready .listing-car-controls { display: flex; }
.listing-car-controls .car-dots { position: static; display: flex; gap: 6px; }
.listing-car-controls .car-dots button { width: 32px; height: 32px; border-radius: 2px; background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-muted); font-size: 13px; }
.listing-car-controls .car-dots button[aria-current="true"] { width: 32px; color: var(--c-primary-ink); background: var(--c-primary); border-color: var(--c-primary); }
.listing-car-controls .icon-btn { width: 32px; height: 32px; color: var(--c-muted); }
.listing-hero-empty { background: var(--c-primary-soft); padding: 40px 0; border-bottom: 3px solid var(--c-primary); }
.listing-hero-empty > .wrap { display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.listing-hero-empty h1 { font-size: clamp(26px, 3vw, 36px); }
.listing-hero-empty p { max-width: 720px; color: var(--c-muted); }
.listing-hero-empty p:last-child { margin: 0; }
.listing-hero-empty .btn { flex-shrink: 0; }
.listing-hero-empty.with-image { padding-top: 0; }
.listing-hero-empty picture { display: block; aspect-ratio: 4/1; }
.listing-hero-empty picture img { width: 100%; height: 100%; object-fit: cover; }
.listing-hero-empty.with-image > .wrap { padding-top: 28px; }
.listing-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.listing-flow > .listing-news { grid-column: span 3; }
.listing-flow > .listing-products { grid-column: span 2; }
.listing-flow > .sec { min-width: 0; }
.listing-flow > .sec:only-child { grid-column: 1 / -1; }
.listing-flow > .sec > .wrap { width: auto; padding: 0; max-width: none; }
.t-listing .sec-head { align-items: center; margin-bottom: 20px; border-bottom: 2px solid var(--c-primary); padding-bottom: 16px; }
.t-listing .sec-head .kicker { font-size: 12px; margin-bottom: 6px; letter-spacing: 0; }
.listing-post { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 18px; padding: 18px 12px; border-bottom: 1px solid var(--c-line); transition: background-color 200ms; }
.listing-post:first-child { padding-top: 12px; }
.listing-post:hover, .listing-post:focus-within, .listing-product-list li:hover, .listing-product-list li:focus-within { background: var(--c-primary-soft); }
.listing-post-image { display: block; align-self: start; aspect-ratio: 4/3; overflow: hidden; }
.listing-post-image img, .listing-post-image .ph { width: 100%; height: 100%; object-fit: cover; }
.listing-post h3 { font-size: 17px; line-height: 1.5; margin: 0 0 6px; }
.listing-post time { font-size: 12px; color: var(--c-muted); }
.listing-post p { font-size: 14px; color: var(--c-muted); margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.listing-product-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 32px; align-items: center; gap: 14px; padding: 16px 12px; border-bottom: 1px solid var(--c-line); transition: background-color 200ms; }
.listing-product-image { display: block; aspect-ratio: 1/1; }
.listing-product-image img, .listing-product-image .ph { width: 100%; height: 100%; object-fit: cover; }
.listing-product-list h3 { font-size: 15px; line-height: 1.5; margin: 0 0 6px; }
.listing-product-category { color: var(--c-muted); font-size: 13px; }
.listing-product-ask { color: var(--c-primary); display: grid; place-items: center; width: 32px; height: 32px; background: var(--c-surface); }
.listing-about { background: var(--c-surface); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.listing-about-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.listing-about-in p { color: var(--c-muted); }
.listing-contact > .wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.listing-contact h2 { font-size: 20px; margin: 0 0 6px; }
.listing-contact p { font-size: 14px; color: var(--c-muted); margin: 0; }
.listing-contact .clist { flex: 1; display: flex; flex-wrap: wrap; gap: 18px 28px; }
.listing-contact .clist li { min-width: 0; }
.listing-contact .clist-tx { overflow-wrap: anywhere; }
.listing-sitemap { display: grid; grid-template-columns: 1.2fr .8fr 1fr 1.3fr; gap: 40px; padding-top: 44px; padding-bottom: 44px; }
.listing-sitemap > * { min-width: 0; }
.listing-foot-brand > p { font-size: 14px; margin: 16px 0; color: var(--c-dark-ink); }
.listing-sitemap .clist { font-size: 14px; }
.listing-sitemap .clist-tx { overflow-wrap: anywhere; }
.listing-wechat { margin: 20px 0 0; }
.listing-wechat img { width: 112px; height: 112px; object-fit: contain; background: white; padding: 4px; }
.listing-wechat figcaption { margin-top: 6px; font-size: 12px; color: var(--c-dark-ink); }
.listing-backtop { position: fixed; right: 18px; bottom: 86px; z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-primary); font-size: 11px; }
.listing-backtop .ic { transform: rotate(90deg); }
.listing-news-archive { max-width: 1040px; }
.t-listing .pcard:hover { transform: none; box-shadow: none; border-color: var(--c-line); }
.t-listing .pcard:hover .pcard-img img, .t-listing .sec-link:hover .ic { transform: none; }
.t-listing .pcard, .t-listing .pcard-img img { transition: none; }
@media (max-width: 1100px) { .listing-head-in { gap: 12px; } .listing-head .logo { max-width: 200px; } .listing-head .logo-text b { max-width: 170px; } .listing-flow { gap: 24px; } .listing-product-list li { gap: 10px; padding: 14px 8px; } .listing-sitemap { gap: 24px; } }
@media (max-width: 860px) {
  :root { --head-h: 66px; }
  .listing-nav { display: none; }
  .listing-head-in { justify-content: space-between; }
  .listing-head .logo { max-width: 58vw; }
  .listing-head .logo-text b { max-width: 45vw; font-size: 16px; }
  .listing-head-actions { gap: 8px; }
  .listing-head-actions .langs { display: none; }
  .listing-head .burger { display: grid; }
  .listing-nojs { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 12px; padding-bottom: 12px; }
  .listing-announcement-in { gap: 12px; }
  .listing-announcement-track time { display: none; }
  .listing-carousel picture, .listing-carousel.is-ready .slides { aspect-ratio: 4/3; }
  .listing-carousel.is-ready .listing-hero-copy { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 16px; }
  .listing-hero-copy > .wrap, .listing-carousel.is-ready .listing-hero-copy > .wrap { display: block; }
  .listing-hero-copy .btn { margin-top: 12px; }
  .listing-hero-title { font-size: 22px; }
  .listing-hero-empty > .wrap { display: block; }
  .listing-hero-empty .btn { margin-top: 20px; }
  .listing-hero-empty picture { aspect-ratio: 4/3; }
  .listing-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .listing-flow > .listing-news, .listing-flow > .listing-products { grid-column: auto; }
  .listing-about-in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .listing-contact > .wrap { align-items: flex-start; gap: 20px; }
  .listing-contact .clist { flex-basis: 100%; }
  .listing-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 640px) { .listing-post { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 16px 0; } .listing-post h3 { font-size: 16px; } .listing-product-list li { padding-left: 0; padding-right: 0; } .listing-announcement-label { font-size: 12px; } .listing-notice-toggle { max-width: 64px; } .listing-backtop { right: 10px; } }
@media (prefers-reduced-motion: reduce) { .t-listing *, .t-listing *::before, .t-listing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } .listing-announcement.is-ready:not(.is-paused) .listing-announcement-window { height: auto; overflow: visible; } }

/* Homepage grids fill complete rows; sparse grids use their actual column count.
   Keep desktop and mobile rules separate so mobile can select an even count. */
@media (min-width: 861px) {
  .t-listing.pg-home .sec :is(.pgrid-4, .adv-grid, .stats-list, .trust-stats, .steps, .quicklink-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t-listing.pg-home .sec :is(.pgrid-4, .adv-grid, .stats-list, .trust-stats, .steps, .quicklink-grid):has(> :last-child:nth-child(1)) { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .t-listing.pg-home .sec :is(.pgrid-4, .adv-grid, .stats-list, .trust-stats, .steps, .quicklink-grid):has(> :nth-child(4)):has(> :last-child:nth-child(4n + 1)) > :nth-last-child(-n + 1) { display: none; }
  .t-listing.pg-home .sec :is(.pgrid-4, .adv-grid, .stats-list, .trust-stats, .steps, .quicklink-grid):has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-listing.pg-home .sec :is(.pgrid-4, .adv-grid, .stats-list, .trust-stats, .steps, .quicklink-grid):has(> :nth-child(4)):has(> :last-child:nth-child(4n + 2)) > :nth-last-child(-n + 2) { display: none; }
  .t-listing.pg-home .sec :is(.pgrid-4, .adv-grid, .stats-list, .trust-stats, .steps, .quicklink-grid):has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-listing.pg-home .sec :is(.pgrid-4, .adv-grid, .stats-list, .trust-stats, .steps, .quicklink-grid):has(> :nth-child(4)):has(> :last-child:nth-child(4n + 3)) > :nth-last-child(-n + 3) { display: none; }
  .t-listing.pg-home .sec :is(.cat-grid, .ngrid, .gal-grid, .service-grid, .team-grid, .quote-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-listing.pg-home .sec :is(.cat-grid, .ngrid, .gal-grid, .service-grid, .team-grid, .quote-grid):has(> :last-child:nth-child(1)) { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .t-listing.pg-home .sec :is(.cat-grid, .ngrid, .gal-grid, .service-grid, .team-grid, .quote-grid):has(> :nth-child(3)):has(> :last-child:nth-child(3n + 1)) > :nth-last-child(-n + 1) { display: none; }
  .t-listing.pg-home .sec :is(.cat-grid, .ngrid, .gal-grid, .service-grid, .team-grid, .quote-grid):has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-listing.pg-home .sec :is(.cat-grid, .ngrid, .gal-grid, .service-grid, .team-grid, .quote-grid):has(> :nth-child(3)):has(> :last-child:nth-child(3n + 2)) > :nth-last-child(-n + 2) { display: none; }
  .t-listing.pg-home .sec :is(.case-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-listing.pg-home .sec :is(.case-grid):has(> :last-child:nth-child(1)) { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .t-listing.pg-home .sec :is(.case-grid):has(> :nth-child(2)):has(> :last-child:nth-child(2n + 1)) > :nth-last-child(-n + 1) { display: none; }
}
@media (max-width: 860px) {
  .t-listing.pg-home .sec :is(.pgrid-4, .adv-grid, .stats-list, .trust-stats, .steps, .quicklink-grid, .cat-grid, .ngrid, .gal-grid, .service-grid, .team-grid, .quote-grid, .case-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-listing.pg-home .sec :is(.pgrid-4, .adv-grid, .stats-list, .trust-stats, .steps, .quicklink-grid, .cat-grid, .ngrid, .gal-grid, .service-grid, .team-grid, .quote-grid, .case-grid):has(> :last-child:nth-child(1)) { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .t-listing.pg-home .sec :is(.pgrid-4, .adv-grid, .stats-list, .trust-stats, .steps, .quicklink-grid, .cat-grid, .ngrid, .gal-grid, .service-grid, .team-grid, .quote-grid, .case-grid):has(> :nth-child(2)):has(> :last-child:nth-child(2n + 1)) > :nth-last-child(-n + 1) { display: none; }
}