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

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/AlibabaPuHuiTi-3-55-RegularL3.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap; /* 加上这一行 */
}
/* 页面顶部大图展示样式 */
.hero-banner img {
  width: 100%;              /* 自动适应宽度（最大宽1920px） */
  max-width: 1920px;        /* 最大宽度限制为1920像素 */
  height: 570px;            /* 固定高度 */
  object-fit: cover;        /* 保持图片比例并填满区域 */
  display: block;
  margin: 0 auto;           /* 居中对齐 */
}
/* 优势卡片区域整体容器 */
.advantage-section {
  text-align: center;
	font-size: 360px;
  font-family: 'MyFont', sans-serif;
}

/* 卡片样式 */
.advantage-card {
  width: 585px;
  height: 300px;
  border-radius: 20px; /* 圆角 */
  background-color: #f9f9f9;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  overflow: hidden;
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  background-color: #ffffff; /* 保证阴影能清晰显示 */
}

/* 上半部分：蓝色区域 */
.card-top {
  height: 180px;
  display: flex;
  align-items: center;
  padding-left:50px;
  padding-right:40px;
  color: white;
  background-image: url("../images/advantage-bg1.jpg"); /* 替换成你的实际图片路径 */
}

/* 图标样式 */
.card-icon {
  width:100px;
  height: 100px;
  margin-right: 20px;
  border-radius: 10px; /* 圆角 */
}

/* 文案样式 */
.card-text {
  text-align: left;
  font-size: 18px;
  line-height: 1.5;
  color: white;
  padding-left: 20px;
  font-family: 'MyFont', sans-serif;
  font-weight: 200; /* 可选，用于指定精确字重 */
}

/* 下半部分：4个文案 */
.card-bottom {
  display: flex;
  flex-wrap: wrap;
  padding-left: 40px;
  padding-top: 20px;
  gap: 10px;
  font-size: 18px;
  text-align: left;
  justify-content: space-between;
}

/* 单个 bullet 文案 */
.bullet {
  width: 48%;
  color: #233863;
}
/* 品牌价值整体模块 div1 */
.brand-value-section {
  width: 100%;
  max-width: 1920px;
  height: 800px;
  margin: 0 auto;
  padding-top: 0px;
}

/* 标题 */
.section-title {
  text-align: center;
  font-size: 40px;
  margin-bottom: 50px;
  font-family: 'MyFont', sans-serif;
  font-weight: 700;
  color:#233863;
}

/* 内容容器 div2 */
.brand-value-content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
}

/* 左侧图片区域 div3 */
.brand-image {
  width: 682px;
  display: flex;
  align-items: center; /* 垂直居中关键属性 */
}
.brand-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* 右侧文本列表区域 div4 */
.brand-text-list {
  width: 818px;
  display: flex;
  flex-direction: column;
	padding-left: 40px;
  justify-content: space-between;
}

/* 每一条文本项 div5~div9 */
.brand-text-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 16px;
}

/* 图标样式 */
.brand-text-item .icon {
  width: 30px;
  height: 40px;
  flex-shrink: 0;
}
.brand-text-item strong {
  font-size: 20px;
}
.brand-text-item p {
  font-size: 16px;
  color: #222;
  margin-top: 4px;
}
/* 鼠标悬停时浮起效果 */
.brand-text-item {
  transition: all 0.3s ease;
}

.brand-text-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.15);
}
/* 痛点卡片整体样式 */
.pain-card {
  width: 280px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px 20px;
  transition: all 0.3s ease;
  cursor: default;
}

/* 鼠标悬浮时浮动加阴影 */
.pain-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* 图标样式（上方大图标） */
.pain-icon {
  width: 120px;
  height: 90px;
  display: block;
  margin: 0 auto 20px auto;
}

/* 标题样式 */
.pain-title {
  font-size: 26px;
  color: #222;
  text-align: center;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

/* 鼠标滑过时标题变色 */
.pain-card:hover .pain-title {
  color: #3947ff;
}

/* 描述文本 */
.pain-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  text-align: center;
}
/* 品牌价值魔法效应模块整体样式 */
.brand-value-section {
  width: 100%;
  height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

/* 背景图容器样式 */
.brand-bg-container {
  width: 1200px;
  height:492px;
  margin-top: 50px;
  background-image: url("../images/03.png"); /* 根据你的资源路径调整 */
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}
.ai-solution-section {
  width: 100%;
  height: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("../images/paracraft-bg.jpg"); /* 根据你的资源路径调整 */
}

.ai-solution-title {
  margin-top: 80px;
  font-size: 36px;
  text-align: center;
  font-family: 'MyFont', sans-serif;
  font-weight: 700;
}

.ai-solution-content {
  margin-top: 50px;
  width: 1200px;
  display: flex;
  justify-content: space-between;
}

.ai-solution-left {
  width: 600px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-item {
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  border-bottom: 1px dashed #666; /* 添加一条浅灰色虚线 */
}

.category-header {
  padding: 16px;
  font-size: 30px;
  font-weight: 500;
	color: #222;
}

.category-body {
  display: none;
  padding: 16px;
  animation: fadeIn 0.3s ease;
}
.category-body p {
  font-size: 18px;
	color: #222;
}

.category-item.active .category-body {
  display: block;
}

.trial-button {
  background-color: #3947ff;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
	width: 140px;
	height: 40px;
  margin: 5px;
  padding: 0px 0px;
  margin: 0 auto;     /* 上下为0，左右自动边距，实现水平居中 */
}
.ai-solution-right {
  width: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-solution-right img {
  width: 580px;
	height:auto;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.category-icon {
  width: 50px;
  height: 50px;
  margin-right: 8px;
}
/* 外层容器：白底、居中、无阴影 */
.painpoint2-section {
  width: 100%;
  height: 640px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 标题 */
.painpoint2-section .section2-title {
  margin-top: 80px;
  margin-bottom: 50px;
  font-size: 36px;
  text-align: center;
  font-family: 'MyFont', sans-serif;
  font-weight: 700;
}

/* 容器div2：1200px宽度的内容块 */
.painpoint2-container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

/* 每个痛点项div3~div6 */
.painpoint2-item {
  width: 280px;
  background-color: #ffffff;
  border: 1px dashed #ddd;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
}

/* 悬浮效果：浮起+阴影+边框变色+标题变色 */
.painpoint2-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: #e6ebfa;
}

.painpoint2-item:hover .painpoint-title {
  color: #3947ff;
}

/* 图标 */
.painpoint2-icon {
  width: 120px;
  height: 90px;
  margin-bottom: 20px;
}

/* 文案样式 */
.painpoint2-title {
  font-size: 26px;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.painpoint2-desc {
  font-size: 16px;
  color: #666666;
  line-height: 1.5;
}
/* div1 容器，宽1920px，高800px，底色#e6ebfa，四周无阴影 */
.div1 {
  width: 100%;
  height: 800px;
  background-color: #e6ebfa;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 标题，距离div1顶部50px */
.div1-title {
  margin-top: 80px;
  margin-bottom: 50px;
  font-size: 36px;
  text-align: center;
  font-family: 'MyFont', sans-serif;
  font-weight: 700;
}

/* div2 容器，宽1200px，底色#e6ebfa，四周无阴影，距离标题40px */
.div2 {
  width: 1200px;
  background-color: #e6ebfa;
  margin: 0px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px; /* div3~6之间间距 */
  box-sizing: border-box;
}

/* div3、div4、div5、div6 公共样式 */
.div3, .div4, .div5, .div6 {
  width: 585px;
  background-color: #fff;
  border-radius: 20px; /* 圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 四周阴影 */
  display: flex;
  justify-content: space-between;
  padding: 30px 20px;
  box-sizing: border-box;
}

/* 左侧文案区宽300px */
.div3-left {
  width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
	padding-left: 30px;
}
.div3-left p {
  margin-top: 30px;
}
/* 小图标 */
.div3-left .icon {
  font-size: 24px; /* 根据需要调整图标大小 */
  margin-bottom: 10px;
}

/* 小标题 */
.div3-left {
  margin: 0 0 10px 0;
  font-size: 24px;
}

/* 描述文案 */
.div3-left p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  margin-top: 15px;
}

/* 右侧图片区，垂直居中 */
.div3-right {
  display: flex;
  align-items: center;
	margin-right: 25px;
}

/* 图片宽度和高度限制，可根据需求调整 */
.div3-right img {
  max-height: 120px;
  max-width: 210px;
  object-fit: contain;
  border-radius: 10px; /* 圆角 */
}

/* 按钮样式，距离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;
}
/* 图标大小及右侧间距 */
.painpoint3-icon {
  width: 32px;    /* 你可以调整尺寸 */
  height: 32px;
  margin-right: 20px;
  flex-shrink: 0;
}


/* 痛点展示区整体 */
.painpoint-section {
  width: 100%;
  height: 580px; /* 固定高度 */
  background: #fff; /* 白底 */
  display: flex;
  justify-content: center;
}

/* 内部容器，控制宽度 */
.painpoint-container {
  width: 1200px;
  margin-top: 80px; /* 距离上边缘 */
  text-align: center;
}

/* 标题样式 */
.painpoint-title {
  font-size: 40px;
  color: #233863;
  margin-bottom: 50px;
}

/* 痛点卡片容器：横向4个均匀分布 */
.painpoint-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* 每个痛点卡片 */
.painpoint-card {
  width: 280px;
  height: 380px;
  background: transparent; /* 无底色 */
  box-shadow: none; /* 默认无阴影 */
  transition: all 0.3s ease;
  text-align: center;
  padding: 0 0px;
}

/* 图片区域（上200px） */
.painpoint-card img {
  width: 280px;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* 下方文字区域（下200px） */
.painpoint-card h3 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #233863;
}

.painpoint-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #888888;
  margin-bottom: 10px;
  padding:0 20px;
}

/* 链接样式 */
.painpoint-card a {
  font-size: 14px;
  color: #233863;
  text-decoration: underline;
  transition: color 0.3s;
}

.painpoint-card a:hover {
  color: #007bff;
}

/* 鼠标悬停效果 */
.painpoint-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}



/* 机构加盟产品区块整体 */
.franchise-products-section {
  width: 100%;
  height: 1200px;
  background: url('../../resource/images/growbg.png') no-repeat center center; /* 背景图 */
  background-size: cover;
  display: flex;
  justify-content: center;
}

/* 内部容器 */
.franchise-container {
  width: 1200px;
  margin-top: 80px;
  text-align: center;
}

/* 标题样式 */
.franchise-title {
  font-size: 40px;
  color: #233863;
  margin-bottom: 50px;
}

/* 产品网格：2行3列 */
.franchise-grid {
  display: grid;
  grid-template-columns: repeat(3, 380px);
  grid-template-rows: repeat(2, 420px);
  gap: 40px 30px; /* 行间距20px，列间距30px */
  justify-content: center;
}

/* 产品卡片 */
.franchise-card {
  width: 380px;
  height: 430px;
  background: #fff; /* 无底色 */
  box-shadow: none; /* 默认无阴影 */
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 图片（190x160，水平居中） */
.franchise-card img {
  width: 360px;
  height: 216px;
  margin-top: 20px;
  margin-bottom: 20px;
  object-fit: contain;
}

/* 产品名称 */
.franchise-card h3 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #233863;
}

/* 产品描述 */
.franchise-card p {
  font-size: 14px;
  color: #888888;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 0 10px;
  padding:0 40px;
}

/* 报价链接 */
.franchise-card a {
  font-size: 14px;
  color: #233863;
  text-decoration: underline;
  transition: color 0.3s;
}

.franchise-card a:hover {
  color: #007bff;
}

/* 鼠标悬停卡片效果 */
.franchise-card:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
}




/* 整体背景 */
.product-intro-section {
  width: 100%;
  height: 1400px;
  background: url('../../resource/images/helpbg.png') no-repeat center top;
  background-size: 100% auto;   /* 背景图水平100%显示，高度自适应 */
  background-position: center 1000px;  /* 背景图从上方600px位置开始显示 */
  display: flex;
  justify-content: center;
}

/* 内部容器 */
.product-intro-container {
  width: 1200px;
  padding-top: 80px;
  text-align: center;
}

/* 大标题 */
.product-intro-title {
  font-size: 40px;
  color: #233863;
  margin-bottom: 50px;
}

/* 右侧图片 */
.product-intro-image {
  width: 1200px;
  height: 1000px;
}
.product-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}