/* ==========================================================================
   顶部导航栏（#header_main）样式 —— 唯一事实来源
   ==========================================================================
   本文件集中了原先散落在以下 4 个文件中的 header 相关规则：
     style.min.css / home.min.css / other.min.css / responsive.min.css
   这些规则已从上述文件中移除，调整顶部导航请只改本文件。

   分区顺序 = 原文件的级联顺序，请勿重排：
     1 骨架与吸顶  2 主导航  3 汉堡按钮  4 Logo
     5 容器与首页配色  6 内页配色  7 媒体查询

   相关但不在本文件（如需联动修改请一并调整）：
     .otherBannerHeight  other.min.css  —— 内页 banner 的 padding-top:70px
                                            是为本文件 #site-header-inner 的
                                            height:70px 让位的，改 header 高度时需同步
     js/main.js main.js  —— 滚动时给 #header_main 加/去 is-fixed / is-small
   ========================================================================== */

/* ── 1. 骨架与吸顶 ── 来源: style.min.css ─────────────────────────────── */

header {
  padding-right: 0 !important
}

.header_1 {
  height: auto;
  width: 100%
}

.header_1,
.header_1.is-fixed {
  position: fixed;
  top: 0;
  opacity: 1;
  left: 0;
  width: 100%;
  z-index: 9999;
  border: none;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease
}

.header_1.is-fixed.is-small {
  top: 0;
  opacity: 1;
  visibility: visible
}

/* ── 2. 主导航 ── 来源: style.min.css ─────────────────────────────────── */

#main-nav {
  width: calc(100% - 300px);
  max-width: 880px
}

#main-nav ul {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: space-around
}

#main-nav ul li {
  position: relative;
  list-style: none
}

#main-nav>ul>li {
  float: left;
  padding: 0 36px
}

#main-nav>ul>li>a {
  position: relative;
  font-size: 18px;
  line-height: 26px;
  display: block;
  color: #fff
}

.otherHeaderBg #main-nav>ul>li>a {
  color: #333;
  font-size: 18px;
}

#main-nav>.menu>li.menu-item-has-children>a::after {
  content: "\f107";
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%)
}


/* ── 3. 汉堡按钮（移动端菜单）── 来源: style.min.css ─────────────────── */

.mobile-button {
  display: none;
  width: 26px;
  height: 26px;
  background-color: transparent;
  cursor: pointer;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  position: relative
}

.mobile-button span,
.mobile-button::after,
.mobile-button::before {
  background-color: #fff;
  -webkit-transition: all ease .3s;
  -moz-transition: all ease .3s;
  transition: all ease .3s
}

.mobile-button::after,
.mobile-button::before {
  content: "";
  position: absolute;
  top: 0;
  height: 3px;
  width: 100%;
  left: 0;
  top: 50%;
  color: #fff;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%
}

.mobile-button span {
  position: absolute;
  width: 100%;
  height: 3px;
  left: 0;
  top: 50%;
  overflow: hidden;
  text-indent: 200%
}

.mobile-button::before {
  -webkit-transform: translate3d(0, -7px, 0);
  -moz-transform: translate3d(0, -7px, 0);
  transform: translate3d(0, -7px, 0)
}

.mobile-button::after {
  -webkit-transform: translate3d(0, 7px, 0);
  -moz-transform: translate3d(0, 7px, 0);
  transform: translate3d(0, 7px, 0)
}

.mobile-button.active span {
  opacity: 0
}

.mobile-button.active::before {
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  -moz-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg)
}

.mobile-button.active::after {
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  -moz-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg)
}

/* ── 4. Logo 尺寸 ── 来源: style.min.css ──────────────────────────────── */

.logoImg {
  width: 260px;
}

.otherlogo {
  width: 280px;
}

/* ── 5. 容器与首页配色 ── 来源: home.min.css ──────────────────────────── */
/* #site-header-inner 是全站 header 的容器，不只在首页生效 */

#site-header-inner {
  max-width: 1380px;
  width: 100%;
  padding: 0 3% 0 3%;
  margin: 0 auto;
  height: 70px;
  justify-content: space-between;
  align-items: center;
  position: relative
}

/* .otherHeaderBgSpecial = 首页 header（压在轮播图上，透明背景） */
.otherHeaderBgSpecial {
  background: transparent !important;
}

.header_1.is-fixed.otherHeaderBgSpecial {
  background: linear-gradient(174deg, #DEFFF8 0%, #FFFFFF 100%) !important;
  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, .3);
}

.otherHeaderBgSpecial #site-header-inner {
  max-width: 1600px;
  padding: 0 8% 0 30px;
}

/* ── 6. 内页配色 ── 来源: other.min.css ───────────────────────────────── */

/* .otherHeaderBg = 内页 header（白底） */
.otherHeaderBg {
  background: #fff
}

.header_1.is-fixed.otherHeaderBgSpecial #main-nav>ul>li>a {
  color: #333;
}

.header_1.is-fixed.otherHeaderBgSpecial #main-nav>ul>.current-menu-item>a,
#main-nav>ul>.current-menu-item>a,
.otherHeaderBg #main-nav>ul>.current-menu-item>a,
#main-nav>ul>li>a:hover {
  color: #10ac8c;
  border-bottom: 2px solid #10ac8c
}

.mobile-button::after,
.otherHeaderBg .mobile-button span,
.otherHeaderBg .mobile-button::before {
  background-color: #10ac8c
}

.header_1 .mobile-button span,
.header_1.is-fixed .mobile-button::after,
.header_1.is-fixed .mobile-button::before {
  background-color: #10AC8C !important;
}

/* ── 7. 媒体查询 ─────────────────────────────────────────────────────── */
/* 顺序：@1366 → @751(min) → @991 → @600 → @890 → @750，勿重排 */

/* ≤1366 菜单项内距收窄 —— 来源: responsive.min.css */
@media only screen and (max-width: 1366px) {
  #main-nav>ul>li {
    padding: 14px 4px
  }
}

/* ≥751 桌面端强制显示横向菜单 —— 来源: responsive.min.css */
@media only screen and (min-width: 751px) {
  #main-nav {
    display: block !important
  }
}

/* ≤991 字号与 logo 缩小 —— 来源: style.min.css */
@media only screen and (max-width: 991px) {
  #main-nav>ul>li>a {
    font-size: 16px;
  }
  .logoImg {
    width: 240px;
  }
}

/* ≤600 首页容器内距（原 home.min.css 两个同名 600px 块合并，结果等价） */
@media only screen and (max-width: 600px) {
  .otherHeaderBgSpecial #site-header-inner {
    max-width: 1500px;
    padding: 0 4%;
  }
}

/* ≤890 内页菜单字号 —— 来源: other.min.css */
@media only screen and (max-width: 890px) {
  .otherHeaderBg #main-nav>ul>li>a {
    font-size: 16px;
  }
}

/* ≤750 移动端：logo 缩小 + 汉堡按钮启用 + 下拉面板 + 全白配色 */
@media only screen and (max-width: 750px) {
  /* logo —— 来源: style.min.css */
  .logoImg,
  .otherlogo {
    width: 220px;
  }

  /* 汉堡按钮显示 —— 来源: responsive.min.css */
  .mobile-button {
    display: block !important
  }

  /* 下拉面板 —— 来源: responsive.min.css
     top 与 #site-header-inner 的 height 配对，改 header 高度时需同步 */
  #main-nav {
    position: absolute;
    width: 100%;
    top: 68px;
    left: 0;
    background: #06a786;
    z-index: 20;
    display: none;
    box-shadow: 0 3px 16px rgba(47, 83, 109, .12)
  }

  #main-nav .menu {
    display: block;
    width: 100%
  }

  #main-nav .menu li {
    width: 100%;
    padding: 14px
  }

  #main-nav .menu li a {
    display: inline-block
  }

  /* 文字与下划线转白 —— 来源: other.min.css */
  .otherHeaderBg #main-nav>ul>li>a {
    color: #fff !important
  }
  .header_1.is-fixed.otherHeaderBgSpecial #main-nav>ul>.current-menu-item>a,
  #main-nav>ul>.current-menu-item>a,
  #main-nav>ul>li>a:hover {
    color: #fff !important;
    border-bottom: 2px solid #fff
  }
  .header_1.is-fixed.otherHeaderBgSpecial #main-nav>ul>li>a {
    color: #fff !important;
  }
  .otherHeaderBgSpecial #main-nav>ul>.current-menu-item>a,
  .otherHeaderBg #main-nav>ul>.current-menu-item>a {
    color: #fff !important;
    border-bottom: 2px solid #fff
  }
}