/*自写加载遮罩动画功能的CSS文件
使用到该功能的页面都要引用
*/
.loadingMask {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    /*z-index: 200;*/
    z-index: 20000000;
}

.loadingMask_rotateBox {
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#loadingMask_closeBtn{
    margin-top: 25px;
    cursor: pointer;
    background: rgb(36, 146, 235);
    padding: 6px 15px;
    border-radius: 4px;
    border: 1px solid #5c5c5c;
}

.loadingMask_closeBtn:hover{
    background: rgb(45 161 255);
}

.loadingMask_rotateImg {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: loadingMaskRotate 2s linear infinite;
    -moz-animation: loadingMaskRotate 2s linear infinite;
    -o-animation: loadingMaskRotate 2s linear infinite;
    animation: loadingMaskRotate 2s linear infinite;
}

.loadingMask_rotateBox span{
    color: #fff;
    margin-top: 10px;
}

@-webkit-keyframes loadingMaskRotate {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes loadingMaskRotate {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(359deg)
    }
}

@-o-keyframes loadingMaskRotate {
    from {
        -o-transform: rotate(0deg)
    }
    to {
        -o-transform: rotate(359deg)
    }
}

@keyframes loadingMaskRotate {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}