.zxgl_banner{height:400px}
.content{width:1200px;margin:36px auto 0;height:1000px;background:#fff}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#f5f5f5;color:#333;line-height:1.6}
.container{width:1200px;margin:40px auto;display:flex;gap:30px}
.main-content{flex:1;width:884px;}
.article{
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    padding:30px 30px 0 30px;
    background:#fff;
    border-radius:8px;
}
.con{
    margin-top: 20px;
}
.article img{
    width: 100% !important;
    height: auto !important;
    border-radius: 5px;
	margin-bottom: 20px;
}
.article p{

	    text-align: justify;
	    text-indent: 2em;
		    text-align: justify;
		    text-indent: 2em;
		    margin: 0 0 30px 0;
		}
}

.article ul{
    margin:30px 0 15px;
    padding:0;
}

.article ul li{
    list-style:none;
    font-size:20px;
    font-weight:600;
    color:#222;
    padding-left:16px;
    position:relative;
    line-height:1.6;
	    margin: 25px 0;
}

.article ul li::before{
	content: "";
    width: 8px;
    height: 8px;
    background: #cfa75b;
    position: absolute;
    left: 0;
    top: 12px;
    border-radius: 80px;
}

.sidebar{flex-shrink:0}
.bd{width:330px}
.bk{width:330px;background:#fff;padding:30px 0;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.08)}
h1,h2,h3{text-align:center}
h1{font-size:28px}
.flowchart{background:#fff8e1;padding:20px;border:1px solid #ffe082;border-radius:6px;margin:20px 0;font-size:15px}
.flowchart ul{list-style:none}
.flowchart li{margin:8px 0;padding-left:20px;position:relative}
.flowchart li:before{content:"→";position:absolute;left:0;color:#f57c00;font-weight:700}
.highlight{color:#d81e06;font-weight:700}
.section{margin:30px 0}
.images{display:flex;flex-wrap:wrap;gap:16px;margin:20px 0}
.images img{width:240px;height:180px;object-fit:cover;border-radius:6px;border:1px solid #eee}
.tips{background:#e8f5e9;padding:16px;border-left:4px solid #4caf50;margin:20px 0}
.sidebar-box{background:#fafafa;border:1px solid #eee;border-radius:8px;padding:20px;margin-bottom:24px}
.btn{display:block;background:#d32f2f;color:#fff;text-align:center;padding:14px;border-radius:6px;text-decoration:none;font-weight:700;margin:12px 0}
.btn:hover{background:#b71c1c}
.designer{text-align:center}
.designer img{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:10px}
.examples .item{margin-bottom:20px}
.examples img{width:100%;height:160px;object-fit:cover;border-radius:6px}
.orange-title{color:#ef6c00;font-size:18px;margin:16px 0 8px}
.desc{text-align:center;color:#999}
.article{margin-top:0}
.banner{color:#eb6e1b;text-align:center}
.banner h2{font-size:18px}
.banner p{font-size:15px;opacity:.95}
.form-area{padding:24px 28px 0}
.btn-group{display:flex;gap:12px;margin-bottom:20px;justify-content:center}
.btn-tag{padding:8px 18px;border-radius:30px;font-size:14px;cursor:pointer;transition:all .2s;border:1px solid #ff6b35}
.btn-tag.active,.btn-tag:hover{background:#ff6b35;color:#fff;border-color:#ff6b35}
.input-group{margin-bottom:18px;position:relative}
.input-group input{width:100%;height:52px;padding:0 16px 0 44px;border-radius:8px;font-size:16px;transition:border-color .2s;border:none;background:#f2f2f2}
.input-group input:focus{outline:0;border-color:#ff6b35;box-shadow:0 0 0 3px rgba(255,107,53,.15)}
.input-group::before{content:attr(data-icon);position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#999;font-size:18px}
.submit-btn{width:100%;height:54px;background:#ff6b35;color:#fff;border:none;border-radius:8px;font-size:18px;font-weight:600;cursor:pointer;margin-top:12px;transition:all .25s}
.submit-btn:hover{background:#f50;transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,107,53,.3)}
.ts{text-align:center;font-size:12px;color:#999;margin-top:16px;line-height:1.6}
@media (max-width:768px){.sidebar{position:fixed;bottom:0;right:0;left:0;top:auto;width:100%;border-radius:16px 16px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.15)}
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.designer-card{width:330px;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);overflow:hidden;font-family:system-ui,-apple-system,sans-serif;margin-top:10px}
.designer-card .headers{background:#f8f9fa;padding:12px 16px;border-bottom:1px solid #eee;font-size:22px;font-weight:600;color:#333}
.designer-card .headers h3{text-align:left!important}
.designer-info{display:flex;align-items:center;padding:20px 16px 12px;gap:16px}
.avatar{width:80px;height:80px;overflow:hidden;border-radius:45px;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center}
.avatar img{width:130%}
.info h4{margin:0;font-size:20px;font-weight:700;color:#1a1a1a}
.info .title{margin:4px 0 8px;font-size:14px;color:#666}
.cases-link{font-size:13px;color:#ff6b35;text-decoration:none;font-weight:500}
.cases-link:hover{text-decoration:underline}
.stats{display:flex;justify-content:space-around;padding:0 16px 16px;border-bottom:1px solid #eee}
.stat-item{text-align:center}
.stat-item strong{display:block;font-size:24px;font-weight:700;color:#ff6b35}
.stat-item span{font-size:13px;color:#888}
.styles{padding:16px;font-size:14px;color:#555;line-height:1.5;border-bottom:1px solid #eee}
.benefits{padding:16px;text-align:center}
.benefit-title{font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,#ff6b35 0,#ff8c5e 100%);padding:8px 24px;border-radius:30px;display:inline-block;margin:0 auto 14px;box-shadow:0 4px 12px rgba(255,107,53,.35);letter-spacing:1px;text-align:center}
.benefits ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 0}
.benefits li{font-size:14px;color:#444}
.contact-btn{width:100%;height:52px;background:#ff6b35;color:#fff;border:none;font-size:18px;font-weight:600;cursor:pointer;border-radius:0 0 12px 12px;transition:background .2s}
.contact-btn:hover{background:#f50}
.cases-section{padding:20px 16px;background:#fff;border-top:1px solid #eee;margin-top:10px}
.section-title{font-size:22px;font-weight:700;color:#333;margin-bottom:16px;text-align:left}
.case-item{margin-bottom:20px;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s}
.case-item:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.case-image img{width:100%;height:220px;object-fit:cover;display:block}
.case-info{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f9f9f9}
.case-tag{font-size:14px;font-weight:600;color:#ff6b35;background:rgba(255,107,53,.1);padding:4px 10px;border-radius:4px}
.detail-link{font-size:13px;color:#ff6b35;text-decoration:none;font-weight:500;transition:color .2s}
.detail-link:hover{color:#f50;text-decoration:underline}
.prev-next-section {
    display: flex;
    gap: 24px;
    margin: 40px auto 0;
    max-width: 1200px;
   padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    border-top: 1px solid #bdbbbb;
}

.pn-item {
    flex: 1;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #222;
    transition: all 0.28s ease;
    /*border: 1px solid #eee;*/
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.pn-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: #ddd;
}

.pn-item.prev {
    flex-direction: row;
}

.pn-item.next {
    flex-direction: row-reverse;
    text-align: right;
}

.pn-img-wrapper {
    width: 38%;
    height: 160px;           /* 可根据实际图片比例调整 */
    overflow: hidden;
    flex-shrink: 0;
}

.pn-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.pn-item:hover .pn-img-wrapper img {
    transform: scale(1.06);
}

.pn-text {
    flex: 1;
    padding: 10px 32px;
}

.pn-label {
    font-size: 13px;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 500;
}

.pn-title {
    font-size: 17px;
    line-height: 1.45;
    font-weight: 600;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* 响应式 - 手机上上下排列 */
@media (max-width: 768px) {
    .prev-next-section {
        flex-direction: column;
        gap: 16px;
        margin: 60px auto 80px;
    }

    .pn-item {
        flex-direction: column !important;
        text-align: left !important;
    }

    .pn-img-wrapper {
        width: 100%;
        height: 180px;
    }

    .pn-text {
        padding: 20px 24px;
    }
}


/* 推荐模块样式 */
.recommend-section {
    margin: 30px 0;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.recommend-section h3 {
    font-size: 22px;
    margin: 0 0 20px;
    color: #333;
    text-align: left;
    position: relative;
}


.recommend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}

.recommend-item {
    flex: 1 1 220px;          /* 弹性宽度，最小220px */
    max-width: 25%;           /* 桌面4列 */
    text-decoration: none;
    color: #333;
    transition: all 0.25s;
    transition: all 0.25s;
}

.recommend-item:hover {
    transform: translateY(-5px);
    /*box-shadow: 0 8px 20px rgba(0,0,0,0.1);*/
}

.item-image {
    width: 100%;
    height: 120px;            /* 固定高度，保持比例统一 */
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* 图片裁剪填满，不变形 */
    transition: transform 0.4s;
}

.recommend-item:hover .item-image img {
    transform: scale(1.08);
}

.item-title {
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;    /* 最多两行，超长省略 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 手机端：2列或1列 */
@media (max-width: 992px) {
    .recommend-item {
        max-width: 48%;       /* 两列 */
    }
}

@media (max-width: 576px) {
    .recommend-item {
        max-width: 100%;      /* 一列 */
    }
} .hero-banner {
      position: relative;
      width: 100%;
      height: 366px;
      /* 或者直接用你自己的背景图 */
      /* background: url(你的客厅深色调图.jpg) center/cover; */
  }

.overlay {
    position: absolute;
    inset: 0;
    /*background: rgba(0, 0, 0, 0.58);*/
    /* 越黑越高级，也可以调成 0.65~0.72 */
}

.content-bd {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 0 20px;
    z-index: 2;
}

.content-bd h1 {
    font-size: 52px;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: 2px;
    color: #fff;
}

.content-bd h2 {
    font-size: 28px;
    font-weight: 400;
    margin: 0 0 48px;
    opacity: 0.92;
    color: #fff;
}

.form-box {
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.input-name,
.input-phone,
.input-area {
    flex: 1;
    min-width: 220px;
    height: 56px;
    padding: 0 20px;
    border: 1px solid #aaa;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.13);
    color: white;
    font-size: 16px;
    outline: none;
    transition: all 0.2s;
}

.input-name::placeholder,
.input-phone::placeholder,
.input-area::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.input-name:focus,
.input-phone:focus,
.input-area:focus {
    border-color: #ff9800;
    background: rgba(255, 255, 255, 0.18);
}

.btn-submit {
    height: 56px;
    padding: 0 38px;
    font-size: 18px;
    font-weight: 600;
    color: white;
    background: #ff6200;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
}

.btn-submit:hover {
    background: #ff7e33;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 98, 0, 0.35);
}