/* Support article-list-support.html — 板块顺序与 HTML 一致；先基础样式，@media 集中在板块末尾 */
/* ===== .banner-proc ===== */
.banner-proc{position:relative;height:680px;overflow:hidden;background:#071422}
.banner-proc > img{width:100%;height:100%;object-fit:cover;object-position:center right;display:block}
.banner-proc::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,18,40,.94) 0%,rgba(5,18,40,.8) 40%,rgba(5,18,40,.28) 68%,rgba(5,18,40,.12) 100%);z-index:0}
.banner-proc .banner-text{z-index:1}
.banner-proc .content{max-width:680px}
.banner-proc .brand{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.banner-proc .brand span{width:1px;height:34px;background:rgba(255,255,255,.45)}
.banner-proc h1{margin:0 0 18px;font-size:55px;line-height:1.15;font-weight:500;color:#fff}
.banner-proc h1::after{content:"";width:65px;height:3px;background-color:var(--c-accent);display:block;margin:30px 0}
.banner-proc .text{color:#fff}
.banner-proc .text p{margin:0}
.banner-proc .search{display:flex;max-width:100%;margin-top:30px;padding:5px 5px 5px 30px;border-radius:14px;background:#fff}
.banner-proc .search input{flex:1;height:60px;border:0;outline:0;background:transparent;font-size:15px;color:#333}
.banner-proc .search input::placeholder{font-size:18px;line-height:1.2;color:#999}
.banner-proc .search button{display:flex;align-items:center;justify-content:center;width:80px;border:0;border-radius:10px;background:var(--c-accent);color:#fff;cursor:pointer;transition:all .3s ease}
.banner-proc .search i{font-size:28px;line-height:1;font-weight:bold}
@media(max-width:1700px){
.banner-proc{height:650px}
.banner-proc .content{max-width:640px}
.banner-proc h1{font-size:52px}
}
@media(max-width:1600px){
.banner-proc{height:620px}
.banner-proc .content{max-width:600px}
.banner-proc h1{font-size:50px}
.banner-proc h1::after{margin:24px 0}
}
@media(max-width:1500px){
.banner-proc{height:600px}
.banner-proc .content{max-width:560px}
.banner-proc h1{font-size:48px}
.banner-proc .search{margin-top:24px}
}
@media(max-width:1330px){
.banner-proc{height:560px}
.banner-proc .content{max-width:500px}
.banner-proc h1{font-size:44px}
.banner-proc h1::after{width:50px;margin:20px 0}
.banner-proc .brand{gap:14px;margin-bottom:16px}
}
@media(max-width:1440px) and (max-height:800px){
.banner-proc{height:520px}
}
@media(max-width:1199px){
.banner-proc{height:520px}
.banner-proc .content{max-width:460px}
.banner-proc h1{font-size:40px}
}
@media(max-width:899px){
.banner-proc{height:auto;min-height:420px}
.banner-proc > img{min-height:420px}
.banner-proc .content{max-width:100%;padding:60px 0 50px}
.banner-proc h1{font-size:32px}
.banner-proc .search{padding-left:16px}
.banner-proc .search input{height:48px;font-size:16px}
.banner-proc .search input::placeholder{font-size:16px}
}
@media(max-width:768px){
.banner-proc,
.banner-proc > img{min-height:400px}
.banner-proc .content{padding:40px 0 50px}
.banner-proc .brand img{width:auto;max-height:32px}
.banner-proc .brand span{height:24px}
.banner-proc h1{font-size:26px;line-height:1.25}
.banner-proc h1::after{margin:15px 0}
.banner-proc .text{font-size:14px;line-height:22px}
.banner-proc .search{margin-top:20px}
.banner-proc .search button{width:56px;min-height:48px}
.banner-proc .search i{font-size:22px}
}
@media (hover:hover) and (pointer:fine){
.banner-proc .search button:hover{background:var(--c-accent-red)}
}
/* ===== .proc-buy ===== */
.proc-buy{padding:100px 0 80px;background:#fff}
.proc-buy .top-head{margin-bottom:45px}
.proc-buy .items:first-child{margin-top: 0;}
.proc-buy .items{display:grid;grid-template-columns:445px 1fr;gap:50px;align-items:center;margin-top:45px;border:1px solid #eee;border-radius:18px;background:#fff;box-shadow:0 8px 28px rgba(6,0,1,.06)}
.proc-buy .img{height:100%;border-radius:14px 0 0 14px;overflow:hidden}
.proc-buy .img img{width:100%;height:100%;object-fit:cover;display:block}
.proc-buy .box{padding:15px 40px 15px 0}
.proc-buy .hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.proc-buy .num{font-size:30px;line-height:1;font-weight:500;color:var(--c-accent)}
.proc-buy .hd h3{margin:0;font-size:20px;line-height:1.3;font-weight:500;color:var(--c-accent)}
.proc-buy .cont > *{margin-bottom:15px}
.proc-buy .cont > *:nth-last-child(1){margin:0}
.proc-buy .sub{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.proc-buy .list{padding:20px 25px 30px;box-shadow:4px 3px 5px 0 rgba(6,0,1,.1);border:solid 1px #f0f0f0;border-radius:10px}
.proc-buy .list-head{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:10px;margin-bottom:20px}
.proc-buy .ico{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:#e7f6ee}
.proc-buy .list h4{font-size:20px;line-height:1.3;font-weight:500;color:var(--c-black)}
.proc-buy .list ul{margin:0;padding:0;list-style:none}
.proc-buy .list li{position:relative;padding-left:16px;font-size:18px;line-height:1.4;color:var(--c-black)}
.proc-buy .list li + li{margin-top:5px}
.proc-buy .list li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--c-accent)}
@media(max-width:1700px){
.proc-buy{padding:90px 0 70px}
.proc-buy .items{grid-template-columns:420px 1fr;gap:45px;margin-top:40px}
.proc-buy .box{padding-right:35px}
}
@media(max-width:1600px){
.proc-buy{padding:80px 0 65px}
.proc-buy .items{grid-template-columns:390px 1fr;gap:40px;margin-top:35px}
.proc-buy .box{padding-right:30px}
.proc-buy .sub{margin-top:35px}
}
@media(max-width:1500px){
.proc-buy{padding:70px 0 60px}
.proc-buy .items{grid-template-columns:360px 1fr;gap:35px;margin-top:30px}
.proc-buy .box{min-width:0;padding-right:25px}
.proc-buy .num{font-size:26px}
.proc-buy .cont{font-size:16px}
.proc-buy .sub{margin-top:30px}
.proc-buy .list{padding:20px 20px 25px}
.proc-buy .list-head{grid-template-columns:52px 1fr}
.proc-buy .ico{width:52px;height:52px}
.proc-buy .list h4{font-size:18px}
.proc-buy .list li{font-size:16px}
}
@media(max-width:1330px){
.proc-buy{padding:60px 0 55px}
.proc-buy .items{grid-template-columns:320px 1fr;gap:30px;margin-top:25px}
.proc-buy .box{padding-right:20px}
.proc-buy .hd h3{font-size:18px}
.proc-buy .sub{gap:15px;margin-top:25px}
}
@media(max-width:1199px){
.proc-buy{padding:50px 0 45px}
.proc-buy .items{grid-template-columns:280px 1fr;gap:25px}
.proc-buy .box{padding:15px 20px 15px 0}
.proc-buy .num{font-size:24px}
.proc-buy .list-head{margin-bottom:15px}
}
@media(max-width:899px){
.proc-buy{padding:50px 0 40px}
.proc-buy .items{grid-template-columns:1fr;gap:0;margin-top:30px}
.proc-buy .img{border-radius:14px 14px 0 0;height:240px}
.proc-buy .box{padding:25px 20px 30px}
.proc-buy .hd h3{font-size:20px}
}
@media(max-width:640px){
.proc-buy .sub{grid-template-columns:1fr}
}
@media(max-width:768px){
.proc-buy{padding:40px 0 50px}
.proc-buy .items{margin-top:20px}
.proc-buy .img{height:200px}
.proc-buy .box{padding:20px 15px 25px}
.proc-buy .num{font-size:22px}
.proc-buy .hd h3{font-size:18px}
.proc-buy .cont{font-size:14px;line-height:22px}
.proc-buy .sub{margin-top:20px}
.proc-buy .list{padding:15px 15px 20px}
.proc-buy .list-head{grid-template-columns:44px 1fr;margin-bottom:10px}
.proc-buy .ico{width:44px;height:44px}
.proc-buy .list h4{font-size:16px}
.proc-buy .list li{font-size:14px;line-height:22px}
}
/* ===== .proc-check ===== */
.proc-check{padding:80px 0 90px;background:#001431}
.proc-check .title{margin-bottom:45px;color:#fff}
.proc-check .content{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 35px}
.proc-check .list{display:grid;grid-template-columns:155px 1fr;gap:30px;height:100%;padding:25px 10px 20px;border-radius:14px;background:#fff}
.proc-check .img{display:flex;justify-content:center;align-items:center;border-right:1px solid #e5e5e5}
.proc-check .num{width:100px;display:inline-block;margin-bottom:6px;font-size:35px;line-height:1;font-weight:500;color:var(--c-accent);position:relative;padding-bottom:10px}
.proc-check .num::after{content:"";width:100%;height:3px;background-color:var(--c-accent);position:absolute;bottom:0;left:0}
.proc-check .num::before{content:"";width:10px;aspect-ratio:1;border-radius:100%;background-color:var(--c-accent);position:absolute;right:-10px;bottom:-4.5px}
.proc-check .list:nth-child(even) .num{color:var(--c-accent-red)}
.proc-check .list:nth-child(even) .num::after,
.proc-check .list:nth-child(even) .num::before{background-color:var(--c-accent-red)}
.proc-check h3{margin:15px 0 10px;font-size:18px;line-height:1.3;font-weight:600;color:var(--c-black)}
.proc-check p{margin:0;font-size:16px;line-height:1.55;color:#666}
@media(max-width:1700px){
.proc-check{padding:75px 0 80px}
.proc-check .title{margin-bottom:40px;font-size:40px}
.proc-check .content{gap:25px 30px}
.proc-check .list{grid-template-columns:145px 1fr;gap:25px}
.proc-check .num{font-size:32px}
}
@media(max-width:1600px){
.proc-check{padding:70px 0 75px}
.proc-check .title{font-size:38px}
.proc-check .list{grid-template-columns:140px 1fr}
.proc-check .num{font-size:30px}
}
@media(max-width:1500px){
.proc-check{padding:65px 0 70px}
.proc-check .title{margin-bottom:35px;font-size:36px}
.proc-check .content{gap:20px 25px}
.proc-check .list{grid-template-columns:130px 1fr;gap:20px}
.proc-check .num{width:90px;font-size:28px}
.proc-check h3{font-size:16px}
}
@media(max-width:1330px){
.proc-check{padding:55px 0 60px}
.proc-check .title{font-size:34px}
.proc-check .content{gap:20px}
.proc-check .list{grid-template-columns:120px 1fr;padding:20px 10px}
.proc-check .num{width:80px;font-size:26px}
}
@media(max-width:1199px){
.proc-check{padding:50px 0 55px}
.proc-check .title{font-size:32px}
.proc-check .content{grid-template-columns:repeat(2,1fr);gap:25px}
.proc-check .list{grid-template-columns:140px 1fr;gap:25px}
.proc-check .num{width:90px;font-size:30px}
.proc-check h3{font-size:18px}
}
@media(max-width:899px){
.proc-check{padding:50px 0}
.proc-check .title{font-size:28px}
.proc-check .list{grid-template-columns:120px 1fr;gap:20px}
}
@media(max-width:640px){
.proc-check .content{grid-template-columns:1fr;gap:20px}
}
@media(max-width:768px){
.proc-check{padding:40px 0 50px}
.proc-check .title{margin-bottom:20px;font-size:24px;line-height:1.3}
.proc-check .content{gap:15px}
.proc-check .list{grid-template-columns:100px 1fr;gap:15px;padding:20px 15px}
.proc-check .num{width:70px;font-size:24px}
.proc-check h3{margin:10px 0;font-size:16px}
.proc-check p{font-size:14px;line-height:22px}
}
/* ===== .proc-flow ===== */
.proc-flow{padding:90px 0 80px;background:#f6f7f8}
.proc-flow .title{margin-bottom:60px}
.proc-flow .photos{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.proc-flow .photos img{width:100%;height:100%;object-fit:cover;display:block}
.proc-flow .steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:35px}
.proc-flow .steps::before{content:"";position:absolute;left:0;right:0;top:35px;height:3px;background:var(--c-accent)}
.proc-flow .list{position:relative;z-index:1}
.proc-flow .list .num{display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;background:var(--c-accent);font-size:35px;font-weight:600;color:#fff}
.proc-flow .list .box{display:grid;grid-template-columns:80px 1fr;column-gap:5px;align-items:start;margin-top:40px}
.proc-flow .list .ico{grid-row:1 / span 2}
.proc-flow .list h3{margin:0 0 6px;font-size:18px;line-height:1.3;font-weight:500;color:var(--c-black)}
.proc-flow .list p{margin:0;font-size:14px;line-height:1.5;color:#666}
@media(max-width:1700px){
.proc-flow{padding:80px 0 70px}
.proc-flow .title{margin-bottom:50px;font-size:40px}
.proc-flow .steps{margin-top:30px}
.proc-flow .steps::before{top:33px}
.proc-flow .list{min-width:0}
.proc-flow .list .num{width:66px;height:66px;font-size:32px}
.proc-flow .list .box{grid-template-columns:72px 1fr;margin-top:35px}
}
@media(max-width:1600px){
.proc-flow{padding:75px 0 65px}
.proc-flow .title{margin-bottom:45px;font-size:38px}
.proc-flow .steps::before{top:31px}
.proc-flow .list .num{width:62px;height:62px;font-size:30px}
.proc-flow .list .box{grid-template-columns:68px 1fr}
}
@media(max-width:1500px){
.proc-flow{padding:70px 0 60px}
.proc-flow .title{margin-bottom:40px;font-size:36px}
.proc-flow .steps{gap:15px;margin-top:25px}
.proc-flow .steps::before{top:29px}
.proc-flow .list .num{width:58px;height:58px;font-size:28px}
.proc-flow .list .box{grid-template-columns:60px 1fr;margin-top:30px}
.proc-flow .list h3{font-size:16px}
}
@media(max-width:1330px){
.proc-flow{padding:60px 0 55px}
.proc-flow .title{margin-bottom:35px;font-size:34px}
.proc-flow .steps::before{top:26px}
.proc-flow .list .num{width:52px;height:52px;font-size:24px}
.proc-flow .list .box{grid-template-columns:52px 1fr;margin-top:25px}
}
@media(max-width:1199px){
.proc-flow{padding:50px 0}
.proc-flow .title{margin-bottom:30px;font-size:32px}
.proc-flow .steps{grid-template-columns:repeat(3,1fr);gap:30px 20px;margin-top:30px}
.proc-flow .steps::before{display:none}
.proc-flow .list .num{width:60px;height:60px;font-size:28px}
.proc-flow .list .box{grid-template-columns:64px 1fr;margin-top:20px}
.proc-flow .list h3{font-size:18px}
}
@media(max-width:899px){
.proc-flow{padding:50px 0 40px}
.proc-flow .title{font-size:28px}
.proc-flow .photos{grid-template-columns:repeat(2,1fr);gap:15px}
.proc-flow .photos img{height:220px}
.proc-flow .steps{grid-template-columns:repeat(2,1fr);gap:25px}
.proc-flow .list .box{grid-template-columns:70px 1fr}
}
@media(max-width:400px){
.proc-flow .photos,
.proc-flow .steps{grid-template-columns:1fr}
}
@media(max-width:768px){
.proc-flow{padding:40px 0 50px}
.proc-flow .title{margin-bottom:20px;font-size:24px;line-height:1.3}
.proc-flow .photos img{height:180px}
.proc-flow .steps{gap:20px;margin-top:20px}
.proc-flow .list .num{width:44px;height:44px;font-size:18px}
.proc-flow .list .box{grid-template-columns:56px 1fr;column-gap:10px;margin-top:15px}
.proc-flow .list h3{font-size:16px}
.proc-flow .list p{font-size:14px;line-height:22px}
}