
.pagination .page-item .page-link.active {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: #fff;
}

.pagination .page-item .page-link {
    color: #000;
}

.form-check-input:checked {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

.text-decoration-line-through {
    text-decoration: none !important;
    position: relative;
    color: inherit;
}

.text-decoration-line-through::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: currentColor;
    transform: translateY(-50%);
    mix-blend-mode: multiply;
}

.bg-dark {
    background-color: #1a1a1a !important;
}

.carousel-inner,
.carousel-item {
    aspect-ratio: 4 / 1;
}

.carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 10px;
    object-fit: contain;
}

.carousel-item img.fill {
    object-fit: fill;
}

.w-10 {
    width: 10% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.h-10 {
    height: 10% !important;
}

.h-20 {
    height: 20% !important;
}

.h-30 {
    height: 30% !important;
}

.h-40 {
    height: 40% !important;
}

.h-50 {
    height: 50% !important;
}

.h-60 {
    height: 60% !important;
}

.h-70 {
    height: 70% !important;
}

.h-80 {
    height: 80% !important;
}

.h-90 {
    height: 90% !important;
}

.h-100 {
    height: 100% !important;
}

/*
 * 注意：这些类仅对 position 属性设置为 absolute, fixed,
 * 或 relative 的元素有效。
 */

.top-10 {
    top: 10% !important;
}

.top-20 {
    top: 20% !important;
}

.top-30 {
    top: 30% !important;
}

.top-40 {
    top: 40% !important;
}

.top-50 {
    top: 50% !important;
}

.top-60 {
    top: 60% !important;
}

.top-70 {
    top: 70% !important;
}

.top-75 {
    top: 75% !important;
}

.top-80 {
    top: 80% !important;
}

.top-90 {
    top: 90% !important;
}

.top-100 {
    top: 100% !important;
}

:root {
    --scale-factor: 1.2;
    --bs-container-sm: 540px;
    --bs-container-md: 720px;
    --bs-container-lg: 960px;
    --bs-container-xl: 1140px;
    --bs-container-xxl: 1320px;
}

@media (min-width: 576px) {
    .container {
        max-width: calc(var(--bs-container-sm) * var(--scale-factor)) !important;
    }
}

@media (min-width: 768px) {
    .container,
    .container-sm {
        max-width: calc(var(--bs-container-md) * var(--scale-factor)) !important;
    }
}

@media (min-width: 992px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg {
        max-width: calc(var(--bs-container-lg) * var(--scale-factor)) !important;
    }
}

@media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: calc(var(--bs-container-xl) * var(--scale-factor)) !important;
    }
}

@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: calc(var(--bs-container-xxl) * var(--scale-factor)) !important;
    }
}