/* =========================================================
   0. 体验区大容器 —— 全屏背景图 + 下方绝对定位内容卡片
   ========================================================= */
.experience {
  background: url(../img/experience/experience-banner.png) no-repeat 100% 100%;
  /* 100% 100% = 图片强制铺满容器，可能变形；想保比例请改成 cover */
  width: 100%;
  height: 1257px;          /* 写死高度，保证背景图完整露出 */
  position: relative;      /* 给内部 .experience-content 当定位包含块 */
  background-size: cover;  /* 再次声明，防止上面简写被覆盖 */
}

/* =========================================================
   1. 头部两行大字 —— 垂直居中靠 padding 硬顶
   ========================================================= */
.experience-header { text-align: center; }

.experience-header p:nth-child(1) {
  font-size: 38px;
  font-weight: bold;
  color: #fff;
  padding-top: 143px;   /* 上边距 143px，把文字压到背景图安全区 */
  padding-bottom: 42px; /* 两行文字之间间距 */
}

.experience-header p:nth-child(2) {
  font-size: 26px;
  color: rgba(255, 255, 255, .9);  /* 0.9 透明度，让背景图透一点 */
}

/* =========================================================
   2. 白色内容卡片 —— 绝对定位水平垂直居中
   ========================================================= */
.experience-content {
  position: absolute;
  width: 1100px;          /* 定宽卡片，比版心 1200px 略窄，两边留呼吸 */
  height: 841px;          /* 写死高度，后台放内容时记得加溢出保护 */
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  /* 以下四行 = 万能绝对居中 */
  left: 0; right: 0; top: 340px; bottom: 0;
  margin: auto;
  box-sizing: border-box;
  padding: 44px 134px;    /* 上下 44 左右 134，视觉留呼吸 */
}

/* 卡片内大标题 */
.experience-content_title {
  text-align: center;
  color: #3B426B;
  font-size: 26px;
  font-weight: bold;
  padding-bottom: 28px;   /* 与下方通道图标间距 */
}

/* =========================================================
   3. 通道 & 演示 —— 两栏横向布局
   ========================================================= */
.experience-content_channel,
.experience-content_demo {
  display: flex;
  justify-content: space-between;  /* 左右两端对齐 */
}

/* 通道图标下方文字 */
.experience-content_channel p { text-align: center; }

/* 标签小药丸 —— 通道 & 演示共用 */
.experience-content_channel p span,
.experience-content_demo a p:nth-child(2) span {
  display: inline-block;           /* 让 padding 生效 */
  padding: 6px 29px;
  background: rgba(16, 116, 240, .1);
  border-radius: 18px;             /* 圆角胶囊 */
  color: #0E72F1;
  font-size: 18px;
}

/* =========================================================
   4. 底部备注 —— 一行小字
   ========================================================= */
.experience-content_remark {
  color: rgba(125, 136, 162, 1);
  font-size: 16px;
  line-height: 62px;      /* 行高 = 高度，垂直居中 */
  text-align: center;
  padding-bottom: 20px;   /* 与下方演示卡片间距 */
}

/* =========================================================
   5. 演示卡片 —— 可点击区域
   ========================================================= */
.experience-content_demo a {
  text-decoration: none;
  margin-top: 10px;
  width: 386px;
  height: 129px;
  background: rgba(255, 255, 255, .4);  /* 半透明白，毛玻璃效果 */
  box-shadow: 0 4px 16px 2px rgba(122, 153, 209, 0.33);
  border-radius: 6px;
  cursor: pointer;
  display: block;          /* 让整片区域可点 */
}

/* 演示卡片第一行：标题 */
.experience-content_demo a p:nth-child(1) {
  font-size: 18px;
  color: #3B426B;
  line-height: 62px;
  text-align: center;
}

/* 演示卡片第二行：标签胶囊 */
.experience-content_demo a p:nth-child(2) { text-align: center; }

/* =========================================================
   6. 底部联系区 —— 水平居中按钮
   ========================================================= */
.experience-contact {
  padding-top: 24px;       /* 与上方卡片间距 */
  display: flex;
  justify-content: center; /* 按钮整体居中 */
}

.experience-contact_text {
  margin-right: 35px;      /* 两个按钮之间留缝 */
  text-align: center;
}

/* 第一行：提示文字 */
.experience-contact_text p:nth-child(1) {
  color: rgba(125, 136, 162, 1);
  font-size: 16px;
  line-height: 62px;
}

/* 第二行：渐变按钮 */
.experience-contact_text p:nth-child(2) span {
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  padding: 15px 54px;           /* 上下 15 左右 54，视觉胖一点 */
  background: linear-gradient(-90deg,
                             rgba(3, 99, 251, 1),
                             rgba(0, 255, 156, 1));
  border-radius: 24px;          /* 圆角按钮 */
  display: inline-block;        /* 让 padding 生效且可点击 */
  transition: all .3s;          /* 建议加过渡，悬停更顺滑 */
}
.experience-contact_text p:nth-child(2) span:hover {
  filter: brightness(1.05);     /* 悬停微亮，提升反馈 */
}

/* =========================================================
   7. 全局清零 —— 防止段落默认 margin 撑开间距
   ========================================================= */
p {
  margin: 0;
  padding: 0;
}