/* page */
.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0;
   height: 92px;
}

.logo {
   display: flex;
   align-items: center
}

.logo img {
   display: none;
   height: 50px;
   margin-right: 16px;
   transition: all .3s linear;
   width: 206px;
   height: 50px;
}

.logo img.gray {
   display: block;
}

/* Header 主题支持：浅色/暗色 */
.site-header {
   transition: background .22s ease, color .22s ease;
}

.site-header .lang-switch .lang-btn {
   padding: 0 4px;
   border: none;
   border-radius: 4px;
   font-size: 14px;
   color: #fff;
   background-color: transparent;
}

.site-header.sticky .nav a {
   color: var(--text-color);
}

.site-header.sticky .nav a:hover,
.site-header.sticky .nav a.active {
   color: var(--theme-primary);
}


/* 吸顶效果（优先使用 CSS sticky；兼容性回退到 JS 添加 .sticky） */
.site-header {
   position: fixed;
   left: 0;
   top: 0;
   z-index: 1100;
   width: 100%;
   /* position: -webkit-sticky; */
   /* position: sticky; */
   top: 0;
   z-index: 1100;
   /* -webkit-backdrop-filter: blur(6px); */
   /* backdrop-filter: blur(6px); */
   padding: 0 100px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.08);
   transition: background .4s ease, box-shadow .4s ease, transform .6s ease;
}

.site-header.sticky {
   background: rgba(255, 255, 255, 0.96);
   box-shadow: 0 6px 20px rgba(16, 40, 70, 0.12);
   border-bottom-color: rgba(0, 0, 0, 0.06);
   /* JS 回退支持：当浏览器不支持 sticky 时，.sticky 变为 fixed */
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   color: var(--text-color);
}

body.theme-dark .site-header.sticky {
   background: rgba(5, 12, 18, 0.85);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4)
}

.site-header:hover,
.site-header.dark {
   background-color: #fff;
}

.site-header:hover .logo img.gray,
.site-header.dark .logo img.gray {
   display: none;
}

.site-header:hover .logo img.color,
.site-header.dark .logo img.color {
   display: block;
}

.site-header:hover .contact-phone i,
.site-header.dark .contact-phone i {
   color: var(--text-color);
}

.site-header:hover .lang-switch .lang-btn,
.site-header.dark .lang-switch .lang-btn {
   color: var(--text-color);
}

.site-header:hover .search-area>button,
.site-header.dark .search-area>button {
   color: var(--text-color);
}

.site-header.hidden {
   top: -100px;
}

.site-header:hover .brand-desc,
.site-header.dark .brand-desc {
   color: var(--text-color);
}

.site-header:hover .nav a,
.site-header.dark .nav a {
   color: var(--text-color);
}

.site-header:hover .nav a:hover,
.site-header.dark .nav a:hover {
   color: var(--theme-primary);
}

.site-header:hover .contact-phone a,
.site-header.dark .contact-phone a {
   color: var(--text-color);
}

.site-header .nav {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   font-weight: 500;
   text-transform: uppercase;
   margin-left: 45px;
}

.site-header .nav>li>a {
   white-space: nowrap;
   display: inline-block;
   text-align: center;
   line-height: 36px;
   height: 36px;
   padding: 0 16px;
   border-radius: 6px;
   color: #fff;
   transition: all .3s linear;
}

/* .nav a:hover,.nav a.active{font-weight: 550;color:var(--theme-primary);background-image: url('../../images/common/nav-active-bg.png');background-repeat:no-repeat; background-position: center center; background-size: auto 35px;;} */
.site-header .nav a:hover,
.site-header .nav a.active {
   color: var(--theme-primary);
}

.site-header .nav>li {
   height: 92px;
   display: flex;
   align-items: center;
}

.dropdown-content.pb60 {
   padding-bottom: 60px;
}

.dropdown-content {
   display: block;
   position: absolute;
   left: 0;
   top: 91px;
   width: 100%;
   overflow: hidden;
   background-color: rgba(255, 255, 255, 1);
   transition: all 0.3s ease-out;
   transform: rotateX(-90deg);
   transform-origin: 0 0;
   opacity: 0;
   visibility: hidden;
}

.dropdown-content.products-dropdown-content {
   background-color: #f8fafb;
}

.dropdown-content .dropdown-content-inner {
   width: var(--max-width);
   margin: 0 auto;
}

.dropdown-content .dropdown-content-inner .dropdown-list {
   display: flex;
   align-items: flex-start;
}

.dropdown-content .dropdown-content-inner .dropdown-column {
   padding: 40px 10px 20px 0;
   width: 20%;
}

.site-header .nav>li:hover .dropdown-content {
   display: flex;
   visibility: visible;
   opacity: 1;
   transform: rotateX(0);
}

.dropdown-list.border-bottom {
   border-bottom: 1px solid #e8edef;
}

.dropdown-column h4 {
   margin-bottom: 10px;
   font-size: 15px;
}

.dropdown-column a {
   line-height: 26px;
   font-size: 13px;
   color: rgb(102, 102, 102);
}

.dropdown-content .dropdown-content-body {
   width: 100%;
   display: flex;
   align-items: flex-start;
}

.dropdown-content .dropdown-content-body .dropdown-sidebar {
   position: relative;
   text-align: right;
   padding: 50px 70px;
   width: 38%;
   /* border-right: 1px solid var(--theme-primary); */
}

.dropdown-content .dropdown-content-body .dropdown-sidebar::after {
   position: absolute;
   content: "";
   display: block;
   width: 2px;
   height: 120px;
   right: 0;
   top: 50px;
   background-color: var(--theme-primary);
}

.dropdown-content .dropdown-content-body .dropdown-sidebar p {
   margin-top: 10px;
   line-height: 26px;
}

.dropdown-content .dropdown-content-body .dropdown-main {
   width: 62%;
   padding: 50px 70px 80px 50px;
   align-items: flex-start;
   display: flex;
   border-left: 1px solid #ededed;
}

.dropdown-content .dropdown-content-body .dropdown-main .list-category {
   width: 280px;
   margin-right: 80px;
}

.dropdown-content .dropdown-content-body .dropdown-main .list-category>li {
   width: 100%;
   height: 40px;
   position: relative;
   overflow: hidden;
   padding-right: 20px;
}

.dropdown-content .dropdown-content-body .dropdown-main .list-category a {
   display: flex;
   width: 100%;
   height: 40px;
   position: absolute;
   align-items: center;
   padding: 0 18px;
   left: 0;
   top: 0;
   z-index: 2;
   border-radius: 4px;
}

.dropdown-content .dropdown-content-body .dropdown-main .list-category li i {
   display: none;
}

.dropdown-content .dropdown-content-body .dropdown-main .list-category li+li {
   margin-top: 8px;
}

.dropdown-content .dropdown-content-body .dropdown-main .list-category li:hover a,
.dropdown-content .dropdown-content-body .dropdown-main .list-category li.active a {
   color: #fff;
}

.dropdown-content .dropdown-content-body .dropdown-main .list-category li::before {
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   background: var(--theme-primary);
   position: absolute;
   bottom: 0;
   z-index: 1;
   border-radius: 4px;
   transition: all .4s ease;
   /* left: 200%; */
   width: 0;
   left: 0;
}

.dropdown-content .dropdown-content-body .dropdown-main .list-category li:hover::before,
.dropdown-content .dropdown-content-body .dropdown-main .list-category li.active::before {
   left: 0;
   width: 100%;
}

/* .dropdown-content .dropdown-content-body .dropdown-main .list-category li:hover::after{
   content: ">";
   display: block;
   width: 20px;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
   color: #fff;
} */
.dropdown-content .dropdown-content-body .dropdown-main .list-category li i {
   display: block;
   width: 20px;
   top: 50%;
   right: 5px;
   transform: translateY(-50%);
   color: #fff;
   position: absolute;
   z-index: 3;
}

.dropdown-content .dropdown-content-body .dropdown-main .list-image {
   width: 420px;
   height: 280px;
   overflow: hidden;
}

.dropdown-content .dropdown-content-body .dropdown-main .list-image img {
   width: 100%;
   height: 100%;
}

/* header 左侧品牌文案 */
.header-left {
   display: flex;
   align-items: center;
}

.header-left .brand-logo img {
   width: 206px;
   height: 49px;
}

.brand-text {
   line-height: 1.25;
   padding-left: 18px;
   border-left: 1px solid #808080;
}

.brand-name {
   font-size: 18px;
   font-weight: 700;
   color: var(--theme-primary)
}

.brand-desc {
   font-size: 12px;
   color: #fff;
}

.site-header.sticky .brand-desc {
   color: var(--text-color);
}

/* header 右侧：电话、搜索、语言、主题 */
.header-right {
   display: flex;
   align-items: center;
   gap: 14px
}

.contact-phone a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #fff;
   font-weight: 600
}

.contact-phone i {
   color: #fff;
}

.site-header.sticky .contact-phone a {
   color: var(--text-color)
}


/* 语言切换 */
.lang-switch {
   display: flex;
   align-items: center;
   color: var(--theme-primary)
}

.lang-switch .active {
   background: var(--theme-primary);
   color: #fff;
   border-color: var(--theme-primary)
}

.search-area {
   position: relative
}

.search-area button {
   padding: 0 4px;
   border: none;
   background: transparent;
   /* color: var(--theme-primary); */
   color: #fff;
}

.site-header.dark .search-box, .site-header:hover .search-box{
   background-color: #fff;
}
.site-header.dark .search-btn, .site-header:hover .search-btn{
   color: var(--text-color);
}

.search-box {
   position: fixed;
   left: 0;
   right: 0;
   top: 92px;
   display: none;
   gap: 8px;
   padding: 20px 20px;
   background: transparent;
   /* border: 1px solid #e6eef8; */
   border-radius: 0 0 6px 6px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
   z-index: 40;
   align-items: center;
   /* justify-content: center; */
   transition: background .22s ease, color .22s ease;
}
.search-box.show{
   display: flex;
}
.search-box.hidden{
   display: none;
}
.max-width-wrapper{
   width: var(--max-width);
   margin: 0 auto;
}
.search-wrappper{
   padding: 20px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   color: #fff;
}
.search-btn{
   color: #fff;
   padding: 0 10px;
   cursor: pointer;
}

.search-box input {
   width: 220px;
   padding: 8px;
   /* border: 1px solid #e9f2fb; */
   border: none;
   border-radius: 4px
}

.search-box .btn.secondary {
   /* border: 1px solid var(--theme-primary); */
   /* color: #fff; */
   /* background: var(--theme-primary); */
   padding: 0 15px;
}

.search-box .btn.secondary:hover {
   background: var(--theme-primary);
   color: #fff
}

.search-box input:focus {
   outline: none;
   /* border-color: var(--theme-primary);
   box-shadow: 0 6px 18px rgba(43, 134, 217, .08) */
}

.search-box.show {
   display: flex;
   align-items: center
}

/* 响应：小屏隐藏描述，压缩间距 */
@media (max-width: 900px) {
   .brand-desc {
      display: none
   }

   .contact-phone .phone-number {
      display: none
   }

   .search-box input {
      width: 140px
   }
}


/* 暗黑主题：在 body 上加 .theme-dark 类 */
body.theme-dark {
   --theme-primary: #3ab0ff;
   --text-color: #e6eef9;
   --muted-color: #98a6b6;
   background: #0f1720;
}

body.theme-dark .site-header {
   background: #081016;
   color: var(--text-color);
}

body.theme-dark .site-footer {
   background: #071018;
   color: #9fb1c8
}

body.theme-dark .nav a {
   color: var(--muted-color)
}

body.theme-dark .nav a:hover {
   color: var(--theme-primary);
   background: rgba(58, 176, 255, 0.06)
}

body.theme-dark .lang-switch .lang-btn {
   border-color: rgba(255, 255, 255, 0.06)
}


/* 主题按钮样式调整 */
#themeToggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 12px;
   border-radius: 4px;
   font-size: 14px;
   background: #f9f9f9;
   color: var(--text-color);
   border: 1px solid #e6eef8;
   transition: all .2s ease
}

#themeToggle i {
   font-size: 14px
}

#themeToggle:hover {
   background: var(--theme-primary);
   color: #fff
}

/* 常驻工具栏样式 */
.fixed-toolbar {
   position: fixed;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
   background: #fff;
   border-radius: 30px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   padding: 15px 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.toolbar-item {
   position: relative;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   /* background: #f5f5f5; */
   cursor: pointer;
   transition: all 0.3s ease;
}

.toolbar-item+.toolbar-item::after {
   content: "";
   display: block;
   width: 80%;
   height: 1px;
   transform: translateX(-50%);
   background: #e6eef8;
   position: absolute;
   left: 50%;
   top: -5px;
}

.toolbar-item:hover {
   background: var(--theme-primary);
   color: #fff;
}

.toolbar-item i {
   font-size: 18px;
   color: #666;
   transition: color 0.3s ease;
}

.toolbar-item:hover i {
   color: #fff;
}

.toolbar-item .tooltip {
   position: absolute;
   right: 60px;
   top: 50%;
   transform: translateY(-50%);
   background: #fff;
   border: 1px solid #e6eef8;
   border-radius: 6px;
   padding: 8px 12px;
   font-size: 14px;
   color: #333;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   z-index: 9000;
}

.toolbar-item:hover .tooltip {
   opacity: 1;
   visibility: visible;
}

/* 电话号码提示样式 */
#contactPhone .tooltip {
   /* background: #ff3b3b; */
   color: #fff;
   padding: 8px 15px;
   border-radius: 6px;
   /* font-weight: bold; */
}

#contactPhone:hover .tooltip {
   /* background: #ff3b3b; */
   color: #fff;
}

/* 二维码提示样式 */
#qrCode .tooltip {
   background: #fff;
   color: #333;
   border: 1px solid #e6eef8;
   text-align: center;
}

#qrCode .tooltip img {
   width: 120px;
   height: 120px;
}

/* 返回顶部提示样式 */
#backToTop .tooltip {
   background: #fff;
   color: #333;
   border: 1px solid #e6eef8;
}

/* 暗黑主题样式 */
body.theme-dark .fixed-toolbar {
   background: #1a1a1a;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.theme-dark .toolbar-item {
   background: #2d2d2d;
}

body.theme-dark .toolbar-item:hover {
   background: var(--theme-primary);
   color: #fff;
}

body.theme-dark .toolbar-item i {
   color: #ccc;
}

body.theme-dark .toolbar-item:hover i {
   color: #fff;
}

body.theme-dark .toolbar-item .tooltip {
   background: #2d2d2d;
   color: #fff;
   border: 1px solid #444;
}

body.theme-dark #contactPhone .tooltip {
   /* background: #ff3b3b; */
   color: #fff;
}

body.theme-dark #qrCode .tooltip {
   background: #2d2d2d;
   color: #fff;
   border: 1px solid #444;
}

body.theme-dark #backToTop .tooltip {
   background: #2d2d2d;
   color: #fff;
   border: 1px solid #444;
}

.site-header-placeholder {
   position: relative;
   z-index: 1000;
}