/* 项目支持 article-index-project.html — 板块顺序与 HTML 一致；先基础样式，@media 集中在板块末尾 */

/* ===== .banner-all ===== — 见 common.css .banner .banner-all */


/* ===== .service-paper ===== */
.service-paper{padding:65px 0 85px}
@media(max-width:1200px){
    .service-paper{padding:55px 0 70px}
}
@media(max-width:768px){
    .service-paper{padding:40px 0 50px}
}


/* ===== .service-main ===== */
.service-main .content{position:relative;display:flex;align-items:center}
.service-main .img{width:100%;min-width:0}
.service-main .img > img{width:100%;height:auto;max-width:100%;display:block}
.service-main .textbox{width:46%;max-width:550px;position:absolute;left:0;z-index:1;padding-left:40px;min-width:0}
.service-main .content:not(:has(.img)) .textbox{position:static;width:100%;max-width:none;padding-left:0}
.service-main .title-53{color:var(--c-text);margin-bottom:30px;font-weight:600}
.service-main .title-53::after{content:"";width:70px;height:6px;background-color:var(--c-accent);border-radius:8px;display:block;margin-top:15px}
.service-main .text{color:#666;font-weight:300}
.service-main .text p{margin-bottom:20px}
.service-main .text p:last-child{margin-bottom:0}

@media(max-width:1720px){
    .service-main .title-53{font-size:48px;line-height:56px}
}
@media(max-width:1570px){
    .service-main .title-53{font-size:44px;line-height:52px}
    .service-main .title-53{margin-bottom:26px}
}
@media(max-width:1430px){
    .service-main .title-53{font-size:40px;line-height:48px}
    .service-main .textbox{padding-left:32px}
    .service-main .title-53::after{width:60px;height:5px;margin-top:12px}
}
@media(max-width:1200px){
    .service-main .textbox{width:50%;padding-left:30px}
    .service-main .title-53{font-size:36px;line-height:44px;margin-bottom:22px}
}

@media(min-width:992px) and (max-width:1199px){
    .service-main .textbox{width:52%;max-width:480px;padding-left:24px}
    .service-main .title-53{font-size:36px;line-height:44px}
    .service-main .text{font-size:15px;line-height:24px}
}

@media(min-width:900px) and (max-width:991px){
    .service-main .textbox{width:54%;max-width:420px;padding-left:20px}
    .service-main .title-53{font-size:30px;line-height:38px;margin-bottom:18px}
    .service-main .title-53::after{width:52px;height:4px;margin-top:10px}
    .service-main .text{font-size:14px;line-height:22px}
    .service-main .text p{margin-bottom:14px}
}

@media(max-width:899px){
    .service-main .textbox{padding-left:15px;}
    .service-main .title-53{font-size:32px;line-height:40px;margin-bottom:18px}
}

@media(max-width:768px){
    .service-main .img{display: none;}
    .service-main .textbox{margin-top:20px;position:static;width:100%;max-width:100%;padding-left:0}
    .service-main .title-53{font-size:24px;line-height:32px;margin-bottom:16px}
    .service-main .title-53::after{width:50px;height:4px;margin-top:10px}
    .service-main .text{font-size:14px;line-height:22px}
    .service-main .text p{margin-bottom:12px}
}

@media(max-width:540px){
    .service-main .title-53{font-size:22px;line-height:30px}
}
@media(max-width:430px){
    .service-main .title-53{font-size:20px;line-height:28px}
}


/* ===== .service-support ===== */
.service-support article{margin-top:70px}
.service-support .top-head{display:flex;align-items:center;max-width:90%;margin-bottom:45px}
.service-support .num{width:105px;font-size:48px;line-height:1;font-weight:600;color:var(--c-accent);flex-shrink:0;display:grid;place-items:center}
.service-support .top-head .box{position:relative;padding-left:35px}
.service-support .top-head .box::before{content:"";width:2px;height:85%;background-color:#f1f1f1;position:absolute;left:0;top:7px}
.service-support .h4{font-size:24px;line-height:32px;font-weight:600;color:#000;}
.service-support .top-head .text{font-size:16px;line-height:24px;font-weight:300;color:var(--c-text);margin-top:15px}
.service-support .list{
    box-shadow:0 0 27px 0 rgba(6,0,1,.05);border:solid 2px #edeef4;border-radius:8px;
    height:100%;transition:all .3s;
}
.service-support .list:hover{box-shadow:0 0 27px 0 rgba(6,0,1,.15);border-color:var(--c-accent);transform:translateY(-5px)}
.service-support .list .h5,
.service-support .list .t1{font-size:18px;line-height:26px;font-weight:600;color:var(--c-text);margin-bottom:10px}
.service-support .list .cont{font-size:16px;line-height:24px;font-weight:300;color:var(--c-text)}
.service-support .list .cont p{margin:0}
.service-support .note-bar{display:flex;align-items:center;gap:25px;background-color:#f3f6fe;border-radius:8px;padding:25px 30px;margin-top:50px}
.service-support .note-bar img{mix-blend-mode:multiply}
.service-support .note-bar .cont{font-size:16px;line-height:24px;font-weight:300;color:var(--c-text)}
.service-support .note-bar .cont p{margin:0}
.service-support .grid-row .list{height:100%;display:grid;grid-template-columns:55px auto;gap:20px}
.service-support .grid-col .list{height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:15px}
.service-support .service-row .content{display:flex;align-items:center;justify-content:space-between;gap:45px}
.service-support .service-row .left{width:55%}
.service-support .service-row .right{width:40%}
.service-support .service-row .right > img{border-radius:8px}
@media(max-width:1200px){
    .service-support article{margin-top:55px}
    .service-support .top-head{max-width:100%}
}
@media(max-width:899px){
    .service-support article{margin-top:45px}
    .service-support .service-row .content{flex-direction:column;gap:30px}
    .service-support .service-row .left,
    .service-support .service-row .right{width:100%}
    .service-support .service-row .right{order:-1}
    .service-support .grid-row > [class*="g-col"],
    .service-support .grid-col > [class*="g-col"]{grid-column:span 12}
}
@media(max-width:768px){
    .service-support article{margin-top:35px}
    .service-support .top-head{flex-direction:column;align-items:flex-start;gap:15px;margin-bottom:30px}
    .service-support .num{width:auto;font-size:36px;justify-content:flex-start}
    .service-support .top-head .box{padding-left:0}
    .service-support .top-head .box::before{display:none}
    .service-support .h4{font-size:20px;line-height:28px}
    .service-support .note-bar{flex-direction:column;align-items:flex-start;gap:15px;padding:20px;margin-top:35px}
}


/* ===== .service-1 ===== */
.service-support .service-1 .grid{--bs-gap:50px}
.service-support .service-1 .list{padding:35px 35px 35px 25px;min-width:0}
.service-support .service-1 .icon{width:55px;height:55px;flex-shrink:0;overflow:hidden}
.service-support .service-1 .icon img{width:55px;height:55px;max-width:100%;max-height:100%;object-fit:contain;display:block}
.service-support .service-1 .textbox{min-width:0}
.service-support .service-1 .note-bar .icon{width:42px;height:42px}
.service-support .service-1 .note-bar .icon img{width:42px;height:42px}

@media(max-width:1570px){
    .service-support .service-1 .grid{--bs-gap:42px}
    .service-support .service-1 .num{font-size:44px}
}
@media(max-width:1430px){
    .service-support .service-1 .grid{--bs-gap:36px}
    .service-support .service-1 .list{padding:30px 28px 30px 22px}
    .service-support .service-1 .h4{font-size:22px;line-height:30px}
    .service-support .service-1 .num{font-size:40px}
    .service-support .service-1 .note-bar{padding:22px 26px;margin-top:42px}
}
@media(max-width:1200px){
    .service-support .service-1 .grid{--bs-gap:28px}
    .service-support .service-1 .list{padding:26px 22px 26px 18px}
    .service-support .service-1 .num{font-size:36px}
    .service-support .service-1 .h4{font-size:22px;line-height:30px;}
    .service-support .top-head .text{margin-top:12px}
    .service-support .service-1 .list .h5{font-size:17px;line-height:24px}
    .service-support .service-1 .list .cont{font-size:15px;line-height:22px}
}

@media(min-width:992px) and (max-width:1199px){
    .service-support .service-1 .grid{--bs-gap:20px}
    .service-support .service-1 .list{padding:22px 16px 22px 14px}
    .service-support .service-1 .top-head{margin-bottom:32px}
    .service-support .service-1 .num{width:84px;font-size:36px}
    .service-support .service-1 .h4{font-size:20px;line-height:28px}
    .service-support .service-1 .grid-row .list{grid-template-columns:48px auto;gap:14px}
    .service-support .service-1 .icon,
    .service-support .service-1 .icon img{width:48px;height:48px}
}

@media(min-width:900px) and (max-width:991px){
    .service-support .service-1 .grid{--bs-gap:20px}
    .service-support .service-1 .grid > [class*="g-col"]{grid-column:span 6}
    .service-support .service-1 .top-head{margin-bottom:28px}
    .service-support .service-1 .num{width:72px;font-size:32px}
    .service-support .service-1 .h4{font-size:20px;line-height:28px}
    .service-support .service-1 .top-head .text{font-size:15px;line-height:22px}
    .service-support .service-1 .list{padding:22px 18px}
}

@media(max-width:899px){
    .service-support .service-1 .grid{--bs-gap:18px}
    .service-support .service-1 .grid > [class*="g-col"]{grid-column:span 6}
    .service-support .service-1 .h4{font-size:20px;line-height:28px}
    .service-support .service-1 .note-bar{margin-top:32px;padding:20px 22px;gap:18px}
}

@media(max-width:768px){
    .service-support .service-1 .grid{--bs-gap:16px}
    .service-support .service-1 .grid > [class*="g-col"]{grid-column:span 12}
    .service-support .service-1 .list{padding:22px 18px}
    .service-support .service-1 .list:hover{transform:none}
    .service-support .service-1 .h4{font-size:18px;line-height:26px}
    .service-support .service-1 .list .h5{font-size:16px;line-height:24px}
    .service-support .service-1 .list .cont{font-size:14px;line-height:22px}
    .service-support .service-1 .note-bar{flex-direction:column;align-items:flex-start;gap:12px;padding:18px;margin-top:24px}
    .service-support .service-1 .note-bar .cont{font-size:14px;line-height:22px}
}

@media(max-width:540px){
    .service-support .service-1 .grid-row .list{grid-template-columns:48px auto;gap:12px}
    .service-support .service-1 .icon,
    .service-support .service-1 .icon img{width:48px;height:48px}
    .service-support .service-1 .num{font-size:28px}
}
@media(max-width:430px){
    .service-support .service-1 .h4{font-size:17px;line-height:24px}
    .service-support .service-1 .grid-row .list{grid-template-columns:42px auto;gap:10px}
    .service-support .service-1 .icon,
    .service-support .service-1 .icon img{width:42px;height:42px}
}


/* ===== .service-2 ===== */
.service-support .service-2 .left,
.service-support .service-2 .right{min-width:0}
.service-support .service-2 .content:not(:has(.right)) .left{width:100%}
.service-support .service-2 .right > img{width:100%;height:auto;max-width:100%;display:block;border-radius:8px}
.service-support .service-2 .grid{--bs-gap:35px}
.service-support .service-2 .list{padding:25px 20px;gap:10px;min-width:0}
.service-support .service-2 .icon{width:55px;height:55px;flex-shrink:0;overflow:hidden}
.service-support .service-2 .icon img{width:55px;height:55px;max-width:100%;max-height:100%;object-fit:contain;display:block}
.service-support .service-2 .textbox{min-width:0}

@media(max-width:1570px){
    .service-support .service-2 .grid{--bs-gap:28px}
    .service-support .service-2 .num{font-size:44px}
}
@media(max-width:1430px){
    .service-support .service-2 .grid{--bs-gap:24px}
    .service-support .service-2 .h4{font-size:22px;line-height:30px}
    .service-support .service-2 .num{font-size:40px}
    .service-support .service-2 .list{padding:22px 18px}
}
@media(max-width:1200px){
    .service-support .service-2 .grid{--bs-gap:20px}
    .service-support .service-2 .h4{font-size:22px;line-height:30px;}
    .service-support .top-head .text{margin-top:12px}
    .service-support .service-2 .num{font-size:36px}
    .service-support .service-2 .list .h5{font-size:17px;line-height:24px}
    .service-support .service-2 .list .cont{font-size:15px;line-height:22px}
}

@media(min-width:992px) and (max-width:1199px){
    .service-support .service-2 .content{gap:28px}
    .service-support .service-2 .left{width:56%}
    .service-support .service-2 .right{width:40%}
    .service-support .service-2 .num{width:84px;font-size:36px}
    .service-support .service-2 .h4{font-size:20px;line-height:28px}
    .service-support .service-2 .grid{--bs-gap:16px}
    .service-support .service-2 .list{padding:18px 14px}
    .service-support .service-2 .grid-row .list{grid-template-columns:48px auto;gap:12px}
    .service-support .service-2 .icon,
    .service-support .service-2 .icon img{width:48px;height:48px}
}

@media(min-width:900px) and (max-width:991px){
    .service-support .service-2 .content{gap:20px}
    .service-support .service-2 .left{width:56%}
    .service-support .service-2 .right{width:40%}
    .service-support .service-2 .num{width:72px;font-size:32px}
    .service-support .service-2 .h4{font-size:20px;line-height:28px}
    .service-support .service-2 .top-head .text{font-size:15px;line-height:22px}
    .service-support .service-2 .grid{--bs-gap:14px}
    .service-support .service-2 .grid > [class*="g-col"]{grid-column:span 12}
    .service-support .service-2 .list{padding:16px 14px}
}

@media(max-width:899px){
    .service-support .service-2 .content{flex-direction:column-reverse;align-items:stretch;gap:24px}
    .service-support .service-2 .left,
    .service-support .service-2 .right{width:100%;max-width:100%}
    .service-support .service-2 .right{order:0}
    .service-support .service-2 .right > img{width: auto;}
    .service-support .service-2 .grid{--bs-gap:16px}
    .service-support .service-2 .grid > [class*="g-col"]{grid-column:span 6}
    .service-support .service-2 .h4{font-size:20px;line-height:28px}
}

@media(max-width:768px){
    .service-support .service-2 .content{gap:20px}
    .service-support .service-2 .grid{--bs-gap:16px}
    .service-support .service-2 .grid > [class*="g-col"]{grid-column:span 12}
    .service-support .service-2 .list{padding:20px 16px}
    .service-support .service-2 .list:hover{transform:none}
    .service-support .service-2 .h4{font-size:18px;line-height:26px}
    .service-support .service-2 .list .h5{font-size:16px;line-height:24px}
    .service-support .service-2 .list .cont{font-size:14px;line-height:22px}
}

@media(max-width:540px){
    .service-support .service-2 .grid-row .list{grid-template-columns:48px auto;gap:12px}
    .service-support .service-2 .icon,
    .service-support .service-2 .icon img{width:48px;height:48px}
    .service-support .service-2 .num{font-size:28px}
}
@media(max-width:430px){
    .service-support .service-2 .h4{font-size:17px;line-height:24px}
    .service-support .service-2 .grid-row .list{grid-template-columns:42px auto;gap:10px}
    .service-support .service-2 .icon,
    .service-support .service-2 .icon img{width:42px;height:42px}
}


/* ===== .service-3 ===== */
.service-support .service-3 .left,
.service-support .service-3 .right{min-width:0}
.service-support .service-3 .content:not(:has(.right)) .left{width:100%}
.service-support .service-3 .right > img{width:100%;height:auto;max-width:100%;display:block;border-radius:8px}
.service-support .service-3 .grid{--bs-gap:30px}
.service-support .service-3 .list{min-width:0}
.service-support .service-3 .icon{width:55px;height:55px;flex-shrink:0;overflow:hidden}
.service-support .service-3 .icon img{width:55px;height:55px;max-width:100%;max-height:100%;object-fit:contain;display:block}
.service-support .service-3 .textbox{min-width:0}
.service-support .service-3 .note-bar .icon{width:55px;height:55px}
.service-support .service-3 .note-bar .icon img{width:55px;height:55px}

@media(max-width:1570px){
    .service-support .service-3 .grid{--bs-gap:24px}
    .service-support .service-3 .num{font-size:44px}
}
@media(max-width:1430px){
    .service-support .service-3 .grid{--bs-gap:20px}
    .service-support .service-3 .h4{font-size:22px;line-height:30px}
    .service-support .service-3 .num{font-size:40px}
}
@media(max-width:1200px){
    .service-support .service-3 .grid{--bs-gap:16px}
    .service-support .service-3 .h4{font-size:22px;line-height:30px;}
    .service-support .top-head .text{margin-top:12px}
    .service-support .service-3 .num{font-size:36px}
    .service-support .service-3 .list .h5{font-size:17px;line-height:24px}
    .service-support .service-3 .list .cont{font-size:15px;line-height:22px}
}

@media(min-width:992px) and (max-width:1199px){
    .service-support .service-3 .content{gap:28px}
    .service-support .service-3 .left{width:56%}
    .service-support .service-3 .right{width:40%}
    .service-support .service-3 .num{width:84px;font-size:36px}
    .service-support .service-3 .h4{font-size:20px;line-height:28px}
    .service-support .service-3 .grid{--bs-gap:12px}
    .service-support .service-3 .list{padding:12px 8px}
    .service-support .service-3 .icon,
    .service-support .service-3 .icon img{width:48px;height:48px}
    .service-support .service-3 .note-bar{padding:18px 16px;gap:16px;margin-top:32px}
}

@media(min-width:900px) and (max-width:991px){
    .service-support .service-3 .content{gap:20px}
    .service-support .service-3 .left{width:56%}
    .service-support .service-3 .right{width:40%}
    .service-support .service-3 .num{width:72px;font-size:32px}
    .service-support .service-3 .h4{font-size:20px;line-height:28px}
    .service-support .service-3 .top-head .text{font-size:15px;line-height:22px}
    .service-support .service-3 .grid{--bs-gap:12px}
    .service-support .service-3 .grid > [class*="g-col"]{grid-column:span 12}
}

@media(max-width:899px){
    .service-support .service-3 .content{flex-direction:column-reverse;align-items:stretch;gap:24px}
    .service-support .service-3 .left,
    .service-support .service-3 .right{width:100%;max-width:100%}
    .service-support .service-3 .right{order:0}
    .service-support .service-3 .right > img{width: auto;}
    .service-support .service-3 .grid{--bs-gap:16px}
    .service-support .service-3 .grid > [class*="g-col"]{grid-column:span 6}
    .service-support .service-3 .h4{font-size:20px;line-height:28px}
    .service-support .service-3 .note-bar{margin-top:32px;padding:20px 22px;gap:18px}
}

@media(max-width:768px){
    .service-support .service-3 .content{gap:20px}
    .service-support .service-3 .grid{--bs-gap:16px}
    .service-support .service-3 .grid > [class*="g-col"]{grid-column:span 12}
    .service-support .service-3 .list:hover{transform:none}
    .service-support .service-3 .h4{font-size:18px;line-height:26px}
    .service-support .service-3 .list .h5{font-size:16px;line-height:24px}
    .service-support .service-3 .list .cont{font-size:14px;line-height:22px}
    .service-support .service-3 .note-bar{flex-direction:column;align-items:flex-start;gap:12px;padding:18px;margin-top:24px}
    .service-support .service-3 .note-bar .cont{font-size:14px;line-height:22px}
}

@media(max-width:540px){
    .service-support .service-3 .icon,
    .service-support .service-3 .icon img,
    .service-support .service-3 .note-bar .icon,
    .service-support .service-3 .note-bar .icon img{width:48px;height:48px}
    .service-support .service-3 .num{font-size:28px}
}
@media(max-width:430px){
    .service-support .service-3 .h4{font-size:17px;line-height:24px}
    .service-support .service-3 .icon,
    .service-support .service-3 .icon img,
    .service-support .service-3 .note-bar .icon,
    .service-support .service-3 .note-bar .icon img{width:42px;height:42px}
}


/* ===== .service-4 ===== */
.service-support .service-4 .grid{display:flex;justify-content:space-between;gap:30px}
.service-support .service-4 .list{height:auto;flex:1;min-width:0}
.service-support .service-4 .icon{width:55px;height:55px;flex-shrink:0;overflow:hidden}
.service-support .service-4 .icon img{width:55px;height:55px;max-width:100%;max-height:100%;object-fit:contain;display:block}
.service-support .service-4 .textbox{min-width:0}

@media(max-width:1570px){
    .service-support .service-4 .grid{gap:24px}
    .service-support .service-4 .num{font-size:44px}
}
@media(max-width:1430px){
    .service-support .service-4 .grid{gap:20px}
    .service-support .service-4 .h4{font-size:22px;line-height:30px}
    .service-support .service-4 .num{font-size:40px}
}
@media(max-width:1200px){
    .service-support .service-4 .grid{flex-wrap:wrap;gap:25px}
    .service-support .service-4 .h4{font-size:20px;line-height:28px}
    .service-support .top-head .text{margin-top:12px}
    .service-support .service-4 .num{width:84px;font-size:36px}
    .service-support .service-4 .list{padding:12px 10px;flex:1 1 calc(35% - 35px)}
    .service-support .service-4 .list .t1{font-size:17px;line-height:24px}
    .service-support .service-4 .list .cont{font-size:15px;line-height:22px}
    .service-support .service-4 .icon,
    .service-support .service-4 .icon img{width:48px;height:48px}
}

@media(max-width:991px){
    .service-support .service-4 .num{width:72px;font-size:32px}
    .service-support .service-4 .h4{font-size:20px;line-height:28px}
}

@media(max-width:899px){
    .service-support .service-4 .grid{flex-wrap:wrap;gap:16px}
    .service-support .service-4 .list{flex:1 1 calc(50% - 16px);min-width:0}
    .service-support .service-4 .h4{font-size:20px;line-height:28px}
}

@media(max-width:768px){
    .service-support .service-4 .grid{flex-direction:column;gap:16px}
    .service-support .service-4 .list{flex:1 1 100%;min-width:0}
    .service-support .service-4 .list:hover{transform:none}
    .service-support .service-4 .h4{font-size:18px;line-height:26px}
    .service-support .service-4 .list .t1{font-size:16px;line-height:24px}
    .service-support .service-4 .list .cont{font-size:14px;line-height:22px}
}

@media(max-width:540px){
    .service-support .service-4 .icon,
    .service-support .service-4 .icon img{width:48px;height:48px}
    .service-support .service-4 .num{font-size:28px}
}
@media(max-width:430px){
    .service-support .service-4 .h4{font-size:17px;line-height:24px}
    .service-support .service-4 .icon,
    .service-support .service-4 .icon img{width:42px;height:42px}
}
