/* 昆山房产频道首页 —— 参照门户通房产模板（HouseTemplate）版式 */

.hs-wrap {
    width: 1200px;
    margin: 0 auto;
    padding: 12px 0 24px;
    font-size: 14px;
    color: #333;
}

/* ===== hero ===== */
.hs-hero {
    background: linear-gradient(120deg, #b5121b 0%, #d81f26 45%, #e8552a 100%);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.hs-hero-in {
    width: 1200px;
    box-sizing: border-box;
    padding: 26px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.hs-hero .lt .big {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.hs-hero .lt .sub {
    font-size: 13px;
    opacity: .9;
    margin: 8px 0 14px;
}

.hs-search {
    display: flex;
    gap: 8px;
}

.hs-search input {
    width: 320px;
    height: 40px;
    border: 0;
    border-radius: 2px;
    padding: 0 12px;
    font-size: 13px;
    color: #333;
}

.hs-search button {
    height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 2px;
    background: #ff6a00;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.hs-search .map {
    height: 40px;
    line-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 2px;
    color: #fff;
    font-size: 13px;
}

.hs-hero .rt {
    display: flex;
    gap: 28px;
    text-align: center;
}

.hs-hero .rt .num b {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.hs-hero .rt .num span {
    font-size: 12px;
    opacity: .85;
}

/* ===== 分类条 ===== */
.hs-tabbar {
    background: #fff;
    border-radius: 4px;
    padding: 14px 18px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 34px;
}

.hs-tabbar .grp {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}

.hs-tabbar .grp em {
    font-style: normal;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    padding-right: 4px;
    border-right: 1px solid #eee;
}

.hs-tabbar .grp a {
    color: #777;
}

.hs-tabbar .grp a:hover {
    color: #d81f26;
}

/* ===== 资讯三块 ===== */
.hs-card {
    background: #fff;
    border-radius: 4px;
    padding: 16px 18px;
    margin-bottom: 10px;
}

.hs-top {
    display: flex;
    gap: 18px;
    align-items: stretch;
}

.hs-top .pics {
    width: 300px;
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hs-top .pitem {
    position: relative;
    display: block;
    height: 132px;
    border-radius: 3px;
    overflow: hidden;
    background: #f2f2f2;
}

.hs-top .pitem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hs-top .pitem .ph {
    display: block;
    height: 100%;
    background: linear-gradient(135deg, #f7e9e9, #eee);
}

.hs-top .pitem em {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-style: normal;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, .6));
    padding: 18px 8px 8px;
    line-height: 1.4;
}

.hs-top .headline {
    flex: 1;
    min-width: 0;
}

.hs-top .ht {
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 8px;
}

.hs-top .ht b {
    font-size: 18px;
    color: #333;
}

.hs-top .ht span {
    font-size: 12px;
    color: #bbb;
}

.hs-top .headline ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-top .headline li {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 30px;
    font-size: 13px;
}

.hs-top .headline li a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #444;
}

.hs-top .headline li a:hover {
    color: #d81f26;
}

.hs-top .headline li em {
    font-style: normal;
    font-size: 12px;
    color: #c9c9c9;
}

.hs-top .forum {
    width: 300px;
    flex: 0 0 300px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 3px;
    padding: 12px 14px;
    box-sizing: border-box;
}

.hs-top .forum .ht {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.hs-top .forum .ht b {
    font-size: 15px;
    color: #333;
}

.hs-top .forum .ht .more {
    font-size: 12px;
    color: #bbb;
}

.hs-top .forum ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-top .forum li {
    line-height: 30px;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hs-top .forum li a {
    color: #555;
}

.hs-top .forum li a:hover {
    color: #d81f26;
}

/* ===== 绿色装饰条 ===== */
.hs-strip {
    height: 64px;
    line-height: 64px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    letter-spacing: 4px;
    border-radius: 4px;
    margin-bottom: 10px;
    background: repeating-linear-gradient(135deg, #4ec7b1 0, #4ec7b1 14px, #46bfa9 14px, #46bfa9 28px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}

/* ===== 四列资讯 ===== */
.hs-cols {
    display: flex;
    gap: 20px;
}

.hs-cols .ccol {
    flex: 1;
    min-width: 0;
}

.hs-cols .ct {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.hs-cols .ct b {
    font-size: 16px;
    color: #333;
    padding-left: 8px;
    border-left: 3px solid #4ec7b1;
    line-height: 16px;
}

.hs-cols .ct span {
    font-size: 12px;
    color: #bbb;
}

.hs-cols .ccol ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-cols .ccol li {
    line-height: 28px;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hs-cols .ccol li a {
    color: #555;
}

.hs-cols .ccol li a:hover {
    color: #d81f26;
}

/* ===== 区块标题 ===== */
.hs-sec {
    margin-bottom: 10px;
}

.hs-sect {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.hs-sect h3 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0;
    padding-left: 10px;
    border-left: 4px solid #d81f26;
    line-height: 20px;
}

.hs-sect .stabs {
    display: flex;
    gap: 6px;
    margin-left: 10px;
}

.hs-sect .stabs a {
    font-size: 13px;
    color: #666;
    padding: 4px 12px;
    border-radius: 2px;
}

.hs-sect .stabs a.on {
    background: #fdeaea;
    color: #d81f26;
    font-weight: 700;
}

.hs-sect .stabs a:hover {
    color: #d81f26;
}

.hs-sect .smore {
    margin-left: auto;
    font-size: 12px;
    color: #999;
}

/* ===== 新盘 ===== */
.hs-newhouse {
    display: flex;
    gap: 10px;
}

.hs-newhouse .cal {
    width: 210px;
    flex: 0 0 210px;
    background: #fff;
    border-radius: 4px;
    padding: 14px;
    box-sizing: border-box;
}

.hs-newhouse .calt {
    font-size: 14px;
    color: #333;
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 8px;
}

.hs-newhouse .cal ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-newhouse .cal li {
    padding: 8px 0;
    border-bottom: 1px dashed #f2f2f2;
}

.hs-newhouse .cal li a {
    display: block;
    font-size: 13px;
    color: #444;
    line-height: 20px;
}

.hs-newhouse .cal li a:hover {
    color: #d81f26;
}

.hs-newhouse .cal li em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: #c9c9c9;
}

.hs-newhouse .calb {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #999;
}

.hs-newhouse .calb b {
    color: #d81f26;
    font-size: 16px;
    margin-left: 4px;
}

.plotgrid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.plot {
    display: block;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    padding-bottom: 10px;
}

.plot .pic {
    height: 130px;
    background: #f2f2f2;
    overflow: hidden;
}

.plot .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.plot .pic .ph {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 18px;
    color: #c0c0c0;
}

.plot .nm {
    font-size: 14px;
    color: #333;
    font-weight: 700;
    padding: 8px 10px 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.plot .pr {
    font-size: 14px;
    color: #d81f26;
    padding: 0 10px;
}

.plot .tg {
    display: flex;
    gap: 6px;
    padding: 6px 10px 0;
}

.plot .tg span {
    font-size: 12px;
    color: #888;
    background: #f5f5f5;
    border-radius: 2px;
    padding: 1px 6px;
}

.plot .tg .on {
    background: #fdeaea;
    color: #d81f26;
}

/* ===== 二手房 ===== */
.hs-second {
    display: flex;
    gap: 10px;
}

.hs-second .flt {
    width: 210px;
    flex: 0 0 210px;
    background: #fff;
    border-radius: 4px;
    padding: 12px 14px;
    box-sizing: border-box;
}

.hs-second .fgrp {
    padding-bottom: 10px;
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 10px;
}

.hs-second .ft {
    font-size: 13px;
    color: #333;
    font-weight: 700;
    padding-left: 8px;
    border-left: 3px solid #4ec7b1;
    line-height: 14px;
    margin-bottom: 8px;
}

.hs-second .fx {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.hs-second .fx a {
    font-size: 12px;
    color: #666;
    padding: 3px 8px;
    border-radius: 2px;
    background: #f6f6f6;
}

.hs-second .fx a.on {
    background: #d81f26;
    color: #fff;
}

.hs-second .fx a:hover {
    color: #d81f26;
}

.hs-second .fx a.on:hover {
    color: #fff;
}

.hs-second .fpub {
    display: block;
    height: 34px;
    line-height: 34px;
    text-align: center;
    background: #ff6a00;
    color: #fff;
    border-radius: 3px;
    font-size: 13px;
}

.dealgrid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.deal {
    display: block;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    padding-bottom: 10px;
}

.deal .pic {
    height: 120px;
    background: #f4f4f4;
    overflow: hidden;
}

.deal .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.deal .pic .ph {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 12px;
    color: #bfbfbf;
    text-align: center;
    line-height: 1.6;
}

.deal .nm {
    font-size: 13px;
    color: #333;
    padding: 8px 10px 2px;
    line-height: 1.4;
    height: 40px;
    overflow: hidden;
}

.deal .pr {
    font-size: 15px;
    color: #ff6a00;
    padding: 0 10px;
    font-weight: 700;
}

.deal .pr em {
    font-style: normal;
    font-size: 12px;
    color: #ff6a00;
    font-weight: 400;
}

.deal .in {
    font-size: 12px;
    color: #999;
    padding: 4px 10px 0;
}

.deal .tg {
    padding: 6px 10px 0;
}

.deal .tg span {
    font-size: 12px;
    color: #777;
    background: #f5f5f5;
    border-radius: 2px;
    padding: 1px 6px;
}

/* ===== 右侧悬浮 ===== */
.hs-fixed {
    position: fixed;
    right: 24px;
    bottom: 90px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hs-fixed a {
    width: 56px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    text-align: center;
    color: #666;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.hs-fixed a i {
    display: block;
    font-style: normal;
    font-size: 18px;
    line-height: 22px;
    color: #4ec7b1;
}

.hs-fixed a span {
    display: block;
    font-size: 12px;
    line-height: 16px;
}

.hs-fixed a:hover {
    color: #d81f26;
    border-color: #d81f26;
}

/* ============ 房产详情页（旧站楼盘详情版式） ============ */
.hd-nav {
    background: #2eb872;
}

.hd-nav-in {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 2px;
}

.hd-nav-in a {
    display: block;
    line-height: 40px;
    padding: 0 20px;
    color: #fff;
    font-size: 14px;
}

.hd-nav-in a.cur,
.hd-nav-in a:hover {
    background: #1fa25f;
}

.hd-wrap {
    width: 1200px;
    margin: 0 auto;
    padding: 10px 0 24px;
    font-size: 14px;
    color: #333;
}

.hd-crumb {
    font-size: 12px;
    color: #999;
    padding: 6px 0 10px;
}

.hd-crumb span {
    margin-right: 8px;
}

.hd-crumb a {
    color: #777;
}

.hd-crumb em {
    font-style: normal;
    color: #ccc;
    margin: 0 6px;
}

.hd-crumb b {
    color: #333;
    font-weight: 400;
}

.hd-card {
    background: #fff;
    border-radius: 2px;
    padding: 16px 18px;
    margin-bottom: 10px;
}

/* 头卡 */
.hd-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 18px 16px;
}

.hd-head h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hd-head h1 .tg-on {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    background: #2f7ff2;
    border-radius: 2px;
    padding: 2px 6px;
}

.hd-head h1 .tg-te {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    background: #ff6a00;
    border-radius: 2px;
    padding: 2px 6px;
}

.hd-head .sub {
    font-size: 12px;
    color: #999;
}

.hd-head .hrt {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 12px;
    color: #888;
    padding-top: 6px;
}

.hd-head .hrt a {
    color: #666;
}

.hd-head .hrt i {
    font-style: normal;
    color: #2eb872;
    margin-right: 3px;
}

.hd-head .hrt .vv {
    color: #999;
}

.hd-head .hrt .fav {
    background: #2eb872;
    color: #fff;
    padding: 5px 12px;
    border-radius: 2px;
}

/* tab */
.hd-tabs {
    display: flex;
    gap: 2px;
    padding: 0 18px;
    background: #fff;
    border-radius: 2px;
    margin-bottom: 10px;
}

.hd-tabs a {
    display: block;
    line-height: 44px;
    padding: 0 22px;
    font-size: 15px;
    color: #444;
}

.hd-tabs a.on {
    background: #2eb872;
    color: #fff;
    font-weight: 700;
}

.hd-tabs a:hover {
    color: #2eb872;
}

.hd-tabs a.on:hover {
    color: #fff;
}

/* 主区 */
.hd-main {
    display: flex;
    gap: 24px;
}

.hd-main .gal {
    width: 560px;
    flex: 0 0 560px;
}

.hd-main .gal .big {
    height: 330px;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hd-main .gal .big img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hd-main .gal .big .ph,
.plot .pic .ph,
.deal .pic .ph {
    font-size: 13px;
    color: #bbb;
}

.hd-main .thumbs {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}

.hd-main .thumbs .th {
    width: 96px;
    height: 64px;
    background: #f4f4f4;
    border: 1px solid transparent;
    overflow: hidden;
}

.hd-main .thumbs .th.on {
    border-color: #2eb872;
}

.hd-main .thumbs .th img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hd-main .thumbs .th .ph {
    display: block;
    height: 100%;
}

.hd-main .thumbs .tname {
    font-size: 12px;
    color: #bbb;
    margin-left: 6px;
    max-width: 86px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-main .info {
    flex: 1;
    min-width: 0;
}

.pr-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f2f2f2;
}

.pr-line .lb {
    font-size: 13px;
    color: #888;
}

.pr-line b {
    font-size: 30px;
    color: #f04134;
    font-weight: 700;
}

.pr-line em {
    font-style: normal;
    font-size: 13px;
    color: #f04134;
}

.pr-line .pr-r {
    margin-left: auto;
    display: flex;
    gap: 14px;
}

.pr-line .pr-r .g {
    font-size: 12px;
    color: #2eb872;
}

.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-top: 10px;
    font-size: 13px;
    color: #333;
}

.bar.blue {
    background: #eaf2fd;
}

.bar.blue.light {
    background: #2f7ff2;
    color: #fff;
}

.bar.blue.light span {
    color: #fff;
}

.bar b {
    color: #f04134;
    font-size: 15px;
}

.btn-b {
    display: inline-block;
    background: #2f7ff2;
    color: #fff;
    font-size: 12px;
    padding: 5px 14px;
    border-radius: 2px;
}

.bar.blue.light .btn-b {
    background: #fff;
    color: #2f7ff2;
}

.kv {
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 6px 10px;
    margin: 14px 0 0;
    font-size: 13px;
}

.kv dt {
    color: #999;
}

.kv dd {
    color: #333;
    margin: 0;
}

.kv .mini {
    color: #2eb872;
    font-size: 12px;
    margin-left: 6px;
}

.hotline {
    margin-top: 14px;
    border: 1px solid #f7c6c0;
    background: #fff7f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
}

.hotline span {
    color: #f04134;
    font-size: 15px;
    font-weight: 700;
}

.hotline .qr {
    background: #ff6a00;
    color: #fff;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 2px;
}

/* 置业顾问 */
.hd-adviser .ah {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}

.hd-adviser .ah em {
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    color: #999;
    margin-left: 8px;
}

.hd-adviser .ah i {
    font-style: normal;
    font-size: 12px;
    color: #2eb872;
    margin-left: 10px;
}

.hd-adviser .abox {
    width: 170px;
    height: 96px;
    border: 1px dashed #ddd;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 13px;
    gap: 4px;
}

.hd-adviser .plus {
    font-size: 26px;
    color: #ccc;
    line-height: 1;
}

/* 区块标题 */
.ch {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.ch b {
    font-size: 17px;
    color: #333;
    padding-left: 9px;
    border-left: 3px solid #2eb872;
    line-height: 16px;
}

.ch a {
    margin-left: auto;
    font-size: 12px;
    color: #bbb;
}

.ch .sub {
    font-size: 12px;
    color: #bbb;
}

.ch .chip {
    font-size: 12px;
    color: #fff;
    background: #7ecfa4;
    padding: 2px 8px;
    border-radius: 2px;
    margin-left: 8px;
}

/* 楼盘信息表 */
.hd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.hd-table td {
    border: 1px solid #f0f0f0;
    padding: 9px 12px;
}

.hd-table .k {
    background: #fafafa;
    color: #888;
    width: 88px;
}

.hd-table .v {
    color: #333;
    width: 260px;
}

/* 户型 */
.hxgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.hx {
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    padding: 10px;
}

.hx .hpic {
    height: 150px;
    background: #f4f5f7 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='70'><rect x='6' y='6' width='78' height='58' fill='none' stroke='%23d8dae0' stroke-width='3'/><rect x='40' y='30' width='10' height='34' fill='none' stroke='%23d8dae0' stroke-width='3'/></svg>") center no-repeat;
}

.hx .hbadge {
    display: inline-block;
    background: #2eb872;
    color: #fff;
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 2px;
    margin-top: 8px;
}

.hx .hname {
    font-size: 13px;
    color: #333;
    margin-top: 6px;
}

.hx .hname i {
    font-style: normal;
    color: #999;
}

.hxempty {
    grid-column: 1 / -1;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    background: #fafafa;
    border-radius: 2px;
    font-size: 13px;
}

/* 三列 */
.hd-three {
    display: flex;
    gap: 10px;
}

.hd-three > .hd-card {
    flex: 1;
    min-width: 0;
    margin-bottom: 10px;
}

.hd-three .empty {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 13px;
}

.newslist .nitem {
    border-bottom: 1px dashed #f4f4f4;
    padding: 6px 0 10px;
}

.newslist .nd {
    font-size: 12px;
    color: #2eb872;
    margin-bottom: 4px;
}

.newslist .nt {
    display: block;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}

.newslist .nt:hover {
    color: #f04134;
}

.newslist .nc {
    font-size: 12px;
    color: #999;
    line-height: 1.6;
    margin-top: 2px;
}

.sub-box {
    background: #fff6f5;
    border-radius: 2px;
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 12px;
    color: #f04134;
    text-align: center;
}

.sub-box div {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.sub-box span {
    color: #999;
    display: block;
    margin-bottom: 6px;
}

.sub-box a {
    display: inline-block;
    background: #f04134;
    color: #fff;
    padding: 4px 14px;
    border-radius: 2px;
}

.plist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plist li {
    display: flex;
    gap: 8px;
    line-height: 30px;
    font-size: 13px;
}

.plist li a {
    flex: 1;
    min-width: 0;
    color: #444;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.plist li em {
    font-style: normal;
    font-size: 12px;
    color: #bbb;
}

.cfoot {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #bbb;
}

/* 全景 / 走势 */
.pano {
    height: 220px;
    background: #f6f7f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 13px;
}

.chart {
    display: flex;
    gap: 10px;
    padding: 10px 0 4px;
}

.chart .yl {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
    color: #bbb;
    height: 200px;
}

.chart .cv {
    flex: 1;
    min-width: 0;
    height: 200px;
}

.chart svg {
    width: 100%;
    height: 100%;
    display: block;
}