/* ============================================
   移动端适配（响应式）
   桌面原样式保持不变，仅在窄屏下覆盖
   ============================================ */

/* ---------- 平板 ≤ 991px ---------- */
@media (max-width: 991px) {

    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .navbar .container-fluid {
        height: auto;
        min-height: 60px;
        padding: 0 15px;
    }

    .header {
        height: auto;
    }

    /* 卡片 4 列 */
    .cards-group .item {
        width: 25%;
    }

    /* 流程 3 列 */
    .stepflow-group > li {
        width: 33.33%;
        margin-bottom: 18px;
    }

    .stepflow-group > li .flow {
        display: none;
    }

    /* 我们能做什么 1 列 */
    .what-group li {
        width: 100%;
        margin-bottom: 18px;
    }

    /* 为什么选择 3 列 */
    .feature-group li {
        width: 33.33%;
        margin-bottom: 22px;
    }

    /* 常见问题 1 列 */
    .panel-faq .faq-group li {
        width: 100%;
        padding-right: 0;
    }
}

/* ---------- 手机 ≤ 767px ---------- */
@media (max-width: 767px) {

    body {
        min-width: 0;
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* ===== 顶部导航：汉堡菜单 ===== */
    .header {
        height: auto;
        position: relative;
        z-index: 1000;
    }

    .navbar .container-fluid {
        display: block;
        height: auto;
        padding: 0 12px;
    }

    .navbar-brand {
        float: left;
        height: 54px;
        line-height: 54px;
        padding: 0;
    }

    .navbar-brand .logo img {
        max-height: 34px;
        width: auto;
        vertical-align: middle;
    }

    .navbar-toggle {
        display: block;
        float: right;
        width: 44px;
        height: 44px;
        margin: 5px 0;
        padding: 0;
        background: transparent;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        cursor: pointer;
        outline: none;
    }

    .navbar-toggle .icon-bar {
        display: block;
        width: 20px;
        height: 2px;
        margin: 4px auto;
        background: #666;
        border-radius: 1px;
        transition: all .3s;
    }

    .navbar-toggle.active .icon-bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .navbar-toggle.active .icon-bar:nth-child(2) {
        opacity: 0;
    }

    .navbar-toggle.active .icon-bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* 菜单默认收起，展开时纵向排列 */
    .navbar-primary {
        display: none;
        float: none;
        clear: both;
        width: 100%;
        background: #fff;
        border-top: 1px solid #f0f0f0;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    }

    .navbar-primary.open {
        display: block;
    }

    .navbar-nav {
        float: none !important;
        margin: 0;
        padding: 0;
    }

    .navbar-nav > li {
        float: none;
        display: block;
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
    }

    .navbar-nav > li > a {
        display: block;
        padding: 13px 4px !important;
        line-height: 22px !important;
        height: auto !important;
        text-align: left;
    }

    /* 下拉卡种菜单：改为内嵌列表 */
    .navbar-nav > li .dropdown-menu {
        display: none !important;
        position: static !important;
        float: none;
        width: 100%;
        box-shadow: none;
        border: 0;
        padding: 0 0 8px 0;
    }

    .navbar-nav > li.open .dropdown-menu {
        display: block !important;
    }

    .navbar-cardnav li {
        float: left;
        width: 33.33%;
        text-align: center;
        padding: 8px 4px;
    }

    .navbar-cardnav li .card img,
    .navbar-cardnav li .cover {
        width: 44px;
        height: 44px;
        margin: 0 auto 4px auto;
    }

    /* 登录/注册按钮 */
    .navbar-customer {
        float: none;
        clear: both;
        width: 100%;
        padding: 10px 0;
    }

    .navbar-login {
        float: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .navbar-login > li {
        float: none;
        display: block;
    }

    .navbar-user .btn {
        display: inline-block;
        margin: 0 6px 0 0;
        padding: 7px 18px;
    }

    .navbar-user .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        box-shadow: none;
        border: 0;
    }

    /* ===== Banner ===== */
    .jumbotron {
        height: auto !important;
        min-height: 0;
        padding: 42px 0 46px 0 !important;
        background-size: cover !important;
    }

    .jumbotron-inner h1 {
        font-size: 24px !important;
        line-height: 1.4;
    }

    .jumbotron-inner p {
        display: none;
    }

    .jumbotron .btn-jumbo,
    .jumbotron-inner a {
        padding: 10px 26px !important;
        font-size: 15px !important;
    }

    /* ===== 公告条 ===== */
    .kaka-notice {
        display: block;
        padding: 14px 12px !important;
    }

    .kaka-notice-icon,
    .kaka-notice-time {
        display: none;
    }

    .kaka-notice-text {
        padding: 0 !important;
        margin: 0 !important;
    }

    .kaka-notice-text h5 {
        font-size: 15px;
    }

    .kaka-notice-text p {
        font-size: 13px;
        line-height: 1.7;
    }

    .kaka-notice-more {
        display: none;
    }

    /* ===== 流程 ===== */
    .kaka-stepflows {
        margin: 20px 0 30px 0 !important;
    }

    .stepflow-group > li {
        width: 33.33%;
        margin-bottom: 16px;
    }

    .stepflow-group > li .icon {
        width: 54px;
        height: 54px;
        line-height: 54px;
    }

    .stepflow-group > li .icon .num-icon {
        font-size: 18px;
    }

    .stepflow-group > li .title {
        margin-top: 8px;
        font-size: 13px;
    }

    .stepflow-group > li .sub {
        display: none;
    }

    .stepflow-group > li .flow {
        display: none;
    }

    /* ===== 卡片区 ===== */
    .panel {
        padding: 26px 0 !important;
    }

    .panel-heading {
        margin-bottom: 18px !important;
    }

    .panel-title {
        font-size: 20px !important;
    }

    .panel-subtitle {
        font-size: 13px !important;
    }

    /* 分类 Tab 横向滚动 */
    .panel-cards .cards-tabs {
        display: block;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        text-align: left;
        margin-bottom: 16px !important;
        padding-bottom: 4px;
    }

    .panel-cards .cards-tabs li {
        display: inline-block;
        float: none;
        padding: 0 12px 10px 12px !important;
        font-size: 14px;
    }

    .panel-cards .cards-tabs li img {
        width: 22px;
        height: 22px;
    }

    .cards-group {
        margin: 0 -6px;
    }

    .cards-group .item {
        width: 50%;
        padding: 0 6px 12px 6px;
    }

    .cards-cover {
        padding: 12px 6px 12px 6px !important;
    }

    .cards-cover img {
        max-height: 72px;
    }

    .cards-cover .title {
        font-size: 13px !important;
        margin: 8px 0 4px 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cards-cover .discount {
        font-size: 13px !important;
    }

    .cards-cover .actions .btn {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    /* ===== 我们能做什么 ===== */
    .what-group li {
        width: 100%;
        margin-bottom: 14px;
    }

    .what-group .what-group-inner {
        margin: 0;
        padding: 22px 18px !important;
    }

    .what-group .what-group-inner img {
        width: 52px;
        height: 52px;
    }

    .what-group .what-group-inner h5 {
        margin: 12px 0 8px 0;
        font-size: 16px;
    }

    .what-group .what-group-inner p {
        font-size: 13px;
        line-height: 1.8;
    }

    /* ===== 为什么选择我们 ===== */
    .feature-group li {
        width: 33.33%;
        margin-bottom: 20px;
    }

    .feature-group .iconimg {
        width: 48px;
        height: 48px;
        background-size: 240px 108px;
    }

    .feature-group .iconimg-type { background-position: 0 0; }
    .feature-group .iconimg-heart { background-position: -48px 0; }
    .feature-group .iconimg-safe { background-position: -96px 0; }
    .feature-group .iconimg-fast { background-position: -144px 0; }
    .feature-group .iconimg-price { background-position: -192px 0; }

    .feature-group h5 {
        margin: 10px 0 4px 0;
        font-size: 15px;
    }

    .feature-group p {
        font-size: 12px;
    }

    /* ===== 常见问题 ===== */
    .panel-faq .faq-group li {
        width: 100%;
        padding: 0 0 20px 0 !important;
    }

    .panel-faq .faq-group h5 {
        font-size: 14px;
    }

    .panel-faq .faq-group p {
        font-size: 13px;
        line-height: 1.8;
    }

    /* ===== 页脚 ===== */
    .footer-primary .container > dl {
        float: none;
        width: 100%;
        padding: 0;
        margin-bottom: 18px;
        text-align: center;
    }

    .footer-help .footer-links li {
        display: inline-block;
        float: none;
        padding: 0 8px;
    }

    .footer-service .call {
        font-size: 20px;
    }

    .footer-about p {
        font-size: 12px;
        line-height: 1.8;
        padding: 12px 10px !important;
    }
}

/* ---------- 超小屏 ≤ 400px ---------- */
@media (max-width: 400px) {

    .cards-group .item {
        width: 50%;
    }

    .stepflow-group > li {
        width: 33.33%;
    }

    .stepflow-group > li .title {
        font-size: 12px;
    }

    .feature-group li {
        width: 33.33%;
    }

    .navbar-cardnav li {
        width: 50%;
    }
}

/* ---------- 弹窗（layer）移动端 ---------- */
@media (max-width: 767px) {
    .layui-layer {
        width: 92% !important;
        left: 4% !important;
        max-width: 92% !important;
    }

    .layui-layer-content {
        overflow-x: hidden;
    }
}
