.graphW{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
}
.graph {
    --primary-base: #004CAE;
    width: 80px;
    height: 80px;
    position: relative;
}
.graphRing {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.graphRingCircle {
    transition: 0.35s stroke-dasharray;
    transform-origin: 50% 50%;
}
.graphRingCircle:first-child {
    stroke-dasharray: none;
}
.graphTit{
    color: inherit;
    position: absolute;
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;    
    box-shadow: 0 0 25px rgba(0, 0, 0, .1);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-base);
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}
.graphTit>span{
    font-size: 18px;
}

.graph.lg{
    width: 98px;
    height: 98px;
}
.graph.lg .graphRing{
    width: 120px;
    height: 120px;
}
.graph.lg .graphTit{
    width: 79px;
    height: 79px;
}
.graph.lg .graphTit>span{
    font-size: 24px;
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
    .graph.lg{
        width: 80px;
        height: 80px;
    }
    .graph.lg .graphRing{
        width: 100px;
        height: 100px;
    }
    .graph.lg .graphTit{
        width: 66px;
        height: 66px;
    }
    .graph.lg .graphTit>span{
        font-size: 18px;
    }
}  
@media screen and (max-width: 767px){ 
    .graph,
    .graph.lg{
        width: 68px;
        height: 68px;
    }
    .graphRing,
    .graph.lg .graphRing{
        width: 93px;
        height: 93px;
    }
    .graphRingCircle{
        stroke-width: 5px !important;
    }
    .graphTit,
    .graph.lg .graphTit{
        width: 63px;
        height: 63px;
        font-size: 20px;
    }
    .graphTit>span,
    .graph.lg .graphTit>span{
        font-size: 18px;
    }
}
@media screen and (max-width: 500px){ 
}

.graphRing0 .graphRingCircle:nth-child(2) { display: none; }   /* 0% */
.graphRing1 .graphRingCircle:nth-child(2) { stroke-dasharray: 1.88 188.4; } /* 1% */
.graphRing2 .graphRingCircle:nth-child(2) { stroke-dasharray: 3.76 188.4; } /* 2% */
.graphRing3 .graphRingCircle:nth-child(2) { stroke-dasharray: 5.64 188.4; } /* 3% */
.graphRing4 .graphRingCircle:nth-child(2) { stroke-dasharray: 7.52 188.4; } /* 4% */
.graphRing5 .graphRingCircle:nth-child(2) { stroke-dasharray: 9.4 188.4; }  /* 5% */
.graphRing6 .graphRingCircle:nth-child(2) { stroke-dasharray: 11.28 188.4; } /* 6% */
.graphRing7 .graphRingCircle:nth-child(2) { stroke-dasharray: 13.16 188.4; } /* 7% */
.graphRing8 .graphRingCircle:nth-child(2) { stroke-dasharray: 15.04 188.4; } /* 8% */
.graphRing9 .graphRingCircle:nth-child(2) { stroke-dasharray: 16.92 188.4; } /* 9% */
.graphRing10 .graphRingCircle:nth-child(2) { stroke-dasharray: 18.8 188.4; } /* 10% */
.graphRing11 .graphRingCircle:nth-child(2) { stroke-dasharray: 20.68 188.4; } /* 11% */
.graphRing12 .graphRingCircle:nth-child(2) { stroke-dasharray: 22.56 188.4; } /* 12% */
.graphRing13 .graphRingCircle:nth-child(2) { stroke-dasharray: 24.44 188.4; } /* 13% */
.graphRing14 .graphRingCircle:nth-child(2) { stroke-dasharray: 26.32 188.4; } /* 14% */
.graphRing15 .graphRingCircle:nth-child(2) { stroke-dasharray: 28.2 188.4; } /* 15% */
.graphRing16 .graphRingCircle:nth-child(2) { stroke-dasharray: 30.08 188.4; } /* 16% */
.graphRing17 .graphRingCircle:nth-child(2) { stroke-dasharray: 31.96 188.4; } /* 17% */
.graphRing18 .graphRingCircle:nth-child(2) { stroke-dasharray: 33.84 188.4; } /* 18% */
.graphRing19 .graphRingCircle:nth-child(2) { stroke-dasharray: 35.72 188.4; } /* 19% */
.graphRing20 .graphRingCircle:nth-child(2) { stroke-dasharray: 37.6 188.4; } /* 20% */
.graphRing21 .graphRingCircle:nth-child(2) { stroke-dasharray: 39.48 188.4; } /* 21% */
.graphRing22 .graphRingCircle:nth-child(2) { stroke-dasharray: 41.36 188.4; } /* 22% */
.graphRing23 .graphRingCircle:nth-child(2) { stroke-dasharray: 43.24 188.4; } /* 23% */
.graphRing24 .graphRingCircle:nth-child(2) { stroke-dasharray: 45.12 188.4; } /* 24% */
.graphRing25 .graphRingCircle:nth-child(2) { stroke-dasharray: 47 188.4; } /* 25% */
.graphRing26 .graphRingCircle:nth-child(2) { stroke-dasharray: 48.88 188.4; } /* 26% */
.graphRing27 .graphRingCircle:nth-child(2) { stroke-dasharray: 50.76 188.4; } /* 27% */
.graphRing28 .graphRingCircle:nth-child(2) { stroke-dasharray: 52.64 188.4; } /* 28% */
.graphRing29 .graphRingCircle:nth-child(2) { stroke-dasharray: 54.52 188.4; } /* 29% */
.graphRing30 .graphRingCircle:nth-child(2) { stroke-dasharray: 56.4 188.4; } /* 30% */
.graphRing31 .graphRingCircle:nth-child(2) { stroke-dasharray: 58.28 188.4; } /* 31% */
.graphRing32 .graphRingCircle:nth-child(2) { stroke-dasharray: 60.16 188.4; } /* 32% */
.graphRing33 .graphRingCircle:nth-child(2) { stroke-dasharray: 62.04 188.4; } /* 33% */
.graphRing34 .graphRingCircle:nth-child(2) { stroke-dasharray: 63.92 188.4; } /* 34% */
.graphRing35 .graphRingCircle:nth-child(2) { stroke-dasharray: 65.8 188.4; } /* 35% */
.graphRing36 .graphRingCircle:nth-child(2) { stroke-dasharray: 67.68 188.4; } /* 36% */
.graphRing37 .graphRingCircle:nth-child(2) { stroke-dasharray: 69.56 188.4; } /* 37% */
.graphRing38 .graphRingCircle:nth-child(2) { stroke-dasharray: 71.44 188.4; } /* 38% */
.graphRing39 .graphRingCircle:nth-child(2) { stroke-dasharray: 73.32 188.4; } /* 39% */
.graphRing40 .graphRingCircle:nth-child(2) { stroke-dasharray: 75.2 188.4; } /* 40% */
.graphRing41 .graphRingCircle:nth-child(2) { stroke-dasharray: 77.08 188.4; } /* 41% */
.graphRing42 .graphRingCircle:nth-child(2) { stroke-dasharray: 78.96 188.4; } /* 42% */
.graphRing43 .graphRingCircle:nth-child(2) { stroke-dasharray: 80.84 188.4; } /* 43% */
.graphRing44 .graphRingCircle:nth-child(2) { stroke-dasharray: 82.72 188.4; } /* 44% */
.graphRing45 .graphRingCircle:nth-child(2) { stroke-dasharray: 84.6 188.4; } /* 45% */
.graphRing46 .graphRingCircle:nth-child(2) { stroke-dasharray: 86.48 188.4; } /* 46% */
.graphRing47 .graphRingCircle:nth-child(2) { stroke-dasharray: 88.36 188.4; } /* 47% */
.graphRing48 .graphRingCircle:nth-child(2) { stroke-dasharray: 90.24 188.4; } /* 48% */
.graphRing49 .graphRingCircle:nth-child(2) { stroke-dasharray: 92.12 188.4; } /* 49% */
.graphRing50 .graphRingCircle:nth-child(2) { stroke-dasharray: 94 188.4; } /* 50% */
.graphRing51 .graphRingCircle:nth-child(2) { stroke-dasharray: 95.88 188.4; } /* 51% */
.graphRing52 .graphRingCircle:nth-child(2) { stroke-dasharray: 97.76 188.4; } /* 52% */
.graphRing53 .graphRingCircle:nth-child(2) { stroke-dasharray: 99.64 188.4; } /* 53% */
.graphRing54 .graphRingCircle:nth-child(2) { stroke-dasharray: 101.52 188.4; } /* 54% */
.graphRing55 .graphRingCircle:nth-child(2) { stroke-dasharray: 103.4 188.4; } /* 55% */
.graphRing56 .graphRingCircle:nth-child(2) { stroke-dasharray: 105.28 188.4; } /* 56% */
.graphRing57 .graphRingCircle:nth-child(2) { stroke-dasharray: 107.16 188.4; } /* 57% */
.graphRing58 .graphRingCircle:nth-child(2) { stroke-dasharray: 109.04 188.4; } /* 58% */
.graphRing59 .graphRingCircle:nth-child(2) { stroke-dasharray: 110.92 188.4; } /* 59% */
.graphRing60 .graphRingCircle:nth-child(2) { stroke-dasharray: 112.8 188.4; } /* 60% */
.graphRing61 .graphRingCircle:nth-child(2) { stroke-dasharray: 114.68 188.4; } /* 61% */
.graphRing62 .graphRingCircle:nth-child(2) { stroke-dasharray: 116.56 188.4; } /* 62% */
.graphRing63 .graphRingCircle:nth-child(2) { stroke-dasharray: 118.44 188.4; } /* 63% */
.graphRing64 .graphRingCircle:nth-child(2) { stroke-dasharray: 120.32 188.4; } /* 64% */
.graphRing65 .graphRingCircle:nth-child(2) { stroke-dasharray: 122.2 188.4; } /* 65% */
.graphRing66 .graphRingCircle:nth-child(2) { stroke-dasharray: 124.08 188.4; } /* 66% */
.graphRing67 .graphRingCircle:nth-child(2) { stroke-dasharray: 125.96 188.4; } /* 67% */
.graphRing68 .graphRingCircle:nth-child(2) { stroke-dasharray: 127.84 188.4; } /* 68% */
.graphRing69 .graphRingCircle:nth-child(2) { stroke-dasharray: 129.72 188.4; } /* 69% */
.graphRing70 .graphRingCircle:nth-child(2) { stroke-dasharray: 131.6 188.4; } /* 70% */
.graphRing71 .graphRingCircle:nth-child(2) { stroke-dasharray: 133.48 188.4; } /* 71% */
.graphRing72 .graphRingCircle:nth-child(2) { stroke-dasharray: 135.36 188.4; } /* 72% */
.graphRing73 .graphRingCircle:nth-child(2) { stroke-dasharray: 137.24 188.4; } /* 73% */
.graphRing74 .graphRingCircle:nth-child(2) { stroke-dasharray: 139.12 188.4; } /* 74% */
.graphRing75 .graphRingCircle:nth-child(2) { stroke-dasharray: 141 188.4; } /* 75% */
.graphRing76 .graphRingCircle:nth-child(2) { stroke-dasharray: 142.88 188.4; } /* 76% */
.graphRing77 .graphRingCircle:nth-child(2) { stroke-dasharray: 144.76 188.4; } /* 77% */
.graphRing78 .graphRingCircle:nth-child(2) { stroke-dasharray: 146.64 188.4; } /* 78% */
.graphRing79 .graphRingCircle:nth-child(2) { stroke-dasharray: 148.52 188.4; } /* 79% */
.graphRing80 .graphRingCircle:nth-child(2) { stroke-dasharray: 150.4 188.4; } /* 80% */
.graphRing81 .graphRingCircle:nth-child(2) { stroke-dasharray: 152.28 188.4; } /* 81% */
.graphRing82 .graphRingCircle:nth-child(2) { stroke-dasharray: 154.16 188.4; } /* 82% */
.graphRing83 .graphRingCircle:nth-child(2) { stroke-dasharray: 156.04 188.4; } /* 83% */
.graphRing84 .graphRingCircle:nth-child(2) { stroke-dasharray: 157.92 188.4; } /* 84% */
.graphRing85 .graphRingCircle:nth-child(2) { stroke-dasharray: 159.8 188.4; } /* 85% */
.graphRing86 .graphRingCircle:nth-child(2) { stroke-dasharray: 161.68 188.4; } /* 86% */
.graphRing87 .graphRingCircle:nth-child(2) { stroke-dasharray: 163.56 188.4; } /* 87% */
.graphRing88 .graphRingCircle:nth-child(2) { stroke-dasharray: 165.44 188.4; } /* 88% */
.graphRing89 .graphRingCircle:nth-child(2) { stroke-dasharray: 167.32 188.4; } /* 89% */
.graphRing90 .graphRingCircle:nth-child(2) { stroke-dasharray: 169.2 188.4; } /* 90% */
.graphRing91 .graphRingCircle:nth-child(2) { stroke-dasharray: 171.08 188.4; } /* 91% */
.graphRing92 .graphRingCircle:nth-child(2) { stroke-dasharray: 172.96 188.4; } /* 92% */
.graphRing93 .graphRingCircle:nth-child(2) { stroke-dasharray: 174.84 188.4; } /* 93% */
.graphRing94 .graphRingCircle:nth-child(2) { stroke-dasharray: 176.72 188.4; } /* 94% */
.graphRing95 .graphRingCircle:nth-child(2) { stroke-dasharray: 178.6 188.4; } /* 95% */
.graphRing96 .graphRingCircle:nth-child(2) { stroke-dasharray: 180.48 188.4; } /* 96% */
.graphRing97 .graphRingCircle:nth-child(2) { stroke-dasharray: 182.36 188.4; } /* 97% */
.graphRing98 .graphRingCircle:nth-child(2) { stroke-dasharray: 184.24 188.4; } /* 98% */
.graphRing99 .graphRingCircle:nth-child(2) { stroke-dasharray: 186.12 188.4; } /* 99% */
.graphRing100 .graphRingCircle:nth-child(2) { stroke-dasharray: 188 188.4; } /* 100% */