.pie-chart-wrap {
    font-family: 'Yu Gothic UI', sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: initial;
    -ms-flex-pack: initial;
    justify-content: initial;
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: initial;
}

.box {
    margin: 5px 5px 5px 5px;
    position: relative;
    min-width: 160px;
    width: 120px;
    height: 240px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #fff;
    -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

    .box .percent {
        position: relative;
        width: 120px;
        height: 120px;
    }

        .box .percent svg {
            position: relative;
            width: 120px;
            height: 120px;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

            .box .percent svg circle {
                position: relative;
                fill: none;
                stroke-width: 6;
                stroke: #eee;
                stroke-linecap: round;
            }

        .box .percent .number {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            color: #111;
        }

            .box .percent .number .title {
                font-size: 48px;
            }

                .box .percent .number .title span {
                    font-size: 16px;
                }

        .box .percent .text {
            padding: 10px 0 0;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
        }

        .box .percent svg .line {
            -webkit-animation: circleAnim 2s;
            animation: circleAnim 2s;
        }

@-webkit-keyframes circleAnim {
    0% {
        stroke-dasharray: 0 377;
    }

    99.9%, to {
        stroke-dasharray: 377 377;
    }
}

@keyframes circleAnim {
    0% {
        stroke-dasharray: 0 377;
    }

    99.9%, to {
        stroke-dasharray: 377 377;
    }
}