/* =========================================
   Footer 主容器样式
   ========================================= */

.footer {
    background-color: #ffffff; /* 设置背景色为白色 */
    border-top: 1px solid var(--kt-border-color); /* 顶部边框，使用CSS变量定义颜色 */
    padding: 15px 0; /* 上下内边距15px，左右为0 */
    position: fixed; /* 固定定位，始终显示在视口底部 */
    bottom: 0; /* 距离底部0px */
    left: 0; /* 距离左侧0px */
    width: 100%; /* 宽度占满父容器 */
    z-index: 1001; /* 层级设置为1001，确保在其他元素之上 */
}

/* =========================================
   Footer 内容容器样式
   ========================================= */

.footer-container {
    max-width: 1320px; /* 最大宽度限制为1320px */
    margin: 0 auto; /* 上下边距0，左右自动居中 */
    padding: 0 24px; /* 左右内边距24px */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 子元素两端对齐，中间间距相等 */
}

/* =========================================
   版权信息和链接样式
   ========================================= */

.text-copyright {
    color: var(--kt-text-gray); /* 文字颜色使用CSS变量 */
    font-weight: 500; /* 字体粗细为中等 */
    font-size: 0.85rem; /* 字体大小为0.85rem */
}

.text-copyright a {
    color: var(--kt-text-dark); /* 链接文字颜色 */
    text-decoration: none; /* 去除下划线 */
    font-weight: 600; /* 链接字体粗细为600 */
    transition: color 0.2s; /* 颜色变化过渡时间为0.2秒 */
}

.text-copyright a:hover {
    color: var(--kt-primary); /* 鼠标悬停时链接颜色变为主题色 */
}

/* =========================================
   社交图标和弹窗样式
   ========================================= */

/* 社交图标按钮 - 浅色主题适配 */
.social-glass {
    width: 42px; /* 宽度42px */
    height: 42px; /* 高度42px */
    border-radius: 12px; /* 圆角半径12px */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    transition: all 0.3s; /* 所有属性变化过渡时间为0.3秒 */
    cursor: pointer; /* 鼠标悬停时显示为指针 */
    padding: 0; /* 内边距为0 */
    background: #fff; /* 背景色为白色 */
    border: 1px solid var(--kt-border-color); /* 边框使用CSS变量颜色 */
    color: var(--kt-text-gray); /* 图标颜色使用CSS变量 */
}

.social-glass:hover {
    color: var(--kt-primary); /* 悬停时图标颜色变为主题色 */
    border-color: var(--kt-primary); /* 悬停时边框颜色变为主题色 */
    box-shadow: 0 0 10px rgba(0, 158, 247, 0.1); /* 悬停时添加淡蓝色阴影 */
}

/* 弹窗/提示框包装器 */
.btn-wrapper {
    position: relative; /* 相对定位，作为绝对定位子元素的参考 */
    display: inline-block; /* 行内块级元素 */
}

/* 弹窗内容 */
.popup-content {
    position: absolute; /* 绝对定位 */
    bottom: 120%; /* 位于按钮上方 */
    left: 50%; /* 左侧位置为50% */
    transform: translateX(-50%); /* 向左平移自身宽度的50%，实现水平居中 */
    background: #fff; /* 背景色为白色 */
    border: 1px solid var(--kt-border-color); /* 边框使用CSS变量颜色 */
    box-shadow: 0 5px 30px rgba(0,0,0,0.15); /* 添加阴影效果 */
    padding: 15px; /* 内边距15px */
    border-radius: 12px; /* 圆角半径12px */
    opacity: 0; /* 初始透明度为0，隐藏 */
    visibility: hidden; /* 初始不可见 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 使用贝塞尔曲线过渡动画 */
    z-index: 1000; /* 层级设置为1000 */
    width: max-content; /* 宽度根据内容自适应 */
    text-align: center; /* 文本居中对齐 */
    pointer-events: none; /* 禁止鼠标事件，防止闪烁 */
    margin-bottom: 10px; /* 底部边距10px，为箭头留出空间 */
}

/* 悬停时显示弹窗 */
.btn-wrapper:hover .popup-content {
    opacity: 1; /* 透明度变为1，显示 */
    visibility: visible; /* 可见 */
    bottom: 110%; /* 稍微向上移动，产生动画效果 */
    pointer-events: auto; /* 恢复鼠标事件 */
}

/* 弹窗箭头 */
.popup-content::after {
    content: ''; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    top: 100%; /* 位于弹窗底部 */
    left: 50%; /* 左侧位置为50% */
    margin-left: -8px; /* 向左平移8px */
    border-width: 8px; /* 边框宽度8px */
    border-style: solid; /* 实线边框 */
    border-color: #fff transparent transparent transparent; /* 上边框白色，其他透明，形成三角形 */
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.05)); /* 添加轻微阴影 */
}

/* 联系方式弹窗图标样式 */
.contact-item-icon {
    width: 36px; /* 宽度36px */
    height: 36px; /* 高度36px */
    background-color: rgba(0, 158, 247, 0.1); /* 背景色为淡蓝色，透明度0.1 */
    color: var(--kt-primary); /* 图标颜色使用主题色 */
    border-radius: 50%; /* 圆形 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

/* =========================================
   页面主体容器样式
   ========================================= */

main.page-container {
    padding-top: 160px; /* 顶部内边距160px，避开顶部菜单 */
    flex: 1; /* 弹性伸缩为1，占据剩余空间，将footer推到底部 */
    max-width: 1200px; /* 最大宽度限制为1200px */
    margin: 0 auto; /* 上下边距0，左右自动居中 */
    padding-left: 30px; /* 左侧内边距30px */
    padding-right: 30px; /* 右侧内边距30px */
    padding-bottom: 60px; /* 底部内边距60px */
}

/* =========================================
   文本排版样式
   ========================================= */

p {
    line-height: 1.75; /* 行高为1.75倍 */
    color: #898989; /* 文字颜色 */
    text-align: justify; /* 文本两端对齐 */
    font-size: 16px; /* 字体大小16px */
}

h1 {
    margin-top: 2.5rem; /* 上边距2.5rem */
    margin-bottom: 1.5rem; /* 下边距1.5rem */
    font-weight: 700; /* 字体粗细700 */
    line-height: 1.3; /* 行高1.3倍 */
    color: #333; /* 文字颜色深灰色 */
}

h2 {
    margin-top: 4rem; /* 上边距2rem */
    margin-bottom: 1rem; /* 下边距1rem */
    font-weight: 600; /* 字体粗细600 */
    line-height: 1.35; /* 行高1.35倍 */
    color: #333; /* 文字颜色深灰色 */
}

h3 {
    margin-top: 2rem; /* 上边距1.75rem */
    margin-bottom: 1rem; /* 下边距1rem */
    font-weight: 600; /* 字体粗细600 */
    line-height: 1.4; /* 行高1.4倍 */
    color: #333; /* 文字颜色深灰色 */
}

h4 {
    margin-top: 1.5rem; /* 上边距1.5rem */
    margin-bottom: 0.75rem; /* 下边距0.75rem */
    font-weight: 600; /* 字体粗细600 */
    line-height: 1.45; /* 行高1.45倍 */
    color: #444; /* 文字颜色中灰色 */
}

h5 {
    margin-top: 1.25rem; /* 上边距1.25rem */
    margin-bottom: 0.5rem; /* 下边距0.5rem */
    font-weight: 600; /* 字体粗细600 */
    line-height: 1.5; /* 行高1.5倍 */
    color: #555; /* 文字颜色浅灰色 */
}

ul {
    margin-bottom: 1.5rem; /* 下边距1.5rem */
    padding-left: 20px; /* 左侧内边距20px */
    list-style-type: disc; /* 列表样式为实心圆点 */
}

li {
    margin-bottom: 0.8rem; /* 下边距0.8rem */
    line-height: 1.6; /* 行高1.6倍 */
    color: #898989; /* 文字颜色 */
    text-align: justify; /* 文本两端对齐 */
}

/* =========================================
   页面标题和分隔符样式
   ========================================= */

.page-title {
    font-size: 48px; /* 字体大小48px */
    font-weight: 400; /* 字体粗细400 */
    color: #7a7a7a; /* 文字颜色 */
    margin-bottom: 50px; /* 下边距50px */
    font-family: "Arial", sans-serif; /* 字体为Arial */
}

.footer-divider {
    height: 1px; /* 高度1px */
    background-color: #a0a0a0; /* 背景色 */
    width: 100%; /* 宽度100% */
    border: none; /* 无边框 */
    margin-bottom: 50px; /* 下边距50px */
}

.section-title {
    font-size: 24px; /* 字体大小24px */
    font-weight: 300; /* 字体粗细300 */
    color: #363636; /* 文字颜色 */
    margin-bottom: 20px; /* 下边距20px */
}

.footer-divider-bottom {
    height: 1px; /* 高度1px */
    background-color: #a0a0a0; /* 背景色 */
    width: 100%; /* 宽度100% */
    margin-top: 20px; /* 上边距20px */
    margin-bottom: 30px; /* 下边距30px */
}

/* =========================================
   Logo 相关样式
   ========================================= */

.footer-logo-box {
    margin-top: 10px; /* 上边距10px */
}

.footer-logo-text {
    font-family: "Century Gothic", "Avant Garde", Arial, sans-serif; /* 字体优先级列表 */
    font-size: 32px; /* 字体大小32px */
    color: #999; /* 文字颜色 */
    display: inline-flex; /* 行内弹性布局 */
    align-items: baseline; /* 基线对齐 */
    font-weight: normal; /* 字体粗细正常 */
    letter-spacing: -1px; /* 字符间距-1px */
}

.footer-logo-cn {
    font-family: "Microsoft YaHei", sans-serif; /* 字体为微软雅黑 */
    font-weight: 400; /* 字体粗细400 */
    margin-left: 5px; /* 左边距5px */
    letter-spacing: 1px; /* 字符间距1px */
}

.trademark {
    font-size: 20px; /* 字体大小20px */
    vertical-align: super; /* 垂直对齐为上标 */
    margin-left: 10px; /* 左边距10px */
}

.footer-logo-divider {
    width: 110px; /* 宽度110px */
    height: 1px; /* 高度1px */
    background-color: #ccc; /* 背景色 */
    margin-top: 20px; /* 上边距20px */
}

/* =========================================
   表格样式优化 (Table Styles)
   ========================================= */
.section-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.section-body table th,
.section-body table td {
    padding: 12px 15px;
    border: 1px solid #dee2e6;
    vertical-align: middle;
    text-align: left;
    color: #495057;
    font-size: 15px;
}

.section-body table tr:first-child {
    font-weight: 600;
}

.section-body table tr:first-child th,
.section-body table tr:first-child td {
    color: #343a40;
    border-bottom: 2px solid #dee2e6;
}



/* 响应式表格滚动 */
.section-body {
    overflow-x: auto;
}

/* =========================================
   版权区域样式
   ========================================= */

.page-footer {
    max-width: 1200px; /* 最大宽度1200px */
    margin: 0 auto; /* 上下边距0，左右自动居中 */
    padding-top: 80px; /* 顶部内边距80px */
    padding-bottom: 80px; /* 底部内边距80px */
    border-top: 1px solid #f0f0f0; /* 顶部边框 */
    width: 100%; /* 宽度100% */
    font-size: 14px; /* 字体大小14px */
    color: #666666; /* 文字颜色 */
}

/* =========================================
   响应式设计 - 平板设备
   ========================================= */

@media (max-width: 1200px) {
    .page-container,
    .page-footer {
        padding-left: 40px; /* 左侧内边距40px */
        padding-right: 40px; /* 右侧内边距40px */
    }
}

/* =========================================
   响应式设计 - 移动设备
   ========================================= */

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* 弹性布局改为垂直方向 */
        gap: 12px; /* 子元素间距12px */
    }

    .page-container {
        margin-top: 60px; /* 上边距60px */
        padding: 20px 20px 80px; /* 内边距：上20px，左右20px，下80px */
        padding-top: 80px; /* 顶部内边距80px，避开顶部菜单 */
    }

    .page-title {
        font-size: 30px; /* 字体大小30px */
        margin-bottom: 20px; /* 下边距20px */
    }

    .section-title {
        font-size: 20px; /* 字体大小20px */
    }

    .page-footer {
        padding: 60px 0px 100px; /* 内边距：上60px，左右0，下100px */
    }

    .footer-thanks {
        font-size: 48px; /* 字体大小48px */
    }

    .footer-heading {
        font-size: 20px; /* 字体大小20px */
    }

    .footer-text {
        font-size: 15px; /* 字体大小15px */
        line-height: 1.7; /* 行高1.7倍 */
    }
}

/* =========================================
   响应式设计 - 小屏移动设备
   ========================================= */

@media (max-width: 480px) {
    .footer-thanks {
        font-size: 40px; /* 字体大小40px */
    }
}

/* =========================================
   打印优化样式
   ========================================= */

@media print {
    body {
        background: #fff !important; /* 打印时背景色为白色，使用!important优先级最高 */
    }

    .page-container {
        padding: 0 !important; /* 打印时内边距为0 */
        margin: 0 !important; /* 打印时外边距为0 */
    }

    .footer, .doc-actions, .navbar, .sidebar {
        display: none !important; /* 打印时隐藏footer、操作按钮、导航栏和侧边栏 */
    }

    .page-body {
        width: 100% !important; /* 打印时宽度100% */
    }
}

/* =========================================
   浮动操作按钮样式
   ========================================= */

.doc-actions {
    position: fixed; /* 固定定位 */
    bottom: 40px; /* 距离底部40px */
    right: 40px; /* 距离右侧40px */
    z-index: 100; /* 层级100 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直方向排列 */
    gap: 15px; /* 子元素间距15px */
}

.action-btn {
    width: 50px; /* 宽度50px */
    height: 50px; /* 高度50px */
    border-radius: 50%; /* 圆形 */
    background-color: var(--ft-primary, #009ef7); /* 背景色，使用CSS变量，默认为蓝色 */
    color: #fff; /* 文字颜色白色 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    box-shadow: 0 4px 12px rgba(0, 158, 247, 0.3); /* 添加蓝色阴影 */
    transition: all 0.3s; /* 所有属性变化过渡时间为0.3秒 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标悬停时显示为指针 */
    text-decoration: none; /* 去除下划线 */
}

.action-btn:hover {
    transform: translateY(-3px); /* 悬停时向上移动3px */
    background-color: var(--ft-primary-active, #0095e8); /* 悬停时背景色变深 */
    color: #fff; /* 文字颜色保持白色 */
}

/* =========================================
   Footer 标题和感谢文字样式
   ========================================= */

.footer-heading {
    font-size: 24px; /* 字体大小24px */
    font-weight: 300; /* 字体粗细300 */
    color: #666666; /* 文字颜色 */
    margin-bottom: 25px; /* 下边距25px */
}

.footer-thanks {
    font-size: 56px; /* 字体大小56px */
    font-weight: 100; /* 字体粗细100 */
    color: #7a7a7a; /* 文字颜色 */
    letter-spacing: 1px; /* 字符间距1px */
    margin-bottom: 30px; /* 下边距30px */
    font-family: "Arial", sans-serif; /* 字体为Arial */
}

/* =========================================
   内容区域样式
   ========================================= */

.section-head {
    align-items: center; /* 垂直居中 */
    gap: 16px; /* 子元素间距16px */
    margin-bottom: 24px; /* 下边距24px */
}

.content-section {
    margin-bottom: 50px; /* 下边距50px */
    opacity: 0; /* 初始透明度为0 */
    transform: translateY(20px); /* 初始向下偏移20px */
    transition: opacity 0.5s ease, transform 0.5s ease; /* 透明度和变换的过渡动画 */
}

.content-section.section-visible {
    opacity: 1; /* 透明度变为1，显示 */
    transform: translateY(0); /* 恢复到原位置 */
}

.page-body {
    margin-bottom: 60px; /* 下边距60px */
}

.footer-text {
    font-size: 16px; /* 字体大小16px */
    line-height: 1.8; /* 行高1.8倍 */
    color: #888888; /* 文字颜色 */
    margin-bottom: 40px; /* 下边距40px */
}

.footer-text-en {
    word-spacing: 0px; /* 单词间距0px */
}