@charset "utf-8";
/* CSS Document */

/*================================================================smallnav=============================================================================*/
.smallnav {
    width: 100%;
    height: 40px;
    background: #3266A0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.smallnav .cont {
    width: 1200px;
    height: 40px;
    line-height: 40px;
    color: #CCC;
    margin: 0 auto;
    color: #FFF;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}

.smallnav .cont a {
    color: #FFF;
    text-decoration: none;
}

.smallnav .cont a:hover {
    text-decoration: none;
}

/*================================================================top=============================================================================*/
.top {
    width: 100%;
    height: 70px;
    /* 增加高度 */
    background: #fff;
    /* 改为白色背景 */
    border-bottom: 1px solid #eee;
    /* 增加分割线 */
}

.top .cont {
    width: 1200px;
    height: 70px;
    color: #CCC;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top .cont .l {
    margin-top: 0;
    display: flex;
    align-items: flex-end;
    /* Align text bottom with logo */
}

.top .cont .l .nav {
    margin-left: 20px;
    font-size: 14px;
    color: #555;
    line-height: normal;
    padding-bottom: 5px;
    /* Fine-tune alignment */
}

.top .cont .l .nav a {
    color: #555;
    text-decoration: none;
}

.top .cont .l .nav a:hover {
    color: #3266A0;
    text-decoration: none;
}

.top .cont .l .nav a:first-child {
    font-weight: bold;
}

.top .cont .l .nav span {
    margin: 0 5px;
}

/* Search Bar */
.top .cont .m {
    margin: 0;
}

.top .cont .m form {
    display: flex;
    align-items: center;
}

.top .cont .m .kw {
    border: 2px solid #3266A0;
    height: 32px;
    padding: 0 10px;
    width: 300px;
    outline: none;
    font-size: 14px;
    border-right: none;
    color: #333;
    border-radius: 4px 0 0 4px;
}

.top .cont .m .submit {
    background: #3266A0;
    color: #fff;
    border: none;
    height: 36px;
    width: 70px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 0 4px 4px 0;
    font-weight: bold;
}

.top .cont .m .submit:hover {
    background: #2857a0;
}

.top .cont .r {
    display: none;
    /* Hide old Weixin placeholder */
}

/*================================================================content=============================================================================*/
body {
    background-color: #f5f7fa;
    /* 全局淡灰背景，营造空间感 */
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

.content {
    width: 1200px;
    margin: 20px auto;
    /* 去除旧的边框和背景 */
    border: none;
    background: none;
    animation: fadeInUp 0.6s ease-out;

    /* 改用 Flex 布局解决对齐和 sticky 边界问题 */
    display: flow-root;
    /* 建立 BFC，确保内部浮动被包含，同时作为 Flex 的替代/补充 */
    display: flex;
    /* 保持 Flex 用于左右布局 */
    justify-content: space-between;
    align-items: flex-start;
    /* 关键：防止子元素高度拉伸，保证 sticky 生效 */
    position: relative;
    /* 确保 z-index 上下文 */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* SEO友好且无障碍的隐藏类 (替代 left:-9999px) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.content .contL {
    /* Flex下无需浮动 */
    width: 910px;
    /* 适配 1200px 布局 (1.2倍) */
    background: #fff;
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    /* 轻柔阴影 */
    padding-bottom: 30px;
    margin-bottom: 0;
    /* 修正：去除底部外边距，确保Flex容器高度与左侧卡片视觉高度一致，防止右侧悬浮超出 */
    border: none;
    /* 去除旧边框 */
}

.content .contL .cont {
    width: 840px;
    /* 适配 1200px 布局 */
    margin: 0 auto;
    position: relative;
    padding-top: 20px;
}

.content .contL .cont .renzheng {
    position: absolute;
    z-index: 100;
    /* 降低层级避免遮挡交互 */
    left: 500px;
    top: 60px;
    opacity: 0.9;
    /* 稍微透明 */
}

.content .contL .tj {
    width: 910px;
    margin: 10px auto;
}

/* 广告位样式保留但微调 */
.content .contL .tj .t {
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    font-weight: bold;
    background: #F7F7F7;
    padding-left: 14px;
    border: 1px solid #eee;
    border-left: none;
    border-right: none;
}

.content .contL .tj .c {
    width: 890px;
    margin: 5px auto;

}

/* 标题区域 */
.contL .c1 {
    margin: 20px 0 10px 0;
}

.contL .c1 h1 {
    font-size: 28px;
    font-weight: 600;
    /* 优化字重 */
    color: #222;
    line-height: 1.4;
    display: block;
    /* 独占一行 */
}

/* 信息编号行 */
.contL .c2 {
    color: #888;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.contL .c2 a {
    color: #888;
    margin-left: 10px;
}

.contL .c2 a:hover {
    color: #3266A0;
}



/* === 核心信息区重构 (Hero Section) === */
.contL .c3 {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.hero-info-grid {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f9fbfd 100%);
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 40px 0;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(50, 102, 160, 0.05);
    /* Premium soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-info-grid:hover {
    box-shadow: 0 15px 35px rgba(50, 102, 160, 0.08);
    /* Lift effect on hover */
}

/* Specialized widths for Hero Items */
.hero-item {
    text-align: center;
    border-right: 1px solid #f0f0f0;
    padding: 0 15px;
    position: relative;
}

.hero-item.price-item {
    flex: 1.6;
    /* Give significantly more space to Price */
}

.hero-item.area-item {
    flex: 0.9;
    /* Area needs less space */
}

.hero-item.btn-item {
    flex: 1.2;
    border-right: none;
}

.hero-item .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #8898aa;
    margin-bottom: 12px;
}

.hero-item .label .icon {
    margin-right: 6px;
    color: #b1b1b9;
    vertical-align: middle;
}

.hero-item .value-group {
    display: flex;
    /* Changed from inline-flex to flex */
    flex-direction: column;
    /* Default to column to stack if necessary */
    align-items: center;
    /* Center align */
    justify-content: center;
}

/* Explicitly stack for price to handle long text nicely */
.price-item .value-group {
    align-items: center;
}

.area-item .value-group {
    flex-direction: row;
    /* Area key-value is usually short, keep row */
    align-items: baseline;
}

.hero-item .value {
    font-size: 30px;
    /* Reduced further from 34px */
    color: #FF5A00;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    white-space: nowrap;
}

.hero-item .unit {
    font-size: 14px;
    color: #999;
    margin-top: 5px;
    font-weight: 400;
}

.area-item .unit {
    margin-top: 0;
    margin-left: 6px;
    font-size: 16px;
    color: #8898aa;
}

/* 电话按钮优化 */
.showTel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85%;
    margin: 0 auto;
    height: 52px;
    line-height: normal;
    background: linear-gradient(135deg, #FF6B00 0%, #FF4500 100%);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 20px rgba(255, 69, 0, 0.25);
    position: relative;
    overflow: hidden;
}

.showTel-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(255, 69, 0, 0.35);
    background: linear-gradient(135deg, #FF7A1A 0%, #FF5500 100%);
}

.showTel-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(255, 69, 0, 0.25);
}

.showTel-btn .icon-btn {
    margin-right: 8px;
}

.showTel-btn a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 属性网格列表 */
.attr-grid {
    display: flex;
    flex-wrap: wrap;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px 20px;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Added shadow per user request */
}

.attr-item {
    width: 50%;
    min-height: 42px;
    /* Ensure consistent minimum height */
    padding: 6px 0;
    /* Add padding for multi-line comfort */
    font-size: 15px;
    color: #444;
    display: flex;
    align-items: flex-start;
    /* Align to top for multi-line */
}

.attr-item .lbl {
    color: #8898aa;
    width: 90px;
    display: flex;
    align-items: center;
    height: 24px;
    /* Fix label height to guard against flex stretch */
    margin-top: 2px;
    /* Micro adjustment to align with text baseline */
}

.attr-item .lbl .icon-small {
    margin-right: 8px;
    color: #bac2c9;
}

.attr-item .val {
    flex: 1;
    /* Removed truncation properties to allow wrapping */
    word-break: break-all;
    line-height: 1.6;
    /* Comfortable reading height for text block */
    color: #555555;
    font-weight: 500;
    padding-right: 15px;
    /* Avoid text hitting the right edge too hard */
}


/* === 电话联系弹窗 (Contact Modal) === */
.tel-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Black mask */
    z-index: 9999;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.tel-modal {
    background: #fff;
    width: 340px;
    max-width: 90%;
    border-radius: 16px;
    padding: 30px 25px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: zoomIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.tel-modal .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #999;
    font-size: 24px;
    line-height: 30px;
    border-radius: 50%;
    transition: background 0.2s;
}

.tel-modal .close-btn:hover {
    background: #f5f5f5;
    color: #333;
}

.tel-modal h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 25px;
    font-weight: bold;
}

.tel-modal .contact-info {
    margin-bottom: 25px;
}

.tel-modal .contact-row {
    font-size: 16px;
    color: #999;
    /* Lightened from #555 */
    margin-bottom: 10px;
}

.tel-modal .contact-row strong {
    color: #333;
    font-weight: 600;
}

.tel-modal .tel-btn-large {
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    background: linear-gradient(135deg, #FF6B00 0%, #FF4500 100%);
    color: #fff !important;
    /* Pure white text per request */
    font-size: 24px;
    font-weight: bold;
    border-radius: 28px;
    text-decoration: none;
    box-shadow: 0 8px 16px rgba(255, 69, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: Arial, sans-serif;
    /* Clear number font */
}

.tel-modal .tel-btn-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px rgba(255, 69, 0, 0.4);
}

.tel-modal .tips {
    margin-top: 20px;
    font-size: 13px;
    color: #333;
    /* Darkened from #999 */
    background: #f9f9f9;
    padding: 10px;
    border-radius: 6px;
    line-height: 1.5;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* === 举报弹窗 (Report Modal) === */
.report-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.58);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.report-modal {
    width: 520px;
    max-width: 92%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 38px rgba(0, 0, 0, 0.22);
    padding: 22px 22px 18px;
    position: relative;
    animation: zoomIn 0.22s ease;
}

.report-modal .close-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #8b95a1;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    transition: all .2s ease;
}

.report-modal .close-btn:hover {
    background: #f4f7fb;
    color: #4d5f74;
}

.report-modal h3 {
    margin: 0;
    font-size: 20px;
    color: #2e3f54;
    line-height: 1.2;
}

.report-modal .report-desc {
    margin: 12px 0 14px;
    font-size: 14px;
    color: #6f7f92;
    line-height: 1.6;
}

.report-modal .report-textarea-wrap {
    border: 1px solid #d7e1ee;
    border-radius: 8px;
    background: #fbfdff;
    padding: 10px 12px 6px;
}

.report-modal textarea {
    width: 100%;
    min-height: 132px;
    border: 0;
    outline: none;
    resize: vertical;
    background: transparent;
    color: #31445a;
    line-height: 1.6;
    font-size: 14px;
}

.report-modal .report-count {
    text-align: right;
    font-size: 12px;
    color: #8b95a1;
}

.report-modal .report-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.report-modal .report-actions button {
    min-width: 92px;
    height: 36px;
    border-radius: 5px;
    border: 1px solid #cfd9e8;
    background: #fff;
    color: #506175;
    cursor: pointer;
}

.report-modal .report-actions .btn-submit {
    border-color: #3266a0;
    background: #3266a0;
    color: #fff;
}

.report-modal .report-actions .btn-submit:disabled {
    opacity: .78;
    cursor: default;
}

@media (max-width: 768px) {
    .report-modal {
        padding: 18px 16px 14px;
    }

    .report-modal h3 {
        font-size: 18px;
    }

    .report-modal textarea {
        min-height: 120px;
    }
}


/* 旧的 c3 样式清理 (保留部分以防万一，但不再主要使用) */
/* .contL .c3 ul... */


/* contL c4 (图文混排辅助区) */
.contL .c4 {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.info_cf ul {
    overflow: hidden;
    margin-bottom: 15px;
    list-style: none;
    /* 去除默认样式 */
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.info_cf li {
    line-height: 36px;
    /* Increased for better readability */
    font-size: 15px;
    /* Matched with attr-item */
    color: #444;
    display: flex;
    align-items: center;
}

/* 双列布局 */
.bCCC li,
.bCCC3 li {
    width: 50%;
    /* display: inline-block; removed due to float */
    box-sizing: border-box;
    border-bottom: 1px dashed #f5f5f5;
    /* Subtle separator */
}

/* 单列布局 */
.bCCC2 li {
    width: 100%;
    display: block;
    border-bottom: 1px dashed #f5f5f5;
}

/* Mobile 适配: 单列 */
@media (max-width: 600px) {

    .bCCC li,
    .bCCC3 li {
        width: 100%;
    }
}

.info_cf li span {
    color: #8898aa;
    /* Unified label color */
    margin-right: 8px;
    display: inline-block;
    min-width: 90px;
    /* Increased alignment width */
    font-weight: normal;
}

.info_cf li strong {
    font-weight: 600;
    color: #333;
}

.info_cf li a {
    color: #3266A0;
    margin-right: 5px;
}

.info_cf li a:hover {
    text-decoration: underline;
    color: #FF5A00;
}

/* 通用链接颜色优化 */
.content a:not(.showTel-btn a) {
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}

.content a:hover {
    color: #3266A0;
}

.content .c2 a,
.hero-item a,
.attr-item a {
    color: #333;
    /* 具体的颜色覆盖 */
}

/* 地图容器 */
#cont6 {
    width: 100%;
    height: 480px;
    /* 增加高度 */
    border: 1px solid #eee;
    background-color: #f9f9f9;
    /* 加载前的背景 */
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    /* 确保不被遮挡 */
    border-radius: 8px;
    /* 圆角一致性 */
    overflow: hidden;
    /* 防止地图内容溢出圆角 */
}

/* 推荐列表样式优化 - 增加边距 */
/* 推荐列表样式优化 (.infoTZ) - Synced with keyWordList.css */
.infoTZ {
    width: 1200px;
    margin: 40px auto 20px;
    padding-top: 0;
}

.infoTZ ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    list-style: none;
}

.infoTZ ul li {
    width: 230px;
    /* 1200 / 5 = 240, set to 230px for gap */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    margin-bottom: 25px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.infoTZ ul li:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.infoTZ ul li img {
    width: 100%;
    height: 173px;
    object-fit: cover;
    border: none;
    display: block;
}

.infoTZ ul li .team {
    padding: 12px 15px 5px;
    font-size: 12px;
    color: #999;
    display: flex;
    justify-content: space-between;
}

.infoTZ ul li .title {
    padding: 0 15px 15px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.infoTZ ul li a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.infoTZ ul li a:hover {
    text-decoration: none;
}

/* contL c4 (图文混排辅助区 - 实际上是房源图片区，通常id为cont4) */
/* 优化图片展示为网格布局 */
.contL .c5 .cont4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 双列布局 */
    gap: 15px;
    padding: 10px 0;
}

.contL .c5 .cont4 img {
    width: 100%;
    height: 240px;
    /* 固定高度，保持整齐 */
    object-fit: cover;
    /* 裁剪适应 */
    border-radius: 6px;
    margin-bottom: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: zoom-in;
}

.contL .c5 .cont4 img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.contL .c5 .cont1 {
    background: none;
    border-bottom: 2px solid #3266A0;
    height: 36px;
}

.contL .c5 .cont1 a,
.contL .c5 .cont1 h2 {
    background: #f5f5f5;
    color: #666;
    border: none;
    border-radius: 4px 4px 0 0;
    /* 上圆角 */
    margin-right: 5px;
    line-height: 36px;
    height: 36px;
    font-weight: normal;
}

.contL .c5 .cont1 .ck {
    background: #3266A0;
    color: #fff;
    font-weight: bold;
    border: none;
}

.contL .c5 .cont2 p {
    color: #444;
    /* 字体颜色优化 */
    margin: 0;
    padding: 15px 5px;
    line-height: 1.8;
    /* 增加行高，提升阅读体验 */
    font-size: 15px;
    text-align: justify;
    /* 两端对齐 */
    min-height: 125px;
}

.contL .c5 .cont2 p a {
    text-decoration: none;
    color: #3266A0;
    /* 保持链接色或自定义 */
}


/*================================================================contR=============================================================================*/
.content .contR {
    /* Flex下无需浮动 */
    width: 270px;
    /* 适配 1200px 布局 */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    padding: 20px;
    box-sizing: border-box;
    /* 包含 padding */

    /* Sticky Sidebar - 智能跟随 */
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 80px;
    /* 距离顶部导航栏的距离 */
    z-index: 10;
}

/* 用户信息名片 */
.user-card {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.user-card .row {
    line-height: 28px;
    font-size: 14px;
    color: #333;
    margin-bottom: 6px;
    padding-left: 10px;
    border-left: 3px solid #eee;
    /* 名片式装饰 */
}

.user-card .row span {
    color: #999;
    margin-right: 6px;
    font-size: 13px;
    border: none;
}

/* 有头像时的新居中名片样式 - 进阶版 */
.user-card.has-avatar {
    text-align: center;
    padding: 10px 0 20px 0;
    border-left: none;
}

.user-card.has-avatar .row {
    border-left: none;
    padding-left: 0;
}

.user-card.has-avatar .avatar-wrap {
    margin: 0 auto;
    position: relative;
    display: inline-block;
}

.user-card.has-avatar .avatar-wrap img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(50, 102, 160, 0.12), 0 0 0 3px rgba(255, 255, 255, 0.8);
    background-color: #f7f9fa;
    border: none;
}

.user-card.has-avatar .user-info {
    margin-top: 14px;
}

.user-card.has-avatar .user-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 昵称与标签间距 */
}

.user-card.has-avatar .user-name {
    font-weight: bold;
    font-size: 17px;
    color: #2c3e50;
    letter-spacing: 0.5px;
}

.user-card.has-avatar .user-badge {
    display: inline-block;
    padding: 2px 10px;
    background-color: #f0f4f8;
    color: #3266A0;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.content .contR .cont1 {
    padding-left: 0;
    /* 重置缩进 */
    margin: 0;
    font-size: 13px;
    line-height: 26px;
    color: #4B4B4B;
}

.content .contR dt {
    color: #333;
    font-size: 15px;
    margin: 15px 0 10px 0;
    line-height: 24px;
    border-bottom: none;
    font-weight: bold;
    border-left: 3px solid #3266A0;
    /* 左侧强调条 */
    padding-left: 10px;
}

.content .contR dd {
    margin: 0 -20px;
    padding: 0 20px;
    line-height: 28px;
    width: auto;
    color: #666;
    border-bottom: 1px dashed #f5f5f5;
    transition: background-color 0.2s;
}

.content .contR dd:hover {
    background-color: #f5f9ff;
}

.content .contR dd a:hover {
    color: #3266A0;
    text-decoration: none;
}




/* 移动端响应式适配 */
@media (max-width: 767px) {

    /* 容器宽度 */
    .content,
    .top .cont,
    .smallnav .cont,
    .infoTZ,
    .footer,
    .page-nav.sticky-nav {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* 左右栏堆叠 */
    .content .contL,
    .content .contR {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    /* L栏修正 */
    .content .contL {
        padding: 15px;
        box-sizing: border-box;
    }

    .content .contL .cont,
    .content .contL .tj,
    .content .contL .tj .c {
        width: 100%;
        /* 自适应 */
    }

    /* R栏修正 */
    .content .contR {
        margin-top: 20px;
        position: static;
        /* 移动端取消吸顶 */
    }

    /* Hero 格子修正 */
    .hero-info-grid {
        flex-direction: column;
    }

    .hero-item {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 15px 0;
    }

    .hero-item:last-child {
        border-bottom: none;
    }

    /* 属性区双列展示 */
    .attr-item {
        width: 50%;
        /* 保持双列 */
    }

    /* 图片 Grid 单列 */
    .contL .c5 .cont4 {
        grid-template-columns: 1fr;
        /* 单列 */
    }

    /* 推荐列表 */
    .infoTZ ul {
        justify-content: center;
    }

    .infoTZ ul li {
        width: 46%;
        /* 两列 */
        margin: 0 2% 15px 2%;
    }
}

.content .contR .xt {
    width: 100%;
    margin-top: 20px;
}


/*==================推荐列表优化==================*/
.infoTZ {
    width: 1200px;
    padding-top: 20px;
    margin: 0 auto;
}

.infoTZ ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.infoTZ ul li {
    width: 228px;
    /* 调整宽度，一行5个 (1200/5=240, 预留间距) */
    margin-bottom: 20px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    /* 卡片阴影 */
    transition: all 0.3s ease;
}

.infoTZ ul li:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.infoTZ ul li img {
    width: 100%;
    height: 160px;
    /* 增加高度 */
    object-fit: cover;
    /* 保证填充 */
    border: none;
}

.infoTZ ul li .info-box {
    padding: 12px;
}

.infoTZ ul li .team {
    font-size: 12px;
    color: #999;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.infoTZ ul li .title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    height: 42px;
    /* 限制2行 */
}


/*================================================================footer=============================================================================*/


/* Viewer.js 样式保持之前的优化 */
.viewer-custom-btn {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 100px;
    line-height: 100px;
    margin-top: -50px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    z-index: 2021;
    user-select: none;
    transition: background-color 0.3s;
    border-radius: 4px;
    font-family: Arial, sans-serif;
}

.viewer-custom-btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.viewer-custom-prev {
    left: 10px;
}

.viewer-custom-next {
    right: 10px;
}

@media (max-width: 768px) {
    .viewer-custom-btn {
        width: 40px;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        margin-top: -30px;
    }
}

.viewer-title {
    display: none !important;
}

.viewer-custom-counter {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    letter-spacing: 1px;
}

/* 详情页吸顶导航栏样式 - 保持之前优化 */
.page-nav {
    width: 100%;
    background-color: #fcfcfc;
    border-bottom: 1px solid #eee;
    margin-bottom: 25px;
    border-radius: 4px;
    /* 轻微圆角 */
    z-index: 1000;
    height: 40px;
}

.page-nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.page-nav li {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    /* 预留高亮条 */
    transition: all 0.3s;
}

.page-nav li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #555;
    font-size: 14px;
    text-decoration: none;
}

.page-nav li:hover,
.page-nav li.active {
    background-color: #eef6fc;
    border-bottom-color: #3266A0;
    /* 底部高亮条 */
}

.page-nav li:hover a,
.page-nav li.active a {
    color: #3266A0;
    font-weight: bold;
}


/* 吸顶固定状态 */
.page-nav.sticky-nav {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    margin-bottom: 0;
    z-index: 999;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.95);
    /* 毛玻璃感准备 */
    -webkit-backdrop-filter: blur(10px);
    /* Safari */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #ddd;
    border-radius: 0 0 8px 8px;
    /* 下部圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.page-nav.sticky-nav li {
    height: 50px;
    line-height: 50px;
}

.page-nav.sticky-nav li a {
    font-size: 15px;
}


@media (max-width: 1000px) {
    .page-nav.sticky-nav {
        width: 100%;
        left: 0;
        transform: none;
        border-radius: 0;
    }

    .content,
    .top .cont,
    .smallnav .cont {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
}

/* 解决吸顶导航遮挡标题问题 */
.section-title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    padding-left: 12px;
    border-left: 4px solid #3266A0;
    margin: 30px 0 15px 0;
    line-height: 1.2;
    scroll-margin-top: 120px;
    /* 关键属性：点击锚点时预留顶部空间 */
}

/* Footer Styles - Aligned with index.css */
.footer {
    width: 100%;
    background: #fff;
    border-top: 1px solid #e7e7e7;
    padding: 40px 0;
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.8;
    color: #666;
}

.footer .cont {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: #666;
    /* Ensure text color inherits correctly */
}

.footer .c1 {
    margin-bottom: 15px;
}

.footer .c1 a {
    margin: 0 8px;
    color: #555;
    text-decoration: none;
}

.footer .c1 a:hover {
    color: #FF5A00;
    text-decoration: none;
}

.footer .c1 .sep {
    color: #dcdcdc;
}

.footer .c2 {
    color: #999;
    font-size: 13px;
    font-family: Arial, sans-serif;
    padding: 0;
}

.footer .c2 a {
    color: #999;
    text-decoration: none;
}

.footer .c2 a:hover {
    color: #FF5A00;
    text-decoration: none;
}

/* Price Unit Style (Moved from inline) */
#jg2 {
    color: #666;
    font-size: 14px;
    font-weight: normal;
}

/* ================== Footer Data Styles (From Index) ================== */
/* ================== Footer Data Styles (Refactored to DL/DT/DD) ================== */
.mt10 {
    margin-top: 10px;
}

.mb10 {
    margin-bottom: 10px;
}

.footerData1 {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid #eef2f7;
    padding: 15px 20px;
    overflow: hidden;
    margin-top: 20px;
}

.footerData1 dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    position: relative;
}

.footerData1 dt {
    order: 1;
    padding: 10px 20px;
    cursor: pointer;
    background: #f5f5f5;
    border-radius: 4px 4px 0 0;
    margin-right: 5px;
    transition: all 0.2s;
    position: relative;
    z-index: 0;
    /* Inactive tabs sit behind the content border */
}

.footerData1 dt:hover {
    background: #e8e8e8;
}

.footerData1 dt.active {
    background: #3266A0;
    z-index: 2;
    /* Active tab sits above the content border */
}

.footerData1 dt h3 {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin: 0;
}

.footerData1 dt.active h3 {
    color: #fff;
}

.footerData1 dd {
    order: 2;
    width: 100%;
    display: none;
    margin: 0;
    padding-top: 15px;
    /* Spacing inside content */
    border-top: 2px solid #3266A0;
    /* The separator line */
    margin-top: -2px;
    /* Pull up to overlap with tabs */
    z-index: 1;
    min-height: 150px;
}

.footerData1 dd.active {
    display: block;
}

.footerData1 dd a {
    display: inline-block;
    padding: 6px 12px;
    margin: 4px;
    background: #f8f9fa;
    border-radius: 4px;
    color: #666;
    font-size: 13px;
    transition: all 0.2s;
    text-decoration: none;
}

.footerData1 dd a:hover {
    background: #3266A0;
    color: #fff;
    text-decoration: none;
}

/* ================== Layout Fixes ================== */
.footerData0 {
    width: 1200px;
    margin: 0 auto;
    display: flow-root;
    /* 建立 BFC，防止内部可能存在的浮动溢出 */
}

.search-history {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 70px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 280px;
    overflow-y: auto;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    color: #666;
    font-weight: 600;
}

.clear-history {
    color: #3266A0;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
}

.clear-history:hover {
    color: #2850a0;
    text-decoration: underline;
}

.history-list {
    padding: 0;
    margin: 0;
}

.history-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s, color 0.2s;
}

.history-item:last-child {
    border-bottom: none;
}

.history-item i {
    font-size: 14px;
    color: #999;
    margin-right: 8px;
}

.history-item .keyword {
    flex: 1;
    font-size: 14px;
    color: #555;
}

.history-item:hover,
.history-item.active {
    background: #f0f7ff;
    color: #3266A0;
}

.history-item:hover .keyword,
.history-item.active .keyword {
    color: #3266A0;
}

.history-item:hover i,
.history-item.active i {
    color: #3266A0;
}

/* Search Suggestions Dropdown */
.search-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 70px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 320px;
    overflow-y: auto;
}

.suggestions-list {
    padding: 0;
    margin: 0;
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s, color 0.2s;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item i {
    font-size: 14px;
    color: #999;
    margin-right: 8px;
    flex-shrink: 0;
}

.suggestion-item .keyword {
    flex: 1;
    font-size: 14px;
    color: #555;
}

.suggestion-item .keyword strong {
    color: #3266A0;
    font-weight: 600;
}

.suggestion-item .count {
    font-size: 12px;
    color: #999;
    margin-left: 10px;
    flex-shrink: 0;
}

.suggestion-item:hover,
.suggestion-item.active {
    background: #f0f7ff;
}

.suggestion-item:hover .keyword,
.suggestion-item.active .keyword {
    color: #3266A0;
}

.suggestion-item:hover i,
.suggestion-item.active i {
    color: #3266A0;
}

.suggestion-item:hover .count,
.suggestion-item.active .count {
    color: #3266A0;
}


/* Nav2 (Filter/Search Info Area) */
.nav2 {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    padding: 20px 25px;
    margin-bottom: 20px;
    color: #333;
}

.nav2 .filter-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px dashed #eee;
    align-items: center;
}



/* Footer */
.footer {
    width: 100%;
    background: #fff;
    border-top: 1px solid #e7e7e7;
    padding: 40px 0;
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.8;
    color: #666;
}

.footer .cont {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: #666;
}

.footer .c1 {
    margin-bottom: 15px;
}

.footer .c1 a {
    margin: 0 8px;
    color: #555;
}

.footer .c1 a:hover {
    color: #FF5A00;
}

/* Footer Data */
.footerData1 {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid #eef2f7;
    padding: 15px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.footerData1 dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    position: relative;
}

.footerData1 dt {
    order: 1;
    padding: 10px 20px;
    cursor: pointer;
    background: #f5f5f5;
    border-radius: 4px 4px 0 0;
    margin-right: 5px;
    transition: all 0.2s;
    position: relative;
    z-index: 0;
}

.footerData1 dt.active {
    background: #3266A0;
    z-index: 2;
}

.footerData1 dt h3 {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin: 0;
}

.footerData1 dt.active h3 {
    color: #fff;
}

.footerData1 dd {
    order: 2;
    width: 100%;
    display: none;
    margin: 0;
    padding-top: 15px;
    border-top: 2px solid #3266A0;
    margin-top: -2px;
    z-index: 1;
    min-height: 120px;
}

.footerData1 dd.active {
    display: block;
}

.footerData1 dd a {
    display: inline-block;
    padding: 6px 12px;
    margin: 4px;
    background: #f8f9fa;
    border-radius: 4px;
    color: #666;
    font-size: 13px;
    transition: all 0.2s;
}

.footerData1 dd a:hover {
    background: #3266A0;
    color: #fff;
}





/* ========================================
   Mobile Responsive Styles
   ======================================== */

@media screen and (max-width: 768px) {

    /* Layout */
    .content,
    .smallnav .cont,
    .top .cont {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* Top Navigation */
    .top {
        height: auto;
        padding: 10px 0;
    }

    .top .cont {
        flex-direction: column;
        align-items: stretch;
    }

    .top .cont .l {
        justify-content: center;
        margin-bottom: 10px;
    }

    .top .cont .l img {
        height: 40px;
        width: auto;
    }

    .top .cont .l .nav {
        display: none;
    }

    /* Search Form */
    .top .cont .m form {
        width: 100%;
    }

    .top .cont .m .kw {
        width: 100%;
        height: 40px;
        font-size: 16px;
    }

    .top .cont .m .submit {
        height: 44px;
        width: 80px;
    }



    /* Search Results */
    .lists .list3 {
        flex-direction: column;
    }

    .lists .list3 .listR {
        width: 100%;
        margin-top: 20px;
    }

    /* List Items */
    .list-item {
        flex-direction: column;
        padding: 15px;
    }

    .list-item .l {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .list-item .m {
        width: 100%;
    }

    .list-item .m .t {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .list-item .m .c {
        font-size: 13px;
        height: auto;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .list-item .r {
        width: 100%;
        height: auto;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
    }

    .jq,
    .my {
        font-size: 16px;
        text-align: left;
    }

    .mj {
        text-align: right;
        margin-top: 0;
    }

    /* Footer */
    .footer {
        padding: 20px 0;
        font-size: 12px;
    }

    .footer .cont {
        width: 100%;
    }

    /* Small Nav */
    .smallnav {
        display: none;
    }

    /* Back to Top Button */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        left: auto;
        margin-left: 0;
        width: 40px;
        height: 40px;
    }

    /* Search History Dropdown */
    .search-history-dropdown {
        right: 80px;
    }
}

/* Tablet Portrait */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    .content,
    .smallnav .cont,
    .top .cont,
    .footer .cont {
        width: 750px;
    }

    .list-item .l {
        width: 200px;
        height: 150px;
    }
}

/* Auto-Complete Suggestions */
.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 70px;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 200;
    max-height: 300px;
    overflow-y: auto;
}

.suggest-item {
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s;
}

.suggest-item i {
    color: #999;
    margin-right: 10px;
    font-size: 12px;
}

.suggest-item:hover,
.suggest-item.active {
    background: #f8f9fa;
    color: #3266A0;
}

.suggest-count {
    margin-left: auto;
    font-size: 12px;
    color: #999;
}

/* Touch-friendly enhancements */
@media (hover: none) and (pointer: coarse) {

    .hot-tag,
    .history-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .list-item:hover {
        background: transparent;
    }
}

/* ================== Recommendations (.infoTZ) - Synced with list.css ================== */
.infoTZ {
    width: 1200px;
    margin: 40px auto 20px;
    padding-top: 0;
}

.infoTZ ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    list-style: none;
}

.infoTZ ul li {
    width: 225px !important;
    /* Adjusted to prevent wrapping */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    margin-bottom: 25px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.infoTZ ul li:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.infoTZ ul li img {
    width: 100%;
    height: 173px;
    object-fit: cover;
    border: none;
    display: block;
}

.infoTZ ul li .team {
    padding: 12px 15px 5px;
    font-size: 12px;
    color: #999;
    display: flex;
    justify-content: space-between;
}

.infoTZ ul li .title {
    padding: 0 15px 15px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    height: 42px;
    overflow: hidden;
}

.infoTZ ul li a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.infoTZ ul li a:hover {
    text-decoration: none;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.top .cont .m .kw {
    border: 2px solid #3266A0;
    height: 32px;
    padding: 0 10px;
    width: 300px;
    outline: none;
    font-size: 14px;
    border-radius: 4px 0 0 4px;
}

.top .cont .m .submit {
    background: #3266A0;
    color: #fff;
    border: none;
    height: 36px;
    width: 70px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 0 4px 4px 0;
    font-weight: bold;
}

/* Enforce 1200px fixed width for Desktop >= 768px */
@media screen and (min-width: 768px) {
    body {
        min-width: 1200px;
        overflow-x: auto;
    }

    .content,
    .top .cont,
    .smallnav .cont,
    .infoTZ,
    .footer .cont {
        width: 1200px !important;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}