/* 移动端首页 —— 复刻 m.hstypay.com 内容区（.page 结构）。
 * 仅 ≤767px 生效：隐藏桌面首页 .index_wrap，显示 .m-home 移动 DOM。
 * 布局单位沿用原站 vw（100vw = 屏宽），天然按屏宽缩放。
 * 全部规则收敛在 .m-home 作用域 + media query 内，不影响桌面视觉与其他页面。
 */

.m-home {
  display: none;
}

@media screen and (max-width: 767px) {
  /* 移动端隐藏桌面首页主体，改显 m 站移动内容区 */
  .index_wrap {
    display: none !important;
  }
  .m-home {
    display: block;
    width: 100%;
    overflow: hidden;
    background: #fff;
  }

  .m-home .flex-row { display: flex; flex-direction: row; }
  .m-home .flex-col { display: flex; flex-direction: column; }
  .m-home .clearfix::after { content: ""; display: block; clear: both; }

  /* 头部大图 */
  .m-home .header {
    width: 100%;
    height: 125.33333vw;
    background: url(../images/21c6dc54b9fba38f3d94ecb5406c7886.png) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .m-home .white-btn {
    margin: 93.33333vw auto 0;
    width: 34.26667vw;
    height: 8vw;
    min-height: 0; /* 覆盖 responsive.css 全局 a{min-height:44px}，否则按钮被顶高 */
    border-radius: 4vw;
    background-color: #fff;
    font-size: 3.73333vw;
    line-height: 3.73333vw;
    font-weight: 700;
    color: #4272ee;
    text-align: center;
    padding: 2.13333vw 0;
    display: block;
    text-decoration: none;
    box-sizing: border-box;
  }

  /* 通用标题 */
  .m-home h3.title2 {
    color: #333;
    padding-top: 13.33333vw;
    font-size: 4.8vw;
    line-height: 6.13333vw;
    text-align: center;
    font-weight: 700;
    margin: 0;
  }
  .m-home h3.title2::after {
    content: "";
    display: block;
    margin: 4vw auto 10.66667vw;
    width: 5.33333vw;
    height: 0.53333vw;
    background-color: #4272ee;
  }
  .m-home .part2-title {
    display: block;
    color: #333;
    font-size: 3.2vw;
    line-height: 4.26667vw;
    margin-top: 2.66667vw;
    text-align: center;
    font-weight: 400;
    padding: 0 8vw;
  }

  /* section1 文字列表 */
  .m-home .section1 .top { width: 100%; }
  .m-home .section1 .center {
    width: 60.26667vw;
    height: 51.33333vw;
    align-self: center;
  }
  .m-home .section1 .center .center-img { width: 100%; }
  .m-home .section1 .bottom { margin: 10.93333vw 0 10.13333vw 23.2vw; }
  .m-home .section1 .bottom li {
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 3.2vw;
    color: #333;
  }
  .m-home .section1 .bottom li .radios {
    width: 2.13333vw;
    height: 2.13333vw;
    border: 0.53333vw solid #4272ee;
    border-radius: 50%;
    margin-right: 2.13333vw;
    flex-shrink: 0;
  }
  .m-home .section1 .bottom li .bt-info {
    font-size: 3.46667vw;
    height: 4.93333vw;
    line-height: 4.93333vw;
    margin: 0;
  }

  /* section2 背景大图 */
  .m-home .section2 { width: 100%; }
  .m-home .section2 img { width: 100%; display: block; }

  /* section3 轮播 */
  .m-home .section3 { background: #fafbfc; }
  .m-home .section3 .img_pic {
    width: 64vw;
    height: 45.33333vw;
    margin: 0 auto;
  }
  .m-home .section3 .inde_top_1 { background: url(../images/40faf8882770329ed0abb21b22c27be8.png) no-repeat; background-size: cover; }
  .m-home .section3 .inde_top_2 { background: url(../images/e43c1c2e35966112bb11bcce1037532b.png) no-repeat; background-size: cover; }
  .m-home .section3 .inde_top_3 { background: url(../images/b8b9a6c1e44d69d7ced5ee7d4b1da9d6.png) no-repeat; background-size: cover; }
  .m-home .content-text {
    font-size: 3.46667vw;
    color: #333;
    line-height: 4.93333vw;
    padding: 8vw 7.2vw 0;
    text-align: center;
  }

  /* swiper 通用（复用主题 main.js 的 initSwiper） */
  .m-home .swiper-container {
    width: 100%;
    padding-bottom: 14.93333vw;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }
  .m-home .swiper-wrapper { display: flex; }
  .m-home .swiper-slide { text-align: center; align-items: center; }
  .m-home .swiper-button-next,
  .m-home .swiper-button-prev { display: none; }
  .m-home .swiper-pagination {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 9.06667vw;
    left: 0;
    right: 0;
  }
  .m-home .swiper-pagination .swiper-pagination-bullet {
    width: 3.73333vw;
    height: 0.53333vw;
    display: block;
    background: #d1e1fd;
    border-radius: 0.26667vw;
    margin: 0 0.8vw;
  }
  .m-home .swiper-pagination .swiper-pagination-bullet-active { background: #4272ee; }

  /* section5 peek 轮播的分页点：脱离 banner 的 absolute 叠层，回归正常流并与轮播留间距 */
  .m-home .section5 #mHomeSwiper2.swiper-peek .swiper-pagination2 {
    position: static !important;
    margin-top: 5.33333vw;
  }

  /* section4 合作伙伴九宫格 */
  .m-home .section4,
  .m-home .section4 .top { width: 100%; }
  .m-home .section4 ul {
    display: flex;
    margin: 0 1.33333vw 13.33333vw 4.26667vw;
    flex-wrap: wrap;
  }
  .m-home .section4 ul li {
    width: 29.33333vw;
    height: 17.86667vw;
    border-radius: 0.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 2vw;
    margin-bottom: 2.66667vw;
    box-shadow: 0 0 2.66667vw rgba(0, 0, 0, 0.08);
  }
  .m-home .section4 ul li img { width: 29.33333vw; }

  /* section5 底部轮播（复刻 m.站 #swiper2：slidesPerView:1.5 + centeredSlides） */
  .m-home .section5 {
    width: 100%;
    background: #fafbfc;
    padding-bottom: 5.33333vw;
    overflow: hidden;
  }
  .m-home .section5 .top { width: 100%; }

  /* peek 模式：原生横向滚动 + scroll-snap 居中吸附，两侧露出相邻张 */
  .m-home .section5 #mHomeSwiper2.swiper-peek {
    width: 100%;
    padding: 4vw 0 2.66667vw;
  }
  .m-home .section5 #mHomeSwiper2.swiper-peek .swiper-wrapper {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox 隐藏滚动条 */
  }
  .m-home .section5 #mHomeSwiper2.swiper-peek .swiper-wrapper::-webkit-scrollbar {
    display: none;                    /* WebKit 隐藏滚动条 */
  }
  /* 每张 54.667vw 宽 + 左右间距 15px（≈m.站 spaceBetween:30 分摊两侧），居中吸附 */
  .m-home .section5 #mHomeSwiper2.swiper-peek .swiper-slide {
    flex: 0 0 auto;
    width: 54.66667vw;
    margin: 0 15px;
    scroll-snap-align: center;
    opacity: 0.55;
    transform: scale(0.9);
    transition: opacity .4s ease, transform .4s ease;
  }
  .m-home .section5 #mHomeSwiper2.swiper-peek .swiper-slide.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
  }
  .m-home .section5 #mHomeSwiper2.swiper-peek .swiper-slide img {
    width: 100%;
    height: 54.66667vw;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
  }
  .m-home .section5 img { width: 54.66667vw; height: 54.66667vw; }
}