/* ==========================================================
   华瑞达流体科技 - 全站公共样式
   主导航 / 抽屉菜单 / 搜索弹层
   ========================================================== */
/* 基础变量 */
:root {
  --hrd-primary: #005bac;
  --hrd-primary-dark: #004a8d;
  --hrd-text: #000;
  --hrd-text-gray: #333333;
  --hrd-text-light: #273552;
  --hrd-bg: #fff;
  --hrd-bg-gray: #f8f8f8;
  --ab-blue: #012d86;
	--ab-blue-deep: #1a2a82;
	--ab-blue-btn: #0c4ac3;
  --ab-red-btn: #d91826;
  --ab-red-deep: #b71c1c;
  --hrd-border: #e4e8eb;
  --hrd-borderB: #1c1f1f;
  --hrd-shadow: rgba(0, 0, 0, 0.08);
  --hrd-radius: 0.75rem;
  --hrd-radius-x: 0.3125rem;
  --hrd-header-h: 8.5rem;
  --hrd-transition: 0.3s ease;
}

.container-fluid,.container-lg{
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}


html {
  font-size: 18px;
}
@media screen and (max-width:1560px){
  html {
    font-size: 17px;
  }
}
@media screen and (max-width:1440px){
  html {
    font-size: 16px;
  }
}
@media screen and (max-width:1360px){
  html {
    font-size: 15px;
  }
}
@media screen and (max-width:1024px){
  html {
    font-size: 14px;
  }
}
@media screen and (max-width:992px){
  html {
    font-size: 13px;
  }
}
@media screen and (min-width:1024px){
  .container-lg,
  .container-fluid{
    max-width: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media screen and (max-width:1024px){
  .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, 
.col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{padding-left: 0.9375rem;
  padding-right: 0.9375rem;}
  .row {    
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
  }
}

/* SKF / Inter / 思源黑体 等字体：优先加载本地 ../fonts/，缺失再回退 SKF CDN */
@font-face{font-family:SKF Sans Light;font-weight:400;font-display:swap;src:url(../fonts/SKFSans-Light.woff2) format("woff2")}
@font-face{font-family:SKF Sans Regular;font-weight:400;font-display:swap;src:url(../fonts/SKFSans-Regular.woff2) format("woff2")}
@font-face{font-family:SKF Sans Medium;font-weight:400;font-display:swap;src:url(../fonts/SKFSans-Medium.woff2) format("woff2")}
@font-face{font-family:SKF Sans Bold;font-weight:400;font-display:swap;src:url(../fonts/SKFSans-Bold.woff2) format("woff2")}
@font-face{font-family:SKF Sans Light Italic;font-weight:400;font-display:swap;src:url(../fonts/SKFSans-LightItalic.woff2) format("woff2")}
@font-face{font-family:SKF Sans Medium Italic;font-weight:400;font-display:swap;src:url(../fonts/SKFSans-MediumItalic.woff2) format("woff2")}
@font-face{font-family:SKF Sans Bold Italic;font-weight:400;font-display:swap;src:url(../fonts/SKFSans-BoldItalic.woff2) format("woff2")}
@font-face{font-family:Inter-Regular;font-weight:400;font-display:swap;src:url(../fonts/Inter-Regular.woff2) format("woff2")}
@font-face{font-family:Inter-Light;font-weight:400;font-display:swap;src:url(../fonts/Inter-Light.woff2) format("woff2"),}
@font-face{font-family:Inter-Bold;font-weight:400;font-display:swap;src:url(../fonts/Inter-Bold.woff2) format("woff2")}
@font-face{font-family:Inter-Medium;font-weight:400;font-display:swap;src:url(../fonts/Inter-Medium.woff2) format("woff2")}
@font-face{font-family:SKF Display Bold;font-weight:400;font-display:swap;src:url(../fonts/SKFDisplay-Bold.woff2) format("woff2")}
@font-face{font-family:SKF Display Bold Outline;font-weight:400;font-display:swap;src:url(../fonts/SKFDisplay-BoldOutline.woff2) format("woff2")}
@font-face{font-family:SKF Display Light;font-weight:400;font-display:swap;src:url(../fonts/SKFDisplay-Light.woff2) format("woff2")}
@font-face{font-family:SKF Display Variable;font-weight:400;font-display:swap;src:url(../fonts/SKFDisplay-Variable.woff2) format("woff2")}
@font-face{font-family:BIZ UDPGothic;font-weight:400;font-display:swap;src:url(../fonts/BIZUDPGothic-Regular.ttf) format("truetype")}
@font-face{font-family:Source Han Sans CN;font-weight:400;font-display:swap;src:url(../fonts/SourceHanSansCN-Normal.ttf) format("truetype")}

body { 
  padding-top: var(--hrd-header-h); 
  font-family: 'SKF Sans', 'Source Han Sans CN', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.875;
  color: var(--hrd-text-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-home{
  padding-top: 0px;
}
h1, h2, h3, h4, h5, h6, .hrd-font-display {
  font-family: 'SKF Sans Regular', 'Source Han Sans CN', sans-serif !important;
}
a {
  text-decoration: none;
  color: var(--hrd-text);
  -webkit-tap-highlight-color: transparent;
  transition: var(--hrd-transition);
}
a:hover { text-decoration: none; color: var(--ab-blue); }

* {
  margin: 0px;
  padding: 0px;
}
input {
  -webkit-user-select: auto;
}
p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd {
  list-style: none;
  margin: 0px 0px 0px 0px;
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
  line-height: 1.4;
}
button:focus{
  outline: none;
}
img {
  width: auto;
  max-width: 100%;
}

/* 头部基础 */
.header-hrd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hrd-header-h);
  z-index: 1030;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--hrd-transition), box-shadow var(--hrd-transition), border-color var(--hrd-transition);
}

.header-hrd.scrolled {
  background: #ffffffb3 !important;
  border-bottom-color: rgba(228, 232, 235, 0.6);
  box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(0.625rem);
  backdrop-filter: blur(0.625rem);
}

/* 首页顶部未滚动态：透明背景 + 白色文字/图标 + 白色 logo */
.is-home .header-hrd:not(.scrolled) .nav-link,
.is-home .header-hrd:not(.scrolled) .action-item,
.is-home .header-hrd:not(.scrolled) .lang-switch,
.is-home .header-hrd:not(.scrolled) .search-toggle {
  color: #fff;
}
.is-home .header-hrd:not(.scrolled) .action-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.is-home .header-hrd:not(.scrolled) .search-toggle {
  background: rgba(255, 255, 255, 0.14);
}
.is-home .header-hrd:not(.scrolled) .search-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
}
.is-home .header-hrd:not(.scrolled) .menu-trigger {
  border-color: rgba(255, 255, 255, 0.8);
}
.is-home .header-hrd:not(.scrolled) .menu-trigger .bar {
  background: #fff;
}

/* 首页 logo 切换：顶部显示白色版，滚动后显示彩色版 */


.header-hrd:not(.scrolled) .logo-main,
.header-hrd.scrolled .logo-main {
  display: none;
}

.is-home .header-hrd:not(.scrolled) .logo-main,
.is-home .header-hrd.scrolled .logo-alt {
  display: block;
}
.is-home .header-hrd:not(.scrolled) .logo-alt,
.is-home .header-hrd.scrolled .logo-main {
  display: none;
}

.header-hrd.scrolled {
  box-shadow: 0 0.125rem 1rem var(--hrd-shadow);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
}

/* 左侧区域 */
.header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}
/* 汉堡按钮 */
.menu-trigger {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--hrd-text);
  border-radius: 50%;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--hrd-transition), background var(--hrd-transition);
}

.menu-trigger:hover {
  border-color: #00000040;
}

.menu-trigger .bar {
  display: block;
  width: 1.125rem;
  height: .125rem;
  background: var(--hrd-text);
  border-radius: 1px;
  transition: transform var(--hrd-transition), opacity var(--hrd-transition);
}

.menu-trigger.active .bar:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}

.menu-trigger.active .bar:nth-child(2) {
  opacity: 0;
}

.menu-trigger.active .bar:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

.menu-trigger:hover .top-bar {
  transform: translateY(-.0.4375rem);
  scale: 1.2;
}
.menu-trigger:hover .middle-bar {
  opacity: 0;
  transition: all .2s ease-in;
}
.menu-trigger:hover .bottom-bar {
  transform: translateY(.0.4375rem);
  scale: 1.2;
}

/* 主导航 - 一级栏目无下拉 */
.main-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.main-nav .nav-link {
  display: inline-flex;
  align-items: center;
  padding: .0rem 0rem;              /* 覆盖 Bootstrap .nav-link 默认的 8px 16px 内边距 */
  height: var(--hrd-header-h);
  line-height: var(--hrd-header-h);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--hrd-text);
  text-decoration: none;
  transition: color var(--hrd-transition);
  white-space: nowrap;
}
.main-nav .nav-link:hover {
  color: var(--hrd-primary);
  text-decoration: none;
}
/* 当前栏目小圆点 */
.main-nav .nav-link {
  position: relative;
}
.main-nav .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 3.0rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--hrd-text);
  pointer-events: none;
}
.is-home .header-hrd:not(.scrolled) .main-nav .nav-link.active::after {
  background: #fff;
}

/* Logo */
.header-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header-logo a {
  display: block;
}

.header-logo img {
  display: block;
  max-height: 3.75rem;
  width: auto;
}

/* 右侧区域 */
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}

.action-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--hrd-text);
  text-decoration: none;
  border-radius: 50%;
  transition: color var(--hrd-transition), background var(--hrd-transition);
}

.action-item:hover {
  color: var(--hrd-primary);
  background: rgba(0, 91, 172, 0.06);
}

.action-item .iconfont,.lang-switch .iconfont {
  font-size: 1.25rem;
}
.lang-switch{
  color: var(--hrd-text);
}
.lang-switch span {
  font-weight: 600;
}
/* ===== 语言切换下拉 ===== */
.lang-switch-wrap { position: relative; display: inline-flex; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 0.375rem;
  color: var(--hrd-text); background: transparent; border: none;
  cursor: pointer; padding: 0.375rem 0.5rem; border-radius: 0.375rem;
  font-weight: 600; transition: color var(--hrd-transition), background var(--hrd-transition);
}
.lang-switch:hover { color: var(--hrd-primary); background: rgba(0, 91, 172, 0.06); }
.lang-caret { font-size: 0.7rem; }
.lang-menu {
  position: absolute; top: 100%; right: 0; margin-top: 0.5rem;
  min-width: 9.5rem; background: #fff; border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.14);
  padding: 0.375rem 0; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .2s ease; z-index: 300;
}
.lang-switch-wrap.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu li { margin: 0; }
.lang-item { display: block; padding: 0.5rem 1rem; color: var(--hrd-text); font-size: 0.9rem; }
.lang-item:hover { background: rgba(0, 91, 172, 0.06); color: var(--hrd-primary); }
.lang-item.active { color: var(--hrd-primary); font-weight: 600; }

.search-toggle {
  background: #e5e5e5;
  padding: 0.3125rem 1.0rem;   /* 上下 5px / 左右 16px */
  font-weight: 600;  
  border-radius: 1.25rem;
  min-width: 5.0rem;           /* 最小宽度 80px */
  border: none;
  cursor: pointer;
  white-space: nowrap;         /* 图标+文字强制单行：防止宽度收窄后被压成两行 */
}

.search-toggle .search-label {
  margin-left: 0.25rem;
}

/* 微信二维码 */
.wechat-toggle .wechat-qr {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.625rem);
  width: 8.75rem;
  padding: 0.625rem;
  background: #fff;
  border-radius: var(--hrd-radius);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hrd-transition), transform var(--hrd-transition), visibility var(--hrd-transition);
  text-align: center;
}

.wechat-toggle .wechat-qr::before {
  content: '';
  position: absolute;
  top: -0.375rem;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 0.375rem 0.375rem;
  border-style: solid;
  border-color: transparent transparent #fff;
}

.wechat-toggle:hover .wechat-qr {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.wechat-qr img {
  display: block;
  width: 100%;
  height: auto;
}

.wechat-qr p {
  font-size: 0.75rem;
  color: var(--hrd-text-light);
  margin: 0.5rem 0 0;
  line-height: 1.3;
}

/* 成本测算按钮 */
.btn-cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;  
  padding: 0.3125rem 1.25rem; 
  font-weight: 600;
  color: #fff;
  background: var(--ab-blue);
  border-radius: 1.25rem;
  text-decoration: none;
  transition: background var(--hrd-transition), transform var(--hrd-transition);
}

.btn-cost:hover {
  background: var(--hrd-primary-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* 抽屉菜单遮罩 */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hrd-transition), visibility var(--hrd-transition);
}

.drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* 抽屉面板 */
.site-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 36rem;
  height: 100vh;
  background: #fff;
  z-index: 1050;
  transform: translateX(-100%);
  transition: transform var(--hrd-transition);
}
.site-drawer.active {
  transform: translateX(0);
}
.site-drawer .drawer-body{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 5rem 3.0rem 2.5rem 3.0rem;
  overflow-y: auto;
  transition: transform var(--hrd-transition), opacity var(--hrd-transition), visibility var(--hrd-transition);
}
/* 主面板（一级菜单）默认可见 */
.drawer-main {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
/* 主面板滑出（切到子面板时） */
.drawer-main.is-slid {
  transform: translateX(-40%);
  opacity: 0;
  visibility: hidden;
}
/* 子面板默认隐藏在右侧 */
.drawer-sub {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
}
.drawer-sub.is-active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* 关闭按钮：位于展开抽屉的右侧边缘中间（SKF 风格） */
.drawer-close {
  position: absolute;
  top: 50%;
  right: -2rem;
  left: auto;
  transform: translateY(-50%);
  width: 4rem;
  height: 4rem;
  border: none;
  border-radius: 50%;
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--hrd-text);
  cursor: pointer;
  z-index: 30; 
  opacity: 0; 
  transition: color var(--hrd-transition), transform var(--hrd-transition), opacity var(--hrd-transition);
}
.drawer-close i{
  font-size: 1.5rem;
  line-height: 1.5rem;
}
.drawer-close:hover {
  color: var(--hrd-primary);  
  transform: translateY(-50%) rotate(90deg);
}
.site-drawer.active .drawer-close {
  opacity: 1;
}
/* 抽屉一级菜单 */
.drawer-menu {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}

.drawer-menu-item {
  border-bottom: 1px solid var(--hrd-border);
}

.drawer-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--hrd-text);
  text-decoration: none;
  transition: color var(--hrd-transition), background var(--hrd-transition), padding-left var(--hrd-transition);
}

.drawer-menu-link:hover,
.drawer-menu-link.active {
  color: var(--hrd-primary);
  padding-left: 0.75rem;
  text-decoration: none;
}

.drawer-menu-link.active .iconfont {
  color: var(--hrd-primary);
}

.drawer-menu-link .iconfont {
  font-size: 2.0rem;
  color: var(--hrd-text-light);
  transition: transform var(--hrd-transition), color var(--hrd-transition);
}

.drawer-menu-link:hover .iconfont {
  color: var(--hrd-primary);
  transform: translateX(0.25rem);
}

/* 返回按钮 */
.drawer-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--hrd-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--hrd-transition);
}

.drawer-back .iconfont {
  font-size: 0.875rem;
}

.drawer-back:hover {
  color: var(--hrd-primary);
}

/* 抽屉子菜单 */
.drawer-sub-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.drawer-sub-group h5 {
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hrd-text-light);
  margin: 0 0 0.625rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hrd-border);
}

.drawer-sub-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-sub-group li + li {
  margin-top: 0.125rem;
}

.drawer-sub-group a {
  display: block;
  padding: 0.5625rem 0px;
  font-size: 1.125rem;
  color: var(--hrd-text);
  text-decoration: none;
  transition: color var(--hrd-transition), padding-left var(--hrd-transition), background var(--hrd-transition);
}

.drawer-sub-group a:hover {
  color: var(--hrd-primary);
  padding-left: 0.625rem;
}

/* 抽屉底部信息 - 与 zhan 图一致 */
.drawer-footer {
  padding-top: 0.5rem;
}

.drawer-footer-top {
  display: flex;
  gap: 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hrd-border);
}

.drawer-qr {
  flex: 0 0 7.5rem;
  padding: 0.625rem;
  border: 1px solid var(--hrd-border);
  text-align: center;
}

.drawer-qr img {
  display: block;
  width: 100%;
  height: auto;  
}
.drawer-qr p {
  font-size: 0.75rem;
  color: var(--hrd-text-light);
  margin: 0.5rem 0 0;
}
.drawer-info {
  flex: 1;
}
.drawer-info p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #b7b7b7;
  margin: 0 0 0.5rem;
}
.drawer-info .iconfont {
  font-size: 1.125rem;
  margin-top: 0.125rem;
}
.drawer-info a {
  color: #b7b7b7;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
.drawer-info a:hover {
  color: var(--hrd-primary);
}
.drawer-slogan {
  padding-top: 1.25rem;
  line-height: 1.2;
  color: #717171;
}
.drawer-slogan strong {
  display: block;
  font-size: 1.75rem; 
}
.drawer-slogan p {
  font-size: 1.25rem;
  letter-spacing: 0.09375rem;
  margin-bottom: 0;
}
/* 搜索弹层 */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.96);
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hrd-transition), visibility var(--hrd-transition);
}

.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-box-large {
  width: 100%;
  max-width: 45rem;
  padding: 0 1.25rem;
  position: relative;
}

.close-search {
  position: absolute;
  top: -5rem;
  right: 1.25rem;
  width: 3rem;
  height: 3rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  color: var(--hrd-text);
  cursor: pointer;
  transition: color var(--hrd-transition);
}

.close-search:hover {
  color: var(--hrd-primary);
}

.search-form {
  position: relative;
}

.search-form input {
  width: 100%;
  height: 3.75rem;
  padding: 0 3.75rem 0 1.25rem;
  font-size: 1.125rem;
  border: none;
  border-bottom: 0.125rem solid var(--hrd-border);
  background: transparent;
  outline: none;
  transition: border-color var(--hrd-transition);
}

.search-form input:focus {
  border-bottom-color: var(--hrd-primary);
}

.search-submit {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border: none;
  background: transparent;
  color: var(--hrd-text);
  font-size: 1.375rem;
  cursor: pointer;
  transition: color var(--hrd-transition);
}

.search-submit:hover {
  color: var(--hrd-primary);
}

/* ==================== 站点底部 footer ==================== */
.site-footer {
  background: #fff;
  color: var(--hrd-text);
  padding-top: 4rem;
}

/* 顶部内容区 */
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding: 3rem 0px;
  border-top: 1px solid var(--hrd-borderB);
}

/* 左侧公司信息 */
.footer-brand {
  flex: 0 0 40%;
  max-width: 100%;
}

.footer-brand-txt {
  margin-bottom: 1.75rem;
}

.footer-company {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--hrd-text);
  margin: 0 0 0.5rem;
}

.footer-slogan { 
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--hrd-text);
  margin: 0;
}

.footer-contact {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.footer-qr {
  flex: 0 0 7.5rem;
  padding: 0.625rem;
  border: 1px solid var(--hrd-border);
  text-align: center;
}

.footer-qr img {
  display: block;
  width: 100%;
  height: auto;
}

.footer-qr span {
  display: block;
  font-size: 0.875rem;
  margin: 0px;
}
.footer-info-list {
  flex: 1;
}

.footer-info-list p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;  
  color: var(--hrd-text);
  margin: 0 0 0.625rem;
  line-height: 1.6;
}

.footer-info-list p:last-child {
  margin-bottom: 0;
}

.footer-info-list .iconfont {
  font-size: 1.125rem;
  color: #b7b7b7;
}

.footer-info-list a {
  color: #4a4a4a;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.footer-info-list a:hover {
  color: var(--hrd-primary);
}

/* 右侧链接栏目 */
.footer-links {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 45rem;
}

.footer-col {
  flex: 1;
  min-width: 0;
}

.footer-col h4 {
  font-size: 2.5rem;
  color: var(--hrd-text);
  margin: 0 0 1.25rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li + li {
  margin-top: 0.375rem;
}

.footer-col a {
  display: inline-block;
  font-size: 1.125rem;
  text-decoration: none;
  line-height: 1.6;
  transition: color var(--hrd-transition), padding-left var(--hrd-transition);
}

.footer-col a:hover {
  color: var(--hrd-primary);
  padding-left: 0.25rem;
}

/* 中部：Logo、搜索、成本测算 */
.footer-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--hrd-border);
}

.footer-logo img {
  display: block;
  max-height: 2.75rem;
  width: auto;
}

.footer-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 13.75rem;
  height: 2.5rem;
  background: #f5f5f5;
  border-radius: 1.25rem;
  padding: 0 0.75rem 0 2.5rem;
}

.footer-search > .iconfont {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #999;
}

.footer-search input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: #1a1a1a;
  outline: none;
}

.footer-search input::placeholder {
  color: #999;
}

.footer-search button {
  display: none;
}

/* 版权信息 */
.footer-bottom {
  padding: 1.25rem 0 1.75rem;
}

.footer-bottom p {
  font-size: 0.75rem;
  color: #999;
  margin: 0;
  line-height: 1.6;
}

/* 锁定时禁止底层滚动 */
body.drawer-open,
body.search-open {
  overflow: hidden;
}

.common{
  padding: 7.5rem 0px;
}
.commonB{
  padding: 0rem 0px 7.5rem;
}
.commonQ{
  padding: 5.0rem 5.0rem;
  background-color: var(--hrd-bg-gray);
}

.line{
  height: 0.125rem;
  border-top: 0.1875rem solid #e6e6e6;
}
.line::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 0.125rem;
  background-color: #e6e6e6;
}

/* 响应式适配 */
@media (max-width: 1199.98px) {
  .main-nav .nav-list {
    gap: 1.5rem;
  }
}

@media (max-width: 1023px) {
  :root {
    --hrd-header-h: 5rem;
  }

  .main-nav,
  .header-actions,
  .btn-cost,
  .search-toggle .search-label {
    display: none !important;
  }

  .header-logo img {
    max-height: 2.375rem;
  }

  .menu-trigger {
    width: 2.5rem;
    height: 2.5rem;
  }

  .menu-trigger .bar {
    width: 1rem;
  }

  .header-right {
    gap: 0;
  }
  .commonB{
    padding: 0rem 0px 3.5rem;
  }
  /* 手机/平板端：搜索按钮简化为纯图标 */
  .search-toggle {
    width: 2.5rem;
    height: 2.5rem;
    min-width: auto;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border-radius: 50%;
    color: var(--hrd-text);
  }
  .search-toggle .iconfont {
    font-size: 1.5rem;
  }

  .site-drawer {
    max-width: 26.25rem;
  }

  .drawer-panel {
    padding: 4rem 1.75rem 2rem 2.5rem;
  }

  .drawer-menu-link {
    font-size: 1.5rem;
    margin-bottom: 1.0rem;
  }

  .drawer-close {
    width: 3rem;
    height: 3rem;
    top: 2.0rem;
    right: .5rem;
  }

  .footer-top {
    flex-direction: column;
    gap: 2.5rem;
  }

  .footer-brand {
    flex: 0 0 auto;
  }

  .footer-links {
    max-width: none;
    gap: 1.25rem;
  }

  /* 平板：内页灰色内容盒（news/product/contact 共用）收窄留白（桌面 80px → 平板 48px/32px） */
  .commonQ {
    padding: 3rem 2rem;
  }

  /* 平板：页脚大标题/栏目标题收窄（桌面 40px 过大） */
  .footer-slogan {
    font-size: 1.75rem;
  }
  .footer-col h4 {
    font-size: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .site-drawer {
    max-width: 100%;
  }
  .drawer-panel {
    padding: 4rem 1.25rem 1.75rem 1.75rem;
  }
  .drawer-menu-link {
    font-size: 1.25rem;    
    margin-bottom: 0.85rem;
  }
  .drawer-footer-top {
    gap: 0.5rem;
  }
  .drawer-slogan strong{ font-size: 1.125rem;}
  .drawer-slogan p {
    font-size: 0.875rem;
    letter-spacing: 0rem;
    margin-bottom: 0;
  }
  .drawer-qr {
    flex: 0 0 auto;
    width: 6.85rem;
  }
  .site-footer {
    padding-top: 2.5rem;
  }
  .footer-slogan {
    font-size: 1.375rem;
  }
  .footer-contact {
    flex-direction: column;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: 1.5rem 1rem;
  }
  .footer-col {
    flex: 0 0 calc(50% - 0.5rem);
  }
  .footer-mid {
    /* 手机端保持一行：Logo 左 + 搜索右 */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem 0;
  }

  .footer-logo img {
    max-height: 2.25rem;
  }

  .footer-search {
    flex: 1;
    width: auto;
    max-width: 13.75rem;
    height: 2.375rem;
  }
}
.msg-page {
  background:
    linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)),
    url('../images/msg.jpg') no-repeat center center / cover;
}

/* 左侧文案 */
.msg-text {
  padding-top: 0.5rem;
}

.msg-title {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: #111;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.msg-subtitle {
  font-size: 1.25rem;
}

/* 右侧表单 */
.msg-form {
  width: 100%;
}

.msg-form-group {
  margin-bottom: 0.875rem;
}

.msg-form-group:last-of-type {
  margin-bottom: 1.125rem;
}

.msg-input,
.msg-select,
.msg-textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.msg-input,
.msg-select {
  height: 3.125rem;
  padding: 0 1rem;
}

.msg-textarea {
  min-height: 7.5rem;
  padding: 0.875rem 1rem;
  resize: vertical;
  line-height: 1.6;
}

.msg-input::placeholder,
.msg-textarea::placeholder {
  color: #999;
}

.msg-input:focus,
.msg-select:focus,
.msg-textarea:focus {
  border-color: #005bac;
  box-shadow: 0 0 0 0.1875rem rgba(0, 91, 172, 0.08);
}

/* 下拉箭头 */
.msg-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a2b48' d='M6 7.5L.5 2 1.8.7 6 4.9 10.2.7l1.3 1.3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.msg-select:invalid {
  color: #999;
}

.msg-btn {
  display: block;
  width: 100%;
  height: 3.125rem;
  line-height: 3.125rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: var(--ab-blue);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.msg-btn:hover {
  background: #003a6e;
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 74, 141, 0.25);
}

.msg-btn:active {
  transform: translateY(0);
}

/* 响应式：平板及以下单列居中 */
@media (max-width: 991.98px) {
  .msg-page {
    padding: 4rem 1.5rem;
  }

  .msg-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 32.5rem;
  }

  .msg-text {
    text-align: center;
  }

  .msg-subtitle {
    max-width: none;
  }
}

@media (max-width: 575.98px) {
  .msg-page {
    padding: 3rem 1rem;
  }

  .msg-title {
    font-size: 1.75rem;
  }

  .msg-subtitle {
    font-size: 0.875rem;
  }

  .msg-input,
  .msg-select {
    height: 3rem;
  }

  .msg-btn {
    height: 3rem;
    line-height: 3rem;
    font-size: 0.9375rem;
  }
}


/* =========================================================
 * 返回顶部浮动按钮（公共组件，由 footer.html 注入到所有页面）
 * 显示/隐藏与点击逻辑见 common.js：
 *   .scrollTop > 300 时加 .show；点击 .float-btn.top 平滑回顶
 * ========================================================= */
.float-btn {
  position: fixed;
  right: 1.0rem;
  bottom: 2.0rem;
  z-index: 990;
  width: 3.0rem;
  height: 3.0rem;
  border-radius: 50%;
  background: #142b91;          /* 项目主蓝，与按钮/强调一致 */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.375rem 1.25rem rgba(20, 43, 145, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background-color .2s ease;
  cursor: pointer;
}
/* 滚动超过 300px 后由 common.js 添加 .show 才显示 */
.float-btn.top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.float-btn.top:hover {
  background: #0f2180;          /* 主蓝 hover 深态 */
  color: #ffffff;
}
.float-btn.top .iconfont {
  font-size: 1.375rem;          /* 字体图标大小，匹配 46px 圆形按钮 */
  line-height: 1;
}

/* 移动端：缩小并贴近右下角 */
@media (max-width: 575.98px) {
  .float-btn {
    right: 1rem;
    bottom: 1rem;
    width: 2.625rem;
    height: 2.625rem;
  }
}

/* =========================================================
 * 全局响应式细节补强（可读性 / 间距 / 触控）
 * 说明：<1024px 时 html 根字号已调整为 14px（原 10px 偏小），
 *       正文随 1rem 自动为 14px，标题/正文 rem 层级与桌面保持同比例；
 *       这里仅收紧行距与留白，并对少数会被根字号放大的元素做 px 覆盖。
 * ========================================================= */

/* 平板及以下：收紧正文行距（根字号 14px 下 1.875 偏松） */
@media (max-width: 1023.98px) {
  body {
    line-height: 1.7;
  }
}

/* 手机：进一步收紧行距与间距 */
@media (max-width: 767.98px) {
  body {
    line-height: 1.65;
  }

  /* 内页灰色内容盒（news/product/contact 共用）收紧左右留白 */
  .commonQ {
    padding: 2rem 1.125rem;
  }

  /* 通用 section 上下留白收紧 */
  .common {
    padding: 3rem 0;
  }

  /* 页脚栏目标题：2.5rem 会被根字号放大，用 px 覆盖 */
  .footer-col h4 {
    font-size: 1.125rem;
  }

  /* 触控友好：关键交互按钮不小于 44px */
  .menu-trigger {
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (max-width: 575.98px) {
  .commonQ {
    padding: 1.5rem 0.875rem;
  }
}

/* ===== 抽屉菜单语言切换（移动端） ===== */
.drawer-lang {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  margin-top: 1rem;
  border-top: 1px solid var(--hrd-border);
}
.drawer-lang__item {
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--hrd-text);
  border: 1px solid var(--hrd-border);
}
.drawer-lang__item:hover {
  color: var(--hrd-primary);
  border-color: var(--hrd-primary);
}
.drawer-lang__item.active {
  background: var(--hrd-primary);
  color: #fff;
  border-color: var(--hrd-primary);
}