/* =========================================
1. Global Reset & Variables
========================================= */
:root {
--primary-color: #00796b;
--primary-dark: #004d40;
--accent-color: #ff9800;
--bg-color: #f4f7f6;
--white: #ffffff;
--text-color: #333;
--border-color: #ddd;
--link-blue: #0066cc;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0; 
padding: 0;
background-color: var(--bg-color); 
color: var(--text-color);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { 
text-decoration: none; 
color: inherit; 
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
/* =========================================
2. Container Definitions
========================================= */
/* 通用容器 */
.container {
width: 100%; 
max-width: 1200px; 
margin: 0 auto; 
padding: 0 15px;
}
/* Hero 区域容器 (保留 padding 防止贴边) */
.hero-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px; 
display: flex; 
gap: 40px; 
align-items: flex-start; 
flex-wrap: wrap; 
}
/* Grid 区域容器 (无 padding，宽度完全由 Grid 撑开) */
.grid-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0; /* 永远保持 0，确保 Grid 和容器同宽 */
}
/* =========================================
3. Header & Navigation
========================================= */
.site-header { 
background: var(--primary-dark); 
color: var(--white); 
box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}
.header-flex { 
display: flex; 
justify-content: space-between; 
align-items: center; 
height: 60px; 
}
.logo a { 
color: var(--white); 
font-size: 24px; 
font-weight: 700; 
}
.main-nav { 
display: flex; 
align-items: center; 
}
.main-nav a { 
color: rgba(255,255,255,0.9); 
margin-left: 20px; 
font-size: 15px; 
font-weight: 500; 
padding: 5px 10px; 
border-radius: 4px; 
transition: background 0.2s; 
}
.main-nav a:hover { 
background: rgba(255,255,255,0.2); 
}
.main-nav ul,
.category-list,
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-btn-highlight { 
background: rgba(255,255,255,0.15); 
font-weight: bold; 
}
#mobile-menu-btn { 
display: none; 
background: none; 
border: none; 
color: white; 
font-size: 24px; 
cursor: pointer; 
}
/* =========================================
4. Hero Section
========================================= */
.hero-section {
background-color: var(--primary-color);
padding: 30px 0; 
margin-bottom: 30px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
width: 100%;
}
.hero-calculator {
flex: 0 0 680px; 
width: 680px; 
background: #ffffff; 
padding: 15px;
border-radius: 8px; 
box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
margin: 0;
}
.calc-display {
width: 100%; 
height: 50px;
background: #005a9e; 
color: #fff;
border: 1px solid #004a80; 
margin-bottom: 10px; 
font-size: 24px; 
text-align: right; 
padding: 5px 10px; 
font-family: 'Courier New', monospace; 
font-weight: bold;
}
.calc-keys { 
display: grid; 
gap: 4px; 
grid-template-columns: repeat(10, 1fr); 
}
.hero-calculator button {
padding: 8px 0; 
font-size: 14px;
border: 1px solid #ccc; 
border-radius: 3px; 
cursor: pointer;
font-weight: bold; 
transition: all 0.1s; 
min-width: 0;
}
.hero-calculator button:active { 
transform: translateY(1px); 
}
.hero-calculator button:hover { 
filter: brightness(0.95); 
}
.sci-btn { 
background: #f0f0f0; 
color: #000; 
font-family: sans-serif; 
}
.num-btn { 
background: #9abcd4; 
color: #000; 
font-size: 16px; 
}
.btn-op { 
background: #eef3f8; 
color: #000; 
font-size: 16px; 
}
.btn-mem, .btn-clr { 
background: #eef3f8; 
color: #000; 
}
.btn-eq { 
background: #9abcd4; 
color: #000; 
}
.radio-group { 
grid-column: span 2; 
display: flex; 
align-items: center; 
justify-content: center; 
gap: 5px; 
font-size: 11px; 
background: #fff !important; 
border: 1px solid #eee; 
}
.radio-group input { 
margin: 0 2px 0 0; 
}
.hero-search { 
flex: 1; 
min-width: 300px; 
padding-top: 10px; 
color: white; 
}
.hero-search h2 { 
font-size: 32px; 
margin: 0 0 15px 0; 
line-height: 1.2; 
}
.hero-search p { 
font-size: 18px; 
opacity: 0.9; 
margin-bottom: 30px; 
}
.search-form { 
display: flex; 
width: 100%; 
max-width: 400px; 
box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}
.search-form input { 
flex: 1; 
padding: 15px; 
border: none; 
border-radius: 4px 0 0 4px; 
font-size: 16px; 
outline: none; 
min-width: 0; 
}
.search-form button { 
padding: 0 20px; 
background: #004d40; 
border: none; 
color: white; 
font-weight: bold; 
border-radius: 0 4px 4px 0; 
cursor: pointer; 
white-space: nowrap; 
}
/* =========================================
5. Category Grid (首页分类网格)
========================================= */
.category-grid { 
display: grid; 
grid-template-columns: repeat(4, 1fr); 
gap: 20px; 
margin-bottom: 50px;
width: 100%; 
justify-items: stretch;
}
.category-box { 
width: 100%;
background: var(--white); 
border: 1px solid var(--border-color); 
border-radius: 4px; 
border-top: 4px solid var(--primary-color); 
box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
min-width: 0;
}
.category-header { 
background: #f9f9f9; 
padding: 12px 15px; 
font-size: 16px; 
font-weight: 700; 
color: var(--primary-dark); 
border-bottom: 1px solid #eee; 
}
.category-list { 
padding: 10px 15px; 
}
.category-list li { 
margin-bottom: 8px; 
padding-bottom: 8px; 
border-bottom: 1px dashed #eee; 
font-size: 14px; 
}
.category-list li:last-child { 
border-bottom: none; 
margin-bottom: 0; 
}
.category-list a { 
color: var(--link-blue); 
font-weight: 500; 
}
.category-list a:hover { 
text-decoration: underline; 
color: #003366; 
}
/* =========================================
6. Main Layout (内页布局)
========================================= */
.main-layout { 
display: flex; 
gap: 30px; 
margin-top: 30px; 
margin-bottom: 50px; 
width: 100%;
align-items: flex-start; /* 确保顶部对齐 */
}
/* =========================================
7. Sidebar (侧边栏)
========================================= */
.sidebar { 
width: 300px; 
flex-shrink: 0; 
}
.widget { 
background: var(--white); 
padding: 20px; 
margin-bottom: 20px; 
border-radius: 8px; 
border: 1px solid #eee; 
}
.widget h3 { 
margin-top: 0; 
font-size: 18px; 
border-bottom: 2px solid var(--primary-color); 
padding-bottom: 10px; 
margin-bottom: 15px; 
}
.widget ul li { 
margin-bottom: 8px; 
border-bottom: 1px solid #f0f0f0; 
padding-bottom: 8px; 
}
.widget a { 
color: var(--primary-dark); 
text-decoration: none; 
}
.widget a:hover { 
text-decoration: underline; 
}
/* =========================================
8. Calculator Common Styles (计算器通用样式)
========================================= */
/* --- 8.1 输入框组件系统 --- */
input[type=text], 
input[type=number], 
input[type=email],
input[type=password],
select { 
outline: none; 
}
.input-group, 
.input-combo { 
display: flex; 
width: 100%;
align-items: stretch; 
border: 1px solid #ccc; 
border-radius: 6px; 
background: #fff; 
overflow: hidden; 
box-shadow: none !important;
}
.input-group:focus-within, 
.input-combo:focus-within { 
border-color: var(--primary-color); 
}
.input-group .prefix, 
.input-group .suffix { 
padding: 10px 12px; 
background: #f5f5f5; 
color: #666; 
font-weight: 600; 
font-size: 14px; 
border-right: 1px solid #ddd; 
}
.input-group .suffix { 
border-right: none; 
border-left: 1px solid #ddd; 
}
.input-group input, 
.input-combo input { 
border: none !important;
box-shadow: none !important;
background: transparent;
flex: 1; 
padding: 10px 12px; 
font-size: 16px; 
outline: none; 
min-width: 0; 
}
.input-combo select { 
border: none; 
background: #f9f9f9; 
padding: 0 10px; 
cursor: pointer; 
outline: none; 
font-size: 14px; 
width: 60px; 
border-left: 1px solid #ddd; 
}
/* --- 8.2 表单元素 --- */
.form-group { 
margin-bottom: 15px; 
}
.form-group label { 
display: block; 
margin-bottom: 6px; 
font-weight: bold; 
color: #333; 
font-size: 14px; 
}
.form-group > input, 
.form-group > select,
.form-group > .form-control-select { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    font-size: 16px; 
    outline: none;
}
.form-group input:focus {
    border-color: var(--primary-color);
}
.form-control-select {
background: #fff; 
cursor: pointer; 
height: 42px; 
border: 1px solid #ccc; 
border-radius: 6px;
width: 100%;
padding: 10px 12px;
font-size: 16px;
}
/* 性别选择行样式 */
.gender-row { 
display: flex; 
align-items: center; 
gap: 15px; 
flex-wrap: wrap;
}
.gender-row > label:first-child { 
font-weight: bold; 
color: #333; 
font-size: 14px; 
margin: 0; 
min-width: 60px; 
}
.gender-row .gender-options { 
display: flex; 
gap: 15px; 
}
.gender-row .gender-options label { 
font-weight: normal; 
cursor: pointer; 
margin: 0; 
display: flex; 
align-items: center; 
gap: 5px; 
}
/* --- 8.3 按钮系统 --- */
.btn-calc {
flex: 1;
background-color: #005a4e !important;
color: #ffffff !important;
font-weight: 600;
cursor: pointer;
border: none;
border-radius: 4px;
padding: 12px 25px;
font-size: 16px;
transition: background-color 0.2s;
}
.btn-calc:hover {
background-color: #004d40 !important;
}
.btn-clear { 
flex: 1;
background-color: #f5f5f5; 
color: #333; 
border: 1px solid #ccc; 
padding: 12px 25px; 
border-radius: 4px; 
font-weight: 600; 
cursor: pointer; 
text-decoration: none; 
display: inline-block; 
text-align: center; 
font-size: 16px;
}
.btn-clear:hover { 
background-color: #e0e0e0; 
}
.btn-group { 
display: flex; 
gap: 15px; 
margin-top: 30px; 
width: 100%;
flex-wrap: wrap;
}
/* --- 8.4 内容区域 --- */
.content-area {
    flex: 1;
    min-width: 0; 
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background: #fff;
    box-shadow: none !important;
}
/* --- 8.5 结果展示框架 --- */
.result-col {
    flex: 1;
    min-width: 0;
    min-height: fit-content;
    display: flex;
    flex-direction: column;
}
.result-header { 
background: #e0f2f1; 
padding: 15px 20px; 
border-radius: 6px 6px 0 0; 
border: 1px solid #b2dfdb; 
border-bottom: none; 
display: flex; 
justify-content: space-between; 
align-items: baseline; 
text-align: left; 
flex-shrink: 0;
}
.result-header h2 { 
margin: 0; 
font-size: 24px; 
color: #004d40; 
line-height: 1.2; 
min-height: 28px;
}
.result-header .big-val { 
font-size: 28px; 
font-weight: 700; 
color: #004d40; 
margin-left: 10px; 
}
.result-body { 
background: #fff; 
border: 1px solid #ddd; 
border-top: 1px solid #b2dfdb; 
border-radius: 0 0 6px 6px; 
flex: 1; 
display: flex; 
flex-direction: column;
min-height: 0;
}
/* --- 8.6 数据摘要网格 --- */
.summary-grid { 
display: grid; 
grid-template-columns: 1fr 1fr; 
gap: 20px 40px; 
margin-top: 5px; 
padding-top: 5px; 
border-top: 2px solid #eee; 
}
.summary-item { 
display: flex; 
justify-content: space-between; 
border-bottom: 1px solid #eee; 
padding: 10px 0; 
font-size: 14px; 
}
.summary-item strong { 
color: #333; 
}
/* --- 8.7 表格容器和样式 --- */
.table-container { 
width: 100%; 
}
.breakdown-table { 
width: 100%; 
border-collapse: collapse; 
font-size: 14px; 
}
.breakdown-table th { 
text-align: right; 
color: #666; 
padding-bottom: 10px; 
font-weight: normal; 
border-bottom: 1px solid #eee; 
}
.breakdown-table td { 
padding: 8px 0; 
border-bottom: 1px solid #eee; 
color: #333; 
}
.breakdown-table .row-label { 
text-align: left; 
}
.breakdown-table .row-val { 
text-align: right; 
}
.breakdown-table .row-total { 
font-weight: bold; 
background: #f9f9f9; 
border-top: 2px solid #ddd; 
border-bottom: none; 
}
.breakdown-table tr:last-child td { 
border-bottom: none; 
}
/* 圆点指示器 */
.dot { 
display: inline-block; 
width: 10px; 
height: 10px; 
border-radius: 50%; 
margin-right: 5px; 
}
/* --- 8.8 图表容器 --- */
.chart-container { 
display: flex; 
align-items: center; 
justify-content: center; 
gap: 25px; 
padding: 25px; 
border-top: 1px solid #eee; 
width: 100%; 
}
.chart-wrapper { 
width: 100px; 
height: 100px; 
position: relative; 
flex-shrink: 0; 
}
.chart-legend { 
font-size: 13px; 
flex: 1; 
max-width: 300px; 
}
.legend-item { 
display: flex; 
align-items: center; 
justify-content: space-between; 
margin-bottom: 8px; 
width: 100%; 
}
.legend-left { 
display: flex; 
align-items: center; 
}
.legend-color { 
width: 12px; 
height: 12px; 
border-radius: 2px; 
margin-right: 8px; 
flex-shrink: 0; 
}
.legend-text { 
color: #555; 
white-space: nowrap; 
}
.legend-pct { 
font-weight: bold; 
color: #333; 
margin-left: 8px; 
}
/* --- 8.9 章节标题 --- */
.section-title { 
font-size: 16px; 
font-weight: bold; 
color: var(--primary-dark); 
margin: 20px 0 10px 0; 
border-bottom: 2px solid #eee; 
padding-bottom: 5px; 
}
/* --- 8.10 标签页系统 --- */
.tabs { 
display: flex; 
gap: 5px; 
margin-bottom: 0; 
border-bottom: 1px solid #ddd; 
}
.tab-btn { 
padding: 10px 20px; 
background: #f5f5f5; 
border: 1px solid #ddd; 
border-bottom: none; 
border-radius: 6px 6px 0 0; 
cursor: pointer; 
font-weight: 600; 
color: #666; 
margin-bottom: -1px; 
}
.tab-btn.active { 
background: #fff; 
border-bottom: 1px solid #fff; 
color: var(--primary-color); 
}
.tab-content { 
display: none; 
background: #fff; 
border: 1px solid #ddd; 
border-top: none; 
padding: 20px; 
border-radius: 0 0 6px 6px; 
}
.tab-content.active { 
display: block; 
}
/* --- 8.11 Show More 按钮 --- */
.show-more-btn {
display: block; 
width: 100%; 
padding: 15px; 
background: #f0f0f0; 
border: none; 
color: #555; 
font-weight: bold; 
cursor: pointer; 
margin-top: 10px;
}
.show-more-btn:hover { 
background: #e0e0e0; 
}
/* --- 8.12 打印按钮 --- */
.print-btn {
background: none;
border: 1px solid #005a4e;
color: #005a4e;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
}
.print-btn:hover {
background: #005a4e;
color: white;
}
/* =========================================
9. Content Box & Article Area
========================================= */
.calculator-panel { 
background: #e0f2f1; 
padding: 25px; 
border-radius: 8px; 
border: 1px solid #b2dfdb; 
margin-bottom: 30px; 
}
.content-box {
background: #fff;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin-bottom: 50px;
}
.content-box a {
    color: #0066cc !important;
    text-decoration: underline !important;
    font-weight: 500;
    transition: color 0.2s;
}

.content-box a:hover {
    color: #004499 !important;
    text-decoration: underline !important;
}

.content-box a:visited {
    color: #551a8b !important;
}
.content-box ul {
    list-style: disc;
    padding-left: 25px;
    margin: 15px 0;
}

.content-box ol {
    list-style: decimal;
    padding-left: 25px;
    margin: 15px 0;
}

.content-box li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.content-area, 
.result-body, 
.content-box {
padding: 15px !important; 
}
.seo-content h2 { 
border-bottom: 1px solid #eee; 
padding-bottom: 10px; 
margin-top: 30px; 
color: var(--primary-dark); 
}
/* =========================================
10. Image Layout (图片布局)
========================================= */
.image-container {
margin: 20px 0;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;  
display: block;
margin: 0 auto;
border: 1px solid #ddd;
border-radius: 4px;
}
.image-container figcaption {
font-size: 0.9em;
color: #666;
margin-top: 8px;
}
/* =========================================
11. Table Layout (表格布局)
========================================= */
.content-box table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
background-color: var(--white);
border: 1px solid var(--border-color);
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.content-box table th {
background-color: #f8f9fa;
color: var(--primary-dark);
font-weight: 700;
padding: 15px;
text-align: left;
border-bottom: 2px solid var(--primary-color); 
}
.content-box table td {
padding: 12px 15px;
border-bottom: 1px solid #eee;
color: #444;
line-height: 1.5;
}
.content-box table tr:nth-child(even) {
background-color: #fcfcfc;
}
.content-box table tr:hover {
background-color: #f1f8f7;
}
/* =========================================
12. Footer
========================================= */
.site-footer { 
background: #263238; 
color: #90a4ae; 
text-align: center; 
padding: 30px 0; 
margin-top: auto; 
}
.site-footer a {
color: #90a4ae;
text-decoration: none;
}
.site-footer a:hover {
color: #fff;
text-decoration: underline;
}
/* =========================================
13. Print Styles (打印样式)
========================================= */
@media print {
    /* 1. 隐藏不需要打印的全局干扰元素 */
    .site-header, 
    .hero-section, 
    .sidebar, 
    .site-footer, 
    .content-box, 
    .tabs,
    .btn-group, 
    .show-more-btn, 
    .print-btn,
    .mc-save-link,
    #save-btn,
    #toggle-optional { 
        display: none !important; 
    }

    /* 2. 重置容器布局，确保纵向堆叠 */
    body, 
    .container, 
    .main-layout { 
        display: block !important; 
        width: 100% !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        background: white !important; 
    }

    /* 3. 计算器输入栏：取消隐藏，并调整样式 */
    .main-layout > .content-area {
        display: block !important;
        width: 100% !important;
        border: 1px solid #ccc !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
        page-break-inside: avoid; /* 防止在输入框中间断页 */
    }

    /* 确保表单标签在打印时可见 */
    form label {
        display: block !important;
        font-weight: bold !important;
        margin-bottom: 5px !important;
        color: #000 !important;
    }

    /* 4. 月度支付结果栏：调整为满宽显示 */
    .result-col { 
        display: block !important; 
        width: 100% !important; 
        margin: 0 0 20px 0 !important; 
        border: none !important; 
    }

    .result-header, 
    .result-body { 
        background: white !important; 
        border: 2px solid #333 !important; 
        box-shadow: none !important; 
        padding: 15px !important; 
        border-radius: 0 !important; 
    }

    .result-header { 
        border-bottom: none !important; 
    }

    .result-body { 
        border-top: 1px solid #ccc !important; 
    }

    .result-header h2 { 
        color: #000 !important; 
    }

    /* 5. 图表处理：确保图表在打印时可见且不溢出 */
    .chart-container {
        display: flex !important;
        page-break-inside: avoid;
    }

    /* 6. 还款计划表：确保所有行显示 */
    .monthly-hidden { 
        display: table-row !important; 
    }

    .schedule-table, 
    .schedule-table th, 
    .schedule-table td { 
        border: 1px solid #999 !important; 
        color: #000 !important;
    }
    
    a { 
        text-decoration: none !important; 
        color: #000 !important; 
    }
}/* =========================================
14. Responsive Breakpoints (响应式断点)
========================================= */
/* --- 平板 (992px 以下) --- */
@media screen and (max-width: 992px) {
/* 分类网格变为 2 列 */
.category-grid { 
grid-template-columns: repeat(2, 1fr); 
}
/* Hero 区域堆叠 */
.hero-container { 
flex-direction: column; 
gap: 30px; 
}
.hero-search { 
width: 100%; 
text-align: center; 
}
.search-form { 
margin: 0 auto; 
}
/* 计算器变为简化版 */
.hero-calculator { 
flex: none; 
width: 350px; 
max-width: 100%; 
margin: 0 auto; 
padding: 15px 10px; 
}
.calc-keys { 
grid-template-columns: repeat(5, 1fr); 
gap: 6px; 
}
.sci-btn { 
display: none !important; 
}
.hero-calculator button {
padding: 12px 0;
font-size: 18px;
border-radius: 6px;
}
.num-btn, 
.btn-op, 
.btn-mem, 
.btn-eq, 
.btn-clr { 
background: #9abcd4; 
color: #000; 
border: 1px solid #789abc; 
}
.btn-op { 
background: #eef3f8 !important; 
}
/* 主布局变为纵向 */
.main-layout { 
flex-direction: column; 
align-items: stretch;
}
.sidebar { 
width: 100%; 
order: 2; 
}
.content-area { 
order: 1; 
width: 100%; 
}
.result-col { 
order: 2; 
width: 100%; 
min-width: 0 !important; 
margin-top: 1px;
}
.result-body { 
padding: 20px 15px; 
}
/* 图表容器变为纵向 */
.chart-container { 
flex-direction: column; 
gap: 20px; 
padding: 25px 20px; 
}
/* 摘要网格变为单列 */
.summary-grid { 
grid-template-columns: 1fr; 
}
}
/* --- 手机 (768px 以下) --- */
@media screen and (max-width: 768px) {
/ 移动菜单 */
.header-flex { height: auto; padding: 10px 0; flex-direction: column; gap: 10px; }
#mobile-menu-btn {
display: block;
}
.main-nav { 
display: none; 
position: absolute; 
top: 60px; 
left: 0; 
width: 100%; 
background: var(--primary-dark); 
flex-direction: column; 
z-index: 999; 
}
.main-nav.active { 
display: flex; 
}
.main-nav a { 
width: 100%; 
padding: 15px; 
border-bottom: 1px solid rgba(255,255,255,0.1); 
margin: 0; 
}
/* 分类网格变为单列 */
.category-grid { 
grid-template-columns: 1fr; 
}
/* 表格横向滚动 */
.content-box table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
/* 按钮组在小屏幕保持横向 */
.btn-group {
flex-wrap: wrap;
}
.btn-calc,
.btn-clear {
flex: 1;
min-width: 120px;
}
}
/* --- 小手机 (360px 以下) --- */
@media screen and (max-width: 360px) {
.hero-calculator {
width: 100%;
padding: 10px 5px;
}
.calc-keys { 
gap: 4px; 
}
.hero-calculator button { 
font-size: 16px; 
padding: 10px 0; 
}
.btn-calc,
.btn-clear {
padding: 10px;
font-size: 15px;
}
}
/* =========================================
15. Utility Classes (工具类)
========================================= */
/* 隐藏类 */
.hidden {
display: none !important;
}
/* 无障碍隐藏 */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: table;
clear: both;
}