*{
    margin:0;
    padding: 0;
}
.waitloadDiv{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(125 125 125 / 50%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;    
    align-items: center;
    z-index:10000000;
    font-family: 'Noto Sans TC', sans-serif;
}
.waitload{
    position: absolute;
    width:500px;
    height: 400px;
    background-color: white;
    font-size: 20px;
    display:inline-block;
    border:3px solid;
    border-image: linear-gradient(to right, #ff0000, #00ff00);
    border-image-slice: 1;
    animation-name: all;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    font-family: 'Noto Sans TC', sans-serif;
}
.waitload::before{
    content:'';
    position:absolute;
    top:24px;
    left:-4px;
    background-color:white;
    width:calc(100% + 8px);
    height:calc(100% - 48px);
}
.waitload::after{
    content:'';
    position:absolute;
    top:-4px;
    left:24px;
    background-color:white;
    width:calc(100% - 48px);
    height:calc(100% + 8px);
}
.waitloadC{
    position:absolute;
    width:300px;
    height:300px;
    background:repeating-conic-gradient(from 30deg, var(--clr) 0%, var(--clr) 5%, #ffffff00 5%, #ffffff00 70%, var(--clr) 100%);
    border-radius:100%;
    animation-name: c;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    font-family: 'Noto Sans TC', sans-serif;
}
.waitloadC::after{
    top:48px;
    right:38px;
    content:'';
    position:absolute;
    width:7px;
    height:6px;
    background:rgb(168, 214, 214);
    border-radius:50%;
    box-shadow: 0px 0px 10px rgb(140 253 253);
    z-index:2;
}
.waitloadmain{
    position:absolute;
    width:calc(300px - 8px);
    height:calc(300px - 8px);
    background-color:#ffffff;
    border-radius:100%;
    overflow:hidden;
    display: flex;
    justify-content: center;    
    align-items: center;
    z-index:1;
    box-shadow: 0px 0px 8px rgb(187 239 239);
    font-size:25px;
    font-family: 'Noto Sans TC', sans-serif;
}
.waitloadmain button{
    position:absolute;
    bottom:20px;
    padding:5px 10px 5px 10px;
    background-color:#ff000000;
    border:rgb(172 199 227) solid 2px;
    border-radius:10px;
    color:rgb(108 142 184);
    font-size:20px;
    cursor:pointer;
    transition:0.2s linear;
    font-family: 'Noto Sans TC', sans-serif;
}
.waitloadmain button:hover{
    background-color:rgb(188 212 238);
    color:white;
}
.waitloadDiv.active{
    animation-name: waitloadDivoff;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function:ease-out;
    animation-fill-mode:forwards;
}
@keyframes waitloadDivoff {
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
@keyframes c {
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}
@keyframes all {
    0% {
        border-image: linear-gradient(to right, rgb(168, 214, 214), #7959ed);
        border-image-slice: 1;
    }
    10% {
        border-image: linear-gradient(to right, #7959ed, #17ca7b);
        border-image-slice: 1;
    }
    20% {
        border-image: linear-gradient(to right, #17ca7b, #d0e927);
        border-image-slice: 1;
    }
    30% {
        border-image: linear-gradient(to right, #d0e927, #03965B);
        border-image-slice: 1;
    }
    40% {
        border-image: linear-gradient(to right, #03965B, #ee2c59);
        border-image-slice: 1;
    }
    50% {
        border-image: linear-gradient(to right, #ee2c59, #5fa7b9);
        border-image-slice: 1;
    }
    60% {
        border-image: linear-gradient(to right, #5fa7b9, #ec3beb);
        border-image-slice: 1;
    }
    70% {
        border-image: linear-gradient(to right, #ec3beb, #032596);
        border-image-slice: 1;
    }
    80% {
        border-image: linear-gradient(to right, #032596, #eb8221);
        border-image-slice: 1;
    }
    90% {
        border-image: linear-gradient(to right, #eb8221, rgb(168, 214, 214));
        border-image-slice: 1;
    }
    100% {
        border-image: linear-gradient(to right, rgb(168, 214, 214), #7959ed);
        border-image-slice: 1;
    }
}