::-webkit-scrollbar{
    width:5px;
    height:5px;
    background-color: #fff;
}
::-webkit-scrollbar-track{
    border-radius: 10px;
    background-color: #fff;
}
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #000;
}
.w1520{
    width:1520px;
    margin: 0 auto;
    position: relative;
}
.inline-banner{
    position:relative;
    z-index:1;
    width:100%;
    overflow:hidden;
}
.inline-banner .img{
    position:relative;
    width:100%;
    background-size:cover !important;
}
.inline-banner img{
    position:relative;
    width:100%;
    display: none;
}
.inline-banner img.pic{
    display: block;
}
.inline-banner .inline-fonts{
    width:452px;
    text-align: center;
    height: 212px;
    position: absolute;
    top:0;
    bottom:0;
    right:10%;
    margin:auto 0;
}
.inline-banner .inline-fonts h2{
    font-size: 60px;
    color: #4679ea;
    line-height: 132px;
    position:relative;
    margin-bottom: 31px;
}
.inline-banner .inline-fonts h2:before{
    content:"";
    background: #4679ea;
    width:90px;
    height:1px;
    position: absolute;
    bottom:0;
    left:50%;
    margin-left: -45px;
}
.inline-banner .inline-fonts p{
    font-size:20px;
    color:#4679ea;
    line-height:49px;
}
.intro-p2p{
    padding:91px 0 100px;
    position:relative;
}
.inline-title{
    width: 100%;
    text-align: center;
}
.inline-title h2{
    font-size:30px;
    color:#222;
    line-height:47px;
}
.inline-title p{
    font-size:16px;
    color:#666;
    line-height:35px;
}
.w1180{
    width:1180px;
    position:relative;
    margin:0 auto;
}
.intro-p2p-list{
    padding-top: 71px;
}
.intro-p2p-list li{
    float: left;
    width:24%;
    margin-left: 14%;
    box-shadow:0 0 5px rgba(186,192,196,.5);
    text-align: center;
    transition:box-shadow 0.3s;
}
.intro-p2p-list li:first-child{
    margin-left:0;
}
.intro-p2p-list li img{
    margin-bottom: 16px;
}
.intro-p2p-list li a{
    display: block;
    width:100%;
    padding:69px 16% 33px;
}
.intro-p2p-list li h2{
    font-size:16px;
    color:#333;
    line-height:36px;
    padding-bottom: 14px;
    margin-bottom: 20px;
    position:relative;
}
.intro-p2p-list li h2:after{
    content:"";
    width:40px;
    height:1px;
    background:#4572cb;
    position:absolute;
    left:50%;
    bottom:0;
    margin-left: -20px;
}
.intro-p2p-list li p{
    font-size:12px;
    color:#555;
    line-height:18px;
    height:90px;
    overflow:hidden;
}
.business-p2p{
    padding:92px 0 36px;
    background:url(../img/img07.jpg) no-repeat center;
    background-size: cover;
    position:relative;
    overflow:hidden;
}
.business-p2p .inline-title h2{
    color:#fff;
}
.business-p2p .inline-title p{
    color:#949494;
}
.business-p2p-list{
    padding-top: 70px;
    width:100%;
}
.business-p2p-list li{
    float: left;
    width:16.6667%;
    text-align: center;
    margin-bottom: 53px;
    position: relative;
    left:0;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.business-p2p-list li img{
    height:70px;
    margin-bottom: 9px;
}
.business-p2p-list li p{
    font-size:18px;
    color:#fefefe;
    line-height:38px;
}
.scene-p2p{
    padding:92px 0 84px;
    position:relative;
    overflow:hidden;
}
.tab-lists{
    width:100%;
    padding:60px 0 0;
}
.tab-lists .title{
    width:100%;
    text-align: center;
    font-size:0;
    padding-bottom: 105px;
}
.tab-lists .title li{
    font-size:20px;
    color:#222;
    line-height:42px;
    margin:0 6.2%;
    display: inline-block;
    position:relative;
    cursor: pointer;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.tab-lists .title li:after{
    content:"";
    width:0;
    left:50%;
    position: absolute;
    bottom:0;
    background:#4c74c5;
    height:1px;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.tab-lists .title li.hover{
    color:#4c74c5;
}
.tab-lists .title li.hover:after{
    width:100%;
    left:0;
}
.tab-lists .content{
    width:84%;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}
.tab-lists .content-box{
    display: none;
}
.tab-lists .content-box.active{
    display: block;
}
.tab-lists .content-box .right{
    width:54%;
    float: right;
    position:relative;
    left:50%;
    opacity: 0;
    text-align: center;
}
.tab-lists .content-box .right img{
    max-width:100%;
    height:auto !important;
}
.tab-lists .content-box .left{
    width:44%;
    float: left;
    position:relative;
    left:-50%;
    opacity: 0;
}
.tab-lists .content-box h2{
    font-size:24px;
    color:#222;
    line-height:42px;
    padding-top: 23px;
    padding-left: 5%;
}
.tab-lists .content-box .fonts{
    font-size:18px;
    color:#666;
    margin-left: 11%;
}
.tab-lists .content-box dl{
    width:100%;
    text-align: center;
}
.tab-lists .content-box dd{
    float: left;
    width:25%;
    margin-top: 55px;
}
.tab-lists .content-box img{
    max-width: 100%;
    height:50px;
    margin-bottom: 10px;
}
.tab-lists .content-box p{
    font-size:14px;
    color:#666;
    line-height:30px;
}
.case-p2p{
    padding:90px 0 100px;
    background:#f5f5f5;
    width:100%;
    position: relative;
    overflow:hidden;
}
.case-p2p #main{
    margin-top:39px;
    width: 100%;
    position: relative;
    display: none;
}
.case-p2p #main .box{
    width:460px;
    background: #fff;
    padding-bottom: 60px;
    transition: box-shadow 0.3s;
    opacity: 0;
    filter: alpha(opacity=0);
}
.case-p2p #main a{
    display: block;
    width:100%;
}
.case-p2p #main img{
    width:100%;
}
.case-p2p .more{
    display: block;
    margin:60px auto 0;
    width:160px;
    height:40px;
    text-align: center;
    line-height:38px;
    border:1px solid #ccc;
    font-size:16px;
    color:#999;
    border-radius: 10px;
}
.case-p2p #main.on .box {
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 30px;
    left: 0 !important;
    position: relative !important;
    top: 0 !important;
}
.case-p2p #main.on{
    height:auto !important;
}
.advantage-p2p{
    padding:90px 0 100px;
}
.advantage-p2p .fotns-lists{
    padding:78px 0 70px;
    width:79%;
    margin:0 auto;
}
.advantage-p2p .fotns-lists li{
    width:33.33%;
    text-align: center;
    float: left;
    position:relative;
}
.advantage-p2p .fotns-lists li:after{
    content:"";
    width:1px;
    height:80%;
    position: absolute;
    left:0;
    top:10%;
    background:#aaa;
}
.advantage-p2p .fotns-lists li:first-child:after{
    display: none;
}
.advantage-p2p .fotns-lists h2{
    font-size:60px;
    color:#222;
    font-family: "Helvetica Neue LT Pro";
    font-weight: lighter;
    line-height:73px;
}
.advantage-p2p .fotns-lists .add{
    position: relative;
    top: -15px;
}
.advantage-p2p .fotns-lists p{
    font-size:18px;
    color:#787878;
    line-height:37px;
}
.advantage-p2p .picture-list{
    width:100%;
}
.advantage-p2p .picture-list li{
    width:14.47%;
    float: left;
    height:108px;
    cursor: pointer;
    line-height:108px;
    margin-right: 2.56%;
    text-align: center;
    box-shadow:0 0 5px rgba(186,192,196,.3);
    margin-bottom: 10px;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.advantage-p2p .picture-list li:nth-child(6n){
    margin-right: 0;
}
.advantage-p2p .picture-list img{
    max-width:94%;
    max-height:94%;
    vertical-align: middle;
}
.survey-nav{
    position:fixed;
    top:50%;
    left:5%;
    display: none;
    margin-top:-125px;
    z-index:4;
}
.survey-nav li{
    display: block;
    padding-left: 18px;
    font-size:16px;
    color:#999;
    line-height:50px;
    cursor: pointer;
    height:50px;
    background:url(../img/img33.png) no-repeat left center;
}
.survey-nav li.hover{
    background:url(../img/img33_h.png) no-repeat left center;
}
.inline-banner .inline-fonts.o2o{
    right:auto;
    left:10%;
    text-align: left;
}
.inline-banner .inline-fonts.o2o h2{
    color:#648ae3;
}
.inline-banner .inline-fonts.o2o h2:before{
    color:#547bd5;
    left:0;
    margin-left:0;
}
.inline-banner .inline-fonts.o2o p{
    color:#5c82dc;
}
.intro-p2p-list.o2o li h2:after{
    background:#eaa2a2;
}
.inline-banner .quality-fonts{
    position: absolute;
    top:50%;
    left:10%;
    margin-top: -116px;
}
.inline-banner .quality-fonts h3{
    font-size:24px;
    color:#fff;
    text-transform: uppercase;
    line-height:29px;
}
.inline-banner .quality-fonts h2{
    font-size:50px;
    color:#fff;
    line-height:86px;
    padding:64px 0 23px;
}
.inline-banner .quality-fonts p{
    font-size:20px;
    color:#fefefe;
    line-height:29px;
}
.intro-p2p-list.quality li h2:after{
    background:#f9b140;
}
.inline-banner .inline-fonts.o2o.res h2,.inline-banner .inline-fonts.o2o.res p{
    color:#658cff;
}
.inline-banner .inline-fonts.o2o.res h2:before{
    background:#658cff;
}
.intro-p2p-list.res li h2:after{
    background:#7ab262;
}
.intro-p2p-list.ten li h2:after{
    background:#eb7814;
}
.inline-banner .inline-fonts.o2o.ten h2,.inline-banner .inline-fonts.o2o.ten p{
    color:#ef9410;
}
.inline-banner .inline-fonts.o2o.ten h2:before{
    background:#ef9410;
}
.inline-banner .inline-fonts.oa{
    text-align: right;
    width:auto;
}
.inline-banner .inline-fonts.oa h2,.inline-banner .inline-fonts.oa p{
    color:#fff;
}
.inline-banner .inline-fonts.oa h2:before{
    background:#fff;
    left:auto;
    right:0;
    margin-left: 0;
}
.intro-p2p-list.oa li h2:after{
    background:#76cec9;
}
.inline-banner .inline-fonts.o2o.per h2,.inline-banner .inline-fonts.o2o.per p{
    color:#7b75ff;
}
.inline-banner .inline-fonts.o2o.per h2:before{
    background:#7b75ff;
}
.intro-p2p-list.per li h2:after{
    background:#21ceb5;
}
.business-p2p-list.stock li{
    width:20%;
}
.inline-banner .inline-fonts.cash{
    text-align: right;
}
.inline-banner .inline-fonts.cash h2{
    color:#fff;
}
.inline-banner .inline-fonts.cash h2:before{
    background:#fff;
    left:auto;
    margin-left: 0;
    right:0;
}
.intro-p2p-list.cash li h2:after{
    background:#fcd42d;
}
.case-portant{
    width:100%;
    background:#f5f5f5;
    padding:90px 0 100px;
    text-align: center;
}
.case-portant .picture{
    text-align: center;
    max-width:100%;
    height:auto !important;
    padding-top: 70px;
}
.case-framework .inline-title h2{
    color:#fff;
}
.case-framework .inline-title p{
    color:#ddd;
}
.case-framework{
    padding:90px 0 50px;
    background:url(../img/pic62.jpg) no-repeat center;
    background-size:cover;
}
.case-framework-list{
    width:83%;
    margin:0 auto;
    position:relative;
    padding-top: 70px;
}
.case-framework-list li{
    float: left;
    width:100%;
    padding-bottom: 20px;
}
.case-framework-list li h2{
    float: left;
    width:12%;
    font-size:18px;
    color:#fff;
    line-height:40px;
}
.case-framework-list li dl{
    float: right;
    width:88%;
}
.case-framework-list li dd{
    float: left;
    margin:0 3% 30px 0;
    width:17.6%;
    text-align: center;
    line-height:38px;
    font-size:16px;
    color:#ddd;
    border:1px solid #8f8f8f;
}
.case-framework-list li dd:nth-child(5n){
    margin-right: 0;
}
.scene-p2p.cash{
    background:#f5f5f5;
}
.scene-p2p.cash .tab-lists .content-box .right{
    padding-top: 95px;
}
.cash-model{
    padding:90px 0 100px;
    text-align: center;
}
.cash-model .picture{
    text-align: center;
    max-width:100%;
    height:auto !important;
    padding-top: 70px;
}
.cash-model .links{
    display: block;
    width:108px;
    text-align: center;
    line-height:28px;
    border:1px solid #6199ba;
    font-size:14px;
    color:#6199ba;
    border-radius:14px;
    margin:40px auto 0;
}
.footer-top{
    width:100%;
    background: #f6f6f6;
    padding: 98px 0 155px;
}
.footer-top .left{
    float: left;
    width:43%;
    padding-left:4%;
}
.footer-top h2{
    margin-bottom: 13px;
    font-size: 16px;
    color: #010101;
    font-weight:bold;
    line-height: 54px;
    border-bottom: 1px solid #ddd;
}
.footer-top .left p{
    font-size:14px;
    color:#767676;
    line-height:36px;
}
.footer-top .left .bold{
    color:#222;
}
.footer-top .left p img{
    margin-left:5%;
    width:13px;
}
.footer-top .left .foot-qq{
    padding-top: 33px;
}
.footer-top .left a{
    position: relative;
    width:23%;
    margin-right: 5%;
    line-height:33px;
    border:1px solid #9e9e9e;
    color:#222;
    padding-left: 8%;
    display: block;
    float: left;
    background:url(../img/footer02.png) no-repeat 14% center;
    background-size:15px auto !important;
     transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
/* 页脚「合作咨询 / 技术服务」悬停：按钮文字直接切换为商务 QQ 号；
   点击行为是展开商务代理合作遮罩（js-open-agent，绑定见 index.html）。
   两个文字层并排占位、靠透明度切换，按钮宽度不因换字跳动。
   （曾用浮出气泡方案，因挡住上方 E-mail 文字废弃） */
.footer-top .left a .foot-qq-label,
.footer-top .left a .foot-qq-num{
    display: inline-block;
    transition: opacity .25s;
}
.footer-top .left a .foot-qq-num{
    position: absolute;
    left: 8%;
    right: 6%;
    white-space: nowrap;
    opacity: 0;
}
.footer-top .left a:hover .foot-qq-label,
.footer-top .left a:focus-visible .foot-qq-label{
    opacity: 0;
}
.footer-top .left a:hover .foot-qq-num,
.footer-top .left a:focus-visible .foot-qq-num{
    opacity: 1;
}
.footer-top .right{
    width:37%;
    float: right;
    padding-right: 5%;
}
.footer-top .code-box{
    padding-top: 14px;
}
.footer-top .code-box img{
    width:24%;
    float: left;
    margin-right:9%;
}
.footer-bot{
    padding:38px 0;
    background:#222;
    text-align: center;
}
.footer-bot p{
    font-size:14px;
    color:#636363;
    line-height:24px;
}
.footer-bot p a{
    color:#636363;
     transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.footer-bot .company-links{
    width:100%;
    text-align: center;
    font-size:0;
    padding-top:24px;
}
.footer-bot .company-links a{
    font-size:14px;
    color:#636363;
    line-height:30px;
    margin: 0 5px;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.header{
    position:relative;
    z-index:5;
}

.content-box{
    position:relative;
    z-index:1;
    opacity:0;
    filter:alpha(opacity=0);
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.content-box.show{
   opacity:1;
    filter:alpha(opacity=100);
}
#header{
    width:100%;
    padding:30px 6.25%;
    position:fixed;
    top:0;
    left:0;
    z-index: 3;
    opacity:0;
    filter:alpha(opacity=0);
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
#header.show{
   opacity:1;
    filter:alpha(opacity=100);
}
#header.scroll{
    background: rgba(0,0,0,.5);
    padding: 20px 5%;
}
#header .logo{
    width:132px;
    display: block;
    margin:0 auto;
    position:relative;
    top:0;
}
#header .logo img{
    width:100%;
}
#header .news-links{
    float: left;
    width:20px;
    height:29px;
    margin-right: 2.4%;
    background:url(../img/header02.png) no-repeat center;
    position:relative;
    top:0;
    background-size: 100% auto;
}
/* AI 图标气泡徽章：新用户送 1 亿 Token 的钩子。
   桌面完整文案；手机端换「免费」两字（见 zll_mobile.css 480px 段）。
   出现在图标正下方（用户指定，与手机端一致朝下），霓粉胶囊 + 微光，
   带轻微呼吸动画吸引点击。 */
#header .news-links .ai-badge{
    position:absolute;
    left:50%;
    top:calc(100% + 8px);
    transform:translateX(-50%);
    white-space:nowrap;
    padding:5px 12px;
    border-radius:999px;
    background:linear-gradient(135deg,#ff9ae0,#e6339e);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
    line-height:1;
    box-shadow:0 4px 14px rgba(230,51,158,.5), 0 0 0 3px rgba(255,154,224,.15);
    animation:aiBadgeBreath 2.6s ease-in-out infinite;
    transition:transform .25s;
    z-index:6;
    pointer-events:none;
}
#header .news-links .ai-badge:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:100%;
    width:6px;
    height:6px;
    background:linear-gradient(135deg,#ff9ae0,#e6339e);
    transform:translateX(-50%) rotate(45deg);
    border-radius:1px;
}
@keyframes aiBadgeBreath{
    0%,100%{ transform:translateX(-50%) scale(1); }
    50%{ transform:translateX(-50%) scale(1.06); }
}
#header .news-links:hover .ai-badge{
    animation-play-state:paused;
    transform:translateX(-50%) scale(1.12);
}
#header .search-btn{
    float: left;
    width:20px;
    height:29px;
     background:url(../img/header03.png) no-repeat center;
    position:relative;
    top:0;
    background-size:100% auto;
}
/* 案例入口按钮：原三条横杠改为文字，含义更明确。
   保留 .hover 类名，JS 的展开/收起判断仍依赖它。 */
/* 按钮宽度由文字决定（inline-block + float），
   下划线才能与文字等宽；不再用 min-width 撑开，
   否则“收起”两字配一条长横线会很突兀。 */
.header-nav-btn,
.header-mini-btn,
.header-game-btn{
    float: right;
    display: inline-flex;
    align-items: center;
    /* 高度取左侧图标那 29px 并垂直居中：原来靠 padding-bottom:7px 给下划线
       留位置，会把文字顶到框顶部，比左侧图标高 6px 左右。改成固定高度 +
       flex 居中后，任何字号都自动和图标对齐；下划线仍挂在 bottom:0，
       正好落在文字下方 6px 处，与原来的间距一致。 */
    height: 29px;
    box-sizing: border-box;
    cursor: pointer;
    position:relative;
    top:0;
    padding: 0;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}
/* 三个入口并排，float:right 下 DOM 靠后的越靠左，
   所以从左到右依次是：热门小游戏案例、小程序精选案例、企业建站一条龙。
   margin-right 用来拉开相邻两个的间距。 */
.header-mini-btn{
    margin-right: 28px;
}
.header-game-btn{
    margin-right: 28px;
}
/* 「代理合作」入口（类名沿用建站初期的 vip 系列）：金色徽章，与两个纯文字入口区分开。
   和左侧菜单、搜索、工具箱三个图标同排，都是 float:left，
   靠 margin-right 拉开等距；高度取图标那 29px 并用 flex 居中文字，
   四者的垂直中心才落在同一条线上。 */
.header-vip-btn{
    float: left;
    display: inline-flex;
    align-items: center;
    height: 29px;
    box-sizing: border-box;
    margin: 0 2.4% 0 0;
    padding: 0 13px;
    border: 1px solid #e3c06a;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(240,205,120,.22), rgba(200,160,70,.30));
    line-height: 1;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    transition: background .28s, border-color .28s, box-shadow .28s;
}
.header-vip-btn .vip-txt{
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #f4dca0;
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
    white-space: nowrap;
}
.header-vip-btn:hover{
    background: linear-gradient(180deg, rgba(245,215,140,.42), rgba(210,170,80,.48));
    border-color: #f0d68f;
    box-shadow: 0 2px 10px rgba(227,192,106,.35);
}
.header-vip-btn:hover .vip-txt{
    color: #fff3d0;
}
.header-vip-btn:focus-visible{
    outline: 1px dotted rgba(255,255,255,.8);
    outline-offset: 4px;
}
.header-nav-btn .btn-cn,
.header-mini-btn .btn-cn,
.header-game-btn .btn-cn{
    display: block;
    font-size: 16px;
    color:#fff;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px rgba(0,0,0,.25);
    white-space: nowrap;
}
/* 下划线与文字同宽，由右向左展开——文字右对齐，
   动画起点跟着文字末端走，视觉上才连贯。 */
.header-nav-btn .btn-line,
.header-mini-btn .btn-line,
.header-game-btn .btn-line{
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background:#fff;
    transition: width .32s cubic-bezier(.4,0,.2,1);
}
/* 只由悬停驱动展开。展开态（.hover）不再固定满宽，
   否则“收起”状态下横杠已经拉满，鼠标移上去没有任何动效。 */
.header-nav-btn:hover .btn-line,
.header-mini-btn:hover .btn-line,
.header-game-btn:hover .btn-line{
    width: 100%;
}
.header-nav-btn:hover .btn-cn,
.header-mini-btn:hover .btn-cn,
.header-game-btn:hover .btn-cn{
    color:#fff;
}
.header-nav-btn:focus-visible,
.header-mini-btn:focus-visible,
.header-game-btn:focus-visible{
    outline: 1px dotted rgba(255,255,255,.8);
    outline-offset: 4px;
}

/* 小程序案例遮罩：黑色全屏底，中上部一束冷色追光。
   居中悬浮一尊人物剪影（由照片 AI 抠出后压暗，见 .mini-tip-sil），
   文字叠在画面正中、人物腰腹前方，像舞台报幕。 */
.header-mini-nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 34% 30% at 50% 47%, rgba(110,140,200,.24), rgba(0,0,0,0) 72%),
        radial-gradient(ellipse 62% 46% at 50% 38%, rgba(96,128,180,.18), rgba(24,30,46,.045) 55%, rgba(0,0,0,0) 76%),
        rgba(0,0,0,.97);
    z-index: 4;
    display: none;
}
/* 人物剪影：居中略偏上悬浮在舞台暗处，腰身处渐隐进黑暗；
   本体带极暗的内部明暗（墨镜/脸部/腰带高光），辉光只勾窄窄一圈 */
.header-mini-nav .mini-tip-sil{
    /* 终态透明度提为变量：入场动画 fill=both 会一直锁住 keyframe 值，
       移动端要改浓度必须连变量一起改，单改 opacity 会被动画盖掉 */
    --sil-op: .95;
    position: absolute;
    left: 0;
    right: 0;
    top: 47%;
    height: 62vh;
    background: url(../img/coming_soon_silhouette.png) no-repeat bottom center / contain;
    opacity: var(--sil-op);
    filter: drop-shadow(0 0 14px rgba(120,160,240,.20)) drop-shadow(0 0 4px rgba(140,170,240,.12));
    /* 照片裁到腰就断了，居中悬空后用底部渐隐把断口融进黑暗里 */
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 97%);
    mask-image: linear-gradient(180deg, #000 68%, transparent 97%);
    pointer-events: none;
    transform: translateY(-50%);
    animation: miniSilIn .9s ease both;
}
@keyframes miniSilIn{
    from{ opacity: 0; transform: translateY(calc(-50% + 30px)); }
    to{ opacity: var(--sil-op, .9); transform: translateY(-50%); }
}
.header-mini-nav .mini-tip{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
    padding: 0 20px;
    animation: miniTipIn .7s ease .1s both;
}
@keyframes miniTipIn{
    from{ opacity: 0; transform: translateY(calc(-50% + 16px)); }
    to{ opacity: 1; transform: translateY(-50%); }
}
.header-mini-nav .mini-tip h2{
    font-size: 40px;
    color: #fff;
    letter-spacing: 6px;
    line-height: 1.4;
    font-weight: normal;
    text-shadow: 0 0 28px rgba(120,150,220,.4);
}
.header-mini-nav .mini-tip p{
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255,255,255,.5);
    letter-spacing: 4px;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

/* 服务内容-企业建站一条龙 遮罩层。
   目前内容为空，后续往 .service-inner 里加即可。 */
.service-nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 6;
    display: none;
}
.service-nav .service-inner{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* 关闭按钮：右上角 X，位置与顶部文字按钮大致对齐 */
.service-nav .service-close{
    position: absolute;
    top: 34px;
    right: 6%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 2;
}
.service-nav .service-close:before,
.service-nav .service-close:after{
    content: "";
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: all .3s;
}
.service-nav .service-close:before{
    transform: rotate(45deg);
}
.service-nav .service-close:after{
    transform: rotate(-45deg);
}
.service-nav .service-close:hover:before,
.service-nav .service-close:hover:after{
    background: #4c7ef3;
}
.service-nav .service-close:focus-visible{
    outline: 1px dotted rgba(255,255,255,.8);
    outline-offset: 4px;
}

/* ===== 建站服务遮罩内容 =====
   深色底上用站点主蓝 #4c74c5 作强调色，白色作主文字，
   与首页的 #222/#555/#4c74c5 体系保持一致 */
/* 宽度对齐站点主容器 .w1520，不再挤在中间窄栏里 */
.service-nav .sv-wrap{
    max-width: 1520px;
    margin: 0 auto;
    padding: 96px 4% 80px;
    color: #fff;
}
/* 顶部主视觉 */
.service-nav .sv-hero{
    text-align: center;
    padding-bottom: 54px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.service-nav .sv-tag{
    display: inline-block;
    padding: 6px 18px;
    border: 1px solid rgba(76,116,197,.7);
    background: rgba(76,116,197,.16);
    color: #8fb0f0;
    font-size: 13px;
    letter-spacing: 2px;
    border-radius: 2px;
}
.service-nav .sv-hero h2{
    margin-top: 24px;
    font-size: 66px;
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: 3px;
}
.service-nav .sv-hero h2 em{
    font-style: normal;
    font-size: 32px;
    margin: 0 12px 0 2px;
}
.service-nav .sv-sub{
    margin-top: 20px;
    font-size: 18px;
    color: rgba(255,255,255,.75);
    line-height: 1.9;
}
.service-nav .sv-price{
    margin-top: 30px;
}
.service-nav .sv-now{
    font-size: 20px;
    color: #fff;
}
.service-nav .sv-now b{
    font-size: 38px;
    color: #6f9aee;
    margin: 0 6px;
}
.service-nav .sv-was{
    margin-left: 16px;
    font-size: 16px;
    color: rgba(255,255,255,.5);
    text-decoration: line-through;
}
.service-nav .sv-note{
    margin-top: 16px;
    font-size: 15px;
    color: rgba(255,255,255,.55);
    letter-spacing: 1px;
}
/* 区块通用标题 */
.service-nav .sv-sec{
    padding-top: 64px;
}
.service-nav .sv-sec-hd{
    text-align: center;
    margin-bottom: 38px;
}
.service-nav .sv-sec-hd h3{
    font-size: 32px;
    font-weight: normal;
    letter-spacing: 2px;
}
.service-nav .sv-sec-hd p{
    margin-top: 14px;
    font-size: 16px;
    color: rgba(255,255,255,.6);
}
/* 海量案例轮播。图片素材为 350x350 正方形，
   故按 1:1 比例多张并排，而非单张大图。
   箭头放在 .sv-gallery-box 上，滑动区用 margin 留出箭头位置——
   若在滑动容器上加 padding，Swiper 的宽度基准会与可视区不一致。 */
.service-nav .sv-gallery-box{
    position: relative;
}
.service-nav .sv-gallery{
    margin: 0 60px;
    overflow: hidden;
}
.service-nav .sv-gallery .swiper-slide{
    position: relative;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    cursor: pointer;
    transition: all .3s;
}
.service-nav .sv-gallery .swiper-slide:hover{
    border-color: rgba(76,116,197,.6);
    transform: translateY(-4px);
}
.service-nav .sv-gallery .swiper-slide img{
    display: block;
    width: 100%;
    height: auto;
}
/* 悬停时浮出“查看案例”，提示图片可点 */
.service-nav .sv-gallery .swiper-slide:after{
    content: "查看案例";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
    background: rgba(76,116,197,.92);
    transform: translateY(100%);
    transition: transform .3s;
}
.service-nav .sv-gallery .swiper-slide:hover:after{
    transform: translateY(0);
}
/* 左右箭头 */
.service-nav .sv-gallery-prev,
.service-nav .sv-gallery-next{
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    transition: all .3s;
}
.service-nav .sv-gallery-prev{ left: 0; }
.service-nav .sv-gallery-next{ right: 0; }
.service-nav .sv-gallery-prev:hover,
.service-nav .sv-gallery-next:hover{
    border-color: #4c74c5;
    background: rgba(76,116,197,.2);
}
.service-nav .sv-gallery-prev:before,
.service-nav .sv-gallery-next:before{
    content: "";
    position: absolute;
    top: 14px;
    left: 15px;
    width: 11px;
    height: 11px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.service-nav .sv-gallery-prev:before{
    transform: rotate(-135deg);
    left: 17px;
}
.service-nav .sv-gallery-next:before{
    transform: rotate(45deg);
}
.service-nav .sv-gallery-prev.swiper-button-disabled,
.service-nav .sv-gallery-next.swiper-button-disabled{
    opacity: .3;
    cursor: default;
}
/* 分页点 */
.service-nav .sv-gallery-dots{
    position: static;
    margin-top: 24px;
    text-align: center;
}
.service-nav .sv-gallery-dots .swiper-pagination-bullet{
    width: 9px;
    height: 9px;
    margin: 0 5px;
    background: rgba(255,255,255,.3);
    opacity: 1;
}
.service-nav .sv-gallery-dots .swiper-pagination-bullet-active{
    background: #4c74c5;
    width: 24px;
    border-radius: 5px;
}
/* 核心配置卡片 */
.service-nav .sv-cards{
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}
.service-nav .sv-cards li{
    flex: 1 1 340px;
    padding: 38px 34px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px;
    transition: all .3s;
}
.service-nav .sv-cards li:hover{
    background: rgba(76,116,197,.12);
    border-color: rgba(76,116,197,.5);
    transform: translateY(-3px);
}
.service-nav .sv-card-top{
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.service-nav .sv-cards h4{
    font-size: 22px;
    font-weight: normal;
    letter-spacing: 1px;
}
.service-nav .sv-orig{
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #6f9aee;
}
.service-nav .sv-cards p{
    font-size: 15px;
    line-height: 1.95;
    color: rgba(255,255,255,.68);
}
/* 价格对比表 */
.service-nav .sv-table{
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px;
    overflow: hidden;
}
.service-nav .sv-tr{
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.service-nav .sv-tr:last-child{
    border-bottom: none;
}
/* 表格加长到 12 行后，行内距收紧一档，整表不显冗长 */
.service-nav .sv-tr span{
    flex: 1;
    padding: 14px 24px;
    font-size: 16px;
    color: rgba(255,255,255,.78);
}
.service-nav .sv-tr span:first-child{
    /* 服务项目列文字最长（如"基础 SEO 优化 + 搜索引擎收录提交"），占多一点 */
    flex: 1.35;
}
.service-nav .sv-th span{
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
}
.service-nav .sv-tr span:nth-child(2){
    color: rgba(255,255,255,.5);
    text-align: center;
}
.service-nav .sv-th span:nth-child(2){
    color: #fff;
}
/* 表头与本店套餐列统一居中：表头原本左对齐、数据右对齐，
   两行错位看起来很乱。整列（含表头）居中最稳。 */
.service-nav .sv-th span:nth-child(3),
.service-nav .sv-tr .sv-inc{
    text-align: center;
}
.service-nav .sv-tr .sv-inc{
    color: #6f9aee;
}
.service-nav .sv-total span{
    background: rgba(76,116,197,.14);
    font-size: 18px;
    color: #fff;
}
.service-nav .sv-total .sv-inc{
    font-size: 21px;
}
/* 表格底部的价值总结行 */
.service-nav .sv-table-note{
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,.45);
    letter-spacing: .5px;
}
/* ================= 智能硬件整套方案遮罩 ================= */
/* 板块顶部配图横幅：900x300 webp，圆角+微暗渐变与遮罩风格融合 */
.smart-banner{
    position: relative;
    margin: 0 0 26px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
}
.smart-banner img{
    display: block;
    width: 100%;
    height: auto;
    opacity: .88;
    transition: opacity .3s, transform .5s;
}
.smart-banner:hover img{
    opacity: 1;
    transform: scale(1.02);
}
/* 底部压一条深色渐变，让横幅与遮罩深色底自然衔接 */
.smart-banner:after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(10,14,24,0) 0%, rgba(10,14,24,.55) 100%);
    pointer-events: none;
}
/* 顶部合作伙伴条：芯晨科技 */
.smart-nav .smart-partner{
    text-align: center;
}
.smart-nav .sv-hero h2 em{
    color: #6f9aee;
    font-style: normal;
}
/* 伙伴条容器：链接 + 介绍文字上下排 */
.smart-partner-box{
    display: inline-block;
    margin-top: 26px;
    max-width: 640px;
}
.smart-partner-intro{
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 22px;
    color: rgba(255,255,255,.55);
}
.smart-partner-link{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 26px;
    border: 1px solid rgba(111,154,238,.35);
    background: rgba(111,154,238,.08);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color .25s, background .25s, transform .25s;
}
.smart-partner-link:hover{
    border-color: #6f9aee;
    background: rgba(111,154,238,.16);
    transform: translateY(-2px);
}
/* 盾形徽标：纯 CSS 画，不用图片 */
.smart-partner-link .sp-shield{
    position: relative;
    width: 34px;
    height: 40px;
    background: #4c74c5;
    clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%);
}
.smart-partner-link .sp-shield:after{
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    width: 18px;
    height: 9px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-48deg);
}
.smart-partner-link .sp-text{
    text-align: left;
}
.smart-partner-link .sp-text b{
    display: block;
    font-size: 17px;
    font-weight: normal;
    color: #fff;
    letter-spacing: 1px;
}
.smart-partner-link .sp-text em{
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 12px;
    color: rgba(255,255,255,.5);
}
/* 三大板块：一行三张特性卡 */
.smart-feat{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 0;
    list-style: none;
}
.smart-feat li{
    flex: 1 1 calc(33.333% - 18px);
    min-width: 240px;
    padding: 24px 22px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 4px;
    background: rgba(255,255,255,.04);
    transition: border-color .25s, background .25s;
}
.smart-feat li:hover{
    border-color: rgba(111,154,238,.5);
    background: rgba(111,154,238,.07);
}
.smart-feat .sf-ico{
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    padding: 10px;
    box-sizing: border-box;
    /* 科技感底座：半透明蓝渐变 + 细描边 + 内发光，衬托 SVG 线性图标 */
    background:
        radial-gradient(120% 120% at 20% 10%, rgba(140,180,255,.20) 0%, rgba(111,154,238,.06) 55%, rgba(111,154,238,.02) 100%),
        rgba(111,154,238,.10);
    border: 1px solid rgba(111,154,238,.35);
    border-radius: 6px;
    box-shadow: inset 0 0 14px rgba(111,154,238,.15);
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.smart-feat li:hover .sf-ico{
    border-color: rgba(141,180,255,.75);
    box-shadow: inset 0 0 18px rgba(111,154,238,.3), 0 0 12px rgba(111,154,238,.35);
    transform: translateY(-2px);
}
.smart-feat h4{
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: normal;
    color: #fff;
    letter-spacing: 1px;
}
.smart-feat p{
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    color: rgba(255,255,255,.62);
}
/* 弹窗主标题的「仅供参考」标记：两个弹窗（小程序/小游戏）共用。
   大标题 30px，标记缩小变淡成副注释，不抢主标题视觉。 */
.mini-lib-head i .lib-mark,
.game-lib-tit i .lib-mark{
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    color: rgba(255,255,255,.4);
    letter-spacing: 1px;
    margin-left: 10px;
    vertical-align: 3px;
}

/* 包办内容清单 */
/* 宽屏三列排布，充分利用横向空间 */
.service-nav .sv-list{
    display: flex;
    flex-wrap: wrap;
    gap: 16px 34px;
}
.service-nav .sv-list li{
    flex: 1 1 calc(33.333% - 34px);
    position: relative;
    padding-left: 28px;
    font-size: 16px;
    line-height: 1.9;
    color: rgba(255,255,255,.75);
}
.service-nav .sv-list li:before{
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4c74c5;
}
/* 四步流程 */
.service-nav .sv-steps{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.service-nav .sv-steps li{
    flex: 1 1 220px;
    text-align: center;
    padding: 36px 24px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 4px;
}
.service-nav .sv-num{
    display: inline-block;
    width: 46px;
    height: 46px;
    line-height: 46px;
    border-radius: 50%;
    background: #4c74c5;
    color: #fff;
    font-size: 19px;
    font-family: Arial, Helvetica, sans-serif;
}
.service-nav .sv-steps h4{
    margin-top: 18px;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 1px;
}
.service-nav .sv-steps p{
    margin-top: 10px;
    font-size: 15px;
    color: rgba(255,255,255,.6);
    line-height: 1.8;
}
/* 同一区块内出现多组内容时，补上组间距，否则会贴在一起。
   首个子块不加，避免与标题的间距叠加 */
.service-nav .sv-sec > .sv-cards + .sv-steps,
.service-nav .sv-sec > .sv-steps + .sv-list,
.service-nav .sv-sec > .sv-cards + .sv-list,
.service-nav .sv-sec > .sv-feat + .sv-list{
    margin-top: 34px;
}
/* 仿站特点：横向通栏条目。刻意不做成方块卡片，
   与下方「套餐核心配置」的等宽卡片区分开 */
.service-nav .sv-feat{
    border-top: 1px solid rgba(255,255,255,.1);
}
.service-nav .sv-feat li{
    display: flex;
    align-items: baseline;
    gap: 40px;
    padding: 26px 4px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    transition: background .3s, padding-left .3s;
}
.service-nav .sv-feat li:hover{
    background: rgba(76,116,197,.07);
    padding-left: 16px;
}
.service-nav .sv-feat h4{
    flex: 0 0 240px;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #fff;
}
/* 副标题跟在主标题下方，作为补充说明 */
.service-nav .sv-feat h4 span{
    display: block;
    margin-top: 8px;
    font-size: 13px;
    letter-spacing: 0;
    color: #6f9aee;
}
.service-nav .sv-feat p{
    flex: 1;
    font-size: 15px;
    line-height: 1.95;
    color: rgba(255,255,255,.68);
}
@media screen and (max-width: 820px){
    /* 窄屏标题与描述改为上下排列，横向并排会把描述挤得过窄 */
    .service-nav .sv-feat li{
        display: block;
        padding: 20px 4px;
    }
    .service-nav .sv-feat h4{
        margin-bottom: 10px;
    }
    .service-nav .sv-feat h4 span{
        display: inline-block;
        margin: 0 0 0 12px;
    }
}
/* 区块内的补充说明（如仿站的版权提示）。
   与 hero 区的 .sv-note 区分：这里是成段正文，需要行高、不要大字间距 */
.service-nav .sv-tip{
    margin-top: 26px;
    padding: 16px 20px;
    border-left: 2px solid rgba(76,116,197,.6);
    background: rgba(255,255,255,.03);
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255,255,255,.5);
}
/* 常见问题：宽屏分两栏，避免单列行宽过长影响阅读。
   用 CSS 多列而非 flex——dt/dd 交替出现，flex 会把问题和答案并排。 */
.service-nav .sv-faq{
    column-count: 2;
    column-gap: 56px;
}
.service-nav .sv-faq dt{
    position: relative;
    padding: 0 0 0 30px;
    margin-top: 26px;
    font-size: 18px;
    color: #fff;
    line-height: 1.7;
    break-inside: avoid;
}
.service-nav .sv-faq dt:first-child{
    margin-top: 0;
}
.service-nav .sv-faq dt:before{
    content: "Q";
    position: absolute;
    left: 0;
    top: 1px;
    color: #6f9aee;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}
.service-nav .sv-faq dd{
    padding: 10px 0 0 30px;
    font-size: 15px;
    line-height: 1.95;
    color: rgba(255,255,255,.68);
    break-inside: avoid;
}
/* 底部行动区 */
.service-nav .sv-cta{
    margin-top: 70px;
    padding: 56px 40px;
    text-align: center;
    background: rgba(76,116,197,.12);
    border: 1px solid rgba(76,116,197,.35);
    border-radius: 4px;
}
.service-nav .sv-cta h3{
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 2px;
}
.service-nav .sv-cta p{
    margin-top: 14px;
    font-size: 17px;
    color: rgba(255,255,255,.68);
}
.service-nav .sv-cta-btns{
    margin-top: 30px;
}
.service-nav .sv-btn{
    display: inline-block;
    padding: 16px 54px;
    background: #4c74c5;
    color: #fff;
    font-size: 18px;
    letter-spacing: 2px;
    border-radius: 3px;
    transition: all .3s;
}
.service-nav .sv-btn:hover{
    background: #3d63ae;
    transform: translateY(-2px);
}
.service-nav .sv-contact{
    display: inline-block;
    margin-left: 26px;
    font-size: 17px;
    color: rgba(255,255,255,.75);
}
.header-box{
    position:relative;
    width:100%;
    z-index: 5;
}
.header-nav{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,.9);
    width:100%;
    height:100%;
    z-index: 4;
    display: none;
    padding-top: 10.416vw;
}
.header-nav ul{
    display: block;
    margin:0 auto;
}
.header-nav li{
    width:16.66%;
    float: left;
    text-align: center;
}
.header-nav .title{
    font-size:24px;
    color:#fff;
    line-height:42px;
}
.header-nav .con{
    padding-top: 19px;
    display: block;
}
.header-nav .con a{
    font-size:16px;
    color:#e6e6e6;
    line-height:40px;
    display:block;
    width:100%;
    position:relative;
    left:0;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.search-alert {
  position: fixed;
  z-index: 100;
  background-color: #222222;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.search-alert .cent-form {
  position: absolute;
  width: 94.8%;
  left: 2.6%;
  top: 50%;
  height: 124px;
  margin-top: -63px;
  border-bottom: 1px solid #515151;
}
.search-alert .cent-form .tex {
  border: none;
  font-size: 66px;
  height: 124px;
  line-height: 124px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  color: #555;
  background: none;
  font-family: "Base-font";
  padding-left: 88px;
  padding-right: 80px;
  background: url(../img/ico_36.png) no-repeat 35px 60px;
}
.search-alert .cent-form .sub-butn {
  border: none;
  height: 100px;
  margin-top: 24px;
  font-size: 24px;
  line-height: 100px;
  color: #555;
  text-align: right;
  background: none;
  font-family: "Base-font";
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
}
.search-alert .close {
  display: block;
  width: 32px;
  height: 22px;
  background: none;
  position: absolute;
  top: 33px;
  right: 6.25%;
  left: auto;
  z-index: 12;
  cursor: pointer;
  opacity: 1;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.search-alert .close:before,
.search-alert .close:after {
  content: "";
  position: absolute;
  left: 0;
  top: var(--close-mid, 10px);
  width: 100%;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  border-radius: 0;
}
.search-alert .close:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.search-alert .close:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.search-alert .close:hover {
  opacity: .85;
  -webkit-transform: none;
  transform: none;
}
.intro-p2p-list.wechat li{
    width:18.4%;
    margin-left: 2%;
}
.intro-p2p-list.wechat li:first-child{
    margin-left: 0;
}
.wechat-function{
    padding:90px 0 37px;
    width:100%;
    background:url(../img/we07.jpg) no-repeat center;
    background-size:cover;
    background-attachment:fixed;
}
.wechat-function .inline-title h2{
    color:#fff;
}
.wechat-function .inline-title p{
    color:#fff;
    opacity:0.5;
}
.wechat-function-list{
    width:100%;
    text-align: center;
    padding-top: 70px;
}
.wechat-function-list li{
    width:16.6667%;
    float: left;
    margin-bottom: 53px;
}
.wechat-function-list li img{
    height:70px;
    margin-bottom: 10px;
}
.wechat-function-list li p{
    font-size:16px;
    color:#fff;
    line-height:36px;
}
#canvas{
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    z-index:1;
    height: 100%;
}
.welcome-banner{
    overflow:hidden;
    position:relative;
    background:#174aa3;
}
.welcome-banner .wel-banner-list{
    position:absolute;
    z-index: 2;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.wel-banner-list .swiper-pagination-bullet{
    width:20px;
    height:2px;
    background:#fff;
    border-radius:0;
    opacity:1;
    margin:0 8px !important;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.wel-banner-list .swiper-pagination-bullet-active{
   width:35px;
}
.wel-banner-list .swiper-slide{
    overflow:hidden;
}
.wel-banner-list .swiper-slide a{
    display: block;
    width:100%;
    height:100%;
}
.wel-banner-list .con-box{
    width:1200px;
    height:515px;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
.wel-banner-list .swiper-slide .picture-box{
    width:50.25%;
    float: right;
    height:515px;
    line-height:515px;
    position:relative;
    top: -200%;
    animation-delay: 0.5s;
}
.wel-banner-list .swiper-slide img{
    max-width:100%;
    max-height:100%;
}
.wel-banner-list .fonts{
    position:absolute;
    top:50%;
    left:-70%;
    margin-top: -64px;
    animation-delay: 0.5s;
}
.wel-banner-list .fonts p{
    font-size:22px;
    color:#fff;
    text-transform:uppercase;
    line-height:50px;
}
.wel-banner-list .fonts h2{
    font-size:40px;
    color:#fff;
    line-height:77px;
    text-shadow: 0 5px 30px rgba(44,46,83,.3);
}
.wel-banner-list .swiper-slide.hover .fonts{
    left:0;
}
.wel-banner-list .swiper-slide.hover .picture-box{
    top:0;
}
.inline-banner .inline-fonts.o2o.web h2,.inline-banner .inline-fonts.o2o.web p{
    color:#9081e2;
}
.inline-banner .inline-fonts.o2o.web h2:before{
    background:#9081e2;
}
.intro-p2p-list.web li{
    width:18.42%;
    margin:0 3.28%;
}
.website-list{
    width:100%;
    padding:92px 0 100px;
    background:#f5f5f5;
}
.website-list-tit{
    width:100%;
    text-align: center;
    font-size:0;
    padding:40px 0 70px;
}
.website-list-tit li{
    display: inline-block;
    font-size:18px;
    color:#444;
    margin:0 2.3%;
    line-height:40px;
    position:relative;
}
.website-list-tit li a{
    color:#444;
    font-size: 16px;
}
.website-list-tit li img{
    width:18px;
}
.website-list-tit li:after{
    content:"";
    width:0;
    height: 2px;
    background:#4572cb;
    position: absolute;
    bottom:0;
    left:50%;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.website-list-tit li.hover a{
    color:#4572cb;
}
.website-list-tit li.hover:after{
    width:100%;
    left:0;
}
.website-list-con{
    width:100%;
}
.website-list-con li{
    float: left;
    width:32%;
    margin-right: 2%;
    overflow:hidden;
    position:relative;
    margin-bottom: 40px;
}
.website-list-con li:nth-child(3n){
    margin-right: 0;
}
.website-list-con li a{
    display: block;
    width:100%;
    position:relative;
}
.website-list-con li .picture-box{
    width:100%;
    z-index: 1;
}
.website-list-con li .con{
    width:100%;
    position: absolute;
    top:0;
    left:0;
    background:rgba(0,0,0,.3);
    text-align: center;
    height:100%;
    z-index: 2;
    transition: background .3s;
    -moz-transition: background .3s; /* Firefox 4 */
    -webkit-transition: background .3s; /* Safari 和 Chrome */
    -o-transition: background .3s; /* Opera */
}
.website-list-con li h2{
    font-size:18px;
    color:#fff;
    width:100%;
    padding:0 2%;
    line-height:30px;
    position: absolute;
    top:0;
    bottom:0;
    margin:auto 0;
    left:0;
    height:30px;
}
.website-list-con li p{
    font-size:14px;
    color:#fffefe;
    line-height:24px;
    width:100%;
    padding:0 2%;
    position: absolute;
    left:0;
    bottom:24px;
    opacity:0;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.ajax-more{
    width:160px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:16px;
    color:#999;
    line-height:38px;
    text-align: center;
    display: block;
    cursor: pointer;
    margin:60px auto 0;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.website-info-top{
    width:100%;
    background:#f5f5f5;
    padding:24px 0 16px;
}
.website-info-top .left{
    width:50%;
    float: left;
    padding:0 3% 0 10.4%;
}
.website-info-top .right{
    width:50%;
    background:#fff;
    float: right;
    padding:0 10.4% 20px 4.12%;
    min-height:460px;
}
.website-info-top h2{
    font-size:26px;
    color:#222;
    line-height:90px;
    position:relative;
    margin:23px 0 21px;
}
.website-info-top h2:after{
    content:'';
    width:60px;
    height:2px;
    background:#555;
    position: absolute;
    bottom:0;
    left:0;
}
.website-info-top dd{
    font-size:16px;
    color:#222;
    line-height:21px;
    margin-bottom: 9px;
    padding-left: 16px;
    background:url(../img/web10.jpg) no-repeat left center;
}
.website-info-top p{
    font-size:16px;
    color:#555;
    line-height:30px;
}
.website-info-top .links{
    width:39px;
    height:39px;
    background:url(../img/web08.png) no-repeat center;
    background-size:100% 100%;
    margin-top:10%;
    display: block;
}
.website-info-center{
    background:#f5f5f5;
    padding:40px;
    margin-top: 30px;
    text-align: center;
}
.website-info-center img{
    max-width:100%;
    height:auto !important;
}
.website-info-center p{
    font-size:14px;
    color:#555;
    line-height:26px;
}
.website-info-bottom{
    padding:90px 0 60px;
}
.website-info-bottom .title{
    font-size:28px;
    color:#222;
    line-height:48px;
    margin-bottom: 30px;
}
.inline-banner .inline-fonts.o2o.app h2,.inline-banner .inline-fonts.o2o.app p{
    color:#3872bb;
}
.inline-banner .inline-fonts.o2o.app h2:before{
    background:#3872bb;
}
.inline-banner.news{
    width:100%;
    position:relative;
}
.inline-banner.news #demo-canvas{
    position: absolute;
    top:0;
    left:0;
}
.inline-banner.news .news-title{
    font-size:70px;
    color:#fff;
    font-family: "Arial";
    text-align: center;
    width:100%;
    line-height:136px;
    height:136px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:auto 0;
}
.inline-banner.news .news-title:after{
    content: '';
    width:50px;
    height:2px;
    background:#fff;
    position: absolute;
    bottom:0;
    left:50%;
    margin-left: -25px;
}
.inline-banner.news.about .news-title:after{
    bottom:24px;
}
.news-list-title{
    padding:90px 0 70px;
    text-align:left;
}
.news-list-title a{
    float: left;
    font-size:28px;
    color:#999999;
    line-height:48px;
    margin-right: 5.2%;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.news-list-title a.hover{
    color:#4c74c5;
}
.news-list-box{
    padding-bottom:100px;
}
.news-list-con li{
    float: left;
    width:32%;
    margin-right: 2%;
    margin-bottom: 40px;
    border:1px solid #eee;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.news-list-con li.inline{
    border:none;
    position: relative;
    left:0;
}
.news-list-con li:nth-child(3n){
    margin-right: 0;
}
.news-list-con li a{
    display: block;
    width:100%;
}
.news-list-con li .con{
    padding:20px 4%;
}
.news-list-con li .left{
    float: left;
    position: relative;
    text-align: center;
    padding-right:4%;
    margin-right: 4%;
}
.news-list-con li .left:before{
    content: '';
    width:1px;
    height:100%;
    background:#ddd;
    position: absolute;
    top:0;
    right:0;
}
.news-list-con li h3{
    font-size:50px;
    color:#555;
    line-height:50px;
    font-weight:normal;
}
.news-list-con li h4{
    font-weight:normal;
    font-size:14px;
    color:#555;
    line-height:16px;
    margin-top: 10px;
}
.news-list-con li h2{
    font-size:16px;
    color:#333;
    line-height:38px;
    height:38px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-list-con li p{
    font-size:12px;
    color:#666;
    line-height:30px;
    height:30px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-info-box{
    padding:74px 6.25% 86px;
    background:#f5f5f5;
}
.news-info-box .title{
    padding-bottom: 16px;
    border-bottom:1px solid #ddd;
}
.news-info-box .bdsharebuttonbox{
    float: right;
    margin-top: 4px;
}
.news-info-box .bdsharebuttonbox a{
    margin:0;
    padding:0;
    width:24px;
    height:24px;
    background-size:100% auto !important;
}
.news-info-box .bdsharebuttonbox a.bds_tsina{
    background:url(../img/news04.png) no-repeat center;
    margin-right:28px;
}
.news-info-box .bdsharebuttonbox a.bds_weixin{
    background:url(../img/news05.png) no-repeat center;
}
.news-info-box h2{
    font-size:20px;
    color:#222;
    line-height:30px;
    font-weight: bold;
}
.news-info-box p{
    font-size:12px;
    color:#555;
    line-height:22px;
}
.news-info-con{
    padding:23px 0 54px;
    border-bottom:1px solid #ddd;
}
.news-info-con p{
    font-size:14px !important;
    color:#333 !important;
    line-height:24px !important;
    padding-bottom: 24px !important;
    word-break: break-all;
}
.news-info-con p span{
    font-size:14px !important;
    color:#333 !important;
    line-height:24px !important;
}
.news-info-con img{
    max-width:100%;
    height: auto !important;
}
.news-info-page{
    padding-top: 46px;
}
.news-info-page .left{
    float: left;
    width:70%;
    overflow:hidden;
}
.news-info-page .left p{
    font-size:16px;
    color:#333;
    line-height:46px;
    height: 46px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-info-page .left a{
    color:#333;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.news-info-page .return{
    float: right;
    margin-top: 48px;
    padding-left:34px;
    font-size:16px;
    color:#333;
    line-height:43px;
    background:url(../img/news06.png) no-repeat left center;
    background-size:20px auto;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
#display{
    position: absolute;
    z-index: 0;
    display: block;
    cursor: default;
    top:0;
    left:0;
}
#blachole {
    position: absolute;
    top: 60px;
    right: 60px;
    width: 120px;
    height: 120px;
}
/* 首页 banner 多特效（iframe 随机） */
.inline-banner.news.about.fx-banner {
    overflow: hidden;
    min-height: 100vh;
    width: 100%;
    position: relative;
    background: #0b1220;
}
.inline-banner.news.about.fx-banner .img {
    visibility: hidden;
    pointer-events: none;
}
.inline-banner.news.about.fx-banner .fx-frame {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
}
.inline-banner.news.about.fx-banner .news-title {
    z-index: 2;
    pointer-events: none;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    /* 恢复垂直居中：用 transform，避免固定 height 把内容顶上去 */
    top: 50%;
    bottom: auto;
    height: auto;
    margin: 0;
    transform: translateY(-50%);
    line-height: 1.25;
}
/* 取消原来 50px 短横线，改由中文标语自身底线贯穿 */
.inline-banner.news.about.fx-banner .news-title:after,
.inline-banner.news.about .news-title:after {
    display: none;
}
.inline-banner.news.about .news-title-cn {
    display: inline-block;
    position: relative;
    line-height: 1.25;
    padding-bottom: 16px;
}
.inline-banner.news.about .news-title-cn:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.inline-banner.news.about .news-title{
    font-size:70px;
    line-height: 1.25;
    height: auto;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
}
.inline-banner.news.about .news-title p{
    font-size:30px;
    text-transform:uppercase;
    line-height:48px;
    margin-top: 24px;
}
.w1200{
    width:1200px;
    position:relative;
    margin:0 auto;
}
.about-intro{
    padding:90px 0 87px;
    text-align: center;
}
.about-intro h2{
    font-size:30px;
    color:#000;
    line-height:49px;
}
.about-intro .fonts{
    padding:66px 0 44px;
}
.about-intro .fonts p{
    font-size:16px;
    color:#555;
    line-height:30px;
    padding-bottom: 26px;
}
.about-intro ul{
    width:100%;
}
.about-intro li{
    float: left;
    width:33.33%;
    position:relative;
}
.about-intro li:after{
    content:"";
    width:1px;
    height: 80%;
    position: absolute;
    top:10%;
    left:0;
    background:#787878;
}
.about-intro li:first-child:after{
    display: none;
}
.about-intro li h3{
    font-size:80px;
    color:#222;
    font-family: "Helvetica Neue LT Pro";
    font-weight: lighter;
    line-height:69px;
}
.about-intro li p{
    font-size:24px;
    color:#787878;
    line-height:57px;
}
.about-intro li .add {
    position: relative;
    top: -8px;
}
/* ===== 公司核心人物：余总 CEO =====
   位置在公司介绍文字之后、服务内容之前。
   名片式横排：左侧方形照片（源图 1069×1071 近正方，用正方形 + cover 不裁头），
   右侧英文身份标签 / 姓名 / 职务 / 一句简介。
   左侧一道品牌蓝细线呼应站内卡片语言，悬停时照片轻微放大。 */
.about-leader{
    padding:0 0 96px;
}
.about-leader .leader-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:46px;
    max-width:820px;
    margin:0 auto;
    padding:42px 46px;
    background:#f7f8fa;
    border-radius:8px;
    box-shadow:0 0 10px rgba(186,192,196,.45);
    transition:box-shadow .3s;
}
.about-leader .leader-card:hover{
    box-shadow:0 10px 30px rgba(76,116,197,.16);
}
/* 左侧渐隐蓝条 */
.about-leader .leader-card:before{
    content:"";
    position:absolute;
    left:0;
    top:38px;
    bottom:38px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:linear-gradient(180deg, rgba(76,116,197,0), #4c74c5 40%, rgba(76,116,197,0));
}
.about-leader .leader-photo{
    flex:none;
    width:196px;
    height:196px;
    border-radius:6px;
    overflow:hidden;
    background:#e8eaee;
    box-shadow:0 10px 26px rgba(15,23,42,.16);
}
.about-leader .leader-photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}
.about-leader .leader-card:hover .leader-photo img{
    transform:scale(1.05);
}
.about-leader .leader-info{
    flex:1;
    min-width:0;
}
.about-leader .leader-tag{
    display:inline-block;
    padding:4px 12px;
    border:1px solid rgba(76,116,197,.4);
    border-radius:2px;
    background:rgba(76,116,197,.06);
    font-family:Georgia,"Times New Roman",serif;
    font-size:11px;
    letter-spacing:2px;
    color:#4c74c5;
}
.about-leader .leader-info h3{
    margin-top:16px;
    font-size:30px;
    font-weight:400;
    color:#000;
    letter-spacing:3px;
    line-height:1.2;
}
.about-leader .leader-title{
    margin-top:8px;
    font-size:15px;
    color:#4c74c5;
    letter-spacing:2px;
}
.about-leader .leader-desc{
    margin-top:16px;
    font-size:15px;
    line-height:27px;
    color:#666;
}
.about-ideo{
    background:#f5f5f5;
    padding:89px 0 100px;
}
.about-title{
    font-size:30px;
    color:#222;
    line-height:50px;
    text-align: center;
}
/* 卡片增至 5 个后改用 flex：原先 float + 21%/6% 只能刚好排满三个，
   多出的会错行。用 wrap + center 让末行自动居中。 */
.about-ideo-list{
    padding-top: 69px;
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 3.5%;
    /* 父级 .f-cb 的 :after clearfix 伪元素会被 flex 当成第 7 个
       flex item 挤进末行，把整行挤左移 28px 导致上下两行错位。
       这里显式让伪元素退出 flex 排列。 */
    content: normal;
}
.about-ideo-list:after{
    display: none;
}
.about-ideo-list li{
    width: 28%;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    border-radius:5px;
    overflow:hidden;
    box-shadow:0 0 10px rgba(186,192,196,.5);
    padding:56px 3% 33px;
    /* 卡片里有整块覆盖的链接（见 .ideo-card-link），需要它做定位基准。
       h2 自己也是 position:relative，所以 h2:after 那条下划线不受影响。 */
    position: relative;
}
/* 整张卡片当链接用：绝对定位铺满 li（含 padding），点哪儿都能进。
   用真链接而不是 JS 的 window.open —— 不会被弹窗拦截，还支持
   中键/右键「在新标签页打开」。目前只有「热门小游戏」用了它。 */
.about-ideo-list li .ideo-card-link{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1;
}
.about-ideo-list li img{
    height: 80px;
}
.about-ideo-list li h2{
    font-size:18px;
    color:#222;
    line-height:67px;
    position:relative;
    /* width:fit-content 让 h2 收缩到文字宽度（配合 margin auto 保持水平居中），
       这样下方 :after 的 100% 宽下划线才能与文字齐平 */
    width:fit-content;
    margin:5px auto 19px;
}
.about-ideo-list li h2:after{
    content:"";
    /* 与标题文字同宽 */
    width:100%;
    height: 1px;
    background: rgba(161,188,255,.35);
    position: absolute;
    bottom:0;
    left:0;
    transition: height .25s ease;
}
/* 悬停：线条加粗并让一道高光从左到右持续流动（渐变流光） */
.about-ideo-list li:hover h2:after{
    height: 2px;
    background: linear-gradient(90deg,
        #4c74c5 0%, #8db4ff 40%, #ffffff 50%, #8db4ff 60%, #4c74c5 100%);
    background-size: 200% 100%;
    animation: cardLineFlow 1.1s linear infinite;
}
@keyframes cardLineFlow{
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.about-ideo-list li p{
    font-size:12px;
    color:#222;
    line-height:20px;
    min-height:100px;
}
/* ---------- 六图拼贴背景卡片（企业建站一条龙） ----------
   结构：li 内放 .collage-box（六块背景图）+ .card-body（标题文案）。
   布局：规整的 3 列 × 2 行网格，六块大小完全一致、严丝合缝，
   块与块之间留 2px 细缝形成拼贴感。
   注意：定位一律用 top/left 百分比。margin 百分比在 CSS 里按容器
   【宽度】计算，卡片是竖长条时会算出错误偏移，导致六块叠压（第一版的教训）。 */
.about-ideo-list li.card-collage{
    padding:0;
}
.collage-box{
    position:relative;
    display:block;
    height:305px;
    overflow:hidden;
    /* 缝隙露出的底色，与卡片阴影同调 */
    background:#e8eaee;
}
.collage-box .c{
    position:absolute;
    /* (100% - 2条缝) / 3列 = 32.66%；(100% - 1条缝) / 2行 = 49.5% */
    width:calc((100% - 4px) / 3);
    height:calc((100% - 2px) / 2);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    transition:transform .45s ease;
}
/* 位置：列 left = 0 / 33.33% / 66.66% 加缝偏移；行 top = 0 / 50%+1px */
.collage-box .c1{left:0;                  top:0;      background-image:url(../img/collage/bc66daa9-fa69-447e-bc54-c841f07f0fe4.webp);}
.collage-box .c2{left:calc(33.33% + 2px); top:0;      background-image:url(../img/collage/b4ca3415-d2f2-40b0-bdf1-299ea73bfd31.webp);}
.collage-box .c3{left:calc(66.66% + 4px); top:0;      background-image:url(../img/collage/675eaafe-85c4-4ec7-be00-db358d0a2bdc.webp);}
.collage-box .c4{left:0;                  top:calc(50% + 1px); background-image:url(../img/collage/68d64e03-0c4c-4e8f-b959-8ba2f6db1027.webp);}
.collage-box .c5{left:calc(33.33% + 2px); top:calc(50% + 1px); background-image:url(../img/collage/d0e5bfe4-e5a1-4b77-b64e-c2926cbb065b.webp);}
.collage-box .c6{left:calc(66.66% + 4px); top:calc(50% + 1px); background-image:url(../img/collage/ff76ef08-81cd-42d5-8adb-76f09e9c83d2.webp);}
/* 底部深色渐变：图片区到文字底带之间的过渡 */
.collage-box:after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:110px;
    background:linear-gradient(to bottom, rgba(15,23,42,0) 0%, rgba(15,23,42,.5) 100%);
    z-index:2;
}
.card-collage .card-body{
    position:absolute;
    left:0;right:0;bottom:0;
    z-index:3;
    /* 文字区整体压一块深色底带：任何图片上白字都清晰 */
    background:rgba(15,23,42,.78);
    padding:16px 18px 18px;
    text-align:center;
}
.card-collage .card-body h2{
    color:#fff;
    /* margin auto 保持标题水平居中（fit-content 后块级自动占满会靠左） */
    margin:0 auto 8px;
    line-height:28px;
    font-size:19px;
}
.card-collage .card-body h2:after{
    background:#fff;
}
.card-collage .card-body p{
    color:rgba(255,255,255,.95);
    min-height:0;
    font-size:12px;
    line-height:19px;
}
/* 悬停：六块统一轻微放大 */
.card-collage:hover .collage-box .c{
    transform:scale(1.08);
}
/* ---------- 小程序卡：三张手机主页截图拼贴 ----------
   手机截图是竖长条，和建站卡的横图不同：三张并排、各占 1/3 宽。
   截图原始比例约 1:2.3（如 380x906），卡片图区高 305px，若整张塞进去
   每张只有 ~135px 宽，太小。所以横向铺满、竖向裁中段（background-size:cover
   + center），露出主页的核心区域。三张竖图并排本身就像三台手机并排放。 */
.card-miniapp .collage-box .c{
    width:calc((100% - 4px) / 3);
    height:100%;
    top:0;
}
.card-miniapp .collage-box .c1{left:0;                  background-image:url(../img/miniapp-card/shot1.webp);}
.card-miniapp .collage-box .c2{left:calc(33.33% + 2px); background-image:url(../img/miniapp-card/shot2.webp);}
.card-miniapp .collage-box .c3{left:calc(66.66% + 4px); background-image:url(../img/miniapp-card/shot3.webp);}
/* ---------- 企业级Ai数字转型卡：整卡一张大图 + 双图轮播 ----------
   图是横版系统界面图（1450x800），不适合切三块，直接整卡铺满。
   图1（白，系统界面）：yd-cover.webp；图2（黑，实景）：yd-cover-2.webp。
   两图各自挂不同链接（c1→./scxt/，c2→8090 后台），图层本身是 <a>，
   所以 .card-yd 下的 .c 要补上链接所需的 display。 */
.card-yd .collage-box.single .c{
    display: block;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.card-yd .collage-box.single .c1{
    background-image:url(../img/miniapp-card/yd-cover.webp);
}
.card-yd .collage-box.single .c2{
    background-image:url(../img/yd-cover-2.webp);
    animation: cardYdSwap 4s ease-in-out infinite;
}
/* 双图轮播（本卡专用）：c2 前 2 秒显示图2，后 2 秒淡出让位给铺底图1。
   原先引用的 cardSoonSwap 关键帧已随模型卡改三图被删，导致动画名失效、
   c2 恒显不切换——这里独立建一份，不再与模型卡共用。
   两图各自挂不同链接：c2 透明期间必须放行点击（pointer-events:none），
   否则看不见的 c2 会挡住底下 c1 白图的链接。用动画同步驱动。 */
@keyframes cardYdSwap{
    0%, 42.5%{ opacity: 1; pointer-events: auto; }
    50%{ opacity: 0; pointer-events: none; }
    92.5%, 100%{ opacity: 0; pointer-events: none; }
}
.card-collage.card-yd:hover .collage-box.single .c2{
    animation-play-state: paused;
}
/* 整卡链接铺在拼贴之上、文字之下，保持可点 */
.card-collage .ideo-card-link{
    z-index:4;
}
/* ---------- 智能硬件整套方案卡 ----------
   与其他卡同款体系：深色科技图 + 底部文字带。
   图1：../img/smart-cover.webp（智能硬件工作台实景）；
   图2：../img/smart-cover-2.webp（智能生态全景图，用户提供）。
   双图各 2 秒交叉淡切轮播，复用数字转型卡的 cardYdSwap 关键帧；
   整卡链接 .ideo-card-link 在最上层（z4），点击仍进智能硬件遮罩。 */
.card-collage.card-smart .collage-box.single .c{
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.card-collage.card-smart .collage-box.single .c1{
    background-image:url(../img/smart-cover.webp);
}
.card-collage.card-smart .collage-box.single .c2{
    background-image:url(../img/smart-cover-2.webp);
    animation: cardYdSwap 4s ease-in-out infinite;
}
.card-collage.card-smart:hover .collage-box.single .c2{
    animation-play-state: paused;
}
/* ---------- 模型训练部署卡：三图轮播 ----------
   与其他图片卡同款结构（collage-box 单图 + card-body 文字带）。
   图1：../img/soon-cover.webp（AI 主题深色占位图）；
   图2：../img/soon-cover-2.webp；图3：../img/soon-cover-3.webp（均为用户提供实景图）。
   c1 铺底，c2/c3 完全叠加其上：三图各停留 2 秒交叉淡切，周期 6 秒循环。
   相位安排（6s 一圈）：0-2s 图2 显；2-4s 图3 显；4-6s 只剩铺底图1。 */
.card-collage.card-soon .collage-box.single .c{
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.card-collage.card-soon .collage-box.single .c1{
    background-image:url(../img/soon-cover.webp);
}
.card-collage.card-soon .collage-box.single .c2{
    background-image:url(../img/soon-cover-2.webp);
    animation: cardSoonSwap3A 6s ease-in-out infinite;
}
.card-collage.card-soon .collage-box.single .c3{
    background-image:url(../img/soon-cover-3.webp);
    animation: cardSoonSwap3B 6s ease-in-out infinite;
}
/* c2：前段显示图2，随后淡出并保持透明 */
@keyframes cardSoonSwap3A{
    0%, 28%{ opacity: 1; }
    33%, 100%{ opacity: 0; }
}
/* c3：中段淡入显示图3，尾段淡出回到图1 */
@keyframes cardSoonSwap3B{
    0%, 33%{ opacity: 0; }
    39%, 61%{ opacity: 1; }
    67%, 100%{ opacity: 0; }
}
/* 悬停时暂停轮播，方便看清当前图 */
.card-collage.card-soon:hover .collage-box.single .c2,
.card-collage.card-soon:hover .collage-box.single .c3{
    animation-play-state: paused;
}
/* ---------- 热门小游戏卡：五图拼贴 ----------
   布局（用户指定）：三列 —— 左右两列各上下两张横版封面，
   中间一整张竖版封面，形似两侧手柄夹着一块竖屏。
   左右列各占 30%，中列 40%；块间 2px 细缝与其他卡一致。 */
.card-game .collage-box .c{
    width:calc(30% - 2px);
    height:calc((100% - 2px) / 2);
}
.card-game .collage-box .c1{left:0;                       top:0;                      background-image:url(../img/game-card/g-left1.webp);}
.card-game .collage-box .c2{left:0;                       top:calc(50% + 1px);        background-image:url(../img/game-card/g-left2.webp);}
.card-game .collage-box .c4{left:calc(70% + 2px);         top:0;                      background-image:url(../img/game-card/g-right2.webp);}
.card-game .collage-box .c5{left:calc(70% + 2px);         top:calc(50% + 1px);        background-image:url(../img/game-card/g-right1.webp);}
.card-game .collage-box .c3{
    /* 中间竖图：占满整高，左右留缝 */
    left:calc(30% + 2px);
    top:0;
    width:calc(40% - 4px);
    height:100%;
    background-image:url(../img/game-card/g-mid.webp);
}
/* 悬停：六块统一轻微放大，拼贴感不动、整卡变"活" */
.card-collage:hover .collage-box .c{
    transform:scale(1.08);
}
.about-history{
    padding:81px 0 102px;
    position:relative;
    background:url(../img/a06.jpg) no-repeat center bottom;
    background-size:cover;
}
.about-history .picture{
    float: right;
    width:42.7%;
}
.about-history-box{
    position: absolute;
    top:50%;
    left:7%;
    width:40%;
    margin-top: -89px;
}
.about-history-box h2{
    font-size:24px;
    color:#222;
    line-height:35px;
    padding-bottom: 16px;
    position:relative;
}
.about-history-box h2:after{
    content:"";
    width:55px;
    height:1px;
    background:#222;
    position: absolute;
    bottom:0px;
    left:0;
}
.about-history-box h3{
    font-size:20px;
    color:#222;
    line-height:60px;
    margin-bottom: 12px;
}
.about-history-box p{
    font-size:16px;
    color:#676767;
    line-height:27px;
}
.about-service{
    background:#f5f5f5;
    padding:92px 0 60px;
}
.about-service-list{
    padding-top: 71px;
    width:90%;
    margin:0 auto;
}
.about-service-list li{
    width:48%;
    padding:60px 18% 78px 4%;
    background-color:#fff;
    float: left;
    margin-bottom: 40px;
    background-position:88% center;
    background-repeat: no-repeat;
    background-size:auto 50%;
}
.about-service-list li:nth-child(2n){
    float: right;
}
/* a10/a11/a11_h 曾经被同名覆盖过，/static 图片缓存 7 天且不校验，
   加 ?v= 才能让浏览器重新拉取。这三处换图时记得同步改版本号。 */
.about-service-list li.ico1{
    background-image: url(../img/a07.png);
}
.about-service-list li.ico2{
    background-image: url(../img/a08.png);
}
.about-service-list li.ico3{
    background-image: url(../img/a09.png);
}
.about-service-list li.ico4{
    background-image: url(../img/a10.png?v=20260925);
}
.about-service-list li h2{
    font-size:26px;
    color:#222;
    line-height:46px;
    padding-bottom: 12px;
}
.w860{
    width:860px;
    margin:0 auto;
    position: relative;
}
.about-service-list li p{
    font-size:12px;
    color:#555;
    line-height:22px;
    min-height:44px;
}
/* 原「商务合作」表单板块（.about-pcooperation）已从首页移除，其样式一并删除；
   全局 input/textarea 占位符颜色规则与 .w860 工具类仍被其他板块使用，保留。 */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #555;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #555;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#555;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #555;
}
/* ===== 战略合作伙伴（人才招聘之后、页脚之前） =====
   芯片级战略伙伴芯晨科技，整卡外链官网。
   浅灰底收尾与 .about-ideo/.about-service 的灰白节奏一致；
   盾形徽标与「智能硬件」遮罩的 smart-partner-link 同款 CSS 画法。 */
.about-partner{
    padding:90px 0 100px;
    background:#f5f5f5;
}
.about-partner .w860{
    text-align:center;
}
/* 合作伙伴卡：盾徽 + 名称 + 访问按钮，横排一张整卡链接 */
.about-partner .partner-card{
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:64px;
    padding:44px 50px;
    background:#fff;
    border-radius:5px;
    box-shadow:0 0 10px rgba(186,192,196,.5);
    text-align:left;
    text-decoration:none;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
}
.about-partner .partner-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(76,116,197,.2);
}
/* 盾形徽标：clip-path 画盾形，内部一道白勾 */
.about-partner .partner-shield{
    position:relative;
    flex:none;
    width:54px;
    height:64px;
    background:#4c74c5;
    clip-path:polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%);
}
.about-partner .partner-shield:after{
    content:"";
    position:absolute;
    left:14px;
    top:21px;
    width:24px;
    height:12px;
    border-left:4px solid #fff;
    border-bottom:4px solid #fff;
    transform:rotate(-48deg);
}
.about-partner .partner-text{
    flex:1;
    min-width:0;
}
.about-partner .partner-text b{
    display:block;
    font-size:20px;
    font-weight:normal;
    color:#222;
    line-height:30px;
    letter-spacing:1px;
}
.about-partner .partner-text em{
    display:block;
    margin-top:8px;
    font-style:normal;
    font-size:14px;
    color:#999;
    letter-spacing:1px;
}
/* 访问按钮：描边样式，悬停整卡上浮时反白填充 */
.about-partner .partner-go{
    flex:none;
    padding:13px 32px;
    border:1px solid #4c74c5;
    border-radius:5px;
    font-size:15px;
    color:#4c74c5;
    letter-spacing:2px;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
}
.about-partner .partner-card:hover .partner-go{
    background:#4c74c5;
    color:#fff;
}
.about-partner .partner-note{
    margin:28px auto 0;
    font-size:14px;
    color:#888;
    line-height:27px;
}
.about-talent{
    padding:90px 0 100px;
}
.about-talent-list{
    position: relative;
    width:92%;
    margin:70px auto 0;
}
.about-talent-list:before{
    content:"";
    width:100%;
    height: 1px;
    background:#ccc;
    position: absolute;
    left:0;
    top:50%;
    z-index: 0;
    margin-top: 19px;
}
.about-talent-list li{
    float: left;
    position: relative;
    z-index: 1;
    width:8.6%;
    cursor: pointer;
    text-align: center;
    margin:0 4%;
}
.about-talent-list li .pic-box{
    width:100%;
    border-radius:8px 8px 0 0;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.about-talent-list li .bb{
    height: 100px;
    line-height:100px;
}
.about-talent-list li img{
    max-width:100%;
    max-height:90px;
    vertical-align: bottom;
}
.about-talent-list li h2{
    font-size:12px;
    color:#000;
    line-height:30px;
    width:40px;
    height: 30px;
    margin:0 auto;
    background:#fff;
    text-transform: uppercase;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.about-talent-list li .con{
    padding:4px 3% 6px;
    background:#f5f5f5;
    border-radius:0 0 8px 8px;
    overflow:hidden;
    text-align: center;
    position: relative;
    top:50px;
    opacity:0;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.about-talent-list li p{
    font-size:12px;
    color:#c60000;
    line-height:18px;
    min-height:54px;
}
.about-process{
    padding:92px 0 100px;
}
.about-process .about-process-list{
    width:92%;
    margin:120px auto 0;
    padding:0 6%;
    position: relative;
}
.about-process .about-process-list:before{
    content:"";
    width:100%;
    height:1px;
    background:#888;
    position: absolute;
    top:50%;
    left:0;
    margin-top: -0.5px;
}
.about-process .about-process-list li{
    float: left;
    width:11.11%;
    text-align: center;
    padding:0 0 61px 0;
    position: relative;
    background:url(../img/a27.png) no-repeat bottom center;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.about-process .about-process-list li p{
    font-size:12px;
    color:#666;
    width:100%;
    line-height:22px;
    position: absolute;
    left:0;
    bottom:24px;
}
.about-process .about-process-list li:nth-child(2n){
    padding:61px 0 0 0;
    background:url(../img/a27.png) no-repeat top center;
    margin-top: 96px;
}
.about-process .about-process-list li:nth-child(2n) p{
    top:24px;
    bottom:auto;
}
.about-process .about-process-list .pic-box{
    width:45px;
    height: 45px;
    margin:0 auto;
    border-radius:50%;
    background-color:#f5f5f5;
    background-repeat:no-repeat;
    background-position:center;
    background-size:auto 25px;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.about-process .about-process-list .pic-box.ico1{
    background-image:url(../img/a11.png?v=20260925);
}
.about-process .about-process-list .pic-box.ico2{
    background-image:url(../img/a12.png);
}
.about-process .about-process-list .pic-box.ico3{
    background-image:url(../img/a13.png);
}
.about-process .about-process-list .pic-box.ico4{
    background-image:url(../img/a14.png);
}
.about-process .about-process-list .pic-box.ico5{
    background-image:url(../img/a15.png);
}
.about-process .about-process-list .pic-box.ico6{
    background-image:url(../img/a16.png);
}
.about-process .about-process-list .pic-box.ico7{
    background-image:url(../img/a17.png);
}
.about-process .about-process-list .pic-box.ico8{
    background-image:url(../img/a18.png);
}
.about-process .about-process-list .pic-box.ico9{
    background-image:url(../img/a19.png);
}
.about-process .about-process-list li.hover{
    background:url(../img/a27_h.png) no-repeat bottom center;
}
.about-process .about-process-list li.hover:nth-child(2n){
    background:url(../img/a27_h.png) no-repeat top center;
}
.about-process .about-process-list li.hover .pic-box{
    background-color:#4c74c5;
}
.about-process .about-process-list li.hover .pic-box.ico1{
    background-image:url(../img/a11_h.png?v=20260925);
}
.about-process .about-process-list li.hover .pic-box.ico2{
    background-image:url(../img/a12_h.png);
}
.about-process .about-process-list li.hover .pic-box.ico3{
    background-image:url(../img/a13_h.png);
}
.about-process .about-process-list li.hover .pic-box.ico4{
    background-image:url(../img/a14_h.png);
}
.about-process .about-process-list li.hover .pic-box.ico5{
    background-image:url(../img/a15_h.png);
}
.about-process .about-process-list li.hover .pic-box.ico6{
    background-image:url(../img/a16_h.png);
}
.about-process .about-process-list li.hover .pic-box.ico7{
    background-image:url(../img/a17_h.png);
}
.about-process .about-process-list li.hover .pic-box.ico8{
    background-image:url(../img/a18_h.png);
}
.about-process .about-process-list li.hover .pic-box.ico9{
    background-image:url(../img/a19_h.png);
}
.right-navigation{
    position:fixed;
    top:50%;
    right:0;
    width:60px;
    height: 200px;
    margin-top: -100px;
    z-index:2;
}
.right-navigation li{
    width:60px;
    position:absolute;
    right:0;
    top:0;
    background:#4c74c5;
    border-radius:5px;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.right-navigation li:nth-child(2){
    top:70px;
}
.right-navigation li:nth-child(3){
    top:140px;
}
.right-navigation li .con{
    width:60px;
    text-align: center;
    height:60px;
    background:#4c74c5;
    position: relative;
    z-index: 2;
    border-radius:5px;
    transition: all .3s;
    -moz-transition: all .3s; /* Firefox 4 */
    -webkit-transition: all .3s; /* Safari 和 Chrome */
    -o-transition: all .3s; /* Opera */
}
.right-navigation li a{
    display: block;
    width:100%;
    height:100%;
}
.right-navigation li .pic{
    margin:8px 0 1px;
    height:26px;
}
.right-navigation .con p {
    font-size:12px;
    color:#fff;
    line-height:25px;
}
.right-navigation .scr-box{
    width:180px;
    height:60px;
    position: absolute;
    left:0;
    top: 0px;
    border-radius:5px;
    padding: 0 10px;
    text-align: left;
    z-index: 1;
    background-color:#4c74c5;
    background-repeat:no-repeat;
    background-size: auto 26px;
    background-position:center right 10px;
}
.right-navigation .scr-box.ico1{
    background-image:url(../img/nav01.png);
}
.right-navigation .scr-box.ico2{
    background-image:url(../img/nav02.png);
}
.right-navigation .scr-box img{
    width:26px;
    float: left;
    margin:17px 8px 0 0;
}
.right-navigation .scr-box h3{
    font-size:14px;
    color:#fff;
    line-height:60px;
}
.right-navigation .scr-box p{
    font-size:12px;
    color:#fff;
    line-height:20px;
    margin-top:10px;
}
.right-navigation .scr-box h2{
    font-size:14px;
    color:#fff;
    line-height:22px;
}
.right-navigation li.scrolltop{
    display: none;
}
.welcome-lists{
    width:100%;
    background:#f6f6f6;
    padding:100px 0;
}
.welcome-lists li{
    width:48.6%;
    position: relative;
}
.welcome-lists li a{
    display: block;
    width:100%;
}
.welcome-lists li .con{
    width:35%;
    background:#496db5;
    padding:20px 30px 29px;
    position: absolute;
    bottom:0;
    right:0;
    z-index: 2;
}
.welcome-lists li h2{
    font-size:18px;
    color:#fefefe;
    line-height:38px;
    letter-spacing: 5px;
    margin-bottom: 13px;
}
.welcome-lists li p{
    font-size:14px;
    color:#fefefe;
    line-height:24px;
    letter-spacing: 2px;
    margin-bottom: 53px;
}
.welcome-lists li .more{
    width:80px;
    display: block;
    border:1px solid #fff;
    text-align: center;
    font-size:12px;
    color:#fff;
    line-height:28px;
    text-transform: uppercase;
    border-radius:5px;
    letter-spacing:4px;
}
.welcome-customer{
    padding:69px 0 40px;
}
.welcome-title{
    text-align: center;
    width:100%;
}
.welcome-title h2{
    font-size:30px;
    color:#000;
    line-height:48px;
    margin-bottom: 14px;
}
.welcome-title p{
    font-size:16px;
    color:#363535;
    line-height:35px;
}
.welcome-customer ul{
    width:100%;
    padding-top: 70px;
}
.welcome-customer li{
    float: left;
    width:14.6%;
    margin-right: 2.4%;
    margin-bottom: 60px;
    background:#fff;
    text-align: center;
    box-shadow:0 0 10px rgba(186,192,196,.3);
}
.welcome-customer li:nth-child(6n){
    margin-right: 0;
}
.welcome-customer li a{
    display: block;
    width:100%;
}
.welcome-customer li img{
    width:100%;
}
.welcomne-center{
    width:100%;
    position: relative;
    overflow:hidden;
    background:url(../img/wel20.jpg) no-repeat center;
    background-size:cover;
    padding:82px 0;
}
.w1060{
    width:1060px;
    margin:0 auto;
    position:relative;
}
.particles-js-canvas-el{
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
}
.welcomne-center h2{
    font-size:20px;
    color:#fff;
    line-height:36px;
    float: left;
    letter-spacing:2px;
    position:relative;
    z-index: 3;
}
.welcomne-center .more{
    float: right;
    width:120px;
    line-height:34px;
    text-align: center;
    border:1px solid #fff;
    font-size:14px;
    letter-spacing:4px;
    color:#fff;
    border-radius:10px;
    position:relative;
    z-index: 3;
}
.company-news{
    padding:94px 0 93px;
}
.company-news-pc{
    padding-top: 70px;
}
.company-news-pc li{
    float: left;
    width:31.5%;
    margin-right: 2.75%;
}
.company-news-pc li .picture-box,.company-news-mobile li .picture-box{
    width:100%;
}
.company-news-pc li:nth-child(3n){
    margin-right: 0;
}
.company-news-pc li h2{
    font-size:16px;
    color:#222;
    line-height:36px;
    margin:20px 0 13px;
    overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
}
.company-news-pc li p{
    font-size:14px;
    color:#555;
    line-height:24px;
    height: 48px;
    overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.company-news-pc li .more{
    background:#f6f6f6;
    margin-top: 38px;
    width:140px;
    text-align: center;
    line-height:40px;
    font-size:12px;
    color:#222222;
}
.company-news-mobile{
    margin-top: 30px !important;
    height: 0;
    overflow:hidden;
    z-index: 1;
}
.inline-news{
    padding-bottom: 79px;
}
.inline-news-list{
    padding-top:80px;
}
.inline-news-list li{
    width:31.5%;
    margin-right: 2.75%;
    padding:0 1.6%;
    margin-bottom: 80px;
    position: relative;
    left:0;
}
.inline-news-list li:nth-child(3n){
    margin-right: 0;
}
.inline-news-list li a{
    display: block;
    width:100%;
}
.inline-news-list li .left{
    float: left;
    padding-right:2%;
    border-right:1px solid #ddd;
    text-align: center;
    margin-right: 2%;
}
.inline-news-list li h3{
    font-size:40px;
    color:#222;
    line-height:53px;
}
.inline-news-list li .time{
    font-size:12px;
    color:#222;
    line-height:30px;
}
.inline-news-list li h2{
    font-size:18px;
    color:#010101;
    line-height:22px;
    overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
}
.inline-news-list li .fonts{
    margin-top: 13px;
    font-size:12px;
    color:#363535;
    line-height:22px;
    height: 44px;
    overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.welcome-case{
    padding:72px 0 60px;
}
.welcome-case .website-list-tit li:after{
    display: none;
}
.welcome-solution{
    padding:116px 0 156px;
    background:url(../img/wel23.png) no-repeat center bottom;
}
.welcome-solution .left{
    width:18%;
    float: left;
}
.welcome-solution .left h3{
    font-size:24px;
    color:#bbb;
    line-height:20px;
    text-transform:uppercase;
}
.welcome-solution .left h2{
    font-size:26px;
    color:#333;
    line-height:63px;
    margin-bottom: 75px;
}
.welcome-solution .left p{
    font-size:18px;
    color:#888;
    line-height:30px;
}
.welcome-solution .right{
    width:70.5%;
    float: right;
}
.welcome-solution .right li{
    float: left;
    width:23.32%;
    margin-right: 2.23%;
    margin-bottom: 24px;
    padding:14px 1.86% 11px;
    background:#fff;
    border-radius:5px;
    overflow:hidden;
    position: relative;
    box-shadow:0 0 10px rgba(186,192,196,.5);
}
.welcome-solution .right li:nth-child(4n){
    margin-right: 0;
}
.welcome-solution .right .pic-box{
    width:3.5983vw;
    height: 3.5983vw;
    background:#fff;
    border-radius:5px 0 5px 0;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.welcome-solution .right .ico {
    width: 100%;
    height: 100%;
    opacity:1;
    background-size: 52.6% auto !important;
    display: block;
}
.welcome-solution .right .ico.ico2 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.welcome-solution .right h2{
    font-size:20px;
    color:#5b5b5b;
    line-height:32px;
    moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.welcome-solution .right p{
    font-size:14px;
    color:#999;
    line-height:22px;
    word-break:break-all;
}
.welcome-solution .right h3{
    font-size:14px;
    color:#999;
    line-height:33px;
    padding-top: 40px;
    margin-top: 8px;
    position: relative;
}
.welcome-solution .right h3:after{
    content:"";
    width:1px;
    height: 40px;
    position: absolute;
    top:0;
    left:0;
    background:#ddd;
}
.welcome-product-box .picture-bgbox {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}
.welcome-product-box {
    background: #f6f6f6;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.welcome-product-box .picture-bgbox .picture-bg{
    display: block;
    width:100%;
    height:100%;
    background:url(../img/wel19.jpg) no-repeat center;
    position: absolute;
    top:0;
    left:0;
    z-index:-1;
    transition:all 0s;
}
.welcome-product-box .picture-bgbox .picture-bg.hover{
    z-index:2;
}
.welcome-product{
    padding:90px 0 70px;
    position: relative;
    z-index: 3;
}
.welcome-product-list{
    padding:70px 5% 30px !important;
}
.welcome-product-list .swiper-slide{
    background:#fff;
    text-align: center;
    padding:40px 2.1% 23px;
    box-shadow:0 0 15px rgba(158,171,180,.5);
}
.welcome-product-list .swiper-slide a{
    display: block;
    width:100%:
}
.welcome-product-list .swiper-slide .picture{
    height:55px;
}
.welcome-product-list .swiper-slide .list-content{
    margin-top:47px;
    position: relative;
    width:100%;
}
.welcome-product-list .swiper-slide h2{
    font-size:14px;
    color:#636363;
    line-height:26px;
}
.welcome-product-list .swiper-slide dl{
    width:70%;
    margin:0 auto;
    display: block;
    padding-top: 22px;
}
.welcome-product-list .swiper-slide dd{
    float: left;
    width:46%;
    margin-right: 8%;
    line-height:26px;
    background:#ececec;
    font-size:14px;
    color:#636363;
    margin-bottom: 30px;
}
.welcome-product-list .swiper-slide dd:nth-child(2n){
    margin-right: 0;
}
.welcome-product-list .swiper-slide .pos-top{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    background:#fff;
    opacity:0;
    filter:alpha(opacity=0);
    moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.welcome-product-list .swiper-slide p{
    font-size:16px;
    color:#333;
    line-height:28px;
    height:224px;
}
.welcome-product-list .swiper-slide .more{
    width:120px;
    height:40px;
    text-align: center;
    line-height:40px;
    background:#4c74c5;
    font-size:14px;
    color:#fff;
    border-radius:5px;
    margin:37px auto 0;
}
.pageload-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11;
    background: #496db5;
    visibility: hidden;
    /* 隐藏时不拦截点击：该层始终铺满视口，若保留默认的
       pointer-events:auto，开场动画结束前后都会吃掉 header 上的点击 */
    pointer-events: none;
}
.pageload-overlay.show {
    visibility: visible
}
.pageload-overlay svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}
.pageload-overlay svg path {
    fill: #fff
}
.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    z-index: 2;
    width: 10em;
    height: 10em;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}
.loading .text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    padding: 0 14%;
    box-sizing: border-box;
    pointer-events: none;
}
.loading .text-inner {
    display: block;
    font-family: "PingFang SC", "Microsoft YaHei", "Open Sans", sans-serif;
    font-weight: 700;
    color: #f2f2f2;
    font-size: 20px;
    line-height: 1;
    letter-spacing: .12em;
    margin-right: -.12em; /* 抵消 letter-spacing 末尾空白，视觉居中 */
    white-space: nowrap;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: text 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    -moz-animation: text 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    -ms-animation: text 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    -o-animation: text 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    animation: text 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
}
.loading .spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    height: 10em;
    margin: 0;
    color: #fff;
}
.loading .spinner:before,
.loading .spinner:after {
    content: "";
    display: block;
}
.loading .spinner:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    height: 10em;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    -moz-animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    -ms-animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    -o-animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    animation: spinner 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    background-color: #DB2F00;
}
.loading .spinner:after {
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: -1.75em;
    height: .25em;
    border-radius: 50%;
    background-color: #322b27;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: shadow 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    -moz-animation: shadow 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    -ms-animation: shadow 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    -o-animation: shadow 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
    animation: shadow 2.5s cubic-bezier(0.750, 0.000, 0.500, 1.000) infinite normal;
}
.loading-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    object-fit: contain;
    border-radius: 50%;
    opacity: 0;
    z-index: 6;
    pointer-events: none;
    -webkit-transform: scale(.2);
    transform: scale(.2);
}
/* final: fade cube+text, pull Ai logo out */
.loading.is-logo .text {
    -webkit-animation: loading-fade-out .55s ease forwards !important;
    animation: loading-fade-out .55s ease forwards !important;
}
.loading.is-logo .text-inner {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}
.loading.is-logo .spinner {
    -webkit-animation: loading-fade-out .55s ease forwards !important;
    animation: loading-fade-out .55s ease forwards !important;
}
.loading.is-logo .spinner:before,
.loading.is-logo .spinner:after {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}
.loading.is-logo .loading-logo {
    -webkit-animation: loading-logo-pull .7s cubic-bezier(.2, .8, .2, 1) forwards;
    animation: loading-logo-pull .7s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes spinner {
    50% {
        border-radius: 50%;
        transform: scale(.5) rotate(360deg);
        background-color: #13A3A5;
    }
    100% {
        transform: scale(1) rotate(720deg);
        background-color: #DB2F00;
    }
}
@keyframes shadow {
    50% {
        transform: scale(.5);
        background-color: #322b27;
    }
}
@keyframes text {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(.5, .5);
        transform: scale(.5, .5);
    }
    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}
@keyframes loading-fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes loading-logo-pull {
    0% {
        opacity: 0;
        -webkit-transform: scale(.2);
        transform: scale(.2);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.inline-banner .quality-fonts.dsyd h3,.inline-banner .quality-fonts.dsyd h2,.inline-banner .quality-fonts.dsyd p{
    color:#497abb;
}
.inline-banner .quality-fonts.dsyd p{
    width:53%;
}
.case-p2p #main.market .box{
    width:350px;
}
.market-function{
    padding:90px 0 40px;
}
.market-function-list{
    width:91%;
    margin:0 auto;
    padding-top: 70px;
}
.market-function-list li{
    width:21.7%;
    float: left;
    cursor: pointer;
    margin:0 4.3% 60px 0;
    text-align: center;
    padding:37px 0 30px;
    box-shadow:0 0 20px rgba(227,227,227,.6);
    moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.market-function-list li:nth-child(4n){
    margin-right: 0;
}
.market-function-list li img{
    height:104px;
    margin-bottom:38px;
}
.market-function-list li p{
    font-size:18px;
    color:#333;
    line-height:30px;
}
.free-request-scheme{
    width:600px;
    height:400px;
    position: fixed;
    top:50%;
    left:50%;
    background:url(../img/wel35.png) no-repeat center;
    margin:-200px 0 0 -300px;
    border-radius:15px;
    overflow:hidden;
    padding:9px 0 0;
    box-shadow: 0 0 20px rgba(90,93,221,.3);
    display: none;
}
.free-request-scheme .close{
    width:14px;
    height:14px;
    position: absolute;
    top:15px;
    right:15px;
    background:url(../img/wel36.png) no-repeat center;
    background-size:100% auto;
    cursor: pointer;
}
.free-request-scheme h2{
    font-size:32px;
    color:#fff;
    text-align: center;
    line-height:90px;
}
.free-request-scheme form{
    width:44%;
    display: block;
    margin:0 auto;
}
.free-request-scheme input[type="text"]{
    border:1px solid #fff;
    width:100%;
    line-height:28px;
    height:30px;
    padding:0 7px;
    font-size:12px;
    color:#fff;
    background:none;
    margin-bottom: 20px;
     moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.free-request-scheme textarea{
    width:100%;
    padding:1px 7px;
    height:88px;
    border:1px solid #fff;
    font-size:12px;
    color:#fff;
    background:none;
    resize:none;
    line-height:28px;
    margin-bottom: 30px;
     moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.free-request-scheme input[type="submit"]{
    padding:0;
    width:150px;
    height:40px;
    text-align: center;
    line-height:40px;
    border:none;
    background:#ebbd1c;
    color:#fff;
    font-size:16px;
    display: block;
    margin:0 auto;
    border-radius:5px;
}
.free-request-scheme input[type="text"]:focus,.free-request-scheme textarea:focus{
    border-color: #ebbd1c;
}
.free-request-scheme input::-webkit-input-placeholder,.free-request-scheme textarea::-webkit-input-placeholder {
color: #eee;
}
.free-request-scheme input:-moz-placeholder,.free-request-scheme textarea:-moz-placeholder {
color: #eee;
}
.free-request-scheme input::-moz-placeholder,.free-request-scheme textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#eee;
}
.free-request-scheme input:-ms-input-placeholder,.free-request-scheme textarea:-ms-input-placeholder {
color: #eee;
}

/* ================= 商务代理合作遮罩（页头 VIP 入口） =================
   与建站/智能硬件遮罩共用 .service-nav / .sv-* 体系，
   但强调色不用站点蓝，改用与页头 VIP 按钮同源的香槟金，
   黑金配色撑「高级大气」的合作邀约氛围。选择器都挂在 .vip-nav 下，
   不影响另外两个遮罩。 */
.vip-nav{
    background:
        radial-gradient(60% 46% at 50% 0%, rgba(227,192,106,.08) 0%, rgba(227,192,106,0) 100%),
        #000;
}
/* 主视觉：细金边框 + 四角金色包角，殿堂感 */
.vip-nav .sv-hero{
    position: relative;
    max-width: 1060px;
    margin: 0 auto;
    padding: 70px 48px 60px;
    border: 1px solid rgba(227,192,106,.26);
    border-radius: 4px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(227,192,106,.09) 0%, rgba(227,192,106,0) 60%),
        linear-gradient(180deg, rgba(227,192,106,.05), rgba(227,192,106,0) 55%);
}
/* 四角包角：一个伪元素铺 8 条短线，比四张图省事且不糊屏 */
.vip-nav .sv-hero:after{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    pointer-events: none;
    background-image:
        linear-gradient(#e3c06a, #e3c06a), linear-gradient(#e3c06a, #e3c06a),
        linear-gradient(#e3c06a, #e3c06a), linear-gradient(#e3c06a, #e3c06a),
        linear-gradient(#e3c06a, #e3c06a), linear-gradient(#e3c06a, #e3c06a),
        linear-gradient(#e3c06a, #e3c06a), linear-gradient(#e3c06a, #e3c06a);
    background-position:
        left top, left top,
        right top, right top,
        left bottom, left bottom,
        right bottom, right bottom;
    background-size:
        30px 2px, 2px 30px,
        30px 2px, 2px 30px,
        30px 2px, 2px 30px,
        30px 2px, 2px 30px;
    background-repeat: no-repeat;
}
.vip-nav .sv-tag{
    border-color: rgba(227,192,106,.55);
    background: rgba(227,192,106,.1);
    color: #f0d68f;
}
/* 「合作计划」四字：香槟金渐变字 */
.vip-nav .sv-hero h2 em{
    background: linear-gradient(180deg, #f7e3a5 0%, #cfa959 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* 英文副题：衬线体大字距，衬托主标题 */
.vip-hero-en{
    margin-top: 16px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: rgba(227,192,106,.8);
}
/* 主视觉三项核心数据 */
.vip-stats{
    display: flex;
    justify-content: center;
    margin-top: 46px;
}
.vip-stats li{
    flex: 1;
    max-width: 250px;
    padding: 0 20px;
}
.vip-stats li + li{
    border-left: 1px solid rgba(227,192,106,.22);
}
.vip-stats b{
    display: block;
    font-size: 26px;
    font-weight: normal;
    letter-spacing: 2px;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
}
.vip-stats b i{
    font-style: normal;
    font-size: 36px;
    margin: 0 2px;
    color: #f0d68f;
}
.vip-stats span{
    display: block;
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: 1px;
    color: rgba(255,255,255,.55);
}
/* 区块标题两侧的金色渐隐细线 */
.vip-nav .sv-sec-hd h3{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.vip-nav .sv-sec-hd h3:before,
.vip-nav .sv-sec-hd h3:after{
    content: "";
    width: 42px;
    height: 1px;
    flex: none;
    background: linear-gradient(90deg, rgba(227,192,106,0), rgba(227,192,106,.65));
}
.vip-nav .sv-sec-hd h3:after{
    background: linear-gradient(90deg, rgba(227,192,106,.65), rgba(227,192,106,0));
}
/* 四种合作模式：编号卡片 */
.vip-modes{
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}
.vip-modes li{
    flex: 1 1 calc(25% - 22px);
    min-width: 250px;
    padding: 34px 28px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 4px;
    background: rgba(255,255,255,.04);
    transition: border-color .3s, background .3s, transform .3s, box-shadow .3s;
}
.vip-modes li:hover{
    border-color: rgba(227,192,106,.55);
    background: rgba(227,192,106,.07);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.vip-mode-no{
    display: inline-block;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 15px;
    letter-spacing: 2px;
    color: rgba(227,192,106,.85);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(227,192,106,.35);
}
.vip-modes h4{
    margin-top: 18px;
    font-size: 21px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #fff;
}
.vip-modes p{
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255,255,255,.62);
}
/* 代理等级三卡（> 直属子级：嵌套的 .vip-tier-list li 不吃卡片样式） */
.vip-tiers{
    display: flex;
    gap: 26px;
    align-items: stretch;
}
.vip-tiers > li{
    position: relative;
    flex: 1;
    padding: 46px 30px 36px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    background: rgba(255,255,255,.03);
    transition: transform .3s, border-color .3s, box-shadow .3s;
}
.vip-tiers > li:hover{
    transform: translateY(-6px);
    border-color: rgba(227,192,106,.45);
}
.vip-tier-name{
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 3px;
    color: #fff;
}
.vip-tier-en{
    margin-top: 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(227,192,106,.7);
}
.vip-tier-for{
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255,255,255,.5);
}
.vip-tier-list{
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.09);
    text-align: left;
}
.vip-tier-list li{
    position: relative;
    padding: 7px 0 7px 26px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,.7);
    text-align: left;
}
.vip-tier-list li:before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 7px;
    font-size: 14px;
    color: #e3c06a;
}
/* 主推档：金边 + 顶部金徽标 */
.vip-tiers > .vip-tier-hot{
    border-color: rgba(227,192,106,.55);
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(227,192,106,.14) 0%, rgba(227,192,106,0) 60%),
        rgba(227,192,106,.05);
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.vip-tiers > .vip-tier-hot:hover{
    border-color: rgba(240,214,143,.85);
    box-shadow: 0 18px 46px rgba(0,0,0,.55), 0 0 24px rgba(227,192,106,.18);
}
.vip-tier-badge{
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f5e0a0, #c9a45c);
    color: #241b07;
    font-style: normal;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 4px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(201,164,92,.4);
}
/* 复用的公共组件在本遮罩内统一换成金色 */
.vip-nav .sv-list li:before{
    background: #e3c06a;
}
.vip-nav .sv-num{
    background: linear-gradient(135deg, #f0d68f, #c9a45c);
    color: #241b07;
    font-weight: bold;
}
.vip-nav .sv-steps li{
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.09);
}
.vip-nav .sv-faq dt:before{
    color: #f0d68f;
}
.vip-nav .sv-tip{
    border-left-color: rgba(227,192,106,.6);
}
.vip-nav .sv-cta{
    background:
        radial-gradient(100% 120% at 50% 0%, rgba(227,192,106,.12) 0%, rgba(227,192,106,0) 70%),
        rgba(227,192,106,.05);
    border-color: rgba(227,192,106,.4);
}
.vip-nav .sv-btn{
    background: linear-gradient(135deg, #f0d68f, #c9a45c);
    color: #241b07;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(201,164,92,.25);
}
.vip-nav .sv-btn:hover{
    background: linear-gradient(135deg, #f8e6ac, #d4ae66);
    box-shadow: 0 8px 26px rgba(227,192,106,.4);
}