.page-mask {
    overflow-x: clip;
    overflow-y: visible;
}

.page-mask img {
    --w: calc(965 / 1920 * 100vw);
    width: var(--w);
    max-height: unset;
    position: absolute;
    bottom: calc(-261 / 1080 * 100dvh);
    right: calc(82 / 1920 * 100vw);
    z-index: -1;
}

.section-heading {
    padding-top: calc(102 * var(--rpx));
}

.local-tariff-module {
    margin-top: calc(150 * var(--rpx));
}

.local-tariff-module .module-wrapper {
    overflow: visible;
}

.local-tariff-module .module-main {
    padding-top: calc(40 * var(--rpx));
}

.local-tariff__card {
    border-radius: var(--radio-16);
    position: relative;
    overflow: hidden;
    background: #FAFAFA;
    position: relative;
    cursor: pointer;
}

.local-tariff__card+.local-tariff__card {
    margin-top: calc(30 * var(--rpx));
}

.local-tariff__card::before {
    content: "";
    width: 100%;
    height: 0;
    background: linear-gradient(to right, #00697A, #55A334);
    position: absolute;
    left: 0;
    bottom: 0;
    transition: height 0.3s ease-in-out;
}

.local-tariff__card:hover::before {
    height: 100%;
    top: 0;
    bottom: unset;
}

.local-tariff__card-wrapper {
    padding: calc(30 * var(--rpx));
    padding-left: 0;
    position: relative;
    z-index: 1;
}

.local-tariff__time {
    --l: calc(240 * var(--rpx));
    color: var(--primary);
    font-weight: 500;
    width: var(--l);
    height: var(--l);
    transition: color 0.3s ease-in-out;
}

.local-tariff__card:hover .local-tariff__time {
    color: #fff;
}

.local-tariff__time .date {
    font-size: var(--font-size-48);
    line-height: .9;
}

.local-tariff__time .year {
    font-size: var(--font-size-24);
}

.local-tariff__content {
    overflow: hidden;
}

.local-tariff__card .title {
    font-weight: 500;
    font-size: var(--font-size-24);
    transition: color 0.3s ease-in-out;
}

.local-tariff__card .desc {
    font-size: var(--font-size-16);
    opacity: .5;
    transition: 0.3s ease-in-out;
}

.local-tariff__card:hover .title,
.local-tariff__card:hover .desc {
    color: #fff;
    opacity: 1;
}

.local-tariff__bottom {
    margin-top: auto;
    padding-top: calc(20 * var(--rpx));
}

.local-tariff__tags {
    gap: calc(10 * var(--rpx));
}

.local-tariff__tags .tag-item {
    --h: calc(40 * var(--rpx));
    height: var(--h);
    padding: 0 calc(20 * var(--rpx));
    border: 1px solid #BCBCBC;
    border-radius: 999px;
    transition: .3s linear;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.local-tariff__tags .tag-item.active {
    color: #fff;
    background: var(--secondary-foreground);
    border-color: var(--secondary);
}

.local-tariff__card:hover .tag-item {
    color: #fff;
    border-color: #fff;
}

.local-tariff__card .learn-more {
    color: rgba(51, 51, 51, .5);
}

.local-tariff__card:hover .learn-more {
    color: #fff;
}

.local-tariff__card .learn-more .learn-more__icon {
    border: 1px solid rgba(0, 0, 0, .1);
    background: transparent;
}

.local-tariff__card:hover .learn-more .learn-more__icon {
    border-color: #fff;
    background: #fff;
}

.local-tariff__card .learn-more .learn-more__icon img {
    filter: url(#filter-999);
}

.local-tariff__card:hover .learn-more .learn-more__icon img {
    filter: url(#filter-green);
}

@media screen and (max-width: 1200px) {
    .document-list {
        --col: 2;
        --gap: calc(30 * var(--rpx));
    }
}

@media screen and (max-width: 768px) {
    .page-mask img {
        width: calc(540 * var(--rpx));
        bottom: calc(-240 / 1080 * 100dvh);
        right: calc(-400 / 1920 * 100vw);
    }

    .local-tariff-module {
        margin-top: calc(75 * var(--rpx));
    }

    .local-tariff__time {
        --l: calc(130 * var(--rpx));
    }

    .local-tariff__time .date {
        font-size: 24px;
    }

    .local-tariff__time .year {
        font-size: var(--font-size-16);
    }

    .local-tariff__bottom {
        flex-direction: column;
        align-items: unset;
    }

    .local-tariff__card .learn-more {
        margin-top: 12px;
    }
}