@font-face {
    font-family: 'HarmonyOS';
    src: url('/font-family/HarmonyOS_Sans_SC_Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'HarmonyOS-light';
    src: url('/font-family/HarmonyOS_Sans_SC_Light.ttf') format('truetype');
}

@font-face {
    font-family: 'HarmonyOS-Bold';
    src: url('/font-family/HarmonyOS_Sans_SC_Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'HarmonyOS-Regular';
    src: url('/font-family/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
}

/* 底部主容器 */
.bottom {
    text-align: left;
    font-family: 'HarmonyOS';
    width: 100vw;
    background: #1C1C1C;
    /* 深色背景 */
    color: rgba(255, 255, 255, 0.85);
    padding-top: calc(60 / 1920 * 100vw);
    padding-bottom: calc(30 / 1920 * 100vw);
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: calc(360 / 1920 * 100vw);
    padding-right: calc(360 / 1920 * 100vw);
    justify-content: space-between;
}

.footer-section-list {
    display: flex;
}

/* 每个区块 */
.footer-section {
    margin-bottom: calc(60 / 1920 * 100vw);
}

.ABOUT {
    /* ABOUT列 */
    width: calc(180 / 1920 * 100vw);
}

.CONTACTUSjiu {
    /* CONTACTUSjiu列 */
    width: calc(155 / 1920 * 100vw);
}

/* 根据图片布局设置列宽 */
.PRODUCTS {
    /* PRODUCTS列 */
    /* width: calc(155 / 1920 * 100vw); */
    width: calc(150 / 1920 * 100vw);
}

.INDUSTRIES {
    /* INDUSTRIES列 */
    /* width: calc(161 / 1920 * 100vw); */
    width: calc(150 / 1920 * 100vw);
}

.COMPANY {
    /* COMPANY列 */
    width: calc(150 / 1920 * 100vw);
}

.CONTACTUS {
    /* CONTACT US列 */
    width: calc(188 / 1920 * 100vw);
}

.SUPPORT {
    /* SUPPORT列 */
    width: calc(140 / 1920 * 100vw);
}

/* 区块标题 */
.section-title {
    font-size: calc(14 / 1920 * 100vw);
    font-weight: 500;
    margin-bottom: calc(20 / 1920 * 100vw);
    color: #FFFFFF;
    font-family: "HarmonyOS-Medium";
}

/* 链接组 */
.links-group {
    display: flex;
    flex-direction: column;
    gap: calc(5 / 1920 * 100vw);
}

/* 链接项目 */
.link-item {
    color: #fff;
    font-size: calc(12 / 1920 * 100vw);
    line-height: calc(14.06 / 1920 * 100vw);
    display: block;
    padding: 0.2vw 0;
    transition: color 0.3s ease;
    cursor: pointer;
    font-family: 'HarmonyOS-light';
    font-weight: 300;
    align-self: flex-start;
}

.link-item:hover {
    /* color: #4a90e2; */
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
}

.contact-link {
    color: #fff;
    font-size: calc(12 / 1920 * 100vw);
    white-space: nowrap;
    display: block;
    transition: color 0.3s ease;
}

.contact-link:hover {
    /* color: #4a90e2; */
}

/* 社交媒体区域 */
.social-section {
    display: flex;
    flex-direction: column;
    /* width: calc(280 / 1920 * 100vw); */
    margin-right: calc(30 / 1920 * 100vw);
}

/* 二维码容器 */
.qrcode-container {
    display: flex;
    justify-content: space-between;
    gap: calc(60 / 1920 * 100vw);
    margin-top: calc(2 / 1920 * 100vw);
}

.qrcode-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 / 1920 * 100vw);
}

.qrcode-wrapper {
    width: calc(100 / 1920 * 100vw);
    height: calc(100 / 1920 * 100vw);
    border-radius: 4px;
}

.qrcode-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.social-name {
    font-size: calc(14 / 1920 * 100vw);
    line-height: calc(16.41 / 1920 * 100vw);
    font-family: 'HarmonyOS-light';
    font-weight: 300;
    color: #fff;
    text-align: center;
}

.social-name:hover {
    /* color: #4a90e2; */
}

/* 社交图标容器 */
.social-icon-container {
    position: relative;
    display: inline-block;
}

/* 二维码弹窗 */
.social-qrcode {
    position: absolute;
    bottom: calc(50 / 1920 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: calc(4 / 1920 * 100vw);
    border-radius: calc(8 / 1920 * 100vw);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    width: calc(110 / 1920 * 100vw);
    text-align: center;
    box-sizing: border-box;
    display: flex;
}

/* 二维码箭头 */
.social-qrcode::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: calc(8 / 1920 * 100vw);
    border-style: solid;
    border-color: white transparent transparent transparent;
}

/* 二维码图片 */
.qrcode-popup {
    width: 100%;
    height: auto;
}

/* 悬停时显示二维码 */
.social-icon-container:hover .social-qrcode {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(calc(-5 / 1920 * 100vw));
}

/* 社交媒体图标 */
.social-icons {
    display: flex;
    gap: calc(30 / 1920 * 100vw);
    height: 2.1875vw;
}

.social-icon {
    display: inline-block;
    width: calc(46 / 1920 * 100vw);
    height: calc(46 / 1920 * 100vw);
    transition: transform 0.1s ease;
}

.social-icon:hover {
    transform: translateY(calc(-2 / 1920 * 100vw));
}

.social-icon-image {
    width: 100%;
    height: 100%;
}

/* 图片悬停效果 */
.social-icon-image[src="/img/微信白.png"]:hover {
    content: url("/img/微信彩.png");
}

.social-icon-image[src="/img/抖音白.png"]:hover {
    content: url("/img/抖音彩.png");
}

.social-icon-image[src="/img/快手白.png"]:hover {
    content: url("/img/快手彩.png");
}

.social-icon-image[src="/img/bil白.png"]:hover {
    content: url("/img/bil彩.png");
}

/* 底部联系信息 */
.footer-bottom {
    width: calc(1200 / 1920 * 100vw);
    border-bottom: 1px solid #808080;
    padding-bottom: calc(25 / 1920 * 100vw);
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.footer-contact-info {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: calc(13 / 1920 * 100vw);
    margin-right: calc(300 / 1920 * 100vw);

    .item {
        font-size: calc(16 / 1920 * 100vw);
        line-height: calc(18.75 / 1920 * 100vw);
        font-family: 'HarmonyOS-Regular';
        color: #E5E5E5;
    }
}

.underLogo {
    width: calc(162 / 1920 * 100vw) !important;
    margin-right: calc(20 / 1920 * 100vw);
}

.footer-bottom-text {
    font-size: calc(12 / 1920 * 100vw);
    font-weight: 300;
    line-height: calc(14.06 / 1920 * 100vw);
    color: #A6A6A6;
    margin-top: calc(20 / 1920 * 100vw);
}