/* ===================== 全局基础样式 ===================== */
/* 1. 全局重置与基础字体/颜色 */
/* 2. 自定义字体引入 */
/* 3. 品牌色/背景色原子类 */
/* 4. 头部(header)固定布局样式 */
/* 5. 通用组件样式（tabs/按钮/容器等） */
/* 6. 自定义盒子样式（圆角/渐变/hover动效） */

/* 1. 全局重置与基础字体/颜色 */
/* html {overflow-x: hidden;} */
body {
    font-family: Roboto, HarmonyOSSans, Microsoft Yahei, Arial, sans-serif; /* 通用字体栈 */
    color: #333; /* 默认文本色 */
    font-size: 16px; /* 默认字号 */
    line-height: 28px; /* 默认行高 */
    background-color: #ffffff; /* 页面背景色 */
}

/* 2. 自定义字体引入 */
@font-face {
    font-family: 'HarmonyOSSans';
    src: url("../font/HarmonyOS_Sans_SC_Regular.woff2") format("woff2"), /* chrome 36+, firefox 39+, iOS 10+, Android 67+ */
         url("../font/HarmonyOS_Sans_SC_Regular.woff") format("woff"),   /* chrome, firefox */
         url("../font/HarmonyOS_Sans_SC_Regular.ttf") format("truetype"); /* 通用兼容 */
    font-style: normal;
    font-weight: normal;
    font-display: swap; /* 字体加载策略：优先显示系统字体，加载完成后替换 */
}

@font-face {
    font-family: 'Roboto';
    src: url("../font/Roboto-Regular.woff2") format("woff2"), /* chrome 36+, firefox 39+, iOS 10+, Android 67+ */
         url("../font/Roboto-Regular.woff") format("woff"),   /* chrome, firefox */
         url("../font/Roboto-Regular.ttf") format("truetype"); /* 通用兼容 */
    font-style: normal;
    font-weight: normal;
    font-display: swap; /* 字体加载策略：优先显示系统字体，加载完成后替换 */
}

/* 3. 品牌色/背景色原子类（主色体系） */
/* 文字色 */
.fc-primary-pale  { color: #ebf5ff; } /* 主色浅版 */
.fc-primary-light { color: #1c64f2; } /* 主色亮版 */
.fc-primary       { color: #1e429f; } /* 主色（核心品牌色） */
.fc-primary-dark  { color: #233876; } /* 主色深版 */

/* 背景色 */
.bg-primary-pale  { background-color: #ebf5ff; } /* 主色浅版 */
.bg-primary-light { background-color: #1c64f2; } /* 主色亮版 */
.bg-primary       { background-color: #1e429f; } /* 主色（核心品牌色） */
.bg-primary-dark  { background-color: #233876; } /* 主色深版 */

/* 通用链接样式 */
a:hover {
    color: #1e429f; /* 链接hover默认主色 */
    font-weight: bold;
}

/* 通用图片圆角 */
.img-radius img {
    border-radius: 8px;
}

/* 弹窗iframe圆角 */
.layui-layer-iframe,
.layui-layer-iframe .layui-layer-content iframe,
.layui-layer-iframe .layui-icon {
    border-radius: 10px;
}

/* ===================== 4. 头部(header)固定布局样式 ===================== */
/* 核心：header固定在顶部 */
.layui-header {
    position: fixed; /* 固定定位 */
    top: 0; /* 贴顶 */
    left: 0; /* 贴左 */
    right: 0; /* 贴右，宽度铺满屏幕 */
    z-index: 9999; /* 提高层级，避免被其他元素遮挡 */
    height: 60px;
    line-height: 60px;
    background: #fff; /* 白色背景，避免透明遮挡下方内容 */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影提升视觉层次 */
}

.layui-header .layui-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* PC端：logo左，导航+搜索右 */
    height: 100%;
    padding: 0 15px;
    max-width: 100%; /* 适配移动端宽度 */
}

/* Logo样式 */
.layui-header .logo {
    flex-shrink: 0; /* 防止logo被压缩 */
    margin-right: auto; /* PC端：logo推到最左，导航+搜索靠右 */
}
.layui-header .logo img {
    height: 45px;
    vertical-align: middle;
}

/* PC端导航样式 */
#header-nav-pc {
    flex-shrink: 0;
    margin-right: 10px; /* 导航与搜索的间距 */
}
#header-nav-pc .layui-nav {
    background: transparent;
    margin: 0;
    padding: 0;
    text-align: right;
    display: flex;
    flex-wrap: nowrap;
}
#header-nav-pc .layui-nav-item {
    white-space: nowrap;
    line-height: 40px;
}
#header-nav-pc .layui-nav-item a {
    color: #233876;
    font-size: 16px;
    font-weight: bold;
}
#header-nav-pc .layui-nav .layui-this:after,
.layui-nav-bar {
    background-color: #1c64f2; /* 导航选中下划线颜色 */
}
#header-nav-pc .layui-nav-child {
    text-align: center;
    min-width: 120px;
    padding: 5px 0;
}

/* 搜索入口通用样式 */
#header-search {
    flex-shrink: 0; /* PC端防止被压缩 */
}
#header-search a {
    line-height: 50px;
    height: 50px;
    padding: 0 10px;
}

/* ===================== 5. 通用组件样式 ===================== */
/* product-box tabs 样式 */
product-box .layui-tabs-header {
    height: 113px;
}
product-box .layui-tabs-header li {
    font-size: 18px !important;
    color: #a9a9b3;
    padding-left: 10px;
    padding-right: 10px;
}
product-box .layui-tabs-header .layui-this,
product-box .layui-tabs-header li:hover {
    font-size: 18px !important;
    color: #1e429f;
}
product-box .layui-tabs-header .layui-this:after {
    border-bottom: 0px solid #1c64f2; /* 隐藏选中下划线 */
}

/* news-box tabs 样式 */
news-box .layui-tabs-header li {
    color: #868690;
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
news-box .layui-tabs-header .layui-this,
news-box .layui-tabs-header li:hover {
    color: #1e429f;
    font-size: 20px;
}
news-box .layui-tabs-header .layui-this:after {
    border-bottom: 3px solid #0E7CF5; /* 选中下划线 */
}
news-box .layui-tabs-body .layui-tabs-item {
    margin-top: 10px;
}

/* cata-box 分类列表样式 */
cata-box .cata-list {
    display: flex;
}
cata-box .cata-list li {
    flex: 1; /* 等分宽度 */
}

/* content-box 分类新闻样式 */
content-box .news-pc {
    background-color: #E1E1E1;
}
content-box .news-pc:hover {
    background-color: #1e429f;
    color: #ffffff;
}

/* 弹窗关闭按钮样式 */
.btn-close .layui-layer-btn {
    background-color: #ffffff;
}
.btn-close .layui-layer-btn a {
    width: 80%;
    margin: 0;
    background-color: #EEEEEE;
    border: 1px #EEEEEE solid;
    color: #666666;
    font-weight: bold;
}

/* 图片居中裁剪容器 */
.box-img-center {
    overflow: hidden; /* 隐藏超出容器的图片部分 */
    position: relative; /* 为图片绝对定位做容器 */
}
.box-img-center img {
    width: 100%; /* 图片宽度铺满容器 */
    height: 100%; /* 图片高度铺满容器 */
    object-fit: cover; /* 保持图片比例，裁剪超出部分 */
    object-position: center center; /* 图片从中心位置显示 */
    display: block; /* 去除图片默认行内空白间隙 */
    transition: transform 0.3s ease; /* 缩放过渡动画，0.3秒缓动 */
}
.box-img-center:hover img {
    transform: scale(1.05); /* hover时放大1.05倍 */
}

/* ===================== 6. 自定义盒子样式（圆角/渐变/hover动效） ===================== */
/* 灰色渐变圆角盒子 */
.box-gray-radius {
    border-radius: 5px;
    background-image: linear-gradient(to bottom, #e5e6eb, #EBEBEB);
    color: #333333;
}
.box-gray-radius:hover {
    border-radius: 10px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(38, 92, 255, .3);
    box-shadow: 0 5px 10px 0 rgba(38, 92, 255, .3);
    font-weight: bold;
    text-decoration: none;
    color: #1E429F;
}

/* 白色圆角盒子 */
.box-white-radius {
    border-radius: 5px;
    background-color: #ffffff;
}
.box-white-radius:hover {
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(38, 92, 255, .3);
    box-shadow: 0 5px 10px 0 rgba(38, 92, 255, .3);
    font-weight: bold;
}

/* 蓝色渐变圆角盒子 */
.box-blue-radius {
    border-radius: 5px;
    background-image: linear-gradient(to bottom, #C9E0FB, #ffffff);
    -webkit-box-shadow: 0 5px 15px 0 rgba(136, 136, 136, .5);
    box-shadow: 0 5px 15px 0 rgba(136, 136, 136, .5);
    color: #1e429f;
}
.box-blue-radius:hover {
    border-radius: 5px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(38, 92, 255, .5);
    box-shadow: 0 10px 20px 0 rgba(38, 92, 255, .5);
    font-weight: bold;
    text-decoration: none;
    color: #c81e1e;
}

/* 蓝色阴影盒子 */
.box-blue {
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 15px 0 rgba(136, 136, 136, .3);
    box-shadow: 0 5px 15px 0 rgba(136, 136, 136, .3);
}
.box-blue:hover {
    border-radius: 5px;
    -webkit-box-shadow: 0 8px 20px 0 rgba(38, 92, 255, .3);
    box-shadow: 0 8px 15px 0 rgba(38, 92, 255, .3); /* 修正原代码笔误：.3s → .3 */
    text-decoration: none;
}

/* 新闻盒子hover样式 */
.box-news:hover {
    border-radius: 8px;
    background-image: linear-gradient(to bottom, #e5e6eb, #EBEBEB);
    font-weight: bold;
}