.circle-chart {

    width: 260px;

    height: 260px;

    }



    .circle-chart__circle {

    stroke: #00acc1;

    stroke-width: 2;

    stroke-linecap: square;

    fill: none;

    animation: circle-chart-fill 4.5s reverse; /* 1 */ 

    transform: rotate(-90deg); /* 2, 3 */

    transform-origin: center; /* 4 */

    }







    .circle-chart__circle--negative {

    transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */

    }



    .circle-chart__background {

    stroke: #efefef;

    stroke-width: 2;

    fill: none; 

    }



    .circle-chart__info {

    animation: circle-chart-appear 2s forwards;

    opacity: 0;

    transform: translateY(0.3em);

    }



    .circle-chart__percent {

    alignment-baseline: central;

    text-anchor: middle;

    font-size: 8px;

    display: none;

    }



    .circle-chart__subline {

        alignment-baseline: central;

        text-anchor: middle;

        font-size: 1px;

    }



    .success-stroke {

    stroke: #2675bf;

    }



    .warning-stroke {

    stroke: #2675bf;

    }



    .danger-stroke {

    stroke: #2675bf;

    }



    @keyframes circle-chart-fill {

    to { stroke-dasharray: 0 100; }

    }



    @keyframes circle-chart-appear {

    to {

        opacity: 1;

        transform: translateY(0);

    }

    }



    body {

        background-color: #FFFFFF;

    }







@media(max-width:960px){



    .circle-chart{width: 160px;height: 160px;}



    .ab1 .ul1 li{padding: 30px 0;}



    .ab1 .ul1 li .num .nt1{font-size: 30px;}



    .ab1 .ul1 li .num{top: 90px;}



    

}