#lineCtrl {
    width: 100%;
    margin: auto;
    min-height: 241px;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: center;
}


    #lineCtrl .speed-item {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center
    }

        #lineCtrl .speed-item .progress-content {
            position: relative;
            width: 140px;
            height: 140px;
            margin: 0 auto;
            background: url(../images/bg-speed.png) no-repeat center/100% 100%;
            opacity: 1;
        }

            #lineCtrl .speed-item .progress-content:hover {
                opacity: 1;
            }

            #lineCtrl .speed-item .progress-content .svg-list-bg {
                position: absolute;
                top: 18px;
                left: 50%;
                width: 96px;
                height: 96px;
                transform: translate3d(-50%, 0, 0);
                border-radius: 50%;
            }

                #lineCtrl .speed-item .progress-content .svg-list-bg .svg-item {
                    display: block;
                    position: absolute;
                    top: -70px;
                    left: 50%;
                    transform-origin: center 122px;
                    width: 8px;
                    height: 14px;
                }

            #lineCtrl .speed-item .progress-content .big-circle {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%, -50%, 0);
                width: 86px;
                height: 101px;
                border-radius: 50%;
            }

            #lineCtrl .speed-item .progress-content .pointer {
                position: absolute;
                top: 0;
                left: 49px;
                width: 10px;
                height: 12px;
                transform-origin: center 50px;
               /* background: url(../images/linkspeed/speed-vecter.svg) no-repeat center/100% 100%;*/
                z-index: 2;
            }

            #lineCtrl .speed-item .progress-content .circle-p {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 80px;
                height: 80px;
                transform: translate3d(-50%, -50%, 0);
                background: url(../img/navigation/layer-2.png) no-repeat center/100% 100%;
            }

            #lineCtrl .speed-item .progress-content .number {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 55px;
                margin: auto;
            }

                #lineCtrl .speed-item .progress-content .number .val {
                    font-size: 30px;
                    line-height: 55px;
                    font-weight: 700;
                    text-align: center;
                    color: #fff;
                    background: linear-gradient(180deg, #F9CB52 27.46%, #F0DC2A 42.31%, #FAFF00 58.85%, #EBE203 74.71%, #FFF500 92.25%);
                    background-size: 100%;
                    background-repeat: repeat;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                #lineCtrl .speed-item .progress-content .number .text {
                    position: absolute;
                    left: 0;
                    bottom: -34px;
                    width: 100%;
                    font-size: 14.7px;
                    font-weight: 700;
                    text-align: center;
                    line-height: 17px;
                    color: #00ff1c;
                    display: none;
                }

        #lineCtrl .speed-item .address {
            display: flex;
            align-items: center;
            padding: 0 5px;
            width: 120px;
            flex-wrap: wrap;
            margin-top: 20px;
            background-color: #fff;
            color: #252B38;
            border-radius: 20px;
            border: 2px solid ;
        }

            #lineCtrl .speed-item .address a {
                width: 100%;
                padding: 5px;
                text-decoration: none;
                word-wrap: break-word;
                color: #000;
                font-size: 16px;
                font-weight: 700;
                text-align: center;
                transition: .3s ease-in-out;
            }

                #lineCtrl .speed-item .address a:hover {
                    color: #fff;
                }

            #lineCtrl .speed-item .address:hover {
                background: #FFAD01;
                color: #fff;
            }


@keyframes swing {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(40deg);
    }

    40% {
        transform: rotate(-40deg);
    }

    60% {
        transform: rotate(10deg);
    }

    80% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes shaking {
    0% {
        box-shadow: 0 4px 10px rgba(111, 155, 180, .77), 0 0 0 0 rgba(72, 126, 161, .64), 0 0 0 5px rgba(42, 94, 161, .79);
    }

    to {
        box-shadow: 0 4px 10px rgba(91, 162, 209, .19), 0 0 0 5px rgba(80, 157, 219, .27), 0 0 0 10px rgba(126, 196, 237, .21);
    }
}

@media screen and (max-width: 1439px) {
    #lineCtrl {
        column-gap: 40px;
    }
        #lineCtrl .speed-item {
            transform: scale(0.8);
        }

    #lineCtrl .speed-item:last-child {
        display: none;
    }
    
}

@media screen and (max-width: 1024px) {
    
    #lineCtrl {
        margin-top: 20px;
        min-height: 0;
    }
        #lineCtrl .speed-item {
            transform: scale(1);
        }
}

@media screen and (max-width: 767px) {

    #lineCtrl {
        margin-top: 0px;
        height: 190px;
        column-gap: 20px;
    }
    #lineCtrl .speed-item {
        width: 33.33333%;
    }

        #lineCtrl .speed-item:nth-child(3) {
            display: none;
        }
        
        .reload_btn {
            display: none !important;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            height: 44px;
            width: 210px;
            color: #fff;
            font-weight: 700;
            font-size: 14px;
            margin: 40px auto
        }

        .reload_btn span > img {
            height: 100%
        }
}

@media screen and (max-width: 576px) {
    .header-top {
        height: 90px;
    }
    #lineCtrl {
        margin-top: -20px;
        height: 160px;
        column-gap: 0px;
    }
        #lineCtrl .speed-item {
            width: 50%;
            transform: scale(0.65);
            min-height: 0;
        }

}

@media screen and (max-width: 374px) {
    .text-header {
        font-size: 8px;
    }
}