*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;color:#666}a{text-decoration:none;color:inherit}.container{width:min(1420px,88%);margin:auto}.header{height:56px;position:absolute;z-index:10;width:100%;background:rgba(0,105,185,.35);border-bottom:1px solid #ffffff33;color:#fff}.header-inner{height:100%;max-width:1880px;margin:auto;padding:0 22px;display:flex;align-items:center}.logo{width:276px;flex:0 0 276px}.logo img{width:100%;display:block}.nav{height:100%;flex:1}.nav ul{height:100%;display:flex;align-items:center;justify-content:center;gap:43px;list-style:none;padding:0;margin:0}.nav li{height:100%;position:relative;display:flex;align-items:center}.nav>ul>li>a{height:100%;display:flex;align-items:center;font-size:15px;white-space:nowrap;position:relative}.nav .active:after{content:"";position:absolute;bottom:7px;left:22%;width:56%;height:2px;background:#fff}.dropdown{display:none;position:absolute;top:56px;left:50%;transform:translateX(-50%);width:155px;background:#238edede;padding:8px 0}.dropdown a{display:block;text-align:center;padding:10px;font-size:14px}.dropdown a:hover{background:#ffffff25}.has-dropdown:hover .dropdown{display:block}.header-right{flex:0 0 95px;display:flex;justify-content:flex-end;align-items:center;gap:27px;font-size:14px}.search-icon{width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:none;position:relative;padding:0}.search-icon:after{content:"";position:absolute;width:7px;height:2px;background:#fff;right:-5px;bottom:-2px;transform:rotate(48deg)}
.banner{height:715px;background:url("../images/banner_intro_bg.jpg") center/cover no-repeat;position:relative;color:#fff}.banner-intro{display:flex;align-items:flex-start;padding-top:84px}.banner-intro-panel{width:min(1420px,74%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 520px;align-items:stretch;background:rgba(0,141,214,.42);box-shadow:0 0 0 8px rgba(30,210,255,.06);backdrop-filter:blur(2px)}.banner-intro-copy{height:410px;padding:36px 32px 32px 24px;background:linear-gradient(90deg,rgba(0,120,201,.72),rgba(0,169,223,.44));display:flex;flex-direction:column;justify-content:center}.banner-intro-copy h1{display:flex;align-items:center;gap:16px;margin:0 0 24px;font-size:36px;line-height:1.1;letter-spacing:0;color:#fff}.banner-intro-copy h1:before,.banner-intro-copy h1:after{content:"";width:72px;height:22px;background:#fff;clip-path:polygon(0 25%,70% 25%,100% 50%,70% 75%,0 75%,18% 50%)}.banner-intro-copy h1:after{transform:scaleX(-1)}.banner-intro-copy p{max-width:880px;margin:0 0 18px;font-size:15px;line-height:1.8;color:#fff;text-shadow:0 1px 2px rgba(0,74,120,.2)}.banner-intro-copy p:last-child{margin-bottom:0}.banner-intro-copy strong{font-size:16px;color:#fff}.banner-intro-img{width:100%;height:410px;object-fit:cover}.features{height:105px;margin-top:-130px;margin-bottom:25px;position:relative;z-index:2}.features .container{height:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.feature-item{background:#eef9ffd8;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:22px;font-size:18px;backdrop-filter:blur(3px)}.feature-item img{width:52px;height:55px;object-fit:contain}
.intro{height:445px;padding:58px 0 45px}.section-title{margin:0 0 38px;color:#268ada;font-size:32px;display:flex;align-items:center;justify-content:center;gap:17px}.section-title img{width:58px}.intro-content{max-width:1250px;margin:auto;display:grid;grid-template-columns:1fr 365px;gap:72px;align-items:center}.intro-text{font-size:15px;line-height:2}.intro-text p{margin:0 0 19px}.intro-text strong{color:#1680cf}.intro-img{display:block;width:100%}.news-section{padding:24px 0 21px;background:#fff}.news-section .container{width:min(1590px,84%)}.news-head{height:43px;display:flex;align-items:flex-start;justify-content:space-between}.news-head h2{margin:0;display:flex;align-items:center;gap:8px;color:#2d7fed;font-size:25px;line-height:1;font-weight:700}.news-head h2 img{width:42px;height:auto}.news-head a{margin-top:6px;color:#2d72e8;font-size:16px}.news-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:45px;align-items:start}.news-feature{display:block;position:relative;aspect-ratio:792/419;overflow:hidden;background:#e9f3ff}.news-feature img{width:100%;height:100%;display:block;object-fit:cover}.news-feature span{position:absolute;left:0;right:0;bottom:0;height:58px;padding:0 22px;background:rgba(30,108,230,.88);display:flex;align-items:center;justify-content:space-between;gap:18px;color:#fff;font-size:17px}.news-feature b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.news-feature time{flex:0 0 auto}.news-list{height:100%;padding-top:0;display:grid;grid-template-rows:repeat(5,1fr)}.news-item{min-height:0;display:grid;grid-template-columns:15px minmax(0,1fr) 86px;gap:14px;align-items:center;border-bottom:1px solid #e5e5e5;color:#333}.news-item i{width:13px;height:13px;border-radius:50%;background:#2d72e8}.news-item span{min-width:0}.news-item b,.news-item em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal}.news-item b{font-size:16px;font-weight:500;line-height:1.45}.news-item em{color:#888;font-size:13px;line-height:1.55}.news-item time{color:#9a9a9a;font-size:15px;text-align:right}.news-item:hover b,.news-head a:hover{color:#078bc8}
.products{padding-bottom:55px}.products-bar{height:52px;background:linear-gradient(100deg,#35baf2,#707fe8)}.products-bar h2{display:inline-block;height:54px;margin:0;background:#087abf;color:#fff;border-radius:0 0 10px 10px;padding:8px 20px;font-size:25px}.products-bar span{font-size:22px}.product-tabs{height:112px;padding:0 max(11%,calc((100vw - 1420px)/2));display:grid;grid-template-columns:repeat(6,1fr);background:linear-gradient(100deg,#35baf2,#707fe8);color:#fff}.product-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-right:1px solid #ffffff55;font-size:16px}.product-tab:last-child{border:0}.product-tab.active{background:#0f77e66b;border-radius:10px}.product-tab img{width:48px;height:48px;object-fit:contain}.product-list{display:grid;grid-template-columns:repeat(3,1fr);gap:78px;padding-top:35px}.product-list article{text-align:center;font-size:16px}.product-img{height:245px;display:flex;align-items:center}.product-img img{width:100%;height:100%;object-fit:contain}.product-list h3{display:inline-block;min-width:205px;margin:0;background:#07a8e8;color:#fff;padding:4px 25px;border-radius:3px;font-size:16px;font-weight:400}.product-list p{line-height:1.75;min-height:76px;margin:0;padding:8px 15px}.product-list a{display:inline-block;margin-top:20px;color:#168deb}
footer{height:306px;background:#0571bb;color:#fff}.footer-inner{height:250px;display:grid;grid-template-columns:380px 1fr 160px;gap:70px;align-items:center}.footer-logo{width:276px}.contact{font-size:13px;line-height:1.45;margin:16px 0 0 55px}.footer-nav{display:grid;grid-template-columns:repeat(2,180px);gap:25px 38px;font-size:13px}.qr{width:115px;background:#fff;padding:4px}.copyright{font-size:13px}.back-top{position:fixed;right:4%;bottom:55px;width:60px;height:60px;border-radius:8px;background:#08a4e5;color:#fff;display:flex;align-items:center;justify-content:center;font-size:29px;font-weight:bold;z-index:20;opacity:0;pointer-events:none;transition:.25s}.back-top.show{opacity:1;pointer-events:auto}
@media(max-width:1450px){.nav ul{gap:20px}.nav>ul>li>a{font-size:13px}.logo{width:235px;flex-basis:235px}.banner{height:670px}.banner-left{top:225px}.features{margin-top:-92px;height:92px}.intro{height:auto}.product-tabs{padding-left:5%;padding-right:5%}}
@media(max-width:900px){.header{height:58px;background:#0064b4e8}.logo{width:210px;flex-basis:210px}.nav{display:none}.header-right{margin-left:auto}.banner{height:620px;background-position:61% center}.banner-left{left:6%;top:185px;width:88%;text-shadow:0 1px 3px #0064a7}.banner-left h1{font-size:35px}.banner-left p{width:78%;font-size:15px}.slider-dots{bottom:25px}.features{height:auto;margin:0;background:#eefaff;padding:14px 0}.features .container{grid-template-columns:1fr}.feature-item{height:75px;background:#fff}.intro{padding:40px 0}.section-title{font-size:27px}.intro-content{grid-template-columns:1fr;gap:18px}.intro-img{max-width:480px;margin:auto}.products-bar h2{margin-left:4%}.product-tabs{height:auto;padding:10px;grid-template-columns:repeat(2,1fr)}.product-tab{height:100px;border-bottom:1px solid #ffffff55}.product-list{grid-template-columns:1fr;gap:20px}.product-img{height:230px}footer{height:auto;padding:28px 0}.footer-inner{height:auto;grid-template-columns:1fr;gap:28px}.footer-nav{grid-template-columns:repeat(2,1fr)}.qr{margin:auto}.copyright{margin-top:28px}.back-top{width:48px;height:48px}}
html,body{overflow-x:hidden}.product-tab,.feature-item{min-width:0}.product-tab{text-align:center}
@media(min-width:901px) and (max-width:1350px){.header-inner{padding:0 12px}.logo{width:200px;flex-basis:200px}.nav ul{gap:10px}.nav>ul>li>a{font-size:11px}.header-right{flex-basis:75px;gap:18px}}
.banner{background:none;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none}.banner.dragging{cursor:grabbing}.banner-slide{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;transform:translateX(100%);z-index:0}.banner-slide.active,.banner-slide.prev,.banner-slide.next{transition:transform .75s cubic-bezier(.65,0,.35,1)}.banner-slide.active{z-index:2;transform:translateX(0)}.banner-slide.prev{z-index:1;transform:translateX(-100%)}.banner-slide.next{z-index:1;transform:translateX(100%)}.banner-slide.from-left{z-index:2;transform:translateX(-100%);transition:none}.banner.dragging .banner-slide{transition:none!important}.banner-left{z-index:2}.slider-dots{z-index:3}.slider-dots button{width:13px;height:13px;padding:0;border:0;border-radius:50%;background:#fff;cursor:pointer}.slider-dots button.active{background:#109ce2;border:1px solid #fff}
@media(max-width:900px){.banner-slide{background-position:61% center}}
.header{position:fixed;top:0;left:0;transition:background-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}
.header.scrolled{background:rgba(0,105,180,.94);box-shadow:0 4px 16px rgba(0,54,105,.22);backdrop-filter:blur(10px)}
.header-right{height:100%;position:relative}.search-icon{flex:0 0 auto;transition:transform .25s ease}.search-icon:hover{transform:scale(1.08)}.header.search-open .search-icon:before,.header.search-open .search-icon:after{content:"";position:absolute;left:7px;top:-3px;width:2px;height:22px;background:#fff}.header.search-open .search-icon{border-color:transparent}.header.search-open .search-icon:before{transform:rotate(45deg)}.header.search-open .search-icon:after{right:auto;bottom:auto;transform:rotate(-45deg)}
.language{height:100%;position:relative;display:flex;align-items:center}.language-current{height:100%;display:flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer}.language-current i{width:7px;height:7px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg) translateY(-2px);transition:transform .25s}.language.open .language-current i{transform:rotate(225deg) translate(-2px,-1px)}.language-menu{position:absolute;top:56px;right:-12px;width:76px;padding:7px 0;background:rgba(0,105,180,.96);box-shadow:0 8px 20px rgba(0,44,90,.2);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}.language.open .language-menu{opacity:1;visibility:visible;transform:translateY(0)}.language-menu a{display:block;padding:8px 0;text-align:center;color:#d8f3ff}.language-menu a:hover,.language-menu a.active{color:#fff;background:rgba(255,255,255,.12)}
.search-panel{position:absolute;top:56px;left:0;width:100%;height:0;overflow:hidden;background:rgba(255,255,255,.97);box-shadow:0 8px 22px rgba(0,53,99,.16);transition:height .32s ease}.header.search-open .search-panel{height:104px}.search-form{width:min(720px,80%);height:100%;margin:auto;display:flex;align-items:center;border-bottom:1px solid #168dcc}.search-form input{flex:1;height:54px;padding:0 8px;border:0;outline:0;background:transparent;color:#444;font-size:18px}.search-form input::placeholder{color:#aaa}.search-form button{position:relative;width:28px;height:28px;margin-right:8px;padding:0;border:2px solid #168dcc;border-radius:50%;background:transparent;cursor:pointer}.search-form button:after{content:"";position:absolute;width:10px;height:2px;right:-7px;bottom:0;background:#168dcc;transform:rotate(45deg)}
@media(max-width:900px){.header-right{flex-basis:95px}.search-panel{top:58px}.language-menu{top:58px}.header.search-open .search-panel{height:88px}.search-form{width:88%}.search-form input{font-size:16px}}
.dropdown.wide{width:320px}.dropdown.wide a{line-height:1.5;padding-left:18px;padding-right:18px}
.features{margin-top:-130px;margin-bottom:25px}
@media(max-width:1450px) and (min-width:901px){.features{margin-top:-117px;margin-bottom:25px}}
@media(max-width:900px){.features{margin-top:0;margin-bottom:0}}
@media(max-width:900px){
body.mobile-nav-open{overflow:hidden}
.header-inner{padding:0 18px}
.logo{width:200px;flex-basis:200px}
.header-right{flex:1;margin-left:auto;gap:24px}
.header-right .language{order:1;margin-left:auto}
.header-right .search-icon{order:2;width:28px;height:20px;border:0;border-radius:0;background:linear-gradient(to bottom,transparent 9px,#fff 9px,#fff 11px,transparent 11px)}
.header-right .search-icon:before,.header-right .search-icon:after{content:"";position:absolute;left:0;width:28px;height:2px;background:#fff;transform:none;transition:top .25s,transform .25s}
.header-right .search-icon:before{top:1px}.header-right .search-icon:after{top:17px;right:auto;bottom:auto}
.header.menu-open .search-icon{background:transparent}
.header.menu-open .search-icon:before{top:9px;transform:rotate(45deg)}
.header.menu-open .search-icon:after{top:9px;transform:rotate(-45deg)}
.header.search-open .search-icon{border:0}
.header.search-open .search-icon:before,.header.search-open .search-icon:after{width:28px;height:2px;left:0}
.search-panel{display:none}
.nav{display:block;position:fixed;top:58px;right:0;width:100%;height:calc(100vh - 58px);height:calc(100dvh - 58px);background:#fff;overflow-y:auto;transform:translateX(100%);opacity:0;pointer-events:none;transition:transform .35s ease,opacity .35s ease;box-shadow:-8px 12px 28px rgba(0,50,92,.15)}
.header.menu-open .nav{transform:translateX(0);opacity:1;pointer-events:auto}
.nav ul{display:block;height:auto;padding:18px 24px 40px}
.nav li{display:block;height:auto;border-bottom:1px solid #e8eef3}
.nav>ul>li>a{height:58px;padding:0 38px 0 6px;color:#263746;font-size:16px;font-weight:500}
.nav>ul>li>a.active:after,.nav>ul>li>a:after{display:none}
.nav>ul>li.has-dropdown>a:before{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:1.5px solid #81909c;border-bottom:1.5px solid #81909c;transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.nav>ul>li.has-dropdown.open>a:before{transform:translateY(-30%) rotate(225deg)}
.dropdown,.dropdown.wide{display:block;position:static;width:100%;max-height:0;padding:0;background:#fff;transform:none;overflow:hidden;opacity:1;transition:max-height .35s ease,padding .35s ease}
.has-dropdown.open>.dropdown{max-height:360px;padding:7px 0}
.dropdown a,.dropdown.wide a{padding:10px 20px;color:#60727f;text-align:left;font-size:14px;line-height:1.5;border-top:1px solid #edf1f4}
.dropdown a:hover{background:#fff;color:#078bc8}
.mobile-nav-search{display:block;margin:0;padding:25px 18px 28px;background:#fff;border-top:1px solid #e8eef3}
.mobile-nav-search form{height:52px;display:flex;align-items:center;border:1.5px solid #b9ccd8;border-radius:28px;background:#f7fbfd;transition:border-color .25s,box-shadow .25s,background .25s}
.mobile-nav-search form:focus-within{border-color:#168dcc;background:#fff;box-shadow:0 0 0 3px rgba(22,141,204,.09)}
.mobile-nav-search input{min-width:0;flex:1;height:100%;padding:0 8px 0 22px;border:0;outline:0;background:transparent;color:#263746;font-size:17px}
.mobile-nav-search input::placeholder{color:#91a1ac}
.mobile-nav-search button{flex:0 0 27px;width:27px;height:27px;margin:0 20px 0 12px;padding:0;border:2px solid #168dcc;border-radius:50%;background:transparent;position:relative;cursor:pointer}
.mobile-nav-search button:after{content:"";position:absolute;width:10px;height:2px;right:-7px;bottom:0;background:#168dcc;transform:rotate(45deg)}
}
@media(max-width:480px){.logo{width:176px;flex-basis:176px}.header-inner{padding:0 14px}.header-right{gap:18px}.language-current{font-size:14px}}
.mobile-nav-search{display:none}
@media(max-width:900px){.mobile-nav-search{display:block}}
@media(max-width:900px){
footer{padding:34px 0 18px}
.footer-inner{width:88%;display:grid;grid-template-columns:1fr;gap:24px;text-align:center}
.footer-inner>div:first-child{padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.2);text-align:center}
.footer-logo{display:block;width:min(280px,82%);margin:0 auto}
.contact{display:inline-grid;gap:8px;margin:18px auto 0;text-align:center;font-size:13px;line-height:1.55}
.contact p{margin:0}
.footer-nav{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:8px 12px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.05);text-align:left}
.footer-nav a{min-width:0;padding:11px 8px;border-bottom:1px solid rgba(255,255,255,.12);font-size:13px;line-height:1.4}
.footer-nav a:nth-last-child(-n+2){border-bottom:0}
.qr{width:108px;margin:0 auto;padding:5px;border-radius:3px}
.copyright{width:88%;margin:24px auto 0;padding-top:17px;border-top:1px solid rgba(255,255,255,.2);text-align:center;font-size:12px;line-height:1.5;display:flex;align-items:center;justify-content:center;gap:8px}
.copyright img{width:16px;height:auto;display:block}
.back-top{right:16px;bottom:18px;width:44px;height:44px;border-radius:7px;font-size:23px;box-shadow:0 5px 16px rgba(0,61,108,.2)}
}
@media(max-width:480px){
footer{padding-top:30px}
.footer-inner{width:90%;gap:20px}
.contact{font-size:12px}
.footer-nav{padding:6px 8px}
.footer-nav a{padding:10px 6px;font-size:12px}
.qr{width:96px}
.copyright{width:90%;font-size:11px}
}
@media(min-width:901px){.copyright{display:flex;align-items:center;gap:7px;padding-left:55px}.copyright img{width:14px;height:auto;display:block}}
/* Homepage product/service hover panels. */
.product-tab{cursor:pointer;transition:background .25s ease,transform .25s ease}
.product-tab:focus-visible{outline:2px solid #fff;outline-offset:-5px}
.product-list{display:block}
.product-panel{display:none;grid-template-columns:repeat(3,1fr);gap:78px;opacity:0;transform:translateY(8px)}
.product-panel.active{display:grid;animation:productPanelIn .35s ease forwards}
.product-panel.count-2{max-width:950px;margin:0 auto;grid-template-columns:repeat(2,1fr)}
.product-panel.count-1{max-width:480px;margin:0 auto;grid-template-columns:1fr}
@keyframes productPanelIn{to{opacity:1;transform:none}}
@media(max-width:900px){.product-panel,.product-panel.count-2,.product-panel.count-1{grid-template-columns:1fr;gap:20px;max-width:none}}
.product-panel[data-product-panel="5"]{gap:120px}
.product-panel[data-product-panel="5"] .product-img{height:210px;justify-content:center}
.product-panel[data-product-panel="5"] .product-img img{width:180px;height:180px}
.product-panel[data-product-panel="5"] p{display:none}
.product-panel[data-product-panel="5"] h3{display:block;width:260px;min-width:0;margin:0 auto}
.product-panel[data-product-panel="5"] a{display:block;width:max-content;margin:28px auto 0}
@media(max-width:900px){.product-panel[data-product-panel="5"]{gap:32px}.product-panel[data-product-panel="5"] .product-img{height:170px}.product-panel[data-product-panel="5"] .product-img img{width:145px;height:145px}}
/* Single homepage banner: company intro panel, no carousel. */
.banner.banner-intro{background:url("../images/banner_intro_bg.jpg") center/cover no-repeat;cursor:default;user-select:auto;touch-action:auto;overflow:hidden}
.banner.banner-intro:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,45,105,.18),rgba(0,205,230,.1));pointer-events:none}
.banner-intro-panel{position:relative;z-index:1}
.banner-slide,.slider-dots{display:none}
/* Homepage news: balanced desktop columns and an unbroken date column. */
@media(min-width:901px){
.news-section{padding:30px 0 32px}
.news-section .container{width:min(1590px,88%)}
.news-head{height:auto;margin-bottom:16px;align-items:center}
.news-head a{margin-top:0}
.news-layout{grid-template-columns:minmax(0,1.22fr) minmax(560px,1fr);gap:38px;align-items:stretch}
.news-feature{height:100%;min-height:420px;aspect-ratio:auto}
.news-list{height:100%;min-width:0;grid-template-rows:repeat(5,minmax(74px,1fr))}
.news-item{grid-template-columns:13px minmax(0,1fr) 104px;gap:14px;padding:8px 0}
.news-item time{display:block;white-space:nowrap;word-break:keep-all;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.news-item b{font-size:16px;line-height:1.45}
.news-item em{margin-top:3px;font-size:13px;line-height:1.5}
}
@media(min-width:901px) and (max-width:1280px){
.news-section .container{width:92%}
.news-layout{grid-template-columns:minmax(0,1.08fr) minmax(480px,1fr);gap:26px}
.news-item{grid-template-columns:11px minmax(0,1fr) 96px;gap:11px}
.news-item time{font-size:13px}
}
@media(max-width:1450px) and (min-width:901px){
.banner-intro-panel{width:min(1320px,78%);grid-template-columns:minmax(0,1fr) 450px}
.banner.banner-intro{height:655px;padding-top:82px}
.banner-intro-copy{height:365px;padding-top:30px;padding-bottom:28px}
.banner-intro-copy h1{font-size:31px;margin-bottom:18px}
.banner-intro-copy p{font-size:14px;line-height:1.72;margin-bottom:14px}
.banner-intro-copy strong{font-size:15px}
.banner-intro-img{height:365px}
}
@media(max-width:900px){
.banner.banner-intro{height:auto;min-height:0;padding:88px 0 0;background-position:center top}
.banner-intro-panel{width:88%;display:grid;grid-template-columns:1fr}
.banner-intro-copy{height:auto;min-height:0;padding:28px 18px 24px}
.banner-intro-copy h1{justify-content:center;font-size:30px;margin-bottom:20px}
.banner-intro-copy h1:before,.banner-intro-copy h1:after{width:48px;height:18px}
.banner-intro-copy p{font-size:14px;line-height:1.85;margin-bottom:16px}
.banner-intro-copy strong{font-size:15px}
.banner-intro-img{height:auto;max-height:260px}
.news-section{padding:28px 0 34px}
.news-section .container{width:88%}
.news-head{height:auto;margin-bottom:16px;align-items:center}
.news-head h2{font-size:24px}
.news-head h2 img{width:38px}
.news-head a{margin:0;font-size:14px}
.news-layout{grid-template-columns:1fr;gap:18px}
.news-feature{height:auto;aspect-ratio:1.9/1}
.news-feature span{height:46px;padding:0 12px;font-size:14px}
.news-list{height:auto;padding-top:0;display:block}
.news-item{height:auto;min-height:76px;grid-template-columns:14px minmax(0,1fr);gap:10px;padding:8px 0}
.news-item i{width:10px;height:10px}
.news-item b{font-size:14px}
.news-item em{font-size:12px}
.news-item time{grid-column:2;color:#9a9a9a;text-align:left;font-size:12px}
}
@media(max-width:480px){
.banner-intro-panel{width:90%}
.banner-intro-copy h1{font-size:25px;gap:10px}
.banner-intro-copy h1:before,.banner-intro-copy h1:after{width:34px}
}
/* === Local layout/safety overrides (appended) === */
/* Goal:
1. Stop long English words from breaking the header / banner / card layout.
2. Give the nav enough breathing room at 1420-1600px so it never overflows.
3. Wrap long headlines, list items, footer text, paragraphs, and table cells
gracefully. No tables were added — existing markup is preserved. */
html, body { overflow-wrap: break-word; word-wrap: break-word; }
body, p, h1, h2, h3, h4, h5, h6, li, b, strong, em, span, a, small,
.about-copy, .banner-intro-copy, .product-caption,
.application-cards p, .application-detail li,
.case-table, .spec-table, .station-spec,
.news-article p, .latest-news b,
.footer-nav, .footer-nav a, .contact, .copyright,
.feature-item, .product-list p, .product-list h3,
.ownership-head span, .share-card,
.advantage-grid p, .case-summary p,
.spec-table span, .station-spec span, .case-table span {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* --- Nav: shrink the desktop gap so the 7-item row fits at 1420-1600px --- */
@media (min-width: 901px) {
.header-inner { padding: 0 16px; }
.logo { width: 240px; flex: 0 0 240px; }
.nav { min-width: 0; }
.nav ul { gap: 26px; justify-content: flex-end; }
.nav > ul > li { min-width: 0; }
.nav > ul > li > a {
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.header-right { flex: 0 0 90px; gap: 18px; }
}
/* Mid screens: tighten a bit more */
@media (min-width: 901px) and (max-width: 1280px) {
.header-inner { padding: 0 10px; }
.logo { width: 200px; flex: 0 0 200px; }
.nav ul { gap: 14px; }
.nav > ul > li > a { font-size: 12px; }
.header-right { flex: 0 0 80px; gap: 14px; }
}
/* Narrow desktop: keep nav visible but compact */
@media (min-width: 901px) and (max-width: 1100px) {
.nav ul { gap: 8px; }
.nav > ul > li > a { font-size: 11px; }
.header-right { flex: 0 0 70px; gap: 10px; }
.language-current { font-size: 13px; }
}
/* --- Banner copy: long English paragraphs wrap, never overflow --- */
@media (min-width: 901px) {
.banner-intro-panel { grid-template-columns: minmax(0, 1fr) 460px; }
}
@media (min-width: 901px) and (max-width: 1500px) {
.banner-intro-panel { grid-template-columns: minmax(0, 1fr) 420px; }
}
/* --- News headlines: allow 2 lines of wrap, then ellipsis --- */
.news-feature b,
.news-feature span {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35;
}
.news-item b,
.news-item em {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-item em { -webkit-line-clamp: 2; }
.news-row .copy b,
.news-row .copy em {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- News list / feature date column: never get squeezed --- */
.news-item time,
.news-feature time,
.news-row .date,
.latest-news time {
flex: 0 0 auto;
white-space: nowrap;
}
/* --- Product list: keep cards same height, wrap titles --- */
.product-list p,
.product-list h3,
.product-panel p,
.product-panel h3 {
white-space: normal;
overflow-wrap: break-word;
}
.product-list h3,
.product-panel h3 { min-width: 0; max-width: 100%; }
/* --- About page: ownership head text wraps --- */
.ownership-head b,
.ownership-head span {
white-space: normal;
overflow-wrap: break-word;
}
.ownership-head { padding-left: 14px; padding-right: 14px; }
.share-card { padding: 18px 10px; word-break: break-word; }
/* --- Spec / case tables: long values wrap inside the cell --- */
.spec-table, .station-spec, .case-table {
table-layout: fixed;
}
.spec-table > div,
.station-spec > div,
.case-table > div {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
}
.case-table > div {
grid-template-columns: minmax(0, 1fr) 200px;
}
.spec-table span,
.station-spec span,
.case-table span {
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
.spec-table span:last-child,
.station-spec span:last-child {
text-align: right;
white-space: normal;
}
/* --- Footer: nav wraps gracefully --- */
.footer-nav a {
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
line-height: 1.4;
}
@media (min-width: 901px) {
.footer-nav { grid-template-columns: repeat(2, minmax(0, 180px)); }
}
/* --- Detail hero: page titles wrap --- */
.detail-hero h1,
.detail-title,
.about-title,
.section-title {
white-space: normal;
overflow-wrap: break-word;
}
.detail-tabs a {
white-space: normal;
overflow-wrap: break-word;
line-height: 1.2;
padding: 0 10px;
text-align: center;
}
/* --- News list page lead card headline wraps --- */
.news-lead-card h3 {
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
.news-lead-card p {
white-space: normal;
overflow-wrap: break-word;
}
/* --- News article body: paragraphs wrap nicely --- */
.news-article p,
.news-article blockquote {
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
/* --- Feature icons: text inside cards wraps --- */
.feature-item {
white-space: normal;
text-align: left;
padding: 0 18px;
line-height: 1.35;
overflow-wrap: break-word;
}
.feature-item span { min-width: 0; }
/* --- Product visual caption: long titles wrap --- */
.product-caption h2,
.product-caption small,
.product-caption p {
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
/* --- Latest news sidebar: titles wrap --- */
.latest-news b {
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
line-height: 1.4;
}
/* --- Make sure flex children can shrink to avoid pushing layout --- */
.banner-intro-copy,
.product-caption,
.application-cards article,
.advantage-grid article,
.case-summary article,
.news-feature,
.news-list,
.news-row,
.about-copy,
.about-intro,
.feature-item,
.share-card,
.footer-inner > div {
min-width: 0;
}
/* === Local layout/safety overrides (end) === */
/* ============================================================
Mobile responsive additions (≤900px / ≤480px)
- Fix small-screen layout issues found in QA
- Logo / nav / banner / cards / detail pages / news / footer
============================================================ */
/* --- Small mobile (≤480px) --- */
@media (max-width: 480px) {
.container { width: 92%; }
/* Logo: keep it tight, but allow it to shrink */
.logo {
width: auto !important;
flex: 0 1 auto !important;
max-width: 60vw;
}
.logo img { max-width: 100%; height: auto; }
/* Header right side: keep CN and hamburger compact */
.header-right {
flex: 0 0 auto !important;
gap: 14px !important;
margin-left: auto;
}
.language-current { font-size: 13px !important; padding: 0 2px; }
.header-right .search-icon { width: 24px; height: 18px; }
.header-right .search-icon:before { width: 24px; }
.header-right .search-icon:after { width: 24px; }
/* Banner: smaller heading, tighter padding */
.banner-intro-copy { padding: 22px 16px 20px !important; }
.banner-intro-copy h1 { font-size: 22px !important; gap: 8px !important; }
.banner-intro-copy h1:before,
.banner-intro-copy h1:after { width: 28px !important; height: 14px !important; }
.banner-intro-copy p { font-size: 13px !important; line-height: 1.7 !important; }
.banner-intro-copy strong { font-size: 14px !important; }
.banner-intro-img { max-height: 200px !important; }
/* Features stack */
.feature-item {
font-size: 14px !important;
gap: 14px !important;
height: 64px !important;
padding: 0 14px;
}
.feature-item img { width: 38px; height: 40px; }
/* Products tab bar */
.product-tabs { padding: 8px !important; }
.product-tab {
height: 86px !important;
font-size: 13px !important;
padding: 6px 4px;
}
.product-tab img { width: 36px; height: 36px; }
/* Product cards */
.product-list,
.product-panel { gap: 16px !important; }
.product-img { height: 200px !important; }
.product-list h3,
.product-panel h3 {
font-size: 15px !important;
padding: 4px 18px !important;
min-width: 0 !important;
max-width: 100%;
}
.product-list p,
.product-panel p { font-size: 14px; padding: 6px 10px; }
/* News */
.news-head h2 { font-size: 20px !important; }
.news-head h2 img { width: 32px !important; }
.news-head a { font-size: 13px !important; }
.news-feature span { height: 40px !important; padding: 0 10px !important; font-size: 13px !important; }
.news-feature b { -webkit-line-clamp: 2; }
.news-item b { font-size: 13px !important; line-height: 1.4; }
.news-item em { font-size: 12px !important; -webkit-line-clamp: 2; }
/* Detail hero */
.detail-hero h1,
.detail-title,
.about-title,
.section-title {
font-size: 22px !important;
gap: 10px !important;
}
.section-title img { width: 40px; }
.detail-tabs { flex-wrap: wrap; gap: 6px; }
.detail-tabs a { font-size: 13px; padding: 6px 10px; }
/* Footer */
.footer-inner { width: 92% !important; gap: 18px !important; }
.footer-logo { width: min(220px, 70%) !important; }
.contact { font-size: 12px !important; }
.footer-nav a { font-size: 12px !important; padding: 9px 6px !important; }
.qr { width: 88px !important; }
.copyright { font-size: 11px !important; width: 92% !important; }
/* Back to top */
.back-top {
right: 12px !important;
bottom: 14px !important;
width: 40px !important;
height: 40px !important;
font-size: 20px !important;
}
/* Mobile drawer nav */
.nav { top: 58px !important; }
.nav ul { padding: 14px 18px 30px !important; }
.nav > ul > li > a { font-size: 15px !important; height: 50px !important; }
.mobile-nav-search { padding: 18px 14px 22px !important; }
.mobile-nav-search form { height: 46px !important; }
.mobile-nav-search input { font-size: 15px !important; }
/* Application / advantage / case cards (other pages) */
.application-cards,
.advantage-grid,
.case-summary,
.product-cards,
.news-row {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.product-cards article,
.advantage-grid article,
.case-summary article,
.application-cards article {
padding: 14px 12px !important;
}
/* News list / detail content */
.news-lead-card h3 { font-size: 18px !important; line-height: 1.4; }
.news-article h1,
.news-article h2 { font-size: 20px !important; }
.news-article p { font-size: 14px !important; line-height: 1.75; }
.latest-news { padding: 14px !important; }
.latest-news b { font-size: 14px; }
/* About page */
.about-copy { padding: 18px 16px !important; font-size: 14px !important; line-height: 1.8; }
.ownership-head { padding: 16px 14px !important; border-radius: 24px !important; }
.ownership-head b { font-size: 18px !important; line-height: 1.25; }
.ownership-head span { font-size: 13px !important; line-height: 1.45; display: block; margin-top: 6px; }
.share-card { padding: 14px 10px !important; min-height: 0 !important; height: auto !important; justify-content: space-between !important; font-size: 12px !important; line-height: 1.4; }
.share-card b { margin-top: 0 !important; font-size: 13px !important; line-height: 1.2; white-space: nowrap; text-align: center; }
.share-card strong { font-size: 24px !important; line-height: 1; }
/* Hydrogen / battery / marine / product detail sections */
.detail-banner { height: 180px !important; }
/* Match the original site: keep 2-column grid on mobile, just shrink font/padding */
.spec-table,
.station-spec,
.case-table {
font-size: 11px !important;
margin-top: 15px !important;
}
.spec-table h3,
.station-spec h3 { font-size: 14px !important; padding: 9px !important; }
.case-table h3 { font-size: 14px; }
.spec-table > div,
.station-spec > div {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
min-height: 35px !important;
padding: 7px 9px !important;
}
.case-table > div {
grid-template-columns: minmax(0, 1fr) 105px !important;
padding: 9px 11px !important;
font-size: 12px;
}
.spec-table > div:last-child,
.station-spec > div:last-child,
.case-table > div:last-child { border-bottom: 0; }
.spec-table b,
.station-spec b,
.case-table b { font-size: 12px; }
.spec-table span,
.station-spec span { font-size: 12px; padding: 6px 8px !important; }
.case-table span { font-size: 12px; padding: 0; }
.spec-table span:last-child,
.station-spec span:last-child { text-align: right; }
.case-table span:last-child { text-align: right; }
.product-caption { padding: 18px 16px !important; }
.product-caption h2 { font-size: 20px !important; }
.product-caption p { font-size: 14px; line-height: 1.7; }
/* Make sure long English words break, not overflow */
body, h1, h2, h3, h4, h5, h6, p, li, a, span, b, strong, em, small {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Reduce huge hero text on detail pages */
.banner-copy h1 { font-size: 26px !important; }
.banner-copy p { font-size: 13px !important; }
/* Reduce some absolute sizes */
.products-bar h2 { font-size: 20px !important; padding: 6px 16px !important; }
}
/* --- Phones wider than 480 but ≤640px --- */
@media (min-width: 481px) and (max-width: 640px) {
.logo { width: 200px !important; flex: 0 0 200px !important; }
.banner-intro-copy h1 { font-size: 26px !important; }
.banner-intro-copy h1:before,
.banner-intro-copy h1:after { width: 36px !important; height: 16px !important; }
.product-tab { font-size: 14px !important; }
.footer-inner { width: 90% !important; }
}
/* --- Make sure no horizontal page scroll on any mobile size --- */
@media (max-width: 900px) {
html, body { overflow-x: hidden; }
body { position: relative; }
.header,
.banner,
main,
footer,
.back-top { max-width: 100vw; }
img, video { max-width: 100%; height: auto; }
}
/* --- Detail hero: prevent the absolute-positioned product image
(right:-22%~ -25% on each detail CSS) from covering the h1 on
very small screens. Make it static / below the title. --- */
@media (max-width: 520px) {
body.detail-page .detail-hero,
body.detail-page .detail-hero .detail-hero-inner {
height: auto !important;
min-height: 0 !important;
padding-bottom: 18px;
}
body.detail-page .detail-hero h1 {
position: relative !important;
top: 0 !important;
left: 0 !important;
padding: 78px 0 8px !important;
margin: 0 !important;
font-size: 22px !important;
}
body.detail-page .detail-hero h1:after { display: none; }
body.detail-page .detail-hero-inner > img,
body.detail-page .detail-hero .hero-product,
body.detail-page .uav-hero .hero-product,
body.detail-page .battery-hero .detail-hero-inner > img,
body.detail-page .digital-hero .detail-hero-inner > img,
body.detail-page .fuel-hero .detail-hero-inner > img,
body.detail-page .station-hero .detail-hero-inner > img,
body.detail-page .special-hero .detail-hero-inner > img,
body.detail-page .tech-hero .detail-hero-inner > img,
body.detail-page .about-hero .about-mark {
position: relative !important;
right: auto !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: min(280px, 80%) !important;
height: auto !important;
max-width: 100% !important;
margin: 12px auto 16px !important;
display: block !important;
}
body.detail-page .detail-tabs {
position: relative !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
margin-top: 6px;
}
/* Hydrogen & special pages have 3 tabs - keep 3 columns */
body.detail-page .hydrogen-tabs,
body.detail-page .special-tabs {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* Marine / digital / tech pages have 2 tabs - make them equal width */
body.detail-page .marine-tabs,
body.detail-page .digital-tabs,
body.detail-page .tech-tabs {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.detail-page .detail-tabs a {
height: 44px !important;
font-size: 12px !important;
padding: 0 6px !important;
white-space: normal !important;
line-height: 1.15 !important;
}
}
/* ============================================================
News section: single-line title + date on the feature card,
and clean multi-line ellipsis for the right list.
Fixes long English titles pushing the date off-screen and
breaking rows into multiple lines on small viewports.
============================================================ */
/* Desktop / tablet: feature card keeps title + date in one flex row,
title b can shrink so date stays on the right. */
.news-feature > span { display: flex; align-items: center; gap: 18px; }
.news-feature > span b {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400;
}
.news-feature > span time {
flex: 0 0 auto;
white-space: nowrap;
font-size: 14px;
opacity: .9;
}
/* News list: b (title) is single-line ellipsis, em (desc) is 2-line clamp.
Force min-width:0 so the flex/grid item can actually shrink. */
.news-item > span { min-width: 0; display: block; }
.news-item b {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
font-weight: 500;
line-height: 1.45;
color: #333;
}
.news-item em {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin-top: 4px;
color: #888;
font-size: 13px;
line-height: 1.55;
font-style: normal;
}
.news-item time { white-space: nowrap; }
/* Compact desktop / tablet: keep things tight */
@media (min-width: 901px) and (max-width: 1280px) {
.news-item b { font-size: 15px; }
.news-item em { font-size: 12px; }
}
/* Tablet and below: stack feature card / list vertically,
feature title keeps one row, list item title keeps one row
with ellipsis so layout doesn't break. */
@media (max-width: 900px) {
.news-feature > span b { font-size: 14px; }
.news-feature > span time { font-size: 12px; }
.news-item { grid-template-columns: 14px minmax(0, 1fr) 90px; gap: 10px; }
.news-item time { font-size: 12px; }
.news-item b { font-size: 14px; }
.news-item em { font-size: 12px; -webkit-line-clamp: 2; line-clamp: 2; }
}
/* Small phones: same single-line + ellipsis, but the date goes
underneath the title to avoid squeezing the headline. */
@media (max-width: 480px) {
.news-feature { aspect-ratio: 16/9; }
.news-feature > span { padding: 0 12px; }
.news-feature > span b {
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.news-feature > span time { font-size: 12px; }
/* Right list: title row + 2-line description, date below. */
.news-item {
grid-template-columns: 12px minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 4px 8px;
padding: 10px 0;
}
.news-item > span { grid-column: 2; }
.news-item b {
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.news-item em {
font-size: 12px;
-webkit-line-clamp: 2;
line-clamp: 2;
margin-top: 2px;
}
.news-item time {
grid-column: 2;
text-align: left;
font-size: 12px;
color: #9a9a9a;
}
}
/* news.html page: ensure lead card title and the row title also
single-line ellipsis on small viewports. */
@media (max-width: 480px) {
.news-lead-card h3 {
font-size: 18px !important;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.news-row .copy b {
font-size: 14px !important;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.news-row .copy em {
font-size: 12px !important;
-webkit-line-clamp: 2;
line-clamp: 2;
}
}