@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 遮挡 */
}


 /* 导航栏整体样式 */
.daohenglan  {
    display: flex;/* 弹性布局，实现logo和导航项左右分布 */
    width: 100%;
    height: 80px;
    background-color: #1096EB;/* 导航栏背景色，可自行修改 */
    padding: 0 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); /* 轻微放大 */
}







 /* 轮播整体容器 - 垂直布局 */
.carousel {
            width: 100%;
            height: auto; /* 高度自适应 */
            margin: 0 auto;
            overflow: hidden;
            display: flex;
            flex-direction: column; /* 子元素垂直排列 */
	        margin-top: 10px;    /* 向上/向下移动：值越大越靠下，负数（如-10px）则向上移 */
        }

 /* 轮播图片容器 */
.carousel-content {
            width: 100%;
            height: 600px; /* 图片区域高度 */
            position: relative;
            overflow: hidden;
        }

 /* 图片列表 */
.carousel-list {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;
        }

.carousel-item {
            flex: 0 0 100%;
            width: 100%;
            height: 100%;
        }

.carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;/* 图片自适应，不拉伸 */
	        object-position: center; /* 可选：调整裁剪聚焦位置 */
        }

/* 指示器容器 - 放在下方 */
.carousel-indicators {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;
            padding: 10px 0; /* 上下内边距 */
            gap: 8px; /* 指示器之间的间距 */
/*	        margin-top: 10px;  与轮播图的间距 */
        }

/* 指示器样式 */
.indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

/* 激活状态的指示器 */
.indicator.active {
            background-color: #007bff;
            width: 20px;
            border-radius: 5px; /* 激活时变椭圆，可选 */
        }

/* 左右箭头样式（可选保留） */
.carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 45px;
            height: 45px;
	        border-radius: 50%;
            background-color: #666;/* 默认背景色 */
	        transition: all 0.3s ease; /* 变色过渡动画 */
            color: #FFFFFF;
            border: none;
            cursor: pointer;
            z-index: 10;
	        font-size: 20px;
        }

/*左右箭头位置*/
.prev {
            left: 10px;
        }

.next {
            right: 10px;
        }

/* 鼠标悬停箭头变色（核心需求） */
.carousel-arrow:hover {
            background-color: #0088ff; /* 悬停后的背景色 */
            color: #fff; /* 文字色（可根据需要调整） */
            box-shadow: 0 0 8px rgba(0, 136, 255, 0.5); /* 可选：加阴影增强效果 */
        }



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


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

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

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

/* 正文样式 */
.about-content{
	font-size: 20px;
	color: black;
	line-height: 1.8;/* 行高，提升可读性 */
	max-width: 900px;/* 限制正文宽度，避免单行过长 */
	margin: 0 auto 10px;/* 上下间距，左右居中 */
}

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



/***********                       热门产品css属性        *******************/

/* 容器样式：居中、限制宽度 */
.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%;      /* 宽度铺满整个视口 */
}

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

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

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