/* V2 PC Header Override Styles */

/* 
 * 强制调整布局为 V2 规范，使用 rem 单位 
 * 此文件仅在配置了 V2 的页面（例如 home）加载 
 */
 .tsingoal-group {display: none;}
.sep-header .h-tops {height: 2.5rem;background-color: #E7F5FF;}
.sep-header .sep-searchs-boxs,.bpp-login-boxs { height: 2.5rem;line-height: 2.5rem;margin-right: 0;display: flex;}
.bpp-login-boxs span {line-height: 2.5rem;font-size: .75rem;}
.sep-header .sep-container {max-width: 95rem;}
.sep-header,.tops-hes {height: 7.5rem;}
.sep-header .logo {line-height: 5rem;}
.sep-mainnav>.sep-container>.logo img {    
   width: 9.4375rem !important;
   max-width: 9.4375rem;
   height: 2.5rem;
}
.sep-mainnav {height: 5rem;}
.sep-mainnav>.sep-container>ul>li>a, .sep-mainnav>.sep-container>ul>li .a-title {
    line-height: 5rem;
}.sep-mainnav .b-shadow {display: none!important;}
.sep-container>ul {min-width: auto!important;}
.sep-mainnav>.sep-container>ul>li {line-height: 5rem; margin: 0 1.25rem;}
.sep-mainnav>.sep-container>ul>li>a,.sep-mainnav>.sep-container>ul>li>span {font-size: 1rem;}
.sep-mainnav>.sep-container>ul>li>a i, .sep-mainnav>.sep-container>ul>li .a-title i {
   width: .5rem;
   height: .75rem;
   display: inline-block;
   font-size: .75rem;
   line-height: .75rem;
   right: -0.75rem;
   margin-top: -0.375rem;
}
.sep-mainnav>.sep-container>ul>li>a .i-lines.ons, .sep-mainnav>.sep-container>ul>li .a-title .i-lines.ons {
   width: calc(100% + .9375rem);
   height: .25rem;
}
.sep-mainnav ul li>.pro-boxs {padding: 1.25rem 1.25rem .9375rem;box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.1);}
.sep-mainnav ul li>.pro-boxs .p-lists {width: calc(20% - 2.5rem);position: relative;margin: 0 1.25rem;min-width: 160px;}
.sep-mainnav ul li>.pro-boxs .titles-a {color: #4c4c4c;line-height: 1.5rem;padding-bottom: .375rem;border-bottom: .0625rem solid #ccc;margin-bottom: .625rem;}
.sep-mainnav ul li>.pro-boxs .boxs {margin: 0 -1.25rem;}
/* .sep-mainnav ul li>.pro-boxs .ul-lists {line-height: 1.375rem;font-size: .75rem;} */

/* ==========================================
 * Contact (联系我们) 按钮专属定制
 * ========================================== */
.sep-mainnav > .sep-container > ul > li.contact {
    display: inline-flex;
    align-items: center;
    height: 5rem;
    margin-left: 1.875rem;
    margin-right: 0;
}

.sep-mainnav > .sep-container > ul > li.contact > a {
    position: relative; /* 为伪元素提供定位基准 */
    z-index: 1; /* 保证文字显示在最上层 */
    color: #FFFFFF !important;
    font-size: 1rem; /* 16px */
    line-height: 1.1875rem !important; /* 19px */
    font-family: "Gotham-Bold", sans-serif;
    font-weight: normal;
    background: linear-gradient(139deg, #0C88D7 0%, #64D79B 100%);
    box-shadow: 0.125rem 0.0625rem 0.3125rem 0 rgba(0, 74, 131, 0.3); /* 2px 1px 5px 0px */
    border-radius: 1.125rem; /* 18px */
    padding: 0.625rem 1rem; /* 10px 16px */
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

/* 利用前置伪元素实现 Hover 渐变的滑过渡 */
.sep-mainnav > .sep-container > ul > li.contact > a::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit; /* 完美继承父级圆角 */
    background: linear-gradient(139deg, #6DC6FF 0%, #ADFFD4 100%);
    z-index: -1;
    opacity: 0; /* 默认透明不可见 */
    transition: opacity 0.4s ease; /* 顺滑的 0.4s 渐变效果 */
}

/* 利用后置伪元素实现 Active 渐变的平滑过渡 */
.sep-mainnav > .sep-container > ul > li.contact > a::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    background: linear-gradient(139deg, #034EA6 0%, #3BC877 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.1s ease; /* 点击事件响应更快 */
}

/* 隐藏可能自带的下滑线 */
.sep-mainnav > .sep-container > ul > li.contact > a .i-lines {
    display: none !important;
}

/* 鼠标悬停 (Hover) */
.sep-mainnav > .sep-container > ul > li.contact > a:hover::before {
    opacity: 1; /* 悬停时渐变层逐渐显露出 */
}
.sep-mainnav > .sep-container > ul > li.contact > a:hover {
    color: #FFFFFF !important;
}
.sep-mainnav > .sep-container > ul > li.contact > a:hover::after {
    opacity: 0;
}

/* 鼠标点击 (Active) */
.sep-mainnav > .sep-container > ul > li.contact > a:active::after {
    opacity: 1; /* 按下时更深的渐变层浮出 */
}
.sep-mainnav > .sep-container > ul > li.contact > a:active {
    color: #FFFFFF !important;
}

/* ==========================================
 * h-tops 顶部栏左侧宣传语 (V2)
 * ========================================== */
.v2-htops-promo {
    font-size: 0.875rem; /* 14px */
    line-height: 1.0625rem; /* 17px */
    color: #323232;
    font-family: "Gotham-Book", sans-serif;
    display: inline-flex;
    align-items: center;
    height: 2.5rem; /* 同步 h-tops 高度实现垂直居中 */
}

/* 带有下划线的渐变文字处理 */
.v2-htops-promo .t-gradient {
    font-family: "Gotham-Bold", sans-serif;
    font-size: .75rem;
    margin: 0 0.25rem; /* 独立拉开词间距 */
    
    /* 实现文字渐变的核心 CSS */
    background: linear-gradient(90deg, #007AFF 0%, #CF89FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    text-decoration: none; /* 屏蔽默认下划线，改用精确的 border 控制颜色 */
    position: relative;
    transition: all 0.3s ease;
}

/* 优雅地控制渐变下划线 */
.v2-htops-promo .t-gradient::after {
    content: '';
    position: absolute;
    bottom: -1px; /* 紧贴字符底端 */
    left: 0;
    right: 0;
    height: 0.0625rem; /* 1px 下划线 */
    background: linear-gradient(90deg, #007AFF 0%, #CF89FF 100%);
}

/* 悬停时的渐变切换 */
.v2-htops-promo .t-gradient:hover {
    background: linear-gradient(90deg, #004EBB 0%, #B848D4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.v2-htops-promo .t-gradient:hover::after {
    background: linear-gradient(90deg, #004EBB 0%, #B848D4 100%);
}

/* ==========================================
 * h-tops 右侧功能区 (Login 和 Search 定制)
 * 需求：Login在左，Search在右，11px 竖线分隔，白底圆图标
 * ========================================== */
.sep-header .texts-rights {
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
}

/* 隐藏旧版多余的自带竖线和自带图标 */
.bpp-login-boxs > i, 
.bpp-login-boxs a > img,
.sep-searchs-boxs > i, 
.sep-searchs-boxs > img {
    display: none !important;
}

/* 重构两大按钮的主容器 */
.bpp-login-boxs {
    display: inline-flex;
    align-items: center;
    order: 1; /* Login 排在第一位 */
}

/* 连接的默认虚线取消并设置为 Flex 承载 Icon */
.bpp-login-boxs a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.sep-searchs-boxs {
    display: inline-flex;
    align-items: center;
    order: 2; /* Search 排在第二位 */
    cursor: pointer;
}

/* 通用文字文本排版 */
.bpp-login-boxs span,
.sep-searchs-boxs {
    font-size: 0.75rem !important; /* 12px */
    color: #546175 !important;
    line-height: 0.875rem !important; /* 14px */
    font-family: "Gotham-Medium", sans-serif !important;
    text-transform: capitalize !important; /* 覆盖原始的大写 .upps 样式，复原首字大写 */
    transform: translateY(0);
}

/* 构建 Login 专属 24x24 的白色圆底 Icon */
.bpp-login-boxs a::before {
    content: '';
    display: block;
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    background-color: #FFFFFF;
    border-radius: 50%;
    margin-right: 0.25rem; /* 距文字 4px */
    
    background-image: url(/uploads/image/version/Login-normal.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 55%; /* 垂直居中自适应留白 */
    transition: background-image 0.3s ease;
}

/* Login hover：图标变蓝 + 文字变蓝 */
.bpp-login-boxs a:hover::before {
    background-image: url(/uploads/image/version/Login-hover.svg);
}
.bpp-login-boxs a:hover span {
    color: #008CFF !important;
}

/* 位于中间的分割竖线，紧跟在 Login 后面 */
.bpp-login-boxs::after {
    content: '';
    display: block;
    width: 0.0625rem; /* 1px 粗细 */
    height: 0.875rem; /* 高度 14px */
    background-color: #D2D2D2;
    margin: 0 0.6875rem; /* 各距左右 11px (11px=0.6875rem) */
}

/* 构建 Search 专属 24x24 的白色圆底 Icon */
.sep-searchs-boxs::before {
    content: '';
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #FFFFFF;
    border-radius: 50%;
    margin-right: 0.25rem; /* 距文字 4px */
    
    background-image: url(/uploads/image/version/Search-normal.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 55%;
    transition: background-image 0.3s ease;
}

/* Search hover：图标变蓝 + 文字变蓝 */
.sep-searchs-boxs:hover::before {
    background-image: url(/uploads/image/version/Search-hover.svg);
}
.sep-searchs-boxs:hover {
    color: #008CFF !important;
}

/* ==========================================
 * V2 Header 滚动交互与透明悬浮特效
 * 配置依托：如果在 home 等特殊页面，会有 body.is-transparent-header 标识
 * 交互依托：v2-header-override.js 抛出的 .is-solid、.is-hidden、分栏类名
 * ========================================== */

/* 给全页头赋予统一的动画过渡属性 */
.sep-header {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ---------- 1. 主视觉标识位：透明悬浮状态 ---------- */
/* 强制抹去顶部多余占位格，使 Header 失去对下文元素的排挤体积，完全重叠在 Banner 之上 */
body.is-transparent-header .tops-hes {
    height: 0 !important;
    display: none !important;
}

/* 首页 V2：整块头固定于视口顶，高度随 h-tops / 主导航区折叠变化 */
body.is-transparent-header .sep-header.is-v2-home-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: auto !important;
    min-height: 0;
    overflow: visible;
}

/* 主导航 + 搜索条包裹层：translateY 收起，保留 overflow 可见以便下拉与展开搜索 */
body.is-transparent-header .sep-header.is-v2-home-header .v2-header-sticky-main {
    overflow: visible;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), margin-top 0.15s ease-out;
}

/* 越过 banner 后向下滚：主导航整体上移隐藏 */
body.is-transparent-header .sep-header.is-v2-home-header.v2-header-main-hidden .v2-header-sticky-main {
    transform: translateY(-110%);
    pointer-events: none;
}

/* h-tops：随滚动由 JS 设置 translate3d，此处仅做过渡与性能提示 */
body.is-transparent-header .sep-header.is-v2-home-header .h-tops {
    will-change: transform;
    transition: transform 0.15s ease-out;
}

body.is-transparent-header .sep-header.is-v2-home-header .h-tops.v2-htops-offscreen {
    pointer-events: none;
}

/* 处于纯页面顶端时，大外层强制透明化（注：使用 :not(.is-solid) 以规避优先级覆盖 JS 的问题） */
body.is-transparent-header .sep-header:not(.is-solid) {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Hover: 当鼠标触碰透明的 Header 时，瞬间恢复实体形态以便查看明细 */
body.is-transparent-header .sep-header:hover {
    background-color: #FFFFFF !important;
    box-shadow: 0px 2px 6px 0px rgba(29, 44, 62, 0.1) !important;
}

body.is-transparent-header .sep-header.is-v2-home-header.v2-header-main-hidden:hover {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ---------- 2. 状态管理器：因页面滚动诞生的状态 ---------- */
/* Solid: 白底顶栏（离开页顶或在 banner 内滚动等） */
.sep-header.is-solid {
    background-color: #FFFFFF !important;
    box-shadow: 0px .125rem .25rem 0px rgba(29, 44, 62, 0.1) !important;
}

/* Hidden: 非分栏首页沿用整块 translateY 隐藏 */
.sep-header.is-hidden {
    transform: translateY(-100%) !important;
}

body.is-transparent-header .sep-header.is-v2-home-header.is-hidden {
    transform: none !important;
}