html {
    font-size: clamp(42px, 4.1667vw, 80px);
}
ul, h1, h2, h3, h4, h5, h6, p {
    list-style: none;
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
}
/* ========== 导航栏样式（古风融合） ========== */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;
    background: linear-gradient(90deg, #7A3E2C, #4A2618);
    border-bottom: 2px solid #C99B6B;
    min-height: 64px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.nav-container {
    display: flex;
    align-items: baseline;
    gap: 32px;
    flex-wrap: wrap;
}
header h1 {
    font-size: 24px;
    color: #FFF2E0;
    line-height: 1.2;
    text-shadow: 0 0 5px #A55A3A;
    margin: 0;
    letter-spacing: 2px;
}
.nav-links {
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 40px;
    padding: 4px 12px;
    backdrop-filter: blur(4px);
}
.nav-links a {
    font-size: 16px;
    color: #F0E0CA;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 32px;
    transition: all 0.25s ease;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap;
}
.nav-links a:hover {
    background: #C88F5E;
    color: #2C1E16;
    box-shadow: 0 0 10px rgba(200, 143, 94, 0.6);
    transform: translateY(-1px);
}
.nav-links a.active {
    background: #D8A66B;
    color: #3E2A23;
    font-weight: bold;
    pointer-events: none;
}
header .showTime {
    font-size: 14px;
    color: #F5E6D0;
    background: rgba(0,0,0,0.2);
    padding: 6px 14px;
    border-radius: 30px;
    line-height: 1.4;
    margin-left: auto;
    white-space: nowrap;
    font-family: monospace;
}
@media (max-width: 1024px) {
    header {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px;
        gap: 10px;
    }
    .nav-container {
        justify-content: center;
        gap: 20px;
    }
    header .showTime {
        margin-left: 0;
        text-align: center;
        align-self: center;
        width: fit-content;
    }
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-links a {
        padding: 6px 16px;
        font-size: 14px;
    }
    header h1 {
        font-size: 24px;
        text-align: center;
    }
}


/* 正文 - 古风宣纸底纹 */
.t_container {
    width: 100%;
    height: 100%;
    min-width: 1360px;
    background: #F7F0E1;  /* 仿古宣纸色 */
    background-image: repeating-linear-gradient(45deg, rgba(160, 120, 80, 0.03) 0px, rgba(160, 120, 80, 0.03) 2px, transparent 2px, transparent 8px);
    position: relative;
    min-height: 756px;
}

/* 头部 - 朱砂红渐变，仿古宫灯 */
.t_header {
    width: 100%;
    height: 125px;
    background: linear-gradient(90deg, #7A3E2C, #4A2618); /* 朱砂红至深赭石 */
    position: relative;
    border-bottom: 1px solid #C99B6B;
}
.t_header span {
    color: #FFF2E0;
    font-size: 52px;
    position: absolute;
    top: 50%;
    margin-top: -0.24rem;
    left: 9%;
    text-shadow: 0 0 5px #A55A3A;
    font-family: 'Georgia', '楷体', serif;
    font-size: 48px;
}

/* 主内容区卡片容器 */
.t_main {
    width: 98%;
    height: 8.74rem;
    margin: 0 auto;
    margin-top: 0.2rem;
    margin-bottom: 0;
}

/* 左侧、右侧等卡片公用样式 */
.t_left_box,
.t_right_box,
.b_left_box,
.b_center_box,
.b_right_box {
    background: rgba(38, 28, 22, 0.82);
    backdrop-filter: blur(2px);
    border: 1px solid #B57B4B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.t_left_box {
    position: relative;
    width: 3.36rem;
    height: 4.6rem;
    display: inline-block;
    text-align: center;
}
.t_l_line,
.t_r_line {
    position: absolute;
    /* 保留原有装饰线，改为古铜色 */
    border-color: #C88F5E;
     filter: sepia(0.6) saturate(2.2) hue-rotate(154deg) brightness(1.15);
}
.t_l_line {
    top: 0;
    left: 0;
}
.t_r_line {
    bottom: 0;
    right: 0;
}
.t_center_box {
    width: 6.82rem;
    display: inline-block;
    min-width: 490px;
}
.t_top_box {
    width: 100%;
    height: 1.13rem;
    overflow: hidden;
    position: relative;
    margin-bottom: 0.2rem;
    background: rgba(38, 28, 22, 0.6);
    border: 1px solid #B57B4B;
    border-radius: 4px;
}
.t_bottom_box {
    width: 100%;
    height: 3.17rem;
    overflow: hidden;
    position: relative;
    background: rgba(38, 28, 22, 0.6);
    border: 1px solid #B57B4B;
    border-radius: 4px;
}
.t_right_box {
    display: inline-block;
    width: 7.8rem;
    height: 4.6rem;
    position: relative;
    min-width: 560px;
}
.b_left_box {
    display: inline-block;
    width: 5.9rem;
    height: 3.6rem;
    position: relative;
    min-width: 425px;
}
.b_center_box {
    display: inline-block;
    width: 6rem;
    height: 3.6rem;
    position: relative;
    min-width: 432px;
}
.b_right_box {
    display: inline-block;
    width: 6rem;
    height: 3.6rem;
    position: relative;
    min-width: 432px;
}

/* 指标卡片（订单、会员、消费） */
.t_mbox {
    width: 3rem;
    height: 1.28rem;
    position: relative;
    margin: 0 auto;
    margin-top: 0.2rem;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.t_rbox {
    background: #A5532D;   /* 朱砂红 */
}
.t_gbox {
    background: #8B5A3C;   /* 赭石色 */
}
.t_ybox {
    background: #C88F5E;   /* 古铜金 */
}
.t_mbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
}
/* 原有图标保留，但需要调整位置避免遮盖文字 */
.t_mbox i {
    position: absolute;
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
    width: 0.46rem;
    height: 0.48rem;
    opacity: 0.6;
}
.t_mbox span {
    position: static;
    font-size: 0.18rem;
    color: #EADABC;
    margin-bottom: 0.12rem;   /* 标题与数字的间距 */
    transform: none;
}
.t_mbox h2 {
    position: static;
    font-size: 0.3rem;
    color: #FFF2E0;
    margin: 0;
    transform: none;
}
/* 保留原有图标路径，但可叠加滤镜 */
.t_rbox i {
    background: url(../img/indent.png) no-repeat;
    background-size: 100% 100%;
}
.t_gbox i {
    background: url(../img/vip.png) no-repeat;
    background-size: 100% 100%;
}
.t_ybox i {
    background: url(../img/consumption.png) no-repeat;
    background-size: 100% 100%;
}

/* 导航列表 */
.t_nav {
    width: 100%;
    height: 100%;
}
.t_nav li {
    display: inline-block;
    width: 30%;
    height: 100%;
    text-align: center;
    position: relative;
}
.t_nav li span {
    font-size: 0.16rem;
    color: #D8A66B;        /* 鎏金色 */
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 25%;
}
.t_nav li h1 {
    font-size: 0.30rem;
    color: #F0E0CA;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    font-family: electronicFont, 'Georgia', monospace;
}
.t_nav li i {
    width: 1px;
    height: 100%;
    position: absolute;
    right: -0.2rem;
    background: url('../img/sper.png') no-repeat;
    background-size: 100% 100%;
    filter: sepia(0.5);
}

/* 表格样式 */
.t_table {
    font-size: 0.16rem;
    color: #EADABC;
    width: 94%;
    margin: 0 auto;
    border-spacing: 0;
    text-align: center;
    box-sizing: border-box;
    margin-top: 12%;
}
.t_table tr {
    margin: 0;
    padding: 0;
    height: 0.42rem;
}
.t_table thead tr {
    background: #5A3A2A;   /* 深檀木色 */
    color: #FFF2E0;
}
.t_table tbody tr td:first-child {
    border-left: 1px solid #B57B4B;
}
.t_table td {
    border-bottom: 1px solid #B57B4B;
    border-right: 1px solid #B57B4B;
}
.t_title {
    position: absolute;
    font-size: 0.18rem;
    color: #F0E0CA;
    left: 5%;
    top: 5%;
    font-family: 'Georgia', '微软雅黑', serif;
}

/* 右侧仪表盘区域 */
.t_b_h, .t_b_m {
    position: absolute;
    font-size: 0.16rem;
    left: 54%;
    width: 50%;
    height: 4.6rem;
}
.t_b_h span {
    position: absolute;
    color: #D9C6A7;
    top: 10%;
}
.t_b_h img {
    position: absolute;
    width: 0.53rem;
    height: 0.53rem;
    top: 6%;
    left: 24%;
    filter: sepia(0.6);
}
.t_b_h h3 {
    font-size: 0.36rem;
    color: #D8A66B;        /* 鎏金色数字 */
    position: absolute;
    left: 55%;
    top: 8%;
    width: 1rem;
    font-family: electronicFont, monospace;
}
.t_b_h h3 span {
    font-size: 0.2rem;
    position: absolute;
    left: 50%;
    top: 28%;
    color: #C2A15B;
}
.t_b_m img {
    position: absolute;
    left: 52%;
    top: 22%;
    border-top: 1px dotted #D8A66B;
    padding: 0 0.18rem;
    padding-top: 20px;
    width: 3.19rem;
    height: 1.67rem;
    filter: sepia(0.5) brightness(0.9);
}

/* 四个小指标框 */
.t_b_box, .t_b_box1, .t_b_box2, .t_b_box3 {
    width: 1.3rem;
    height: 0.56rem;
    border: 1px dotted #D8A66B;
    border-radius: 5px;
    position: absolute;
    background: rgba(38, 28, 22, 0.7);
}
.t_b_box {
    top: 68%;
    left: 56%;
}
.t_b_box span, .t_b_box1 span, .t_b_box2 span, .t_b_box3 span {
    font-size: 0.14rem;
    color: #D9C6A7;
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
}
.t_b_box i, .t_b_box1 i, .t_b_box2 i, .t_b_box3 i {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
    filter: sepia(0.6);
}
.t_b_box i {
    background: url('../img/t.png') no-repeat;
    background-size: 100% 100%;
}
.t_b_box1 i {
    background: url('../img/s.png') no-repeat;
    background-size: 100% 100%;
}
.t_b_box2 i {
    background: url('../img/j.png') no-repeat;
    background-size: 100% 100%;
}
.t_b_box3 i {
    background: url('../img/g.png') no-repeat;
    background-size: 100% 100%;
}
.t_b_box h2, .t_b_box1 h2, .t_b_box2 h2, .t_b_box3 h2 {
    font-size: 0.18rem;
    color: #F0E0CA;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translateY(-50%);
}
.t_b_box1 {
    top: 68%;
    left: 78%;
}
.t_b_box2 {
    top: 84%;
    left: 56%;
}
.t_b_box3 {
    top: 84%;
    left: 78%;
}

/* 修正 .t_bottom_box 内的占位图片：左对齐、不超出、白色 */
.t_bottom_box {
    position: relative;
    overflow: hidden;  /* 已有，确保不溢出 */
}

.t_bottom_box .placeholder-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ========== 右侧图文展示组件样式 ========== */
.t_right_box {
    position: relative;
    padding: 0.2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.1rem;
    align-items: start;
}

/* 左上：建筑名称 */
.card-title {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: 0.24rem;
    color: #EAD5B0;
    display: inline-block;
    padding: 0.05rem 0.15rem;
    border-radius: 0.1rem;
    /* border-left: 3px solid #D8A66B; */
    font-weight: bold;
    z-index: 2;
}

/* 左下：图片区域 */
.image-area {
    grid-column: 1 / 2;
    grid-row: 2/7;
    position: relative;
    width: 100%;
    height: 3rem;
    border-radius: 0.12rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.3s;
}

/* 左右箭头 */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: #EAD5B0;
    border: none;
    font-size: 0.4rem;
    width: 0.4rem;
    height: 0.8rem;
    cursor: pointer;
    border-radius: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}
.arrow:hover {
    background: #A5532D;
    color: white;
}
.left-arrow {
    left: 0.05rem;
}
.right-arrow {
    right: 0.05rem;
}

/* 右上：大号艺术字 - 占据右边剩余空间，垂直居中偏上 */
.art-word {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 1.5rem;          /* 稍微加大 */
    font-weight: bold;
    color: #D8A66B;
    text-align: center;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-family: "Georgia", "楷体", serif;
    letter-spacing: 0.1rem;
    /* 让艺术字在右侧区域垂直方向居中（或靠上） */
    align-self: center;
    margin: 0;
}

/* 右下：详细描述 - 下对齐，字号加大 */
.description {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 0.2rem;          /* 从 0.16rem 调大 */
    color: #F0E0CA;
    background: transparent;    /* 去掉背景（按您之前要求） */
    padding: 0.12rem 0 0 0;
    border-radius: 0;
    line-height: 1.5;
    text-align: justify;
    /* 下对齐：利用 flex 或 margin-top: auto */
    align-self: end;
}
/* 导航项基础样式（保持原有布局，仅增强交互） */
.t_nav li {
    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    cursor: pointer;
    border-radius: 0.08rem;
    position: relative;
    overflow: hidden;
}

/* 导航项基础样式 - 去除圆角 */
.t_nav li {
    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    cursor: pointer;
    border-radius: 0;           /* 去除圆角 */
    position: relative;
    overflow: hidden;
}

/* 悬停效果：无边框，柔和背景，自然过渡 */
.t_nav li:hover {
    background: rgba(200, 143, 94, 0.15);  /* 极淡古铜色，与深色背景融合 */
    backdrop-filter: blur(2px);            /* 轻微模糊，增加融合感 */
    transform: translateY(-2px);
  
}

/* 激活状态：更明显但依然柔和，无硬边界 */
.t_nav li.active {
    background: linear-gradient(135deg, rgba(200, 143, 94, 0.3), rgba(165, 83, 45, 0.3));
    transform: scale(1.01);
}
/* 右侧图文组件中的图片变为白色滤镜 */
#featureImage {
    filter: brightness(0) invert(1);  /* 纯白效果 */
    /* 若需要更柔和的白色（略带层次），可使用：
       filter: grayscale(1) brightness(1.8) contrast(0.8); 
    */
}
.t_right_box {
    position: relative;
    padding: 0.2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;  /* 改为自动高度，不再强制分配剩余空间 */
    gap: 0.05rem;                   /* 减小行间距 */
    align-items: start;
}
/* 底部图片区域样式 */
.bottom-image-area {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bottom-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#bottomImage {
    max-width: 100%;
    max-height: 100%;
   object-fit: cover; 
    /* transition: opacity 0.3s; */
   
}
/* 底部图片强制填满容器，保持比例，可能裁剪边缘 */
#bottomImage {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* 覆盖整个区域，居中裁剪 */
    object-position: center;
}

/* 确保父容器尺寸固定（已有 .t_bottom_box 高度 3.17rem） */
.t_bottom_box {
    position: relative;
    overflow: hidden;         /* 防止溢出 */
}
/* ========== 左侧数据卡片悬停特效 ========== */
.t_left_box .t_mbox {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* 现存民居（默认样式，可保留原有） */
.t_left_box .t_rbox {
    /* 原有样式不变，仅增加过渡 */
}

/* 官府衙门 */
.t_left_box .t_gbox {
    /* 原有样式不变 */
}

/* 古桥 */
.t_left_box .t_ybox {
    /* 原有样式不变 */
}

/* 悬停效果：放大 + 阴影 + 边框光效 + 文字微光 */
.t_left_box .t_mbox:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(216, 166, 107, 0.4) inset;
    background: rgba(60, 45, 35, 0.9);  /* 略微提亮背景 */
}