/* ────────────────────────────────────────────────────────────────────────── RESPONSIVE OVERLAY — mobile / tablet down-scaling. The legacy bundles are hard PC-only: body{min-width:1200px}, .content{width: 1200px}, fixed section heights, float grids. This thin overlay collapses them for narrow viewports. EVERY rule lives inside a max-width media query, so the desktop (≥1200px) layout is byte-for-byte untouched (hard requirement: keep the desktop 1:1 replica). Loaded LAST in the root (after theme- override); !important shadows the high-specificity legacy selectors — same technique theme-override.css uses. Breakpoints: ≤1199px = tablet & down (unlock + stack); ≤767px = phone tweaks. ────────────────────────────────────────────────────────────────────────── */ /* MobileNav chrome is desktop-hidden by default; the ≤1199 block reveals it. */ .m-nav, .m-nav-mask, .m-nav-drawer { display: none; } /* ════════════════════════ ≤1199px : unlock + stack ════════════════════════ */ @media screen and (max-width: 1199px) { /* ---- break the 1200px body / container lock ---- */ html { font-size: 12.6px !important; } /* lift the <800px 10px base */ html, body { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; } .content, .blk-main, .blk-main1, .blk-max-main { width: auto !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } img { height: auto; } iframe, video { max-width: 100%; } table { max-width: 100%; } /* inner hero banner (.ty-banner-1): the legacy JS that revealed it (adds .show) was dropped, so its stays visibility:hidden but keeps its NATURAL size — a tall white gap on phones. Desktop shows no banner either, so collapse it. */ .ty-banner-1 { display: none !important; } /* ════════════════ header → logo + hamburger ════════════════ */ .head { height: auto !important; min-height: 56px; padding: 8px 56px 8px 16px !important; /* right room for hamburger */ display: flex !important; align-items: center; box-sizing: border-box; position: relative; } .head .t_logo { width: auto !important; height: auto !important; float: none !important; margin: 0 !important; display: flex !important; align-items: center; } .head .t_logo a img { width: auto !important; max-height: 40px !important; } .head h2 { display: none !important; } /* slogan: drop on mobile */ .head .hea-rig { display: none !important; } /* desktop nav + hotline: drop */ /* hamburger button */ .m-nav { display: block; } .m-nav-btn { display: flex; flex-direction: column; justify-content: center; gap: 5px; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 40px; height: 40px; padding: 8px; margin: 0; background: transparent; border: 0; cursor: pointer; z-index: 10002; } .m-nav-btn span { display: block; height: 2px; width: 100%; border-radius: 2px; background: #333; transition: transform .25s ease, opacity .2s ease; } .m-nav-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .m-nav-btn.is-open span:nth-child(2) { opacity: 0; } .m-nav-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* dimming mask */ .m-nav-mask { display: block; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .m-nav-mask.open { opacity: 1; pointer-events: auto; } /* slide-in drawer */ .m-nav-drawer { display: block; position: fixed; top: 0; right: 0; z-index: 10001; width: 74vw; max-width: 320px; height: 100%; background: #fff; box-shadow: -2px 0 16px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .28s ease; overflow-y: auto; padding: 64px 0 24px; box-sizing: border-box; } .m-nav-drawer.open { transform: translateX(0); } .m-nav-drawer ul { margin: 0; padding: 0; list-style: none; } .m-nav-drawer li { border-bottom: 1px solid #f0f0f0; } .m-nav-drawer li a { display: block; padding: 14px 24px; font-size: 15px; color: #333; line-height: 1.4; } .m-nav-drawer li a.cur, .m-nav-drawer li a:hover { color: var(--brand-color, #009FE8); } .m-nav-tel { display: block; padding: 18px 24px 8px; font-size: 15px; font-weight: 700; color: var(--brand-color, #009FE8); } .m-nav-extra { padding: 8px 24px; } /* ════════════════ footer → single column ════════════════ */ .ft-top, .ft-cen, .ft-bot { width: auto !important; } .ft-top .ft-logo, .ft-top .ft-nav, .ft-cen .left, .ft-cen .rig { float: none !important; width: 100% !important; margin: 0 0 16px !important; } .ft-top .ft-nav ul li { width: auto !important; } .ft-cen .left ul li, .ft-cen .left ul li:nth-child(2n) { float: none !important; width: 100% !important; margin: 0 0 12px !important; } .ft-cen .left ul li:nth-child(2n) h4 { width: auto !important; } .ft-cen .rig { padding-top: 0 !important; } /* ════════════════ floating side rail → compact ════════════════ */ .client-2, #client-2, .my-kefu, .my-kefu-tab { transform: scale(.78); transform-origin: bottom right; } /* ════════════════ HOME sections → stack + auto height ════════════════ */ /* brand .ppbj */ .ppbj { height: auto !important; padding: 40px 0 !important; background-size: cover !important; } .ppbj p { width: auto !important; } .ppbj h4 { padding-top: 0 !important; } .ppbj h4:before { display: none !important; } /* oversized 761px watermark */ /* solutions .solu (swiper) */ .solu .sol-tit { height: auto !important; padding: 24px 0; } .solu .sol-tit h2, .solu .sol-tit b { float: none !important; } .solu .sol-tit b { margin-top: 16px !important; } .solu .solu-list ul li, .solu .solu-list ul li a { height: 320px !important; } .solu .solu-list ul li.swiper-slide.swiper-slide-active { margin-top: 0 !important; } /* auto charger accordion .qccdz */ .qccdz ul li, .qccdz ul li.cur { float: none !important; width: 100% !important; height: auto !important; padding: 22px 16px !important; border-bottom: 1px solid #eee; } .qccdz ul li.cur p, .qccdz ul li.cur em { width: auto !important; } /* ebike .dpcdz */ .dpcdz ul li, .dpcdz ul li:nth-child(2) { float: none !important; width: 100% !important; margin: 0 0 20px !important; } /* cloud platform .yptbj */ .yptbj { height: auto !important; padding: 40px 0 !important; background-size: cover !important; } .yptbj .ypt-nav, .yptbj .ypt-con { float: none !important; width: 100% !important; height: auto !important; margin: 0 0 20px !important; } .yptbj .ypt-con ul li { height: auto !important; } /* strength .super */ .super { height: auto !important; padding: 40px 0 !important; background-size: cover !important; } /* news .news */ .news { height: auto !important; padding: 30px 0 !important; } /* ════════════════ INNER: detail two-column → stack ════════════════ */ /* article/help detail: main body (.fl) + related sidebar (.fr) */ .p102-info-blk, .p102-info-fdh-2, .p102-info-fdh, /* product detail: gallery (left) + title/specs/CTA (right) */ .p102-proShow-1-left, .p102-proShow-1-right, .p14-prodcontent-1-pic, .p14-prodcontent-1-desc { float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .p102-proShow-1-left { max-width: 460px; margin: 0 auto 20px !important; } /* shared inner block sizes (main column + sidebar widgets) → fluid + stack. These (.blk-sm 930px, .blk-xs 240px, .blk-max 810px…) are the inner/reset grid primitives used by every list/detail page, so one rule covers them all. DOM order puts the main column first, so the sidebar naturally drops below. */ .blk-sm, .blk-xs, .blk-max, .blk-min, .blk-sm.fr, .blk-xs.fl, .blk-max.fr, .blk-max.fl, .blk-min.fl, .blk-min.fr { float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ════════════════════════════ ≤767px : phone ════════════════════════════ */ @media screen and (max-width: 767px) { /* lift small rem body text a touch for legibility on phones */ .ppbj p, .qccdz ul li p, .dpcdz ul li .dp-txt p, .case ul li h4 p, .super ul li p, .endit-content, .endit101-content { font-size: 14px !important; line-height: 1.7 !important; } /* multi-col home grids → single column on phones */ .case ul li { float: none !important; width: 100% !important; height: auto !important; margin: 0 0 24px !important; } .super ul li { float: none !important; width: 100% !important; margin: 0 0 16px !important; } .yptbj .ypt-nav ul li { background-position: 99% !important; } /* shrink big section headings (2rem) so they don't dominate a 390px screen */ .ppbj h4, .solu .sol-tit h2 span, .qccdz h2 span, .dpcdz h2, .yptbj h2 span, .case h2 span, .super h2 span { font-size: 1.5rem !important; line-height: 1.4 !important; } /* product list cards (.p102-pros-1-list dl: 3-col 31.5% float) → 2-col */ .p102-pros-1-list { display: flex; flex-wrap: wrap; justify-content: space-between; } .p102-pros-1-list dl, .p102-pros-1-list dl:nth-child(4n-1) { float: none !important; width: 48% !important; margin: 0 0 22px !important; } /* article alternating list (.p14-infolist-1-list: img left / text right) → stack */ .p14-infolist-1-list dt, .p14-infolist-1-list dd { float: none !important; width: 100% !important; margin-left: 0 !important; } /* the floating side rail slides out on HOVER (no touch equivalent) and its contacts already live in the footer + hamburger drawer → hide on phones. */ .client-2 { display: none !important; } }