/*
 * @Project     : 文章侧边倒计时
 * @Author      : 腾飞博客
 * @Url         : https://www.tfbkw.com/
 * @Qq          : 2296945504
 * @Email       : tfgzs666@163.com
 * @Remind      : 使用本代码请务必保留以上信息！
 */
 .count-down {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--main-bg-color);
    border-radius: 10px;
}
.count-down .count-left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin-right: 0.8rem;
}
.count-down .count-left .text {
    font-size: 14px;
    color: var(--key-color);
}
.count-down .count-left .name {
    font-weight: 700;
    font-size: 18px;
    margin-top: 2px;
}
.count-down .count-left .time {
    font-size: 30px;
    font-weight: 700;
    margin: 4px 0;
    color: var(--main-color);
}
.count-down .count-left .date {
    font-size: 12px;
    opacity: .6;
}
.count-down .count-left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin-right: 0.8rem;
    padding: 18px;
    margin-bottom: 1rem;
}
.count-down .count-left:after {
    content: "";
    position: absolute;
    right: -0.8rem;
    width: 2px;
    height: 60%;
    background-color: #E3E8F7;
}
.count-down .count-right .count-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
    margin: 6px 0;
}
.count-down .count-right .count-item .item-name {
    font-size: 14px;
    margin-right: 0.8rem;
    white-space: nowrap;
    color: var(--main-color);
}
.count-down .count-right .count-item .item-progress .percentage.many, .count-down .count-right .count-item .item-progress .remaining.many {
    color: #fff;
}
.count-down .count-right .count-item .item-progress .progress-bar {
    height: 100%;
    border-radius: 8px;
    background-color: #425AEF;
}
.count-down .count-right .count-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
    margin: 6px 0;
}
.count-down .count-right .count-item .item-progress {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    background-color: var(--main-color-bg);
    overflow: hidden;
}
.count-down .count-right .count-item .item-progress .percentage.many .tip, .count-down .count-right .count-item .item-progress .remaining.many .tip {
    opacity: .8;
}
.count-down .count-right .count-item .item-progress {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 70%;
    border-radius: 8px;
    background-color: #4259ef0d;
    overflow: hidden;
}
.count-down .count-right .count-item .item-progress .percentage, .count-down .count-right .count-item .item-progress .remaining {
    position: absolute;
    font-size: 12px;
    margin: 0 6px;
    transition: opacity .3s, transform .3s;
}
.count-down .count-right {
    flex: 1;
    width: 100%;
    margin-left: 0.8rem;
}
.count-down .count-right .count-item .item-progress .remaining {
    opacity: 0;
    transform: translate(10px);
}
.s-card:hover.hover {
    border-color: var(--main-color);
    box-shadow: 0 8px 16px -4px var(--main-color-bg)
}
.count-down:hover .count-right .remaining {
    transform: translate(0)!important;
    opacity: 1!important
}

.count-down:hover .count-right .percentage {
    transform: translate(-10px)!important;
    opacity: 0!important
}