@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; /* 行高，提升可读性 */
}
/************************************************************************/




/*公司介绍*/
/* 页面容器：限制最大宽度并居中，避免内容过宽 */
.page-container {
            max-width: 1400px;
            margin: 50px auto;
            padding: 0 20px;
        }

/* 标题样式：居中显示 + 底部分隔线 */
.section-title {
            text-align: center;
            font-size: 50px;
            font-weight: 500;
            color: #333;
            padding-bottom: 10px;
            border-bottom: 2px solid #e5e5e5; /* 标题下方的浅灰分隔线 */
            margin-bottom: 30px;
        }

/* 内容容器：用于包裹图片和文字，清除浮动影响 */
.content-wrap {
            overflow: hidden; /* 核心：清除子元素float带来的高度塌陷问题 */
        }

/* 右侧图片：实现文字环绕的核心 */
.float-img {
            float: right; /* 让图片向右浮动，文字自动环绕在左侧 */
            width: 400px; /* 图片宽度，可根据需求调整 */
            margin-left: 25px; /* 图片与左侧文字的间距，避免紧贴 */
            margin-bottom: 15px; /* 图片与下方文字的间距 */
            border-radius: 4px; /* 可选：轻微圆角提升美观度 */
        }

/* 文字段落样式：提升可读性 */
.content-text p {
    color: #666;
    line-height: 1.8; /* 行高设置为1.8倍，大段文字更易读 */
    margin-bottom: 5px; /* 段落之间的间距 */
    text-align: justify; /* 可选：文字两端对齐，排版更整齐 */
    text-indent: 35px;
	
        }
/*******************************/
 /* 数字统计区域（图二效果） */
.number-box {
	display: flex;
	justify-content: space-around;
	padding: 40px 20px;
	flex-wrap: wrap;
	gap: 20px;
}
.number-item {
	text-align: center;
	min-width: 100px;
}
.num {
	font-size: 36px;
	font-weight: bold;
	color: #2196F3;
	margin-bottom: 10px;
}
.text {
	font-size: 14px;
	color: #666;
}
/**********/
/* 数字卡片区域 */
.stats-section {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 35px;
}
.stat-card {
	flex: 1;
	min-width: 280px;
	background-color: #fff;
	padding: 40px 20px;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	text-align: center;
}
.stat-number {
	font-size: 4rem;
	font-weight: 700;
	color: #165DFF;
	margin-bottom: 10px;
	line-height: 1;
}
.stat-number .unit {
	font-size: 1.5rem;
	font-weight: 500;
	color: #666;
	margin-left: 8px;
}
.stat-label {
	font-size: 1.2rem;
	color: #666;
}

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

/* 页面容器：限制最大宽度并居中，内容宽 */
.container{
	max-width: 1400px;;
	margin: 50px auto;
	padding: 0 20px;
}

/* 主标题样式 */
.section-title2{
    font-size: 50px;
    font-weight: 500;
    color: #333;
    padding-bottom: 20px;
    border-bottom: 2px solid #e5e5e5;/* 标题下方浅灰分隔线 */
    margin-bottom: 30px;
    text-align: center;
}

 /* 卡片列表容器：flex 实现双卡片并排 */
.concept-list{
	display: flex;
	grid-gap: 24px;/* 两个卡片之间的间距 */
	flex-wrap: wrap; /* 小屏幕自动换行 */
}

 /* 单个卡片样式 */
.concept-card{
	flex: 1px;/* 卡片自动平分宽度 */
	min-width: 300px;/* 小屏幕时最小宽度，避免卡片过窄 */
	background-color: #fff;
	border-radius: 1px;/* 轻微圆角 */
	box-shadow: 0 8px 8px rgba(0,0,0,0.05);/* 轻微阴影提升层次感 */
	padding: 25px 25px;/* 卡片内边距 */
}

/* 卡片小标题（蓝色） */
.card-subtitle{
	font-size: 28px;
	font-weight: 600;
	color: #2f80ed;
	margin-bottom: 12px;
}

/* 核心理念标题（黑色粗体） */
.card-title{
	font-size: 26px;
	font-weight: 700;
	color: #333;
	margin-bottom: 8px;
}

/* 描述文字（灰色） */
.card-desc{
	font-size: 18px;
	color: #666;
	line-height: 1.6;/* 行高提升可读性 */
}


.hxcpfw{
	max-width: 1400px;;
	margin: 50px auto;
	padding: 0 20px;
}
.cp1{
    color: #333;
    text-align: center;
    border-bottom: 2px solid  #E5E5E5;
    font-size: 50px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    font-weight: 500;	
}
.hxcpfw .sgxpq {
	display: flex;
	grid-gap: 24px;
}
.hxcpfw .sgxpq .san {
    flex: 1px;
    min-width: 300px;
    border-radius: 1px;
    background-color: #FFF;
    padding: 25px 25px;
    box-shadow: 0 8px 8px rgba(0,0,0,0.05);
}
.title3{
    text-align: center;
    color: #2F80ED;
    font-size: 25px;
    line-height: 2;
}
.title4{
    color: #333;
    font-size: 16px;
	margin-bottom: 5px;
}

.hxalhezi{
    text-align: center;
}
.hxal{
    display: inline-block;/* 行内块，可设置宽高和内外边距 */
    padding: 10px 20px;/* 按钮内边距 */
    background-color: #1096EB;/* 蓝色背景，匹配示例 */
    color: white;/* 白色文字 */
    text-decoration: none;/* 去除下划线 */
    border-radius: 8px;/* 轻微圆角，更美观 */
    font-size: 14px;
    transition:  0.3s;/*  hover 过渡效果 */
    margin-top: 30px;
}
.hxal:hover{
	background-color: #FF0004;
	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;/* 浅灰色，区分层级 */
}
@media (max-width: 768px) {
            .title {
                font-size: 2.2rem;
            }
            .intro-section {
                flex-direction: column;
            }
            .stat-number {
                font-size: 2.8rem;
            }
        }