@charset "utf-8";
/* 
 * 园区频道主样式表 - Refactored 2025-12-27
 * 包含首页、列表页、详情页样式
 * 整合了 Index.css, Yuanqu Specifics, 及 Mobile 适配
 */

/* ================== 1. Reset & Base ================== */
body {
    background: #f5f7fa;

    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #3266A0;
    text-decoration: none;
}

ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
form,
dd,
dt,
dl {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 
 * 图片样式：排除客服浮窗组件(.backtoTop)，避免与kf.css冲突 
 * 修复日期：2025-12-27
 */
img {
    border: none;
}

/* 内容区域图片样式，不影响客服浮窗 */
#content img,
.content img,
main img,
article img,
.box1 img,
.box2 img,
.lists img,
.infolist1 img,
.contL img,
.slideBox img,
.swiper img,
#imgshow img,
.footer img {
    max-width: 100%;
    height: auto;
    display: block;
}

* {
    box-sizing: border-box;
}

/* ================== 2. Utilities ================== */
/* Margin & Padding */
.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mb10 {
    margin-bottom: 10px;
}

.ml10 {
    margin-left: 10px;
}

.mr10 {
    margin-right: 10px;
}

.p10 {
    padding: 10px;
}

.p15 {
    padding: 15px;
}

.p0 {
    padding: 0 !important;
}

.h10 {
    height: 10px;
}

/* Display */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

/* Text Alignment */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* 
 * 无数据提示样式 - 修复日期: 2025-12-30
 * 功能：当列表页无数据时显示提示文字
 * 修复：使提示框与右侧推荐模块底部对齐
 */
.text-center-50 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #999;
    box-sizing: border-box;
}

/* Font Size */
.fs14 {
    font-size: 14px;
}

/* Width */
.w40 {
    width: 40% !important;
}

/* Flex Utilities */
.flex-center-v {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Border */
.noborder {
    border: none !important;
}

.flex1 {
    flex: 1;
}

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

/* Width Utilities */
.w1200-center {
    width: 1200px;
    margin: 20px auto;
}

/* Layout Columns */
.col-left {
    width: 899px;
}

.col-right {
    width: 290px;
}

/* ================== 5. Layout Area ================== */
#content,
.content,
main#content {
    width: 1200px;
    margin: 20px auto;
    animation: fadeInUp 0.5s ease-out;
}

/* 详情页需要flex布局来支持左右列 - 2025-12-27修复 
 * 使用更精确的选择器区分：
 * - 详情页：main.content 包含 article.contL + aside.contR，需要横向flex
 * - 列表页：main.content 包含 .nav2 + .lists + .pagelist，需要块级布局
 */

/* 默认: 列表页使用块级布局 */
main.content {
    display: block;
}

/* 详情页布局：分开编写选择器以兼容不支持 :has() 的旧版浏览器 */
main.content.detail-page {
    display: flex;
    justify-content: space-between;
    gap: 20px; padding: 0 !important;
}
main.content:has(article.contL) {
    display: flex;
    justify-content: space-between;
    gap: 20px; padding: 0 !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================== 6. Components: Boxes & Lists ================== */
/* Box Style 1 (Standard) */
.box1 {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid #eef2f7;
    overflow: hidden;
    margin-bottom: 0;
    /* Handled by mt classes */
}

.box1 .t {
    height: 48px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-bottom: 1px solid #eef2f7;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box1 .t .l h2 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.box1 .t .r a {
    font-size: 13px;
    color: #999;
}

.box1 .t .r a:hover {
    color: #FF5A00;
}

/* Box Style 2 (With Blue Top Border) */
.box2 {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid #eef2f7;
    overflow: hidden;
}

.box2 .t {
    height: 50px;
    border-bottom: 2px solid #3266A0;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.box2 .t .l h2 {
    font-size: 18px;
    font-weight: 600;
    color: #3266A0;
}

.box2 .t .r a {
    color: #999;
    font-size: 13px;
}

.box2 .t .r a:hover {
    color: #FF5A00;
}

/* Slider & Form (Home) */
.slidebox-container {
    height: 380px;
    position: relative;
}

/* Swiper 轮播图样式 - 2025-12-27 */
/* 功能：首页园区展示轮播图，图片铺满+底部半透明标题条 */
#imgshow {
    width: 100%;
    height: 100%;
}

#imgshow .swiper-slide {
    position: relative;
    height: 380px;
    display: flex;
    flex-direction: column;
}

/* 图片容器 - 铺满轮播框 */
#imgshow .slide-img {
    flex: 1;
    overflow: hidden;
    position: relative;
}

#imgshow .slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

#imgshow .swiper-slide:hover .slide-img img {
    transform: scale(1.05);
}

/* 标题链接 - 图片下方半透明条 */
#imgshow .slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 12px 15px;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    transition: background 0.3s ease;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 10;
}

#imgshow .slide-caption:hover {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
}

/* Swiper 分页器样式 */
#imgshow .swiper-pagination {
    bottom: 50px !important;
}

#imgshow .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.7;
    width: 8px;
    height: 8px;
}

#imgshow .swiper-pagination-bullet-active {
    background: #FF5A00;
    opacity: 1;
}

/* Enterprise Form */
.ent-form {
    height: 380px;
}

.ent-form .cont {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.weituo .form-cont {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-row {
    display: flex;
    align-items: center;
}

.form-row .lbl {
    width: 40px;
    text-align: right;
    color: #666;
    font-size: 14px;
    margin-right: 8px;
}

.input1 {
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
    transition: border 0.2s;
}

.input1:focus,
select:focus {
    border-color: #3266A0;
    outline: none;
}

select {
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 5px;
}

.radio-group {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.radio-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-group input {
    margin-right: 4px;
}

.area-group {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #666;
}

.input-small {
    width: 50px;
    text-align: center;
}

.btn-submit {
    width: 100%;
    height: 40px;
    background: linear-gradient(135deg, #FF6B00, #FF4500);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(255, 69, 0, 0.2);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(255, 69, 0, 0.3);
}

/* Lists - Photo Grids (Infolist1) */
.infolist1 .cont1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important; /* 2026-05-21 [修改说明] 恢复经典的4列布局，完美对称两行8个图片 - By Antigravity */
    gap: 15px;
    padding: 15px;
}

.infolist1 .cont1 li {
    background: #fff;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.infolist1 .cont1 li:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.infolist1 .cont1 li .ti {
    position: relative;
    height: 150px !important; /* 2026-05-21 [修改说明] 还原图片容器高度为经典150px黄金比例 - By Antigravity */
    overflow: hidden;
}

.infolist1 .cont1 li img {
    width: 100%;
    height: 150px !important; /* 2026-05-21 [修改说明] 还原图片高度为经典150px黄金比例 - By Antigravity */
    object-fit: cover;
    transition: transform 0.5s;
}

.infolist1 .cont1 li:hover img {
    transform: scale(1.05);
}

.infolist1 .cont1 li .tt {
    padding: 10px;
    height: 40px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.infolist1 .cont1 li .tt a {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.infolist1 .cont1 li .tt a:hover {
    color: #3266A0;
}

/* 2026-06-06 修复：移动端下园区推荐与国家级园区图片列表一行显示一个 - By 99cfw.com */
@media screen and (max-width: 767px) {
    .infolist1 .cont1 {
        grid-template-columns: 1fr !important;
    }
    .infolist1 .cont1 li {
        width: 100% !important;
    }
}

/* Lists - Text Links (Cont2) */
.infolist1 .cont2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 15px;
    margin-bottom: 15px;
    border-top: 1px solid #eee;
    margin-top: 15px;
    padding-top: 15px;
}

.infolist1 .cont2 li {
    width: 48%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #f5f5f5;
    height: 36px;
    transition: background 0.2s;
    padding: 0 5px;
}

.infolist1 .cont2 li:hover {
    background: #f8f9fa;
    border-radius: 4px;
}

.infolist1 .cont2 li .l {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px;
    position: relative;
}

.infolist1 .cont2 li .l::before {
    content: "";
    width: 4px;
    height: 4px;
    background: #3266A0;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.infolist1 .cont2 li a:hover {
    color: #3266A0;
}

/* Lists - Recommendations (Right Sidebar) */
/* 让列表项背景延伸到边框：分开编写以确保 .p0 在旧版浏览器生效 */
.infoCont.p0 {
    padding: 0 !important;
}
.infoCont.p10:has(.tjyq) {
    padding: 0 !important;
}

.tjyq {
    padding: 0;
}

.tjyq li {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f9f9f9;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tjyq li a {
    display: block;
    width: 100%;
    padding: 0 10px;
}

.tjyq li:hover {
    background: #f8f9fa;
}

.tjyq li a:hover {
    color: #3266A0;
}

/* Lists - Hot Cities */
.hot-cities {
    line-height: 1.8;
}

.hot-cities a {
    display: inline-block;
    color: #666;
    font-size: 14px;
    margin-right: 15px;
    margin-bottom: 5px;
    padding: 2px 8px;
    transition: all 0.2s;
    text-decoration: none;
    border-radius: 4px;
}

.hot-cities a:hover {
    color: #3266A0;
    background: #f5f7fa;
}

/* ================== 7. List Page Specifics (list.asp) ================== */
.nav2 {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid #eef2f7;
    padding: 20px;
    margin-bottom: 20px;
}

.filter-row {
    display: flex;
    border-bottom: 1px dashed #eee;
    padding: 10px 0;
}

.filter-row:last-child {
    border-bottom: none;
}

.s1 {
    width: 70px;
    font-weight: 600;
    text-align: right;
    padding-right: 15px;
    color: #333;
    line-height: 28px;
}

.s2 {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.s2 a {
    padding: 2px 12px;
    border-radius: 4px;
    color: #666;
    line-height: 24px;
    transition: all 0.2s;
}

.s2 a:hover {
    background: #eff6ff;
    color: #3266A0;
}

.s2 a.ck {
    background: #3266A0;
    color: #fff;
}

.s3 {
    margin-top: 10px;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.s3>div {
    white-space: nowrap;
    font-weight: 600;
    color: #333;
    margin-right: 10px;
}

.s3 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    flex: 1;
}

.s3 ul li {
    background: #fff;
    border: 1px solid #ddd;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #3266A0;
}

.s3 ul li a {
    width: 14px;
    height: 14px;
    background: url('/qietu/img/close.png') no-repeat center;
    background-size: 8px;
    margin-left: 5px;
    opacity: 0.6;
    cursor: pointer;
}

.s3 ul li a:hover {
    opacity: 1;
}

.clear-all,
.filter-reset {
    margin-left: 10px;
    color: #999;
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    transition: all 0.2s;
}

.clear-all:hover,
.filter-reset:hover {
    color: #fff;
    background: #3266A0;
    border-color: #3266A0;
}

/* List Container */
/* 
 * 列表页主容器样式 - 修复日期: 2025-12-27
 * 问题描述: 原 .lists 容器缺少宽度定义，导致内部flex布局失效，
 *           列表项被挤压，分页符位置错乱
 */
.lists {
    width: 100%;
    background: #fff;
    border-radius: 8px;

    /* overflow: hidden;  Removed to allow sticky sidebar */
    background: transparent;
}

.lists .list1 {
    border-bottom: 2px solid #3266A0;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: #FFFFFF;
}

.lists .list1 ul li {
    display: inline-block;
}

.lists .list1 ul li a {
    display: block;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    background: #f5f5f5;
    border-radius: 6px 6px 0 0;
    color: #666;
    margin-right: 5px;
}

.lists .list1 ul li.ck a {
    background: #3266A0;
    color: #fff;
}

.lists .list2 {
    background: #f2f2f2;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e6e6e6;
    height: auto;
    line-height: normal;
}

.lists .list2 h1,
.lists .list2 h2 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.lists .list2 .L2 a {
    color: #3266A0;
    font-size: 12px;
}

/* 
 * 列表区域容器 - 修改日期: 2025-12-30
 * 修复：将 align-items 改为 stretch 使左右容器等高
 * 效果：无数据时提示框底部与右侧推荐模块底部对齐
 */
.lists .list3 {
    display: flex;
    gap: 20px; padding: 0 !important;
    align-items: stretch;
}

.lists .listL {
    flex: 1;
    border-radius: 8px;
    padding: 0;
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.lists .listR {
    width: 300px;
    flex-shrink: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

/* List Items */
/* List Items - Updated 2025-12-28 */
.lists .listL .list-item,
.list-item {
    display: flex;
    padding: 20px 20px !important;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.list-item:hover {
    background: #fafafa;
}

.list-item .l {
    width: 220px;
    height: 160px;
    flex-shrink: 0;
    margin-right: 20px;
}

.list-item .l img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #eee;
}

.list-item .m {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.list-item .t a {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.list-item .t a:hover {
    color: #3266A0;
}

.list-item .c {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 10px 0;
    height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
}

.tags-row {
    display: flex;
    gap: 8px;
}

.tags-row .qy {
    background: #eef2f7;
    color: #3266A0;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
}

.list-item .sx {
    font-size: 13px;
    color: #999;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.list-item .sx .split {
    margin: 0 10px;
    color: #ddd;
}

.pagelist {
    padding: 40px 0;
    text-align: center;
    width: 100%;
}

/* 分页符列表样式 - 确保水平排列 */
.pagelist ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagelist ul li {
    display: inline-block;
}

.pagelist a,
.pagelist font,
.pagelist span,
.pagelist b {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin: 0 4px;
    color: #555;
    background: #fff;
    font-weight: normal;
    font-size: 14px;
}

.pagelist a:hover,
.pagelist font,
.pagelist span.current,
.pagelist b {
    background: #3266A0;
    color: #fff;
    border-color: #3266A0;
    text-decoration: none;
}

.pagelist .n {
    color: #999;
    border-color: #eee;
}

.pagelist a font,
.pagelist a span,
.pagelist a b {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    color: inherit;
    display: inline;
}

/* ================== 8. Detail Page Specifics (cont.asp) ================== */
.content article.contL {
    width: 900px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    padding: 30px;
}

.content aside.contR {
    width: 280px;
}

.contL .c1 h1 {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
    line-height: 1.3;
}

.contL .c4 {
    background: #f9fafb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.bCCC {
    display: flex;
    flex-wrap: wrap;
}

.bCCC li {
    width: 50%;
    padding: 8px 0;
    font-size: 15px;
    color: #555;
    display: flex;
    align-items: center;
}

.bCCC li img {
    width: auto;
    height: 18px;
}

.bCCC li span {
    color: #888;
    width: 80px;
    flex-shrink: 0;
}

.bCCC li.w100 {
    width: 100%;
}

.contL .c5 h2 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    border-left: 4px solid #3266A0;
    padding-left: 12px;
    margin-bottom: 15px;
}

.contL .c5 .cont1 {
    margin: 30px 0 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 10px;
}

.contL .c5 .cont1 a {
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.contL .c5 .cont1 a.ck,
.contL .c5 .cont1 a:hover {
    color: #3266A0;
    border-bottom-color: #3266A0;
}

.contL .c5 p,
.contL .c5 .park-desc {
    line-height: 1.8;
    font-size: 16px;
    color: #444;
    margin-bottom: 20px;
    text-align: justify;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
    overflow: hidden;
}

.contL .cont4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; padding: 0 !important;
    margin-bottom: 30px;
}

.contL .cont4 img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#cont6 {
    width: 100%;
    height: 400px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden; /* 2026-05-17 防止天地图内部元素溢出撑破父容器布局 */
}

/* Detail Page Right Sidebar Form */
.contR .box1 .cont {
    padding: 15px;
}

.contR .box1 .cont form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contR .box1 .cont .mb10 {
    margin-bottom: 10px;
}

.contR .box1 .cont .input1 {
    width: 100%;
}

.contR .box1 .cont select {
    width: 100%;
}

.contR .box1 .cont label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 15px;
}

.contR .box1 .cont label input[type="radio"] {
    margin-right: 5px;
}

/* User Actions (Login/Reg) */
.user-actions-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.action-row {
    display: flex;
    gap: 10px;
}

.btn-login,
.btn-reg {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    transition: transform .2s, box-shadow .2s;
}

.btn-login {
    background: linear-gradient(135deg, #3266A0, #2557a0);
    box-shadow: 0 4px 10px rgba(50, 102, 160, 0.2);
}

.btn-reg {
    background: linear-gradient(135deg, #FF6B00, #FF4500);
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.2);
}

.btn-login:hover,
.btn-reg:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* ================== 9. Footer ================== */



/* 排除客服浮窗组件链接，避免与kf.css冲突 */
.footer a:not(.backtoTop a):not(.backtoTop-new a):not(.toItem a):not(.kefuBox a) {
    color: #666;
    margin: 0 6px;
}

.footer a:not(.backtoTop a):not(.backtoTop-new a):not(.toItem a):not(.kefuBox a):hover {
    color: #3266A0;
}

.links {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eef2f7;
    margin-bottom: 20px;
}

.links .t {
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.friendlinks a {
    display: inline-block;
    margin-right: 15px;
    font-size: 13px;
    color: #888;
}

/* ================== 10. Mobile Responsive ================== */
@media screen and (max-width: 768px) {

    body,
    #content,
    .content,
    #top .top-inner,
    .top .cont,
    .smallnav .cont,
    .footer .cont,
    .nav-inner,
    .w1200-center {
        width: 100% !important;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* smallnav 移动端适配 - 覆盖被提取的基础样式 */
    #smallnav, .smallnav {
        display: none !important;
    }
    
    #top,
    .top {
        height: auto;
        padding-bottom: 10px;
        position: relative;
    }

    #top .top-inner,
    .top .cont {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        padding-top: 10px;
    }

    #top .logo,
    .top .l {
        width: 100%;
        border: none;
        text-align: center;
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
    }

    #top .logo h1,
    #top .logo div,
    .top .l img {
        margin: 0 auto;
    }
    
    #top .cityName {
        position: static;
        text-align: center;
        width: 100%;
        margin-bottom: 15px;
    }

    .searchbar,
    .top .cont .m {
        margin: 0 auto;
        width: 100%;
        max-width: none;
    }


    .kw {
        width: 100%;
        flex: 1;
    }

    #nav {
        display: none;
    }

    /* Simplified for now, or add mobile menu toggle */

    .col-left,
    .col-right,
    .content article.contL,
    .content aside.contR,
    .lists .listL,
    .lists .listR {
        width: 100%;
        margin-right: 0;
    }

    .slidebox-container,
    .ent-form {
        width: 100%;
        height: auto;
    }

    .row-flex,
    .lists .list3,
    .content {
        flex-direction: column;
        gap: 20px; padding: 0 !important;
    }

    .infolist1 .cont1 {
        grid-template-columns: 1fr;
    }

    .infolist1 .cont2 li {
        width: 100%;
    }


    /* ================== 移动端适配修复 - 2025-12-28 ================== */

    /* 1. 隐藏详情页企业快速选址区域 */
    /* 1. 隐藏详情页企业快速选址区域 - 已移除，因为导致相关园区信息不可见 */
    /* .content aside.contR .box1:first-child {
        display: none;
    } */

    /* 2. 面包导航移动端适配 */



    /* 3. 搜索框移动端适配 */
    #searchForm {
        width: 100% !important;
        margin: 0;
    }

    /* 4. 信息属性移动端单列显示 */
    .bCCC li {
        width: 100% !important;
    }

    /* 5. 列表项移动端布局 - 图片在上，文字在下 - 2025-12-28 */
    .list-item {
        flex-direction: column !important;
    }

    .list-item .l {
        width: 100% !important;
        height: auto !important;
        margin-right: 0 !important;
        margin-bottom: 15px;
    }

    .list-item .l img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

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

    /* 6. 首页企业选址表单移动端排序 - 2025-12-28 */
    /* 将表单移到最后（轮播图后、热门城市前） */
    #content>.row-flex:first-child {
        display: flex;
        flex-direction: column;
    }

    #content>.row-flex:first-child .ent-form {
        order: 2;
        margin-left: 0;
        margin-top: 20px;
    }

    #content>.row-flex:first-child .slidebox-container {
        order: 1;
        margin-left: 0;
    }
}

@media screen and (min-width: 769px) {

    /* Enforce Desktop Width */
    body {
        min-width: 1200px;
    }
}

/* ================== 11. KF.css兼容性保护 ================== */
/* 
 * 客服浮窗组件样式保护 - 2025-12-27
 * 确保www_yuanqu.css的全局样式不会覆盖kf.css中的客服组件样式
 * 相关组件类名: .backtoTop, .backtoTop-new, .toItem, .kefuBox, .kefuItem
 */

/* 重置客服浮窗内的img样式 */
.backtoTop img,
.backtoTop-new img,
.kefuBox img {
    max-width: none;
    height: auto;
    display: inline;
}

/* 确保客服浮窗的a链接样式不被覆盖 */
.backtoTop a,
.backtoTop-new a,
.toItem a,
.kefuBox a {
    transition: none;
}

/* 确保客服浮窗的盒模型计算正确 */
.backtoTop,
.backtoTop-new,
.backtoTop *,
.backtoTop-new * {
    box-sizing: content-box;
}

/* ================== Viewer.js Custom Styles (from city site) ================== */
.viewer-custom-btn {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    width: 60px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 30px;
    z-index: 2021;
    /* ViewerJS default z-index is 2015 */
    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;
    z-index: 2021;
    pointer-events: none;
}


/* ================== Extracted Common Modules ================== */
.smallnav {
    width: 100%;
    height: 40px;
    background: #3266A0;
}

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

.smallnav .cont a {
    color: #FFF;
}

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

.top {
    width: 100%;
    height: 70px;
    background: #FFF;
    border-bottom: 1px solid #EEE;
    margin-bottom: 20px;
}

.top .cont {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
}

.top .cont .l {
    margin-top: 0;
    display: flex;
    align-items: flex-end;
}

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

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

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

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

.top .cont .l .nav h1 {
    display: inline;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.top .cont .m {
    margin: 0;
}

.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 .nav,
.content .nav {
    margin: 0;
    color: #555;
    font-size: 14px;
}

.top .nav a,
.content .nav a {
    color: #555;
}

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

.back-to-top {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
	background-color: rgba(50, 102, 160, 0.8);
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 50%;
	bottom: 50px;
	height: 44px;
	width: 44px;
	position: fixed;
	margin-left: 610px;
	/* 1200/2 + 10 - 2025-12-19 */
	right: auto;
	left: 50%;
	z-index: 99;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	display: none;
	transition: background-color 0.3s, transform 0.3s;
}

.back-to-top:hover {
	background-color: #3266A0;
	transform: translateY(-3px);
}

.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:hover {
	background: #e8e8e8;
}

.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; /* Pull up to overlap with tabs */
	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;
	text-decoration: none;
}

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

.footerData2 {
    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-bottom: 20px;
}

.FD_t2 {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.FD_t2 li,
.FD_t2 a {
    padding: 4px 10px;
    cursor: pointer;
    margin: 3px;
    background: #f5f5f5;
    border-radius: 4px;
    color: #666;
    font-size: 13px;
    transition: all 0.2s;
}

.FD_t2 li:hover,
.FD_t2 a:hover {
    background: #e8e8e8;
    color: #333;
}

.FD_t2 li.select,
.FD_t2 a.select {
    background: #3266A0;
    color: #fff;
}

.FD_C2 {
    min-height: 100px;
}

.FD_C2 li.fd_show2 {
    display: block;
}

.FD_C2 li {
    display: none;
}

.FD_C2 li a {
    display: inline-block;
    padding: 5px 10px;
    margin: 3px;
    background: #f8f9fa;
    border-radius: 4px;
    color: #666;
    font-size: 13px;
    transition: all 0.2s;
}

.FD_C2 li a:hover {
    background: #FF5A00;
    color: #fff;
}

.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;
}

.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; }

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

.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;
    }

.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;
    }

.smallnav {
        display: none;
    }

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

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

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

.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;
}

.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; }

/* ================== 园区首页专属样式 ================== */
main#content.home-main { margin-top: 15px; }
.home-filter-box { width: 340px; display: flex; flex-direction: column; }
.home-filter-box .t h1 { font-size: 16px; font-weight: bold; margin: 0; padding: 0; display: block; color: #333; word-break: break-all; overflow-wrap: break-word; white-space: normal; }
.home-filter-box .nav22 { padding: 10px 18px; border: none; flex: 1; }
.home-filter-box .industry-list { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.home-filter-box .industry-list a { color: #333; line-height: 28px; padding: 0 10px; border-radius: 6px; transition: all 0.2s; white-space: nowrap; font-size: 14px; background: #f8f8f8; border: 1px solid #eee; }
.home-filter-box .industry-list a:hover { color: #e60012; background: #fff0f0; border-color: #ffcccc; }
.home-filter-box .industry-list a.ck { color: #fff; background: #e60012; border-color: #e60012; }

/* =============================== 行业资讯板块 2026-05-12 =============================== */
.news-two-col { display:flex; gap:40px; padding: 10px 5px; }
.news-rich-list { flex:1; list-style: none; padding: 0; margin: 0; }
.news-rich-list li { 
    display: flex; 
    align-items: center; 
    padding: 10px 0; 
    border-bottom: 1px dashed #ececec; 
    transition: all 0.3s ease; 
}
.news-rich-list li:hover { background-color: #fcfcfc; padding-left: 8px; }
.news-rich-list li::before { 
    content: "•"; 
    color: #3266A0; 
    font-size: 16px; 
    margin-right: 8px; 
}
.news-cat {
    display: inline-block;
    padding: 0 6px;
    background-color: #f0f5fa;
    color: #3266A0;
    font-size: 12px;
    border-radius: 3px;
    margin-right: 8px;
    line-height: 20px;
    white-space: nowrap;
    border: 1px solid #d4e3f3;
}
.news-rich-list li a { 
    flex: 1; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    color: #333; 
    font-size: 15px; 
    text-decoration: none;
}
.news-rich-list li a:hover { color: #3266A0; }
.news-rich-list li .date { 
    color: #999; 
    font-size: 13px; 
    margin-left: 15px; 
}

.news-img-grid {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.news-img-item {
    flex: 1;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background: #f8f8f8;
}
.news-img-item img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.news-img-item:hover img {
    transform: scale(1.05);
}
.news-img-item .title-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 13px;
    padding: 6px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 响应式：小屏图片网格2列 */
@media (max-width: 768px) {
    .news-img-grid { flex-wrap: wrap; }
    .news-img-item { flex: 0 0 calc(50% - 10px); }
    .news-img-item img { height: 100px; }
}

/* =============================== 园区列表分类标签（解耦自资讯标签） =============================== */
.yq-cat {
    display: inline-block;
    width: 60px;
    text-align: center;
    background-color: #f5f5f5;
    color: #666;
    font-size: 12px;
    border-radius: 3px;
    margin-right: 8px;
    line-height: 20px;
    border: 1px solid #e0e0e0;
}

/* ====== 2026-05-17 移动端响应式修复 ====== */
@media screen and (max-width: 767px) {

    /* ---- 2026-05-17 园区页面移动端全面修复 ---- */
    /* 根本原因：w1200-center、#content、col-left/col-right 固定宽度未覆盖 */

    /* 主内容容器宽度修复 */
    #content,
    .content,
    main#content,
    .w1200-center {
        width: 100% !important;
        margin: 0 auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* footer .cont 宽度覆盖（修复园区页面footer一片白问题 2026-05-17）
     * 根本原因：此文件第1982行有全局规则 .footer .cont { width:1200px !important }
     * 该规则不在任何媒体查询内，必须在同文件的移动端块里用更晚的规则覆盖 */
    .footer .cont,
    .footer #cont {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 两栏改单栏 */
    .col-left {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }
    .col-right {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 16px;
    }

    /* 园区列表卡片 */
    .yuanqu-item, .park-item, .park-card {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* 园区首页：国家级列表 */
    .national-list .park-row, .yuanqu-list-row {
        flex-direction: column !important;
    }
    .national-list .park-row .park-name {
        max-width: 100% !important;
    }

    /* infoTZ 信息条 */
    .infoTZ {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
        margin: 20px 0 10px !important;
    }

    /* 园区详情：tabs(园区介绍/图片/地图) */
    .tab-nav, .detail-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap !important;
    }
    .tab-nav a, .tab-item {
        flex-shrink: 0;
        padding: 8px 12px !important;
        font-size: 13px;
    }

    /* 园区详情：基本信息字段 */
    .yuanqu-info, .park-info {
        width: 100% !important;
        box-sizing: border-box;
    }
    .yuanqu-info td, .park-info td {
        word-break: break-all;
        white-space: normal !important;
    }

    /* 地图容器防溢出 */
    #cont6, .map-container, #mapContainer {
        width: 100% !important;
        height: 250px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    #cont6 > *, .map-container > * {
        width: 100% !important;
        height: 100% !important;
    }

    /* 园区图片 */
    .yuanqu-pics img, .park-pics img,
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 相关园区侧边栏 */
    .col-right .box1, .sidebar .related {
        width: 100% !important;
    }

    /* min-width 覆盖 */
    * {
        min-width: 0 !important;
    }

    /* 首页顶部筛选与轮播图移动端修复 */
    .home-filter-box {
        width: 100% !important;
    }
    .slidebox-container {
        height: 200px !important;
        margin-left: 0 !important;
        margin-top: 15px !important;
        width: 100% !important;
    }
    #imgshow .swiper-slide {
        height: 200px !important;
    }

    /* 行业资讯改为单列 */
    .news-two-col {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* 园区内容页照片改为单列 */
    .contL .cont4 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ==========================================================================
   2026-05-22 解决天地图API v4.0动态注入的 #nav a:hover {background:#EBD2A6} 冲突问题 - By Antigravity
   在 city_yuanqu.css 尾部采用极限特异性选择器及 !important 声明进行强力覆盖，完美恢复现代蓝色半透明悬停背景
   ========================================================================== */
html body #nav #cont_top ul li a:hover,
html body #nav #cont_top ul li strong a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   2026-05-27 [解耦] 园区实时租售有图房源卡片专属高级感布局样式 - By 99cfw.com
   ========================================================================== */
.house-grid { display: flex; flex-wrap: wrap; gap: 15px; padding: 15px 0; width: 100%; box-sizing: border-box; }
.house-card { width: calc(33.333% - 10px); background: #fff; border: 1px solid #edf2f7; border-radius: 8px; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; text-decoration: none !important; box-sizing: border-box; }
.house-card:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0,0,0,0.08); border-color: #3266a0; }
.house-img-box { position: relative; width: 100%; height: 160px; overflow: hidden; background: #f7fafc; }
.house-img-box img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.5s ease !important; border-radius: 0 !important; box-shadow: none !important; }
.house-card:hover .house-img-box img { transform: scale(1.05) !important; }
.house-info { padding: 12px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.house-title { font-size: 14px; font-weight: bold; color: #2d3748; line-height: 1.4; height: 38px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 8px; }
.house-card:hover .house-title { color: #3266a0; }
.house-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #718096; margin-bottom: 6px; }
.house-area { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.house-type-tag { background: #eef2f7; color: #3266a0; padding: 2px 8px; border-radius: 10px; font-size: 11px; white-space: nowrap; }
.house-price-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #edf2f7; padding-top: 8px; margin-top: 4px; }
.house-price { color: #e53e3e; font-weight: bold; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) {
    .house-card { width: calc(50% - 10px); }
}
@media (max-width: 480px) {
    .house-card { width: 100%; }
}

/* ==========================================================================
   2026-05-27 园区详情页大气轮播与政策/LOGO/公司重构专属样式 - By 99cfw.com
   ========================================================================== */
.yqu-swiper-container-outer {
    width: 1200px;
    margin: 20px auto; /* PC端设置上下各 20px 间距，保持大图完美居中 */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    background: #fff;
    border: 1px solid #eef2f7;
}
.yqu-swiper-container {
    width: 100%;
    height: 450px; /* PC端大图物理限高，保障首屏文字展现占比超过50% */
    position: relative;
}
.yqu-swiper-container .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.yqu-swiper-container .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
    cursor: zoom-in;
}
.yqu-swiper-container .swiper-slide img:hover {
    transform: scale(1.03) !important;
}

/* 2026-05-27 精美高保真小圆点指示器专属样式 - By 99cfw.com */
.yqu-swiper-container .swiper-pagination {
    bottom: 15px !important;
    left: 0;
    width: 100%;
    z-index: 10;
}
.yqu-swiper-container .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #fff !important;
    opacity: 0.6 !important;
    margin: 0 4px !important;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s ease;
}
.yqu-swiper-container .swiper-pagination-bullet-active {
    width: 20px;
    border-radius: 4px;
    background: #3266A0 !important;
    opacity: 1 !important;
}

/* 运营公司副标题 */
.yqu-company-sub {
    margin-top: 8px;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

/* 奢华详情名片区 */
.yqu-profile-section {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    align-items: flex-start;
    border-bottom: 1px dashed #eef2f7;
    padding-bottom: 20px;
}
.yqu-logo-box {
    width: 120px;
    height: 120px;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: transform 0.3s;
}
.yqu-logo-box:hover {
    transform: translateY(-2px);
}
.yqu-logo-box img {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
}
.yqu-meta-info-box {
    flex: 1;
}
.yqu-meta-info-box.no-logo {
    width: 100%;
}

/* 尊贵扶持政策与优势专区 - By 99cfw.com 2026-05-27 */
.yqu-policy-section {
    background: #f8fafc;
    border-radius: 8px; /* 全边框一致圆角 */
    padding: 8px 15px; /* 上下内间距收窄 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    border: 1px solid #edf2f7; /* 四边闭合，彻底去掉左侧蓝色竖线 */
}
.yqu-policy-section .cont1 {
    border-bottom: none !important;
    border-left: none !important;      /* 强力隔离全局.cont1的蓝色竖线 */
    padding: 0 !important;             /* 彻底去内边距 */
    margin: 0 0 6px 0 !important;      /* 极紧凑底边距 */
    background: none !important;       /* 强力剥离背景图 */
}
.yqu-policy-section h2 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 !important;              /* 去除 margin，紧凑布局 */
}
.yqu-policy-content {
    font-size: 15px;
    line-height: 1.75;
    color: #475569;
}

/* 物理隔离与防误点分割线 */
.yqu-section-divider {
    border-top: 1px solid #edf2f7 !important;
    margin-top: 32px !important;
    padding-top: 20px !important;
}

/* 移动端响应式适配 */
@media (max-width: 768px) {
    .yqu-swiper-container-outer {
        width: 100% !important;
        margin: 10px auto;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .yqu-swiper-container {
        height: 240px; /* 移动端大图物理限高 */
    }
    .yqu-profile-section {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .yqu-logo-box {
        width: 100px;
        height: 100px;
    }
}

/* ==========================================================================
   2026-05-27 园区实时房源租售分类 Tabs 尊贵精美样式 - By 99cfw.com
   ========================================================================== */
.yqu-house-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #edf2f7;
    padding-bottom: 8px;
    align-items: center;
}
.yqu-house-tabs .tab-item {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8fafc;
    border: 1px solid #edf2f7;
    user-select: none;
}
.yqu-house-tabs .tab-item:hover {
    color: #3266A0;
    background: #f1f5f9;
    transform: translateY(-1px);
}
.yqu-house-tabs .tab-item.active {
    color: #fff;
    background: #3266A0;
    border-color: #3266A0;
    box-shadow: 0 4px 12px rgba(50, 102, 160, 0.2);
}

/* 移动端 Tabs 自适应 */
@media (max-width: 768px) {
    .yqu-house-tabs {
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .yqu-house-tabs .tab-item {
        font-size: 13px;
        padding: 6px 12px;
        flex-shrink: 0;
    }
}

/* ==========================================================================
   2026-05-27 面包屑置顶及 1200px 居中高端专属样式 - By 99cfw.com 重构升级版
   ========================================================================== */
.yqu-breadcrumb-outer {
    margin: 15px auto 8px auto; /* PC端上下外边距：拉开顶部大导航，收紧与大图底部 */
    width: 1200px;
}
.yqu-breadcrumb {
    font-size: 13px;
    color: #64748b;
    padding: 6px 0; /* 去掉多余的左右内边距，使其与轮播大图左边缘物理像素对齐 */
    background: transparent !important; /* 更隐显、低调优雅的完全无背景透明质感 */
    border: none !important; /* 彻底去掉硬质边框 */
    border-radius: 0 !important;
    display: flex !important; /* 宽度拉通，填满 1200px */
    width: 100% !important;
    align-items: center;
    gap: 6px;
    box-shadow: none !important; /* 彻底剥离阴影，回归纯真极简 */
}
.yqu-breadcrumb a {
    color: #475569;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.yqu-breadcrumb a:hover {
    color: #3266A0;
}
.yqu-breadcrumb span {
    color: #cbd5e1;
    font-size: 11px;
    user-select: none;
}
.yqu-breadcrumb strong {
    color: #1e293b;
    font-weight: 600;
}

/* ==========================================================================
   2026-05-27 获取联系方式 AJAX 异步按钮及展现区高端样式 - By 99cfw.com
   ========================================================================== */
.yqu-contact-btn-box {
    margin: 15px 0;
    text-align: left;
}
.yqu-contact-btn {
    background: #3266A0;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(50, 102, 160, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.yqu-contact-btn:hover {
    background: #254d7c;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(50, 102, 160, 0.25);
}
.yqu-contact-btn:active {
    transform: translateY(0);
}
.yqu-contact-icon {
    transition: transform 0.3s;
}
.yqu-contact-btn:hover .yqu-contact-icon {
    transform: rotate(15deg);
}
.yqu-contact-info-panel {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 15px 0;
    animation: yquFadeInUp 0.4s ease;
}
.yqu-contact-info-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.yqu-contact-info-panel li {
    width: calc(50% - 8px);
    font-size: 14px;
    color: #334155;
    line-height: 24px;
}
.yqu-contact-info-panel li.w100 {
    width: 100%;
}
.yqu-contact-info-panel span {
    font-weight: 600;
    color: #64748b;
}

@keyframes yquFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .yqu-breadcrumb-outer {
        width: 100% !important;
        padding: 0 15px;
        margin: 10px auto 0 auto;
    }
    .yqu-breadcrumb {
        font-size: 12px;
    }
    .yqu-contact-info-panel li {
        width: 100%;
    }
}

/* ==========================================================================
   2026-05-27 园区专属精奢卡片弹窗遮罩及 HSL transition 视觉效果 - By 99cfw.com
   ========================================================================== */
.yqu-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6); /* 现代暗雅遮罩 */
    backdrop-filter: blur(8px); /* 顶级毛玻璃高光模糊质感 */
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yqu-modal {
    width: 420px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #edf2f7;
    position: relative;
    padding: 24px;
    animation: yquModalScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes yquModalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.yqu-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s;
    user-select: none;
}
.yqu-modal-close:hover {
    color: #ef4444;
    transform: rotate(90deg);
}
.yqu-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    border-bottom: 2px solid #edf2f7;
    padding-bottom: 12px;
    margin-bottom: 18px;
    text-align: center;
}
.yqu-modal-body {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.yqu-modal-loading {
    font-size: 14px;
    color: #64748b;
    text-align: center;
    width: 100%;
}
.yqu-modal-err {
    font-size: 14px;
    color: #ef4444;
    text-align: center;
    font-weight: 500;
    width: 100%;
}
.yqu-modal-list {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.yqu-modal-list li {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}
.yqu-modal-list li:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}
.yqu-modal-list .lbl {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
}
.yqu-modal-list .val {
    font-size: 15px;
    color: #1e293b;
}
.yqu-modal-list .val a {
    color: #3266A0;
    font-weight: 700;
    text-decoration: none;
}
.yqu-modal-list .val a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}
.yqu-modal-tips {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px dashed #edf2f7;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.6;
    text-align: center;
    width: 100%;
}
@media (max-width: 768px) {
    .yqu-modal {
        width: calc(100% - 30px);
        margin: 0 15px;
        padding: 20px;
    }
    .yqu-modal-list li {
        padding: 10px 12px;
    }
}

/* ==========================================================================
   2026-05-27 大师级重构：名片区右置置顶精奢卡片盒与流金暖橙 CTA 按钮 - By 99cfw.com
   ========================================================================== */
.contR .yqu-profile-section {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    width: 100% !important;
    display: flex;
    flex-direction: column !important; /* 物理强制纵向排列 */
    align-items: center;
    gap: 20px;
    margin-top: 0 !important; /* 2026-05-27 大师级细节微调：彻底消除顶部 margin-top 间距 - By 99cfw.com */
    margin-bottom: 20px;
}

/* LOGO 盒子精致圆角 */
.contR .yqu-logo-box {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    border: 1px solid #edf2f7;
    padding: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.contR .yqu-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 信息元数据撑满 */
.contR .yqu-meta-info-box {
    width: 100% !important;
    padding: 0 !important;
}

.contR .yqu-meta-info-box .c4 {
    width: 100% !important;
    padding: 0 !important;
}

/* 修改名片属性列表 */
.contR .yqu-meta-info-box ul.bCCC {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

.contR .yqu-meta-info-box ul.bCCC li {
    width: 100% !important;
    float: none !important; /* 清除浮动 */
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.contR .yqu-meta-info-box ul.bCCC li span {
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
    width: 75px;
    display: inline-block;
}

/* 强力烈焰流金暖橙渐变转化按钮 (CRO 顶配) */
.yqu-contact-btn-box {
    width: 100%;
    margin: 0 !important;
    text-align: center;
}

.yqu-contact-btn {
    width: 100% !important;
    height: 48px !important;
    background: linear-gradient(135deg, #ff7a00 0%, #ff5000 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(255, 80, 0, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.yqu-contact-btn:hover {
    background: linear-gradient(135deg, #ff8c1a 0%, #ff661a 100%) !important;
    box-shadow: 0 8px 24px rgba(255, 80, 0, 0.35) !important;
    transform: translateY(-2px) !important;
}

.yqu-contact-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(255, 80, 0, 0.2) !important;
}

.yqu-contact-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* ==========================================================================
   2026-05-27 大师级重构：移动端自愈排版 contents 布局与名片折回 - By 99cfw.com
   ========================================================================== */
@media (max-width: 768px) {
    main.content.detail-page {
        display: flex !important;
        flex-direction: column !important;
    }
    
    article.contL {
        order: 2 !important;
        width: 100% !important;
    }
    
    aside.contR {
        display: contents !important; /* 物理消除 contR，使其子元素直接参与 main 的 flex 流 */
    }
    
    .yqu-profile-section {
        order: 1 !important;
        background: #ffffff;
        border: 1px solid #eef2f7;
        border-radius: 12px;
        padding: 20px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px !important;
    }
    
    .contR .yqu-logo-box {
        width: 100px !important;
        height: 100px !important;
        border-radius: 10px !important;
        padding: 6px !important;
    }
    
    .contR .yqu-meta-info-box ul.bCCC {
        gap: 10px !important;
        margin-bottom: 15px !important;
    }
    
    .contR .yqu-meta-info-box ul.bCCC li {
        font-size: 13px !important;
    }
    
    aside.contR .box1,
    .contR .box1 {
        order: 3 !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   2026-05-27 大师级细节微调：PC端右侧边栏跟随鼠标滚动 sticky 增强逻辑 - By 99cfw.com
   ========================================================================== */
@media (min-width: 769px) {
    main.content.detail-page .contR {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 20px !important;
        align-self: flex-start !important; /* 物理防 stretch 高度拉伸，确保在滚动轨道内跟随鼠标自由滑动 */
    }
}

/* ==========================================================================
   新增：首页聚焦图文卡片容器 - 2026-06-08 - By 99cfw.com
   ========================================================================== */
.news-featured-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 5px;
}
.news-featured-card {
    width: 48.5%;
    display: flex;
    background: transparent;
    height: 140px;
    margin-bottom: 20px;
}
.news-featured-card:hover {
    /* 去除卡片悬停浮起与投影效果 */
}
.news-featured-card .img-box {
    width: 200px;
    height: 140px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: #fafafa;
    border-radius: 4px;
}
.news-featured-card .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.news-featured-card:hover .img-box img {
    transform: scale(1.06);
}
.news-featured-card .info-box {
    padding: 5px 0 5px 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
}
.news-featured-card .info-box .title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: color 0.2s ease;
}
.news-featured-card:hover .info-box .title {
    color: #3266A0;
}
.news-featured-card .info-box .desc {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
    margin: 0 0 6px 0;
    text-indent: 2em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex: 1;
}
.news-featured-card .info-box .date-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 11px;
    color: #999;
}

/* 聚焦图文移动端及平板响应式适配 */
@media screen and (max-width: 768px) {
    .news-featured-wrap {
        flex-direction: column;
        margin-bottom: 10px;
    }
    .news-featured-card {
        width: 100% !important;
        flex-direction: column;
        height: auto;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #eee;
    }
    .news-featured-card .img-box {
        width: 100%;
        height: 160px;
    }
    .news-featured-card .info-box {
        padding: 10px 0 0 0;
        gap: 8px;
    }
    .news-featured-card .info-box .title {
        font-size: 14px;
        -webkit-line-clamp: 2;
    }
    .news-featured-card .info-box .desc {
        -webkit-line-clamp: 3;
        margin-bottom: 4px;
    }
    .news-featured-card .info-box .date-row {
        justify-content: flex-start;
    }
}