section.footer {
    width: 100%;
    color: var(--color-on-inverse);
    background: var(--color-gradient-primary);
}

.footer .contact-right,
.footer .contact-left {
    display: flex;
    gap: var(--space-1);
    flex-direction: column;
}

.footer .contact-right {
    align-items: flex-end;
}

.footer .logo {
    fill: var(--color-on-inverse);
    width: 120px;
}

.footer .content {
    padding: 3.75rem var(--padding-side) var(--padding-side) var(--padding-side);
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--space-3);
}

.footer .contact-box {
    display: flex;
    gap: var(--space-3);
    width: 100%;
    justify-content: space-between;
}

.footer .contact-item-content {
    font-size: 0.9rem;
}

.footer .foot-buttom {
    display: flex;
    gap: var(--space-3);
    font-size: 0.8rem;
    align-items: baseline;
}

.footer .domain {
    opacity: 0.6;
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    width: 100%;
}

.footer .social-icon img {
    /* 反色 */
    filter: invert(1);
}

.footer .social-icon,
.footer .payment-box {
    display: flex;
    gap: var(--space-3);
}

.footer .social-icon>a,
.footer .payment-box {
    height: 20px;
}

.footer .social-icon img,
.footer .payment-box img {
    height: 100%;
}


@media (max-width: 1200px) {
    .footer .content {
        flex-direction: column;
        gap: 20px;
    }

    .footer .contact-box {
        flex-direction: column;
        gap: 1.25rem;
    }

    .footer .contact-left,
    .footer .contact-right {
        display: flex;
        gap: var(--space-3);
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer .contact-item-content {
        text-align: center;
    }

    .footer .domain {
        /* 居中 */
        text-align: center;
    }

    .footer .contact-item-word {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }

    .footer .foot-buttom {
        flex-direction: column;
        gap: var(--space-1);
        align-items: center;
    }

    .footer .foot-buttom>* {
        /* 字体高度; */
        height: 20px;
        display: flex;
        align-items: center;
    }
}