.h6-wrap{
    width:100%;
    padding:40px 24px;
    display:flex;
    gap:40px;
    align-items:center;
    justify-content:center;
}

.h6-left{
    flex-shrink:0;
    position:relative;
    width:min(600px,52vw);
    height:min(600px,52vw);
}

.h6-ring-o{
    position:absolute;
    top:50%;
    left:50%;
    width:86%;
    height:86%;
    border-radius:50%;
    border:2px dashed rgba(60,113,181,.35);
    transform:translate(-50%,-50%);
}

.h6-ring-i{
    position:absolute;
    top:50%;
    left:50%;
    width:29%;
    height:29%;
    border-radius:50%;
    border:2.5px solid rgba(60,113,181,.55);
    transform:translate(-50%,-50%);
    transition:.3s;
}

.h6-ring-i.lit{
    border-color:#E8C755;
    box-shadow:0 0 0 8px rgba(60,113,181,.08);
}

.h6-hub{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:27%;
    height:27%;
    border-radius:50%;
    background:#3C71B5;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:5;
    box-shadow:0 10px 30px rgba(60,113,181,.25);
}

.h6-hub-n{
    font-size:clamp(30px,5.5vw,52px);
    font-weight:800;
    color:#fff;
    line-height:1;
}

.h6-hub-s{
    font-size:clamp(10px,1.6vw,13px);
    color:rgba(255,255,255,.9);
    font-weight:600;
    text-align:center;
    margin-top:3px;
    line-height:1.4;
}

.h6-node{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    z-index:6;
    width:min(120px,20vw);
    transform:translate(-50%,-50%);
}

.h6-node-c{
    width:clamp(52px,8.5vw,70px);
    height:clamp(52px,8.5vw,70px);
    border-radius:50%;
    background:#fff;
    border:2px solid #3C71B5;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
    position:relative;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.06);
}

.h6-node-c svg{
    width:clamp(22px,3.8vw,32px);
    height:clamp(22px,3.8vw,32px);
    stroke:#3C71B5;
    fill:none;
    stroke-width:1.8;
    transition:.3s;
}

.h6-node.active .h6-node-c{
    background:#3C71B5;
    border:3px solid #E8C755;
    transform:scale(1.15);
    box-shadow:0 8px 22px rgba(60,113,181,.35);
}

.h6-node.active .h6-node-c svg{
    stroke:#fff;
}

.h6-node:hover .h6-node-c{
    transform:scale(1.08);
    border-color:#E8C755;
}

.h6-node-lbl{
    margin-top:8px;
    font-size:clamp(11px,1.7vw,13px);
    font-weight:600;
    color:#3C71B5;
    text-align:center;
    line-height:1.35;
}

.h6-conn{
    position:absolute;
    top:50%;
    left:50%;
    transform-origin:0 0;
    height:2px;
    background:rgba(60,113,181,.15);
    z-index:1;
    transition:.3s;
}

.h6-conn.lit{
    background:#E8C755;
    height:2px;
}

.h6-ripple{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:rgba(60,113,181,.35);
    animation:h6rip .5s ease-out forwards;
    pointer-events:none;
}

@keyframes h6rip{
    0%{
        transform:scale(1);
        opacity:.7;
    }
    100%{
        transform:scale(2.5);
        opacity:0;
    }
}

.h6-right{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
}

.h6-box{
    border:1px solid #D9E4F6;
    border-radius:12px;
    padding:16px 22px;
    cursor:pointer;
    background:#fff;
    transition:all .3s ease;
    box-shadow:0 2px 8px rgba(0,0,0,.03);
}

.h6-box:hover{
    border-color:#3C71B5;
    transform:translateX(4px);
    box-shadow:0 6px 18px rgba(60,113,181,.08);
}

.h6-box.active{
    border-left:5px solid #E8C755;
    border-color:#3C71B5;
    background:#F7FAFF;
    transform:translateX(8px);
    box-shadow:0 8px 24px rgba(60,113,181,.08);
}

.h6-box-num{
    font-size:11px;
    font-weight:700;
    color:#E8C755;
    letter-spacing:1px;
    margin-bottom:5px;
}

.h6-box-title{
    font-size:clamp(14px,1.8vw,16px);
    font-weight:700;
    color:#1F365F;
    line-height:1.45;
}

.h6-box-desc{
    font-size:clamp(12px,1.45vw,14px);
    color:#666;
    line-height:1.75;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .35s ease,opacity .3s,margin-top .3s;
}

.h6-box.active .h6-box-desc{
    max-height:150px;
    opacity:1;
    margin-top:8px;
}

@media (max-width:640px){

    .h6-wrap{
        flex-direction:column;
        align-items:center;
        gap:28px;
    }

    .h6-left{
        width:min(340px,90vw);
        height:min(340px,90vw);
    }

    .h6-right{
        width:100%;
        max-width:420px;
    }

    .h6-node-lbl{
        display:none;
    }

}