.api{
    position: relative;
    display: flex;
    width: 60vmin;
    width: 80vmax;
    height: 20vmin;
    height: 25vmax;
    justify-content: center;
    justify-self: center;
    align-items: center;
    gap: 2%;
    user-select:none;
}
.api div:not(.card-data){
    transition-duration: 0.3s;
    transition-timing-function: ease;
    box-shadow: 0.15vmax 0.15vmax 0.2vmax rgba(0, 0, 0, 0.517);
    
}
/* ----------------------时间----------------------- */
.card-time{
    display: flex;
    flex-direction: column;
    height: 88%;
    justify-content: center;
    width: 21vmin;
    width: 21vmax;
    background-color: rgb(43, 43, 43);
    border-radius: 2vmax;
    overflow: hidden;
    gap: 3%;
    transition-duration: 0.3s;
}
.card-time span#time{                                        
    display: flex;
    white-space:nowrap;
    color: azure;
    font-size: 3vmax;
    font-weight:bolder;
    justify-content: center;
    letter-spacing:0.1vmax;
}
.card-time span#date{
    display: flex;
    white-space:nowrap;
    color: rgb(141, 141, 141);
    font-size: 0.8vmax;
    font-weight:bolder;
    justify-content: center;
    letter-spacing: 0.2vmax;
}
.card-data{
    display: flex;
    flex-direction: column;
    height: 88%;
    width: 14%;
    justify-content: space-between;
}
.card-data .day,.version,.normal{
    display: flex;
    background-color: rgb(43, 43, 43);
    height: 30%;
    width: 100%;
    border-radius: 2vmax;
}
/* -------------------状态---------------------- */
.card-status{
    display: flex;
    height: 88%;
    width: 44vmin;
    width: 44vmax;
    background-color: rgb(43, 43, 43);
    border-radius: 2vmax;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0.8vmax;
}
.card-status span{
    display: flex;
    white-space:nowrap;
    color: azure;
    font-size: 3vmax;
    font-weight:bolder;
    letter-spacing:0.14vmax;
    justify-items: center;
    gap: 1.5vmax;
    margin-top: 0.5vmax;
}
.card-status span div{
    position: relative;
    display: flex;
    width: 5.5vmax;
    color: rgb(141, 141, 141);
    font-size: 1vmax;
    height: 2.7vmax;
    border-radius: 0.8vmax;
    background-color: rgb(30, 30, 30);
    justify-content: center;
    align-items: center;
    box-shadow: 0.5vmax 0.5vmax 0.3vmax rgba(0, 0, 0, 0.517);
    margin-top: 0.5vmax;
}
.card-status span div#api{
    padding-left: 1.5vmax;
    font-size: 0.85vmax;
}

/* 伪类 */
.card-status span div#api::before{
    content: "";
    position: absolute;
    left: 0.8vmax;
    width: 1vmax;
    height: 1vmax;
    background-color: var(--pseudo-color, rgb(198, 3, 3));
    border-radius: 100%;
}
.card-status span div#api::after{
    content: "";
    position: absolute;
    bottom: 1.4vmax;
    left: 1.3vmax;
    width: 0.8vmax;
    height: 0.8vmax;
    background-color:  rgba(198, 3, 3, 0);
    border-radius: 100%;
    animation-name: online;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

/* 伪类结束 */
.card-status span div.status_button_2{
    width: 11.5vmax;
    height: 2.7vmax;
}
.card-status span div.status_button_3{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5vmax;
    cursor:pointer;
}
.card-status span div.status_button_3 a{
    display: flex;
    transition: 0.3s;
    animation: ease-out;
    font-size: 1vmax;
}
.card-status span div.status_button_3 .reload{
    color: rgb(141, 141, 141);
    width: 1vmax;
}
.card-status span div.get_into{
    display: flex;
    position: relative;
    width: 11.5vmax;
    height: 3.4vmax;
    color: rgb(254, 254, 255);
    font-weight: bolder;
    justify-items: center;
    align-items: center;
    gap: 0.6vmax;
    cursor:pointer;
}
/* 箭头 */
.card-status span div.get_into .arrow{
    display: flex;
    width: 2.2vmax;
    color: rgb(141, 141, 141);
    transition: 0.5s;
}
.card-status span div.get_into .ch{
    display: flex;
    transition: 0.5s;
}
@keyframes online{
    0%{
    }
    70%{
        background-color: var(--pseudo-color);
    }
    100%{
        background-color: var(--pseudo-color);
        width: 1.2vmax;
        height: 1.2vmax;
        opacity: 0;
    }
}
/* -----------------通用动画-------------------- */
.api div:not(.card-data):hover{
    transform: translate(-0.08vmax) translateY(-0.08vmax);
    box-shadow: 0.17vmax 0.17vmax 0.5vmax rgb(0, 0, 0);
}
/* 状态按钮通用 */
.card-status span div:hover{
    background-color: rgb(43, 43, 43);
}
/* 加入 */
.card-status span div.get_into:hover{
    background-color: rgba(10, 167, 202, 0.753);
}
.card-status span div.get_into:hover .arrow{
    transform: translate(0.25vmax);
    color: rgba(255, 255, 255, 0.853);
}
.card-status span div.get_into:hover .ch{
    transform: translate(-0.25vmax);
}
/* 状态 */
.card-status span div.status_button_3:hover a{
    color: rgb(245, 243, 243);
}
.card-status span div.status_button_3:hover a.reload{
    transform: rotate(180deg)
}