/*
Theme Name: versus
Theme URI: http://www.kuaping.com
Description: kuaping
Author: kuaping
Author URI: http://www.kuaping.com
Version: 2026.04
*/
@charset "UTF-8";
/*字体自带本地，不走 Google：国内访问 fonts.googleapis.com 会挂到超时，
  而 @import 是阻塞渲染的，白屏就出在这。文件在 assets/fonts/，三个字面一共约 49KB
  （Open Sans 400/700 + Exo 500 Italic，都只取 latin 子集，OFL 授权，许可文件同目录）
  分工：Open Sans 走全局；Exo Medium Italic 只给区块大标题（见下面 .sec_title 那条）*/
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/open-sans-400.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/open-sans-700.woff2') format('woff2');}
@font-face{font-family:'Exo';font-style:italic;font-weight:500;font-display:swap;src:url('assets/fonts/exo-500-italic.woff2') format('woff2');}
/*中文只在 404 那种地方出现（本站正文是英文），补两个中文兜底，免得掉到宋体*/
body{font-family:"Open Sans",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Microsoft YaHei","PingFang SC",sans-serif;color:#333;font-size:14px;line-height:1;}
p{margin-top:0;margin-bottom:10px;}
ol,
ul,
dl{padding:0;margin:0;list-style:none;}
a{color:#333;text-decoration:none;background-color:transparent;}
a:hover{color:#1d3753;text-decoration:none;}
*:focus,
textarea:focus,
button:focus,
input:focus{box-shadow:none;outline:0}
img{border:0;max-width:100%;height:auto;}
#wp-admin-bar-wp-logo,
#wp-admin-bar-search{display:none!important}
.show_m{-webkit-transition:all 0.6s ease;-o-transition:all 0.6s ease;transition:all 0.6s ease;}
@media (min-width:1200px){
    .container{max-width:1680px;}
}
/*窄容器：默认 .container 在 1200 以上是 1460，想让哪块内容窄一点，
  给那个容器再加一个类就行，比如 <div class="container container-narrow">。
  写在上一条之后，同级覆盖（都是 0-1-0，靠顺序压住那个 1460）；
  1200 以下 Bootstrap 自带的容器本来就比默认值窄，这里不掺和，省得反而撑宽。
  不用 container-sm 这种名字是因为 Bootstrap 已经占用了，会打架*/
@media (min-width:1200px){
    .container-narrow{max-width:1140px;}
}
.color_navy{color:#1d3753!important;}
.bg_navy{background:#1d3753!important;}
.bg_navy_dark{background:#142a45!important;}
/*金色是海军蓝之外的提亮色，跟 hero「15 000+」那个字同色。
  品牌色定死这两个：蓝 #1d3753、黄 #b16a31；黄深一档 #8e5527 只给 hover 用*/
.color_gold{color:#b16a31!important;}
.bg_gold{background:#b16a31!important;}
.bg_gold_dark{background:#8e5527!important;}
.white_hover:hover{background:#fff!important;color:#000!important;}
.dark_hover:hover{background:#000!important;color:#fff!important;}
.zhezhao:before{content:'';position:absolute;inset:0;background-color: #00000030;z-index:1;}
.bg_jingge{background:url('assets/img/engineered.png');}
.hui_a{color: #919191;}
.hui_a a{color: #919191;}

/*页头顶条左侧的联系方式，内容在 header.php*/
.top_contact,.top_contact a{color:#fff;}
.top_contact a{transition:color .25s;}
.top_contact a:hover{color:#9fb3cc;}
/*标签亮、值淡，跟页脚那组一个分法*/
.top_contact strong{color:#fff;}
.top_contact span{color:rgba(255,255,255,.78);}
/*右侧社媒拉开点*/
.top_bar .d-flex.gap10{gap:20px!important;}

/*顶条（页头上面那一条）：底色从 .bg_navy_dark（#142a45）换成主色海军蓝 #1d3753，
  跟下面 header 是同一个蓝，靠底边这条金线把两段分开。
  金色就是品牌黄 #b16a31；border-bottom 原来走的是 Bootstrap 的 border-bottom border-dark
  （深灰），两个类都从 header.php 标签上去掉了，改由这里接管*/
.top_bar{
	/*border-bottom:1px solid #b16a31;*/

border-bottom:1px solid rgba(255,255,255,.16);
}
/*顶条的社媒：原来是一排白底圆按钮（海军蓝图标），跟页脚一样去掉那圈白底，直接白图标排蓝底上。
  颜色只在这里给 —— 标签上别再加 text-white，那是 !important，会把下面那条 hover 压掉
  （页脚那排社媒当初就是踩了这个：dark_hover 是 !important 的黑底，白图标一 hover 就没了）*/
.top_bar .d-flex.gap10 a{color:#fff;font-size:15px;display:inline-flex;align-items:center;transition:color .25s;}
/*hover 色跟顶条左边那几个联系方式统一*/
.top_bar .d-flex.gap10 a:hover{color:#9fb3cc;}

/*nav*/
.header-menu{
	
	    
    font-family: "Exo", "Open Sans", sans-serif;
}
.header-menu .header-menu-ul{font-size:0px;}
.header-menu .header-menu-ul li{display:inline-block;position:relative;}
.header-menu .header-menu-ul li:hover{}
/*text-transform 全大写：菜单项是英文，全大写只是显示效果，后台里填的还是原样大小写。
  次级下拉里的项（.sub-menu li a）也吃这条 —— 当前主菜单没有子项，等真加了子项再看要不要给下拉单独关掉*/
.header-menu .header-menu-ul li a{padding:15px 20px;display:block;font-size:17px;color:#1d3753;position:relative;font-weight:500;white-space:nowrap;text-transform:uppercase;}
/*页头改深色后一级菜单要转白；二级菜单仍是白底下拉，保持深字，所以只选 >a*/
.header-menu .header-menu-ul>li>a{color:#fff;}
/*二级菜单是白底下拉，hover 变海军蓝没问题。
  一级菜单压在深色页头上，本身就是白字，再变海军蓝等于看不见 —— 所以只有它保持白色，
  靠下面那条 >a:hover:after 的小横条提示。这条必须写在上一行之后，两条优先级一样，靠顺序压住*/
.header-menu .header-menu-ul li a:hover{color:#1d3753;}
.header-menu .header-menu-ul>li>a:hover{color:#fff;}
/*一级菜单 hover 不换色，改用底部小横条提示*/
.header-menu .header-menu-ul>li>a:hover:after{content:'';background:#fff;width:20px;height:3px;position:absolute;bottom:-4px;left:50%;margin-left:-10px;border-radius:4px;}
.header-menu .header-menu-ul li .sub-menu{display:none;position:absolute;top:47px;left:6px;background:#fff;width: 260px;z-index:99;border-radius:4px;overflow: hidden;}
.header-menu .header-menu-ul li .sub-menu li{width:100%;border-bottom:1px solid #f2f2f2;}
.header-menu .header-menu-ul li .sub-menu li a{font-size:14px;padding:20px;}
.header-menu .header-menu-ul li .sub-menu li a:after{display:none}
.header-menu .header-menu-ul li .sub-menu .sub-menu{position:absolute;left:200px;top:0px;}
.header-menu .header-menu-ul li.menu-item-has-children>a:before{content:'\F282';font-family:'bootstrap-icons';font-size:12px;transform:scale(0.7);display:block;position:absolute;right:4px;top:18px;}
.header-menu .header-menu-ul li .sub-menu .menu-item-has-children a:before{content:'\F282';font-family:'bootstrap-icons';display:block;float:right;transform:rotate(270deg);-webkit-transform:rotate(270deg);}
.header-menu .header-menu-ul li.current-menu-item>a,
.header-menu .header-menu-ul li.current-menu-parent>a,
.header-menu .header-menu-ul li.current-menu-ancestor>a{color:#fff;}
.header-menu .header-menu-ul li.current-menu-item a:after,
.header-menu .header-menu-ul li.current-menu-parent a:after,
.header-menu .header-menu-ul li.current-menu-ancestor a:after{content:'';background:#fff;width:20px;height:3px;position:absolute;bottom:-4px;left:50%;margin-left:-10px;border-radius:4px;}


/*banner_swiper*/
.banner_swiper .banner_prev{left:40px;top:50%;}
.banner_swiper .banner_next{right:40px;top:50%;}
.banner_swiper .banner_prev,
.banner_swiper .banner_next{position:absolute;z-index:1;width:50px;height:50px;background:#000;display:flex;align-items:center;justify-content:center;border-radius:50%;opacity:0;transition:all 0.6s ease;margin-top:-20px;font-size:14px;color:#fff;}
.banner_swiper:hover .banner_prev,
.banner_swiper:hover .banner_next{opacity:1;}
.banner_swiper .banner_prev:hover,
.banner_swiper .banner_next:hover{background:#1d3753;color:#fff;}
.banner_swiper .banner_pagination{position:absolute;bottom:40px;z-index:1;text-align:center;}
.banner_swiper .banner_pagination .swiper-pagination-bullet{width:12px;height:12px;border:1px solid #ffffff00;background:#fff; opacity: 1;}
.banner_swiper .banner_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#1d3753;}
.banner_swiper .swiper-slide{padding-top:0!important;padding-bottom:0!important;height:850px;display:flex;align-items:center;}
@media (max-width:768px){
    .banner_swiper .swiper-slide{padding-top:0!important;padding-bottom:0!important;height:500px;display:flex;align-items:center;}
}
.swiper_before{position:relative;overflow:hidden;}
.swiper_before:before{position:absolute;content:'';width:100%;height:100%;top:0px;right:0px;z-index:1;opacity:1;background:#00000024;}
/*banner 每张图的可点区域：铺满 slide，压在遮罩上面，但低于左右箭头那一层*/
.banner_link{position:absolute;inset:0;z-index:2;}

/*hero2col 首页头图：左栏目 + 右轮播*/
/*栏目菜单（.hero_cat*）是三处共用的：首页头图左栏（section/hero.php）、产品侧栏
  （sidebar-product.php / sidebar-product-cat.php），标记在 section/cat_menu.php。
  所以下面这一层是通用规则；只有首页那种「固定 520px 高、每行等分撑满」的排布，
  才写在 .hero2col 下面另加覆盖*/
.hero_cat{position:relative;background:#fff;border:1px solid #eceef1;border-radius:4px;display:flex;flex-direction:column;z-index:5;}
.hero_cat_head{flex:none; font-size:16px;font-weight:600;padding:14px 18px;display:flex;align-items:center;border-radius:4px 4px 0 0;
border-bottom:#b16a31 solid 2px;
font-family: "Exo", "Open Sans", sans-serif;
}
.hero_cat_ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;min-height:0;}
.hero_cat_li{position:relative;display:flex;border-bottom:1px solid #f2f3f5;}
.hero_cat_li:last-child{border-bottom:0;}
/*11px 上下内边距是给侧栏那种自然高度用的：26px 图标 + 22px = 48px 一行*/
.hero_cat_a{flex:1;display:flex;align-items:center;gap:10px;padding:11px 16px;color:#333;text-decoration:none;font-size:15px;font-weight:500;transition:.25s;}
.hero_cat_a:hover{background:#f2f5f9;color:#1d3753;}
.hero_cat_ico{width:26px;height:26px;flex:none;object-fit:cover;border-radius:4px;}
.hero_cat_ico_i{width:26px;flex:none;text-align:center;font-size:18px;color:#1d3753;}
.hero_cat_name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hero_cat_arrow{font-size:12px;color:#c2c6cc;transition:.25s;}
.hero_cat_a:hover .hero_cat_arrow{color:#1d3753;transform:translateX(2px);}
.hero_cat_all{flex:none;height:48px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:600;color:#fff;background:#2b2b2b;border-radius:0 0 4px 4px;text-decoration:none;transition:.25s;}
.hero_cat_all:hover{background:#1d3753; color: #fff;}
/*子栏目飞出：挂在 .hero_cat_li 上，不是挂在外层 .hero_cat 上*/
.hero_cat_sub{position:absolute;left:100%;top:0;min-width:430px;max-height:520px;overflow:auto;background:#fff;border:1px solid #eceef1;border-radius:4px;box-shadow:0 12px 34px rgba(0,0,0,.1);padding:18px 20px;opacity:0;visibility:hidden;transform:translateX(6px);transition:.25s;z-index:20;}
.hero_cat_li:hover .hero_cat_sub{opacity:1;visibility:visible;transform:translateX(0);}
.hero_cat_sub_title{font-size:15px;font-weight:600;color:#111;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #f0f1f3;}
.hero_cat_sub_a{display:block;padding:7px 0;font-size:14px;color:#666;text-decoration:none;transition:.25s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hero_cat_sub_a:hover{color:#1d3753;}
/*首页那块：固定 520px 高、跟着右边轮播走，5 行等分撑满，所以行高是算出来的不是内边距撑的*/
.hero2col .hero_cat{height:450px;}
.hero2col .hero_cat_head{height:54px;padding:0 18px;}
.hero2col .hero_cat_ul{flex:1;}
.hero2col .hero_cat_li{flex:1;}
.hero2col .hero_cat_a{padding:0 16px;}
/*侧栏里那版：窄屏（<992，也就是 col-lg-3 塌成通栏的时候）没有 hover，
  飞出层 left:100% 会跑到屏幕外，改成常驻展开在栏目下面。
  用 991.98 而不是 992 是为了跟 Bootstrap 的 lg（min-width:992）对齐不重叠*/
@media (max-width:991.98px){
    .sidebar_cat .hero_cat_li{display:block;}
    .sidebar_cat .hero_cat_sub{position:static;min-width:0;max-height:none;opacity:1;visibility:visible;transform:none;border:0;border-top:1px solid #f2f3f5;border-radius:0;box-shadow:none;padding:6px 16px 10px;background:#fafbfc;}
    /*父栏目名就在上面一行，飞出层的标题再写一遍是重复的*/
    .sidebar_cat .hero_cat_sub_title{display:none;}
    .sidebar_cat .hero_cat_arrow{display:none;}
}
/*侧栏筛选链接列表*/
.sidebar_links_body{padding:12px 16px 14px;}
.sidebar_links_body a{display:block;padding:6px 0;font-size:14px;color:#5a6472;border-bottom:1px solid #f4f6f8;transition:color .2s;}
.sidebar_links_body a:last-child{border-bottom:0;}
.sidebar_links_body a:hover{color:#1d3753;}
/*右侧轮播收进容器*/
.hero2col .banner_swiper{height:450px;border-radius:4px;overflow:hidden;}
.hero2col .banner_swiper .swiper-slide{height:450px;padding-top:0!important;padding-bottom:0!important;display:flex;align-items:center;}
.hero2col .banner_swiper .banner_prev{left:20px;}
.hero2col .banner_swiper .banner_next{right:20px;}
.hero2col .banner_swiper .banner_pagination{bottom:20px;}
@media (max-width:992px){
    .hero2col .banner_swiper,
    .hero2col .banner_swiper .swiper-slide{height:400px;}
}
@media (max-width:575px){
    .hero2col .banner_swiper,
    .hero2col .banner_swiper .swiper-slide{height:130px;}
}

/*zw*/
.wznrys{}

/*hr*/
.wznrys hr{height:20px;border:none;position:relative;padding:0px;margin:10px 0px 25px 0px;}
.wznrys hr:after{content:"";width:100%;height:1px;background-color:#e2e2e2;position:absolute;top:10px;z-index:1;}
.wznrys hr:before{content:"";position:absolute;width:8px;height:8px;background-color:#ababab;left:50%;top:50%;transform:rotate(45deg);z-index:2;margin-top:-4px;margin-left:-4px;}

/*zw def*/
.wznrys p{line-height:2;padding-bottom:20px;margin-bottom:0;margin-top:0;}
.wznrys img{max-width:100%;height:auto}
.wznrys h1,
.wznrys h2,
.wznrys h3,
.wznrys h4,
.wznrys h5,
.wznrys h6{margin-bottom:25px;margin-top:0px;line-height:30px;font-weight:600;color:#000;}
.wznrys h1{font-size:24px;}
.wznrys h2{font-size:22px;}
.wznrys h3{font-size:20px;}
.wznrys h4{font-size:18px;}
.wznrys h5{font-size:16px;}
.wznrys h6{font-size:16px;}
.wznrys ol,
.wznrys ul{margin-bottom:30px;list-style:disc;}
.wznrys ol li,
.wznrys ul li{margin-left:24px;margin-bottom:12px;line-height:2;}
.wznrys ol li a,
.wznrys ul li a{border-bottom:1px solid #1d3753;color:#1d3753;}
.wznrys strong{font-weight:bold;}

@media (max-width:768px){
.wznrys h1{font-size:20px;}
.wznrys h2{font-size:18px;}
.wznrys h3{font-size:16px;}
.wznrys h4{font-size:16px;}
.wznrys h5{font-size:16px;}
.wznrys h6{font-size:16px;}
}

/*blockquote*/
.wznrys blockquote{position:relative;border:1px double rgba(0,0,0,.1);padding:40px 25px 25px 25px;margin:40px 0px 30px 0px;}
.wznrys blockquote:before{content:"\F6B0";font-family:'bootstrap-icons';background:#1d3753;position:absolute;top:-20px;width:40px;height:40px;line-height:40px;border-radius:50%;text-align:center;color:#fff;left:calc(50% - 20px);}
.wznrys blockquote p{font-weight:bold;font-style:inherit;padding:0;}
.wznrys blockquote cite{padding-bottom:0px;display:flex;font-size:16px;font-style:inherit;color:#777;}

/*wp-caption*/
.wznrys .wp-caption{max-width:100%;}
.wznrys .wp-caption p.wp-caption-text{text-align:center;padding-bottom:0px;margin-bottom:25px;font-size:12px;color:#888;font-weight:300;}
.wznrys .crayon-table tr:nth-child(odd){background:none;}

/*wz_code*/
.wznrys pre.wp-block-code{margin:50px 0px;position:relative;background:#282922;padding-top:36px;border-radius:4px;box-shadow:0 10px 30px 0 rgba(0,0,0,.4);}
.wznrys pre.wp-block-code code{font-size:13px;line-height:1.8;padding:15px 20px;border-radius:0 0 4px 4px;}
.wznrys pre.wp-block-code code table{border:none;line-height:1.8;margin:0;}
.wznrys pre.wp-block-code code table tr{border-bottom:1px solid #272727;}
.wznrys pre.wp-block-code code table tr:nth-child(odd){background:none;}
.wznrys pre.wp-block-code code table tr:last-child{border-bottom:none;}
.wznrys pre.wp-block-code code table tr td.hljs-ln-numbers{width:30px;}
.wznrys pre.wp-block-code code table tr td.hljs-ln-numbers .hljs-ln-n{text-align:center;color:#5a5a5a;font-weight:300;}
.wznrys pre.wp-block-code code table tr td.hljs-ln-numbers .hljs-ln-n:before{padding-right:10px;}
.wznrys pre.wp-block-code code table tr td.hljs-ln-code{border-left:1px solid #272727;text-indent:12px;}
.wznrys pre.wp-block-code code table tr td{border:none;text-align:inherit;line-height:inherit;}
.wznrys pre.wp-block-code:before{content:"";position:absolute;border-radius:50%;background:#fc625d;width:12px;height:12px;left:14px;top:12px;box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;z-index:2;}

/*figure*/
.wznrys figure{margin-bottom:25px;}
.wznrys figure.wp-block-gallery{display:flex;flex-wrap:wrap;gap:20px;--wp--style--unstable-gallery-gap:20px;}

/*wz_table*/
.wznrys .wp-block-table{}
.wznrys .wp-block-table table{margin-bottom:20px;line-height:2;}
.wznrys .wp-block-table table{}
.wznrys .wp-block-table table tr{}
.wznrys .wp-block-table table tr td,
.wznrys .wp-block-table table tr th{padding:15px 20px;}

/*wp-block-audio*/
.wznrys .wp-block-audio{margin-bottom:40px;}
.wznrys .wp-block-cover{margin-bottom:40px;}
.wznrys .wp-block-cover .wp-block-cover__inner-container{margin:0px 10%;}

/*wp-block-search*/
.wznrys .wp-block-search{margin-bottom:30px;}
.wznrys .wp-block-search .wp-block-search__label{display:none;}
.wznrys .wp-block-search .wp-block-search__inside-wrapper{background:#ebe9e9;padding:15px 20px;border-radius:4px;}
.wznrys .wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input{background:#fff;border:none;border-radius:4px 0 0 4px;text-indent:15px;color:#a7a6a6;}
.wznrys .wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button{background-color:#1d3753;margin-left:0px;border:none;font-size:14px;color:#fff;border-radius:0 4px 4px 0;padding:8px 25px;}

/*float*/
.wznrys .aligncenter{clear:both;display:block;margin:0 auto;}
.wznrys .alignright{float:right;margin:25px 0px 10px 20px;}
.wznrys .alignleft{float:left;margin:25px 20px 10px 0px;}

/*text-align*/
.has-text-align-left{text-align:left;}
.has-text-align-center{text-align:center;}
.has-text-align-right{text-align:right;}

/*font-size*/
.has-small-font-size{font-size:12px;}
.has-medium-font-size{font-size:16px;}
.has-large-font-size{font-size:20px;}
.has-x-large-font-size{font-size:24px;}

/*font-color*/
.has-black-color{color:#000000}
.has-black-background-color{background-color:#000000}
.has-cyan-bluish-gray-color{color:#ABB8C3}
.has-cyan-bluish-gray-background-color{background-color:#ABB8C3}
.has-white-color{color:#FFFFFF}
.has-white-background-color{background-color:#FFFFFF}
.has-pale-pink-color{color:#F78DA7}
.has-pale-pink-background-color{background-color:#F78DA7}
.has-vivid-red-color{color:#CF2E2E}
.has-vivid-red-background-color{background-color:#CF2E2E}
.has-luminous-vivid-orange-color{color:#FF6900}
.has-luminous-vivid-orange-background-color{background-color:#FF6900}
.has-luminous-vivid-amber-color{color:#FCB900}
.has-luminous-vivid-amber-background-color{background-color:#FCB900}
.has-light-green-cyan-color{color:#7BDCB5}
.has-light-green-cyan-background-color{background-color:#7BDCB5}
.has-vivid-green-cyan-color{color:#00D084}
.has-vivid-green-cyan-background-color{background-color:#00D084}
.has-pale-cyan-blue-color{color:#8ED1FC}
.has-pale-cyan-blue-background-color{background-color:#8ED1FC}
.has-vivid-cyan-blue-color{color:#0693E3}
.has-vivid-cyan-blue-background-color{background-color:#0693E3}
.has-vivid-purple-color{color:#9B51E0}
.has-vivid-purple-background-color{background-color:#9B51E0}

/*iframe*/
.wznrys iframe{width:100%;height:600px;}

/*mbx*/
.breadcrumb_loop{list-style:none;padding:0px;background:none;margin:0;display:flex;font-weight:300;}
.breadcrumb_loop li{display:flex;margin:5px 0px;}
.breadcrumb_loop li a{display:flex;}
.text-white .breadcrumb_loop li a{color:#fff;}
.breadcrumb_loop li a:after{content:'\F285';font-family:'bootstrap-icons';margin:0px 5px;color:#ccc;}
.breadcrumb_loop li:last-child a:last-child:after{display:none}
@media (max-width:768px){
    .breadcrumb_loop{white-space:nowrap;overflow-x:auto;overflow-y:hidden;font-size:12px;}
}

/*fanye*/
.posts-nav{text-align:center;margin-bottom:30px}
.posts-nav .page-numbers{color:#606060;display:inline-block;padding:10px 15px;font-size:12px;background-color:#efefef;margin:0 2px;font-family:Arial;transition:all .6s;}
.posts-nav .current,
.posts-nav .page-numbers:hover{color:#fff;background-color:#1d3753;}
@media (max-width:575px){
    .posts-nav .page-numbers{padding:7px 11px;font-size:11px;margin:0 1px;}
}

/*faq_card*/
.faq_card button{position:relative;width:100%;}
.faq_card button[aria-expanded="true"]:before{content:"\F279";font-family:'bootstrap-icons';position:absolute;font-size:12px;right:20px;top:28px;}
.faq_card button[aria-expanded="false"]:before{content:"\F27C";font-family:'bootstrap-icons';position:absolute;font-size:12px;right:20px;top:28px;}
.product_faqname button{margin:0px 30px 0px 0px;padding:0px 0px 15px 0px;font-size:20px;color:#333;border-bottom:4px solid #f8f9fa;font-weight:600;}
.product_faqname button.active{border-bottom:4px solid #1d3753;color:#1d3753;}
@media (max-width:768px){
    .faq_card button[aria-expanded="true"]:before,
    .faq_card button[aria-expanded="false"]:before{top:18px;}
    .product_faqname button{font-size:18px;}
}
@media (max-width:575px){
    .product_faqname button{font-size:15px;}
}
/*详情页 Additional Information 表格*/
.product_addinfo{width:100%;border-collapse:collapse;border:1px solid #e9edf2;}
.product_addinfo th,
.product_addinfo td{padding:12px 18px;font-size:15px;line-height:1.5;text-align:left;vertical-align:top;border-bottom:1px solid #e9edf2;}
.product_addinfo tr:last-child th,
.product_addinfo tr:last-child td{border-bottom:0;}
.product_addinfo th{width:200px;font-weight:600;color:#1d3753;background:#f8f9fa;white-space:nowrap;}
.product_addinfo td{color:#5a6472;}
@media (max-width:575.98px){
    .product_addinfo th{width:110px;white-space:normal;}
    .product_addinfo th,
    .product_addinfo td{padding:10px 12px;font-size:14px;}
}



/*contact_biaodan*/
.contact_biaodan{}
.contact_biaodan form[data-status="init"] .wpcf7-response-output{display:none;}
.contact_biaodan form[data-status="invalid"] .wpcf7-response-output{text-align:center;padding-top:20px;font-size:16px;line-height:1.4;color:#636363;}
.contact_biaodan form[data-status="failed"] .wpcf7-response-output{text-align:center;padding-top:20px;font-size:16px;line-height:1.4;color:#636363;}
.contact_biaodan p{margin-bottom:15px;position:relative;}
.contact_biaodan input{width:100%;padding:15px;border:1px solid #e2e2e2;border-radius:4px;font-size:16px;}
.contact_biaodan textarea{width:100%;padding:20px;border:1px solid #e2e2e2;border-radius:4px;font-size:16px;}
.contact_biaodan input[type="submit"]{background:#1d3753;font-size:18px;color:#fff;border:none;border-radius:4px;}
.contact_biaodan select{width:100%;padding:15px;border:1px solid #e2e2e2;border-radius:4px;font-size:16px;color:#757575;}
.contact_biaodan .screen-reader-response{display:none}
.contact_biaodan .wpcf7-not-valid-tip{position:absolute;top:6px;right:10px;font-size:12px;font-weight:300;color:#ff5353;}
@media (max-width:768px){
    .contact_biaodan input{padding:10px 15px;font-size:14px;}
    .contact_biaodan textarea{padding:10px 15px;font-size:14px;}
    .contact_biaodan input[type="submit"]{font-size:16px;}
}

/*product_swiper*/
.product_swiper:hover .product_prev,
.product_swiper:hover .product_next{opacity:1;}
.product_swiper .product_prev{left:10px;top:50%;}
.product_swiper .product_next{right:10px;top:50%;}
.product_swiper .product_prev,
.product_swiper .product_next{position:absolute;z-index:1;width:40px;height:40px;background:#000;display:flex;align-items:center;justify-content:center;border-radius:50%;opacity:0;transition:all 0.6s ease;margin-top:-20px;font-size:14px;color:#fff;}
.product_swiper .product_prev:hover,
.product_swiper .product_next:hover{background:#1d3753;color:#fff;}

/*product_thumbs*/
.product_thumbs .swiper-slide{border:3px solid #e5e2e2;background:#f3f3f3;padding:3px;}
.product_thumbs .swiper-slide.swiper-slide-thumb-active{border:3px solid #1d3753;}

/*pagination*/
.product_swiper .product_pagination{position:absolute;bottom:30px;text-align:center;z-index:1;}
.product_swiper .product_pagination .swiper-pagination-bullet-active{background:#1d3753;}

/*product_card*/
.h-100{border-radius:4px;overflow:hidden; transition:all 0.35s ease;background:#fff;}
/*原来这里有条 .h-100:hover{translateY(-6px) + 大阴影}，上浮+阴影的动效按需求去掉；hover 的反馈留给下面图片那点轻微放大*/
.h-100 > a{display:block;overflow:hidden;aspect-ratio:1/1;}
.h-100 > a img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.h-100:hover > a img{transform:scale(1.08);}
.h-100 > .bg-light{background:#fff!important;border-radius:0 0 4px 4px;position:relative;}
.h-100 h2{font-size:18px;line-height:1.3;}
.h-100 h2 a{color:#111;}
.h-100 h2 a:hover{color:#1d3753;}
.product_more{display:flex;align-items:center;justify-content:center;background:#1d3753;color:#fff;font-size:14px;font-weight:500;gap:8px;padding:10px 16px;border-radius:4px;transition:all 0.3s;width:100%;}
.product_more:hover{background:#1d3753;color:#fff;gap:12px;}
@media (max-width:768px){
    .h-100 h2{font-size:15px;}
}


/*mobile_anniu*/
#mobile_right_nav{width:300px;border:none;overflow-y: auto;}
#mobile_right_nav .menu-zk{}
#mobile_right_nav .menu-zk li{line-height:60px;position:relative;}
#mobile_right_nav .menu-zk li a{font-size:16px;display:block;border-bottom: 1px solid #f2f4fc;padding:0px 30px;}
#mobile_right_nav .menu-zk li:last-child a{border-bottom:none;}
#mobile_right_nav .menu-zk .sub-menu{background:#ffffff;}
#mobile_right_nav .menu-zk .sub-menu li{line-height:50px;}
#mobile_right_nav .menu-zk .sub-menu li a{font-size: 14px;color: #9f9b9b;border-bottom:1px solid #ededed;}
#mobile_right_nav .menu-zk .menu-item-has-children .czxjcdbs:before{content:"\F279";font-family:'bootstrap-icons';position:absolute;right:20px;top:15px;color:#ffffff;width:30px;height:30px;line-height:30px;text-align:center;display:block;cursor:pointer;background:#aacd2e;border-radius:50%;font-size:10px;}
#mobile_right_nav .menu-zk .menu-item-has-children .kai:before{content:"\F27C";font-family:'bootstrap-icons';}


.application_ms{}
.application_ms h2{font-size:30px;font-weight:700;margin-bottom:20px;}
.application_ms h3{font-size:18px;margin-bottom:10px;}
.application_ms p{line-height:1.9;margin-bottom:10px;color:#666;}
@media (max-width:768px){
    .application_ms h2{font-size:20px;}
    .application_ms h3{font-size:16px;}
}


.trp-shortcode-switcher{padding: 1px 0px !important;}
.trp-language-item{padding: 6px 12px !important;}
.trp-shortcode-arrow{width: 15px;}
@media (max-width:768px){
.trp-language-item{padding: 4px 6px !important;}
.trp-current-language-item__wrapper:not(.trp-hide-arrow){padding-right: 6px !important;}
.trp-shortcode-arrow{width: 10px;}
}


/*search*/
#search_offcanvas{height:150px;}
.search_offcanvas_close{position:absolute;right:0px;top:0px;cursor:pointer;z-index:5;background:#e2e2e2;width:40px;height:40px;border:none;}
.search_offcanvas_close:after{content:"";position:absolute;background-color:black;left:20px;width:1px;height:20px;transform:rotate(-45deg);top:10px;}
.search_offcanvas_close:before{content:"";position:absolute;background-color:black;left:20px;width:1px;height:20px;transform:rotate(45deg);top:10px;}
.search_offcanvas_box{margin:50px 0px;text-align:center;}
.search_offcanvas_box .search_offcanvas_form{width:100%;position:relative;border:3px solid #dddddd;height:50px;display:flex;align-items:center;justify-content:space-between;}
.search_offcanvas_box .search_offcanvas_form input{width:100%;border:none;color:#b7b7b7;background:none;padding:0px 15px;}
.search_offcanvas_box .search_offcanvas_form button{border:none;color:#b7b7b7;background:none;margin:0;padding:0 20px 0 0;font-size:18px;}

.ul_style_disc ul{list-style-type:disc;margin-left: 17px;}


.sidebar_tools{width:75px;height:75px;font-size:26px;border-radius:4px;transition:all 0.3s ease;}
.sidebar_tools small{font-size:11px;margin-top:4px;text-transform:uppercase;letter-spacing:0.5px;}
.sidebar_tools:hover{background:#000!important;}


/*footer*/
/*栏目标题跟站里其它「区块大标题」一个字体（Exo Medium Italic，见文件末尾那段说明）。
  Exo 只有 500 这一个字面，所以 footer.php 里这几条 h2 的 fw600 都换成了 fw500 ——
  fw600 是 !important，会拿 Open Sans 的粗体去合成假粗体，斜体加假粗体一眼就看出来*/
body > section.foot_bar h2{font-family:"Exo","Open Sans",sans-serif;font-style:italic;font-weight:500;font-size:19px;padding-bottom:12px;position:relative;}
/*页脚底是海军蓝（原来是 Bootstrap 的 bg-dark 深灰），标题下的小横条和链接 hover 都用白色压上去。
  这一节的选择器锚在 .foot_bar 上，不是 .bg_navy —— 页头上面那条顶条现在也是 bg_navy，
  锚在颜色类上的话，下面这几条（尤其社媒那三条）会一起套到顶条的社媒上去。
  .foot_bar 是 footer.php 里那个 section 上的额外类名，改类名要两边一起改*/
body > section.foot_bar h2::after{content:'';position:absolute;left:0;bottom:0;width:40px;height:3px;background:#fff;border-radius:2px;}
.text-md-start.text-center h2::after{left:0;right:auto;margin-left:0;}
.text-center h2::after{left:50%;margin-left:-20px;}
/*页脚正文用带蓝调的浅灰，不用中性的 #ddd —— 中性灰压在海军蓝上会显脏*/
.hui_a{color:#c9d4e3!important;font-size:15px;line-height:1.8;}
.hui_a a{color:#c9d4e3!important;transition:color 0.25s;}
.hui_a a:hover{color:#fff!important;}
.hui_a p{margin-bottom:6px;}
/*社媒原来是一排白底圆形按钮（海军蓝图标），按需求去掉那圈白底：直接白图标排在底上。
  图标从 16px 提到 18px —— 少了圆底那点视觉重量，小图标会显得飘；间距也跟着放宽
  （标记里那几个 bg-white rounded-circle py5 px5 fs12 dark_hover 也一并去掉了，
   留着 dark_hover 的话 hover 会在图标底下糊出一个黑方块）*/
body > section.foot_bar .d-flex.gap10{gap:18px!important;}
body > section.foot_bar .d-flex.gap10 a{background:transparent!important;color:#fff!important;font-size:18px!important;padding:0!important;border-radius:0!important;width:auto;height:auto;transition:color .25s;display:inline-flex!important;align-items:center;justify-content:center;}
body > section.foot_bar .d-flex.gap10 a:hover{color:#dbe3ee!important;}
/*footer 订阅表单，走 MC4WP 插件，表单本体在后台「MC4WP → 表单」里（这站是 139 号）
  表单内容里那个 stm-subscribe-button 是原站留下的类名，样式在这里接管*/
.foot_sub .mc4wp-form{margin:0;}
/*邮箱框和按钮改一行显示：那个 p 变 flex，邮箱框 flex:1 吃掉剩余宽度，按钮按自己文字宽。
  表单是 MC4WP 插件输出的（139 号），结构是 <p><input email><span.stm-subscribe-button><input submit></span></p>，
  邮箱框和按钮本来就是同一个 p 里的兄弟节点，所以不用动后台的表单内容。
  min-width:0 不能少 —— input 默认有个固有宽度，不给 0 它不肯被压缩，窄屏会把按钮顶出去*/
.foot_sub .mc4wp-form-fields p{display:flex;gap:8px;margin:0 0 10px;}
/*输入框底用 .bg_navy_dark 那个深一档的海军蓝（#142a45），跟底色的蓝是同一族；
  原来是给深灰底配的 #2b2b2b 中性灰，压在蓝底上会发脏*/
.foot_sub input[type=email]{flex:1 1 0;min-width:0;height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.22);border-radius:4px;background:#142a45;color:#fff;font-size:14px;transition:border-color .25s;}
.foot_sub input[type=email]::placeholder{color:rgba(255,255,255,.5);}
/*深底上聚焦圈用白色，海军蓝压上去看不见*/
.foot_sub input[type=email]:focus{border-color:#fff;outline:0;}
.foot_sub .stm-subscribe-button{display:block;flex:0 0 auto;}
/*按钮改品牌黄，跟搜索条那个 Search 按钮同一套（bg_gold 底 + 海军蓝字），hover 压深一档 #8e5527*/
/*Sign up 文字改邮箱图标*/
.foot_sub input[type=submit]{width:50px;height:42px;padding:0;border:0;border-radius:4px;color:transparent;font-size:15px;font-weight:600;cursor:pointer;transition:all .25s;background:#b16a31 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") no-repeat center/20px 20px;}
/*hover 只改 background-color，写 background 简写会把图标一起清掉*/
.foot_sub input[type=submit]:hover{background-color:#8e5527;}
.foot_sub .mc4wp-response{font-size:13px;line-height:1.6;color:#c9d4e3;margin-bottom:10px;}


/*blog_card*/
.loop-blog-card .col-5 a{min-height:280px;}
.loop-blog-card .col-5 img{object-fit:cover!important;}
.blog_more{color:#1d3753;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;transition:gap 0.3s;}
.blog_more::after{content:'\2192';font-size:16px;}
.blog_more:hover{gap:12px;color:#000;}

/*hezuo 首页品牌墙*/
/*原来写死一行 5 个（width 算 20%），宽屏上每个格子近 290px 太空，改成 160px 起自动铺。
  用 auto-fill 不用 auto-fit —— auto-fill 排不满的那行会留空轨道，最后几张左对齐；
  auto-fit 会把空轨道收掉、把剩下的拉宽，又变回「一格太宽」*/
.hezuo_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}
/*卡片高度贴着 logo 原图走：9 张里有 7 张原图只有 39px 高，框太大就是纯放大
  44px 内容高 + 14px 上下内边距 + 1px 边框 = 74px（宽度窄了高度别跟着缩，一缩就把小原图压糊了）*/
.hezuo_item{height:74px;padding:14px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #eceef1;border-radius:4px;transition:.3s;}
/*hover 只换边框色；原来的 translateY(-4px) 上浮 + 阴影去掉了*/
.hezuo_item:hover{border-color:#d8dde4;}
/*logo 原图比例差很大，靠 max-* 兜住，别给固定宽高。
  原来是 grayscale(1) + opacity:.72 的「灰着、hover 才还原」，现在直接上原色：
  灰度去了，那 .72 也得一起去 —— 彩色 logo 压到 0.72 是发灰发脏，不是「淡雅」*/
.hezuo_item .hezuo_logo{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
@media (max-width:992px){
    .hezuo_grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
    .hezuo_item{height:66px;padding:10px;}
}
@media (max-width:575px){
    .hezuo_grid{grid-template-columns:repeat(3,1fr);gap:10px 8px;}
    .hezuo_item{height:60px;padding:8px;}
}

/*youshi*/
.youshi_card{border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,0.05);transition:all 0.35s ease;border:1px solid transparent;}
/*hover 只描一圈海军蓝边框；上浮 + 阴影去掉了*/
.youshi_card:hover{border-color:#1d3753;}
.youshi_icon{width:60px;height:60px;border-radius:50%;background:#fef0f0;font-size:26px;transition:all 0.35s ease;}
.youshi_card:hover .youshi_icon{background:#1d3753;}
.youshi_card:hover .youshi_icon i{color:#fff!important;}

/*honor*/
.honor_link{display:block;border-radius:4px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.06);transition:all 0.35s ease;position:relative;background:#fff;padding:6px;}
.honor_link::after{content:'+';position:absolute;right:14px;top:14px;width:28px;height:28px;background:rgba(0,0,0,0.5);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;opacity:0;transition:opacity 0.3s;}
/*原来这里有条 .honor_link:hover{translateY(-5px) + 大阴影}，去掉了；hover 的反馈留给右上角那个「+」淡入*/
.honor_link:hover::after{opacity:1;}
.honor_img{display:block;border-radius:4px;}

/*app_accordion*/
.app_accordion{height:650px;}
.app_acc_item{flex:1;position:relative;min-width:0;transition:filter 0.3s;}
.app_acc_item:hover{filter:brightness(1.1);}
.app_acc_overlay{background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0) 100%);left:0;right:0;bottom:0;top:0;}
.app_acc_link{display:inline-flex;align-items:center;gap:8px;background:#1d3753;color:#fff;padding:12px 24px;border-radius:4px;font-size:15px;font-weight:600;transition:all 0.3s;}
.app_acc_link:hover{background:#fff;color:#000;gap:14px;}
@media (max-width:768px){
    .app_accordion{height:auto;flex-wrap:wrap;}
    .app_acc_item{flex:0 0 100%;height:320px;}
}

/*cat_card*/
.cat_grid{display:grid;grid-template-columns:repeat(4,1fr);}
.cat_card{min-height:380px;transition:all 0.4s ease;position:relative;}
.cat_card::before{transition:background 0.4s ease;}
.cat_card:hover::before{background:rgba(0,0,0,0.6);}
.cat_card_arrow{opacity:0;transform:translateY(8px);transition:all 0.35s ease;}
.cat_card:hover .cat_card_arrow{opacity:1;transform:translateY(0);color:#1d3753;}
@media (max-width:992px){
    .cat_grid{grid-template-columns:repeat(2,1fr);}
    .cat_card{min-height:280px;}
}
@media (max-width:576px){
    .cat_grid{grid-template-columns:repeat(1,1fr);}
    .cat_card{min-height:220px;}
}

/*about*/
.about_img_wrap{overflow:hidden;border-radius:4px;box-shadow:0 4px 24px rgba(0,0,0,0.1);}
.about_img{transition:transform 0.5s ease;display:block;}
.about_img_wrap:hover .about_img{transform:scale(1.03);}
.about_img_badge{bottom:30px;left:-4px;border-radius:0 4px 4px 0;box-shadow:4px 4px 20px rgba(0,0,0,0.2);}
.about_list{list-style:none;padding:0;}
.about_list li{display:flex;align-items:flex-start;}
.about_check{width:22px;height:22px;background:#e8f5e9;color:#2e7d32;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-right:12px;margin-top:2px;}


/*hero_big 首页大 hero：单张背景图 + logo + 文案（图与文字暂时写死，见 section/hero_banner.php）
  logo、大标题、小标题整块居中：container 是 flex，横向居中靠 justify-content，
  行内那几行文字靠 .hero_big_inner 的 text-align*/
.hero_big{position:relative;height:450px;background-color:#141c26;background-repeat:no-repeat;background-position:center center;}
/* .hero_big:before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45);} */
/*padding-bottom 是给下面的搜索条让位 —— .hero_search 用负 margin 压在 hero 底上（≥992 压 46px，更窄压 86px）。
  不扣掉这一段的话，内容是按整个 480px 居中的，视觉上会偏低半截*/
.hero_big .container{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;padding-bottom:46px;}
.hero_big_inner{position:relative;text-align:center;}
/*logo（banner_logo.png 原图 619x210，按原尺寸铺开太大）收到 140px 高，宽度按比例跟着走。
  颜色不动 —— 这是彩色金属标，红斜杠和蓝橙 V 是品牌的一部分，刷成白色就没了。
  尺寸用 clamp 跟着视口缩，不用再为它单开断点*/
.hero_big_inner img{display:block;margin:0 auto 26px;height:clamp(72px,9.5vw,120px);width:auto;max-width:100%;object-fit:contain;}
/*大标题走全站的显示字体 Exo Medium Italic。Exo 只有 500 这一个字面，所以这里不能给 700 ——
  那是拿别的字合成假粗体，斜体叠假粗体一眼就看出来；全大写再补一点字距更精神*/
.hero_big_num{font-family:"Exo","Open Sans",sans-serif;font-style:italic;font-weight:bold;font-size:clamp(26px,4.3vw,52px);line-height:1.15;letter-spacing:.5px;color:#fff;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.5); }
/*小标题回到正文的 Open Sans（继承 body 那份，这里不用再写 font-family）——
  两行都挂 Exo 斜体的话只剩大小之分，层次出不来*/
.hero_big_txt{font-size:clamp(14px,1.4vw,20px);font-weight:400;line-height:1.5;letter-spacing:.3px;color:#fff;margin:14px 0 0;text-shadow:0 1px 6px rgba(0,0,0,.5);}
/*箭头是上一版的遗留：标记已经从 hero_banner.php 里删掉了，规则先留着（怕以后要用回来），
  但给它让位的那两条 padding-left 去掉了 —— 内容现在居中，留着左边那条内边距会把整块顶偏*/
.hero_big_arrow{position:absolute;left:-68px;top:30px;width:54px;line-height:0;display:none;}
.hero_big_arrow svg{display:block;width:100%;height:auto;animation:heroBounce 1.8s ease-in-out infinite;}
@keyframes heroBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(9px);}}
@media (max-width:992px){
    /*窄屏搜索条折成多排，负 margin 从 46 变 86（见 .hero_search 那两条），hero 让位跟着加大。
      height 和字号这档不在这儿写 —— 下面 part_search 那个 max-width:992 块里已经有
      .hero_big{height:360px;background-position:35% center} 和 40px / 20px 三条，
      同优先级、又排在这条后面，这里写了也压不住*/
    .hero_big .container{padding-bottom:86px;}
    .hero_big_inner img{margin-bottom:18px;}
}

/*hero_search 搜索条上提，让一半压在 hero 上
  原站写的是 margin-top:-99px，那是它自己的搜索块（tab + 4 列筛选）高约 198px 的一半，
  不是一个固定值。这里按"盒子实高的一半"来给：
    桌面 .part_search 高 25+42+25 = 92px  -> -46px
    窄屏控件换成 3 排，高 16+(40*3+8*2)+20 = 172px -> -86px
  改 .part_search 的内边距或控件高度时，这两个数要跟着改*/
.hero_search{position:relative;z-index:2;margin-top:-86px;padding-bottom:40px;}

/*part_search 深色搜索条，尺寸/配色照搬原站 .stm_wcmap_parts_search_wrap*/
.part_search{background:#1d3753;padding:25px 30px;border-radius:4px;}
.part_search .form-select,.part_search .form-control{height:42px;border:0;border-radius:4px;font-size:14px;color:#191d21;background-color:#fff;}
.part_search .form-control{padding:0 12px;}
.part_search .form-select{padding:0 34px 0 12px;cursor:pointer;}
/*搜索条本身就是海军蓝底，聚焦圈再用海军蓝就看不见了，走白色*/
.part_search .form-select:focus,.part_search .form-control:focus{border:0;box-shadow:0 0 0 2px #fff;}
.part_search .form-control::placeholder{color:#9aa0a6;}
.part_search button{height:42px;font-weight:600;border-radius:4px;}
/*按钮是金色底 + 海军蓝字（搜索条是海军蓝底，按钮再用海军蓝就糊了；白底又太闷），hover 把金色压深一号*/
.part_search button:hover{background:#8e5527!important;color:#fff!important;}
@media (max-width:992px){
    .part_search{padding:16px 16px 20px;}
    .part_search .form-select,.part_search .form-control,.part_search button{height:40px;font-size:13px;}
    /*窄屏只截得到中间一条，居中正好是隧道口最亮的地方，白字糊；往左偏到暗部*/
    .hero_big{height:360px;background-position:35% center;}
    .hero_big_num{font-size:40px;}
    .hero_big_txt{font-size:20px;}
    /*窄屏容器顶满，左边没空档了，箭头在 1200 以下那条里已经关掉*/
}
/*手机下 hero 大标题和小标题一起缩小，改大小就动这两个数*/
@media (max-width:575px){
    .hero_big{height:280px;}
    .hero_big_num{font-size:26px;}
    .hero_big_txt{font-size:15px;}
}
/*写在 max-width 那条之后，宽度正好 992px 时以这条为准（此时 col-lg 已生效，搜索条只有一排）*/
@media (min-width:992px){
    .hero_search{margin-top:-46px;}
}

/*brand_cat 首页「按品牌」导航（原来还有「按栏目」那一栏，已去掉，这栏现在独占整行。
  外面那圈大边框（.browse_box）也去掉了 —— 改成每个 logo 自己一块带边框的牌子，
  .browse_box 这个 class 还留在标记里，只是不再给样式）*/
.brand_cat .browse_head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
/*字号/字重不再写死在这里 —— 跟首页其它区块大标题（What we offer / Customers）统一，
  同一套工具类 fs30 m_fs20 fw500 lh15 打在标签上，这儿只留颜色和收边*/
.brand_cat .browse_h2{color:#1d3753;margin:0;}
.brand_cat .browse_more{font-size:14px;color:#7a8699;text-decoration:none;white-space:nowrap;transition:.25s;}
.brand_cat .browse_more:hover{color:#1d3753;}
/*13 个品牌整行铺开，列数交给 auto-fill 自己算（1200 以上大约 8 列），窄屏自动少列，不用另写断点*/
.brand_cat .browse_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px 14px;}
.brand_cat .browse_item{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;}
/*边框只包 logo，品牌名在牌子外面。
  各品牌原图尺寸差很多（89x39 ~ 736x192），框住高度 + contain 才不会撑变形。
  img 的 max-height:100% 是按 .browse_img 的内容盒算的（84 减掉上下 padding 12+12 = 60），改 padding 记得一起看*/
.brand_cat .browse_img{width:100%;height:84px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e6e9ee;border-radius:4px;padding:12px;transition:.25s;}
.brand_cat .browse_img img{max-width:100%;max-height:100%;width:auto;object-fit:contain;}
.brand_cat .browse_item:hover .browse_img{border-color:#1d3753;}
.brand_cat .browse_name{font-size:13px;line-height:1.35;font-weight:500;color:#5a6472;text-align:center;transition:.25s;}
.brand_cat .browse_item:hover .browse_name{color:#1d3753;}
@media (max-width:992px){
    .brand_cat .browse_more{font-size:13px;}
    .brand_cat .browse_grid{gap:12px 10px;}
    .brand_cat .browse_img{height:68px;padding:8px;}
    .brand_cat .browse_name{font-size:12px;}
}
@media (max-width:575px){
    .brand_cat .browse_grid{grid-template-columns:repeat(3,1fr);gap:12px 8px;}
    .brand_cat .browse_img{height:62px;padding:6px;}
    .brand_cat .browse_name{font-size:11px;}
}

/*brand_head 品牌栏目页顶上那条品牌信息（taxonomy-product_brand.php 用，分类页没有这块）*/
.brand_head{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;background:#fff;border:1px solid #eceef1;border-radius:4px;padding:18px 24px;margin-bottom:30px;}
/*和首页 Browse by Make 一个道理：各品牌 logo 尺寸差很多，框高度 + contain 才不会撑变形*/
.brand_head_img{max-width:200px;max-height:56px;width:auto;object-fit:contain;}
.brand_head_h1{font-size:24px;font-weight:600;line-height:1.3;color:#1d3753;margin:0;}
.brand_head_num{font-size:14px;color:#7a8699;}
@media (max-width:768px){
    .brand_head{padding:14px 16px;margin-bottom:20px;}
    .brand_head_img{max-height:44px;}
    .brand_head_h1{font-size:19px;}
    .brand_head_num{font-size:13px;}
}

/*offer_sec 首页 What we offer 标签页*/
/*整块改浅灰底，卡片白底压在上面；灰底上白卡本身就分得开，卡片那层阴影（.h-100 自带的那条）这节里去掉。
  只在这节里去 —— .h-100 是全站产品卡共用的，别的页面还是白底，阴影一去掉卡就散了*/
.offer_sec{background:#f2f4f7;}
.offer_sec .h-100{box-shadow:none;}
.offer_sec .offer_nav{border:0;gap:10px;}
/*底色已经是灰的，未选中的 tab 再压灰就糊在一起了，改白底*/
.offer_sec .offer_nav .nav-link{border:0;border-radius:4px;padding:10px 26px;font-size:15px;font-weight:500;color:#5a6472;background:#fff;transition:.25s;}
.offer_sec .offer_nav .nav-link:hover{color:#1d3753;}
.offer_sec .offer_nav .nav-link.active{background:#1d3753;color:#fff;}
@media (max-width:992px){
    .offer_sec .offer_nav{gap:8px;}
    .offer_sec .offer_nav .nav-link{padding:8px 18px;font-size:13px;}
}

/*mobile display*/
.cxs1200{display:none;}
.cxs992{display:none;}
.cxs768{display:none;}
@media (max-width:1200px){
    .cxs1200{display:block!important;}
    .bxs1200{display:none!important;}
}
@media (max-width:992px){
    .cxs992{display:block!important;}
    .bxs992{display:none!important;}
}
@media (max-width:768px){
    .cxs768{display:block!important;}
    .bxs768{display:none!important;}
    .mobile_video{width: 300% !important;height: 100%;}
}

/*字体分工：全局 Open Sans（见文件开头的 body），只有「区块大标题」走 Exo Medium Italic。
  这三条选择器上面各自都有 font-weight（700/600/500），这条写在文件最后，
  优先级相同靠顺序压住，所以别往上挪。
  另外 Exo 只有 500 这一个字面 —— 打上 sec_title 的标签里不能再留 rsetcss 的 fw600/fw700，
  那是 !important，会强制合成假粗体，斜体加假粗体一眼就看得出来。标签里统一给 fw500。
  产品名、文章标题、面包屑和侧栏标题都不在此列，保持 Open Sans。
  页脚那排栏目标题（Contact Us / Social Network / Subscribe）现在也走 Exo 了，
  但没并进这份名单，写在上面 body > section.foot_bar h2 那条里 —— 同理，它标签里也得是 fw500。
  hero 里的 .hero_big_txt（小标题）本来也在这份名单里，改成居中那版时移出去了：
  大标题已经占了 Exo 斜体，副标题再挂同一个字体就只剩大小之分，层次出不来 ——
  改回了 Open Sans，字体写在上面 .hero_big_txt 那条里。hero 的大标题 .hero_big_num
  也是同理单独写的（那条在 hero 区块里，没并进来）*/
.sec_title,
.brand_cat .browse_h2,
.application_ms h2{font-family:"Exo","Open Sans",sans-serif;font-style:italic;font-weight:500;}


body:not(.home) .hero_search{
    /* 这里写 body 不含 home 类时的样式 */
   background: #1d3753;
   margin-top: 0;
   padding-bottom: 0;
}
body:not(.home) .hero_search .part_search{
	padding-left: 0; padding-right: 0;
}
.sidebar_box h3{
	font-family: "Exo", "Open Sans", sans-serif;
	border-bottom: #b16a31 solid 2px !important;
}