@charset "utf-8";
*{margin:0;padding:0;border:0;outline:0;font-size:14px;vertical-align:baseline;background:transparent;font-family: "PingFang SC";color: #000000;}
a{text-decoration: none;cursor: pointer;}
.fl{float: left;}
.fr{float: right;}
img{border: none;}
em,i{font-style: normal;}
ul li{list-style: none;}
.width{width: 1180px;margin: 0 auto;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}

.title_1{text-align: center;padding: 80px 0 50px;}
.title_1 span{display: block;font-weight: 500;font-size: 38px;color: #000000;line-height: 38px;}
.title_1 span em{font-weight: 500;font-size: 38px;color: #0077FF;}
.title_1 p{font-weight: 400;font-size: 20px;color: #595959;line-height: 28px;margin-top: 16px;}
.justify{display: flex;justify-content: space-between;flex-wrap: wrap;}

.btn_s2b2b{display: flex;align-items: center;width: 200px;height: 48px;padding-left: 24px;box-sizing: border-box;border: 1px solid #0077FF;background: #FFFFFF;border-radius: 2px;font-weight: 400;font-size: 16px;color: #0077FF;line-height: 24px;white-space: nowrap;margin: 50px auto 0;border-radius: 8px 0px 0px 8px;}
.btn_s2b2b::before{display: block;content: '';width: 16px;height: 16px;background: url(../../images/himall/s2b2b/arrow4.webp) no-repeat;background-size: 100%;margin-right: 8px;flex-shrink: 0;}
.btn_line{display: flex;align-items: center;width: 136px;height: 48px;padding-left: 24px;background: #0077FF;box-sizing: border-box;border-radius: 2px;font-weight: 400;font-size: 16px;color: #FFFFFF;line-height: 24px;white-space: nowrap;margin: 50px 0 0 0;border-radius: 0px 8px 8px 0px;}
.btn_line::before{display: block;content: '';width: 16px;height: 16px;background: url(../../images/himall/s2b2b/arrow3.webp) no-repeat;background-size: 100%;margin-right: 8px;flex-shrink: 0;}
.btn_box{display: flex;justify-content: center;align-items: center;}
.btn_box .btn_s2b2b{margin: 50px 0 0;}
.btn_box .btn_line{margin: 50px 0 0 0;}


.banner{height: 560px;background: url(../../images/himall/s2b2b/banner.webp) top center no-repeat;background-size: cover;box-sizing: border-box;padding-top: 120px;}
.banner h5{display: flex;align-items: center;font-weight: 400;font-size: 16px;color: #252627;margin-bottom: 22px;}
.banner h5 em{display: block;width: 16px;height: 16px;background: url(../../images/himall/s2b2b/b_hash.webp);background-size: 100%;margin-right: 4px;}
.banner span{display: block;font-weight: bold;font-size: 36px;color: #000000;margin-bottom: 32px;}
.banner span em{font-weight: bold;font-size: 36px;background: linear-gradient(90deg, #10AEFF 0%, #6467F0 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.banner p{width: 580px;font-weight: 400;font-size: 20px;color: #595959;line-height: 28px;}
.banner .btn{display: flex;align-items: center;margin-top: 48px;}
.banner .btn a{display: block;width: 144px;height: 48px;background: #0077FF;border-radius: 4px;text-align: center;font-weight: 400;font-size: 16px;color: #FFFFFF;line-height: 48px;}
.banner .btn a:last-child{margin-left: 13px;border: 1px solid #0077FF;background: none;color: #0077FF;box-sizing: border-box;}



.nav_m{height: 64px; background-color: #f5f5f5; width:100%;z-index:4;}
.nav_m .nav-l{margin-top: 22px;display: inline-block;}
.nav_m .nav-l li{ float:left;width:120px;height:42px;margin-right:15px;line-height:42px;text-align:center;color: #000; }
.nav_m .nav-l li a{display: block; color:#000; background: #fff;font-size:18px;}
.nav_m .nav-l li.current a{color:#fff; background: #CC3333;}
.nav_m .nav-l li a:hover,.nav_m .nav-r a:hover{color: #fff; background: #CC3333;}
.nav_m .nav-r{float: right;margin-top: 20px;}
.nav_m .nav-r a{display:inline-block;width:110px;text-align:center;line-height:32px;color:#484848;font-size:16px;border:2px solid #f8490a;border-radius:18px;}


/* ==================== fl_1 传统供应链采购痛点加剧 ====================
   蓝湖 .group_3：白底；卡片 380×428 圆角 16、阴影 8/8/20 -3；
   卡内：标题 22px(2 行) → 两段「标签黑 + 正文 #999」→ 底图 332×118 */
.fl_1{height: auto;overflow: hidden;padding-bottom: 80px;background: #FFFFFF;}
.fl_1 ul li{display: flex;flex-direction: column;width: 380px;min-height: 428px;background: #FFFFFF;box-shadow: 8px 8px 20px -3px rgba(55,99,170,0.1);border-radius: 16px;box-sizing: border-box;padding: 32px 24px 22px;}
.fl_1 ul li > span{display: block;font-weight: 500;font-size: 22px;color: #000000;line-height: 30px;}
.fl_1 ul li > p{width: 332px;font-weight: 400;font-size: 16px;color: #999999;line-height: 22px;margin-top: 24px;}
.fl_1 ul li > p + p{margin-top: 16px;}
.fl_1 ul li > p b{font-weight: 400;color: #000000;}
.fl_1 ul li > img{width: 332px;height: 118px;object-fit: cover;margin-top: auto;}


/* ==================== fl_2 S2B2B交易平台 商城业务整体蓝图 ==================== */
.fl_2{height: auto;overflow: hidden;padding-bottom: 80px;background: #F7FBFF;}
.fl_2 img{display: block;width: 1182px;height: auto;margin: 0 auto;}


/* ==================== fl_3 S2B2B系统三大模块核心功能 ====================
   蓝湖 .group_28：白底；分组条 1180×60 圆角 6（#0077FF / #6F7AF8 / #18A7FF）；
   条内 28px 粗体 + 20px 说明居中；卡片 280×190 圆角 12、渐变 0deg #F5F7FF→#FFF、2px 白边 */
.fl_3{height: auto;overflow: hidden;padding-bottom: 80px;}
.fl_3 .row{margin-bottom: 30px;}
.fl_3 .row:last-child{margin-bottom: 0;}
.fl_3 .row .hd{display: flex;align-items: center;justify-content: center;width: 1180px;height: 60px;border-radius: 6px;box-sizing: border-box;}
.fl_3 .row:nth-child(1) .hd{background: #0077FF;}
.fl_3 .row:nth-child(2) .hd{background: #6F7AF8;}
.fl_3 .row:nth-child(3) .hd{background: #18A7FF;}
.fl_3 .row .hd span{display: block;font-weight: 700;font-size: 28px;color: #FFFFFF;line-height: 38px;}
.fl_3 .row .hd p{font-weight: 400;font-size: 20px;color: #FFFFFF;line-height: 28px;margin-left: 20px;}
.fl_3 .row ul{margin-top: 20px;}
.fl_3 .row ul li{width: 280px;height: 190px;background: linear-gradient( 0deg, #F5F7FF 0%, #FFFFFF 100%);box-shadow: 8px 8px 20px 0px rgba(55,99,170,0.1);border-radius: 12px;border: 2px solid #FFFFFF;box-sizing: border-box;padding: 30px 0 0 22px;overflow: hidden;}
.fl_3 .row ul li span{display: flex;align-items: center;font-weight: 400;font-size: 20px;color: #000000;line-height: 28px;}
.fl_3 .row ul li span::before{display: block;content: "";width: 40px;height: 40px;background: url(../../images/himall/s2b2b/fl3_ico.png) no-repeat;background-size: auto 40px;margin-right: 10px;flex-shrink: 0;}
.fl_3 .row:nth-child(1) ul li:nth-child(1) span::before{background-position: 0 0;}
.fl_3 .row:nth-child(1) ul li:nth-child(2) span::before{background-position: -40px 0;}
.fl_3 .row:nth-child(1) ul li:nth-child(3) span::before{background-position: -80px 0;}
.fl_3 .row:nth-child(1) ul li:nth-child(4) span::before{background-position: -120px 0;}
.fl_3 .row:nth-child(2) ul li:nth-child(1) span::before{background-position: -160px 0;}
.fl_3 .row:nth-child(2) ul li:nth-child(2) span::before{background-position: -200px 0;}
.fl_3 .row:nth-child(2) ul li:nth-child(3) span::before{background-position: -240px 0;}
.fl_3 .row:nth-child(2) ul li:nth-child(4) span::before{background-position: -280px 0;}
.fl_3 .row:nth-child(3) ul li:nth-child(1) span::before{background-position: -320px 0;}
.fl_3 .row:nth-child(3) ul li:nth-child(2) span::before{background-position: -360px 0;}
.fl_3 .row:nth-child(3) ul li:nth-child(3) span::before{background-position: -400px 0;}
.fl_3 .row:nth-child(3) ul li:nth-child(4) span::before{background-position: -440px 0;}
.fl_3 .row ul li p{width: 240px;font-weight: 400;font-size: 16px;color: #595959;line-height: 22px;margin-top: 24px;}
.fl_3 .btn_s2b2b{background: #0077FF;color: #FFFFFF;border-radius: 2px 2px 2px 2px;}
.fl_3 .btn_s2b2b::before{background: url(../../images/himall/s2b2b/arrow3.webp) no-repeat;background-size: 100%;}


/* ==================== fl_4 供应链统一准入，多端协同 ==================== */
.fl_4{height: auto;overflow: hidden;padding-bottom: 80px;background: #F7FBFF;}
.fl_4 img{display: block;width: 1180px;height: auto;margin: 0 auto;}
.fl_4 .btn_s2b2b{background: #0077FF;color: #FFFFFF;border-radius: 2px 2px 2px 2px;}
.fl_4 .btn_s2b2b::before{background: url(../../images/himall/s2b2b/arrow3.webp) no-repeat;background-size: 100%;}


/* ==================== fl_5 S2B2B采购交易全链路闭环 ==================== */
.fl_5{height: auto;overflow: hidden;padding-bottom: 80px;}
.fl_5 img{display: block;width: 1182px;height: auto;margin: 0 auto;}


/* ==================== fl_6 平台系统架构 ==================== */
.fl_6{height: auto;overflow: hidden;padding-bottom: 80px;background: #F7FBFF;}
.fl_6 img{display: block;width: 1214px;height: auto;margin: 0 auto;}
.fl_6 .btn_s2b2b{width: 232px;}
.fl_6 .btn_s2b2b{background: #0077FF;color: #FFFFFF;border-radius: 2px 2px 2px 2px;}
.fl_6 .btn_s2b2b::before{background: url(../../images/himall/s2b2b/arrow3.webp) no-repeat;background-size: 100%;}


/* ==================== fl_7 三类典型业务模式 ====================
   蓝湖 .group_68：卡片 383×349 圆角 8、1px #F0F0F0 边框（无阴影）；
   上带图 383×145（fl7_N.webp）+ 白色 28px 标题（左 23 / 上 57）；
   下白区：描述 14px/22 #595959 + 3 行（12×12 圆点 + 14px/22） */
.fl_7{height: auto;overflow: hidden;padding-bottom: 80px;}
.fl_7 ul li{position: relative;width: 383px;min-height: 349px;background: #FFFFFF;border: 1px solid #F0F0F0;border-radius: 8px;box-sizing: border-box;overflow: hidden;}
.fl_7 ul li > img{display: block;width: 381px;height: 145px;object-fit: cover;}
.fl_7 ul li > span{position: absolute;left: 23px;top: 57px;width: 210px;font-weight: 400;font-size: 28px;color: #FFFFFF;line-height: 32px;}
.fl_7 ul li > p{width: 335px;font-weight: 400;font-size: 14px;color: #595959;line-height: 22px;margin: 31px 0 0 24px;}
.fl_7 ul li .i{margin-top: 17px;}
.fl_7 ul li .i i{display: flex;align-items: center;font-weight: 400;font-size: 14px;color: #595959;line-height: 20px;margin-top: 12px;margin-left: 24px;}
.fl_7 ul li .i i:first-child{margin-top: 0;}
.fl_7 ul li .i i::before{display: block;content: "";width: 12px;height: 12px;background: url(../../images/himall/s2b2b/dot@2x.webp) no-repeat;background-size: 100%;margin-right: 8px;flex-shrink: 0;}
/* 蓝湖 box_50 写 168px，但那是照搬 text-group_63 的坏宽度（96）算出来的；
   稿子里其余 8 字按钮统一是 200（24+16+8+128+24），168 装不下「了解更多业务场景」，故取 200 */
.fl_7 .btn_s2b2b{width: 200px;}
.fl_7 .btn_line{width: 136px;}


/* ==================== fl_8 系统通用行业 ==================== */
.fl_8{height: auto;overflow: hidden;padding-bottom: 80px;background: #F7FBFF;}
.fl_8 img{display: block;width: 1180px;height: auto;margin: 0 auto;}
.fl_8 .btn_s2b2b{background: #0077FF;color: #FFFFFF;border-radius: 2px 2px 2px 2px;}
.fl_8 .btn_s2b2b::before{background: url(../../images/himall/s2b2b/arrow3.webp) no-repeat;background-size: 100%;}


/* ==================== fl_9 系统成功案例 ====================
   蓝湖 .group_75：白底；两个 590×48 标签（选中 2px #0077FF / 未选 1px #D9D9D9）；
   卡片 1180×450 圆角 8、阴影 8/8/20 0；左信息栏 373（左 60 / 上 51）+ 右图 562×350（右 60 / 上 51） */
.fl_9{height: auto;overflow: hidden;padding-bottom: 50px;}
.fl_9 .tabs{display: flex;justify-content: space-between;}
.fl_9 .tabs span{display: flex;align-items: center;justify-content: center;width: 590px;height: 48px;box-sizing: border-box;border-bottom: 1px solid #D9D9D9;background: #FFFFFF;font-weight: 400;font-size: 16px;color: #595959;cursor: pointer;}
.fl_9 .tabs span.on{border-bottom: 2px solid #0077FF;color: #000000;}
.fl9_swiper{width: 1180px;margin: 30px auto 0;padding-bottom: 30px;overflow: hidden;}
.fl9_swiper .swiper-slide{height: 450px;}
.fl9_swiper .t{display: flex;justify-content: space-between;width: 1180px;height: 450px;background: #FFFFFF;border-radius: 8px;box-shadow: 8px 8px 20px 0px rgba(55,99,170,0.1);box-sizing: border-box;overflow: hidden;}
.fl9_swiper .t .info{width: 373px;margin: 51px 0 0 60px;}
.fl9_swiper .t img.pic{display: block;width: 562px;height: 350px;margin: 51px 60px 0 0;object-fit: cover;flex-shrink: 0;}
.fl9_swiper .t .y{display: flex;}
.fl9_swiper .t .y img.logo{display: block;width: 60px;height: 60px;margin-right: 21px;flex-shrink: 0;}
.fl9_swiper .t .y > div{width: 292px;}
.fl9_swiper .t .y span{display: flex;align-items: center;font-weight: 500;font-size: 24px;color: #000000;line-height: 28px;}
.fl9_swiper .t .y span em{display: inline-block;height: 20px;background: #E6F2FF;border-radius: 2px;font-weight: 400;font-size: 12px;color: #0077FF;line-height: 20px;padding: 0 4px;margin-left: 12px;}
.fl9_swiper .t .y b{display: block;font-weight: 400;font-size: 12px;color: #000000;line-height: 16px;margin-top: 8px;}
.fl9_swiper .t > .info > p{width: 370px;font-weight: 400;font-size: 14px;color: #595959;line-height: 24px;margin-top: 24px;}
.fl9_swiper .t .i{margin-top: 24px;}
.fl9_swiper .t .i i{display: flex;align-items: center;font-weight: 400;font-size: 16px;color: #000000;line-height: 20px;margin-top: 16px;}
.fl9_swiper .t .i i:first-child{margin-top: 0;}
.fl9_swiper .t .i i::before{display: block;content: "";width: 18px;height: 18px;background: url(../../images/himall/s2b2b/fl9_ico.png) no-repeat;background-size: auto 18px;margin-right: 6px;flex-shrink: 0;}
.fl9_swiper .t1 .i i:nth-child(1)::before{background-position: 0 0;}
.fl9_swiper .t1 .i i:nth-child(2)::before{background-position: -18px 0;}
.fl9_swiper .t1 .i i:nth-child(3)::before{background-position: -36px 0;}
.fl9_swiper .t2 .i i:nth-child(1)::before{background-position: -54px 0;}
.fl9_swiper .t2 .i i:nth-child(2)::before{background-position: -72px 0;}
.fl9_swiper .t2 .i i:nth-child(3)::before{background-position: -90px 0;}


/* ==================== fl_10 更多合作客户 ==================== */
.fl_10{height: auto;overflow: hidden;padding-bottom: 100px;background: #F7FBFF;}
.fl_10 .title_1{padding: 100px 0 50px;}
.fl_10 img{display: block;width: 1180px;height: auto;margin: 0 auto;}


/* ==================== fl_11 底部 CTA ====================
   蓝湖 .group_80：1920×282；标题 40px / 副标题 24px 全白；
   白底 136×48 圆角 2 按钮，蓝箭头（arrow4）在左 */
.fl_11{overflow: hidden;height: 282px;background: url(../../images/himall/s2b2b/fl11_bg.webp) top center no-repeat;background-size: cover;box-sizing: border-box;padding-top: 54px;text-align: center;}
.fl_11 span{display: block;font-weight: 500;font-size: 40px;color: #FFFFFF;line-height: 46px;margin-bottom: 16px;}
.fl_11 p{font-weight: 400;font-size: 24px;color: #FFFFFF;line-height: 32px;}
.fl_11 a{display: flex;align-items: center;width: 136px;height: 48px;padding-left: 24px;box-sizing: border-box;background: #FFFFFF;border: 1px solid #FFFFFF;border-radius: 2px;font-weight: 400;font-size: 16px;color: #0077FF;line-height: 24px;margin: 32px auto 0;}
.fl_11 a::before{display: block;content: '';width: 16px;height: 16px;background: url(../../images/himall/s2b2b/arrow4.webp) no-repeat;background-size: 100%;margin-right: 8px;flex-shrink: 0;}