/* ==========================================================================
   首页纵向节奏（统一间距标准，全站唯一真源）
   --sec-pad-y   模块顶部留白（也用于深色卡片内部顶部）
   --sec-btn-gap 内容区 → 了解更多按钮
   --sec-bottom  按钮 → 模块底部 / 模块与模块之间
   ========================================================================== */
   :root{
    --sec-pad-y: 80px;
    --sec-btn-gap: 48px;
    --sec-bottom: 56px;
  }
  body{
    background: #fff
  }
  .container{
    width: 1200px;
    height: auto;
    margin:0px auto;
    overflow: hidden;
  }
  .ad{
    width: 100%;
    min-width: 1200px;
    height: auto;
    margin:0px auto;
    overflow: hidden;
    padding-top: 100px;
    z-index: 100;
    clear: both;
  }
  .ad img{
    width: 110%;
    min-width: 1200px;
    left: 0;
    height: 100%;
    transition: transform 0.3s ease;
    z-index: 100
  }
  .ad img:hover{
    transform: scale(1.05, 1.05);
    z-index: 100
  }
  .item1{
    width: 1200px;
    height: auto;
    margin:0px auto;
    overflow: hidden;
    margin-top: 25px;
    z-index: 100;
    border-radius: 8px
  }
  .item1 img{
    width: 100%;
    min-width: 1200px;
    left: 0;
    height: 100%;
    transition: transform 0.3s ease;
    z-index: 100
  }
  .item1 img:hover{
    transform: scale(1.05, 1.05);
    z-index: 100
  }
  .container .desc{
    width: 1200px;
    height: auto;
    margin:0px auto;
    overflow: hidden;
    text-align: center;
    line-height: 24px;
    padding-top: 35px;
    padding-bottom: 35px
  }
  .container .title{
    width: 1200px;
    height: auto;
    margin:0px auto;
    overflow: hidden;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 25px
  }
  .container .news{
    width: 1200px;
    height: auto;
    margin:0px auto;
    overflow: hidden;
  }
  .container .news .one{
    width: 565px;
    height: 180px;
    float: left;
    overflow: hidden;
    border-radius: 12px;
    border:1px solid #f2f2f2;
    margin-bottom: 32px;
    background: #fff;
    margin:15px;
    transition: width 0.1s ease, height 0.1s ease;
    box-shadow: 5px 5px 10px #eee;
  }
  .container .news .one:hover{
    width: 570px;
    height: 180px;
    float: left;
    overflow: hidden;
    border-radius: 12px;
    border:1px solid #f2f2f2;
    margin-bottom: 32px;
    background: #fff;
    margin:15px;

  }
  .container .news .one .one-left{
    width: 125px;
    height: 180px;
    float: left;
    overflow: hidden;
  }
  .container .news .one .one-left img{
    width: 125px;
    height: 180px;
  }

  .container .news .one .one-right{
    width: 400px;
    height: auto;
    float: left;
    overflow: hidden;
    font-size: 14px;
    padding-left: 22px;
  }
  .container .news .one .one-right .title{
    width: 400px;
    height: 18px;
    font-size: 14px;
    float: left;
    overflow: hidden;
    text-align: left;
    font-weight: normal;
    padding-top: 20px
  }
  .container .news .one .one-right .title a{
    color: #000;
    font-size: 16px
  }
  .container .news .one .one-right .desc{
    width: 400px;
    height: 60px;
    font-size: 14px;
    float: left;
    overflow: hidden;
    color: #999;
    text-align: left;
    margin-top: -50px
  }
  .container .news .one .one-right .date{
    width: 400px;
    height: auto;
    font-size: 14px;
    float: left;
    overflow: hidden;
    color: #999;
    margin-top: -10px
  }
  .container .news .one .one-right .date span.d{
    width: 250px;
    height: auto;
    float: left;
    overflow: hidden;
  }
  .container .news .one .one-right .date span.view{
    width: 140px;
    height: auto;
    float: right;
    overflow: hidden;
    text-align: right;
    padding-right: 10px
  }
  .container .detail{
    width: 1200px;
    height: auto;
    margin:0px auto;
    overflow: hidden;
    clear: both;
    background: #fff;
    border-radius: 8px;
    margin-top: 150px;
    padding-bottom: 30px;
    padding-top: 35px;
    padding-bottom: 45px
  }
  .container .detail .title{
    width: 1200px;
    height: auto;
    margin:0px auto;
    overflow: hidden;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 25px
  }
  .container .detail .sub{
    width: 1100px;
    height: auto;
    margin:0px auto;
    overflow: hidden;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    padding-bottom: 25px;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 35px;
    color: #999
  }
  .container .detail .body{
    width: 1100px;
    height: auto;
    margin:0px auto;
    overflow: hidden;
    font-size: 14px;
    font-weight: normal;
    color: #999;
    line-height: 32px
  }

  .product{
    width: 100%;
    min-width: 1200px;
    height: auto;
    padding: var(--sec-pad-y) 0 var(--sec-bottom);
    background-image: url('../images/index_new_01.jpg');
  }
  .product .product-width{
    width: 1200px;
    height: auto;
    margin: 0px auto;
    clear: both;
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  .product .product-width .product-left{
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    overflow: hidden;
  }
  .product .product-width .product-left .top-title{
    width: 100%;
    max-width: 429px;   /* 原图 design 宽度，文本版按它排版不跑版 */
    height: auto;
    overflow: hidden;
    margin-bottom: 24px
  }
  .product .product-width .product-left .top-title img{
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* ==========================================================================
     首页区块标题：图片 → 纯文本（2026-10-30）
     --------------------------------------------------------------------------
     原先三处标题是文案图（index_new_02 / 04 / 05），机翻取不到、SEO 读不到。
     改成真文本后插件能翻、搜索引擎和读屏软件都能读。

     下面所有数值都是按原图 1:1 量的（图片在页面上就是原尺寸显示）：
       品牌蓝 #2e73a6 ｜ 标题黑 #000（畅销榜单）/#333（其余）｜ 装饰浅灰 #e4e4e4 ｜ 副标题 #999
       畅销榜单 35px ｜ 产品优势·专卖店展示 34px ｜ 副标题 16px ｜ HOT PRODUCTS 21px ｜ BESTSELLER LIST 44px
     ========================================================================== */

  /* ① 畅销榜单：蓝色小标 + 浅灰英文水印 + 黑色大标题 + 小色块 */
  .product .product-width .product-left .top-title .tt-tag{
    position: relative;
    margin: 0;
    padding-left: 20px;
    height: 30px;
    line-height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;          /* 原图 cap 高 14px、整串宽 137px */
    font-weight: 700;
    letter-spacing: .4px;
    color: #2e73a6;
  }
  .product .product-width .product-left .top-title .tt-tag::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 30px;
    background: #2e73a6;
  }
  .product .product-width .product-left .top-title .tt-en{
    margin: 18px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;          /* 原图大写高 35px、整串宽 427px（429 容器刚好铺满） */
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #e4e4e4;
    white-space: nowrap;
  }
  .product .product-width .product-left .top-title .tt-cn{
    display: flex;
    align-items: center;
    margin: 24px 0 0;
    font-size: 34px;          /* 原图 4 字宽 135px → 全角字宽 = 字号 */
    line-height: 1;
    font-weight: 700;
    color: #000;
    letter-spacing: 0;
  }
  .product .product-width .product-left .top-title .tt-cn .tt-bar{
    position: relative;
    top: 5px;                 /* 原图这个小色块比文字中线低 5px */
    display: block;
    width: 34px;
    height: 16px;
    margin-left: 13px;
    background: #000;
  }

  /* ② 产品优势 / 专卖店展示：居中大标题（前半深灰、后半品牌蓝）+ 灰色副标题 */
  .sec-title{
    margin: 0;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    color: #333;
    letter-spacing: 1px;
    text-align: center;
  }
  .sec-title span{
    color: #2e73a6;
    /* 前后两截是两个文本节点，英文翻译后会粘在一起；这一点间距让中英文都读得开 */
    margin-left: 2px;
  }
  .sec-sub{
    margin: 14px 0 0;
    font-size: 15px;          /* 原图副标题 21 字合计宽 307px */
    line-height: 1.5;
    color: #999;
    text-align: center;
  }
  .product .product-width .product-left .list{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .product .product-width .product-left .list li{
    list-style: none;
    overflow: hidden;
    background: #fff;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: transform .2s ease, box-shadow .2s ease;
    height: 288px;
  }
  .product .product-width .product-left .list li:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
  }
  .product .product-width .product-left .list li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
  }
  .product .product-width .product-right{
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
  }
  .product .product-width .product-right:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
  }
  .product .product-width .product-right .top-right{
    width: 100%;
    box-sizing: border-box;
    min-height: 182px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(14,42,61,.96) 0%, rgba(0,109,177,.82) 100%);
    background-size: cover;
    background-position: center;
    border-bottom: 2px solid #C9A96A;
  }
  .product .product-width .product-right .top-right .a-line{
    height: 44px;
    line-height: 44px;
    font-size: 34px;
    font-weight: 600;
    color: #fff;
  }
  .product .product-width .product-right .top-right .b-line{
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    color: rgba(255,255,255,.75);
  }
  .product .product-width .product-right .top-right .c-line{
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 38px;
    margin-top: 20px;
    overflow: visible;
  }
  .product .product-width .product-right .top-right .c-line > a{
    display: inline-flex;
    flex: none;
  }
  .product .product-width .product-right .top-right .c-line .left{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 20px;
    border: 1px solid rgba(201,169,106,.6);
    border-radius: 999px;
    text-align: center;
    color: #C9A96A;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .product .product-width .product-right .top-right .c-line .left:hover{
    background: #C9A96A;
    border-color: #C9A96A;
    color: #0E2A3D;
  }
  .product .product-width .product-right .top-right .c-line .right{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    line-height: 1;
    text-align: left;
    color: rgba(255,255,255,.65);
    font-size: 14px;
    white-space: nowrap;
  }
  .product .product-width .product-right .top-right .c-line .right .like-ico{
    width: 15px;
    height: 15px;
    flex: none;
    display: block;
    color: #C9A96A;
  }
  .product .product-width .product-right .one{
    width: 100%;
    height: 680px;
  }
  .product .product-width .product-right .one img{
    width: 100%;
    height: 100%;
    display: block;
  }
  /* 响应式断点统一移到文件末尾（见文件最后 RESPONSIVE 区块），
     否则会被下方各区块的 width:1200px 基础规则覆盖 */
  .technology-title{
    width: 100%;
    min-width: 1200px;
    height: auto;              /* 原 200px 固定高，靠背景图撑；改文本后交给 padding */
    margin: 0px auto;
    padding: 96px 0 44px;      /* 原图：标题上留白 97px、下留白 42px */
    overflow: hidden;
    clear: both;
    background-image: none;    /* 原 index_new_04.jpg，已改文本 */
  }
  .technology-title .my-title{
    width: 1200px;
    height: auto;
    margin: 0px auto;
    overflow: visible;         /* 原来 hidden 是为了裁背景图，文本会被裁掉字脚 */
    clear: both;
    text-align: center;
  }
  .technology-title .my-title .more{
    width: 100px;
    height: 30px;
    line-height: 30px;
    float: right;
    padding-top: 170px;
    padding-right: 20px
  }
  .technology-title-tc{
    width: 100%;
    min-width: 1200px;
    height: 200px;
    margin: 0px auto;
    overflow: hidden;
    clear: both;
    background-image: url('../images/index_new_tc_004.jpg');
    background-position: center;
    background-repeat: no-repeat;
  }
  .technology-title-tc .my-title{
    width: 1200px;
    height: auto;
    margin: 0px auto;
    overflow: hidden;
    clear: both;
  }

  .technology-title-tc .my-title .more{
    width: 100px;
    height: 30px;
    line-height: 30px;
    float: right;
    padding-top: 170px;
    padding-right: 20px
  }
  .technology-title-en{
    width: 100%;
    min-width: 1200px;
    height: 200px;
    margin: 0px auto;
    overflow: hidden;
    clear: both;
    background-image: url('../images/index_new_en_004.jpg');
    background-position: center;
    background-repeat: no-repeat;
  }
  .technology-title-en .my-title{
    width: 1200px;
    height: auto;
    margin: 0px auto;
    overflow: hidden;
    clear: both;
  }
  .technology-title-en .my-title .more{
    width: 100px;
    height: 30px;
    line-height: 30px;
    float: right;
    padding-top: 170px;
    padding-right: 20px
  }

  .technology{
    width: 1200px;
    height: auto;
    margin: 0px auto 0;
    clear: both;
    display: flex;
    gap: 32px;
    counter-reset: tech;
  }
  .technology .one-left,
  .technology .one-right{
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
    padding: 0 24px 28px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(14,42,61,.08);
    transition: transform .2s ease, box-shadow .2s ease;
    counter-increment: tech;
  }
  .technology .one-left:hover,
  .technology .one-right:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(14,42,61,.14);
  }
  .technology .one-left img,
  .technology .one-right img{
    width: calc(100% + 48px);
    height: auto;
    display: block;
    border-radius: 12px 12px 0 0;
    margin: 0 -24px 20px;
  }
  /* 优势图标徽标：骑在图片下沿的圆形徽章 */
  .technology .tech-ico{
    width: 52px;
    height: 52px;
    margin: -27px 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(201,169,106,.55);
    box-shadow: 0 6px 16px rgba(14,42,61,.12);
    color: #C9A96A;
    position: relative;
    z-index: 2;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
  }
  .technology .tech-ico svg{
    width: 24px;
    height: 24px;
    display: block;
  }
  .technology .one-left:hover .tech-ico,
  .technology .one-right:hover .tech-ico{
    background: #C9A96A;
    border-color: #C9A96A;
    color: #fff;
  }
  .technology .one-left li,
  .technology .one-right li{
    list-style: none;
    font-size: 18px;
    font-weight: 600;
    color: #0E2A3D;
    text-align: left;
  }
  .technology .one-left li:first-of-type::before,
  .technology .one-right li:first-of-type::before{
    content: '0' counter(tech);
    display: block;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    color: #C9A96A;
    margin-bottom: 8px;
  }
  .technology .one-left li.content,
  .technology .one-right li.content{
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    color: #666;
    margin-top: 12px;
    max-width: 800px;
  }
  .zhuanmaidian{
    width: 100%;
    min-width: 1200px;
    height: auto;
    padding-bottom: var(--sec-bottom);
    background-image: url('../images/index_new_01.jpg');
  }
  .zhuanmaidian .title{
    width: 100%;
    min-width: 1200px;
    height: auto;              /* 原 203px 固定高，已改文本 */
    padding: 94px 0 46px;      /* 原图：标题上留白 94px、下留白 47px */
    background-image: none;    /* 原 index_new_05.jpg，已改文本 */
  }
  .zhuanmaidian .title .more{
    position: relative;
    width: 200px;
    height: 30px;
    line-height: 30px;
    float: right;
    padding-top: 170px;
    padding-right: 20px
  }
  .zhuanmaidian .title-tc{
    width: 100%;
    min-width: 1200px;
    height: 203px;
    background-image: url('../images/index_new_tc_005.jpg');
    background-position: center;
    background-repeat: no-repeat;
  }
  .zhuanmaidian .title-tc .more{
    position: relative;
    width: 200px;
    height: 30px;
    line-height: 30px;
    float: right;
    padding-top: 170px;
    padding-right: 20px
  }
  .zhuanmaidian .title-en{
    width: 100%;
    min-width: 1200px;
    height: 203px;
    background-image: url('../images/index_new_en_005.jpg');
    background-position: center;
    background-repeat: no-repeat;
  }
  .zhuanmaidian .title-en .more{
    position: relative;
    width: 200px;
    height: 30px;
    line-height: 30px;
    float: right;
    padding-top: 170px;
    padding-right: 20px
  }
  .zhuanmaidian .store{
    width: 1200px;
    height: auto;
    margin: 0px auto;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 0;
  }
  .zhuanmaidian .store > a{
    display: block;
    flex: 0 0 calc((100% - 48px)/3);
  }
  .zhuanmaidian .store .one{
    width: 100%;
    height: 308px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    /* 图片由后台文章缩略图（img）输出；未上传缩略图时回退显示下方 nth-child 的门店图 */
    background-color: #0E2A3D;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  /* 后台缩略图：铺满卡片裁切 */
  .zhuanmaidian .store .one img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .45s ease;
  }
  /* 未上传缩略图时隐藏空 img，保留底色与门店名 */
  .zhuanmaidian .store .one img[src=""],
  .zhuanmaidian .store .one img:not([src]){
    display: none;
  }
  .zhuanmaidian .store .one::after{
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(14,42,61,0) 40%, rgba(14,42,61,.65) 100%);
    transition: opacity .25s ease;
  }
  .zhuanmaidian .store .one:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(14,42,61,.18);
  }
  .zhuanmaidian .store .one:hover img{
    transform: scale(1.05);
  }
  .zhuanmaidian .store .one .name{
    width: 100%;
    height: auto;
    line-height: 24px;
    background: none;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
    position: absolute;
    bottom: 14px;
    z-index: 2;
    text-align: center;
    box-sizing: border-box;
    padding: 0 14px;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
  }
  .join{
    width: 1200px;
    height: auto;
    margin: 0px auto;
    overflow: hidden;
    clear: both;
    background: linear-gradient(rgba(14,42,61,.90), rgba(14,42,61,.90)), url('../images/index_new_06.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 16px;
    margin-top: 0;
    margin-bottom: var(--sec-bottom)
  }

  /* fullSlide */
  .fullSlide{width:100%;position:relative;height:calc(100vh - 76px);min-height:520px;max-height:860px;margin-top:76px;background:#0E2A3D; min-width:1200px}
  .fullSlide .bd{margin:0 auto;position:relative;z-index:0;overflow:hidden;min-width:1200px;height:100%}
  .fullSlide .bd ul{width:100% !important;min-width:1200px;height:100% !important}
  .fullSlide .bd li{width:100% !important;height:100% !important;overflow:hidden;text-align:center;min-width:1200px;background-size:cover !important;background-position:center center !important}
  .fullSlide .bd li a{display:block;height:100%;}
  .fullSlide .hd{width:100%;position:absolute;z-index:1;bottom:32px;left:0;height:30px;line-height:30px;min-width:1200px}
  .fullSlide .hd ul{text-align:center;}
  .fullSlide .hd ul li{cursor:pointer;display:inline-block;*display:inline;zoom:1;width:32px;height:7px;border-radius:4px;margin:0 7px;overflow:hidden;background:rgba(255,255,255,.5);box-shadow:0 1px 4px rgba(0,0,0,.20);line-height:999px;transition:all .3s ease;vertical-align:middle}
  .fullSlide .hd ul .on{width:64px;background:#006db1;box-shadow:0 1px 6px rgba(0,0,0,.28);opacity:1}
  .fullSlide .prev,.fullSlide .next{display:block;position:absolute;z-index:2;top:50%;margin-top:-26px;left:40px;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);cursor:pointer;display:none;transition:background .25s ease,border-color .25s ease;}
  .fullSlide .next{left:auto;right:40px;}
  .fullSlide .prev::before,.fullSlide .next::before{content:'';position:absolute;top:50%;left:50%;width:12px;height:12px;border-top:2px solid #fff;border-right:2px solid #fff;}
  .fullSlide .prev::before{transform:translate(-40%,-50%) rotate(-135deg);}
  .fullSlide .next::before{transform:translate(-60%,-50%) rotate(45deg);}
  .fullSlide .prev:hover,.fullSlide .next:hover{background:#C9A96A;border-color:#C9A96A;}
  /* ==========================================================================
     模块级「了解更多」按钮（统一胶囊按钮，位于各模块底部居中）
     ========================================================================== */
  /* 加盟支持：深色卡片内部节奏 + 让 .join 的墨蓝渐变/圆角透出来
     顶部留白与卡片外部间距取同一 56px，避免标题被 80px 压得下沉 */
  .join .session_5{
    background: transparent;
    padding-top: var(--sec-bottom);
    padding-bottom: var(--sec-bottom);
  }
  /* 深色卡片标题与卡片顶部保持同一 80px 节奏（原 -30px 会把标题往上提） */
  .join .session_5 .title-box{
    margin-top: 0;
  }
  .mod-more-wrap{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: var(--sec-btn-gap);
  }
  /* 技术优势：按钮位于模块之外，底部间距由自身提供 */
  .technology + .mod-more-wrap{
    margin-bottom: var(--sec-bottom);
  }
  /* 专卖店：底部间距由 .zhuanmaidian 的 padding-bottom 提供 */
  .zhuanmaidian .store + .mod-more-wrap{
    margin-bottom: 0;
  }
  .mod-more-wrap .mod-more{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    padding: 0 30px;
    border: 1px solid rgba(201,169,106,.85);
    border-radius: 999px;
    background: transparent;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1;
    color: #0E2A3D;
    transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .mod-more-wrap .mod-more .arw{
    width: 15px;
    height: 15px;
    flex: none;
    transition: transform .25s ease;
  }
  /* 抵消 letter-spacing 在末字后多出的 2px，保证文字视觉居中 */
  .mod-more-wrap .mod-more span{
    margin-right: -2px;
  }
  .mod-more-wrap .mod-more:focus-visible{
    outline: 2px solid #C9A96A;
    outline-offset: 3px;
  }
  .mod-more-wrap .mod-more:hover{
    background: #0E2A3D;
    border-color: #0E2A3D;
    color: #C9A96A;
    box-shadow: 0 10px 24px rgba(14,42,61,.18);
  }
  .mod-more-wrap .mod-more:hover .arw{
    transform: translateX(4px);
  }
  /* 深色底区块（加盟支持）反色版本 */
  .mod-more-wrap .mod-more.on-dark{
    border-color: rgba(201,169,106,.75);
    color: #EADFC8;
  }
  .mod-more-wrap .mod-more.on-dark:hover{
    background: #C9A96A;
    border-color: #C9A96A;
    color: #0E2A3D;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
  }

  /* ==========================================================================
     组件样式补全（原为 index.html 内联样式，统一收进样式表）
     ========================================================================== */
  /* 首屏轮播：背景图由 superslide 用 li 的 _src 属性写入。
     原来 HTML 内联写的是 background-size:100% 100%，但被下面这条带 !important 的
     基础规则（.fullSlide .bd li 处的 cover）盖掉了，实际一直是 cover，这里只补平铺方式 */
  .fullSlide .bd li{
    background-repeat: no-repeat;
  }
  /* 产品优势正文：原内联 font-family/size/color */
  .technology .tech-text{
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    color: #333;
  }
  /* 专卖店卡片兜底图
     正式图片走后台文章缩略图（.one > img）；此处按位置提供旧门店图，
     仅在文章没有缩略图时可见，避免上线初期出现空白卡片。
     换图请在后台「案例/门店」文章的缩略图里换，不用改这里。 */
  .zhuanmaidian .store > a:nth-child(6n+1) .one{ background-image: url('../myeditor/attached/image/20240418/20240418230224_71904.jpg'); }
  .zhuanmaidian .store > a:nth-child(6n+2) .one{ background-image: url('../myeditor/attached/image/20240418/20240418230151_33648.jpg'); }
  .zhuanmaidian .store > a:nth-child(6n+3) .one{ background-image: url('../myeditor/attached/image/20240418/20240418230119_76999.jpg'); }
  .zhuanmaidian .store > a:nth-child(6n+4) .one{ background-image: url('../myeditor/attached/image/20240418/20240418224210_63522.jpg'); }
  .zhuanmaidian .store > a:nth-child(6n+5) .one{ background-image: url('../myeditor/attached/image/20240418/20240418224136_47250.png'); }
  .zhuanmaidian .store > a:nth-child(6n+6) .one{ background-image: url('../myeditor/attached/image/20240418/20240418224049_96585.jpg'); }

  /* ==========================================================================
     RESPONSIVE 容器宽度体系
     注意：本区块必须位于文件最末尾。这四个区块的 width:1200px 基础规则
     写在上方（technology / technology-title / zhuanmaidian / join），
     媒体查询若写在它们之前会被同优先级覆盖，导致大屏下仍是 1200px。
     ========================================================================== */
  @media (min-width: 1400px){
    .product .product-width,
    .technology,
    .zhuanmaidian .store,
    .join{
      width: min(1440px, calc(100% - 48px));
      margin-top: 60px;
    }
    /* 标题容器只跟宽度，不吃上面那条 margin-top ——
       标题已改纯文本，多余的 60px 会把整块往下推，破坏与原图一致的留白 */
    .technology-title .my-title,
    .technology-title-tc .my-title,
    .technology-title-en .my-title{
      width: min(1440px, calc(100% - 48px));
      margin-top: 0;
    }
    .product .product-width{ gap: 32px; }
    .product .product-width .product-left .list{ gap: 32px; }
    .technology{ gap: 40px; }
    .zhuanmaidian .store{ gap: 32px; }
    .zhuanmaidian .store > a{ flex-basis: calc((100% - 64px)/3); }
  }
  /* ==========================================================================
   移动端 / 平板适配（≤1024px）
   仅覆盖 PC 样式，桌面端（>1024px）完全不受影响
   ========================================================================== */
@media (max-width: 1024px){
  /* ---- 解除旧站定宽底线 ---- */
  .product,
  .technology-title,
  .technology-title-tc,
  .technology-title-en,
  .zhuanmaidian,
  .zhuanmaidian .title,
  .zhuanmaidian .title-tc,
  .zhuanmaidian .title-en,
  .join,
  .fullSlide,
  .fullSlide .bd,
  .fullSlide .bd ul,
  .fullSlide .bd li,
  .fullSlide .hd{
    min-width: 0;
  }
  .fullSlide .bd li{
    min-width: 0 !important;
  }

  /* ---- 轮播：让出 56px 导航高度 ---- */
  .fullSlide{
    height: calc(100vh - 56px);
    height: calc(100svh - 56px);
    min-height: 420px;
    max-height: 720px;
    margin-top: 56px;
  }
  .fullSlide .prev{ left: 16px; }
  .fullSlide .next{ right: 16px; }
  .fullSlide .prev,
  .fullSlide .next{
    width: 42px;
    height: 42px;
    margin-top: -21px;
  }
  .fullSlide .hd{ bottom: 22px; }

  /* ---- 各区块容器跟随视口 ---- */
  .product .product-width,
  .technology,
  .technology-title .my-title,
  .technology-title-tc .my-title,
  .technology-title-en .my-title,
  .zhuanmaidian .store,
  .join{
    width: 100%;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ---- 产品区：双列收窄间距 ---- */
  .product .product-width{ gap: 16px; }
  .product .product-width .product-left .list{ gap: 16px; }
  .product .product-width .product-left .top-title{ margin-bottom: 16px; max-width: 100%; }
  .sec-title{ font-size: 30px; }
  .sec-sub{ font-size: 15px; }
  .product .product-width .product-left .list li{ padding: 14px; }
  .product .product-width .product-right .top-right{ padding: 24px; }
  .product .product-width .product-right .top-right .a-line{ font-size: 28px; }

  /* ---- 技术优势：4 列 → 2×2 ---- */
  .technology{
    flex-wrap: wrap;
    gap: 20px;
  }
  .technology .one-left,
  .technology .one-right{
    flex: 0 0 calc(50% - 10px);
  }
  .technology .one-left img,
  .technology .one-right img{
    width: calc(100% + 48px);
  }

  /* ---- 专卖店：3 列 → 2 列 ---- */
  .zhuanmaidian .store > a{
    flex: 0 0 calc(50% - 12px);
  }
  .zhuanmaidian .store .one{ height: 230px; }

  /* ---- 轮播分页点：扩大触摸热区（视觉仍是细条） ---- */
  .fullSlide .hd{
    bottom: 14px;
    height: 26px;
    line-height: 26px;
  }
  .fullSlide .hd ul li,
  .fullSlide .hd ul li.on{
    height: 26px;
    background: transparent;
    box-shadow: none;
    line-height: 999px;
    position: relative;
    vertical-align: middle;
  }
  .fullSlide .hd ul li::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    border-radius: 3px;
    background: rgba(255,255,255,.55);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
  }
  .fullSlide .hd ul li.on::after{
    height: 7px;
    margin-top: -3.5px;
    background: #006db1;
  }
}

@media (max-width: 768px){
  /* ---- 轮播再压一档 ---- */
  .fullSlide{
    height: calc(100vh - 56px);
    height: calc(100svh - 56px);
    min-height: 360px;
    max-height: 560px;
  }
  .fullSlide .hd ul li{
    width: 24px;
    margin: 0 5px;
  }
  .fullSlide .hd ul .on{ width: 44px; }

  /* ---- 区块标题（已改纯文本）：高度交给内容，字号降一档 ---- */
  .technology-title,
  .technology-title-tc,
  .technology-title-en{
    height: auto;
    padding: 48px 0 30px;
    background-image: none;
  }
  .zhuanmaidian .title,
  .zhuanmaidian .title-tc,
  .zhuanmaidian .title-en{
    height: auto;
    padding: 48px 0 30px;
    background-image: none;
  }
  .sec-title{ font-size: 26px; letter-spacing: .5px; }
  .sec-title span{ margin-left: 1px; }
  .sec-sub{ margin-top: 10px; font-size: 13px; }

  /* ---- 畅销榜单标题：按手机宽度等比缩，保证不换行、不溢出 ---- */
  .product .product-width .product-left .top-title .tt-tag{
    height: 24px;
    line-height: 24px;
    padding-left: 14px;
    font-size: 15px;
  }
  .product .product-width .product-left .top-title .tt-tag::before{
    width: 4px;
    height: 24px;
  }
  .product .product-width .product-left .top-title .tt-en{
    margin-top: 16px;
    font-size: 28px;
    letter-spacing: 0;
  }
  .product .product-width .product-left .top-title .tt-cn{
    margin-top: 16px;
    font-size: 24px;
  }
  .product .product-width .product-left .top-title .tt-cn .tt-bar{
    top: 3px;
    width: 22px;
    height: 11px;
    margin-left: 9px;
  }

  /* ---- 产品区：字号与内边距收窄 ---- */
  .product .product-width .product-right .top-right{ padding: 20px; }
  .product .product-width .product-right .top-right .a-line{ font-size: 24px; }
  .product .product-width .product-right .top-right .c-line{
    gap: 14px;
    flex-wrap: wrap;
  }

  /* ---- 技术优势 / 专卖店：原有单列规则保持 ---- */
  .technology .one-left,
  .technology .one-right{
    flex: 0 0 100%;
  }
  .technology .one-left li,
  .technology .one-right li{ font-size: 17px; }
  .zhuanmaidian .store .one{ height: 200px; }

  /* ---- 商城 / 客服弹窗：固定居中，避免在窄屏溢出 ---- */
  #myModal,
  #myModal1,
  #myModal2,
  #myModal3,
  #myModal5{
    left: 50%;
    margin-left: -141px;
    width: 202px;
    max-width: calc(100vw - 40px);
    padding: 24px 30px 28px;
    top: 26%;
  }
  #myModal img,
  #myModal1 img,
  #myModal2 img,
  #myModal3 img,
  #myModal5 img{
    max-width: 100%;
    height: auto;
  }
  #myModal3{
    font-size: 13px;
    line-height: 28px;
  }

  :root{
      --sec-pad-y: 48px;
      --sec-btn-gap: 32px;
      --sec-bottom: 40px;
    }
    .mod-more-wrap{
      padding: 0 16px;
      box-sizing: border-box;
    }
    .mod-more-wrap .mod-more{
      height: 42px;
      padding: 0 24px;
      font-size: 13px;
      letter-spacing: 1px;
    }
    .technology{
      width: 100%;
      box-sizing: border-box;
      padding: 0 16px;
      margin-bottom: 0;
      flex-direction: column;
      gap: 24px;
    }
    .zhuanmaidian .store{
      width: 100%;
      box-sizing: border-box;
      padding: 0 16px;
      flex-direction: column;
      gap: 24px;
    }
    .zhuanmaidian .store > a{
      flex: none;
      width: 100%;
    }
    .join{
      width: 100%;
      border-radius: 0;
      margin-top: 0;
      margin-bottom: var(--sec-bottom);
    }
    .product{
      min-width: 0;
      padding: var(--sec-pad-y) 16px var(--sec-bottom);
    }
    .product .product-width{
      width: 100%;
      flex-direction: column;
      gap: 24px;
    }
    .product .product-width .product-left,
    .product .product-width .product-right{
      width: 100%;
      flex: none;
    }
    .product .product-width .product-left .list{
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .product .product-width .product-right .one{
      order: -1;
    }
  }

/* ==========================================================================
   手机端细化（≤768px）
   修掉上面对应规则仍然遗留的问题：横向双重内边距、固定像素高度造成的图片变形、
   首屏轮播裁切过度、弹窗在窄屏溢出。本节必须位于文件最末。
   ========================================================================== */
@media (max-width: 768px){
  /* ---- 首屏轮播：按屏幕宽度定高，减少 1920×936 原图的横向裁切 ---- */
  .fullSlide{
    height: clamp(300px, 78vw, 460px);
    height: min(clamp(300px, 78vw, 460px), calc(100svh - 56px));
    min-height: 0;
    max-height: none;
  }
  .fullSlide .bd li{
    background-size: cover !important;
    background-position: center center !important;
  }

  /* ---- 产品区：外层不再吃横向内边距，避免 16+20 的双重缩进 ---- */
  .product{
    padding: var(--sec-pad-y) 0 var(--sec-bottom);
  }
  .product .product-width{
    padding-left: 16px;
    padding-right: 16px;
  }
  /* 产品缩略图：原为固定 288px 高，窄屏会把方图拉变形，改成等比方框 */
  .product .product-width .product-left .list li{
    height: auto;
    padding: 10px;
  }
  .product .product-width .product-left .list li img{
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  /* 主推产品图：原为固定 680px 高（750×633 会被拉伸），改为跟随原图比例 */
  .product .product-width .product-right .one{
    height: auto;
  }
  .product .product-width .product-right .one img{
    height: auto;
  }

  /* ---- 技术优势：卡片内边距收一档，图标徽章跟着缩小 ---- */
  .technology .one-left,
  .technology .one-right{
    padding: 0 18px 24px;
  }
  .technology .one-left img,
  .technology .one-right img{
    width: calc(100% + 36px);
    margin: 0 -18px 18px;
  }
  .technology .tech-ico{
    width: 46px;
    height: 46px;
    margin: -24px 0 14px;
  }
  .technology .tech-ico svg{
    width: 21px;
    height: 21px;
  }

  /* ---- 专卖店：方块图高度随屏宽略降 ---- */
  .zhuanmaidian .store .one{
    height: clamp(190px, 62vw, 240px);
  }

  /* ---- 加盟支持：外层不再叠加左右内边距（内部 centent-box 已留 16px） ---- */
  .join{
    padding-left: 0;
    padding-right: 0;
  }

  /* ---- 商城 / 客服弹窗：改为真正居中，宽度不超过屏幕 ---- */
  #myModal,
  #myModal1,
  #myModal2,
  #myModal3,
  #myModal5{
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    width: min(282px, calc(100vw - 48px));
    box-sizing: border-box;
    padding: 24px 22px 26px;
    top: 22%;
  }
}

/* ---- 小屏（≤380px）再收一档字号与间距 ---- */
@media (max-width: 380px){
  .product .product-width,
  .technology,
  .zhuanmaidian .store,
  .mod-more-wrap{
    padding-left: 12px;
    padding-right: 12px;
  }
  .technology .one-left li,
  .technology .one-right li{ font-size: 16px; }
  .technology .one-left li.content,
  .technology .one-right li.content{ font-size: 13px; }
  .fullSlide{ height: clamp(270px, 76vw, 380px); }

  /* 小屏标题再压一档（≤380px，约等于 iPhone SE / 老安卓） */
  .sec-title{ font-size: 22px; }
  .sec-sub{ font-size: 12px; }
  .technology-title,
  .technology-title-tc,
  .technology-title-en,
  .zhuanmaidian .title,
  .zhuanmaidian .title-tc,
  .zhuanmaidian .title-en{ padding: 38px 0 24px; }
  .product .product-width .product-left .top-title .tt-en{ font-size: 24px; }
  .product .product-width .product-left .top-title .tt-cn{ font-size: 21px; }
  .product .product-width .product-left .top-title .tt-cn .tt-bar{
    top: 3px;
    width: 19px;
    height: 9px;
    margin-left: 8px;
  }
}

/* ==========================================================================
   手机端补充排列调整（2026-10-21）
   1) 畅销榜单左侧 4 张产品图：一行 2 个（原为一行 1 个）
   2) 产品优势（technology）：一行 2 个（原为一行 1 个）
   本节位于文件最末，用于覆盖前面同名移动端规则。
   ========================================================================== */
@media (max-width: 1024px){
  /* ---- 畅销榜单：两列等比方图 ---- */
  .product .product-width .product-left .list{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .product .product-width .product-left .list li{
    height: auto;
    padding: 8px;
    border-radius: 8px;
  }
  .product .product-width .product-left .list li img{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
  }
  .product .product-width .product-left .top-title{
    margin-bottom: 12px;
  }
}

@media (max-width: 768px){
  /* ---- 产品优势：4 项 → 两列 ---- */
  .technology{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .technology .one-left,
  .technology .one-right{
    flex: 0 0 calc(50% - 6px);
    padding: 0 10px 14px;
    border-radius: 10px;
  }
  .technology .one-left img,
  .technology .one-right img{
    width: calc(100% + 20px);
    margin: 0 -10px 10px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
  }
  .technology .tech-ico{
    width: 38px;
    height: 38px;
    margin: -20px 0 10px;
  }
  .technology .tech-ico svg{
    width: 17px;
    height: 17px;
  }
  /* 标题 + 序号：窄列里收一档，序号不再占两行高 */
  .technology .one-left li,
  .technology .one-right li{
    font-size: 15px;
    line-height: 1.4;
  }
  .technology .one-left li:first-of-type::before,
  .technology .one-right li:first-of-type::before{
    font-size: 20px;
    margin-bottom: 4px;
  }
  /* 说明文字：窄列里收一档字号（正文 span 带内联 14px，必须 !important 才压得住） */
  .technology .one-left li.content,
  .technology .one-right li.content{
    font-size: 12px;
    line-height: 19px;
    margin-top: 8px;
  }
  .technology .one-left li.content span,
  .technology .one-right li.content span{
    font-size: 12px !important;
    line-height: 19px;
  }
  .technology .one-left li.content p,
  .technology .one-right li.content p{
    margin: 0;
  }
}

/* ==========================================================================
   手机端：首屏轮播解除 1200px 定宽（2026-10-21）
   基础规则里 .fullSlide / .bd / .bd ul / .bd li / .hd 都写了 min-width:1200px，
   手机上容器仍是 1200px 宽，背景图按 1200px 铺 cover，实际只看得到左边约 1/3。
   这里统一放开，背景图才会按手机宽度重新裁切。
   ========================================================================== */
@media (max-width: 1024px){
  .fullSlide,
  .fullSlide .bd,
  .fullSlide .bd ul,
  .fullSlide .bd li,
  .fullSlide .hd{
    min-width: 0;
  }
}