﻿/* Layout fixes shared by the September desktop templates. */
.moddle{width:min(1200px,calc(100% - 48px));}
body{min-width:0;overflow-wrap:break-word;}
#nav .nav-inner{width:min(1200px,calc(100% - 40px));}
#nav .nav-brand{flex:0 0 205px;}
#nav li{position:relative;flex:1;min-width:0;width:auto;float:none;}
#nav li dl{width:240px;max-width:80vw;}
#nav li:focus-within dl{left:0;}
#nav li dl dt a{height:auto;min-height:42px;line-height:1.5;padding:10px 14px;box-sizing:border-box;}
.ys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;background:#47464c;}
.ys dl{float:none;width:auto;max-width:none;min-height:0;padding:30px 18px;}
.ys .clear{display:none;}
.ys dl p{width:100%;}
.ys dl img{max-width:100%;object-fit:contain;}
.product-scene{width:100%;box-shadow:none;}
.prott{width:100%;margin-left:0;display:grid;grid-template-columns:20px minmax(0,1fr) 20px;}
.prott .pcontt{float:none;width:auto;min-width:0;}
#demo{width:100%;}
.title2{display:flex;justify-content:space-between;align-items:center;gap:20px;}
.title2 ul{float:none;width:auto;min-width:0;}
.title2 dt{float:none;flex:0 0 150px;width:auto;}
.title2>.clear{display:none;}
.xwzx{width:42%;margin-right:2%;}
.xwzx dl{width:100%;height:auto;aspect-ratio:5/3;}
.xwzx dl img{width:100%;height:100%;object-fit:cover;}
.xwzx dt{position:relative;width:auto;height:auto;margin:0;padding:24px;display:flex;gap:16px;}
.xwzx dt li{flex:0 0 95px;width:auto;float:none;margin:0;font-size:38px;}
.xwzx dt ol{float:none;width:auto;min-width:0;}
.xwzx1{width:56%;}
.xwzx1 li{height:auto;min-height:60px;line-height:1.6;padding:12px 0;box-sizing:border-box;}
.xwzx1 li a,.xwzx1 li span{font-size:15px;}
.xwzx1 li span{margin-left:15px;}
.nyxw2{display:flex;gap:10px;justify-content:space-between;align-items:center;height:auto;min-height:40px;line-height:1.7;}
.nyxw2 span{order:2;flex-shrink:0;font-size:12px;}
.rytp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.rytp>div,.rytp div li{width:auto;float:none;margin:0;}
.rytp div li a{display:block;width:100%;}
.rytp div li a img{width:100%;height:auto;aspect-ratio:4/3;}
.rytp div p{height:auto;line-height:1.6;padding:10px 0;}
.company{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:20px 0;}
.company ul,.company dl{width:auto;float:none;margin:0;min-width:0;}
.company dl{height:auto;aspect-ratio:4/3;}
.company .clear{display:none;}
.company .company-media video,.company .company-media .company-video-frame{object-fit:contain;}
.hero-copy{box-sizing:border-box;width:42%;}
.hero-copy h1{font-size:46px;}
.hero-copy p{font-size:18px;}
.hero-copy::before{display:none;}
.about-overview h1,.about-kicker,.about-strategy-mobile>span{letter-spacing:0;}
.about-overview-text p{text-align:left;text-indent:0;}
.about-anchor-nav{gap:32px;flex-wrap:wrap;}
.about-overview .about-stats{gap:24px;}
.about-overview .about-stats article{min-width:0;gap:16px;}
.about-overview .about-stats strong{display:inline-block;min-width:2ch;font-variant-numeric:tabular-nums;}
.about-overview .about-stats article:first-child strong{min-width:4ch;}
.about-overview .about-stats article:last-child strong{min-width:5ch;}
.about-stat-icon{flex:0 0 64px;}
.strategy-layout{grid-template-columns:320px minmax(0,1fr);gap:28px;}
.strategy-map{margin:0;}
.about-production,.about-news{padding:65px 0;scroll-margin-top:150px;}
.production-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:32px;}
.production-grid figure{margin:0;min-width:0;}
.production-grid img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
.production-grid figcaption{padding:14px 0;font-size:16px;text-align:center;}
.company-news-list{margin-top:32px;}
.company-news-list article{display:flex;gap:32px;padding:20px 0;border-bottom:1px solid #e4e8eb;font-size:17px;line-height:1.6;}
.company-news-list time{flex:0 0 100px;color:#7a848b;font-size:14px;}
.section-more{display:block;width:max-content;max-width:100%;margin:26px auto 0;font-size:15px;}
.about-strength-grid article{min-height:0;padding:40px 28px;}
#product-catalog{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;}
#product-catalog>.left,#product-catalog>.right{float:none;width:auto;margin:0;min-width:0;}
#product-catalog>.clear{display:none;}
.product{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 14px;}
.product>div{width:auto;float:none;margin:0;min-width:0;}
.product div li{width:auto;border-radius:4px;}
.product div li a{display:block;width:100%;height:auto;aspect-ratio:1;}
.product div li a img{width:100%;height:100%;}
.product div p{height:auto;min-height:48px;line-height:1.6;padding:10px 2px 0;overflow-wrap:anywhere;}
.product-detail-content{margin-top:30px;}
.product-detail-layout{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:40px;align-items:start;margin-bottom:36px;}
.product-detail-photo{position:sticky;top:90px;min-width:0;}
.product-detail-photo img{display:block;width:100%;max-height:580px;object-fit:contain;}
.product-detail-specifications{min-width:0;}
.product-detail-content h2{font-size:24px;line-height:1.5;margin:24px 0 16px;color:#0b5cab;}
.product-detail-specifications h2{margin-top:0;}
.product-detail-table-scroll{max-width:100%;overflow-x:auto;}
.product-detail-content .product-spec{min-width:0;width:100%;table-layout:auto;font-size:14px;}
.product-detail-content .product-spec th{white-space:normal;}
.product-detail-content .product-spec th,.product-detail-content .product-spec td{padding:9px 10px;line-height:1.5;}
.product-detail-content .product-spec td:first-child{text-align:left;min-width:90px;}
.product-detail-content .product-spec-note{margin:12px 0;line-height:1.7;}
.contact-page{padding:10px 0 40px;}
.contact-page h2{font-size:28px;line-height:1.5;margin-bottom:30px;}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 70px;border-top:1px solid #e2e6eb;padding-top:32px;}
.contact-grid h3{font-size:24px;color:#0b5cab;margin:0 0 14px;}
.contact-grid p{font-size:16px;line-height:2;margin:6px 0;}
.contact-grid .contact-phone{grid-column:2;grid-row:1 / span 2;}
.contact-grid a{font-size:inherit;overflow-wrap:anywhere;}
.contact-page .contact-action{display:inline-block;margin-top:30px;padding:8px 22px;background:#0b5cab;color:#fff;}
.footer,.revision-footer{box-sizing:border-box;padding:22px 20px;text-align:center;background:#252525;color:#bbb;line-height:1.6;font-size:13px;}
.footer p,.revision-footer p{margin:0;}
.footer a,.revision-footer a{color:inherit;}
.solution-banner{position:relative;height:350px;}
.solution-banner>img{width:100%;height:100%;object-fit:cover;}
.solution-banner h1{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;color:#fff;background:rgba(0,0,0,.25);text-align:center;padding:24px;margin:0;}
.section-tabs{display:flex;justify-content:center;gap:40px;padding:22px 24px;border-bottom:1px solid #e1e6eb;}
.section-tabs a{font-size:17px;line-height:1.5;}
.section-tabs a[aria-current]{color:#0b5cab;font-weight:bold;}
.solution-overview{min-height:220px;padding:50px 0;}
.solution-overview h2,.solution-contact h2{font-size:28px;margin:0 0 24px;}
.solution-copy,.service-content{font-size:16px;line-height:2;color:#596771;}
.solution-contact{padding:40px 0;background:#f3f5f7;}
.solution-contact a{font-size:17px;color:#0b5cab;}
.section-heading{padding:50px 0 30px;}
.section-heading h1{font-size:36px;color:#172a3a;}
.service-banner{position:relative;height:300px;overflow:hidden;background:#172a3a;}
.service-banner img{display:block;width:100%;height:100%;object-fit:cover;}
.service-banner h1{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;color:#fff;background:rgba(9,25,37,.28);font-size:38px;text-align:center;}
.service-content{min-height:300px;padding:40px 0;}
.service-content a{color:#0b5cab;}
.download-list li{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid #e1e6eb;}
.slide_container:not(.home-hero),.solution-banner,.service-banner{height:350px;max-height:350px;overflow:hidden;background:#172a3a;}
.slide_container:not(.home-hero) img,.solution-banner>img,.service-banner img{display:block;width:100%;height:100%;object-fit:cover;}
.solution-banner h1,.service-banner h1{display:none;}
#nav li dl{left:50%!important;transform:translate(-50%,10px);}
#nav li:hover dl,#nav li:focus-within dl{transform:translate(-50%,0);}
.nav-extras{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:7px;margin-left:8px;}
.nav-social,.nav-language{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;height:30px;min-width:30px;padding:0 5px;box-sizing:border-box;border:1px solid #cbd7df;border-radius:50%;color:#385064;font-size:12px;font-weight:600;line-height:1;}
.nav-social:hover,.nav-language:hover{border-color:#1687e8;color:#1687e8;}
.nav-language{min-width:38px;border-radius:3px;text-decoration:none;}
@media(max-width:1100px){
  #nav .nav-brand{flex-basis:180px;}
  #nav .nav-brand img{width:180px;}
  #nav li a{font-size:15px;}
  .ys dl{padding:24px 14px;}
  .ys dl p{font-size:14px;line-height:1.9;}
  .hero-copy h1{font-size:34px;}
  .hero-copy p{font-size:15px;}
  .about-overview .about-stats article{gap:10px;}
  .about-stat-icon{flex-basis:48px;}
  .about-overview .about-stats strong{font-size:42px;}
  .about-anchor-nav{gap:24px;}
  .strategy-layout{grid-template-columns:270px minmax(0,1fr);}
  .product{grid-template-columns:repeat(2,minmax(0,1fr));}
  .product-detail-layout{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px;}
}
@media(max-width:760px){
  .moddle{width:calc(100% - 32px);}
  #nav{height:auto;}
  #nav .nav-inner{width:100%;height:auto;flex-wrap:wrap;}
  #nav .nav-brand{flex:0 0 100%;height:48px;}
  #nav .nav-brand a{height:48px;justify-content:center;}
  #nav .nav-brand img{max-height:44px;width:165px;}
  #nav li{flex:1 0 33.333%;}
  #nav li a{height:40px;line-height:40px;font-size:14px;}
  #nav li:nth-last-child(-n+2) dl{right:auto;left:50%!important;}
  .ys{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ys dl img{width:76px;height:76px;}
  .ys dl dt{font-size:18px;margin:15px 0;}
  .company{grid-template-columns:1fr;gap:24px;}
  .xwzx,.xwzx1{float:none;width:100%;margin:20px 0;}
  .title2 dt{flex-basis:100px;}
  .title2 ul ol{font-size:20px;}
  .rytp{grid-template-columns:repeat(2,minmax(0,1fr));}
  .nyxw2{width:100%;float:none;margin:0;}
  .hero-copy{left:20px;right:20px;bottom:24px;width:auto;padding:0;}
  .hero-copy h1{font-size:26px;}
  .hero-copy p{font-size:13px;max-width:80%;}
  .about-anchor-nav{position:static;gap:16px;padding:18px 12px;}
  .about-anchor-nav a{font-size:14px;}
  .about-overview{padding-top:35px;}
  .about-overview h1,.about-section-title h2,.about-culture h2{font-size:28px;}
  .about-overview .about-stats{grid-template-columns:1fr;gap:26px;margin:35px auto;}
  .about-overview .about-stats article{justify-content:flex-start;max-width:260px;width:100%;margin:auto;}
  .about-stat-icon{flex-basis:64px;}
  .strategy-layout{grid-template-columns:1fr;}
  .production-grid,.about-strength-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .company-news-list article{gap:12px;font-size:15px;}
  .about-culture{min-height:400px;padding:65px 24px;}
  .about-culture p{font-size:17px;}
  #product-catalog{grid-template-columns:1fr;}
  #product-catalog .nlx{display:none;}
  .product-category-nav{display:flex;flex-wrap:wrap;}
  .product-category-nav p{flex:1 0 50%;}
  .product-detail-layout{grid-template-columns:1fr;}
  .product-detail-photo{position:static;}
  .product-detail-photo img{max-height:360px;}
  .contact-grid{grid-template-columns:1fr;gap:28px;}
  .contact-grid .contact-phone{grid-column:auto;grid-row:auto;}
  .contact-page h2{font-size:24px;}
  .section-tabs{gap:18px;flex-wrap:wrap;padding:18px 16px;}
  .section-tabs a{font-size:15px;}
  .slide_container:not(.home-hero),.solution-banner,.service-banner{height:260px;max-height:260px;}
  .nav-extras{justify-content:center;width:100%;margin:0;padding:6px 0 10px;}
  .back-to-top{right:15px;bottom:20px;}
}

/* Compact gray navigation modeled on the supplied reference. */
#nav{height:58px;line-height:normal;background:#e6e6e6;box-shadow:none;}
#nav .nav-inner{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(180px,1fr);gap:18px;width:min(1220px,calc(100% - 64px));height:58px;}
#nav .nav-brand{display:flex;align-items:center;flex:0 0 auto;height:58px;overflow:hidden;}
#nav .nav-brand a{display:flex;align-items:center;height:58px;}
#nav .nav-brand img{display:block;width:132px;height:auto;max-height:48px;object-fit:contain;}
#nav .nav-menu{display:flex;align-items:stretch;justify-content:center;min-width:0;margin:0;padding:0;list-style:none;}
#nav .nav-menu>li{position:relative;flex:0 0 auto;float:none;width:auto;background:transparent;text-align:center;}
#nav .nav-menu>li:hover{background:transparent;}
#nav .nav-menu>li>a{position:relative;display:block;height:58px;padding:0 19px;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;line-height:58px;white-space:nowrap;}
#nav .nav-menu>li>a:hover{color:#1687e8;}
#nav .nav-menu>li>a:after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:#1687e8;transition:left .2s ease,width .2s ease;}
#nav .nav-menu>li:hover>a:after,#nav .nav-menu>li>a#current:after{left:22%;width:56%;}
#nav .nav-menu>li>a#current{color:#1687e8;background:transparent;}
#nav .nav-menu>li dl{top:100%;left:50%!important;width:240px;background:#f2f2f2;border-top:1px solid #d8d8d8;box-shadow:0 8px 18px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;}
#nav .nav-menu>li:hover dl,#nav .nav-menu>li:focus-within dl{opacity:1;visibility:visible;transform:translate(-50%,0);}
#nav .nav-menu>li dl dt{border-bottom:1px solid #ddd;}
#nav .nav-menu>li dl dt a{height:auto;padding:10px 14px;color:#333;font-size:12px;line-height:1.5;}
#nav .nav-menu>li dl dt a:after{display:none;}
#nav .nav-menu>li dl dt a:hover{color:#1687e8;background:#e9e9e9;font-size:12px;}
#nav .nav-extras{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0;margin:0;}
#nav .nav-social{display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px;width:16px;height:22px;padding:0;border:0;border-radius:0;color:#1687e8;font-size:14px;font-weight:700;line-height:1;text-decoration:none;}
#nav .nav-social:hover{color:#086fc2;}
#nav .nav-social-facebook{display:inline-flex;flex:0 0 22px;width:22px;height:22px;min-width:22px;max-width:22px;padding:0;border-radius:50%!important;background:#1687e8;color:#fff;font-size:11px;line-height:22px;overflow:hidden;}
#nav .nav-social-facebook:hover{background:#086fc2;color:#fff;}
#nav .nav-social-tiktok svg{display:block;width:14px;height:14px;fill:currentColor;}
#nav .nav-social-x{font-size:13px;}
#nav .nav-social-youtube svg{display:block;width:14px;height:14px;fill:currentColor;}
#nav .nav-social.is-unconfigured{opacity:.9;}
#nav .nav-language{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;height:22px;margin-left:2px;padding:0 0 0 9px;border:0;border-left:1px solid #b9b9b9;border-radius:0;color:#333;font-size:10px;font-weight:400;line-height:1;text-decoration:none;white-space:nowrap;}
#nav .nav-language:hover{color:#1687e8;}
#nav .nav-language svg{width:13px;height:13px;fill:none;stroke:#1687e8;stroke-width:1.7;}
#nav .nav-language span{color:#333;}

/* Keep the advantage strip dark while removing the image tile backgrounds. */
.ys dl{background:#47464c;box-shadow:none;}
.ys dl:hover{box-shadow:none;}
.ys .advantage-line-icon{display:block;width:120px;height:120px;margin:0 auto;cursor:pointer;background:center/contain no-repeat;transition:transform .35s ease;}
.ys dl:hover .advantage-line-icon{transform:scale(1.08);}
.ys dl:nth-child(1) .advantage-line-icon{background-image:url('../../static/upload/image/20260908/strength-service.svg');}
.ys dl:nth-child(2) .advantage-line-icon{background-image:url('../../static/upload/image/20260908/strength-delivery.svg');}
.ys dl:nth-child(3) .advantage-line-icon{background-image:url('../../static/upload/image/20260908/strength-standard.svg');}
.ys dl:nth-child(4) .advantage-line-icon{background-image:url('../../static/upload/image/20260908/strength-safety.svg');}

@media(max-width:760px){
  #nav{height:auto;line-height:normal;}
  #nav .nav-inner{grid-template-columns:1fr;gap:0;width:100%;height:auto;}
  #nav .nav-brand{justify-content:center;height:48px;}
  #nav .nav-brand a{height:48px;}
  #nav .nav-menu{flex-wrap:wrap;}
  #nav .nav-menu>li{flex:1 0 33.333%;}
  #nav .nav-menu>li>a{height:40px;padding:0 8px;color:#333;font-size:14px;line-height:40px;}
  #nav .nav-menu>li>a:after{height:2px;}
  #nav .nav-menu>li dl{top:40px;left:50%!important;width:220px;transform:translate(-50%,6px);}
  #nav .nav-menu>li:hover dl,#nav .nav-menu>li:focus-within dl{transform:translate(-50%,0);}
  #nav .nav-menu>li dl dt a{height:auto;line-height:1.5;padding:10px 14px;}
  #nav .nav-extras{justify-content:center;padding:6px 0 10px;}
  .ys .advantage-line-icon{width:76px;height:76px;}
}

@media(min-width:561px) and (max-width:760px){
  #nav{height:58px;}
  #nav .nav-inner{grid-template-columns:90px minmax(0,1fr) auto;gap:6px;width:calc(100% - 64px);height:58px;}
  #nav .nav-brand{justify-content:flex-start;height:58px;}
  #nav .nav-brand a{height:58px;}
  #nav .nav-brand img{width:90px;max-height:38px;}
  #nav .nav-menu{flex-wrap:nowrap;}
  #nav .nav-menu>li{flex:0 0 auto;}
  #nav .nav-menu>li>a{height:46px;padding:0 6px;font-size:10px;line-height:58px;}
  #nav .nav-menu>li>a:after{height:2px;}
  #nav .nav-extras{justify-content:flex-end;gap:5px;padding:0;}
  #nav .nav-social{flex-basis:13px;width:13px;font-size:12px;}
  #nav .nav-social-tiktok svg{width:13px;height:13px;}
  #nav .nav-language{gap:3px;height:20px;padding-left:6px;font-size:9px;}
  #nav .nav-language svg{width:12px;height:12px;}
}

