/* CSS Document */
* { margin: 0; padding: 0; border: 0; }
.clear { clear: both; display: none; }
body { font-family: 微软雅黑; font-size: 14px; color:#000; }
a { color: #000; text-decoration: none; }
a:hover { color:#2f3690; }
/*** 头部 */
.nav { height: 88px; width: 1160px; margin: 0 auto; }
.logo { float: left; width: 115px; }
.mainnav { float:left; width: 805px; }
.mainnav ul { margin: 0 auto; width: 710px; height: 30px; padding-top: 35px; }
.mainnav li { float: left; list-style: none; padding: 5px 16px ; }
.mainnav li a { font-size: 16px; }
.mainnav li.current { float: left; list-style: none; padding: 5px 15px; background:#2f3690;}
.mainnav li.current a { color:#fff; }
.mainnav li a em { font-style: normal; font-size: 12px; padding-left:5px; }
.lang { float: left; width: 240px; line-height: 98px; }
.lang span { padding: 15px 10px; border: 1px dotted #2f3690; margin-left: 5px;}
.lang span a { background:url(../img/email.jpg) no-repeat; padding: 10px 0 10px 50px; display:inline;  }
/*** banner图片切换 */
.bx-wrapper { position: relative; margin: 0 auto 0px; padding: 0; *zoom: 1;}
.bx-wrapper img { max-width: 100%; display: block; margin:0 auto; }
.bx-wrapper .bx-viewport { -moz-box-shadow:0 0 5px #ccc; -webkit-box-shadow:0 0 5px #ccc; box-shadow:0 0 5px #ccc; #border:5px solid #fff;#left:-5px;background:#fff; -webkit-transform:translatez(0); -moz-transform:translatez(0); -ms-transform:translatez(0); -o-transform:translatez(0); transform:translatez(0) }
.bx-wrapper .bx-controls-auto, .bx-wrapper .bx-pager { position:absolute; bottom:30px; width:100% }
.bx-wrapper .bx-loading { min-height:50px; background:url(../img/bx_loader.gif) center center no-repeat #fff; height:100%; width:100%; position:absolute; top:0; left:0; z-index:2000 }
.bx-wrapper .bx-pager { text-align:center; font-size:.85em; font-family:Arial; font-weight:700; color:#666; padding:10px 0; background:url(../img/baner_bg.png) center bottom no-repeat; background-size:230px 30px }
.bx-wrapper .bx-controls-auto .bx-controls-auto-item, .bx-wrapper .bx-pager .bx-pager-item { display:inline-block }
.bx-wrapper .bx-pager.bx-default-pager a { background:#666; text-indent:-9999px; display:block; width:10px; height:10px; margin:0 5px; outline:0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px }
.bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:hover { background:#ed1927 }
.bx-wrapper .bx-prev { left:10px; background:url(../img/controls.png) no-repeat 0 -32px }
.bx-wrapper .bx-next { right:10px; background:url(../img/controls.png) no-repeat -43px -32px }
.bx-wrapper .bx-prev:hover { background-position:0 0 }
.bx-wrapper .bx-next:hover { background-position:-43px 0 }
.bx-wrapper .bx-controls-direction a { position:absolute; top:50%; margin-top:-16px; outline:0; width:32px; height:32px; text-indent:-9999px; z-index:9999 }
.bx-wrapper .bx-controls-direction a.disabled { display:none }
.bx-wrapper .bx-controls-auto { text-align:center }
.bx-wrapper .bx-controls-auto .bx-start { display:block; text-indent:-9999px; width:10px; height:11px; outline:0; background:url(../img/controls.png) -86px -11px no-repeat; margin:0 3px }
.bx-wrapper .bx-controls-auto .bx-start.active, .bx-wrapper .bx-controls-auto .bx-start:hover { background-position:-86px 0 }
.bx-wrapper .bx-controls-auto .bx-stop { display:block; text-indent:-9999px; width:9px; height:11px; outline:0; background:url(../img/controls.png) -86px -44px no-repeat; margin:0 3px }
.bx-wrapper .bx-controls-auto .bx-stop.active, .bx-wrapper .bx-controls-auto .bx-stop:hover { background-position:-86px -33px }
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align:left; width:80% }
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right:0; width:35px }
.bx-wrapper .bx-caption { position:absolute; bottom:0; left:0; background:#666\9; background:rgba(80, 80, 80, .75); width:100% }
.bx-wrapper .bx-caption span { color:#fff; font-family:Arial; display:block; font-size:.85em; padding:10px }
/* 解决方案及四个块*/
.main1{ width: 100%; background:#f7f8f8; height: 80px; }
.main2{ width: 100%; background:#f7f8f8; height: 400px; }
.solution { height: 80px; width: 1160px; margin: 0 auto; background: #fff;line-height: 80px;}
.solutiontitle { float: left; width: 160px; font-size: 20px; text-align: center;}
.solutionlist { float: left; }
.solutionlist li { list-style: none; float: left;}
.solutionlist li a { padding: 2px 8px; margin: 0 3px;}
.solutionlist li a:hover, .solutionlist li.current a { background:#2f3690; color:#fff;}
.moresolution { float: left; padding-left: 50px;}
.moresolution a { color:#2f3690; }
.boxlist { padding: 50px 0; width: 1160px; margin: 0 auto;}
.onebox {width: 265px; float: left; padding-right: 33px;}
.lastbox { padding-right: 0px;}
.boxtext { height: 48px; padding: 12px; background:#fff;}
.boxtext p { line-height: 20px; text-align: center;}
/* 关于公司 */
.about {width: 1160px; height: 340px; margin: 0 auto;}
.abouttitle { width: 1160px; height: 50px; line-height: 50px; font-size:24px; padding-top:40px; clear:both;}
.aboutleft { width: 450px; float:left;}
.aboutmid{ width:266px; float:left;}
.aboutright { float: left; width: 414px; padding-left: 30px;}
.aboutleft .lefttitle, .aboutright .lefttitle { background: url(../img/dot1.jpg) no-repeat 2px 21px; padding: 0 0 0 20px; height: 50px; line-height: 50px; font-size: 18px;}
.aboutleft p, .aboutright p { line-height: 20px; padding: 0 30px 30px 0;}
.aboutleft p a, .aboutright p a { color:#2f3690;}
.bg { height: 30px; width: 100%; background:#f7f8f8;}
/* 三个产品 */
.product {width: 1160px; margin: 0 auto;}
.producttitle { width: 1160px; height: 90px; line-height: 90px; padding-top: 20px; font-size: 24px;}
.productlist { height: 620px; }
.oneproduct { width: 336px; float: left; padding-right: 60px;} 
.lastproduct { padding-right: 0;}
.productimg { padding-bottom: 35px;}
.oneproduct p { line-height: 18px; padding-bottom: 15px;}
.productdetail a {color:#2f3690;}
/* 导航、slogen、面包屑*/
.littlenav { height: 100px; width: 1160px; margin: 0 auto;}
.littlenav ul { width: 460px; margin: 0 auto;}
.littlenav li { background: url(../img/dot2.jpg) no-repeat 40px 47px; list-style: none; padding-left: 60px; float: left; line-height: 100px;}
.littlenav li a {color:#2f3690; }
.slogen{ width: 1160px; height: 220px; background: #fff; margin: 0 auto;}
.slogen .slogenleft { float: left; padding: 50px 0 0 110px;}
.slogen .slogenmid { float: left; width: 697px; text-align: center; padding-top: 55px;}
.slogen .slogenright { float: right; padding: 50px 110px 0 0;}
.slogenmid p { line-height: 30px; height: 30px;}
.slogenmid .contactusimg { padding-top: 10px;}
.bread { width: 1160px; margin: 0 auto; height: 80px; line-height: 80px; text-transform: capitalize;}
/* footer */
.footer {height: 360px; width: 1160px; margin: 0 auto;}
.footnav { width: 900px; float: left;}
.wechat {width: 260px; float: left; padding-top: 35px;}
.wechat p { line-height: 30px; height: 30px; width: 170px; text-align: center;}
.footnav ul { float: left; padding: 30px 100px 0 10px;}
.footnav ul p { height: 60px; line-height: 60px;}
.footnav ul li { list-style: none; line-height: 22px;}
.copyright { width: 1160px; clear: both; text-align: center; line-height: 70px; height: 70px; padding-top: 30px;}
/* 关于我们页面*/
.aboutbanner { background: url(../img/about-banner.jpg) no-repeat center 0; width: 100%; height: 552px;}
.imgbread { width: 1160px; height: 60px; line-height: 60px; margin: 0 auto; text-transform: capitalize;}
.aboutmain { background: #f7f8f8; width: 100%; height: 1380px;}
.aboutmain h3 { font-size: 24px; font-weight: normal; line-height: 56px;}
.aboutmain p { line-height: 18px;}
.intro { width: 1060px; margin: 0 auto; height: 100px; padding: 50px; background: #fff; text-align: center;}
.aboutboxlist { width: 1160px; margin: 0 auto; height: 1015px; margin-top: 30px; background: #fff;}
.oneboxs { background: #fff;}
.oneboxs .leftboxs, .oneboxs .rightboxs { float: left; width: 460px; padding: 50px 60px; }
.oneboxs .nopadding { padding: 0; width: 580px;}
.aboutlast { width: 1090px; background: #fff; height: 50px; padding: 35px; margin: 0 auto; clear: both;  margin-top: 30px;}
/* 联系我们页面*/
.contactbanner { background: url(../img/contactbanner.jpg) no-repeat center 0; width: 100%; height: 552px;}
.contactintro { width: 1060px; margin: 0 auto; height: 100px; padding: 50px; text-align: center;}
.contactintro h3 { font-size: 24px; font-weight: normal; line-height: 56px;}
.contactintro p { line-height: 18px;}
.contactlist { width: 960px; margin: 0 auto; height: 200px; }
.onemethod { width: 90px; padding-right: 110px; float: left;}
.onemethod img {}
.onemethod p { text-align: center; line-height: 30px;}
.map {width: 100%;  height: 500px; background:#f7f8f8;}
#dituContent { width: 1160px; margin: 0 auto; height: 500px; border:#ccc solid 1px;}
/*产品页*/
.promain { background:#f7f8f8; width: 100%; height: auto; padding-bottom: 30px;}
.promain .probread { height: 56px; line-height: 56px; width: 1160px; margin: 0 auto; font-size: 12px; text-transform: capitalize;}
.promain .pro1 { height: 520px; width: 1160px; margin: 0 auto; padding-bottom: 50px;}
.pro1 .proimg { width: 553px; float: left;}
.pro1 .proabout { width: 507px; padding: 100px 0 0 100px; float: left;}
.proabout h1 { font-size: 24px; font-weight: normal; height: 70px; line-height: 30px; text-transform: capitalize;}
.proabout h3 { font-size: 18px; font-weight: normal; height: 50px; line-height: 50px; padding-top: 30px; }
.cosmeticshare { padding-top: 30px;}
.promain .pro2 { height: auto; width: 1160px; margin: 0 auto; padding-bottom: 50px; background: #fff;} 
.pro2 .protabs { float:left; height: 56px; border-bottom:2px solid #f7f8f8;}
.protabs li { width: 150px; float: left; height: 56px; line-height: 56px; text-align:center; list-style: none; border-right: 2px solid #f7f8f8;}
.protabs li.tabcurrent { background: #2f3690; }
.protabs li.tabcurrent a { color: #fff;}
.protabs li.proshare { width: 400px; border: 0;}
.protabs li.proshare .jiathis_style { padding: 22px 0 0 50px;}
.protabs li.proshare .jiathis_style a { display: inline-block; padding-right: 10px; float: left;}
.procontent { clear:both;padding: 50px;} /*产品页和解决方案页共用此格式*/
.procontent h3 { font-size: 24px; font-weight: normal; line-height: 80px; height: 80px; padding-left: 20px; background: url(../img/dot1.jpg) no-repeat 0 35px;}
.procontent h4 { line-height: 70px; height: 74px;}
.procontent p { line-height: 22px; padding-bottom: 10px;}
.procontent ul { padding-bottom: 10px;}
.procontent li { line-height: 22px; list-style-position: inside; }
.procontent .protable { border-collapse:collapse; border:none; width: 95%;}
.procontent .protable tr { height: 26px; line-height: 26px;}
.procontent .protable td { border: 1px solid #ccc; padding-left: 10px;}
/*产品列表页*/
.productsmain { width: 1160px; margin: 0 auto; }
/*解决方案页*/
.solultionbanner { background: url(../img/solutionbanner.jpg) no-repeat center 0; width: 100%; height: 513px;}
.solutionmain { background:#f7f8f8; width: 100%; height: auto; padding-bottom: 30px;}
.solutionmain .solution { height: auto; width: 1160px; margin: 0 auto; } 
.solution .solutontabs { float:left; height: auto; margin: 50px 0 30px 0;  }
.solutontabs li { width: 163px; float: left; height: 56px; line-height: 56px; text-align:center; list-style: none; border-right: 2px solid #f7f8f8; border-bottom:2px solid #f7f8f8;background:#fff;}
.solutontabs li.tabcurrent { background: #2f3690; }
.solutontabs li.tabcurrent a { color: #fff;}
.solutionmain .solution2 {  width: 1160px; margin: 0 auto; background:#fff; clear: both;} 
.solution2 h1 { font-size: 24px; font-weight: normal; padding-bottom: 30px;}
.solution2 .imglistleft { width: 600px; float: left; }
.solution2 .imglist { width: 266px; float: right; padding: 30px;}
/*服务保障*/
.servicebanner { background: url(../img/servicebanner.jpg) no-repeat center 0; width: 100%; height: 520px;}
.servicelist { height: auto; width: 1160px; margin: 0 auto;  }
.oneservice { width: 285px; height: 250px; background: #fff; float:left; margin: 15px 5px 15px 0; text-align:center; }
.oneservice img { padding: 18px 0;}
.oneservice p { padding: 0 15px;}
.networkbutton { width: 168px; height: 40px; line-height: 40px; background: #ff9900;  text-align: center; margin-top: 20px;}
.networkbutton a {color: #fff;}
/*服务网络*/
.networkbanner { background: url(../img/networkbanner.jpg) no-repeat center 0; width: 100%; height: 520px; clear: both;}
.network { height: auto; width: 1160px; margin: 0 auto; } 
.netbutton { width: 170px; height: 40px; line-height:40px; background:#2f3690; text-align: center; margin: 35px 0; }
.netbutton a {color: #fff;}
/*留言板*/
.modal-content{border:none;border-radius:0;-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5);background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);background-clip:padding-box;outline:0; max-width:1140px; width: 95%;}
.modal-content div{box-sizing:border-box}
.modal-body p{color:#666;  margin-top:30px; margin-bottom:0;margin-right:0;}
.modal-body h4{color:#2f3690;font-size:18px;}
.modal-body{padding:20px;color:#333}
.caption{margin-top:10px}
.centent_inp{width:50%;float:left}
.centent_inp:first-child{padding-right:12px}
label{display:inline-block;margin-bottom:5px;font-weight:700}
.centent_inp label span{color:#d31f2b;font-size:12px}
.modal-content button,.modal-content input,.modal-content keygen,.modal-content select,.modal-content textarea{box-sizing:border-box;align-items:center;white-space:pre;-webkit-rtl-ordering:logical;color:#000;background-color:#fff;cursor:default;border-width:1px;border-style:solid;border-image:initial}
input{font-family:inherit;font-size:inherit;line-height:inherit}
.modal-content input[type=email],.modal-content input[type=text]{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857;color:#555;vertical-align:middle;background-color:#fff;background-image:none;border:1px solid #ceced0;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.full{min-height:1px;}
.modal-content input[type=submit], .modal-content input[type=reset] { cursor: pointer;}
.content_left,.content_right{min-height:1px;padding-left:4px;padding-right:4px}
.content_left{width:25%;float:left}
.content_right{width:75%;float:left}
.caption textarea{width:100%;border-radius:4px;border:1px solid #ceced0;padding:6px 12px;}
.last_can,.last_sub{background:#2f3690!important;position:static;line-height:13px;border-radius:3px;padding:8px 12px;background:0 0;border-style:solid;border-width:1px;text-transform:uppercase;font-weight:700;height:30px;padding:10px 10px 8px;margin-right:4px;margin-left:4px;text-decoration:none}
.last_can{background:#ccc!important}
.last_can,.last_sub{color:#fff!important;border:0;margin-top:5px;}
.modal-body p.red {color:#F00;}

/* --- Cloudflare static build: lock banner height, remove slider CLS --- */
.banner{ width:100%; aspect-ratio:1920 / 552; overflow:hidden; }
.banner .bx-wrapper,
.banner .bx-viewport{ height:100% !important; margin:0; box-shadow:none; }
.banner > .bxslider{ margin:0; padding:0; list-style:none; }
.banner > .bxslider > li{ display:none; }
.banner > .bxslider > li:first-child{ display:block; }
.banner .bxslider img{ width:100%; height:100%; object-fit:cover; display:block; }


/* ==================================================================
   RESPONSIVE LAYER (Cloudflare static build)
   Desktop >=1200px keeps the original fixed 1160px layout untouched.
   <=1200px : fluid containers, grids, flex nav/footer
   <=900px  : single-column stacking, touch sizing
   <=600px  : typography fine-tuning
   ================================================================== */

/* ---- 0. global safety ---- */
/* display:block kills the standards-mode inline-image baseline gap (~5px)
   that breaks the legacy pixel-exact fixed-height float rows */
img{ max-width:100%; height:auto; display:block; }
/* images that relied on inline text-align centering */
.productimg img, .pro1 .proimg img, .onemethod img, .aboutmid img,
.contactusimg img, .oneservice img, .slogenmid img{
  margin-left:auto; margin-right:auto; }
.tablewrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* legacy fixed heights too small for their content (also broken on the
   original desktop site): let them grow */
.aboutmain{ height:auto !important; padding-bottom:30px; }
.networkbutton{ height:auto; min-height:40px; line-height:1.5;
  padding:8px 12px; box-sizing:border-box; }

/* ---- 0b. hamburger button (hidden on desktop) ---- */
.navtoggle{ display:none; background:none; border:0; cursor:pointer;
  padding:10px; -webkit-appearance:none; appearance:none; }
.navtoggle span{ display:block; width:26px; height:3px; background:#2f3690;
  margin:5px 0; border-radius:2px;
  transition:transform .25s ease, opacity .25s ease; }
.nav.open .navtoggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav.open .navtoggle span:nth-child(2){ opacity:0; }
.nav.open .navtoggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:1200px){

  /* ---- 1a. fluid containers (were fixed 1160/1090/1060/960px) ---- */
  .nav, .about, .abouttitle, .product, .producttitle, .productlist,
  .littlenav, .slogen, .bread, .footer, .copyright, .imgbread,
  .intro, .aboutboxlist, .aboutlast, .contactintro, .contactlist,
  .solution, .boxlist, .productsmain, .solutionmain .solution,
  .solutionmain .solution2, .servicelist, .network, #dituContent,
  .promain .probread, .promain .pro1, .promain .pro2{
    width:auto !important; max-width:1160px;
    margin-left:auto; margin-right:auto;
    padding-left:15px; padding-right:15px; box-sizing:border-box;
  }

  /* ---- 1b. unlock fixed heights that clip/overlap content ---- */
  .productlist, .aboutmain, .aboutboxlist, .aboutlast, .intro,
  .contactintro, .contactlist, .about, .main2, .littlenav,
  .slogen, .footer, .promain .pro1, .productsmain{ height:auto !important; }
  html, body{ overflow-x:hidden; }

  /* ---- 1c. hero banners scale instead of cropping ---- */
  .aboutbanner, .contactbanner, .servicebanner, .networkbanner, .solultionbanner{
    height:auto; background-size:cover; background-position:center;
  }
  .aboutbanner, .contactbanner{ aspect-ratio:1920 / 552; }
  .servicebanner, .networkbanner{ aspect-ratio:1920 / 520; }
  .solultionbanner{ aspect-ratio:1920 / 513; }
  /* keep breadcrumbs readable over photo banners */
  .aboutbanner .imgbread, .contactbanner .imgbread,
  .servicebanner .imgbread, .networkbanner .imgbread, .solultionbanner .imgbread{
    background:rgba(255,255,255,.82); height:auto; line-height:2.4;
    padding-left:15px; padding-right:15px; }

  /* ---- 1d. header nav -> flexible bar ---- */
  .nav{ display:flex; flex-wrap:wrap; align-items:center;
        justify-content:space-between; height:auto; padding-top:8px; padding-bottom:8px; }
  .logo{ float:none; width:auto; }
  .mainnav{ float:none; width:auto; flex:1 1 auto; min-width:0; }
  .mainnav ul{ display:flex; flex-wrap:wrap; justify-content:center;
               width:auto; height:auto; padding:6px 0; }
  .mainnav li, .mainnav li.current{ float:none; }
  .lang{ float:none; width:auto; line-height:normal; padding:10px 4px; }

  /* ---- 1e. product cards -> auto-fill grid (3/2/1 cols by width) ---- */
  .productlist{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
                gap:30px; }
  .oneproduct{ width:auto; float:none; padding-right:0; }
  .productimg{ text-align:center; }

  /* ---- 1f. home about section ---- */
  .about{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
          gap:0 24px; align-items:start; }
  .about .abouttitle{ grid-column:1 / -1; padding-left:0; padding-right:0; }
  .aboutleft, .aboutmid, .aboutright{ width:auto; float:none; padding-left:0; }

  /* ---- 1g. slogen strip + little nav ---- */
  .slogen{ display:flex; align-items:center; padding-top:20px; padding-bottom:20px; }
  .slogen .slogenleft{ float:none; padding:0 0 0 20px; }
  .slogen .slogenmid{ float:none; flex:1 1 auto; width:auto; padding-top:0; }
  .slogen .slogenright{ float:none; padding:0 20px 0 0; }
  .littlenav ul{ width:auto; display:flex; justify-content:center; flex-wrap:wrap; }

  /* ---- 1h. footer -> flex ---- */
  .footer{ display:flex; flex-wrap:wrap; align-items:flex-start; }
  .footnav{ width:auto; float:none; flex:1 1 560px;
            display:flex; flex-wrap:wrap; }
  .footnav ul{ float:none; padding:30px 40px 0 10px; }
  .wechat{ width:auto; float:none; flex:0 0 auto; }
  .copyright{ flex:1 1 100%; height:auto; }

  /* ---- 1i. product detail: intro 2-col grid, tabs flex ---- */
  .promain .pro1{ display:grid; grid-template-columns:1fr 1fr; gap:30px;
                  align-items:center; }
  .pro1 .proimg{ width:auto; float:none; text-align:center; }
  .pro1 .proabout{ width:auto; float:none; padding:0; }
  .proabout h1{ height:auto; }
  .pro2 .protabs{ float:none; height:auto; display:flex; flex-wrap:wrap; }
  .protabs li{ width:auto; flex:1 1 auto; height:48px; line-height:48px;
               border-right:0; }
  .protabs li.proshare{ display:none; }

  /* ---- 1j. about page blocks ---- */
  .intro{ padding:25px 20px; }
  /* !important: the HTML carries inline style="height:339px" on each box */
  .oneboxs{ display:flex; align-items:center; height:auto !important; }
  .oneboxs .leftboxs, .oneboxs .rightboxs{ float:none; width:auto; flex:1 1 50%;
    padding:30px; box-sizing:border-box; }
  .oneboxs .nopadding{ padding:0; width:auto; }
  .aboutlast{ padding:25px 20px; }

  /* ---- 1k. contact page ---- */
  .contactintro{ padding:25px 20px; }
  .contactlist{ display:flex; flex-wrap:wrap; justify-content:center;
                gap:24px 40px; padding-bottom:25px; }
  .onemethod{ width:auto; max-width:300px; padding-right:0; float:none; }

  /* ---- 1l. service cards -> grid ---- */
  .servicelist{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
                gap:12px; }
  .oneservice{ width:auto; float:none; margin:0; height:auto; padding-bottom:18px; }
  .networkbutton, .netbutton{ height:auto; min-height:40px; line-height:1.5;
    padding:9px 14px; box-sizing:border-box; margin:20px auto 0; }
}

/* ---- collapse header nav into a hamburger menu ---- */
@media (max-width:1024px){
  .navtoggle{ display:block; }
  .nav{ flex-wrap:wrap; justify-content:space-between; align-items:center; }
  .mainnav, .lang{ display:none; }
  .nav.open .mainnav{ display:block; flex:1 1 100%; width:100%;
    border-top:1px solid #eee; margin-top:8px; }
  .nav.open .mainnav ul{ display:block; padding:0; }
  .nav.open .mainnav li, .nav.open .mainnav li.current{
    float:none; padding:0; text-align:center; border-bottom:1px solid #eee; }
  .nav.open .mainnav li a{ display:block; padding:14px 0; }
  .nav.open .mainnav li.current{ background:#2f3690; }
  .nav.open .lang{ display:block; flex:1 1 100%; width:100%;
    text-align:center; line-height:normal; padding:18px 0 12px; }
}

@media (max-width:900px){

  /* ---- 2a. stack the remaining two/three-column layouts ---- */
  .about{ display:block; }
  .aboutleft, .aboutmid, .aboutright{ text-align:center; padding-bottom:20px; }
  .aboutleft p, .aboutright p{ padding:0 0 16px; }

  .slogen{ flex-direction:column; text-align:center; gap:14px; }
  .slogen .slogenleft, .slogen .slogenright{ display:none; }
  .slogenmid p{ height:auto; line-height:1.7; }

  .promain .pro1{ grid-template-columns:1fr; }
  .pro1 .proabout{ padding-top:10px; }

  /* plain block stacking — column flex mis-sizes with attr-sized images */
  .oneboxs{ display:block; }
  .oneboxs .leftboxs, .oneboxs .rightboxs{ display:block; width:auto; padding:20px 15px; }
  .oneboxs img{ display:block; margin-left:auto; margin-right:auto; }
  .oneboxs .nopadding img[style]{ margin:16px auto !important; }

  /* legacy 56px line-heights make wrapped headings fall apart */
  .aboutmain h3, .contactintro h3, .aboutmain .intro h3{
    line-height:1.5; padding-bottom:8px; }

  /* ---- 2b. footer / breadcrumb nav touch sizing ---- */
  .footnav{ display:block; }
  .footnav ul{ display:inline-block; vertical-align:top; padding:20px 25px 0 10px; }
  .footnav ul p, .footnav ul .footcol-title{ height:auto; line-height:2; }
  .footnav ul li{ line-height:30px; }
  .wechat{ width:100%; text-align:center; padding-top:20px; }
  .wechat p{ width:auto; }
  .littlenav li{ float:none; display:inline-block; line-height:1.6;
                 padding:10px 18px; background:none; }

  /* ---- 2c. product detail content ---- */
  .procontent{ padding:20px 15px; }
  .procontent h3{ height:auto; line-height:1.4; padding:12px 0 12px 20px;
                  background-position:0 center; }
  .procontent .protable{ width:100%; }
  .procontent .protable td{ padding:4px 10px; }

  /* ---- 2d. inquiry form fields full-width ---- */
  .centent_inp{ width:100%; float:none; }
  .centent_inp:first-child{ padding-right:0; }
  .content_left, .content_right{ width:100%; float:none; }
}

@media (max-width:600px){

  /* ---- 3. typography + spacing on small phones ---- */
  .producttitle, .abouttitle, .aboutmain h3, .contactintro h3,
  .solution2 h1, .procontent h2, .proabout h1{ font-size:20px; }
  .producttitle{ line-height:1.4; height:auto; padding-top:16px; padding-bottom:6px; }
  .abouttitle{ height:auto; line-height:1.4; padding-top:24px; }
  .proabout h1{ line-height:1.4; }
  .imgbread, .probread, .bread{ font-size:12px; }
  .procontent{ padding:16px 12px; }
  .last_sub, .last_can{ padding:12px 22px 10px; }
  .modal-body{ padding:14px; }
}

/* H2/H3 restructure: sections use h2 (legacy h3 look), FAQ questions use h3 (legacy h4 look) */
.procontent h2 { font-size: 24px; font-weight: normal; line-height: 80px; height: 80px; padding-left: 20px; background: url(../img/dot1.jpg) no-repeat 0 35px;}
.procontent h3 { font-size: 16px; font-weight: bold; line-height: 70px; height: 74px; padding-left: 0; background: none;}
.proabout h2 { font-size: 18px; font-weight: normal; height: 50px; line-height: 50px; padding-top: 30px; }
.procontent .quotecta { padding: 6px 0 16px; font-weight: bold; }
.procontent .disclaim { color: #888; font-size: 12px; }

/* --- blog/article body links: make internal + external links visible --- */
.procontent p a, .procontent li a, .procontent td a,
.procontent .callout a{ color:#2f3690; text-decoration:underline; }
.procontent p a:hover, .procontent li a:hover{ color:#1b2170; }
.procontent a[target="_blank"]::after{ content:"\2197"; font-size:.8em; margin-left:1px; color:#888; }
/* article callout box styling */
.procontent .callout{ background:#f4f6ff; border-left:4px solid #2f3690;
  padding:14px 18px; margin:18px 0; border-radius:0 4px 4px 0; }

/* ==================== BLOG 视觉系统 ==================== */
/* 列表页大标题区 */
.bloghead{ background:linear-gradient(135deg,#2f3690 0%,#3a41a8 100%); color:#fff; }
.bloghead-in{ max-width:1160px; margin:0 auto; padding:54px 20px 48px; box-sizing:border-box; }
.bloghead-kicker{ font-size:12px; letter-spacing:2px; opacity:.8; margin-bottom:10px; }
.bloghead h1{ font-size:34px; font-weight:600; line-height:1.25; }
.bloghead-sub{ font-size:15px; line-height:1.7; opacity:.92; margin-top:12px; max-width:720px; }
.blogwrap{ max-width:1160px; margin:0 auto; padding:26px 20px 50px; box-sizing:border-box; }

/* 分类筛选 chip */
.blogfilters ul{ list-style:none; display:flex; flex-wrap:wrap; gap:9px; padding:4px 0 26px; }
.blogfilters a{ display:inline-block; padding:7px 15px; border:1px solid #e2e2e8; border-radius:20px;
  font-size:13px; color:#555; transition:all .18s; }
.blogfilters a:hover{ border-color:var(--cat); color:var(--cat); }
.blogfilters a.on{ background:var(--cat); color:#fff; border-color:var(--cat); }

/* 卡片网格 */
.bloggrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:24px; }
.bcard{ display:flex; flex-direction:column; background:#fff; border:1px solid #ececf1;
  border-radius:10px; overflow:hidden; transition:transform .2s, box-shadow .2s; color:#000; }
.bcard:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(30,32,80,.13); }
.bcard-thumb{ display:block; height:180px; background:
  radial-gradient(circle at 50% 35%, #ffffff 0%, color-mix(in srgb, var(--cat) 10%, #f4f5fa) 100%);
  border-bottom:3px solid var(--cat); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.bcard-thumb img{ max-height:150px; width:auto; object-fit:contain; mix-blend-mode:multiply;
  transition:transform .25s; }
.bcard:hover .bcard-thumb img{ transform:scale(1.06); }
.bcard-body{ display:flex; flex-direction:column; padding:16px 18px 18px; flex:1; }
.bcard-chip{ align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--cat); background:color-mix(in srgb,var(--cat) 12%,#fff);
  padding:3px 9px; border-radius:4px; margin-bottom:9px; }
.bcard-title{ font-size:16px; font-weight:600; line-height:1.4; color:#1a1a2e; margin-bottom:8px; }
.bcard-ex{ font-size:13px; line-height:1.6; color:#666; flex:1; }
.bcard-more{ font-size:13px; font-weight:600; color:#ff9900; margin-top:12px; }
.bcard:hover .bcard-more{ color:#e07f00; }

/* ---- 详情页 hero ---- */
.blog-hero{ max-width:1160px; margin:0 auto; display:flex; align-items:stretch; gap:0;
  border-radius:12px; overflow:hidden; margin-top:14px; box-shadow:0 8px 26px rgba(30,32,80,.10); }
.blog-hero-txt{ flex:1; padding:40px 40px 38px; color:#fff;
  background:linear-gradient(135deg, var(--cat) 0%, color-mix(in srgb,var(--cat) 70%, #111) 130%);
  display:flex; flex-direction:column; justify-content:center; }
.blog-chip{ align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; background:rgba(255,255,255,.22); padding:4px 11px; border-radius:20px; margin-bottom:16px; }
.blog-hero-txt h1{ font-size:29px; font-weight:600; line-height:1.3; }
.blog-meta{ font-size:12.5px; opacity:.85; margin-top:14px; }
.blog-hero-img{ flex:0 0 42%; max-width:440px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, #fff 0%, color-mix(in srgb,var(--cat) 8%, #f4f5fa) 100%); padding:14px; }
.blog-hero-img img{ max-height:280px; width:auto; object-fit:contain; mix-blend-mode:multiply; }

/* ---- 详情页正文排版（限定在 .blogpost 内，不影响产品页） ---- */
.blogpost .procontent{ max-width:820px; margin:0 auto; padding:26px 20px 10px; }
.blogpost .procontent blockquote{ background:#f6f7fd; border-left:4px solid #2f3690; padding:18px 22px;
  margin:22px 0; font-size:16px; line-height:1.75; color:#2b2b3a; border-radius:0 6px 6px 0; }
.blogpost .procontent h2{ font-size:22px; line-height:1.35; height:auto; padding:26px 0 10px 0; background:none;
  border-bottom:2px solid #eef0f7; margin-bottom:4px; }
.blogpost .procontent h3{ font-size:17px; line-height:1.4; height:auto; padding:16px 0 6px; background:none; }
.blogpost .procontent p{ line-height:1.8; padding-bottom:14px; color:#333; }
.blogpost .procontent ul, .blogpost .procontent ol{ padding-left:22px; padding-bottom:12px; }
.blogpost .procontent li{ line-height:1.75; list-style-position:outside; padding-bottom:5px; }
.blogpost .procontent table{ border-collapse:collapse; width:100%; margin:16px 0; font-size:14px; display:block; overflow-x:auto; }
.blogpost .procontent table td, .blogpost .procontent table th{ border:1px solid #e3e5ee; padding:9px 12px; text-align:left; }
.blogpost .procontent table tr:first-child td, .blogpost .procontent table th{ background:#2f3690; color:#fff; font-weight:600; }
.blogpost .procontent table tr:nth-child(even) td{ background:#f7f8fc; }
.blogpost .procontent .callout{ background:#f4f6ff; border-left:4px solid #2f3690; padding:16px 20px;
  margin:20px 0; border-radius:0 6px 6px 0; line-height:1.75; }
.blogpost .procontent > h3:last-of-type{ margin-top:30px; border-top:2px solid #eef0f7; padding-top:20px; }

/* ---- 响应式 ---- */
@media (max-width:900px){
  .bloghead-in{ padding:38px 15px 34px; }
  .bloghead h1{ font-size:26px; }
  .blog-hero{ flex-direction:column; margin-top:10px; border-radius:0; }
  .blog-hero-txt{ padding:26px 18px; }
  .blog-hero-txt h1{ font-size:23px; }
  .blog-hero-img{ flex:none; max-width:none; width:100%; padding:20px; }
  .blog-hero-img img{ max-height:220px; }
  .bloggrid{ grid-template-columns:1fr; }
  .procontent{ padding:18px 15px; }
  .procontent h2{ font-size:20px; }
}

/* ==================== 页脚（与全站浅色+靛蓝+橙调统一） ==================== */
/* CTA 带：单一靛蓝品牌色块（呼应导航当前项/banner 文字） */
.foot-cta{ background:#2f3690; }
.foot-cta-in{ max-width:1160px; margin:0 auto; padding:28px 20px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot-cta-txt h3{ color:#fff; font-size:22px; font-weight:600; }
.foot-cta-txt p{ color:rgba(255,255,255,.82); font-size:14px; line-height:1.6; margin-top:6px; }
.foot-cta-btn{ flex:0 0 auto; background:#ff9900; color:#fff; font-weight:600; font-size:15px;
  padding:13px 28px; border-radius:4px; white-space:nowrap; transition:background .18s, transform .18s; }
.foot-cta-btn:hover{ background:#ffae33; color:#fff; transform:translateY(-2px); }

/* 主页脚：浅色（与站内 #f7f8f8 区块一致），靛蓝标题、橙点缀 */
.sitefoot{ background:#f5f6f9; color:#5a5f6e; border-top:1px solid #e6e8ef; }
.sitefoot-in{ max-width:1160px; margin:0 auto; padding:44px 20px 36px; box-sizing:border-box;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:34px; }
.foot-brand .foot-logo{ display:inline-block; }
.foot-brand .foot-logo img{ height:52px; width:auto; display:block; }
.foot-brand p{ font-size:13.5px; line-height:1.75; color:#6b7080; margin:14px 0 14px; max-width:340px; }
.foot-mail{ display:inline-block; color:#2f3690; font-weight:600; font-size:15px;
  border-bottom:2px solid #ff9900; padding-bottom:2px; }
.foot-mail:hover{ color:#1b2170; }
.foot-col h4{ color:#2f3690; font-size:14px; font-weight:700; letter-spacing:.3px; margin-bottom:14px; }
.foot-col ul{ list-style:none; }
.foot-col li{ margin-bottom:9px; }
.foot-col a{ color:#5a5f6e; font-size:13.5px; line-height:1.5; transition:color .15s; }
.foot-col a:hover{ color:#2f3690; padding-left:2px; }
.foot-bottom{ border-top:1px solid #e6e8ef; background:#eef0f5; }
.foot-bottom-in{ max-width:1160px; margin:0 auto; padding:16px 20px; box-sizing:border-box;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:12.5px; color:#868b9b; }

@media (max-width:900px){
  .foot-cta-in{ flex-direction:column; align-items:flex-start; text-align:left; }
  .sitefoot-in{ grid-template-columns:1fr 1fr; gap:26px 20px; padding:36px 16px 30px; }
  .foot-brand{ grid-column:1 / -1; }
  .foot-bottom-in{ flex-direction:column; text-align:center; justify-content:center; }
}
@media (max-width:520px){
  .sitefoot-in{ grid-template-columns:1fr; }
  .foot-cta-txt h3{ font-size:19px; }
}

/* --- language switcher + contact block (site-translate skill) ---
   The original .lang was a 98px line-height box with a dotted border; adding a
   second row pushed it past the 88px header and into the banner. Rebuilt as a
   right-aligned two-row stack that centres itself inside the header. --- */
/* 115 (logo) + 805 (mainnav) + 240 = 1160, the exact .nav width. Any wider and
   the block wraps to a second row and doubles the header height. */
.lang { float: right; width: 240px; height: 88px; line-height: normal;
  padding: 0; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-end; gap: 8px; }

/* contact e-mail: keep the icon, drop the dotted frame that made it read as a
   broken form field */
.lang span { display: inline-block; border: 0; padding: 0; margin: 0; line-height: 1; }
.lang span a { display: inline-block; background: url(../img/email.jpg) no-repeat left center;
  background-size: 17px auto; padding: 3px 0 3px 24px; font-size: 13px; color: #4a4f68; }
.lang span a:hover { color: #2f3690; }

/* locale links: hairline-separated text, not boxed tabs */
.langswitch { display: flex; align-items: center; }
.langswitch a { position: relative; font-size: 12px; line-height: 1; letter-spacing: .05em;
  padding: 2px 9px; border: 0; border-radius: 0; color: #9096ad; text-decoration: none; }
.langswitch a:first-child { padding-left: 0; }
.langswitch a:last-child { padding-right: 0; }
.langswitch a + a::before { content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 10px; background: #dcdfeb; }
.langswitch a:hover { color: #2f3690; }
.langswitch a[aria-current] { color: #2f3690; font-weight: 700; background: none; }

/* Below 1024px the header collapses to a hamburger and the rule at ~line 353
   hides .lang until the menu opens. That rule comes earlier in the file, so
   this block must restate the hiding or `display:flex` above would resurrect
   the block on every mobile page — including the English site. */
@media (max-width: 1024px) {
  .lang { display: none; }
  .nav.open .lang { display: flex; float: none; width: 100%; height: auto;
    align-items: center; padding: 16px 0 12px; gap: 12px; }
  .langswitch a { font-size: 14px; padding: 2px 12px; }
  .lang span a { font-size: 14px; }
}

/* --- longer languages: Russian runs ~30% longer than English, French/
   Portuguese ~20%, so the fixed-width nav wraps. Tighten only where needed. --- */
html[lang="ru"] .mainnav li,
html[lang="fr"] .mainnav li,
html[lang="pt-BR"] .mainnav li { padding: 5px 9px; }
html[lang="ru"] .mainnav li a,
html[lang="fr"] .mainnav li a,
html[lang="pt-BR"] .mainnav li a { font-size: 14px; }
html[lang="ru"] .mainnav li.current,
html[lang="fr"] .mainnav li.current,
html[lang="pt-BR"] .mainnav li.current { padding: 5px 8px; }
/* The tighter padding/font above brings the longest locale (ru) to 591px, so
   the default centred 710px track still fits and keeps the breathing room
   beside the logo. Widening the track to 805px was what removed it. */
@media (max-width: 900px) {
  html[lang="ru"] .mainnav li a,
  html[lang="fr"] .mainnav li a,
  html[lang="pt-BR"] .mainnav li a { font-size: 16px; }
}