/* 定义向上浮动的动画 */
@keyframes cfloatUp {
    0% {
        transform: translateY(0);
        filter: drop-shadow(4px 5px 12px rgba(var(--primary-color-rgb), 0.3));
    }
    50% {
        transform: translateY(-20px);
        filter: drop-shadow(2px 3px 7px rgba(var(--primary-color-rgb), 0.2));
    }
    100% {
        transform: translateY(0);
        filter: drop-shadow(4px 5px 12px rgba(var(--primary-color-rgb), 0.3));
    }
}
@keyframes cfloatUps2 {
    0% {
        transform: translateY(0);
        filter: drop-shadow(4px 5px 12px rgba(var(--primary-color-rgb), 0.3));
    }
    50% {
        transform: translateY(-10px);
        filter: drop-shadow(2px 3px 7px rgba(var(--primary-color-rgb), 0.2));
    }
    100% {
        transform: translateY(0);
        filter: drop-shadow(4px 5px 12px rgba(var(--primary-color-rgb), 0.3));
    }
}
/* 定义向下浮动的动画 */
@keyframes cfloatDown {
    0% {
        transform: translateY(0);
        filter: drop-shadow(2px 3px 7px rgba(var(--primary-color-rgb), 0.2));
    }
    50% {
        transform: translateY(20px);
        filter: drop-shadow(4px 5px 12px rgba(var(--primary-color-rgb), 0.3));
    }
    100% {
        transform: translateY(0);
        filter: drop-shadow(2px 3px 7px rgba(var(--primary-color-rgb), 0.2));
    }
}

/* 应用动画到元素 */
.cfloating-up {
    /* 动画名称，持续时间，循环次数，延迟，时间函数 */
    animation: cfloatUp 3s infinite;
}
.cfloating-ups2 {
    /* 动画名称，持续时间，循环次数，延迟，时间函数 */
    animation: cfloatUps2 3s infinite;
}
.cfloating-down {
    /* 动画名称，持续时间，循环次数，延迟，时间函数 */
    animation: cfloatDown 3s infinite;
}
/* 如果想要元素在上下浮动，可以在一定延迟后改变动画名称 */
.cfloating-alternate {
    animation: cfloatUp 3s infinite, cfloatDown 3s infinite 6s;
    animation-delay: 0s;
}


@keyframes rotBGimg {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.w-10 {
    width: 10% !important
}
.w-20 {
    width: 20% !important
}
.w-30 {
    width: 30% !important
}
.w-40 {
    width: 40% !important
}
.w-20px {
    width: 20px;
}
.w-30px {
    width: 30px;
}
.w-40px {
    width: 40px;
}
.w-50px {
    width: 50px;
}
.w-60px {
    width: 60px;
}
.w-200px {
    width: 200px;
}


.max-w-450px {
    max-width: 450px;
}


.max-w-10 {
    max-width: 10%;
}
.max-w-20 {
    max-width: 20%;
}
.max-w-25 {
    max-width: 25%;
}
.max-w-30 {
    max-width: 30%;
}
.max-w-40 {
    max-width: 40%;
}
.max-w-50 {
    max-width: 50%;
}
.max-w-60 {
    max-width: 60%;
}
.max-w-70 {
    max-width: 70%;
}
.max-w-75 {
    max-width: 75%;
}
.max-w-80 {
    max-width: 80%;
}
.max-w-90 {
    max-width: 90%;
}

.min-h-100 {
    min-height: 100% !important;
}


.h-200px {
    height: 200px !important;
}
.h-250px {
    height: 250px !important;
}
.h-300px {
    height: 300px !important;
}
.h-350px {
    height: 350px !important;
}
.h-370px {
    height: 370px !important;
}
.h-380px {
    height: 380px !important;
}
.h-400px {
    height: 400px !important;
}
.h-450px {
    height: 450px !important;
}
.h-475px {
    height: 475px !important;
}
.h-500px {
    height: 500px !important;
}
.h-550px {
    height: 550px !important;
}
.h-600px {
    height: 600px !important;
}
.h-700px {
    height: 600px !important;
}
.h-800px {
    height: 800px !important;
}



.mt-n10px {
    margin-top: -10px !important;
}
.mt-n20px {
    margin-top: -20px !important;
}
.mt-n50px {
    margin-top: -50px !important;
}
.mt-n70px {
    margin-top: -70px !important;
}
.mt-n100px {
    margin-top: -100px !important;
}


.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}



.font-size-12px {
    font-size: 12px;
}
.font-size-13px {
    font-size: 13px;
}
.font-size-14px {
    font-size: 14px;
}
.font-size-15px {
    font-size: 15px;
}
.font-size-16px {
    font-size: 16px;
}
.font-size-17px {
    font-size: 17px;
}
.font-size-18px {
    font-size: 18px;
}
.font-size-19px {
    font-size: 19px;
}
.font-size-20px {
    font-size: 20px;
}
.font-size-22px {
    font-size: 22px;
}
.font-size-24px {
    font-size: 24px;
}
.font-size-26px {
    font-size: 26px;
}
.font-size-28px {
    font-size: 28px;
}
.font-size-30px {
    font-size: 30px;
}
.font-size-35px {
    font-size: 35px;
}
.font-size-40px {
    font-size: 40px;
}




.line-dashed-1 {
    border-bottom: 1px dashed var(--primary-color);
}
.line-dashed-2 {
    border-bottom: 2px dashed var(--primary-color);
}
.line-dashed-3 {
    border-bottom: 3px dashed var(--primary-color);
}