@charset "utf-8";
/* CSS Document */

/* 页面顶部大图展示样式 */
.hero-banner img {
  width: 100%;              /* 自动适应宽度（最大宽1920px） */
  max-width: 1920px;        /* 最大宽度限制为1920像素 */
  height: 570px;            /* 固定高度 */
  object-fit: cover;        /* 保持图片比例并填满区域 */
  display: block;
  margin: 0 auto;           /* 居中对齐 */
}
/* 优秀案例展示区块 */
.case-showcase-section {
  width: 100%;
  height: 1120px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 区块标题样式 */
.<strong>case-showcase-section</strong> {
  margin-top: 50px;
  margin-bottom: 40px;
  color: #222;
}
/* 标题统一样式复用 */
.section-title {
	padding-top: 80px;
  text-align: center;
  font-size: 36px;
  color: #222;
  margin-bottom: 50px;
  font-family: 'MyFont', sans-serif;
  font-weight: 700;
}
/* 案例展示网格 */
.case-grid {
  width: 1200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
/* 单个案例 */
.case-item {
  width: 280px;
  height: 240px;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  background-color: #f5f5f5;
}
/* 悬浮效果 */
.case-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.case-item:hover .case-caption {
  background-color: #3947ff;
}

.case-item:hover .case-caption span {
  color: #fff;
}

.case-item:hover .case-caption .underline {
  background-color: #fff;
}
/* 图片部分 */
.case-image {
  width: 100%;
  height: 166px;
  background-size: cover;
  background-position: center;
}
/* 文案区域 */
.case-caption {
  height: 74px;
  background-color: #fff;
  text-align: center;
  padding-top: 12px;
  position: relative;
  transition: background-color 0.3s ease;
}

/* 文案文字 */
.case-caption span {
  font-size: 18px;
  color: #222;
  transition: color 0.3s ease;
}

/* 蓝色横杠 */
.case-caption .underline {
  width: 40px;
  height: 4px;
  background-color: #3947ff;
  margin: 10px auto 0;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
.case-item:hover .case-caption {
  background-color: #3947ff;
}

.case-item:hover .case-caption span {
  color: #fff;
}

.case-item:hover .case-caption .underline {
  background-color: #fff;
}
.footer-nav a:hover {
  text-decoration: underline;
}
/* 蓝色横杠 */
.case-caption .underline {
  width: 40px;
  height: 4px;
  background-color: #3947ff;
  margin: 10px auto 0;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
.case-item:hover .case-caption .underline {
  background-color: #fff;
}
/* 按钮样式，距离div2底部50px，居中显示 */
.experience-btn {
  display: block;
  margin: 50px auto 0;
  background-color: #3947ff;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 80px;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.experience-btn:hover {
  background-color: #2a34cc;
}
/* 外层大容器 */
.painpoint-section {
  width: 100%;
  height: 650px;
  background-color: #e6ebfa;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 标题样式 */
.painpoint-title {
  margin-top: 80px;
  margin-bottom: 50px;
  font-size: 36px;
  font-family: 'MyFont', sans-serif;
  font-weight: 700;
  text-align: center;
}

/* 容器宽度限制、自动换行为2行3列 */
.painpoint-container {
  width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px; /* 卡片间距 */
}

/* 单个卡片样式 */
.painpoint-item {
  width: 390px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  padding: 30px 50px;
  box-sizing: border-box;
  align-items: center;
}

/* 左侧图标 */
.painpoint-icon {
  width: 70px;
  height: 70px;
  margin-right: 20px;
  flex-shrink: 0;
}

/* 右侧文字部分 */
.painpoint-text {
  flex: 1;
}

/* 小标题 */
.painpoint-title-small {
  font-size: 28px;
  margin-bottom: 8px;
}

/* 描述文字 */
.painpoint-desc {
  font-size: 18px;
  color: #222;
  line-height: 1.6;
}