/* ============================================================
 * m-home.css — 首页专属样式（PC + 手机端）
 * 组成：
 *   1) 首页内联 <style> 抽离（banner 轮播 / PC 专属块 / lsb 悬停卡 /
 *      zh-imgText17 / zh-imgText19 / txp_tipbar / zh-footer 友情链接）
 *   2) 手机端"上部分"块：金刚区 + 德标整家 + 快速生成报价（.mzh-home-top）
 *      —— 这部分样式原借放在 m-header.css，现已迁回首页专属文件。
 * 原则：
 *   - 手机端样式只作用于 max-width:768px，PC 端完全不受影响；
 *   - 手机端类名带 .mzh- 前缀，不与你现有主题冲突；
 *   - 本文件只在首页模板加载，不影响全站其它页面。
 * 部署路径：/pub/css/m-home.css
 * ============================================================ */

/* ===== PC 端默认隐藏手机端专属块（.mzh-home-top） =====
 * 不加这条，电脑端会以"裸 HTML"冒出来；手机端由下方 @media 内的
 * display:block 覆盖本条（同优先级、靠后生效）。 */
.mzh-home-top { display: none; }

/* ===== 隐藏 ThinkPHP 调试追踪条（原模板内联 <style> 抽离） ===== */
#think_page_trace_open { display: none; }

/* ============================================================
 * 首页内联样式（PC / 手机端通用）—— 原模板 <style> 抽离
 * ============================================================ */

/* ===== 顶部轮播 banner（通用 Swiper 布局） ===== */
#banner {
    position: relative;
    width: 100%;
}
.swiper-container {
    width: 100%;
    overflow: hidden;
}
.swiper-wrapper {
    width: 1000%;
}
.swiper-slide {
    float: left;
    width: 100%;
}
.swiper-slide img {
    width: 100%;
}
.swiper-pagination {
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 0;
    text-align: center;
    z-index: 5;
}
.swiper-pagination-bullet {
    display: inline-block;
    width: 15px;
    height: 3px;
    border-radius: 5px;
    background: rgb(202, 202, 202);
    margin: 0 4px;
    cursor: pointer;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
.swiper-pagination-bullet-active {
    width: 20px;
}
/* banner5 案例轮播：每页多张，slide 宽度 10% */
.banner5 .swiper-slide {
    width: 10%;
}
.banner5 .swiper-pagination-bullet {
    width: 5px;
    height: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.banner5 .swiper-pagination-bullet-active {
    height: 25px;
}

/* ===== PC 专属块"3种家装解决方案"在小屏下列宽微调 ===== */
@media (max-width:768px) {
    .col-lg-04 { width: 58%; }
    .col-md-06 { position: relative; min-height: 1px; padding-right: 1px; padding-left: 5px; }
    .col-xs-06 { width: 57%; }
    .col-lg-14 { width: 42%; }
    .col-md-16 { position: relative; min-height: 1px; padding-right: 3px; padding-left: 2px; }
    .col-xs-16 { width: 43%; }
}

/* ===== 装修案例 hover 卡片 ===== */
.lsb-background {
    position: relative;
    height: 400px;
    float: left;
    margin-bottom: 20px;
}
.lsb {
    width: 100%;
    height: 100%;
    padding: 0 60px;
    background: rgba(0, 0, 0, .4);
    text-align: center;
    position: relative;
    transition: all .7s;
    display: block;
    overflow: hidden;
    cursor: pointer;
}
.lsb:hover .lsb-icon { margin-top: -44px; }
.lsb:hover .lsb-name { margin-top: 106px; }
.lsb:hover .lsb-span { margin-top: 28px; }
.lsb:hover .lsb-introduce { margin-top: 16px; }
.lsb:hover .lsb-href { margin-top: 32px; }
.lsb-icon {
    width: 44px;
    height: 44px;
    margin: auto;
    margin-top: 135px;
    transition: all .5s;
}
.lsb-name {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-top: 24px;
    line-height: 33px;
    transition: all .5s;
}
.lsb-span {
    width: 40px;
    height: 4px;
    background: #fff;
    transition: all .5s;
    margin: auto;
    margin-top: 24px;
}
.lsb-introduce {
    font-size: 14px;
    color: #fff;
    display: -webkit-box;
    transition: all .5s;
    margin-top: 136px;
}
.lsb-href {
    width: 144px;
    height: 40px;
    padding: 5px 0;
    border: 1px solid #fff;
    border-radius: 2px;
    text-decoration: none;
    transition: all .5s;
    margin: auto;
    margin-top: 32px;
    color: #fff;
}
.lsb-href:hover {
    background: #fff;
    color: #108ee9;
}
.lsb-href span {
    font-size: 16px;
    line-height: 22px;
}
.lsb-href .icon-jinru {
    width: 8px;
    height: 22px;
    line-height: 22px;
    font-family: iconfont !important;
    font-style: normal;
    float: right;
    color: #fff;
    font-size: 16px;
}
.lsb-href:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    font-size: 0;
}
.img-bottom {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.img-bottom img {
    height: 100%;
}

/* ===== 设计大咖（zh-imgText17） ===== */
.zh-imgText17 a { text-align: center; }
.zh-imgText17 img { width: 120px; margin-bottom: 20px; }
.zh-imgText17 .title {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #062045;
}
.zh-imgText17-content { margin-bottom: 10px; }
.zh-imgText17-content:hover .title { transition: .2s; }

/* ===== 在建工地（zh-imgText19） ===== */
.zh-imgText19-content { margin-bottom: 20px; }
.zh-imgText19-img {
    width: 100px;
    height: 100px;
    overflow: hidden;
    float: left;
}
.zh-imgText19-img img {
    transition: .3s ease-in-out;
    width: 100%;
    overflow: hidden;
}
.zh-imgText19-content .title {
    margin: 5px 0;
    display: block;
}
.zh-imgText19-content:hover .title { transition: .2s; }
.counter-item { margin-bottom: 20px; }
@media (max-width:768px) {
    .zh-imgText19-img { width: 80px; height: 80px; }
}

/* ===== 装修视频（隐藏腾讯视频 tipbar） ===== */
.txp_tipbar { display: none; }

/* ===== 友情链接（zh-footer） ===== */
.zh-footer .footer-block { margin: 10px 0; }
.zh-footer .footer-block a { padding-right: 8px; line-height: 30px; }

/* ============================================================
 * 手机端首页"上部分"块（.mzh-home-top 内：金刚区 + 德标整家 + 快速报价）
 * 以下样式只作用于 max-width:768px，PC 端完全不受影响。
 * （原借放在 m-header.css，已迁回本文件）
 * ============================================================ */
@media (max-width: 768px) {

/* 首页手机端专属块显示 / PC 专属块隐藏 */
.mzh-home-top { display: block; }
/* m-pc-only：首页里"PC 才显示"的模块（算一算表单标题、3种家装解决方案），手机端隐藏 */
.m-pc-only { display: none; }

/* ===== 二、金刚区（5 个快捷入口图标） ===== */
.mzh-nav {
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding: 16px 20px 19px;
    background-color: #fff;
}
.mzh-nav a {
    font-size: 12px;
    color: #666;
    text-decoration: none;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 图标底座：灰底圆角方块 */
.mzh-nav .mzh-nav-img {
    width: 44px;
    height: 44px;
    background-color: #f5f5f5;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}
.mzh-nav .mzh-nav-img img { height: 20px; display: inline-block; }
/* 角标（如"送方案"红标） */
.mzh-nav .mzh-zfa {
    padding: 0 3px;
    background: #ea4326;
    border-radius: 6px 6px 6px 0;
    color: #fff;
    line-height: 14px;
    font-size: 8px;
    position: absolute;
    right: -18px;
    top: -3px;
}

/* ===== 三、栏目标题（左标题+灰副标题 | 右"更多"） ===== */
.mzh-tab {
    background-color: #f5f5f5;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}
.mzh-tab .mzh-tab-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.mzh-tab .mzh-tab-title .mzh-t { font-size: 18px; display: flex; align-items: center; font-weight: 700; color: #222; }
.mzh-tab .mzh-tab-title .mzh-t .mzh-des { font-size: 12px; font-weight: 400; color: #909090; margin-left: 5px; }
.mzh-tab .mzh-tab-title .mzh-more {
    font-size: 12px;
    color: #909090;
    display: flex;
    align-items: center;
    margin-right: 7px;
    text-decoration: none;
}
.mzh-tab .mzh-tab-title .mzh-more span { margin-right: 5px; }

/* ===== 四、德标整家：三张新品海报，左右滑动轮播 ===== */
.mzh-products { padding: 17px 10px 0; margin-bottom: 0; }
.mzh-products .mzh-tab-title { margin-bottom: 19px; }
.mzh-dbswiper { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
/* 覆盖全局 swiper 基础样式（全局按 banner 的 1000% 宽写法，这里按 3 张滑动修正） */
.mzh-dbswiper .swiper-wrapper { width: auto; }
.mzh-dbswiper .swiper-slide { display: block; float: left; width: 100%; }
.mzh-dbswiper .swiper-slide img { width: 100%; display: block; }
.mzh-dbswiper .swiper-pagination { bottom: 8px; }
.mzh-dbswiper .swiper-pagination-bullet { background: #fff; opacity: .55; transition: all .3s; }
.mzh-dbswiper .swiper-pagination-bullet-active { opacity: 1; }

/* ===== 五、快速生成报价（浅色渐变卡 + 两个选项 + 输入框 + 提交按钮） ===== */
.mzh-offer { padding: 0 10px; margin-bottom: 18px; }
.mzh-offer .mzh-offer-box {
    position: relative;
    z-index: 1;
    padding: 17px 10px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eee9e1, #ece6e1);
}
/* 标题行 */
.mzh-offer .mzh-offer-box .mzh-offer-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.mzh-offer .mzh-offer-box .mzh-offer-title small { font-size: 12px; font-weight: 400; color: #909090; }
/* 老房翻新 / 新房装修 两个选项 */
.mzh-offer .mzh-btns { display: flex; justify-content: space-between; margin-top: 20px; }
.mzh-offer .mzh-btns span {
    position: relative;
    width: 160px;
    height: 44px;
    border: 1px solid #f0f1f3;
    font-size: 14px;
    font-weight: 700;
    border-radius: 5px;
    color: #3d3d3d;
    background-color: #fff;
    text-align: center;
    line-height: 42px;
    box-sizing: border-box;
    cursor: pointer;
}
/* 选中态：红边红字 + 右上角对勾角标 */
.mzh-offer .mzh-btns span.mzh-cur { border-color: #e2451e; color: #e2451e; }
.mzh-offer .mzh-btns span.mzh-cur::after {
    content: "\2713";
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 13px;
    background: #e2451e;
    color: #fff;
    font-size: 9px;
    line-height: 13px;
    text-align: center;
    border-radius: 0 4px 0 10px;
}
/* 输入框：面积 / 小区 / 手机号 每个都带独立边框 */
.mzh-offer .mzh-inputs { margin-top: 8px; }
.mzh-offer .mzh-inputs input {
    width: 100%;
    height: 44px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    outline: none;
    font-size: 12px;
    padding: 0 12px;
    box-sizing: border-box;
    display: block;
    -webkit-appearance: none;
    appearance: none;
    margin-bottom: 8px;
}
/* 提交按钮：橙红渐变（参考站 btnStyle） */
.mzh-offer .mzh-submit {
    width: 100%;
    height: 44px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-top: 14px;
    border: 3px solid transparent;
    border-radius: 5px;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,.25);
    background-image:
        linear-gradient(90deg, #fc7730, #ea4426),
        linear-gradient(180deg, #ea4426, #fc7730);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 面积输入框右侧 ㎡ 后缀 */
.mzh-offer .mzh-m2 { position: relative; }
.mzh-offer .mzh-m2::after {
    content: "㎡";
    position: absolute;
    right: 12px;
    top: 0;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    color: #999;
    pointer-events: none;
}

} /* @media (max-width:768px) 结束 —— 以上手机端样式只作用于手机端 */