.franchise-banner{
  width: 100%;
  padding-top: 1.32rem;
}
.franchise-banner img {
  width: 100%;
  object-fit: cover;
}
/*门店效果图*/
.join-store-show {
  padding: 0.96rem 0;
  background: #fff;
  text-align: center;
}
.join-title{
  text-align: center;
  margin-bottom: 0.49rem;
}
.join-title h2 {
  font-family: SourceHanSansCN-Heavy;
  font-size: 0.56rem;
  font-weight: bolder;
  font-stretch: normal;
  color: #282828;
}

.join-title p {
  font-family: SourceHanSansCN-Light;
  font-size: 0.39rem;
  font-weight: normal;
  font-stretch: normal;
  color: #282828;
  margin-top: 0.1rem;
}

.join-store-grid {
  max-width: 1680px;
  margin: 0.8rem auto 0;
  display: flex;
  gap: 0.27rem;
}
.store-main{
  width: 54%;
  overflow: hidden;
  display: block;
}
.store-main img{
  width: 100%;
  object-fit: cover;
}
.store-sub {
  width: 46%;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between ;
  gap: 0.27rem;
}

.store-sub img {
  width: 48%;
  border-radius: 0.12rem;
}
.store-sub img:nth-of-type(3){
  width: 100%;
}


/* ===== 红色担忧问题模块 ===== */

.join-worry {
  width: 100%;
  background: #fff; /* 主红色背景 */
  padding: 0 0 0.45rem 0;
}

.worry-mask {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* 中间担忧主图 */
.worry-mask img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* 底部结果提示语 */
.worry-result {
  margin-top: 0.61rem;
  margin-bottom: 0.25rem;
  font-family: SourceHanSansCN-Heavy;
  font-size: 0.56rem;
  font-weight: bold;
  font-stretch: normal;
  color: #282828;
  letter-spacing: 0.05rem;
  position: relative;
}

/* 小装饰倒三角（可选，和你图里一致） */
.worry-result::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 0.12rem solid transparent;
  border-right: 0.12rem solid transparent;
  border-top: 0.16rem solid #c72729;
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  transform: translateX(-50%);
}


/*硬核扶持政策*/
.join-support-policy {
  padding: 0.81rem 0 0.57rem 0;
  background-image: url(../images/support_policybg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.join-support-policy .join-title{
  text-align: center;
  margin-bottom: 0.49rem;
}
.join-support-policy h2{
  font-family: SourceHanSansCN-Regular;
  font-size: 0.56rem;
  font-weight: normal;
  font-stretch: normal;
  color: #282828;
  padding-bottom: 0.1rem;
}
.join-support-policy p{
  font-family: SourceHanSansCN-Heavy;
  font-size: 0.56rem;
  font-weight: normal;
  color: #c72729;
}
 
.policy-grid {
  max-width: 1680px;
  margin: 0.8rem auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
}

.policy-item {
  background: #c72729;
  color: #282828;
  background: #ffffff;
  text-align: left;
  padding: 0.4rem 0;
  border-radius: 0.08rem;
  font-size: 0.24rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.policy-item span{
  font-family: SourceHanSansCN-Regular;
  font-size: 0.42rem;
  font-weight: normal;
  font-stretch: normal;
  color: #c72729;
}
.policy-item p{
  font-family: SourceHanSansCN-Regular;
  font-size: 0.17rem;
  font-weight: normal;
  font-stretch: normal;
  color: #282828;
}
/* 第 2 列（2, 7, 12, 17, 22, 27...） */
.policy-item:nth-child(5n+2),
.policy-item:nth-child(5n+4) {
  background: #c72729;
  color: #fff;
}

.policy-item:nth-child(5n+2) span,
.policy-item:nth-child(5n+4) span{
  color: #ffffff!important;
}


/*优秀加盟商门店*/
.join-store-list{
  padding: 0.77rem 0 0.43rem 0;
}
.join-store-list h2{
  font-family: SourceHanSansCN-Regular;
  font-size: 0.56rem;
  font-weight: bold;
  font-stretch: normal;
  color: #282828;
  padding-bottom: 0.1rem;
}
.join-store-list p{
  font-family: SourceHanSansCN-Heavy;
  font-size: 0.56rem;
  font-weight: normal;
  color: #282828;
}
.store-list-grid {
  width: 100%;
  max-width: 1680px;
  margin:0.8rem auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  overflow: hidden;
  padding: 0.33rem 0;
}

.store-item{
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 10px;
}
.store-item img{
  width: 100%;
  object-fit: cover;
}
.store-item p {
  width: 100%;
  text-align: center;
  padding: 0.15rem 0;
  font-size: 0.22rem;
  position: absolute;
  bottom: 0;
  color: #fff;
  background-color: rgba(40, 40, 40, 0.75);
  border-radius: 0rem 0rem 0.13rem 0.13rem;
}


/*全链条整店输出*/
.join-output-chain{
  padding: 0.51rem 0 0.76rem 0;
  background-color: #c72729;
}
.join-output-chain h2{
  font-family: SourceHanSansCN-Regular;
  font-size: 0.56rem;
  font-weight: bold;
  font-stretch: normal;
  color: #efefef;
  padding-bottom: 0.1rem; 
}
.join-output-chain p{
  font-family: SourceHanSansCN-Heavy;
  font-size: 0.56rem;
  font-weight: normal;
  color: #efefef;
}
.output-grid {
  width: 100%;
  max-width: 1680px;
  margin:0.8rem auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.11rem;
  overflow: hidden;
  padding: 0.35rem 0.14rem;
  background-color: #ffffff;
  border-radius: 0.07rem;
}

.output-item{
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 10px;
}
.output-item img{
  width: 100%;
  object-fit: cover;
}
.output-item p {
  width: 100%;
  text-align: center;
  padding: 0.15rem 0;
  font-size: 0.22rem;
  position: absolute;
  bottom: 0;
  color: #fff;
  background-color: rgba(199, 39, 41, 0.9);
  border-radius: 0rem 0rem 0.13rem 0.13rem;
}




/* ==============================
移动端响应式（max-width: 750px）
============================== /*/
@media screen and (max-width: 750px) {

  html { font-size: calc(100vw / 750 * 100); }


  .layout { max-width: 100%; padding: 0 0.4rem; }

  /* ===== banner ===== */
  .franchise-banner { padding-top: 0.8rem; }
  .franchise-banner img { width: 100%; height: auto; display: block; object-fit: cover; }

  /* ===== 门店效果图（左右两列 -> 上下堆叠） ===== */
  .join-store-show { padding: 0.7rem 0; }
  .join-title { margin-bottom: 0.4rem; }
  .join-title h2 { font-size: 0.48rem; }
  .join-title p { font-size: 0.34rem; }

  .join-store-grid {
  width: 100%;
  margin: 0.6rem auto 0;
  display: flex;
  flex-direction: column; /* 改为列方向 */
  gap: 0.36rem;
  padding: 0;
  }

  .store-main { width: 100%; }
  .store-main img { width: 100%; height: auto; border-radius: 0.12rem; display:block; }

  .store-sub {
  width: 100%;
  display: flex;
  gap: 0.27rem;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.2rem;
  }
  .store-sub img {
  width: calc(50% - 0.135rem);
  border-radius: 0.12rem;
  display:block;
  }
  /* 第三图占整行 */
  .store-sub img:nth-of-type(3) { width: 100%; }

  /* ===== 担忧问题模块（红/白） ===== */
  .join-worry { padding: 0.5rem 0 0.4rem; background: #fff; }
  .worry-mask { padding: 0 0.2rem; }
  .worry-mask img { width: 100%; height: auto; display: block; border-radius: 0.12rem; }
  .worry-result {
  margin-top: 0.5rem;
  font-size: 0.46rem;
  color: #282828;
  letter-spacing: 0.02rem;
  }
  .worry-result::after { bottom: -0.28rem; border-top-width: 0.12rem; }

  /* ===== 硬核扶持政策（grid 5 列 -> 2 列/单列） ===== */
  .join-support-policy { padding: 0.6rem 0; background-size: cover; background-position: center; }
  .join-support-policy .join-title { margin-bottom: 0.35rem; }
  .join-support-policy h2 { font-size: 0.42rem; }
  .join-support-policy p { font-size: 0.36rem; }

  .policy-grid {
  width: 100%;
  margin: 0.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 由 5 列变 2 列 */
  gap: 0.18rem;
  padding: 0 0.15rem;
  }

  .policy-item {
  padding: 0.32rem 0.25rem;
  font-size: 0.2rem;
  align-items: center;
  border-radius: 0.12rem;
  min-height: auto;
  }
  .policy-item span { font-size: 0.36rem; margin-right: 0.18rem; }
  .policy-item p { font-size: 0.16rem; line-height: 0.28rem; }

}

@media screen and (max-width: 750px) {

  /* ===== 优秀加盟商门店（grid 4 列 -> 2 列） ===== */
  .join-store-list { padding: 0.6rem 0 0.35rem; }
  .join-store-list .join-title { margin-bottom: 0.36rem; }
  .join-store-list h2 { font-size: 0.48rem; }
  .join-store-list p { font-size: 0.36rem; }

  .store-list-grid {
  max-width: 100%;
  margin: 0.5rem auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 4 -> 2 列 */
  gap: 0.2rem;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 0.25rem 0.2rem;
  }

  .store-item { border-radius: 0.12rem; overflow: hidden; }
  .store-item img { width: 100%; height: auto; display:block; }
  .store-item p {
  font-size: 0.18rem;
  padding: 0.12rem 0;
  }
}


@media screen and (max-width: 750px) {

  /* ===== 全链条整店输出（6 列 -> 3 或 2 列） ===== */
  .join-output-chain {
  padding: 0.6rem 0 0.8rem;
  background-color: #c72729;
  }
  .join-output-chain .join-title { margin-bottom: 0.36rem; }
  .join-output-chain h2 { font-size: 0.44rem; color: #fff; }
  .join-output-chain p { font-size: 0.36rem; color: #fff; }

  .output-grid {
  max-width: 100%;
  margin: 0.6rem auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 6 -> 3 列 */
  gap: 0.18rem;
  padding: 0.25rem;
  background-color: #ffffff;
  border-radius: 0.08rem;
  }

  .output-item { border-radius: 0.12rem; overflow: hidden; }
  .output-item img { display:block; width: 100%; height: auto; }
  .output-item p { font-size: 0.16rem; padding: 0.12rem 0; }

}

@media (max-width: 420px) {
.output-grid { grid-template-columns: repeat(2, 1fr); gap: 0.14rem; }
.output-item p { font-size: 0.14rem; }
}

@media screen and (max-width: 750px) {

  /* ===== 通用视觉微调 ===== */
  /*h2 { line-height: 1.2; }
  img { max-width: 100%; height: auto; display: block; }*/

  /* 点击目标（便于移动端触达） */
  .store-item, .policy-item, .output-item, .qrcode-item { touch-action: manipulation; }
  }

}

/* ==============================
超小屏优化 (max-width: 375px)
============================== // 如果你需要更细致缩放可以启用 */
@media screen and (max-width: 375px) {
html { font-size: calc(100vw / 375 * 100); } 
.join-title h2 { font-size: 0.44rem; }
.join-title p { font-size: 0.32rem; }
.worry-result { font-size: 0.42rem; }
.policy-item span { font-size: 0.32rem; }
.policy-item p { font-size: 0.14rem; }
.store-item p, .output-item p { font-size: 0.14rem; }
.qrcode-item p { font-size: 0.16rem; }
}