@charset "UTF-8";
html {
/* 浏览器默认值,1rem就是14px，如果font-size:18px,1rem就是18px */
font-size: 14px;
/*平滑滚动*/
scroll-behavior: smooth;
}
/*网站单位设置*/
@media (max-width: 767px) {
html {
font-size: 12px !important;
}
}
@media (max-width: 479px) {
html {
font-size: 12px !important;
}
}
@media (max-width: 320px) {
html {
font-size: 12px !important;
}
}
@media (min-width: 768px) {
html {
font-size: 12px !important;
}
}
@media (min-width: 1200px) {
html {
font-size: 12px !important;
}
}
@media (min-width: 1440px) {
html {
font-size: 12px !important;
}
}
@media (min-width: 1680px) {
html {
font-size: 14px !important;
}
}
/* 全局重置与基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 12px;
color: #333;
background-color: #f8f9fa;
}
a {
background: transparent;
/*去掉超链接的下划线*/
text-decoration: none;
color: #08c;
}
/* 容器样式 */
.container {
width: 90%; /*宽度为90%，并且不会超过1200*/
max-width: 1600px; /*最大宽度1600*/
margin: 0 auto; /*上下0，左右自动*/
padding: 0; /*上下0，左右自动*/
/*background-color: #333333;*/
}
/* 导航栏 */
header {
background-color: #1b1b1b;
color: white;
/*padding: 1rem 0; 1rem = 元素的 font-size 值*/
position: sticky; /*吸顶/吸边*/
top: 0; /* 关键：必须设置阈值（top/right/bottom/left） */
z-index: 1000;
}
.nav-container {
display: flex; /* 开启弹性盒子布局 */
justify-content: space-between; /* 主轴：两端对齐，中间剩余空间被平均分配给各子元素之间的间隙 */
align-items: center; /* 交叉轴：居中对齐 */
}
/*LOGO*/
.logo {
padding: 0;
margin: 0;
max-height: 60px;
overflow: hidden;
}
/*logo图片，自适应*/
.logo img {
/* 随容器宽度变化 */
width: 100%;
/* 高度自动等比例 */
height: auto;
/* 防止比原图还大时失真（可选） */
max-width: 100%;
}
/*桌面导航*/
nav {
display: flex;
/* 让它把父级 .nav-container 剩余宽度全部吃掉 */
flex: 1;
/* 防止 flex 子项被内容撑爆 */
min-width: 0;
height: auto;
}
/* 主导航菜单基础样式 */
.nav-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
flex-direction: column; /* Flexbox 布局中改变主轴方向的核心属性，它让子元素垂直排列（从上到下），而不是默认的水平排列。*/
list-style: none;
gap: 0; /*是 CSS Flexbox 或 Grid 布局中控制子元素之间间距的属性。当设置为 0 时，表示移除项目间的所有间隔，让它们紧密相邻。*/
}
/**/
.nav-menu.active {
display: flex;
}
.nav-menu > li {
/* 为下拉菜单提供定位基准 */
position: relative;
}
.nav-menu a {
color: white;
text-decoration: none;
padding: 0 10px;
line-height: 60px;
display: block;
transition: background-color 0.3s;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
}
/*主菜单鼠标移入时*/
.nav-menu a:hover {
background-color: rgba(0, 0, 0, 0.06);
line-height: 60px;
padding: 0 10px;
}
/* 下拉菜单箭头（桌面端） */
.nav-menu > li.has-dropdown > a::after {
/* 下拉箭头 ▼*/
/*content: '-'; */
font-size: 0.8rem;
}
/* === 下拉菜单核心样式 === */
.dropdown {
display: none;
list-style: none;
width: 100%;
}
/*下拉菜单*/
.dropdown li a {
padding: 0 20px;
font-size: 1rem;
line-height: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
/*下拉菜单，鼠标移入时*/
.dropdown li a:hover {
padding: 0 20px;
background-color: #e60039;
line-height: 40px;
}
/*搜索按钮*/
.search-button {
margin-top: 2px;
display: inline-block;
width: 20px;
flex: 0 0 20px;
cursor: pointer;
height: 20px;
transition-duration: .3s;
background: url(../images/search.png) no-repeat center;
}
/*中英文*/
.language-a-wrap {
flex: 0 0 74px; /*flex: [不放大] [不缩小] [基础宽度];*/
height: 24px;
padding-top: 2px;
display: inline-flex;
justify-content: space-around;
margin: 0 52px;
position: relative;
font-size: 12px;
}
/*中英文，en的a标签*/
.en-a {
left: 1px;
border-radius: 10px 0 0 10px;
}
/*中英文，*/
.language-a {
display: inline-block;
position: relative;
flex: 0 0 36px;
height: 20px;
line-height: 18px;
border: 1px solid #fff;
transition-duration: .3s;
text-align: center;
color: #fff;
overflow: hidden;
}
/*中英文，a标签，激活状态*/
.language-a:hover, .language-a.cur {
color: #1b1b1b;
background: #fff;
}
/*中英文，cn的a标签*/
.cn-a {
border-left: none;
border-radius: 0 10px 10px 0;
}
/*banner区*/
.hero {
/*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
width: 100%;
color: white;
/*padding: 10vh 0;*/
text-align: center;
/*margin-bottom: 3rem;*/
}
.hero h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
margin-bottom: 1rem;
}
.hero p {
font-size: clamp(1rem, 2vw, 1.5rem);
margin-bottom: 2rem;
}
/*产品列表-卡片网格*/
.features-grid {
display: grid; /*网格布局（display 属性共有 50+ 个取值）*/
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
margin-bottom: 3rem;
}
/*产品列表-卡片*/
.feature-card {
/*background: #ffffff;*/
/*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
transition: transform 0.3s;
text-align: center;
overflow: hidden;
}
.feature-card img {
width: 100%;
/*height: auto;*/ /* 或固定高度 + object-fit */
display: block; /* 移除图片默认的4px间隙 */
transition: transform 0.6s; /* 可选：悬停放大效果 */
}
.home-product-card{
position: relative;
}
/*.list-item {
width: 100%;
height: 100%;
}*/
/*伪元素*/
.list-item:before {
position: absolute;
content: "";
display: block;
width: calc(100% - 40px);
height: calc(100% - 100px);
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.2);
top: 20px;
left: 20px;
z-index: 1;
pointer-events: none
}
.feature-card img:hover {
/*transform: translateY(-5px);*/
transform: scale(1.25);
}
/*各卡片上的图标*/
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 2rem 0;
margin-top: 3rem;
}
/*鼠标移入时，显示电话*/
.side-items:hover .side-tele {
opacity: 1;
visibility: visible;
display: block;
pointer-events: auto; /* 显示后恢复交互 */
}
/*鼠标移入时显示二维码*/
.side-items:hover .side-ewm {
opacity: 1;
visibility: visible;
display: block;
pointer-events: auto; /* 显示后恢复交互 */
}
/* ===== 桌面端（≥768px）：hover 触发下拉 ===== */
@media screen and (min-width: 768px) {
.nav-menu {
display: flex !important;
position: static;
flex-direction: row;
width: auto;
padding: 0;
}
.menu-toggle {
display: none;
}
/* 下拉菜单绝对定位 */
.dropdown {
position: absolute;
top: 100%;
/*top: 60px;*/
left: 50%; /* 父元素左侧50%位置 */
transform: translateX(-50%); /* 向左移动自身宽度的50%实现居中 */
min-width: 100px;
width: auto;
background-color: rgba(12, 12, 12, 0.32);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index: 1001;
}
.dropdown li a {
padding-left: 20px; /* 桌面端不需要缩进 */
background-color: rgba(7, 7, 7, 0.45);
white-space: nowrap; /* 防止换行 */
}
/* hover 触发显示 */
.nav-menu > li.has-dropdown:hover .dropdown {
display: block;
}
/*新闻内容页*/
.newsInfo{
width: 95%;
}
body {
font-size: 14px;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
/*隐藏搜索按钮*/
.search-button{display: none;}
/*新闻内容页*/
.newsInfo{
width: 95%;
}
/*屏幕窄时，大logo显示*/
.logo #big-logo{display: none;}
/*屏幕窄时，小logo隐藏*/
.logo #small-logo{display: block;}
}
/* ===== 移动端（<768px）：点击触发下拉 ===== */
@media screen and (max-width: 767px) {
nav {
display: flex;
flex: 1;
min-width: 0;
/* 关键两行 */
max-height: 70vh; /* 可视区 70% 高，自己调 */
overflow-y: auto; /* 出滚动条 */
}
/*窄屏时显示子菜单*/
.dropdown {
display: block;
list-style: none;
width: 100%;
}
/* 点击后显示下拉 */
.dropdown.active {
display: block;
}
/* 下拉菜单箭头旋转（表示展开状态） */
.nav-menu > li.has-dropdown > a.active::after {
content: ' ▲';
}
.nav-menu {
position: fixed;
top: 60px;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #383838;
z-index: 1001;
padding-bottom: 60px;
}
/*手机端隐藏搜索按钮*/
.search-button{display: none;}
/*屏幕太窄时，大logo隐藏*/
.logo #big-logo{display: none;}
/*屏幕太窄时，小logo显示*/
.logo #small-logo{display: block;}
}
/* ===== 针对桌面端大屏幕（≥1024px，如笔记本、台式机）*/
@media screen and (min-width: 1024px) {
body {
font-size: 12px;
text-align: left;
}
.container {
width: 95%;
}
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
.stat-item {
flex: 0 1 200px;
}
/*新闻内容页*/
.newsInfo{
width: 95%;
}
/*隐藏搜索按钮*/
.search-button{display: block;}
/*屏幕宽时，大logo显示*/
.logo #big-logo{display: block;}
/*屏幕宽时，小logo隐藏*/
.logo #small-logo{display: none;}
}