* {
    margin: 0;
    padding: 0;
}
/* 全局属性设置 */
html {
}
/* 设置背景颜色 */
.box {

    display: none;
    width: 100%;
    margin: auto;
    position: fixed;
    z-index: 99999;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #393D49;
    opacity: 0.8;
}
/* 设置box的大小和位置 */
.head {
    width: 150px;
    height: 150px;
    margin: 200px auto;
}

.head img {
    width: 100%;
    position: relative;
    top: 15px;
    animation: tiao 2s infinite linear;
    /* 对图片设置动画：animation: name 时间 无限循环 */
}

@keyframes tiao {
    0% {
        transform: translateY(-25px) scale(1.1);
        /* 图片相较于原位置Y轴偏移量 scale为缩放属性 */
    }

    25% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(25px) scale(0.9);
    }

    75% {
        transform: translateY(0px) scale(1);
    }

    100% {
        transform: translateY(-25px) scale(1.1);
    }
}

.shadow {
    width: 150px;
    height: 11px;
    margin: auto;
    position: relative;
    top: 30px;
}

.shadow span {
    display: block;
    width: 50%;
    height: 62%;
    margin: auto;
    background: #9b9b9b3d;
    border-radius: 50%;
    animation: shadow 2s infinite linear;
}
/* 阴影的属性以及动画设置 */
@keyframes shadow {
    0% {
        width: 52%;
    }

    25% {
        width: 32%;
    }

    50% {
        width: 12%;
    }

    75% {
        width: 32%;
    }

    100% {
        width: 52%;
    }

}

.load {
    display: block;
    width: 150px;
    line-height: 20px;
    /* 行高 */
    letter-spacing: 5px;
    /* 字间距 */
    border-radius: 18px;
    /* 圆角设置 */
    position: relative;
    top: 70px;
    margin: auto;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
    font-size: 17.5px;
}

/*.load p {*/
/*    width: 99px;*/
/*    animation: typing 1s steps(22), blink 2s infinite linear;*/
/*    display: inline-block;*/
/*    background-image: linear-gradient(to top right, rgb(27, 209, 255), rgb(236, 29, 255));*/
/*    !* 渐变颜色，对角 *!*/
/*    -webkit-background-clip: text;*/
/*    color: transparent;*/
/*}*/
/* loading渐变字体，依次输出动画 */
@keyframes typing {
    from {
        width: 0;
    }
}

/*.load span {*/
/*    display: inline-block;*/
/*    background-image: linear-gradient(to top right, rgb(27, 209, 255), rgb(236, 29, 255));*/
/*    width: 3px;*/
/*    height: 3px;*/
/*    margin-left: 3px;*/
/*    border-radius: 50%;*/
/*    animation: dian 2.2s infinite linear;*/
/*}*/
/* 设置点的属性 */
@keyframes dian {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    25% {
        transform: scale(1.6);
        opacity: 0.6;
    }

    50% {
        transform: scale(2);
        opacity: 1;
    }

    75% {
        transform: scale(1.6);
        opacity: 0.6;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}
.load span:nth-child(2) {
/* class名 span的第二个孩子 */
    animation-delay: 0.8s;
    /* 延时动画属性 */
}

.load span:nth-child(3) {
    animation-delay: 1.6s;
}

.bar {
    width: 150px;
    height: 15px;
    border-radius: 15px;
    margin: 50px auto;
    border: 1px solid rgba(25, 0, 255, 0.692);
}
/* 加载进度条框设置 */
.bar span {
    display: block;
    width: 0px;
    height: 15px;
    border-radius: 14px;
    background-image: linear-gradient(to top right, rgba(0, 255, 115, 0.322), rgba(8, 239, 255, 0.623), rgba(157, 255, 0, 0.548));
    /*animation: bar 4s linear;*/
    /*animation-fill-mode: forwards;*/
    /* none：不改变默认行为。    
    forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    
    backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。    
    both：向前和向后填充模式都被应用。 */

}
/* span标签填充进度条 */
@keyframes bar {
    0% {
        width: 0%;
    }

    25% {
        width: 25%;
    }

    50% {
        width: 50%;
    }

    75% {
        width: 75%;
    }

    100% {
        width: 100%;
    }
}

#schedule-num {
    font-size: 14px;
    display: inline;
    position: relative;
    left: 62px;
    bottom: 18px;
    z-index: 1;
    color: rgb(0 23 25);
}
/* 百分比属性 */