﻿@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;
}



/* Small Nav */
.smallnav {
    width: 100%;
    height: 35px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.smallnav .cont {
    width: 1200px;
    height: 35px;
    line-height: 35px;
    color: #666;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.smallnav .cont .l {
    flex: 1;
    font-size: 13px;
}

.smallnav .cont .r {
    display: flex;
    align-items: center;
    gap: 5px;
}

.smallnav .cont a {
    color: #666;
    font-size: 13px;
    margin-left: 10px;
}

.smallnav .cont a:hover {
    color: #ff5a00;
}

/* Blue variation for list and content pages */
.smallnav.smallnav-blue {
    background: #3266A0;
    border-bottom: 1px solid #2b588c;
}

.smallnav.smallnav-blue .cont,
.smallnav.smallnav-blue .cont a {
    color: rgba(255, 255, 255, 0.9);
}

.smallnav.smallnav-blue .cont a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Main Header */
.top {
    width: 100%;
    height: 90px;
    /* Adjusted height */
    background: #fff;
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
}

#top {
    /* ID selector for homepage compatibility */
    width: 100%;
    height: 110px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

/* Homepage Header Structure */
#top .top-inner {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    /* Better alignment */
}

#top .logo {
    width: 235px;
    padding-right: 20px;
    border-right: 1px solid #eef2f7;
    margin-top: 10px;
}

#top .logo h1 {
    line-height: 1;
}

#top .logo span {
    font-size: 12px;
    color: #053158;
    display: inline-block;
    margin-top: 5px;
}

/* Inner Page Header Structure */
.top .cont {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top .cont .l {
    display: flex;
    align-items: flex-end;
}

/* 2025-12-30 面包导航样式优化：限制容器宽度，防止内容过多撑开布局 */
.top .cont .l .nav {
    margin-left: 20px;
    font-size: 14px;
    color: #555;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    max-width: 700px;
    /* 限制面包导航最大宽度 */
}

/* 面包导航链接样式：限制单个链接宽度，超出显示省略号 */
.top .cont .l .nav a {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* 首页链接不限宽 */
.top .cont .l .nav a:first-child {
    max-width: none;
}

/* 分隔符保持不收缩 */
.top .cont .l .nav span {
    flex-shrink: 0;
    margin: 0 3px;
}

.top .cont .l .nav h1 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-right: 10px;
}

.top .cont .l .nav a:first-child {
    font-weight: bold;
}

/* Search Bar (Shared) */
.searchbar,
.top .cont .m {
    flex: 1;
    margin-left: 40px;
    max-width: 500px;
}

/* 搜索表单容器宽度 - 2025-12-27 */
#searchForm {
    width: 400px;
    margin-left: auto;
    /* 靠右对齐 */
}

#top .searchbar {
    margin-top: 0;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    width: 100%;
}

.kw {
    border: 2px solid #3266A0;
    height: 38px;
    padding: 0 10px;
    flex: 1;
    outline: none;
    font-size: 14px;
    border-right: none;
    color: #333;
    border-radius: 4px 0 0 4px;
    width: 100%;
}

.submit {
    background: #3266A0;
    color: #fff;
    border: none;
    height: 38px;
    width: 80px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 0 4px 4px 0;
    font-weight: 500;
    transition: background 0.2s;
}

.submit:hover {
    background: #2557a0;
}

/* Search History & Suggestions */
.search-history,
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 80px;
    /* Exclude button width */
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    /* Controlled by JS */
}

.history-item,
.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
}

.history-item:hover,
.suggestion-item:hover {
    background: #f0f7ff;
    color: #3266A0;
}

/* ================== 4. Navigation ================== */
#nav {
    width: 100%;
}

.nav-top-wrap {
    width: 100%;
    background: linear-gradient(to right, #3266A0, #2557a0);
    box-shadow: 0 2px 10px rgba(50, 102, 160, 0.2);
}

.nav-inner {
    width: 1200px;
    margin: 0 auto;
}

#cont_top {
    height: 50px;
}

#cont_top ul {
    display: flex;
    height: 100%;
    align-items: center;
}

#cont_top ul li a {
    display: block;
    padding: 0 24px;
    line-height: 50px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 500;
}

#cont_top ul li.select a,
#cont_top ul li a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.nav-bottom-wrap {
    width: 100%;
    background: #fff;
    /* Lighter look */
    border-bottom: 1px solid #e1e4e8;
}

#cont_bottom,
.botton1 {
    height: 44px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 15px;
}

#cont_bottom a {
    margin-right: 20px;
    color: #555;
    font-size: 14px;
}

#cont_bottom a:hover {
    color: #FF5A00;
}

/* ================== 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;
}

/* 详情页: 当包含 contL/contR 时使用横向flex布局 */
main.content:has(article.contL) {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

@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);
    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;
    overflow: hidden;
}

.infolist1 .cont1 li img {
    width: 100%;
    height: 150px;
    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;
}

.infolist1 .cont1 li .tt a {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.infolist1 .cont1 li .tt a:hover {
    color: #3266A0;
}



/* 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) */
/* 让列表项背景延伸到边框 - 2025-12-27 */
.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;
    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 {
    line-height: 1.8;
    font-size: 16px;
    color: #444;
    margin-bottom: 20px;
    text-align: justify;
}

.contL .cont4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    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;
}

/* 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 ================== */
.footer {
    width: 100%;
    background: #fff;
    border-top: 1px solid #e7e7e7;
    padding: 40px 0;
    margin-top: 30px;
    color: #666;
    text-align: center;
}

.footer .cont {
    width: 1200px;
    margin: 0 auto;
}

/* 排除客服浮窗组件链接，避免与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 移动端适配 - 保持可见但调整样式 - 2025-12-28 */
    .smallnav .l {
        display: none;
    }

    .smallnav {
        height: auto;
        padding: 3px 0;
    }

    .smallnav .cont {
        flex-direction: column;
        height: auto;
        gap: 5px;
        text-align: center;
    }

    .smallnav .cont .l,
    .smallnav .cont .r {
        justify-content: center;
    }

    #top,
    .top {
        height: auto;
        padding-bottom: 10px;
    }

    #top .top-inner,
    .top .cont {
        flex-direction: column;
        height: auto;
    }

    #top .logo,
    .top .l {
        width: 100%;
        border: none;
        text-align: center;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    #top .logo h1,
    .top .l img {
        margin: 0 auto;
    }

    .searchbar,
    .top .cont .m {
        margin: 0;
        width: 100%;
        max-width: none;
    }

    .search-input-wrapper {
        width: 100%;
    }

    .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;
    }

    .infolist1 .cont1 {
        grid-template-columns: 1fr;
    }

    .infolist1 .cont2 li {
        width: 100%;
    }

    .footer {
        padding: 20px 0;
    }

    /* ================== 移动端适配修复 - 2025-12-28 ================== */

    /* 1. 隐藏详情页企业快速选址区域 */
    /* 1. 隐藏详情页企业快速选址区域 - 已移除，因为导致相关园区信息不可见 */
    /* .content aside.contR .box1:first-child {
        display: none;
    } */

    /* 2. 面包导航移动端适配 */
    .top .cont .l {
        flex-direction: column;
        align-items: center;
    }

    .top .cont .l .nav {
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0;
        margin-top: 10px;
        padding: 0 10px;
        font-size: 13px;
        line-height: 1.8;
    }

    /* 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;
}