/* 基本样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}
.container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden; /* 清除浮动 */
}
h1, h2, h3 {
    color: #446;
}
h1 {
    font-size: 2.5em;
	margin-bottom: 0.5em;
	}
	h2 {
	    font-size: 2em;
	    margin-top: 1.5em;
	    margin-bottom: 1em;
	    border-bottom: 1px solid #ddd;
	    padding-bottom: 0.5em;
	}
	h3{
	   font-size: 1.5em;
	   margin-bottom: 0.5em;
	}
	
	/* 顶部 Banner */
	.banner {
	    background-color: #f4f4f4;
	    padding: 20px 0;
	    text-align: center;
	    position: relative; /* 为轮播图控件定位 */
	}
	.banner img {
	    max-width: 100%;
	    height: auto;
	}
	
	/* 图片轮播 */
	.slider {
	  position: relative;
	  width: 100%;
	  overflow: hidden; /* 隐藏溢出的图片 */
	}
	
	.slider-image {
	  width: 100%;
	  height: auto;
	  display: none; /* 默认隐藏所有图片 */
	  animation: fadeInOut 3s infinite; /* 添加淡入淡出动画 */
	}
	
	.slider-image.active {
	  display: block; /* 显示当前活动的图片 */
	}
	
	.slider-controls {
	  position: absolute;
	  top: 50%;
	  left: 0;
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  transform: translateY(-50%); /* 垂直居中 */
	  z-index: 10; /* 确保控件在图片上方 */
	}
	
	.slider-controls button {
	  background: rgba(0, 0, 0, 0.5);
	  color: white;
	  border: none;
	  padding: 10px 15px;
	  cursor: pointer;
	  font-size: 20px;
	  opacity: 0.7;
	  transition: opacity 0.3s;
	}
	
	.slider-controls button:hover {
	  opacity: 1;
	}
	
	@keyframes fadeInOut {
	    0% { opacity: 0; }
	    20% { opacity: 1; }
	    80% { opacity: 1;}
	    100% {opacity: 0;}
	}
	
	/* 概述与亮点 */
	.overview {
	    display: flex; /* 使用 Flexbox 布局 */
	    align-items: center; /* 垂直居中 */
	    margin: 40px 0;
	}
	.overview-image {
	    flex: 1; /* 图片占一半宽度 */
	    padding-right: 20px;
	    text-align: center; /*图片居中*/
	}
	.overview-image img {
	    max-width: 100%;
	    height: auto;
	}
	.overview-text {
	    flex: 1; /* 文字占一半宽度 */
	}
	.overview-text ul {
	    list-style: none;
	    padding: 0;
	}
	.overview-text li {
	    margin-bottom: 10px;
	}
	.overview-text li i{
	    margin-right: 5px;
	    color: #4CAF50; /* 图标颜色 */
	}
	
	/* 表格 */
	table {
	    width: 100%;
	    border-collapse: collapse;
	    margin-bottom: 20px;
	}
	th, td {
	    border: 1px solid #ddd;
	    padding: 8px;
	    text-align: left;
	}
	th {
	    background-color: #f4f4f4;
	}
	.optional-row th{
	    text-align: center;
	    font-weight: bold;
	}
	
	.table-note{
	  font-size: smaller;
	  color: #888;
	}
	
	/* 应用场景 */
	.applications {
	    display: flex;
	    flex-wrap: wrap; /* 允许换行 */
	    justify-content: space-between; /* 两端对齐 */
	}
	.application-card {
	    width: 48%; /* 每个卡片占一半宽度，留一点间距 */
	    margin-bottom: 20px;
	    border: 1px solid #ddd;
	    padding: 15px;
	    box-sizing: border-box; /* 包含内边距和边框 */
	}
	.application-card i{
	  margin-right: 5px;
	  color: #2196F3;
	}
	
	    /* 选配组件 */
	.optional-components {
	    overflow-x: auto; /* 水平滚动 */
	    white-space: nowrap; /* 不换行 */
	    padding: 20px 0;
	}
	.component-card {
	    display: inline-block; /* 水平排列 */
	    width: 200px; /* 固定宽度 */
	    margin-right: 20px;
	    border: 1px solid #ddd;
	    padding: 10px;
	    vertical-align: top; /* 顶部对齐 */
	    text-align: center;
	}
	.component-card img {
	    max-width: 100%;
	    height: auto;
	}
	
	/* 底部 */
	.footer {
	    text-align: center;
	    padding: 20px 0;
	    background-color: #f4f4f4;
	}
	.footer a {
	    display: inline-block;
	    margin: 0 10px;
	    padding: 10px 20px;
	    background-color: #4CAF50;
	    color: white;
	    text-decoration: none;
	    border-radius: 5px;
	}
	
	/* 简单的响应式 */
	@media (max-width: 768px) {
	    .container {
	        width: 95%;
	    }
	    .overview {
	        flex-direction: column; /* 移动设备上垂直排列 */
	    }
	    .overview-image, .overview-text {
	        width: 100%; /* 占满宽度 */
	        padding-right: 0;
	    }
	    .application-card {
	        width: 100%; /* 移动设备上每个卡片占满宽度 */
	    }
	}