/* =========================================================
 * 齐轩通信 400 主题 - 主样式
 * 精简结构：变量 → 基础 → 布局 → 组件 → 归档 → 单页
 * ========================================================= */

/* ---------------------------------------------------------
 * 1. CSS 变量（主题色、间距，全局统一）
 * --------------------------------------------------------- */
:root {
    --qx-primary:       #fc5952;      /* 主色：珊瑚红 */
    --qx-primary-dark:  #e0483f;      /* 主色深 */
    --qx-text:          #333333;      /* 主文字 */
    --qx-text-light:    #888787;      /* 次要文字 */
    --qx-bg-soft:       #f8f8f8;      /* 浅背景 */
    --qx-border:        #eeeeee;      /* 边框 */
    --qx-radius:        8px;          /* 圆角 */
    --qx-container:     1400px;       /* 内容最大宽度 */
    --qx-font:          'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ---------------------------------------------------------
 * 2. 基础重置与排版
 * --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--qx-font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--qx-text);
    background: #fff;
    overflow-x: hidden;
}
a { color: var(--qx-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--qx-primary-dark); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; font-weight: 600; color: var(--qx-text); }
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

/* ---------------------------------------------------------
 * 3. 通用容器与栅格
 * --------------------------------------------------------- */
.qx-container {
    width: 100%;
    max-width: var(--qx-container);
    margin: 0 auto;
    padding: 0 24px;
}
.qx-main { padding: 40px 0 60px; }

/* ---------------------------------------------------------
 * 4. 头部 Header
 * --------------------------------------------------------- */
.qx-header {
    position: sticky; top: 0; z-index: 9999;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.qx-header-inner {
    max-width: var(--qx-container);
    margin: 0 auto;
    padding: 0 24px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.qx-logo img { height: 44px; width: auto; }
.qx-site-name { font-size: 1.4rem; font-weight: 700; color: var(--qx-primary); }
.qx-nav { flex: 1; display: flex; justify-content: center; }
.qx-menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.qx-menu > li { position: relative; }
.qx-menu > li > a {
    display: inline-block; padding: 20px 16px;
    font-size: 1.05rem; font-weight: 500;
    color: var(--qx-text); position: relative;
}
.qx-menu > li > a::after {
    content: ''; position: absolute; left: 16px; right: 16px; bottom: 14px;
    height: 2px; background: var(--qx-primary);
    transform: scaleX(0); transition: transform .25s;
}
.qx-menu > li:hover > a,
.qx-menu > li.current-menu-item > a { color: var(--qx-primary); }
.qx-menu > li:hover > a::after,
.qx-menu > li.current-menu-item > a::after { transform: scaleX(1); }

/* 二级菜单 */
.qx-menu .sub-menu {
    position: absolute; top: 100%; left: 0; min-width: 180px;
    background: #fff; list-style: none; margin: 0; padding: 8px 0;
    border-top: 2px solid var(--qx-primary);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all .25s;
}
.qx-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.qx-menu .sub-menu a {
    display: block; padding: 10px 18px; font-size: .9rem; color: var(--qx-text);
}
.qx-menu .sub-menu a:hover { background: #f7f7f7; color: var(--qx-primary); }

/* 热线 */
.qx-hotline {
    flex-shrink: 0; font-size: 1.1rem; font-weight: 700; color: var(--qx-primary);
    white-space: nowrap;
}

/* 汉堡按钮 */
.qx-hamburger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 6px; background: transparent;
    border: none; cursor: pointer;
}
.qx-hamburger span { display: block; width: 24px; height: 2px; background: var(--qx-text); transition: all .3s; }
.qx-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.qx-hamburger.is-active span:nth-child(2) { opacity: 0; }
.qx-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 移动端菜单 */
.qx-mobile-menu {
    display: none; background: #fff; border-top: 1px solid var(--qx-border);
    max-height: 0; overflow: hidden; transition: max-height .35s;
}
.qx-mobile-menu.is-open { max-height: 600px; }
.qx-mobile-menu-list { list-style: none; padding: 6px 0; margin: 0; }
.qx-mobile-menu-list a {
    display: block; padding: 14px 24px; color: var(--qx-text);
    border-bottom: 1px solid var(--qx-border);
}
.qx-mobile-menu-list a:hover { color: var(--qx-primary); background: #fafafa; }
.qx-mobile-hotline { padding: 16px 24px; font-weight: 700; color: var(--qx-primary); }

/* ---------------------------------------------------------
 * 5. Banner
 * --------------------------------------------------------- */
.qx-banner--home img { width: 100%; }
.qx-banner--single {
    background: url('https://www.c4001.com/wp-content/uploads/2026/09/banner-bj.jpg') center / cover no-repeat;
    padding: 75px 0 65px; color: #fff; text-align: center;
}
.qx-banner-inner { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.qx-banner-title { font-size: 2.75rem; font-weight: 700; color: #fff; margin: 0 0 22px; line-height: 1.35; }
.qx-banner-subtitle { font-size: 1.6rem; font-weight: 700; color: #fff; margin: 0 0 38px; }
.qx-banner-actions { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* 通用按钮 */
.qx-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 34px; font-size: 1rem; font-weight: 600;
    border-radius: 6px; transition: all .25s;
}
.qx-btn-primary { background: #ededed; color: #333; }
.qx-btn-primary:hover { background: #fff; color: var(--qx-primary); transform: translateY(-2px); }
.qx-btn-secondary { background: transparent; color: #fff; border: 1px solid #fff; }
.qx-btn-secondary:hover { background: #fff; color: var(--qx-primary); }

/* ---------------------------------------------------------
 * 6. 面包屑
 * --------------------------------------------------------- */
.qx-breadcrumb-bar { background: #fff; border-bottom: 1px solid #f0f0f0; }
.qx-breadcrumb-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding-top: 18px; padding-bottom: 18px;
}
.qx-breadcrumb { font-size: .875rem; color: #666; }
.qx-breadcrumb a { color: #666; }
.qx-breadcrumb a:hover { color: var(--qx-primary); }
.qx-search { display: flex; align-items: center; border: 1px solid #eee; border-radius: 24px; overflow: hidden; }
.qx-search input { border: none; outline: none; padding: 8px 16px; width: 220px; font-size: .875rem; }
.qx-search button { background: transparent; border: none; padding: 8px 20px; color: #333; cursor: pointer; }
.qx-search button:hover { color: var(--qx-primary); }

/* ---------------------------------------------------------
 * 7. 组件：通用 Section
 * --------------------------------------------------------- */
.qx-section { padding: 60px 0; }
.qx-section.qx-bg-soft { background: var(--qx-bg-soft); }
.qx-section-title { text-align: center; font-size: 2.5rem; margin-bottom: 8px; }
.qx-section-subtitle { text-align: center; color: var(--qx-text-light); margin-bottom: 40px; }

/* ---------------------------------------------------------
 * 8. 组件：选择我们的理由
 * --------------------------------------------------------- */
.qx-reasons-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.qx-reason-item {
    text-align: center; padding: 30px 20px; border: 1px solid #e7e7e7;
    border-radius: var(--qx-radius); transition: all .25s;
}
.qx-reason-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-3px); }
.qx-reason-icon img { width: 48px; margin: 0 auto 16px; }
.qx-reason-title { font-size: 1.4rem; }
.qx-reason-desc { font-size: .95rem; color: var(--qx-text-light); margin: 0; }

/* ---------------------------------------------------------
 * 9. 组件：400电话的特性
 * --------------------------------------------------------- */
.qx-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.qx-feature-item { text-align: center; padding: 20px; }
.qx-feature-icon img { width: 60px; margin: 0 auto 16px; }
.qx-feature-title { font-size: 1.4rem; }
.qx-feature-desc { font-size: .95rem; color: var(--qx-text-light); margin: 0; }

/* ---------------------------------------------------------
 * 10. 组件：开号流程
 * --------------------------------------------------------- */
.qx-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.qx-process-item { text-align: center; }
.qx-process-icon img { width: 55px; margin: 0 auto 16px; }
.qx-process-title { font-size: 1.4rem; }
.qx-process-desc { font-size: .95rem; color: var(--qx-text-light); margin: 0; }
.qx-process-section {width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #f0f8ff; }


/* ---------------------------------------------------------
 * 11. 归档列表
 * --------------------------------------------------------- */
.qx-archive-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; }
.qx-sidebar .qx-widget { margin-bottom: 30px; }
.qx-widget-title { font-size: 1.1rem; padding-bottom: 10px; border-bottom: 2px solid var(--qx-primary); margin-bottom: 16px; }
.qx-cat-list { list-style: none; padding: 0; margin: 0; }
.qx-cat-list li { border-bottom: 1px dashed #eee; }
.qx-cat-list li a { display: block; padding: 10px 0; color: #333; }
.qx-cat-list li a:hover { color: var(--qx-primary); }

.qx-post-list { display: grid; gap: 20px; }
.qx-post-item {
    padding: 24px; border: 1px solid #eee; border-radius: var(--qx-radius);
    transition: all .25s;
}
.qx-post-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.qx-post-title { font-size: 1.25rem; margin-bottom: 8px; }
.qx-post-title a { color: var(--qx-text); }
.qx-post-title a:hover { color: var(--qx-primary); }
.qx-post-excerpt { color: var(--qx-text-light); margin-bottom: 10px; }
.qx-post-meta { font-size: .85rem; color: #999; }

/* 分页 */
.pagination, .navigation.pagination { margin-top: 30px; text-align: center; }
.pagination .page-numbers {
    display: inline-block; padding: 8px 14px; margin: 0 3px;
    background: #f5f5f5; border-radius: 4px; color: #333;
}
.pagination .page-numbers.current { background: var(--qx-primary); color: #fff; }

/* ---------------------------------------------------------
 * 12. 单页 / 文章
 * --------------------------------------------------------- */
.qx-single-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; }
.qx-article-title { font-size: 1.8rem; margin-bottom: 10px; }
.qx-article-meta { font-size: .875rem; color: #999; margin-bottom: 24px; }
.qx-article-meta span + span::before { content: ' · '; margin: 0 6px; }
.qx-article-content { font-size: 1rem; line-height: 1.8; }
.qx-article-content img { margin: 20px auto; }
.qx-article-content h2 { margin-top: 1.5em; }
.qx-article-content p { margin-bottom: 1em; }

/* ---------------------------------------------------------
 * 13. 底部 Footer
 * --------------------------------------------------------- */
.qx-footer { background: #fafafa; border-top: 1px solid #eee; padding: 24px 0; }
.qx-footer-inner {
    max-width: var(--qx-container); margin: 0 auto; padding: 0 24px;
    text-align: center; font-size: .875rem; color: #666;
}
.qx-footer-text { margin-bottom: 8px; }
.qx-footer-icp img { vertical-align: middle; margin: 0 4px; }

/* ---------------------------------------------------------
 * 14. 后台自定义字段样式
 * --------------------------------------------------------- */
.qx-meta-wrapper { padding: 10px 0; }
.qx-meta-item { padding: 12px 0; border-bottom: 1px dashed #eee; }
.qx-meta-item label { display: block; margin-bottom: 6px; }
.qx-meta-item input[type="text"],
.qx-meta-item textarea { width: 100%; }
.qx-image-preview { margin: 8px 0; }

/* ---------------------------------------------------------
 * 底部样式
 * --------------------------------------------------------- */
.qx-footer-icp {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px;
}

.qx-footer-icp a {
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s;
}

.qx-footer-icp a:hover {
    opacity: 0.8;
}

/* favicon 小图标 */
.qx-footer-icp .icp-icon {
    width: 18px;
    height: 18px;
    margin-right: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}

<div class="qx-footer-icp">
    <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener nofollow">
        <img src="https://www.c4001.com/wp-content/uploads/2026/10/ipc.png"
             alt="ICP备案" width="18" height="18" class="icp-icon">
        <img src="https://img.shields.io/badge/ICP备案-豫ICP备2026007311号-blue"
             alt="ICP备案">
    </a>
    <a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank" rel="noopener nofollow">
        <img src="https://www.c4001.com/wp-content/uploads/2026/10/gongan.png"
             alt="公安备案" width="18" height="18" class="icp-icon">
        <img src="https://img.shields.io/badge/公安备案-豫公网安备41100002000712号-green"
             alt="公安备案">
    </a>
</div>