/* 沿用首页 1500 / 1300 / 1100 内容宽度与公共字号变量。 */
.member-page-content {
  --member-scale: 1;
  --member-content-width: 1500px;
  --member-header-height: 98px;
}

/* 会员代运营页面各正文模块。 */
.member-main {
  padding-top: 0; /* 首屏背景延伸到半透明公共导航背后。 */
}

.member-hero {
  box-sizing: border-box;
  padding: calc(var(--member-header-height) + 99px * var(--member-scale)) calc(24px * var(--member-scale)) calc(205px * var(--member-scale)); /* 导航高度加上设计稿的首屏留白。 */
  background: #fff url('../img/operate/member/member-hero-background.png') center top / cover no-repeat;
  text-align: center;
  color: #333333;
}

.member-hero-content {
  max-width: calc(1600px * var(--member-scale));
  margin: 0 auto;
}

.member-hero-coin {
  display: block;
  width: calc(300px * var(--member-scale));
  height: calc(301px * var(--member-scale));
  margin: 0 auto calc(60px * var(--member-scale));
  object-fit: contain;
}

.member-hero-title {
  margin: 0;
  color: #333333;
  font-size: var(--font-size-72);
  font-weight: 600;
  line-height: normal;
}

.member-hero-title-line {
  display: block;
}

.member-hero-title-accent {
  color: #DE1F26;
}

.member-hero-description {
  margin: calc(12px * var(--member-scale)) 0 0;
  color: #333333;
  font-size: var(--font-size-20);
  font-weight: 500;
  line-height: normal;
}

.member-hero .member-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: calc(40px * var(--member-scale));
}

.member-hero .member-actions button,
.member-status .member-actions button,
.member-solution .member-actions button,
.member-services .member-actions button,
.member-cta .member-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(254px * var(--member-scale));
  height: calc(68px * var(--member-scale));
  padding: 0;
  border: 2px solid #DE1F26;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--font-size-20);
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
}

.member-hero .member-action-primary,
.member-status .member-action-primary,
.member-solution .member-action-primary,
.member-services .member-action-primary,
.member-cta .member-action-primary {
  background: #DE1F26;
  color: #FFFFFF;
  transition: background-color 0.15s ease-in;
}

.member-hero .member-action-primary:hover,
.member-status .member-action-primary:hover,
.member-solution .member-action-primary:hover,
.member-services .member-action-primary:hover,
.member-cta .member-action-primary:hover {
  background: #ED5055;
}

.member-hero .member-action-secondary,
.member-status .member-action-secondary,
.member-solution .member-action-secondary,
.member-services .member-action-secondary,
.member-cta .member-action-secondary {
  background: transparent;
  color: #DE1F26;
}

.member-hero .member-actions button:focus-visible,
.member-status .member-actions button:focus-visible,
.member-solution .member-actions button:focus-visible,
.member-services .member-actions button:focus-visible,
.member-cta .member-actions button:focus-visible {
  outline: 2px solid #DE1F26;
  outline-offset: calc(4px * var(--member-scale));
}

.member-status {
  box-sizing: border-box;
  padding: calc(120px * var(--member-scale)) calc(24px * var(--member-scale));
  background: #EEF4FE;
  text-align: center;
}

.member-status .member-section-header h2,
.member-solution .member-section-header h2,
.member-journey .member-section-header h2,
.member-services .member-section-header h2,
.member-cases .member-section-header h2 {
  margin: 0;
  color: #333333;
  font-size: var(--font-size-60);
  font-weight: 600;
  line-height: normal;
}

.member-status .member-section-description,
.member-solution .member-section-description,
.member-services .member-section-description {
  margin: calc(12px * var(--member-scale)) 0 0;
  color: #6B6F7B;
  font-size: var(--font-size-28);
  font-weight: 400;
  line-height: normal;
}

.member-status-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(30px * var(--member-scale));
  max-width: var(--member-content-width);
  margin: calc(40px * var(--member-scale)) auto 0;
  padding: 0;
  list-style: none;
}

.member-status-item {
  box-sizing: border-box;
  min-height: calc(294px * var(--member-scale));
  padding: calc(48px * var(--member-scale)) calc(24px * var(--member-scale)) calc(40px * var(--member-scale));
  border-radius: calc(30px * var(--member-scale));
  background: #FFFFFF;
}

.member-status-icon {
  width: calc(60px * var(--member-scale));
  height: calc(60px * var(--member-scale));
  margin: 0 auto calc(42px * var(--member-scale));
}

.member-status-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.member-status-item h3 {
  margin: 0;
  color: #111111;
  font-size: var(--font-size-24);
  font-weight: 500;
  line-height: calc(24px * var(--member-scale));
}

.member-status-item p {
  max-width: calc(224px * var(--member-scale));
  margin: calc(20px * var(--member-scale)) auto 0;
  color: #999999;
  font-size: var(--font-size-14);
  font-weight: 400;
  line-height: calc(20px * var(--member-scale));
}

.member-status .member-actions,
.member-solution .member-actions,
.member-services .member-actions,
.member-cta .member-actions {
  display: flex;
  justify-content: center;
  gap: calc(20px * var(--member-scale));
  margin-top: calc(60px * var(--member-scale));
}

.member-solution {
  box-sizing: border-box;
  padding: calc(120px * var(--member-scale)) calc(24px * var(--member-scale)) calc(80px * var(--member-scale));
  background: #FFFFFF;
  text-align: center;
}

.member-solution-overview {
  display: block;
  width: 100%;
  max-width: var(--member-content-width);
  height: auto;
  margin: calc(40px * var(--member-scale)) auto 0;
}

.member-journey {
  box-sizing: border-box;
  padding: calc(120px * var(--member-scale)) calc(24px * var(--member-scale));
  background: #EEF4FE;
  text-align: center;
}

.member-journey-overview {
  display: block;
  width: 100%;
  max-width: calc(1060px * var(--member-scale));
  height: auto;
  margin: calc(40px * var(--member-scale)) auto 0;
}


.member-services {
  box-sizing: border-box;
  padding: calc(120px * var(--member-scale)) calc(24px * var(--member-scale)) calc(140px * var(--member-scale));
  background: #FFFFFF;
  text-align: center;
}

.member-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(80px * var(--member-scale)) calc(30px * var(--member-scale));
  max-width: var(--member-content-width);
  margin: calc(90px * var(--member-scale)) auto 0;
  padding: 0;
  list-style: none;
}

.member-service-card {
  --member-service-color: #1685FF;
  position: relative;
  box-sizing: border-box;
  min-height: calc(320px * var(--member-scale));
  padding: calc(66px * var(--member-scale)) calc(24px * var(--member-scale)) calc(24px * var(--member-scale));
  border-radius: calc(30px * var(--member-scale));
  background: linear-gradient(236deg, #C6D9FE99 3%, #E5F7FC99 95%);
}

.member-service-icon {
  position: absolute;
  top: calc(-50px * var(--member-scale));
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100px * var(--member-scale));
  height: calc(100px * var(--member-scale));
  transform: translateX(-50%);
}

.member-service-icon img {
  /* 原图 260px 含透明留白，缩放后白色圆底为 100px。 */
  position: absolute;
  top: calc(-11px * var(--member-scale));
  left: calc(-15px * var(--member-scale));
  display: block;
  width: calc(130px * var(--member-scale));
  height: calc(130px * var(--member-scale));
}

.member-service-card h3 {
  margin: 0;
  color: #333333;
  font-size: var(--font-size-36);
  font-weight: 500;
  line-height: normal;
}

.member-service-items {
  width: max-content;
  max-width: 100%;
  margin: calc(24px * var(--member-scale)) auto 0;
  padding: 0;
  list-style: none;
  color: #333333;
  font-size: var(--font-size-20);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.member-service-items li {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: calc(16px * var(--member-scale));
}

.member-service-items li + li {
  margin-top: calc(12px * var(--member-scale));
}

.member-service-items li::before {
  content: '';
  flex: 0 0 calc(6px * var(--member-scale));
  width: calc(6px * var(--member-scale));
  height: calc(12px * var(--member-scale));
  border-right: 3px solid var(--member-service-color);
  border-bottom: 3px solid var(--member-service-color);
  transform: rotate(45deg);
}

.member-service-acquisition { --member-service-color: #20B82C; }
.member-service-operations { --member-service-color: #FF8A00; }
.member-service-conversion { --member-service-color: #FF555B; }
.member-service-private-domain { --member-service-color: #13B3C5; }
.member-service-analytics { --member-service-color: #9460FF; }











.member-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: calc(760px * var(--member-scale));
  padding: calc(120px * var(--member-scale)) calc(24px * var(--member-scale));
  background: #F7FBFF url('../img/operate/member/member-cooperation-background.png') center / cover no-repeat;
  text-align: center;
  color: #333333;
}

.member-cta-description {
  margin: 0;
  font-size: var(--font-size-48);
  font-weight: 500;
  line-height: normal;
}

.member-cta-description span {
  color: #DE1F26;
}

.member-cta h2 {
  margin: calc(16px * var(--member-scale)) 0 0;
  color: #333333;
  font-size: var(--font-size-90);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.05em;
}





/* 品牌成功案例：两张小程序截图与案例详情。 */
.member-cases {
  box-sizing: border-box;
  padding: calc(120px * var(--member-scale)) calc(24px * var(--member-scale)) calc(180px * var(--member-scale));
  background: #EEF4FE;
  text-align: center;
}

.member-cases-slider {
  max-width: var(--member-content-width);
  margin: calc(40px * var(--member-scale)) auto 0;
  overflow: hidden;
}

.member-case-slide {
  display: grid;
  grid-template-columns: calc(490px * var(--member-scale)) minmax(0, 1fr);
  gap: calc(30px * var(--member-scale));
  box-sizing: border-box;
  text-align: left;
}

.member-case-screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: calc(30px * var(--member-scale));
}

.member-case-screens img {
  display: block;
  width: 100%;
  height: auto;
}

.member-case-content {
  min-width: 0;
}

.member-case-brand {
  display: flex;
  align-items: center;
  gap: calc(16px * var(--member-scale));
  box-sizing: border-box;
  min-height: calc(120px * var(--member-scale));
  padding: calc(20px * var(--member-scale)) calc(40px * var(--member-scale));
  border-radius: calc(20px * var(--member-scale));
  background: #FFFFFF;
}

.member-case-logo {
  flex: 0 0 calc(80px * var(--member-scale));
  width: calc(80px * var(--member-scale));
  height: calc(80px * var(--member-scale));
}

.member-case-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.member-case-brand h3 {
  margin: 0;
  color: #333333;
  font-size: var(--font-size-22);
  font-weight: 600;
  line-height: normal;
}

.member-case-brand p {
  margin: calc(8px * var(--member-scale)) 0 0;
  color: #333333;
  font-size: var(--font-size-14);
  font-weight: 400;
  line-height: calc(20px * var(--member-scale));
  text-align: justify;
}

.member-case-details {
  display: grid;
  grid-template-columns: 1.275fr 1.275fr 1fr;
  gap: calc(30px * var(--member-scale));
  margin-top: calc(30px * var(--member-scale));
}

.member-case-panel {
  box-sizing: border-box;
  min-width: 0;
  min-height: calc(320px * var(--member-scale));
  padding: calc(24px * var(--member-scale)) calc(40px * var(--member-scale));
  border-radius: calc(20px * var(--member-scale));
  background: #FFFFFF;
}

.member-case-panel h4 {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--member-scale));
  margin: 0 0 calc(16px * var(--member-scale));
  color: #333333;
  font-size: var(--font-size-20);
  font-weight: 500;
  line-height: calc(28px * var(--member-scale));
}

.member-case-panel h4::before {
  content: '';
  flex: 0 0 calc(12px * var(--member-scale));
  width: calc(12px * var(--member-scale));
  height: calc(12px * var(--member-scale));
  background: url('../img/operate/member/member-case-heading-marker.png') center / contain no-repeat;
}

.member-case-panel p,
.member-case-strategy-list {
  margin: 0;
  color: #333333;
  font-size: var(--font-size-14);
  font-weight: 400;
  line-height: calc(20px * var(--member-scale));
  text-align: justify;
}

.member-case-panel p + p {
  margin-top: calc(16px * var(--member-scale));
}

.member-case-strategy-list {
  padding-left: calc(18px * var(--member-scale));
}

.member-case-strategy-list li {
  list-style: decimal;
}

.member-case-results dl {
  margin: 0;
}

.member-case-results dl > div {
  display: flex;
  flex-direction: column;
}

.member-case-results dl > div + div {
  margin-top: calc(12px * var(--member-scale));
}

.member-case-results dt {
  order: 1;
  margin-top: calc(4px * var(--member-scale));
  color: #333333;
  font-size: var(--font-size-16);
  line-height: calc(24px * var(--member-scale));
}

.member-case-results dd {
  margin: 0;
  color: #DE1F26;
  font-size: var(--font-size-30);
  font-weight: 600;
  line-height: calc(42px * var(--member-scale));
}

.member-cases-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12px * var(--member-scale));
  margin-top: calc(40px * var(--member-scale));
}

.member-cases-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: calc(14px * var(--member-scale));
  height: calc(14px * var(--member-scale));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  opacity: 1;
  cursor: pointer;
}

.member-cases-pagination .swiper-pagination-bullet-active {
  width: calc(56px * var(--member-scale));
  background: #C4DFFF;
}

.member-cases-pagination button:focus-visible {
  outline: 2px solid #1767FF;
  outline-offset: calc(4px * var(--member-scale));
}

@media screen and (max-width: 1650px) {
  .member-page-content {
    --member-scale: 0.86;
    --member-content-width: 1300px;
    --member-header-height: 88px;
  }
}

@media screen and (max-width: 1420px) {
  .member-page-content {
    --member-scale: 0.73;
    --member-content-width: 1100px;
    --member-header-height: 78px;
  }
}