.loading-main {
    background: #87e0fd;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87e0fd), color-stop(40%, #53cbf1), color-stop(100%, #05abe0));
    background: -webkit-linear-gradient(top, #87e0fd 0, #53cbf1 40%, #05abe0 100%);
    background: linear-gradient(to bottom, #87e0fd 0, #53cbf1 40%, #05abe0 100%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}


.loading-box {
    width: 125px;
    height: 125px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px
}

.loading-point, .loading-line {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.loading-point i, .loading-line i {
    display: block;
    position: absolute;
    background: #fff;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    -webkit-animation-duration: 4.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both
}

.loading-p1, .loading-l1, .loading-l7 {
    top: 63.503%;
    left: 0
}

.loading-p2, .loading-l2 {
    top: 13.5714%;
    left: 13.8686%
}

.loading-p3, .loading-l3, .loading-l8 {
    top: 0;
    left: 62.85714%
}

.loading-p4, .loading-l4 {
    top: 36.49635%;
    left: 100%
}

.loading-p5, .loading-l5, .loading-l9 {
    top: 86.13138%;
    left: 86.42857%
}

.loading-p6, .loading-l6 {
    top: 100%;
    left: 36.42857%
}

.loading-line i {
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.55)), color-stop(100%, rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 1) 100%);
    width: 52%;
    border-radius: 3px;
    -webkit-transform-origin: left center
}

.loading-l1 {
    -webkit-transform: rotate(-75deg)
}

.loading-l2 {
    -webkit-transform: rotate(-15deg)
}

.loading-l3 {
    -webkit-transform: rotate(45deg)
}

.loading-l4 {
    -webkit-transform: rotate(105deg)
}

.loading-l5 {
    -webkit-transform: rotate(165deg)
}

.loading-l6 {
    -webkit-transform: rotate(225deg)
}

i.loading-l7 {
    width: 89%;
    -webkit-transform: rotate(-45deg)
}

i.loading-l8 {
    width: 89%;
    -webkit-transform: rotate(75deg)
}

i.loading-l9 {
    width: 89%;
    -webkit-transform: rotate(195deg)
}

i.loading-p1 {
    -webkit-animation-delay: .3s
}

i.loading-l1 {
    -webkit-animation-delay: .3s
}

i.loading-p2 {
    -webkit-animation-delay: .8s
}

i.loading-l2 {
    -webkit-animation-delay: .8s
}

i.loading-p3 {
    -webkit-animation-delay: 1.3s
}

i.loading-l3 {
    -webkit-animation-delay: 1.3s
}

i.loading-p4 {
    -webkit-animation-delay: 1.8s
}

i.loading-l4 {
    -webkit-animation-delay: 1.8s
}

i.loading-p5 {
    -webkit-animation-delay: 2.3s
}

i.loading-l5 {
    -webkit-animation-delay: 2.3s
}

i.loading-p6 {
    -webkit-animation-delay: 2.8s
}

i.loading-l6 {
    -webkit-animation-delay: 2.8s
}

i.loading-l7 {
    -webkit-animation-delay: 3.3s
}

i.loading-l8 {
    -webkit-animation-delay: 3.7s
}

i.loading-l9 {;
    -webkit-animation-delay: 4.2s
}

.scaleout {
    -webkit-animation-name: scaleout
}

.lineout {
    -webkit-animation-name: lineout
}

.special_lineout {
    -webkit-animation-name: special_lineout
}

@-webkit-keyframes scaleout {
    0% {
        opacity: 1;
        -webkit-transform: scale(0.0)
    }
    14.28% {
        -webkit-transform: scale(6.0);
        opacity: 0
    }
    100% {
        -webkit-transform: scale(0);
        opacity: 0
    }
}

@-webkit-keyframes lineout {
    0% {
        width: 0;
        opacity: 0
    }
    14.28% {
        width: 52%;
        opacity: 1
    }
    100% {
        width: 52%;
        opacity: 0
    }
}

@-webkit-keyframes special_lineout {
    0% {
        width: 0;
        opacity: 0
    }
    14.28% {
        width: 89%;
        opacity: 1
    }
    100% {
        width: 89%;
        opacity: 0
    }
}

.loading-progress {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -35px;
    color: #fff;
    font-size: 1.4rem;
    text-align: center
}

#loadingAnimateBox{
    width:125px;
    height:125px;
}