.banner {
  position: relative;
  z-index: 9;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 670px;
  background: url() no-repeat center;
  background-size: cover;
}

.banner::after {
  position: absolute;
  bottom: -155px;
  left: 0;
  display: block;
  width: 100%;
  height: 340px;
  background: url('https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/common/banner-mask.png') no-repeat center;
  content: '';
}

.banner-section {
  padding: 0;
}

.banner-introduce {
  margin-top: 182px;
}

.banner-title img {
  width: 480px;
}

.main {
  position: relative;
  z-index: 10;
  margin: 0 auto;
}

* {
  box-sizing: border-box;
}

.main-section-box {
  width: 1160px;
  margin: 0 auto;
}

.main-section-box .section-guide-head {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 36px;
  font-weight: 600;
}

.main-section-box .section-guide-head img {
  height: 47px;
  margin-right: 10px;
}

.main-section-1 {
  padding-bottom: 175px;
}

.main-section-1 .section-guide-ul {
  display: flex;
  justify-content: space-between;
  margin-top: 42px;
}

.main-section-1 .section-guide-ul li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-section-1 .section-guide-ul li img {
  width: 143px;
  height: 143px;
}

.main-section-1 .section-guide-ul li::after {
  position: absolute;
  top: 34px;
  left: 123px;
  width: 137px;
  height: 61px;
  background: url(https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/support-services/section1-jiantou.png) no-repeat;
  background-size: contain;
  content: '';
}

.main-section-1 .section-guide-ul li:last-child::after {
  display: none;
}

.main-section-1 .section-guide-ul li .section-guide-title {
  margin-bottom: 11px;
  color: #333;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
}

.main-section-1 .section-guide-ul li .section-guide-desc {
  color: #666;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 28px;
}

.main-section-2 {
  height: 1790px;
  padding: 75px 0 0;
  background-image: radial-gradient(circle at 51% 57%, #fff0 0%, #dbe7ff0f 36%, #0056ff4f 94%);
}

.three-column-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 左右模块样式 */
.left-module,
.right-module {
  width: 325px;
  height: 208px;
  background-image: linear-gradient(180deg, #ebf9fdb3 0%, #ffffffb3 100%);
  border-radius: 8px;
  box-shadow: 0 2px 15px 0 #1b518714;
}

.module-item {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
  text-align: center;
}

.module-icon {
  width: 83px;
  height: 28px;
  margin: 0 auto 16px;
}

.module-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.module-content p {
  color: #000;
  font-size: 19px;
  letter-spacing: 0;
  line-height: 37px;
}

.center-image img {
  width: 512px;
  height: 582px;
}

/* 外层区域 */
.ds-wrapper {
  position: relative;
  width: 100%;
  margin: 124px auto 250px;
  text-align: center;
}

.ds-tab-bar {
  position: relative;
  z-index: 3;
  display: flex;
  width: 542px;
  height: 77px;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin: 53px auto -34px;

  /* background: url('https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/developer-service/section3-tab-bg.png') no-repeat center; */

  background-image: linear-gradient(100deg, #c6e5ff 0%, #f4fafe82 88%);
  border-radius: 8px;
  box-shadow: 0 10px 19px 0 #0000000a;
}

.ds-tab {
  display: flex;
  height: 51px;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  border-radius: 8px;
  color: #333;
  cursor: pointer;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0;
  transition: 0.25s;
}

.ds-tab:hover {
  color: #0276ff;
}

.ds-tab.active {
  background: #0276ff;
  box-shadow: 0 10px 19px 0 #0000000a, inset 0 1px 3px 0 #c4d5ff80;
  color: #fff;
}

/* 三个背景图独立切换 */
.ds-content-area {
  position: relative;
  display: flex;
  width: 1159px;
  height: 586px;
  align-items: center;
  padding: 0 40px 0;

  /* 默认开发者服务背景 */
  background-image: url('https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/developer-service/bg-dev.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
}

/* 切换背景图（JS 注入 class） */
.ds-bg-dev {
  background-image: url('https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/developer-service/bg-dev.png') !important;
}

.ds-bg-expert {
  background-image: url('https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/developer-service/bg-expert.png') !important;
}

.ds-bg-ai {
  background-image: url('https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/developer-service/bg-ai.png') !important;
}

/* 模块淡入淡出 */
.ds-panel {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ds-panel.active {
  display: flex;
  align-items: center;
  opacity: 1;
}

/* ===== 开发者服务布局 ===== */

.ds-dev-layout {
  display: flex;
  align-items: center;
  gap: 46px;
}

/* 左侧图 */
.ds-dev-image img {
  width: 747px;
  height: 388px;
}

/* 右侧按钮列表 */
.ds-dev-menu {
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.ds-dev-btn {
  width: 152px;
  height: 40px;
  border: 1px solid #b8b9c1;
  background: linear-gradient(180deg, #dce5ed 0%, #d7dee7 50%);
  border-radius: 8px;
  color: #000;
  cursor: pointer;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 40px;
  text-align: center;
  transition: 0.25s;
}

/*  hover 渐变边框  */
.ds-dev-btn:hover {
  background-image: linear-gradient(180deg, #c4e0ff 0%, #e0eeff 50%);
}

/*  激活按钮 */
.ds-dev-btn.active {
  border: 1px solid transparent;
  animation: borderMove 1s linear infinite;
  background-clip: padding-box, border-box;

  /* 内部背景 + 边框背景 */
  background-image:
    linear-gradient(180deg, #c4e0ff 0%, #e0eeff 50%),
    linear-gradient(270deg, #05aeff, #0276ff);
  background-origin: border-box;
  box-shadow: 0 2px 9px 0 #0d4e9b40;
}

/* 流动边框动画 */

@keyframes borderMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.ds-dev-desc {
  display: none;
  margin: 11px 0 0 8px;
  color: #000;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 23px;
  text-align: left;
}

.ds-dev-desc.show {
  display: block;
}

/* 专家护航  */
#panel-expert,
#panel-ai {
  margin: 0 auto;
}

.expert-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

/* 专家护航 - 左侧 */
.expert-left {
  display: flex;
  width: 395px;
  height: 421px;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  gap: 52px;
}

.expert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.expert-card .expert-avatar {
  display: inline-block;
  width: 124px;
  margin-bottom: 14px;
}

.expert-card .expert-icon {
  width: 53px;
  height: 53px;
  margin-top: 6px;
}

.expert-card p {
  margin: 5px 0;
  color: #000;
  font-size: 15px;
  letter-spacing: 0;
}

/* 专家护航 - 右侧 */
.expert-right {
  display: flex;
  width: 281px;
  height: 421px;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(180deg, #f4fafe82 100%, #c6e5ff 0%);
  border-radius: 8px;
}

.expert-right .chat-image {
  width: 238px;
  height: 378px;
}

/* 智能助手 */
.ai-section {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.ai-card {
  width: 293px;
  height: 342px;
  padding-top: 47px;
  background: #ffffff4f;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 8px;
}

.ai-card h3 {
  margin-bottom: 11px;
  color: #0276ff;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
}

.ai-card p {
  color: #666;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 29px;
  text-align: center;
}

.ai-card:nth-child(1) {
  background-image: url('https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/developer-service/ai-bg1.png');
}

.ai-card:nth-child(2) {
  background-image: url('https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/developer-service/ai-bg2.png');
}

.ai-card:nth-child(3) {
  background-image: url('https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/hfwebsite/new-public/images/developer-service/ai-bg3.png');
}

.free-service {
  margin-top: -62px;
}