/*
 * @Author: 陈万照 <mr_chen_100@163.com>
 * @Date: 2024-01-18 12:15:30
 * @LastEditors: CHEN W.Z. <mr_chen_100@163.com>
 * @LastEditTime: 2024-03-13 10:39:46
 * @Description: Footer 样式文件
 */
:root {
    /* 全局 */
    --hx-footer-background: #212121; /* 背景 */
    --hx-footer-color-text: #858688; /* 文字颜色 */
    --hx-footer-border-color: rgba(255, 255, 255, 0.1); /* 边框颜色 */
    --hx-footer-font-size: 14px; /* 字体大小 */
    --hx-footer-transition-duration: 0.5s; /* 过渡时间 */

    /* Main */
    --hx-footer-main-padding: 88px 0 124px 0; /* 内边距 */

    /*  Nav */
    --hx-footer-nav-module-margin: 0; /* 内边距 */
    --hx-footer-nav-title-size: 16px; /* 标题字体大小 */
    --hx-footer-nav-title-color: #666666; /* 标题字体颜色 */
    --hx-footer-nav-title-margin: 0 0 40px 0; /* 标题和项之间的间距 */
    --hx-footer-nav-item-size: inherit; /* 项字体大小 */
    --hx-footer-nav-item-color: inherit; /* 项字体颜色 */
    --hx-footer-nav-item-color-hover: #ffffff; /* 项字体颜色 */
    --hx-footer-nav-item-margin: 0 0 26px 0; /* 项和项之间的间距 */

    /* Gap Line */
    --hx-footer-gap-line-distance: 4.739583vw; /* 距离其它内容块的间距 */

    /* Other */
    --hx-footer-other-padding: 0 var(--hx-footer-gap-line-distance) 0 0; /* 内边距 */

    /* Logo */
    --hx-footer-logo-height: 56px; /* logo 高度 */
    --hx-footer-logo-margin: 0 auto 16px auto; /* logo 外边距 */

    /* Malls */
    --hx-footer-malls-font-size: 18px; /* 字体大小 */
    --hx-footer-malls-text-color: rgba(255, 255, 255, 0.65); /* 文字颜色 */
    --hx-footer-malls-item-width: 163px; /* 宽度 */
    --hx-footer-malls-item-height: 154px; /* 高度 */
    --hx-footer-malls-item-margin: 14px; /* 外边距 */
    --hx-footer-malls-item-border-radius: 10px; /* 圆角 */
    --hx-footer-malls-item-icon-size: 35px; /* 图标大小（高度） */

    /* Medias */
    --hx-footer-medias-margin: 26px auto 0 auto; /* 外边距 */
    --hx-footer-medias-item-margin: 16px; /* 外边距 */
    --hx-footer-medias-item-icon-size: 47px; /* 图标大小 */
    --hx-footer-medias-item-qrcode-size: 128px; /* 二维码大小 */

    /* Copyright */
    --hx-footer-copyright-padding: 12px 0; /* 内边距 */
    --hx-footer-copyright-font-size: inherit; /* 字体大小 */
    --hx-footer-copyright-text-color: #666666; /* 文字颜色 */
    --hx-footer-copyright-text-color-hover: rgba(255, 255, 255, 0.5); /* 文字颜色 */
    --hx-footer-copyright-icon-size: 33px; /* 图标大小 */
}

#footer {
    background: var(--hx-footer-background);
    color: var(--hx-footer-color-text);
    font-size: var(--hx-footer-font-size);
}

/* Main */
.footer-main {
    padding: var(--hx-footer-main-padding);
    display: flex;
}

/* Nav */
.footer-nav {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

.footer-nav-module {
    margin: var(--hx-footer-nav-module-margin);
}

.footer-nav-module:first-child {
    display: none;
}

.footer-nav-module-title {
    font-size: var(--hx-footer-nav-title-size);
    color: var(--hx-footer-nav-title-color);
    margin: var(--hx-footer-nav-title-margin);
}

.footer-nav-item {
    margin: var(--hx-footer-nav-item-margin);
    color: var(--hx-footer-nav-item-color);
    font-size: var(--hx-footer-nav-item-size);
}

.footer-nav-item:hover {
    color: var(--hx-footer-nav-item-color-hover);
}

.footer-nav-item-link {
    transition: color var(--hx-footer-transition-duration);
}

/* Gap Line */
.footer-main-gap-line {
    border-right: 1px solid var(--hx-footer-border-color);
    flex-shrink: 0;
    margin: 0 var(--hx-footer-gap-line-distance);
}

/* Other */
.footer-other {
    flex-shrink: 0;
    padding: var(--hx-footer-other-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo */
.footer-logo-link {
    display: block;
    margin: var(--hx-footer-logo-margin);
    position: relative;
}

.footer-logo-image {
    height: var(--hx-footer-logo-height);
}

/* Malls */
.footer-malls {
    font-size: var(--hx-footer-malls-font-size);
    color: var(--hx-footer-malls-text-color);
}

.footer-malls-item {
    border-radius: var(--hx-footer-malls-item-border-radius);
    border: 1px solid var(--hx-footer-border-color);
    overflow: hidden;
    display: inline-block;
    margin: var(--hx-footer-malls-item-margin);
}

.footer-malls-item-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: var(--hx-footer-malls-item-width);
    height: var(--hx-footer-malls-item-height);
    cursor: pointer;
}

.footer-malls-item-icon {
    font-size: var(--hx-footer-malls-item-icon-size);
    height: 1em;
}

.footer-malls-item-name {
    margin-top: 1em;
}

/* Medias */
.footer-medias {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--hx-footer-medias-margin);
}

.footer-medias-item {
    display: inline-flex;
    margin: var(--hx-footer-medias-item-margin);
}

.footer-medias-item-link {
    display: inline-flex;
    position: relative;
}

.footer-medias-item-icon {
    width: var(--hx-footer-medias-item-icon-size);
    height: var(--hx-footer-medias-item-icon-size);
    transform: opacity var(--hx-footer-transition-duration);
}

.footer-medias-item-link:hover .footer-medias-item-icon {
    opacity: 0.8;
}

.footer-medias-item-qrcode {
    position: absolute;
    width: var(--hx-footer-medias-item-qrcode-size);
    height: var(--hx-footer-medias-item-qrcode-size);
    transition: opacity var(--hx-footer-transition-duration), bottom var(--hx-footer-transition-duration), transform var(--hx-footer-transition-duration);
    max-width: none;
    object-fit: contain;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(0);
    opacity: 0;
}

.footer-medias-item-link:hover .footer-medias-item-qrcode {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    bottom: 125%;
}

/* Copyright */
.footer-copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hx-footer-copyright-padding);
    font-size: var(--hx-footer-copyright-font-size);
    color: var(--hx-footer-copyright-text-color);
    border-top: 1px solid var(--hx-footer-border-color);
}

.footer-copyright a {
    transition: color var(--hx-footer-transition-duration);
}

.footer-copyright a:hover {
    color: var(--hx-footer-copyright-text-color-hover);
}

.footer-copyright img {
    display: inline-block;
    height: var(--hx-footer-copyright-icon-size);
    vertical-align: middle;
}

/* 1920 */
@media (min-width: 1920px) {
    :root {
        /* Gap Line */
        --hx-footer-gap-line-distance: 105px; /* 距离其它内容块的间距 */
    }
}

/* 1680 */
@media (max-width: 1680px) {
}

/* 1440 */
@media (max-width: 1440px) {
    :root {
        /* Main */
        --hx-footer-main-padding: 88px 0 124px 0; /* 内边距 */

        /* Copyright */
        --hx-footer-copyright-padding: 12px 20px; /* 内边距 */
    }
}

/* 1366 */
@media (max-width: 1366px) {
}

/* 1280 */
@media (max-width: 1280px) {
    :root {
        /* 全局 */
        --hx-footer-font-size: 12px; /* 字体大小 */

        /* Main */
        --hx-footer-main-padding: 62px 0 86px 0; /* 内边距 */

        /*  Nav */
        --hx-footer-nav-title-size: 14px; /* 标题字体大小 */
        --hx-footer-nav-title-margin: 0 0 28px 0; /* 标题和项之间的间距 */
        --hx-footer-nav-item-margin: 0 0 18px 0; /* 项和项之间的间距 */

        /* Logo */
        --hx-footer-logo-height: 39px; /* logo 高度 */
        --hx-footer-logo-margin: 0 auto 12px auto; /* logo 外边距 */

        /* Malls */
        --hx-footer-malls-font-size: 16px; /* 字体大小 */
        --hx-footer-malls-item-width: 114px; /* 宽度 */
        --hx-footer-malls-item-height: 108px; /* 高度 */
        --hx-footer-malls-item-margin: 8px; /* 外边距 */
        --hx-footer-malls-item-icon-size: 26px; /* 图标大小（高度） */

        /* Medias */
        --hx-footer-medias-margin: 18px auto 0 auto; /* 外边距 */
        --hx-footer-medias-item-margin: 10px; /* 外边距 */
        --hx-footer-medias-item-icon-size: 32px; /* 图标大小 */
        --hx-footer-medias-item-qrcode-size: 90px; /* 二维码大小 */
    }
}

/* 1024 */
@media (max-width: 1024px) {
    :root {
        /* Main */
        --hx-footer-main-padding: 44px 0 62px 0; /* 内边距 */

        /* Other */
        --hx-footer-other-padding: 0 0 0 0; /* 内边距 */
    }
}

/* 992 */
@media (max-width: 992px) {
    :root {
        /*  Nav */
        --hx-footer-nav-module-margin: 0 0 24px 0; /* 内边距 */
        --hx-footer-nav-title-margin: 0 0 8px 0; /* 标题和项之间的间距 */
        --hx-footer-nav-item-margin: 6px 12px 6px 0; /* 项和项之间的间距 */
    }

    /* Nav */
    .footer-nav {
        flex-direction: column;
    }

    .footer-nav-list {
        display: flex;
        flex-wrap: wrap;
    }

    /* Other */
    .footer-other {
        justify-content: center;
    }
}

/* 768 */
@media (max-width: 768px) {
    :root {
        /* Main */
        --hx-footer-main-padding: 44px 0 20px 0; /* 内边距 */

        /* Gap Line */
        --hx-footer-gap-line-distance: 24px; /* 距离其它内容块的间距 */

        /* Logo */
        --hx-footer-logo-height: 45px; /* logo 高度 */
        --hx-footer-logo-margin: 0 auto 16px auto; /* logo 外边距 */

        /* Copyright */
        --hx-footer-copyright-padding: 15px 0; /* 内边距 */
        --hx-footer-copyright-icon-size: 20px; /* 图标大小 */
    }

    /* Main */
    .footer-main {
        flex-direction: column;
    }

    /* Nav */
    .footer-nav {
        order: 3;
    }

    /* Gap Line */
    .footer-main-gap-line {
        order: 2;
        width: 100%;
        border-top: 1px solid var(--hx-footer-border-color);
        margin: var(--hx-footer-gap-line-distance) 0;
    }

    /* Other */
    .footer-other {
        order: 1;
        width: 100%;
    }

    /* Copyright */
    .footer-copyright {
        flex-direction: column;
    }

    .footer-copyright > a:not(:last-child) {
        margin-bottom: 8px;
    }
}

/* 576 */
@media (max-width: 576px) {
}