@charset "utf-8";
/* 重置默认样式，避免浏览器自带样式干扰 */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     list-style: none;
     text-decoration: none;
        }
 /* 页面主体最小高度，避免页脚遮挡内容 */
body {
 	 height: 100%;
     min-height: 100vh;
     display: flex;
     flex-direction: column;  /*让页脚固定在页面底部（非悬浮）*/ 
     font-family: "Microsoft Yahei", sans-serif;
/*	 padding-bottom: 6rem;  留出足够空间，避免内容被固定 footer 遮挡 */
}
html{
/*    background-color: #FFFFFF;*/
}

 /* 导航栏整体样式 */
.daohenglan  {
    display: flex;/* 弹性布局，实现logo和导航项左右分布 */
    width: 100%;
    height: 80px;
    background-color: #1096EB;/* 导航栏背景色，可自行修改 */
    padding-top: 0;
    padding-right: 200px;
    padding-left: 200px;/* 左右内边距，控制内容与边缘的距离 */
    box-shadow: 0 2px 9px rgba(0,0,0,0.5);/* 轻微阴影增加立体感 */
    justify-content: space-between;/* 两端对齐 */
    align-items: center;/* 垂直居中 */
    position: fixed; /* 可选：固定导航栏在顶部 */
    top: 0;
    left: 0;
    z-index: 999;
}

 /* logo样式 */
.daohenglan .logo {
    height: 60px; /* 控制logo高度，不超过导航栏高度 */
    width: auto; /* 宽度自适应，保持图片比例 */
    margin-left: -100px;/*左右LOGO位置移动*/
}

/*LOGO图片位置微调*/
/*.logo a img {
    margin-top: -53px;
    margin-left: -23px;
}/

/* 导航链接容器样式 */
.daohenglan .daohengyou {
    display: flex;/* 让导航项横向排列 */
    font-weight: 500;
    padding-left: 10px;
    margin-right: 3px;/*左右距离调动*/
}

/* 导航项 - 横向整栏排列，间距均匀 */
.daohenglan .daohengyou li {
    margin: 0 15px; /*左右间距均匀，适配整栏 */
    display: inline-block;
}

 /* 导航链接样式 */
.daohengyou li a {
    font-size: 22px;
    color: #FFFFFF; /* 文字默认颜色 */
    font-weight: 500;
    transition: color 0.3s ease; /* 颜色过渡动画，更丝滑 */
	transform-origin: center; /* 放大时以中心为原点 */
	padding: 4px 0;
	position: relative;
}

.daohengyou li a:hover {
    color: #300AED; /* 悬浮时的文字颜色，可自行修改 */
}

/* 选中/激活状态样式 */
.daohengyou li a.active{
	color: #F97510; /* 常亮橙色，和Logo颜色统一 */
	transform: scale(1.1); /* 放大1.1倍 */
	font-weight: bold;
}

/* 可选：鼠标悬停效果（非选中时的反馈） */
.daohengyou li a:hover:not(.active){
	color: #FFCC80;/* 浅橙色过渡 */
	transform: scale(1.05); /* 轻微放大 */
}
/************************************************************************/









/********************************************************/






/*////////////////////////////*/


 /* 关于我们模块容器 */
.about-container{
    width: 100%;
/*    max-width: none; 限制最大宽度，适配大屏 */
    margin-top: 90px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;/* 上下间距50px，左右自动居中 */
    padding: 0 20px;/* 左右内边距，适配小屏 */
    text-align: center;/* 所有内容居中对齐 */
    background-color: #FCF6F6;
}

/* 主标题样式 */
.about-title{
	font-size: 45px;/* 标题字号 */
	color: #333333;/* 标题颜色 */
	margin-bottom: 24px;/* 标题与副标题间距 */
	font-weight: 500;/* 加粗 */
}

/* 副标题样式 */
.about-subtitle{
	font-size: 25px;
	color: black;
	margin-bottom: 18px;/* 副标题与正文间距 */
	line-height: 1.6; /* 行高，提升可读性 */
}
/************************************************************************/


/* 容器样式：居中、限制宽度 */
.container{
    width: 100%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
}

/* 标题样式：居中、字体大小、间距 */
.product-title{
	text-align: center;
	font-size: 50px;
	font-weight: 600;
	margin-bottom: 30px;
	color: #333333;
}

 /* 产品列表：弹性布局，横向排列，间距均匀 */
.product-list{
    display: flex;/*横向排列*/
    justify-content: space-evenly;
    flex-wrap: wrap; /*响应式换行 */
	grid-row-gap: 25px;/*多行产品卡片之间的上下间距*/
	margin-top: 50px; /*第一行列表与标题的间距*/
    margin-bottom: 30px;/*列表与下方“查看全部”按钮的下间距 */
    /*	两边空白距离*/

}

 /* 产品卡片样式：边框、内边距、宽度、圆角 */
.product-card{
	width: 380px;/* 每张卡片宽度 */
	border: 2px solid #e5e5e5; /* 卡片边框 */
    border-radius: 10px; /* 圆角 */
    padding: 15px;
    display: flex;
    flex-direction: column; /* 垂直排列内部元素 */
}
/* 产品图片样式：宽度100%，高度自适应，底部间距 */
.product-img {
    width: 100%;
    height: 300px; /* 固定图片高度，保持统一 */
    object-fit: contain; /* 图片等比例适配，不拉伸 */
    margin-bottom: 15px;
}

 /* 产品名称样式：字体大小、间距 */
.product-name {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 500;
 }

/* 产品描述样式：字体大小、颜色、行高、间距 */
.product-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
    flex: 1; /* 占满剩余空间，让按钮靠下 */
}

/* 查看详情按钮样式 */
.btn-detail {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #409eff; /* 蓝色边框 */
    color: #409eff; /* 字体蓝色 */
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer; /* 鼠标悬浮手型 */
    font-size: 14px;
    margin-top: auto; /* 按钮靠底部 */
    outline: none; /* 去除默认聚焦边框 */
}

/* 按钮悬浮效果 */
.btn-detail:hover {
    background-color: #409eff;
    color: #fff;
    transition: all 0.3s; /* 过渡动画 */
        }




/* 查看全部按钮容器：居中 */
.btn-all-wrap {
   text-align: center;
        }

/* 查看全部按钮样式 */
/*.btn-all{*/
/*    width: 120px;*/
/*    height: 36px;*/
/*    line-height: 36px;*/
/*    text-align: center;*/
/*    background-color: #FFFFFF;  蓝色背景 */
/*    color: #000000;  白色字体 */
/*    border: none;*/
/*    border-radius: 4px;*/
/*    cursor: pointer;*/
/*    font-size: 18px;*/
/*    outline: none;*/
/*	border: 1px solid #409EFF;*/
/*}*/

/* 查看全部按钮悬浮效果 */
/*.btn-all:hover {*/
/*    background-color: #66b1ff;*/
/*    transition: all 0.3s;*/
/*}*/


 /* 查看更多按钮样式 */
.btn-all{
    display: inline-block;/* 行内块，可设置宽高和内外边距 */
    padding: 8px 20px;/* 按钮内边距 */
    background-color: #1096EB;/* 蓝色背景，匹配示例 */
    color: white;/* 白色文字 */
    text-decoration: none;/* 去除下划线 */
    border-radius: 8px;/* 轻微圆角，更美观 */
    font-size: 14px;
    transition:  0.3s;/*  hover 过渡效果 */
    margin-bottom: 5px;
}
/* 按钮 hover 效果 */
.btn-all:hover{
	background-color: #F80409;
	transition: all 0.3s;
}
















/*********************************/



 /* 底部页脚核心样式 */
.footer {
    padding: 20px 30px;
    background-color: #AAAAAA;/* 浅灰背景，提升辨识度 */
    border-top: 1px solid #000000;/* 顶部分割线 */
    text-align: center;/* 内容居中对齐 */
    color: #00000;     /* 文字基础颜色 */
    width: 100%;
	border: 0;
}

 /* 邮箱信息样式 */
.footer .Email {
    font-size: 18px;
    margin-bottom: 15px;/* 与版权信息拉开间距 */
    line-height: 1.5;
}

/* 邮箱链接样式（可选，点击可发邮件） */
.footer .Email a {
    color: #0066cc;/* 蓝色链接色，符合网页习惯 */
}

 /* 版权信息样式 */
.footer .copyright {
    font-size: 18px;
    color: #000000;/* 浅灰色，区分层级 */
}