/* DIV 布局样式文件 - 将表格布局转换为div布局 */
/* 保持与原表格布局相同的视觉效果 */

/* CSS Reset - 消除默认的margin和padding */
/* CSS Reset - 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HTML和Body基础样式 */
/* HTML和Body基础样式 - 全局页面基础设置 */
html, body {
    width: 100%;
    height: 100%;
}

/* 主容器样式 */
/* 主容器样式 - 全局页面主容器样式 */
.div-page-container {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: block;
    background: transparent;
    position: relative;
}

/* 顶部主容器 */
/* 顶部主容器 - 全局页面顶部区域样式 */
.div-top-section {
    background-image: url('../images/s_bg.gif');
    background-repeat: repeat;
    background-size: auto;
    display: block;
    min-height: auto;
    overflow: visible;
    margin: 0;
    padding: 0;
}

/* 1200px 居中容器 */
/* 1200px 居中容器 - 全局页面居中容器样式 */
.div-center-container {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* 包含div-top-nav的div-center-container添加最小高度，与rec-布局的338px容器对齐
   第一个div-center-container（顶部图片）：82px
   第二个div-center-container（包含导航+主内容）：需要确保导航和主内容的起始位置一致
   计算方式：推荐页面第一个容器338px = 顶部图片82px + 导航210px + 额外间距46px
   News页面第二个容器需要最小高度来匹配 */
/* 导航容器高度调整 - 全局页面导航容器高度匹配 */
.div-center-container:has(> .div-top-nav) {
    min-height: 294px;
}

/* 针对News页面的特殊调整 - 移除主容器的额外高度 */
/* 主容器高度调整 - 控制News页面主容器高度 */
.div-main-section {
    height: auto;
}

/* 顶部图片 */
/* 顶部图片 - 全局页面顶部图片样式 */
.div-top-image {
    width: 100%;
    text-align: center;
}

/* 顶部图片尺寸 */
/* 顶部图片尺寸 - 全局页面顶部图片尺寸设置 */
.div-top-image img {
    width: 1200px;
    height: 82px;
    display: block;
}

/* 主体区域容器 */
/* 主体区域容器 - 全局页面主体区域容器样式 */
.div-main-section {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    overflow: visible;
    min-width: 1200px;
}

/* 左边栏 */
/* 左边栏 - 全局页面左侧边栏样式 */
.div-left-sidebar {
    width: 29px;
    background-image: url('../images/pic_left.gif');
    background-repeat: repeat-y;
    background-size: 29px auto;
    flex-shrink: 0;
    flex-grow: 0;
}

/* 中间内容区 */
/* 中间内容区 - 全局页面中间内容区域样式 */
.div-center-content {
    flex: 1;
    background-image: url('../images/main_bg.jpg');
    background-repeat: repeat;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    display: block;
    min-width: 850px;
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* 右边栏 */
/* 右边栏 - 全局页面右侧边栏样式 */
.div-right-sidebar {
    width: 32px;
    background-image: url('../images/pic_right.gif');
    background-repeat: repeat-y;
    background-size: 32px auto;
    background-attachment: scroll;
    flex-shrink: 0;
    flex-grow: 0;
}

/* 顶部导航区 */
/* 顶部导航区 - 全局页面顶部导航区域样式 */
.div-top-nav {
    width: 1100px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

/* 确保导航菜单内的表格也在高层级 */
/* 导航表格层级 - 全局页面导航表格层级设置 */
.div-top-nav .div-table {
    position: relative;
    z-index: 100;
    display: table;
    width: 100%;
    border-collapse: collapse;
}

/* 顶部导航内的表格单元格 - 设置固定210px高度，与rec-布局一致 */
/* 导航表格单元格 - 全局页面导航表格单元格样式 */
.div-top-nav .div-table-cell {
    display: table-cell;
    vertical-align: top;
    text-align: center;
    height: 210px;
    padding: 0;
}

/* 确保Grid容器正确显示 - 保持210px高度 */
/* 导航Grid容器 - 全局页面导航Grid容器样式 */
.div-top-nav .div-grid-top-nav {
    position: relative;
    z-index: 100;
    height: 210px;
}

/* 中间内容布局 */
/* 中间内容布局 - 全局页面中间内容布局样式 */
.div-middle-layout {
    width: 1100px;
    height: auto;
    min-height: 285px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-bottom: 0;
    margin-top: 0;
    min-width: 1100px;
}

/* 左侧主内容区 */
/* 左侧主内容区 - 全局页面左侧主内容区域样式 */
.div-content-left {
    width: 850px;
    flex-shrink: 0;
    text-align: left;
    vertical-align: top;
}

/* 右侧边栏 */
/* 右侧边栏 - 全局页面右侧边栏样式 */
.div-sidebar-right {
    width: 230px;
    flex-shrink: 0;
    margin-left: 0;
    text-align: left;
    vertical-align: top;
}

/* 中间间距 */
/* 中间间距 - 全局页面中间内容区域间距样式 */
.div-middle-spacer {
    width: 20px;
    flex-shrink: 0;
}

/* 标题栏 */
/* 标题栏 - 全局页面标题栏样式 */
.div-title-bar {
    width: 100%;
    height: 27px;
    background-image: url('../images/title_main.gif');
    background-repeat: repeat-x;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* 标题栏文本容器 */
/* 标题栏文本容器 - 全局页面标题栏文本布局 */
.div-title-bar span {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* 内容容器 */
/* 内容容器 - 全局页面内容容器样式 */
.div-content-box {
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    text-align: center;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid #663333;
    padding: 15px !important; /* 添加适当内边距，确保内容与边框有合适距离 */
}

/* 内容容器 - 自适应高度 */
/* 内容容器 - 全局页面自适应高度内容容器样式 */
.div-content-box-auto {
    height: auto !important;
    min-height: auto !important;
}

/* 内部表格区域 - 用于替换嵌套table */
/* 内部表格区域 - 全局页面内部表格样式 */
.div-inner-table {
    width: 100%;
    border: 1px solid #663333;
    border-collapse: collapse;
    background-color: #FFFFFF;
    table-layout: fixed;
}

/* 字母索引表头 */
/* 字母索引表头 - 全局页面字母索引表头样式 */
.div-letter-header {
    width: 5%;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    background-color: #e4e4e4;
    padding: 0;
    box-sizing: border-box;
    display: table-cell;
    font-weight: bold;
}

/* 内容单元格 */
/* 内容单元格 - 全局页面内容单元格样式 */
.div-content-cell {
    width: 95%;
    height: 22px;
    text-align: left;
    vertical-align: middle;
    background-color: #f7f7f7;
    padding-left: 10px;
    box-sizing: border-box;
    display: table-cell;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* 内部表格单元格 - 用于藏品页面 */
/* 内部表格单元格 - 控制藏品页面内部表格单元格样式 */
.div-inner-table-cell {
    display: table-cell;
    vertical-align: top;
    width: 100%;
    height: 100%;
}

/* 精品收藏区域 */
/* 精品收藏区域 - 全局页面精品收藏区域样式 */
.div-favorite-section {
    width: 850px;
    height: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

/* 精品收藏图片区域 */
/* 精品收藏图片区域 - 全局页面精品收藏顶部图片样式 */
.div-favorite-image-box {
    width: 850px;
    height: 13px;
    margin: 0 auto;
    border: none;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

/* 精品收藏图片尺寸 */
/* 精品收藏图片尺寸 - 全局页面精品收藏顶部图片尺寸 */
.div-favorite-image-box img {
    width: 850px;
    height: 13px;
    display: block;
}

/* 精品收藏主容器 */
/* 精品收藏主容器 - 全局页面精品收藏主容器样式 */
.div-favorite-container {
    width: 850px;
    border: none;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* 精品收藏表格样式 */
/* 精品收藏表格样式 - 全局页面精品收藏表格布局 */
.div-favorite-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

/* 精品收藏内容区 */
/* 精品收藏内容区 - 全局页面精品收藏内容区域样式 */
.div-favorite-content {
    height: auto;
    min-height: 220px;
    width: 850px;
    margin: 0 auto;
    vertical-align: top;
    background-image: url('../img/index_922.jpg');
    background-repeat: repeat-y;
    background-position: 0 0;
    text-align: center;
    padding: 15px 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* 精品收藏内容表格 */
/* 精品收藏内容表格 - 全局页面精品收藏内容表格布局 */
.div-favorite-content table {
    width: 93%;
    margin: 0 auto;
}

/* 精品收藏底部 */
/* 精品收藏底部 - 全局页面精品收藏底部样式 */
.div-favorite-bottom {
    width: 850px;
    height: 13px;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
}

/* 精品收藏底部图片 */
/* 精品收藏底部图片 - 全局页面精品收藏底部图片尺寸 */
.div-favorite-bottom img {
    width: 850px;
    height: 13px;
    display: block;
}

/* 底部区域 */
/* 底部区域 - 全局页面底部区域样式 */
.div-footer-section {
    width: 100%;
    min-height: 90px;
    margin: 0 auto;
    text-align: center;
    background-image: url('../images/s_bg.gif');
    background-repeat: repeat;
    background-size: auto;
    clear: both;
    display: block;
    position: relative;
    z-index: 1;
}

/* 底部内部容器 */
/* 底部内部容器 - 全局页面底部1200px容器样式 */
.div-footer-section .div-width-1200 {
    width: 1200px;
    height: 90px;
    margin: 0 auto;
    background-image: url('../images/pic_bottom.gif');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}

/* 底部 table 样式 */
/* 底部 table 样式 - 全局页面底部表格布局 */
.div-footer-section table {
    margin: 0 auto;
    display: table;
}

/* 底部表格单元格 */
/* 底部表格单元格 - 全局页面底部表格单元格样式 */
.div-footer-section table td {
    margin: 0;
    padding: 0;
}

/* 底部单元格样式 - 优先级更高 */
/* 底部单元格样式 - 全局页面底部单元格样式（高优先级） */
.div-footer-section .div-table-cell-footer {
    width: 1200px;
    height: 90px;
    margin: 0 auto;
    vertical-align: top;
    background-image: url('../images/pic_bottom.gif') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: contain !important;
}

/* 底部内部容器 - 新增 */
/* 底部内部容器 - 全局页面底部内部容器样式 */
.div-footer-inner {
    width: 1200px;
    height: 90px;
    margin: 0 auto;
    background-image: url('../images/pic_bottom.gif');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}

/* 产品网格布局 */
/* 产品网格布局 - 全局页面产品网格布局样式 */
.div-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* 产品项 */
/* 产品项 - 全局页面产品项样式 */
.div-product-item {
    border: 1px solid #EDDFC2;
    background-color: #FFF9F0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
}

/* 产品项悬停效果 */
/* 产品项悬停效果 - 全局页面产品项悬停动画 */
.div-product-item:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    transform: translateY(-3px);
}

/* 产品图片 */
/* 产品图片 - 全局页面产品图片容器样式 */
.div-product-image {
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #EDDFC2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: center;
    margin-bottom: 10px;
    box-sizing: border-box;
}

/* 产品图片尺寸 */
/* 产品图片尺寸 - 全局页面产品图片尺寸设置 */
.div-product-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 产品信息表格 */
/* 产品信息表格 - 全局页面产品信息表格样式 */
.div-product-info-table {
    width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;
}

/* 产品信息表格行 */
/* 产品信息表格行 - 全局页面产品信息表格行样式 */
.div-product-info-table tr {
    height: 19px;
    vertical-align: middle;
}

/* 产品信息表格首列 */
/* 产品信息表格首列 - 全局页面产品信息表格首列样式 */
.div-product-info-table td:first-child {
    width: 30%;
    text-align: right;
    color: #000000;
    padding-right: 5px;
    box-sizing: border-box;
}

.div-product-info-table td:last-child {
    width: 70%;
    text-align: left;
    padding-left: 5px;
    box-sizing: border-box;
}

/* 新闻列表容器 */
.news-list-container {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,0.05);
    border: none;
}

.page-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 1px solid #7f5022; /* 修改为更细的1px边框 */
}

/* 新闻列表项 */
.news-items-list {
    width: 100%;
    margin-bottom: 20px;
}

.news-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 8px;
    background-color: #FFFFFF;
    border: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    border-bottom: 1px dotted #e0d6c3;
}

.news-item-row:hover {
    background-color: #f9f9f9;
    box-shadow: 0 2px 6px rgba(127,80,34,0.10);
    transform: translateY(-1px);
}

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

.news-item-title {
    flex: 1;
    text-align: left;
    font-size: 16px;
    color: #333;
    padding-right: 15px;
}

.news-item-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-item-title a:hover {
    color: #7f5022;
    text-decoration: none;
    position: relative;
}

.news-item-title a:hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, #7f5022, transparent);
}

.news-icon {
    margin-right: 8px;
    font-size: 12px;
    vertical-align: middle;
}

.news-item-date {
    width: 120px;
    text-align: right;
    font-size: 14px;
    color: #666;
    white-space: nowrap;
}

/* 分页区域 */
.div-pagination {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    box-sizing: border-box;
}

.div-pagination table {
    width: 100%;
    border: 1px solid #7f5022;
    border-collapse: collapse;
}

.div-pagination table table {
    width: 96%;
    margin: 0 auto;
    border: none;
}

.div-pagination table td {
    background-color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

/* 清除浮动 */
.div-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 基础样式 */
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

body, td, th {
    font-size: 12px;
}

a {
    font-size: 12px;
}

a:link {
    text-decoration: none;
    color: #000000;
}

a:visited {
    text-decoration: none;
    color: #000000;
}

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

a:active {
    text-decoration: none;
}

/* 辅助类 */
.STYLE1 {
    color: #000000;
    font-size: 12px;
}

/* 原有样式类4 - 控制字体样式和大小（兼容旧代码） */
.STYLE4 {
    font-family: "新宋体";
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
    color: #000000;
    text-decoration: none;
}

.div-width-462 {
    width: 462px;
}

.div-width-700 {
    width: 700px;
}

.div-width-710 {
    width: 710px;
}

/* 联系页面特定样式 */
.STYLE6 {color: #FF0000}
.STYLE8 {color: #000000}
.STYLE9 {font-size: 12px}
.div-contact-table {
    width: 820px;
    border: 1px solid #D1CAAB;
    background-color: #FFFFFF;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    display: table;
}
.div-contact-table .div-row {
    display: table-row;
    border-bottom: 1px solid #DDDDDD;
    transition: background-color 0.3s;
}
.div-contact-table .div-row:last-child {
    border-bottom: none;
}
.div-contact-table .div-row:hover {
    background-color: #fafafa;
}
.div-contact-table .div-cell {
    display: table-cell;
    vertical-align: middle;
    height: 59px;
    padding: 0 8px;
    font-size: 13px;
    box-sizing: border-box;
}
.div-contact-table .div-cell-bg {
    background-color: #D1CAAB;
    width: 120px;
    text-align: center;
    border-right: 1px solid #DDDDDD;
    font-weight: bold;
    color: #333;
    padding: 0 10px;
}
.div-contact-table .div-cell-content {
    background-color: #FFFFFF;
    padding-left: 12px;
    border-right: none;
    color: #555;
}
.div-contact-table .div-cell-content:last-child {
    border-right: none;
}

/* 银行信息表格样式 */
.div-contact-table .bank-info-row {
    border-bottom: none;
}
.div-contact-table .bank-info-table {
    width: 100%;
    background-color: #FFFFFF;
    border-collapse: collapse;
    border: 1px solid #DDDDDD;
}
.div-contact-table .bank-info-item {
    display: table-row;
    height: 53px;
    border-bottom: 1px solid #DDDDDD;
}
.div-contact-table .bank-info-item:last-child {
    border-bottom: none;
}
.div-contact-table .bank-info-label {
    display: table-cell;
    background-color: #F5F5F5;
    width: 150px;
    padding: 8px 12px;
    border-right: 1px solid #DDDDDD;
    font-weight: bold;
    color: #333;
    vertical-align: middle;
    white-space: nowrap;
}
.div-contact-table .bank-info-value {
    display: table-cell;
    padding: 8px 12px;
    color: #555;
    vertical-align: middle;
    width: 100%;
    background-color: #FFFFFF;
}

/* QQ按钮样式 */
.qq-button {
    display: inline-block;
    padding: 4px 10px;
    background-color: #1e90ff;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 8px;
    margin-bottom: 4px;
    border: none;
    cursor: pointer;
}

/* QQ链接容器样式 - 确保QQ图标横向排列 */
.div-cell-content a[target="_blank"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    vertical-align: middle;
}
.div-cell-content a[target="_blank"]:last-child {
    margin-right: 0;
}
.div-cell-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.qq-button:hover {
    background-color: #4169e1;
}
.qq-button img {
    vertical-align: middle;
    margin-right: 4px;
    width: 16px;
    height: 16px;
}

.div-width-810 {
    width: 810px;
}

.div-width-850 {
    width: 850px;
}

.div-width-1000 {
    width: 1000px;
}

.div-width-1100 {
    width: 1100px;
}

.div-width-1200 {
    width: 1200px;
}

/* Flex 布局辅助 */
.div-flex-row {
    display: flex;
    flex-direction: row;
}

.div-flex-column {
    display: flex;
    flex-direction: column;
}

.div-align-center {
    text-align: center;
}

.div-align-left {
    text-align: left;
}

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

/* 响应式辅助 - 已禁用响应式布局以保持固定宽度 */
/*
@media screen and (max-width: 1200px) {
    .div-center-container,
    .div-main-section,
    .div-footer-section {
        width: 100%;
    }

    .div-middle-layout {
        width: 100%;
        flex-wrap: wrap;
    }

    .div-content-left,
    .div-sidebar-right {
        width: 100%;
        float: none;
    }

    .div-middle-spacer {
        display: none;
    }
}
*/

/* 幻灯片容器 */
.div-slideshow-container {
    width: 100%;
    height: 350px !important;
    text-align: center;
    border: none;
    padding: 0;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    margin: 0 auto;
    min-height: 350px !important;
}

.div-slideshow-container img {
    width: 100%;
    height: 350px;
    display: block;
    margin: 0 auto;
}

/* 幻灯片链接样式 */
.div-slideshow-container a {
    display: block;
    text-align: center;
    width: 100%;
    height: 350px;
    margin: 0 auto;
}

.div-slideshow-container a img {
    width: 100%;
    height: 350px;
    display: block;
}

/* 搜索表单区域 */
.div-search-form {
    padding: 10px;
    box-sizing: border-box;
}

.div-search-form .layui-inline {
    display: inline-block;
    margin: 0;
}

.div-search-form input {
    width: 160px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
}

.div-search-form button {
    padding: 5px 15px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
}

.div-search-form button:hover {
    background-color: #e5e5e5;
}

/* ========================================
   完整的表格替换样式 - 用于替换所有嵌套表格
   ======================================== */

/* 表格替换容器 - 模拟table标签 */
.div-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 响应式新闻列表 */
@media screen and (max-width: 768px) {
    .news-item-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .news-item-title {
        width: 100%;
        padding-right: 0;
    }
    
    .news-item-date {
        width: 100%;
        text-align: left;
    }
    
    .news-list-container {
        padding: 10px;
    }
    
    .page-name {
        font-size: 14px;
        padding-bottom: 8px;
    }
}

/* 特殊效果：新闻项动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.news-items-list .news-item-row {
    animation: fadeInUp 0.5s ease forwards;
}

.news-items-list .news-item-row:nth-child(1) { animation-delay: 0.1s; }
.news-items-list .news-item-row:nth-child(2) { animation-delay: 0.2s; }
.news-items-list .news-item-row:nth-child(3) { animation-delay: 0.3s; }
.news-items-list .news-item-row:nth-child(4) { animation-delay: 0.4s; }
.news-items-list .news-item-row:nth-child(5) { animation-delay: 0.5s; }

/* 表格行 - 模拟tr标签 */
.div-table-row {
    display: table-row;
}

/* 仅针对包含焦点图的表格行设置高度 */
.div-table:first-of-type .div-table-row:nth-child(2) {
    height: 285px;
}

/* 表格单元格 - 模拟td标签 */
.div-table-cell {
    display: table-cell;
    vertical-align: middle;
}

/* 表格头部单元格 - 模拟th标签 */
.div-table-header {
    display: table-cell;
    font-weight: bold;
    text-align: center;
    background-color: #e4e4e4;
}

/* 表格主体区域 - 模拟tbody */
.div-table-body {
    display: table-row-group;
}

/* 作品详情页特定样式 */

/* 作品详情主容器 */
.div-artwork-detail-container {
    width: 100%;
    min-height: 650px;
    display: table;
    table-layout: fixed;
}

/* 作品详情主内容 */
.div-artwork-detail-content {
    width: 100%;
    height: 695px;
    border: 1px solid #663333;
    background-color: #FFFFFF;
    display: table-cell;
    vertical-align: top;
}

/* 作品详情信息表 */
.div-artwork-info-table {
    width: 97%;
    border: 1px solid #7f5022;
    margin: 0 auto;
    display: table;
    table-layout: fixed;
}

/* 作品详情信息行 */
.div-artwork-info-row {
    display: table-row;
}

/* 作品详情信息单元格 */
.div-artwork-info-cell {
    display: table-cell;
    padding: 2px;
    border: 1px solid #7f5022;
    text-align: center;
    vertical-align: top;
}

/* 作品标题区域 */
.div-artwork-title-area {
    height: 30px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

/* 作品图片展示区域 */
.div-artwork-image-area {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

/* 作品框架样式 - 模拟画框效果 */


/* 作品详情信息列表 */
.div-artwork-details-list {
    width: 95%;
    margin: 0 auto;
    display: table;
}

.div-artwork-details-row {
    display: table-row;
}

.div-artwork-details-cell {
    display: table-cell;
    padding: 0;
    text-align: left;
    vertical-align: top;
    background-color: #e4e4e4;
    color: #000000;
}

/* 作品详情链接样式 */
.div-artwork-links {
    height: 25px;
    text-align: right;
    background-color: #e4e4e4;
    display: table-cell;
    vertical-align: middle;
}

/* 作品详情底部链接表 */
.div-artwork-links-table {
    width: 46%;
    height: 30px;
    margin: 0 auto;
    display: table;
}

/* 画廊布局相关 */
.gallery-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* 高度控制类 */
.div-height-338 {
    height: 338px;
}

/* 高度650px - 控制容器的固定高度 */
.div-height-650 {
    height: 650px;
}

/* 高度695px - 控制容器的固定高度 */
.div-height-695 {
    height: 695px;
}

/* 高度85px - 控制容器的固定高度 */
.div-height-85 {
    height: 85px;
}

/* 高度27px - 控制容器的固定高度 */
.div-height-27 {
    height: 27px;
}

/* 高度30px - 控制容器的固定高度 */
.div-height-30 {
    height: 30px;
}

/* 高度25px - 控制容器的固定高度 */
.div-height-25 {
    height: 25px;
}

/* 顶部区域容器样式，确保与原始表格布局一致 */
.div-top-section {
    background-image: url('../images/s_bg.gif');
    background-repeat: repeat;
    background-size: auto;
    display: block;
    min-height: 338px;
    overflow: visible;
    margin: 0;
    padding: 0;
    position: relative;
}

/* 主体区域容器 */
.div-main-section {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    height: auto;
    min-height: 650px;
    overflow: visible;
    min-width: 1200px;
}

/* 宽度控制类 */
.div-width-5 {
    width: 5%;
}

.div-width-10 {
    width: 10%;
}

.div-width-15 {
    width: 15%;
}

.div-width-20 {
    width: 20%;
}

.div-width-25 {
    width: 25%;
}

.div-width-30 {
    width: 30%;
}

.div-width-40 {
    width: 40%;
}

.div-width-50 {
    width: 50%;
}

.div-width-60 {
    width: 60%;
}

.div-width-70 {
    width: 70%;
}

.div-width-75 {
    width: 75%;
}

.div-width-80 {
    width: 80%;
}

.div-width-90 {
    width: 90%;
}

.div-width-95 {
    width: 95%;
}

.div-width-100 {
    width: 100%;
}

/* 高度控制类 */
.div-height-12 {
    height: 12px;
}

.div-height-133 {
    height: 133px;
}

.div-height-174 {
    height: 174px;
}

.div-height-20 {
    height: 20px;
}

.div-height-27 {
    height: 27px;
}

.div-height-285 {
    height: 285px;
}

.div-height-35 {
    height: 35px;
}

.div-height-45 {
    height: 45px;
}

.div-height-auto {
    height: auto;
}

.div-height-150 {
    height: 150px;
}

.div-height-160 {
    height: 160px;
}

.div-height-695 {
    height: 695px;
}

/* 背景颜色类 */
.div-bg-white {
    background-color: #FFFFFF;
}

.div-bg-gray-light {
    background-color: #e4e4e4;
}

.div-bg-gray-mid {
    background-color: #f7f7f7;
}

.div-bg-custom {
    background-color: #f5f5f5;
}

.div-bg-e6d7c8 {
    background-color: #e6d7c8;
}

/* 边框样式类 */
.div-border-1 {
    border: 1px solid #663333;
}

.div-border-2 {
    border: 1px solid #C1C1C1;
}

.div-border-none {
    border: none;
}

.div-border-top {
    border-top: 1px solid #7f5022;
}

/* 内边距控制类 */
.div-padding-2 {
    padding: 2px;
}

.div-padding-3 {
    padding: 3px;
}

.div-padding-5 {
    padding: 5px;
}

.div-padding-10 {
    padding: 10px;
}

/* 外边距控制类 */
.div-margin-auto {
    margin: 0 auto;
}

.div-margin-0 {
    margin: 0;
}

/* 文本对齐类 */
.div-text-center {
    text-align: center;
}

.div-text-left {
    text-align: left;
}

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

/* 垂直对齐类 */
.div-valign-top {
    vertical-align: top;
}

.div-valign-middle {
    vertical-align: middle;
}

.div-valign-bottom {
    vertical-align: bottom;
}

/* Flexbox 布局类 - 用于简单表格替换 */
.div-flex {
    display: flex;
}

.div-flex-wrap {
    flex-wrap: wrap;
}

.div-flex-nowrap {
    flex-wrap: nowrap;
}

.div-flex-justify-center {
    justify-content: center;
}

.div-flex-justify-start {
    justify-content: flex-start;
}

.div-flex-justify-between {
    justify-content: space-between;
}

.div-flex-align-center {
    align-items: center;
}

.div-flex-align-start {
    align-items: flex-start;
}

/* Grid 布局类 - 用于复杂表格替换 */
.div-grid {
    display: grid;
}

.div-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.div-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.div-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 表格替换容器 - 用于替换主数据表格 */
#table32 {
  display: flex;
  flex-direction: column;
  border: 1px solid #805e3c !important;
  overflow: hidden; /* 隐藏滚动条，内容自适应 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  -o-box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  -ms-box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  width: 100%;
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 13px;
  color: #333;
  min-height: auto;
  max-height: none;
  height: auto; /* 高度自适应内容 */
}

/* 表格行样式 */
.table-header, .table-row {
  display: flex;
  width: 100%;
}

/* 表格单元格样式 */
.table-header > div,
.table-row > div {
  padding: 10px 8px;
  text-align: center;
  border: 1px solid #805e3c !important;
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* 表头样式 */
.table-header {
  background-color: #e6d7c8;
  font-weight: bold;
  color: #663333;
  padding: 0;
}

.table-header > div {
  background-color: #e6d7c8;
  font-weight: bold;
  color: #663333;
  padding: 12px 8px;
}

/* 偶数行样式 */
.table-row:nth-child(even) {
  background-color: #f9f5f0;
}

/* 行悬停效果 */
.table-row:hover {
  background-color: #f0e6d8 !important;
  border: 1px solid #805e3c !important;
  box-shadow: 0 2px 6px rgba(128,94,60,0.2) !important;
}

/* 嵌套div样式重置 */
#table32 .table-header > div > div,
#table32 .table-row > div > div {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 嵌套链接样式 */
#table32 .table-row > div > div > a {
  display: block;
  padding: 5px 0;
}

/* 主内容区域布局 - 高优先级样式 */
.main.warp {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 10 !important;
}

.main.warp > .main_left {
  width: 100% !important;
  float: none !important;
  position: relative !important;
  z-index: 11 !important;
}

.main.warp > .channel {
  width: 100% !important;
  float: none !important;
  position: relative !important;
  z-index: 11 !important;
  margin-top: 10px !important;
}

.div-gap-10 {
    gap: 10px;
}

.div-gap-5 {
    gap: 5px;
}

/* 列表样式 */
.div-list {
    width: 100%;
    border: 1px solid #C1C1C1;
    background-color: #FFFFFF;
}

.div-list-item {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 5px;
    box-sizing: border-box;
    background-color: #f9f9f9;
}

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

.div-list-item:hover {
    background-color: #f0f0f0;
}

.div-list-label {
    width: 4%;
    background-color: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-sizing: border-box;
    font-weight: bold;
    border-right: 1px solid #ddd;
}

.div-list-content {
    width: 96%;
    padding-left: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    box-sizing: border-box;
}

/* 产品卡片网格（全宽） - 控制产品网格的布局和间距 */
.div-product-grid-full {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* 藏品页面专用产品容器 - 控制藏品网格的布局和排列方式 */
.product-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

/* 藏品页面专用产品项 - 控制每个藏品卡片的样式和布局 */
.g-item {
    margin: 5px 0.67%;
    padding: 10px;
    border: 1px solid #EDDFC2;
    background-color: #FFF9F0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border-radius: 5px;
    position: relative;
    width: 31.33%;
    box-sizing: border-box;
}

/* 藏品页面专用图片样式 - 控制藏品图片的样式和悬停效果 */
.g-img {
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #EDDFC2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* 藏品图片悬停效果 - 控制图片的悬停动画 */
.g-img:hover {
    border-color: #EDDFC2;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-3px);
}

/* 藏品卡片悬停效果 - 控制卡片的悬停动画 */
.g-item:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    transform: translateY(-3px);
}

/* 产品卡片 - 控制产品卡片的基础样式 */
.div-product-card {
    border: 1px solid #EDDFC2;
    background-color: #FFF9F0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* 产品卡片悬停效果 - 控制卡片的悬停动画 */
.div-product-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

/* 产品卡片图片 - 控制卡片图片的样式和布局 */
.div-product-card-img {
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #EDDFC2;
    text-align: center;
    box-sizing: border-box;
}

/* 产品卡片图片样式 - 控制图片的尺寸和显示方式 */
.div-product-card-img img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 产品卡片信息 - 控制卡片信息区域的内边距 */
.div-product-card-info {
    padding: 10px;
    box-sizing: border-box;
}

/* 产品信息行 - 控制产品信息行的布局和对齐 */
.div-product-info-row {
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    box-sizing: border-box;
}

/* 产品信息标签 - 控制信息标签的宽度和对齐方式 */
.div-product-info-label {
    width: 30%;
    text-align: right;
    padding-right: 5px;
    color: #000000;
    box-sizing: border-box;
}

/* 产品信息值 - 控制信息值的宽度和对齐方式 */
.div-product-info-value {
    width: 70%;
    text-align: left;
    padding-left: 5px;
    box-sizing: border-box;
}

/* 分类选择区域 - 控制筛选区域的背景和边框 */
.div-filter-section {
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    box-sizing: border-box;
}

/* 筛选行 - 控制筛选选项行的布局和边框 */
.div-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 20px;
    border-bottom: 1px dotted #ddd;
    box-sizing: border-box;
}

/* 筛选标签 - 控制筛选选项标签的宽度和字体 */
.div-filter-label {
    width: 40px;
    font-weight: bold;
    flex-shrink: 0;
}

/* 筛选选项容器 - 控制筛选选项的布局和间距 */
.div-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
}

/* 筛选选项 - 控制单个筛选选项的样式和交互 */
.div-filter-option {
    padding: 5px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 筛选选项悬停效果 - 控制选项的悬停背景色 */
.div-filter-option:hover {
    background-color: #f0f0f0;
}

/* 激活的筛选选项 - 控制当前选中选项的样式 */
.div-filter-option.active {
    background-color: #1c86d1;
    color: #fff;
    border-color: #1c86d1;
}

/* 分页样式容器 - 控制分页区域的布局和内边距 */
.div-pagination-container {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    box-sizing: border-box;
}

/* 分页包装器 - 控制分页元素的布局和样式 */
.div-pagination-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #FFFFFF;
    border: 1px solid #7f5022;
    padding: 5px 10px;
    border-radius: 3px;
}

/* 分页信息 - 控制分页信息文本的样式和间距 */
.div-pagination-info {
    padding: 0 10px;
    color: #666;
}

/* 分页链接 - 控制分页链接的样式和交互 */
.div-pagination-link {
    padding: 5px 12px;
    border: 1px solid #ddd;
    background-color: #eee;
    text-decoration: none;
    color: #666;
    border-radius: 3px;
    transition: all 0.2s ease;
}

/* 分页链接悬停效果 - 控制链接的悬停背景色 */
.div-pagination-link:hover {
    background-color: #ccc;
}

/* 激活的分页链接 - 控制当前页码链接的样式 */
.div-pagination-link.active {
    background-color: #ccc;
    font-weight: bold;
}

/* 响应式产品网格 - 控制不同屏幕尺寸下的产品网格布局 */
@media screen and (max-width: 1024px) {
    /* 平板设备 - 产品网格显示2列 */
    .div-product-grid-full {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    /* 移动设备 - 产品网格显示1列 */
    .div-product-grid-full {
        grid-template-columns: 1fr;
    }
    
    /* 移动设备 - 列表项垂直排列 */
    .div-list-item {
        flex-direction: column;
    }
    
    /* 移动设备 - 列表标签和内容全宽显示 */
    .div-list-label,
    .div-list-content {
        width: 100%;
    }
}

/* 辅助工具类 - 提供常用的布局和显示控制 */

/* 隐藏元素 - 控制元素的显示状态 */
.div-hidden {
    display: none;
}

/* 显示元素（块级） - 控制元素的显示状态 */
.div-visible {
    display: block;
}

/* 内联元素 - 控制元素的显示方式 */
.div-inline {
    display: inline;
}

/* 内联块元素 - 控制元素的显示方式 */
.div-inline-block {
    display: inline-block;
}

/* 块级元素 - 控制元素的显示方式 */
.div-block {
    display: block;
}

/* 边框颜色类 - 提供预定义的边框颜色 */

/* 边框颜色：深棕色 */
.div-border-color-663333 {
    border-color: #663333;
}

/* 边框颜色：浅灰色 */
.div-border-color-C1C1C1 {
    border-color: #C1C1C1;
}

/* 边框颜色：棕褐色 */
.div-border-color-7f5022 {
    border-color: #7f5022;
}

/* 宽度类 - 提供预定义的宽度设置 */

/* 宽度1200px - 控制容器的固定宽度 */
.div-width-1200 {
    width: 1200px;
}

/* 背景图片类 - 提供预定义的背景图片 */

/* 背景图片：pic_bottom.gif - 控制底部图片背景 */
.div-bg-pic-bottom {
    background-image: url('../images/pic_bottom.gif');
    background-repeat: no-repeat;
}

/* 字体颜色类 - 提供预定义的字体颜色 */

/* 字体颜色：黑色 */
.div-color-black {
    color: #000000;
}

/* 字体颜色：红色 */
.div-color-red {
    color: #FF0000;
}

/* 字体颜色：橙色 */
.div-color-orange {
    color: #FF3300;
}

/* 字体颜色：绿色 */
.div-color-green {
    color: #009900;
}

/* 字体颜色：蓝色 */
.div-color-blue {
    color: #1c86d1;
}

/* 字体大小类 - 提供预定义的字体大小 */

/* 字体大小：12px */
.div-font-12 {
    font-size: 12px;
}

/* 字体大小：14px */
.div-font-14 {
    font-size: 14px;
}

/* 字体粗细：粗体 */
.div-font-bold {
    font-weight: bold;
}

/* ========================================
   名家作品页面特定样式
   ======================================== */

/* 面包屑导航样式 */
.breadcrumb-container {
    width: 100%;
    margin-bottom: 10px;
}

.breadcrumb-bg {
    background-image: url('../images/title_newsmain.gif');
    background-repeat: repeat-x;
    height: 27px;
    display: flex;
    align-items: center;
}

.breadcrumb-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.breadcrumb-left {
    text-align: left;
}

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

/* 艺术家信息容器 */
.artist-info-container {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #663333;
    padding: 15px;
    box-sizing: border-box;
}

.artist-info-content {
    width: 100%;
}

/* 艺术家详情行 */
.artist-details {
    width: 100%;
    margin-bottom: 20px;
}

.artist-detail-row {
    display: flex;
    flex-wrap: nowrap;
}

/* 艺术家照片单元格 */
.artist-photo-cell {
    width: 20%;
    padding: 10px;
    box-sizing: border-box;
}

.artist-photo-bg {
    background-color: #f7f7f7;
    padding: 10px;
    border: 1px solid #e4e4e4;
    text-align: center;
}

.photo-wrapper {
    position: relative;
}

/* 艺术家简介单元格 */
.artist-bio-cell {
    width: 80%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f7f7f7;
    border: 1px solid #e4e4e4;
}

.artist-bio-content {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    text-align: left;
}

/* 作品部分 */
.artist-work-section {
    width: 100%;
    margin-bottom: 20px;
}

.work-list-bg {
    background-color: #e4e4e4;
    padding: 15px;
    box-sizing: border-box;
}

.work-list-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* 作品项 */
.work-item {
    background-color: #ffffff;
    border: 1px solid #e4e4e4;
    padding: 15px;
    box-sizing: border-box;
}

.work-info {
    width: 100%;
}

.work-info-row {
    display: flex;
    margin-bottom: 8px;
    align-items: flex-start;
}

.work-info-label {
    width: 30%;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.work-info-value {
    width: 70%;
    text-align: left;
    box-sizing: border-box;
}

/* 分页部分 */
.pagination-section {
    width: 100%;
    margin-top: 20px;
}

.pagination-container {
    width: 100%;
    background-color: #e4e4e4;
    padding: 15px;
    box-sizing: border-box;
}

.pagination-content {
    width: 100%;
    text-align: center;
}

.pagination-info {
    font-size: 14px;
    color: #333;
}

.pagination-info a {
    color: #0000ff;
    text-decoration: none;
}

.pagination-info a:hover {
    text-decoration: underline;
}

/* 大图显示样式 */
#large-image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#large-image-container.show {
    display: flex;
}

#large-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* 响应式设计 */
@media screen and (max-width: 1024px) {
    .work-list-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .artist-detail-row {
        flex-direction: column;
    }
    
    .artist-photo-cell,
    .artist-bio-cell {
        width: 100%;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 768px) {
    .work-list-container {
        grid-template-columns: 1fr;
    }
    
    .work-info-row {
        flex-direction: column;
    }
    
    .work-info-label,
    .work-info-value {
        width: 100%;
        text-align: left;
        padding-right: 0;
    }
    
    .work-info-label {
        margin-bottom: 5px;
    }
}

/* ========================================
   Top导航文件 (Topsy.php/Top.php) 专用样式
   ======================================== */

/* 顶部导航外层容器 (width=1100, height=174, bg=main_bg_02.jpg) */
.div-grid-top-nav {
    display: grid;
    grid-template-areas:
        "title-01 title-04"
        "empty-15 title-04"
        "nav-menu title-04"
        "empty-10 title-04"
        "empty title-04";
    grid-template-rows: 3px 80px 15px 10px 10px 1fr 3px;
    grid-template-columns: 1fr 360px;
    width: 1100px;
    height: 210px;
    margin: 0 auto;
    background-image: url('../images/main_bg_02.jpg');
    background-repeat: repeat;
    box-sizing: border-box;
    padding: 0;
    align-items: start;
}

/* 内层Grid容器 - 已废弃，直接使用外层grid */
.div-grid-top-nav-inner {
    display: grid;
    grid-template-areas:
        "title-01 title-04"
        "empty-15 title-04"
        "nav-menu title-04"
        "empty-10 title-04"
        "empty title-04";
    grid-template-rows: 20px 15px 10px 10px 1fr;
    grid-template-columns: 1fr 360px;
    width: 100%;
    height: 169px;
    box-sizing: border-box;
    margin: auto 0;
}

/* title_01.gif - 第2行第1列 */
.div-grid-item-title-01 {
    grid-area: title-01;
    grid-row: 2;
    grid-column: 1;
    height: 71px;
    text-align: left;
    align-self: start;
}

/* title_04.png - 第2-6行第2列 (rowspan=5) */
.div-grid-item-title-04 {
    grid-area: title-04;
    grid-row: 2 / span 5;
    grid-column: 2;
    height: 200px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-self: start;
}

/* 空行 - 第3行第1列 (height=15) */
.div-grid-item-empty-15 {
    grid-area: empty-15;
    grid-row: 3;
    grid-column: 1;
    height: 15px;
    align-self: start;
}

/* 导航菜单 - 第4行第1列 (height=10) */
.div-grid-item-nav {
    grid-area: nav-menu;
    grid-row: 4;
    grid-column: 1;
    height: 10px;
    position: relative;
    z-index: 100;
    align-self: start;
}

/* 空行 - 第5行第1列 (height=10) */
.div-grid-item-empty-10 {
    grid-area: empty-10;
    grid-row: 5;
    grid-column: 1;
    height: 10px;
    align-self: start;
}

/* 空行 - 第6行第1列 */
.div-grid-item-empty {
    grid-area: empty;
    grid-row: 6;
    grid-column: 1;
    align-self: start;
}

/* 导航菜单表格 (width=100%) */
.div-table-nav-menu {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 100;
}

/* 顶部导航表格行 */
.div-table-row-top-nav {
    display: table-row;
}

/* 顶部导航表格单元格 */
.div-table-cell-top-nav {
    display: table-cell;
    vertical-align: middle;
}

/* 导航菜单项单元格 - 控制导航菜单项的宽度和对齐方式 */
.div-width-45 {
    width: 45px;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
}

/* 背景图片：main_bg_02.jpg - 控制顶部导航区域的背景 */
.div-bg-main-02 {
    background-image: url('../images/main_bg_02.jpg');
    background-repeat: repeat;
}

/* 垂直对齐：顶部 - 控制元素的垂直对齐方式 */
.div-valign-top {
    vertical-align: top;
}

/* 文本左对齐 - 控制元素的文本对齐方式 */
.div-text-left {
    text-align: left;
}

/* ========================================
   404页面专用样式 - 完全模拟表格布局
   ======================================== */

/* 404页面最外层表格 - 控制404页面的整体布局 */
.div-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 404页面表格行 - 控制404页面的表格行布局 */
.div-table-row-404 {
    display: table-row;
}

/* 404页面表格单元格 - 控制404页面的表格单元格布局 */
.div-table-cell-404 {
    display: table-cell;
    vertical-align: middle;
}

/* 404页面第一层单元格 - 控制404页面第一层单元格的高度和背景 */
.div-height-338.div-valign-top.div-bg-s-bg {
    height: 338px;
    vertical-align: top;
    background-image: url('../images/s_bg.gif');
    background-repeat: repeat;
}

/* 1200px居中容器表格 - 控制1200px宽度的居中容器 */
.div-table-1200 {
    display: table;
    width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* 主体区域表格 - 控制主体区域的表格布局 */
.div-table-main {
    display: table;
    width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}

.div-height-650 {
    height: 650px;
}

/* 左边栏宽度29px - 控制左边栏的固定宽度 */
.div-width-29 {
    width: 29px;
}

/* 左边栏背景 - 控制左边栏的背景图片 */
.div-bg-pic-left {
    background-image: url('../images/pic_left.gif');
    background-repeat: repeat-y;
}

/* 中间内容区背景 - 控制中间内容区的背景图片 */
.div-bg-main {
    background-image: url('../images/main_bg.jpg');
    background-repeat: repeat;
}

/* 顶部导航表格 - 控制顶部导航的表格布局 */
.div-table-1100 {
    display: table;
    width: 1100px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* 顶部导航表格居中 - 控制顶部导航表格的居中显示 */
.div-table-1100.div-text-center {
    margin: 0 auto;
}

/* 404页面顶部导航表格居中 - 控制404页面中顶部导航表格的居中显示 */
.div-table-cell-404 .div-table-1100 {
    margin: 0 auto;
}

/* 高度12px - 控制容器的固定高度 */
.div-height-12 {
    height: 12px;
}

/* 中间内容表格高度 - 控制中间内容表格的固定高度 */
.div-height-20 {
    height: 20px;
}

/* 标题栏背景 - 控制标题栏的背景图片和位置 */
.div-bg-title-news {
    background-image: url('../images/title_newsmain.gif');
    background-repeat: no-repeat;
    background-position: left center;
}

/* 标题栏高度 - 控制标题栏的固定高度 */
.div-height-27 {
    height: 27px;
}

/* 内容表格 - 控制内容区域的表格布局 */
.div-table-content {
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 内容表格高度 - 控制内容表格的固定高度 */
.div-height-1090 {
    height: 1090px;
}

/* 边框样式 - 控制元素的边框样式 */
.div-border-663333 {
    border: none;
}

/* 右边栏宽度32px - 控制右边栏的固定宽度 */
.div-width-32 {
    width: 32px;
}

/* 右边栏背景 - 控制右边栏的背景图片 */
.div-bg-pic-right {
    background-image: url('../images/pic_right.gif');
    background-repeat: repeat-y;
}

/* 底部表格 - 控制底部区域的表格布局 */
.div-table-footer {
    display: table;
    width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* 底部表格行 - 控制底部表格的行布局 */
.div-table-row-footer {
    display: table-row;
}

/* 底部表格单元格 - 控制底部表格的单元格布局 */
.div-table-cell-footer {
    display: table-cell;
}

/* 高度90px - 控制容器的最小高度 */
.div-height-90 {
    min-height: 90px;
}

/* 底部单元格背景 - 控制底部单元格的背景图片 */
.div-bg-pic-bottom {
    background-image: url('../images/pic_bottom.gif');
    background-repeat: no-repeat;
}

/* 文本对齐 - 提供文本对齐方式的工具类 */

/* 文本居中 - 控制元素的文本居中对齐 */
.div-text-center {
    text-align: center;
}

/* 文本左对齐 - 控制元素的文本左对齐 */
.div-text-left {
    text-align: left;
}

/* About页面内容区高度 - 控制About页面内容区的固定高度 */
.div-height-695 {
    height: 695px;
}

/* 内容区背景 - 控制内容区域的白色背景 */
.div-bg-white {
    background-color: #FFFFFF;
}

/* 无边框 - 控制元素的边框样式 */
.div-border-none {
    border: none;
}

/* 收藏内容高度 - 控制收藏内容的背景重复方式 */
.div-table-cell .div-favorite-content {
    background-repeat: repeat-y;
}

/* About页面通用样式 - 控制About页面的文本样式和间距 */
.f2 {
	line-height: 24px;
	text-align: left;
	padding: 15px;
}

/* About页面段落样式 - 控制About页面段落的间距和缩进 */
.f2 p {
	margin-bottom: 15px;
	text-indent: 2em;
}

/* 内容容器 - 左对齐 - 控制内容容器的布局和样式 */
.div-content-left-align {
    width: 100%;
    height: 695px;
    background-color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border: 1px solid #663333;
}

/* 友情链接样式 - 控制友情链接容器的布局和内边距 */
.friend-link-container {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

/* 友情链接标题 - 控制友情链接标题的样式和间距 */
.friend-link-container h3 {
    text-align: center;
    color: #663333;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* 友情链接容器 - 控制友情链接列表的布局 */
.friend-links-container {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* 链接网格 - 控制链接的网格布局 */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 友情链接项 - 控制友情链接项的文本对齐 */
.friendlink-item {
    text-align: center;
}

/* 友情链接锚点 - 控制友情链接的样式和布局 */
.friendlink-item .link-anchor {
    display: block;
    padding: 10px 12px;
    background-color: #f9f5f0;
    border: 1px solid #e0d0b8;
    color: #663333;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease;
    border-radius: 4px;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}

/* 友情链接悬停效果 - 控制友情链接的悬停动画 */
.friendlink-item .link-anchor:hover {
    background-color: #e6d7c8;
    border-color: #c1b198;
    color: #805e3c;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(128,94,60,0.1);
}

/* 适配不同屏幕宽度 - 控制移动设备上的友情链接布局 */
@media screen and (max-width: 768px) {
    /* 移动设备 - 调整链接网格布局 */
    .links-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    
    /* 移动设备 - 调整链接样式 */
    .friendlink-item .link-anchor {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* 样式类1 - 控制文本颜色和大小 */
.style1 {
	color: #000000;
	font-size: 12px;
}

/* 样式类4 - 控制文本样式和行高 */
.style4 {
	color: #EDDFC2;
	font-family: "新宋体";
	font-size: 12px;
	font-style: normal;
	line-height: 18px;
	color: #000000;
	text-decoration: none;
}

/* 样式类6 - 控制红色文本颜色 */
.style6 {
	color: #FF0000;
}

/* 样式类8 - 控制黑色文本颜色 */
.style8 {
	color: #000000;
}

/* 样式类9 - 控制12px字体大小 */
.style9 {
	font-size: 12px;
}

/* 垂直对齐 - 提供垂直对齐方式的工具类 */

/* 垂直对齐：顶部 - 控制元素的垂直对齐方式 */
.div-valign-top {
    vertical-align: top;
}

/* 垂直对齐：中间 - 控制元素的垂直对齐方式 */
.div-valign-middle {
    vertical-align: middle;
}

/* ========================
   404页面样式
   ======================== */

/* 404页面容器 - 控制404页面的整体布局 */
.div-table-404 {
    display: table;
    width: 100%;
    margin: 0 auto;
}

/* 404页面表格行 - 控制404页面的表格行布局 */
.div-table-row-404 {
    display: table-row;
}

/* 404页面表格单元格 - 控制404页面的表格单元格布局 */
.div-table-cell-404 {
    display: table-cell;
}

/* 338px高度单元格 - 控制404页面顶部单元格的高度和背景 */
.div-height-338 {
    height: 338px;
    background-image: url('../images/s_bg.gif');
    background-repeat: repeat;
}

/* 650px高度主区域 - 控制404页面主区域的高度 */
.div-height-650 {
    height: 650px;
}

/* 1200px容器 - 控制404页面的1200px宽度容器 */
.div-table-1200 {
    display: table;
    width: 1200px;
    margin: 0 auto;
}

/* 左边栏 - 控制404页面左边栏的宽度和背景 */
.div-width-29 {
    width: 29px;
    background-image: url('../images/pic_left.gif');
    background-repeat: repeat-y;
}

/* 右边栏 - 控制404页面右边栏的宽度和背景 */
.div-width-32 {
    width: 32px;
    background-image: url('../images/pic_right.gif');
    background-repeat: repeat-y;
}

/* 1100px中间容器 - 控制404页面中间内容的1100px宽度容器 */
.div-table-1100 {
    display: table;
    width: 1100px;
    margin: 0 auto;
}

/* 12px高度 - 控制404页面中12px高度的元素 */
.div-height-12 {
    height: 12px;
}

/* 20px高度 - 控制404页面中20px高度的元素 */
.div-height-20 {
    height: 20px;
}

/* 1090px高度内容区 - 控制404页面内容区的高度 */
.div-height-1090 {
    height: 1090px;
}

/* 标题背景 - 新样式 - 控制页面标题的背景图片 */
.div-bg-title-news {
    background-image: url('../images/title_newsmain.gif');
    background-repeat: repeat-x;
}

/* 主背景 - 控制页面的主背景图片 */
.div-bg-main {
    background-image: url('../images/main_bg.jpg');
    background-repeat: repeat;
}

/* ========================================
   Buy.php 页面专用样式
   ======================================== */

/* 页面背景 - 控制Buy页面的背景图片 */
.div-page-bg {
    background-image: url('../images/s_bg.gif');
    background-repeat: repeat;
}

/* 顶部图片容器 - 控制Buy页面顶部图片的容器布局 */
.div-top-image-container {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* 顶部图片样式 - 控制Buy页面顶部图片的尺寸和显示方式 */
.div-top-image {
    width: 1200px;
    height: 82px;
    display: block;
}

/* 主体区域容器 - 控制Buy页面的整体布局和高度 */
.div-main-container {
    width: 1200px;
    height: auto;
    min-height: 650px;
    margin: 0 auto;
    display: flex;
    box-sizing: border-box;
}

/* 左侧边栏 - 控制Buy页面左侧的装饰性边栏 */
.div-left-sidebar {
    width: 29px;
    background-image: url('../images/pic_left.gif');
    background-repeat: repeat-y;
    flex-shrink: 0;
}

/* 右侧边栏 - 控制Buy页面右侧的装饰性边栏 */
.div-right-sidebar {
    width: 32px;
    background-image: url('../images/pic_right.gif');
    background-repeat: repeat-y;
    flex-shrink: 0;
}

/* 中央内容区域 - 控制Buy页面的中央内容区域布局 */
.div-center-content {
    flex: 1;
    background-image: url('../images/main_bg.jpg');
    background-repeat: repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}

/* 导航区域 - 控制Buy页面的导航栏布局和高度 */
.div-nav-container {
    width: 1100px;
    height: 12px;
    padding: 3px 0;
    margin: 0 auto;
    text-align: center;
}

/* 内容布局容器 - 控制Buy页面的内容区域布局 */
.div-content-layout {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0;
    justify-content: space-between;
    box-sizing: border-box;
}

/* 左侧内容区 - 控制Buy页面左侧主要内容的宽度和布局 */
.div-left-content {
    width: 850px;
    display: flex;
    flex-direction: column;
}

/* 右侧边栏 - 控制Buy页面右侧内容的宽度和对齐方式 */
.div-right-content {
    width: 230px;
    text-align: left;
}

/* 标题栏样式 - 控制Buy页面标题栏的背景和布局 */
.div-title-bar {
    width: 100%;
    height: 27px;
    background-image: url('../images/title_main.gif');
    background-repeat: repeat-x;
    display: flex;
    align-items: center;
    padding-left: 10px;
    box-sizing: border-box;
}

/* 标题栏文字样式 - 控制Buy页面标题栏文字的样式 */
.div-title-text {
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
}

/* 内容盒子 - 控制Buy页面内容区域的边框和背景 */
.div-content-box {
    width: 100%;
    height: 695px;
    border: 1px solid #663333;
    background-color: #FFFFFF;
    text-align: center;
    box-sizing: border-box;
    overflow: visible !important; /* 确保内容不会被隐藏 */
}

/* 联系页面内容容器间距 - 确保联系页面内容与底部之间有足够的间距 */
.div-contact-content-spacing {
    height: 20px !important;
    display: block !important;
    clear: both !important;
    visibility: visible !important;
}

/* 作品搜索区域样式 - 控制搜索组件的整体布局和样式 */
.component {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 内部容器样式 - 调整搜索区域内部容器的内边距 */
.inner-container {
    padding: 10px 5px !important;
    height: auto !important;
    min-height: 0 !important;
}

/* 搜索框上方间距 - 调整搜索表单的顶部间距 */
.component .layui-form {
    margin-top: 0 !important;
}

/* 第一个内联元素间距 - 调整第一个搜索框的顶部间距 */
.component .layui-inline:first-child {
    margin-top: 5px !important;
}

/* 表单底部间距 - 减少表单的底部空白 */
.inner-container .layui-form {
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* 按钮底部间距 - 减少按钮的底部空白 */
.inner-container button {
    margin-bottom: 0 !important;
}

/* 内部容器子元素高度 - 确保搜索区域内容紧凑 */
.inner-container > div {
    height: auto !important;
    min-height: 0 !important;
}

/* 内部容器所有元素 - 确保没有多余的底部间距 */
.inner-container * {
    margin-bottom: 0 !important;
}

/* 搜索按钮下方空白 - 隐藏搜索区域下方的空白元素 */
.component + * {
    display: none !important;
}

/* 搜索表单宽度 - 控制搜索表单的宽度和高度 */
.component .layui-form {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
}

/* 内联元素样式 - 控制搜索表单中内联元素的布局 */
.component .layui-inline {
    margin-bottom: 10px !important;
    display: block !important;
    width: 100% !important;
}

/* 输入框样式 - 控制搜索输入框的尺寸和布局 */
.component .layui-input {
    width: 100% !important;
    max-width: 200px !important;
    height: 28px !important;
    box-sizing: border-box !important;
}

/* 按钮样式 - 控制搜索按钮的样式和交互 */
.component .layui-btn {
    width: 100% !important;
    max-width: 200px !important;
    height: 32px !important;
    box-sizing: border-box !important;
    margin-top: 8px !important;
    background-color: #a67c52 !important;
    color: #ffffff !important;
    border: 1px solid #8c623a !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    line-height: 30px !important;
}

/* 按钮悬停效果 - 控制搜索按钮的悬停动画 */
.component .layui-btn:hover {
    background: linear-gradient(135deg, #a67c52 0%, #b8916a 50%, #c9a783 100%) !important;
    border-color: #8c623a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(166, 124, 82, 0.4) !important;
}

/* 按钮点击效果 - 控制搜索按钮的点击状态动画 */
.component .layui-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(166, 124, 82, 0.4) !important;
}

/* 移除搜索区域换行符 - 隐藏搜索区域中的换行符 */
.component br {
    display: none !important;
}

/* 页面内容样式 - 控制页面内容的宽度和对齐方式 */
.div-page-content {
    width: 95%;
    margin: 0 auto;
    text-align: left;
}

/* 页面内容文字样式 - 控制页面内容的文字样式和间距 */
.div-page-content .f2 {
    font-size: 12px;
    line-height: 24px;
    text-align: left;
    padding: 15px;
}

/* 收藏区域容器 - 控制收藏页面的整体布局 */
.div-favorite-container {
    width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* 收藏顶部图片 - 控制收藏区域的顶部装饰图片 */
.div-favorite-top {
    width: 850px;
    height: 13px;
}

/* 收藏内容区域 - 控制收藏内容的背景和布局 */
.div-favorite-content {
    height: auto;
    min-height: 150px;
    width: 850px;
    background-image: url('../img/index_922.jpg');
    background-repeat: repeat-y;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 收藏内容内层表格 - 控制收藏内容的内层表格布局 */
.div-favorite-inner {
    width: 93%;
    margin: 0 auto;
}

/* 收藏底部图片 - 控制收藏区域的底部装饰图片 */
.div-favorite-bottom {
    width: 850px;
    height: 13px;
}

/* 底部容器 - 控制页面底部的背景和布局 */
.div-footer-container {
    width: 1200px;
    margin: 0 auto;
    height: 90px;
    background-image: url('../images/pic_bottom.gif');
    background-repeat: no-repeat;
    background-position: center top;
}

/* 通用背景图片类 - 提供预定义的背景图片 */

/* 左侧背景图片 - 控制左侧边栏的背景图片 */
.div-bg-pic-left {
    background-image: url('../images/pic_left.gif');
    background-repeat: repeat-y;
}

/* 右侧背景图片 - 控制右侧边栏的背景图片 */
.div-bg-pic-right {
    background-image: url('../images/pic_right.gif');
    background-repeat: repeat-y;
}

/* 标题背景图片 - 控制标题栏的背景图片 */
.div-bg-title-main {
    background-image: url('../images/title_main.gif');
    background-repeat: repeat-x;
}

/* 通用尺寸类 - 提供预定义的宽度设置 */

/* 宽度850px - 控制容器的固定宽度 */
.div-width-850 {
    width: 850px;
}

/* 宽度230px - 控制容器的固定宽度 */
.div-width-230 {
    width: 230px;
}

/* 宽度1100px - 控制容器的固定宽度 */
.div-width-1100 {
    width: 1100px;
}

/* 宽度1200px - 控制容器的固定宽度 */
.div-width-1200 {
    width: 1200px;
}

/* 通用高度类 - 提供预定义的高度设置 */

/* 高度82px - 控制容器的固定高度 */
.div-height-82 {
    height: 82px;
}

/* 高度90px - 控制容器的最小高度 */
.div-height-90 {
    min-height: 90px;
}

/* 高度27px - 控制容器的固定高度 */
.div-height-27 {
    height: 27px;
}

/* 高度695px - 控制容器的固定高度 */
.div-height-695 {
    height: 695px;
}

/* 高度150px - 控制容器的固定高度 */
.div-height-150 {
    height: 150px;
}

/* 文字颜色类 - 提供预定义的文字颜色 */

/* 文字颜色：黑色 */
.div-color-black {
    color: #000000;
}

/* 文字颜色：红色 */
.div-color-red {
    color: #FF0000;
}

/* 文字颜色：橙色 */
.div-color-orange {
    color: #FF3300;
}

/* 字体大小类 - 提供预定义的字体大小和粗细 */

/* 字体大小：12px */
.div-font-12 {
    font-size: 12px;
}

/* 字体粗细：粗体 */
.div-font-bold {
    font-weight: bold;
}

/* 位置调整 - 控制元素的外边距 */

/* 水平居中 - 控制元素在水平方向上居中显示 */
.div-margin-auto {
    margin: 0 auto;
}

/* 原有样式类兼容 - 确保与旧样式类的兼容性 */

/* 原有样式类1 - 控制文本颜色和大小（兼容旧代码） */
.STYLE1 {
    color: #000000;
    font-size: 12px;
}

/* 原有样式类4 - 控制字体样式和大小（兼容旧代码） */
.STYLE4 {
    font-family: "新宋体";
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
    color: #000000;
    text-decoration: none;
}

/* 原有样式类6 - 控制红色文本颜色（兼容旧代码） */
.STYLE6 {
    color: #FF0000;
}

/* 原有样式类8 - 控制黑色文本颜色（兼容旧代码） */
.STYLE8 {
    color: #000000;
}

/* 原有样式类9 - 控制12px字体大小（兼容旧代码） */
.STYLE9 {
    font-size: 12px;
}

/* 文本样式类 - 控制文本的字体大小、行高和内边距 */
.f2 {
    font-size: 12px;
    line-height: 24px;
    text-align: left;
    padding: 15px;
}

/* 背景样式类 - 控制背景图片的显示 */
.bj2 {
    background-image: url('../img/index_922.jpg');
    background-repeat: repeat-y;
}

/* ========================================
   Elder.php 页面专用样式
   ======================================== */

/* ========================================
   News.php 页面专用样式
   ======================================== */

/* 主内容包装器 - 控制News页面的主内容区域布局 */
.main-wrapper {
    width: 1100px;
    height: auto;
    min-height: 285px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 20px;
    position: relative;
    z-index: auto;
}

/* 内容包装器 - 控制News页面的内容区域布局和宽度 */
.content-wrapper {
    flex: 1;
    min-width: 0;
    max-width: 850px;
}

/* 位置栏 - 控制News页面的位置导航栏样式 */
.location-bar {
    width: 100%;
    height: 27px;
    background-image: url('../images/title_main.gif');
    background-repeat: repeat-x;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* 新闻容器 - 控制News页面的新闻区域边框和背景 */
.news-container {
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #663333;
    box-sizing: border-box;
}

/* 新闻内容 - 控制News页面的新闻内容内边距 */
.news-content {
    padding: 10px;
    box-sizing: border-box;
}

/* 新闻内部 - 控制News页面的新闻内部对齐方式 */
.news-inner {
    width: 100%;
    text-align: left;
}

/* 页面名称 - 控制News页面的页面标题样式 */
.page-name {
    height: 20px;
    margin-bottom: 10px;
    font-size: 12px;
}

/* 新闻列表 - 控制News页面的新闻列表样式 */
.news-list {
    width: 100%;
    min-height: 400px;
    max-height: 800px;
    overflow-y: auto;
    border: 1px solid #7f5022;
    background-color: #FFFFFF;
    padding: 10px;
    box-sizing: border-box;
}

/* 新闻项 - 控制News页面的单个新闻条目样式 */
.news-item {
    margin-bottom: 8px;
    text-align: left;
    font-size: 12px;
}

/* 新闻链接 - 控制News页面的新闻链接样式 */
.news-item a {
    text-decoration: none;
    color: #000000;
}

/* 新闻链接悬停 - 控制News页面的新闻链接悬停效果 */
.news-item a:hover {
    color: #FF3300;
}

/* 分页 - 控制News页面的分页样式 */
.pagination {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
}

/* 收藏区域 - 控制News页面的收藏区域样式 */
.collection-section {
    margin-top: 20px;
    width: 100%;
}

/* 收藏标题 - 控制News页面的收藏区域标题样式 */
.collection-header {
    width: 100%;
    height: 27px;
    background-image: url('../images/title_main.gif');
    background-repeat: repeat-x;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* 收藏内容 - 控制News页面的收藏区域内容样式 */
.collection-content {
    width: 100%;
    background-color: #FFFFFF;
    padding: 10px;
    box-sizing: border-box;
}

/* 收藏包装器 - 控制News页面的收藏区域整体布局 */
.collection-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 收藏顶部 - 控制News页面的收藏区域顶部样式 */
.collection-top {
    width: 100%;
    text-align: center;
}

/* 收藏中间 - 控制News页面的收藏区域中间内容样式 */
.collection-middle {
    width: 100%;
    background-image: url('../img/index_922.jpg');
    background-repeat: repeat-y;
    padding: 15px 0;
    box-sizing: border-box;
}

/* 收藏内部 - 控制News页面的收藏区域内部内容布局 */
.collection-inner {
    width: 93%;
    margin: 0 auto;
}

/* 收藏底部 - 控制News页面的收藏区域底部样式 */
.collection-bottom {
    width: 100%;
    text-align: center;
}

/* 侧边栏 - 控制News页面的侧边栏布局和样式 */
.sidebar {
    width: 230px;
    margin-left: 20px;
    flex-shrink: 0;
    background-color: transparent;
    border: none;
    padding: 0;
    box-sizing: border-box;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

/* 导航区域 - 控制News页面侧边栏的导航区域样式 */
.nav-section {
    width: 100%;
    margin: 40px 0 20px;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 响应式调整 - 控制不同屏幕尺寸下的布局变化 */
@media screen and (max-width: 1200px) {
    /* 平板设备 - 主内容区垂直排列 */
    .main-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    /* 平板设备 - 侧边栏全宽显示 */
    .sidebar {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }
    
    /* 平板设备 - 收藏区域图片自适应宽度 */
    .collection-top img,
    .collection-bottom img {
        width: 100%;
        height: auto;
    }
}

/* ========================================
   News.php DIV布局专用样式
   ======================================== */

/* 新闻列表容器 - 控制News页面的新闻列表容器样式 */
.news-list-container {
    width: 100%;
    border: none;
    background-color: #FFFFFF;
    padding: 0;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 新闻项列表 - 控制News页面的新闻项列表样式 */
.news-items-list {
    width: 100%;
    border: none;
    box-sizing: border-box;
}

/* 新闻项行 - 控制News页面的新闻项行布局 */
.news-item-row {
    display: flex;
    width: 100%;
    border-bottom: 1px dashed #e6e6e6;
    transition: all 0.3s ease;
    padding: 12px 15px;
    box-sizing: border-box;
    background: transparent;
}

/* 新闻项行悬停效果 - 控制News页面新闻项的悬停动画 */
.news-item-row:hover {
    background-color: #fff9f0;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(255,152,0,0.05);
}

/* 最后一个新闻项行 - 控制最后一个新闻项的边框样式 */
.news-item-row:last-child {
    border-bottom: none;
}

/* 新闻标题 - 控制News页面新闻标题的布局和样式 */
.news-item-title {
    flex: 0 0 80%;
    padding: 0;
    font-size: 14px;
    color: #333333;
    text-align: left;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* 新闻标题箭头 - 控制News页面新闻标题前的箭头样式 */
.news-item-title::before {
    content: "▶";
    display: inline-block;
    margin-right: 8px;
    font-size: 10px;
    color: #ff9800;
}

/* 新闻标题链接 - 控制News页面新闻标题链接的样式 */
.news-item-title a {
    text-decoration: none;
    color: #333333;
    transition: all 0.3s ease;
    font-weight: 500;
    line-height: 1.6;
}

/* 新闻标题链接悬停 - 控制News页面新闻标题链接的悬停效果 */
.news-item-title a:hover {
    color: #ff6600;
    text-decoration: underline;
}

/* 新闻日期 - 控制News页面新闻日期的样式 */
.news-item-date {
    flex: 0 0 20%;
    font-size: 12px;
    color: #999999;
    text-align: center;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 分页容器 - 控制News页面的分页区域样式 */
.news-pagination {
    width: 100%;
    border: none;
    background-color: transparent;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

/* 分页文本 - 控制News页面的分页文本样式 */
.pagination-text {
    font-size: 12px;
    color: #000000;
    text-align: center;
    padding: 5px 10px;
    display: inline-block;
}

/* 分页链接 - 控制News页面的分页链接样式 */
.pagination-text a {
    text-decoration: none;
    color: #000000;
    margin: 0 4px;
    transition: color 0.3s ease;
}

/* 分页链接悬停 - 控制News页面的分页链接悬停效果 */
.pagination-text a:hover {
    color: #FF3300;
}

/* 页面名称 - 控制News页面的页面标题样式 */
.page-name {
    height: auto;
    margin-bottom: 15px;
    font-size: 13px;
    text-align: center;
    color: #333333;
    padding: 8px 0;
    font-weight: 500;
}

/* 页面名称链接 - 控制News页面的页面标题链接样式 */
.page-name a {
    color: #ff9800;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 页面名称链接悬停 - 控制News页面的页面标题链接悬停效果 */
.page-name a:hover {
    color: #ff6600;
    text-decoration: underline;
}

/* 精品收藏专用容器 - 控制精品收藏区域的整体布局 */
.div-favorite-section {
    width: 850px;
    margin: 0 auto;
    text-align: center;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 联系页面精品收藏底部间距 - 确保联系页面精品收藏和底部内容之间有足够间距 */
.contact-favorite-bottom-spacing {
    height: 10px !important;
    display: block !important;
    clear: both !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* 精品收藏容器 - 控制精品收藏区域的容器布局 */
.div-favorite-container {
    width: 850px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 精品收藏图片框 - 控制精品收藏区域的图片容器样式 */
.div-favorite-image-box {
    width: 850px;
    height: 13px;
    margin: 0 auto;
    border: none;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

/* 精品收藏图片 - 控制精品收藏区域的图片样式 */
.div-favorite-image-box img {
    width: 850px;
    height: 13px;
    display: block;
}

/* 精品收藏主容器表格 - 控制精品收藏区域的表格样式 */
.div-favorite-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

/* 精品收藏内容区 - 控制精品收藏区域的内容样式，高度自适应，由 shoucang.php 中的图片高度控制 */
.div-favorite-content {
    height: auto;
    min-height: 150px;
    width: 850px;
    margin: 0 auto;
    vertical-align: top;
    background-image: url('../img/index_922.jpg');
    background-repeat: repeat-y;
    background-position: 0 0;
    text-align: center;
    padding: 15px 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* 精品收藏内容区表格 - 控制精品收藏区域的内容表格样式 */
.div-favorite-content table {
    width: 93%;
    margin: 0 auto;
}

/* 精品收藏底部 - 控制精品收藏区域的底部样式 */
.div-favorite-bottom {
    width: 850px;
    height: 13px;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
}

/* 精品收藏底部图片 - 控制精品收藏区域的底部图片样式 */
.div-favorite-bottom img {
    width: 850px;
    height: 13px;
    display: block;
}

/* 高度控制类 - 控制容器的固定高度 */
.div-height-150 {
    height: 150px;
}

/* 底部滚动页面样式（精品收藏内） - 控制精品收藏区域的滚动容器样式，高度自适应，由 shoucang.php 中的图片高度控制 */
.div-scroll-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 滚动容器内边距 - 控制滚动容器的内边距 */
.div-scroll-padding {
    height: 5px;
}

/* 滚动内容 - 控制滚动容器的内容样式 */
.div-scroll-content {
    width: 100%;
    display: flex;
    justify-content: center;
    height: auto;
    align-items: center;
}

.div-scroll-wrapper {
    display: flex;
    align-items: center;
    height: auto;
}

/* 滚动包装器内容 - 控制滚动容器的包装器内容样式 */
.div-scroll-wrapper-content {
    display: flex;
    align-items: center;
    height: auto;
}

/* 滚动内容项集合 - 控制滚动容器的内容项集合样式 */
.div-scroll-content-items {
    display: flex;
    align-items: center;
}

/* 滚动内容行 - 控制滚动容器的内容行样式 */
.div-scroll-content-row {
    display: flex;
    align-items: center;
}

/* 滚动内容项 - 控制滚动容器的单个内容项样式 */
.div-scroll-content-item {
    padding-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 滚动内容项链接 - 控制滚动容器的内容项链接样式 */
.div-scroll-content-item a {
    display: inline-block;
    height: auto;
    vertical-align: middle;
}

/* 滚动内容项图片 - 控制滚动容器的内容项图片样式 */
.div-scroll-content-item img {
    border: 0;
    object-fit: contain;
    object-position: center;
}

/* 清除浮动 - 用于清除元素的浮动效果 */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}



/* 底部区域 - 控制页面底部区域的样式 */
.bottom-section {
	width: 1200px;
	height: 90px;
	margin: 0 auto;
	background-image: url('../images/pic_bottom.gif');
}

/* 底部区域 - 控制页面的底部区域样式 */
.down-section {
	margin-top: 10px;
	clear: both;
}

/* 缩略图样式 - 控制页面中的缩略图样式 */
.thumbnail {
  width: 180px;
  height: auto;
  cursor: pointer;
  margin: 5px;
  transition: transform 0.2s;
}

/* 缩略图悬停 - 控制缩略图的悬停效果 */
.thumbnail:hover {
  transform: scale(1.1);
}

/* 视图切换按钮样式 - 控制页面中的视图切换按钮容器样式 */
.view-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  margin: 7px 0;
}

/* 视图切换按钮 - 控制视图切换按钮的基本样式 */
.view-toggle button {
  margin: 0 10px;
  padding: 5px 15px;
  background: #663333;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 3px;
}

/* 激活状态的视图切换按钮 - 控制激活状态的视图切换按钮样式 */
.view-toggle button.active {
  background: #7f5022;
}

/* 图片链接容器样式 - 控制页面中的图片链接容器样式 */
.image-link-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

/* 图片链接 - 控制页面中的图片链接样式 */
.image-link {
  cursor: pointer;
  color: red;
  white-space: nowrap;
}

/* 大图容器样式 - 控制页面中的大图容器样式 */
#large-image-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 9999;
}

/* 防止表格数据浮动在大图上 - 控制表格在大图显示时的层级和布局 */
#table32 {
  z-index: auto !important;
  min-height: auto !important; /* 改为自适应高度 */
  max-height: none !important; /* 确保不会限制最大高度 */
  overflow-y: visible !important; /* 确保垂直方向内容可见 */
}

/* 防止表格数据浮动在大图上 - 控制表格内div元素的定位 */
#table32 div {
  position: static !important;
}

/* 筛选区域样式 - 控制页面中的筛选区域样式 */
.domain_chose {
  padding: 0 10px 10px 10px; /* 给筛选区域添加四周内边距 */
}

/* 表格容器样式 - 控制页面中的表格容器样式 */
.channel {
  padding: 0 10px; /* 给表格容器添加水平内边距 */
  overflow: hidden; /* 隐藏滚动条，内容自适应 */
  min-height: auto; /* 允许容器自适应内容高度 */
  height: auto; /* 高度自适应内容 */
}

/* 表格行样式 - 控制页面中的表格行样式 */
.table-row {
  min-height: 45px; /* 确保每行有足够高度 */
}

/* 通道UL样式 - 控制页面中的通道列表样式 */
.channel ul {
  padding: 10px; /* 添加内边距，避免内容贴边 */
}

/* 大图样式 - 控制页面中的大图显示样式 */
#large-image {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* 显示大图容器时的样式 - 控制大图容器显示时的样式 */
#large-image-container.show {
  display: flex;
  opacity: 1;
}

/* 清除浮动 - 用于产品容器的清除浮动效果 */
.product-container::after {
  content: "";
  display: block;
  clear: both;
}

/* 确保产品容器有足够的高度包裹浮动元素 - 控制产品容器的最小高度 */
.product-container {
  min-height: 50px;
}

/* 域名选择区域的清除浮动 - 控制域名选择区域的清除浮动效果 */
.domain_chose::after {
  content: "";
  display: block;
  clear: both;
}

/* 选择项清除浮动 - 控制选择项的清除浮动效果 */
.chose_item::after {
  content: "";
  display: block;
  clear: both;
}

/* 名家列表网格视图样式 - 控制名家列表的网格视图布局 */
.mingjia-grid-view {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  border: none !important;
  gap: 5px !important;
  row-gap: 15px !important;
  padding: 10px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  width: calc(100% - 10px) !important;
}

/* 名家列表网格视图项目 - 控制名家列表的网格视图项目样式 */
.mingjia-grid-item {
  display: flex !important;
  flex-direction: column !important;
  width: 265px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
  min-width: 0 !important;
  vertical-align: top !important;
  padding: 10px !important;
  border: 1px solid #e0e0e0 !important;
  text-align: left !important;
  background-color: #ffffff !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
  transition: all 0.3s ease !important;
}

/* 名家列表网格视图单元格 - 控制名家列表的网格视图单元格样式 */
.mingjia-grid-cell {
  display: block !important;
  width: 100% !important;
  border: none !important;
  padding: 8px 0 !important;
  box-sizing: border-box !important;
}

/* 名家列表网格视图图片容器 - 控制名家列表的网格视图图片容器样式 */
.mingjia-grid-img-container {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 名家列表网格视图图片 - 控制名家列表的网格视图图片样式 */
.mingjia-grid-img {
  display: block;
  margin: 0 auto;
  border: none;
  border-radius: 4px;
  width: 220px;
  text-align: center;
}

/* 名家列表网格视图名称 - 控制名家列表的网格视图名称样式 */
.mingjia-grid-name {
  display: block;
  text-align: center;
  margin-top: 10px;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 14px;
  color: #663333;
}

/* 名家列表表格视图行样式 - 控制名家列表的表格视图行样式 */
.div-content-left .div-table .mingjia-table-row {
  display: table-row !important;
}

/* 名家列表表格视图单元格 - 控制名家列表的表格视图单元格样式 */
.mingjia-table-cell {
  display: table-cell !important;
  border: 1px solid rgba(127, 80, 34, 0.5) !important; /* 使用半透明边框以实现较细的视觉效果 */
  padding: 12px 15px !important;
  vertical-align: middle !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* 统一表格容器和单元格的边框样式，确保所有边框都是完整的实线 */
.mingjia-table-view {
  border-collapse: collapse !important;
  border: 1px solid #7f5022 !important;
  margin: 15px auto !important;
  width: calc(100% - 20px) !important;
}

/* 移除所有可能影响边框显示的其他样式 */
.mingjia-table-row .mingjia-table-cell {
  box-shadow: none !important;
  background-color: #ffffff !important;
}

/* 名家列表表格视图居中单元格 - 控制名家列表的表格视图居中单元格样式 */
.mingjia-table-cell-center {
  text-align: center;
}

/* 名家列表表格视图左对齐单元格 - 控制名家列表的表格视图左对齐单元格样式 */
.mingjia-table-cell-left {
  text-align: left;
}

/* 通用页面样式 - 控制页面的全局边距 */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

/* 通用字体样式 - 控制页面文本的默认字体大小 */
body,td,th {
	font-size: 12px;
}

/* 链接样式 - 控制页面中链接的默认字体大小 */
a {
	font-size: 12px;
}

/* 未访问链接样式 - 控制页面中未访问链接的样式 */
a:link {
	text-decoration: none;
	color: #000000;
}

/* 已访问链接样式 - 控制页面中已访问链接的样式 */
a:visited {
	text-decoration: none;
	color: #000000;
}

/* 悬停链接样式 - 控制页面中悬停链接的样式 */
a:hover {
	text-decoration: none;
	color: #FF3300;
}

/* 激活链接样式 - 控制页面中激活链接的样式 */
a:active {
	text-decoration: none;
}

/* 传统样式类1 - 控制传统页面元素的文本样式 */
.STYLE1 {
	color: #000000;
	font-size: 12px;
}

/* 传统样式类4 - 控制传统页面元素的文本样式，使用新宋体字体 */
.STYLE4 {
  color: #EDDFC2; 
  font-family: "新宋体";
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
  color: #000000;
  text-decoration: none;
}

/* 传统样式类6 - 控制传统页面元素的红色文本样式 */
.STYLE6 {
  color: #FF0000;
}

/* 传统样式类8 - 控制传统页面元素的黑色文本样式 */
.STYLE8 {
  color: #000000;
}

/* 传统样式类9 - 控制传统页面元素的12px字体大小样式 */
.STYLE9 {
  font-size: 12px;
}

/* 修复列表和网格视图的显示问题 - 控制名家列表表格视图的显示样式 */
.mingjia-table-view {
  display: table !important;
  width: calc(100% - 20px) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 15px auto !important;
  border: 1px solid rgba(127, 80, 34, 0.5) !important; /* 使用半透明边框以实现较细的视觉效果 */
  border-radius: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* 确保列表视图容器的父元素有足够的内边距 - 控制列表视图容器的内边距 */
.div-content-left-align .div-table {
  padding: 10px !important;
  box-sizing: border-box !important;
}

/* 重复的网格视图样式已移至文件上方统一管理，避免样式冲突 */

/* 名家列表网格视图单元格 - 控制名家列表的网格视图单元格样式 */
.mingjia-grid-cell {
  display: block !important;
  width: 100% !important;
  border: none !important;
  padding: 8px 0 !important;
}

/* 名家列表网格视图图片容器 - 控制名家列表的网格视图图片容器样式 */
.mingjia-grid-img-container {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 名家列表网格视图图片 - 控制名家列表的网格视图图片样式 */
.mingjia-grid-img {
  display: block !important;
  margin: 0 auto !important;
  border: none !important;
  border-radius: 4px !important;
  width: 220px !important;
  text-align: center !important;
}

/* 名家列表网格视图名称 - 控制名家列表的网格视图名称样式 */
.mingjia-grid-name {
  display: block !important;
  text-align: center !important;
  margin-top: 10px !important;
  width: 100% !important;
  padding: 5px !important;
  box-sizing: border-box !important;
  font-weight: bold !important;
  font-size: 14px !important;
  color: #663333 !important;
}

/* 确保在网格视图中简介部分完全隐藏 - 控制网格视图中简介部分的显示 */
.mingjia-grid-view .div-table-cell:nth-child(3) {
  display: none !important;
}

/* Recommend.php页面样式 - 控制Recommend.php页面的产品容器样式 */
.product-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  width: 100% !important;
  background-color: #F5F5F5 !important;
  border: 1px solid #ddd !important;
  min-height: 200px !important;
  padding: 10px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Recommend.php页面样式 - 控制Recommend.php页面的产品容器内通道样式 */
.product-container .channel {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 10px 0 0 0;
}

/* Recommend.php页面样式 - 控制Recommend.php页面的通道表格样式 */
.channel .table {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* 产品卡片样式 - 控制Recommend.php页面的产品卡片布局和样式 */
.g-item {
  margin: 5px !important;
  padding: 10px !important;
  border: 1px solid #EDDFC2 !important;
  background-color: #FFF9F0 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
  transition: all 0.3s ease !important;
  border-radius: 5px !important;
  position: relative !important;
  width: calc(33.33% - 10px) !important;
  min-width: 250px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  vertical-align: top !important;
}

/* 产品图片样式 - 控制Recommend.php页面的产品图片样式 */
.g-img {
  padding: 5px !important;
  background-color: #FFF !important;
  border: 1px solid #EDDFC2 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  transition: all 0.3s ease !important;
  margin: 0 auto !important;
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* 产品图片悬停效果 - 控制Recommend.php页面的产品图片悬停效果 */
.g-img:hover {
  border-color: #EDDFC2 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
  transform: translateY(-3px) !important;
}

/* 产品文本样式 - 控制Recommend.php页面的产品文本样式 */
.g-text {
  padding: 5px 0px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 产品卡片悬停效果 - 控制Recommend.php页面的产品卡片悬停效果 */
.g-item:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
  transform: translateY(-3px) !important;
}

/* 通用页面样式 - 从Recommend.php整合 */
/* 避免与全局样式冲突，仅保留必要样式 */
body {
	margin: 0 !important;
}

body,td,th {
	font-size: 12px !important;
}

a {
	font-size: 12px !important;
}

a:link {
	text-decoration: none !important;
	color: #000000 !important;
}

a:visited {
	text-decoration: none !important;
	color: #000000 !important;
}

a:hover {
	text-decoration: none !important;
	color: #FF3300 !important;
}

a:active {
	text-decoration: none !important;
}

.STYLE1 {
	color: #000000 !important;
	font-size: 12px !important;
}

.STYLE4 {
  color: #EDDFC2 !important; 
  font-family: "新宋体" !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 18px !important;
  color: #000000 !important;
  text-decoration: none !important;
}

.STYLE6 {
  color: #FF0000 !important;
}

/* 传统样式类8 - 控制传统页面元素的黑色文本样式 */
.STYLE8 {
  color: #000000 !important;
}

/* 传统样式类9 - 控制传统页面元素的12px字体大小样式 */
.STYLE9 {
  font-size: 12px !important;
}

/* Index.php 专用样式 */
/* 字体样式 - 控制Index.php页面的12px字体大小 */
.zi {
  font-size: 12px;
}

/* 字体样式 - 控制Index.php页面的12px字体大小 */
.px12 {
  font-size: 12px;
}

/* 清除浮动 - 控制Index.php页面的元素浮动清除 */
.div-clearfix {
  clear: both;
  display: block;
  content: "";
}

/* Recommend.php 专用样式 */
/* 页面容器 - 控制Recommend.php页面的整体布局 */
.rec-page-container {
    display: table;
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 表格行 - 控制Recommend.php页面的表格行布局 */
.rec-table-row {
    display: table-row;
}

/* 表格单元格 - 控制Recommend.php页面的表格单元格布局 */
.rec-table-cell {
    display: table-cell;
    vertical-align: top;
}

/* 主容器 - 控制Recommend.php页面的主容器布局 */
.rec-main-container {
    display: table;
    width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* 作品信息表格样式 - 添加底纹虚线效果 */
/* 作品信息表格容器 - 控制Recommend.php页面的作品信息表格容器样式 */
.g-text .rec-main-container {
    width: 100% !important;
    height: 133px !important;
    border: 1px solid #ddd !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 作品信息表格单元格 - 控制Recommend.php页面的作品信息表格单元格样式 */
.g-text .rec-main-container .rec-table-row .rec-table-cell {
    border: 1px solid #ddd !important;
    padding: 5px 8px !important;
    vertical-align: middle !important;
    font-size: 12px !important;
    line-height: 2.0 !important;
    box-sizing: border-box !important;
}

/* 确保第一列（作品名称、作品编号等标签）的样式 */
/* 作品信息表格标签列 - 控制Recommend.php页面的作品信息表格标签列样式 */
.g-text .rec-main-container .rec-table-row .rec-table-cell:first-child {
    font-weight: bold !important;
    text-align: right !important;
    width: 30% !important;
    background-color: #f9f9f9 !important;
}

/* 确保第二列（实际内容）的样式 */
/* 作品信息表格内容列 - 控制Recommend.php页面的作品信息表格内容列样式 */
.g-text .rec-main-container .rec-table-row .rec-table-cell:last-child {
    text-align: left !important;
    width: 70% !important;
    padding-right: 8px !important;
}

/* 中心内容区域 - 控制Recommend.php页面的中心内容区域样式 */
.rec-center-content {
    flex: 1;
    vertical-align: top;
}

/* 中间布局容器 - 控制Recommend.php页面的中间布局容器样式 */
.rec-middle-layout {
    display: table;
    width: 1100px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* 左侧内容区域 - 控制Recommend.php页面的左侧内容区域样式 */
.rec-content-left {
    display: table-cell;
    width: 850px;
    vertical-align: top;
}

/* 中间间隔区域 - 控制Recommend.php页面的中间间隔区域样式 */
.rec-middle-spacer {
    display: table-cell;
    width: 20px;
}

/* 右侧边栏 - 控制Recommend.php页面的右侧边栏样式 */
.rec-sidebar-right {
    display: table-cell;
    width: 230px;
    vertical-align: top;
}

/* 左侧边栏 - 控制Recommend.php页面的左侧边栏样式 */
.rec-left-sidebar {
    width: 29px;
    background-image: url('../images/pic_left.gif');
    background-repeat: repeat-y;
    flex-shrink: 0;
}

/* 左侧边栏表格单元格 - 控制Recommend.php页面的左侧边栏表格单元格样式 */
.rec-table-cell.rec-left-sidebar {
    width: 29px !important;
    background-image: url('../images/pic_left.gif') !important;
    background-repeat: repeat-y !important;
    height: 100% !important;
    display: table-cell !important;
    vertical-align: top !important;
}

/* 右侧边栏 - 控制Recommend.php页面的右侧边栏样式 */
.rec-right-sidebar {
    width: 32px;
    background-image: url('../images/pic_right.gif');
    background-repeat: repeat-y;
    flex-shrink: 0;
}

/* 右侧边栏表格单元格 - 控制Recommend.php页面的右侧边栏表格单元格样式 */
.rec-table-cell.rec-right-sidebar {
    width: 32px !important;
    background-image: url('../images/pic_right.gif') !important;
    background-repeat: repeat-y !important;
    height: 100% !important;
    display: table-cell !important;
    vertical-align: top !important;
}

/* 顶部导航栏 - 控制Recommend.php页面的顶部导航栏样式 */
.rec-top-nav {
    width: 1100px;
    height: 12px;
    margin: 0 auto;
}

/* 标题栏 - 控制Recommend.php页面的标题栏样式 */
.rec-title-bar {
    height: 27px;
    background-image: url('../images/title_newsmain.gif');
    background-repeat: repeat-x;
    padding-left: 10px;
    box-sizing: border-box;
    line-height: 27px;
    text-align: left;
}

/* 主背景 - 控制Recommend.php页面的主背景样式 */
.rec-main-bg {
    background-image: url('../images/main_bg.jpg');
    background-repeat: repeat;
}

/* 底部区域 - 控制Recommend.php页面的底部区域样式 */
.rec-footer-section {
    width: 100%;
    height: 90px;
    margin: 0 auto;
}

/* 底部表格 - 控制Recommend.php页面的底部表格样式 */
.rec-footer-table {
    display: table;
    width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* 底部表格单元格 - 控制Recommend.php页面的底部表格单元格样式 */
.rec-footer-cell {
    display: table-cell;
    width: 1200px;
    height: 90px;
    vertical-align: top;
    background-image: url('../images/pic_bottom.gif');
    background-repeat: no-repeat;
}

/* ========================================
   Tables.php 作品表格专用样式
   ======================================== */

/* 作品表格容器 - 修复错位问题 */
/* 作品表格容器 - 控制Tables.php页面的作品表格容器样式 */
.div-table-view-works {
    display: table;
    width: 100%;
    border: 1px solid #805e3c;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #ffffff;
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    font-size: 13px;
    color: #333;
    margin: 0;
    clear: both;
}

/* 表头行 - 控制Tables.php页面的作品表格表头行样式 */
.div-table-header-row {
    display: table-header-group;
}

/* 表头单元格 - 与参考页面一致 */
/* 表头单元格 - 控制Tables.php页面的作品表格表头单元格样式 */
.div-table-header-cell {
    display: table-cell;
    padding: 8px 5px;
    text-align: center;
    border: 1px solid #805e3c;
    font-weight: bold;
    color: #663333;
    font-size: 12px;
    vertical-align: middle;
    background-color: #f4e4d2;
    white-space: nowrap;
}

/* 数据行 - 设置固定高度与表头一致 */
/* 数据行 - 控制Tables.php页面的作品表格数据行样式 */
.div-table-row-works {
    display: table-row;
    background-color: #ffffff;
}

/* 奇数行背景色 - 与参考图片一致 */
/* 奇数行背景色 - 控制Tables.php页面的作品表格奇数行背景色 */
.div-table-row-works:nth-child(odd) {
    background-color: #f4e4d2;
}

/* 偶数行背景色 */
/* 偶数行背景色 - 控制Tables.php页面的作品表格偶数行背景色 */
.div-table-row-works:nth-child(even) {
    background-color: #ffffff;
}

/* 数据单元格 - 修复错位问题 */
/* 数据单元格 - 控制Tables.php页面的作品表格数据单元格样式 */
.div-table-cell-works {
    display: table-cell;
    padding: 8px 5px;
    text-align: center;
    border: 1px solid #805e3c;
    vertical-align: middle;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 作品名称单元格 - 特殊处理 */
/* 作品名称单元格 - 控制Tables.php页面的作品表格名称单元格样式 */
.div-table-cell-works.div-width-49 {
    text-align: left;
}

/* 作品名称单元格内的内容 - 水平排列 */
/* 作品名称单元格内容 - 控制Tables.php页面的作品表格名称单元格内容布局 */
.div-table-cell-works.div-width-49 > div {
    display: block;
    overflow: hidden;
}

/* 作品名称单元格内的作品名 */
/* 作品名称 - 控制Tables.php页面的作品表格作品名称样式 */
.div-table-cell-works.div-width-49 .zuopinmingcheng {
    display: inline-block;
    max-width: 65%;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* 作品名称单元格内的图片链接容器 */
/* 图片链接容器 - 控制Tables.php页面的作品表格图片链接容器样式 */
.div-table-cell-works.div-width-49 .image-link-container {
    display: inline-block !important;
    vertical-align: middle;
}

/* 作品名称单元格内的图片链接 */
/* 图片链接 - 控制Tables.php页面的作品表格图片链接样式 */
.div-table-cell-works.div-width-49 .image-link {
    margin-left: 5px;
}

/* 图片链接样式 - 与参考图片一致 */
/* 图片链接样式 - 控制页面中图片链接的通用样式 */
.image-link {
    color: #FF0000;
    text-decoration: none;
    cursor: pointer;
    margin: 0 5px;
}

/* 大图容器显示样式 */
/* 大图容器显示样式 - 控制页面中大图容器的显示样式 */
#large-image-container.show {
    display: flex;
    opacity: 1;
}

/* 宽度控制类 - 与原表格宽度一致 */
/* 宽度控制类 - 控制元素的5%宽度 */
.div-width-5 {
    width: 5%;
}

/* 宽度控制类 - 控制元素的6%宽度 */
.div-width-6 {
    width: 6%;
}

/* 宽度控制类 - 控制元素的9%宽度 */
.div-width-9 {
    width: 9%;
}

/* 宽度控制类 - 控制元素的10%宽度 */
.div-width-10 {
    width: 10%;
}

/* 宽度控制类 - 控制元素的15%宽度 */
.div-width-15 {
    width: 15%;
}

/* 宽度控制类 - 控制元素的49%宽度 */
.div-width-49 {
    width: 49%;
}

/* 文本对齐类 */
/* 文本对齐类 - 控制元素的文本居中对齐 */
.div-text-center {
    text-align: center;
}

/* 作品名称容器 - 用于名称和图片链接的左右布局 */
/* 作品名称容器 - 控制Tables.php页面的作品表格名称容器样式 */
.div-table-name {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 图片链接容器 */
/* 图片链接容器 - 控制页面中图片链接容器的通用样式 */
.image-link-container {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* 图片链接 - 控制页面中图片链接的通用样式 */
.image-link {
    cursor: pointer;
    color: red;
    white-space: nowrap;
}

/* 作品表格内容布局 */
/* 作品表格内容布局 - 控制Tables.php页面的作品表格内容布局 */
.div-table-cell-works .div-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

/* 防止内容溢出 */
/* 防止内容溢出 - 控制Tables.php页面的作品表格内容溢出处理 */
.div-table-cell-works div {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 大图容器样式 */
/* 大图容器样式 - 控制页面中大图容器的基础样式 */
#large-image-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 9999;
}

/* 防止表格数据浮动在大图上 */
/* 防止表格数据浮动在大图上 - 控制表格在大图显示时的层级和布局 */
#table32 {
    z-index: auto !important;
    min-height: auto !important; /* 改为自适应高度 */
    max-height: none !important; /* 确保不会限制最大高度 */
    overflow-y: visible !important; /* 确保垂直方向内容可见 */
}

/* 筛选区域样式 */
/* 筛选区域样式 - 控制页面中的筛选区域样式 */
.domain_chose {
    padding: 10px 10px 10px 10px; /* 给筛选区域添加四周内边距 */
}

/* 表格容器样式 */
/* 表格容器样式 - 控制页面中的表格容器样式 */
.channel {
    padding: 0 0px; /* 给表格容器添加水平内边距 */
    overflow: hidden; /* 隐藏滚动条，内容自适应 */
    min-height: auto; /* 允许容器自适应内容高度 */
    height: auto; /* 高度自适应内容 */
}

/* 表格行样式 */
/* 表格行样式 - 控制页面中的表格行样式 */
.table-row {
    min-height: 45px; /* 确保每行有足够高度 */
}

/* 通道UL样式 */
/* 通道UL样式 - 控制页面中的通道列表样式 */
.channel ul {
    padding: 10px; /* 添加内边距，避免内容贴边 */
}

/* 作品表格定位修复 - 控制Tables.php页面的作品表格元素定位 */
.div-table-view-works,
.div-table-view-works .div-table-row-works,
.div-table-view-works .div-table-cell-works,
.div-table-view-works .div-table-header-cell {
    position: static !important;
}

/* 设置大图样式 */
/* 大图样式 - 控制页面中的大图显示样式 */
#large-image {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* 显示大图容器时的样式 */
/* 显示大图容器时的样式 - 控制大图容器显示时的样式 */
#large-image-container.show {
    display: flex;
    opacity: 1;
}

/* ========================================
   News_content.php 新闻详情页专用样式
   ======================================== */

/* 页面body背景 */
/* 页面body背景 - 控制News_content.php页面的背景样式 */
.news-page-body {
    background-image: url('../images/s_bg.gif');
    background-repeat: repeat;
}

/* 主体表格 */
/* 主体表格 - 控制News_content.php页面的主体表格样式 */
.news-main-table {
    display: table;
    width: 1200px;
    height: 650px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 导航表格 */
/* 导航表格 - 控制News_content.php页面的导航表格样式 */
.news-nav-table {
    display: table;
    width: 1100px;
    height: 12px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* 导航单元格padding */
/* 导航单元格padding - 控制News_content.php页面的导航单元格内边距 */
.div-nav-padding {
    padding: 3px 0;
}

/* 内容区域表格 */
/* 内容区域表格 - 控制News_content.php页面的内容区域表格样式 */
.news-content-table {
    display: table;
    width: 1100px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* 内部内容表格 */
/* 内部内容表格 - 控制News_content.php页面的内部内容表格样式 */
.news-inner-table {
    display: table;
    width: 1100px;
    border-collapse: collapse;
}

/* 新闻标题栏 */
/* 新闻标题栏 - 控制News_content.php页面的新闻标题栏样式 */
.news-title-bar {
    height: 27px;
}

/* 新闻内容框 */
/* 新闻内容框 - 控制News_content.php页面的新闻内容框样式 */
.news-content-box {
    height: 695px;
    border: 1px solid #663333;
}

/* 新闻详情表格 */
/* 新闻详情表格 - 控制News_content.php页面的新闻详情表格样式 */
.news-detail-table {    display: table;
    width: 99%;
    margin: 0 auto;
    border: none;
}

/* 底部表格 */
/* 底部表格 - 控制News_content.php页面的底部表格样式 */
.news-footer-table {
    display: table;
    width: 1200px;
    height: 90px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* 底部单元格 */
/* 底部单元格 - 控制News_content.php页面的底部单元格样式 */
.news-footer-cell {
    height: 90px;
    background-image: url('../images/pic_bottom.gif');
    background-repeat: no-repeat;
    background-position: center top;
    vertical-align: top;
}

/* ========================================
   zuopin_content.php 作品详情页专用样式
   ======================================== */

/* 页面容器 - 模拟原body和第一个table */
/* 页面容器 - 控制zuopin_content.php页面的整体容器样式 */
.div-page-container-zuopin {
    width: 100%;
    height: 100%;
    display: table;
    background-image: url('../images/s_bg.gif');
    background-repeat: repeat;
}

/* 顶部主区域 - 模拟原tr height=338 */
/* 顶部主区域 - 控制zuopin_content.php页面的顶部区域样式 */
.div-top-section-zuopin {
    display: table-row;
}

/* 1200px居中容器 - 第一个表格 */
/* 1200px居中容器 - 控制zuopin_content.php页面的第一个居中表格样式 */
.div-center-container-first {
    width: 1200px;
    margin: 0 auto;
    display: table;
}

/* 顶部图片容器 */
/* 顶部图片容器 - 控制zuopin_content.php页面的顶部图片容器样式 */
.div-top-image-container {
    display: table-cell;
    text-align: center;
    vertical-align: top;
}

/* 主内容区域 - 模拟原第二个table */
/* 主内容区域 - 控制zuopin_content.php页面的主内容区域样式 */
.div-main-section-zuopin {
    width: 1200px;
    margin: 0 auto;
    display: table;
}

/* 左边栏 - width=29 bg=pic_left.gif */
/* 左边栏 - 控制zuopin_content.php页面的左边栏样式 */
.div-left-sidebar-zuopin {
    display: table-cell;
    width: 29px;
    background-image: url('../images/pic_left.gif');
    background-repeat: repeat-y;
    vertical-align: top;
}

/* 中间内容区 - width=1139 valign=top align=center bg=main_bg.jpg */
/* 中间内容区 - 控制zuopin_content.php页面的中间内容区域样式 */
.div-center-content-zuopin {
    display: table-cell;
    vertical-align: top;
    text-align: center;
    background-image: url('../images/main_bg.jpg');
    background-repeat: repeat;
    width: 1139px;
}

/* 右边栏 - width=32 bg=pic_right.gif */
/* 右边栏 - 控制zuopin_content.php页面的右边栏样式 */
.div-right-sidebar-zuopin {
    display: table-cell;
    width: 32px;
    background-image: url('../images/pic_right.gif');
    background-repeat: repeat-y;
    vertical-align: top;
}

/* 顶部导航区域 - width=1100 height=12 cellpadding=3 */
/* 顶部导航区域 - 控制zuopin_content.php页面的顶部导航区域样式 */
.div-nav-zuopin {
    width: 1100px;
    margin: 0 auto;
    padding: 3px 0;
    display: block;
}

/* 中间内容布局 - width=1100 height=20 valign=top align=left */
/* 中间内容布局 - 控制zuopin_content.php页面的中间内容布局样式 */
.div-content-layout-zuopin {
    width: 1100px;
    margin: 0 auto;
    display: block;
    text-align: left;
}

/* 内部表格 - width=1100 */
/* 内部表格 - 控制zuopin_content.php页面的内部表格样式 */
.div-inner-table-zuopin {
    width: 1100px;
    display: block;
    margin: 0 auto;
}

/* 标题栏 - height=27 bg=title_mainxin.gif valign=center */
/* 标题栏 - 控制zuopin_content.php页面的标题栏样式 */
.div-title-bar-zuopin {
    width: 100%;
    height: 27px;
    background-image: url('../images/title_mainxin.gif');
    background-repeat: repeat-x;
    display: flex;
    align-items: center;
}

/* 内容表格 - width=100% border=1 bordercolor=663333 */
/* 内容表格 - 控制zuopin_content.php页面的内容表格样式 */
.div-content-table-zuopin {
    width: 100%;
    border: 1px solid #663333;
    background-color: #FFFFFF;
    display: block;
}

/* 内部容器 - width=99% border=1 bordercolor=7f5022 cellpadding=2 */
/* 内部容器 - 控制zuopin_content.php页面的内部容器样式 */
.div-inner-container-zuopin {
    width: 99%;
    margin: 0 auto;
    border: 1px solid #7f5022;
    display: block;
}

/* 标题单元格 - align=center */
/* 标题单元格 - 控制zuopin_content.php页面的标题单元格样式 */
.div-title-cell-zuopin {
    text-align: center;
    display: block;
    padding: 10px 0;
}

/* 标题文字样式 */
/* 标题文字样式 - 控制zuopin_content.php页面的标题文字样式 */
.div-title-text-zuopin {
    font-size: 20px;
    color: #000000;
}

/* 图片展示区域 - align=center */
/* 图片展示区域 - 控制zuopin_content.php页面的图片展示区域样式 */
.div-image-section-zuopin {
    text-align: center;
    display: block;
}

/* 相框容器 - 模拟原边框图片 */
/* 相框容器 - 控制zuopin_content.php页面的相框容器样式 */
.div-frame-zuopin {
    display: inline-block;
    margin: 10px auto;
    position: relative;
}

/* 相框顶部图片 */
/* 相框顶部图片 - 控制zuopin_content.php页面的相框顶部样式 */
.div-frame-top {
    display: flex;
    height: 74px;
}

/* 相框顶部左侧 */
/* 相框顶部左侧 - 控制zuopin_content.php页面的相框顶部左侧样式 */
.div-frame-top-left {
    width: 78px;
    height: 74px;
}

/* 相框顶部中间 */
/* 相框顶部中间 - 控制zuopin_content.php页面的相框顶部中间样式 */
.div-frame-top-mid {
    flex: 1;
    background-image: url('../bk/huakuang_r1_c2.gif');
    background-repeat: repeat-x;
}

/* 相框顶部右侧 */
/* 相框顶部右侧 - 控制zuopin_content.php页面的相框顶部右侧样式 */
.div-frame-top-right {
    width: 78px;
    height: 74px;
}

/* 相框中间部分 */
/* 相框中间部分 - 控制zuopin_content.php页面的相框中间样式 */
.div-frame-middle {
    display: flex;
}

/* 相框中间左侧 */
/* 相框中间左侧 - 控制zuopin_content.php页面的相框中间左侧样式 */
.div-frame-middle-left {
    width: 78px;
    background-image: url('../bk/huakuang_r2_c1.gif');
    background-repeat: repeat-y;
}

/* 相框中间内容 */
/* 相框中间内容 - 控制zuopin_content.php页面的相框中间内容样式 */
.div-frame-middle-content {
    background-image: url('../bk/huakuang_r2_c2.gif');
    background-repeat: repeat;
    padding: 10px;
}

/* 缩略图样式 */
/* 缩略图样式 - 控制zuopin_content.php页面的作品缩略图样式 */
.div-frame-middle-content .thumbnail {
    width: auto;
    height: auto;
    cursor: pointer;
    margin: 1px;
    transition: transform 0.2s;
}

/* 缩略图悬停效果 */
/* 缩略图悬停效果 - 控制zuopin_content.php页面的作品缩略图悬停动画 */
.div-frame-middle-content .thumbnail:hover {
    transform: scale(1.05);
}

/* 相框中间右侧 */
/* 相框中间右侧 - 控制zuopin_content.php页面的相框中间右侧样式 */
.div-frame-middle-right {
    width: 78px;
    background-image: url('../bk/huakuang_r2_c3.gif');
    background-repeat: repeat-y;
}

/* 相框底部 */
/* 相框底部 - 控制zuopin_content.php页面的相框底部样式 */
.div-frame-bottom {
    display: flex;
    height: 74px;
}

/* 相框底部左侧 */
/* 相框底部左侧 - 控制zuopin_content.php页面的相框底部左侧样式 */
.div-frame-bottom-left {
    width: 78px;
    height: 74px;
}

/* 相框底部中间 */
/* 相框底部中间 - 控制zuopin_content.php页面的相框底部中间样式 */
.div-frame-bottom-mid {
    flex: 1;
    background-image: url('../bk/huakuang_r3_c2.gif');
    background-repeat: repeat-x;
}

/* 相框底部右侧 */
/* 相框底部右侧 - 控制zuopin_content.php页面的相框底部右侧样式 */
.div-frame-bottom-right {
    width: 78px;
    height: 74px;
}

/* 作品信息区域 - bgcolor=e4e4e4 */
/* 作品信息区域 - 控制zuopin_content.php页面的作品信息区域样式 */
.div-info-section-zuopin {
    background-color: #e4e4e4;
    display: block;
    padding: 5px 0;
}

/* 作品信息内层容器 - width=95% */
/* 作品信息内层容器 - 控制zuopin_content.php页面的作品信息内层容器样式 */
.div-info-inner-zuopin {
    width: 95%;
    margin: 0 auto;
    display: block;
}

/* 信息行 - 模拟原tr */
/* 信息行 - 控制zuopin_content.php页面的作品信息行样式 */
.div-info-row-zuopin {
    width: 100%;
    display: block;
    line-height: 22px;
}

/* 信息行分隔线 */
/* 信息行分隔线 - 控制zuopin_content.php页面的信息行分隔线样式 */
.div-info-divider {
    color: #999;
    font-size: 12px;
}

/* 信息标签 */
/* 信息标签 - 控制zuopin_content.php页面的信息标签样式 */
.div-info-label {
    display: inline-block;
}

/* 置景效果图区域 */
/* 置景效果图区域 - 控制zuopin_content.php页面的置景效果图区域样式 */
.div-xiaoguo-section-zuopin {
    display: block;
    text-align: center;
}

/* 置景效果图标题 - height=30 align=center */
/* 置景效果图标题 - 控制zuopin_content.php页面的置景效果图标题样式 */
.div-xiaoguo-title-zuopin {
    height: 30px;
    text-align: center;
    display: block;
}

/* 留言区域 - height=30 align=center */
/* 留言区域 - 控制zuopin_content.php页面的留言区域标题样式 */
.div-comment-title-zuopin {
    height: 30px;
    text-align: center;
    display: block;
}

/* 评论容器 */
/* 评论容器 - 控制zuopin_content.php页面的评论容器样式 */
.div-comment-container-zuopin {
    position: relative;
    z-index: 100;
}

/* 底部链接区域 - height=25 align=right bgcolor=e4e4e4 */
/* 底部链接区域 - 控制zuopin_content.php页面的底部链接区域样式 */
.div-bottom-links-zuopin {
    height: 25px;
    text-align: right;
    background-color: #e4e4e4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 底部链接容器 - width=46% height=30 */
/* 底部链接容器 - 控制zuopin_content.php页面的底部链接容器样式 */
.div-bottom-links-inner {
    width: 46%;
    height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 底部链接文字样式 */
/* 底部链接文字样式 - 控制zuopin_content.php页面的底部链接文字样式 */
.div-bottom-link-text {
    font-size: 20px;
}

/* 底部区域 - height=90 width=1200 align=center */
/* 底部区域 - 控制zuopin_content.php页面的底部区域样式 */
.div-footer-section-zuopin {
    width: 1200px;
    height: 90px;
    margin: 0 auto;
    text-align: center;
    background-image: url('../images/pic_bottom.gif');
    background-repeat: no-repeat;
    background-position: center top;
    display: block;
}

/* 底部单元格 - valign=top */
/* 底部单元格 - 控制zuopin_content.php页面的底部单元格样式 */
.div-footer-cell-zuopin {
    vertical-align: top;
    display: table-cell;
}

/* 名家内容页面布局样式 - 用于名家内容页面的整体布局结构 */
.page-wrapper {
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

/* 主内容区样式 - 用于设置主内容区的样式 */
.main-content {
    width: 100%;
    margin: 0 auto;
}

/* 头部背景样式 - 用于设置头部区域的背景 */
.header-bg {
    height: 82px;
    width: 100%;
}

/* 固定宽度容器样式 - 用于保持页面内容在固定宽度内居中 */
.container-1200 {
    width: 1200px;
    margin: 0 auto;
}

/* 头部顶部区域样式 - 用于设置头部内容的样式 */
.header-top {
    text-align: center;
}



/* 顶部区域样式 - 用于设置页面顶部内容的样式 */
.top-section {
    width: 900px;
    height: 12px;
    margin: 0 auto;
}

/* 顶部内容样式 - 用于设置顶部内容的样式 */
.top-content {
    text-align: center;
}

/* 内容区域样式 - 用于设置主要内容区域的样式 */
.content-section {
    width: 1100px;
    margin: 20px auto 0;
}

/* 面包屑容器样式 - 用于设置面包屑导航的容器样式 */
.breadcrumb-container {
    width: 100%;
}

/* 面包屑背景样式 - 用于设置面包屑区域的背景 */
.breadcrumb-bg {
    width: 100%;
    height: 27px;
    background-repeat: repeat-x;
    display: flex;
    align-items: center;
}

/* 面包屑内容样式 - 用于设置面包屑内容的样式 */
.breadcrumb-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

/* 面包屑左侧样式 - 用于设置左侧内容的样式 */
.breadcrumb-left {
    width: 70%;
    text-align: left;
}

/* 面包屑右侧样式 - 用于设置右侧内容的样式 */
.breadcrumb-right {
    width: 30%;
    text-align: right;
}





/* 艺术家作品区域样式 - 用于设置艺术家作品部分的样式 */
.artist-work-section {
    width: 100%;
    padding: 10px 0;
    background-color: #e4e4e4;
}

/* 作品列表背景样式 - 用于设置作品列表区域的背景色 */
.work-list-bg {
    width: 100%;
    padding: 10px 0;
    background-color: #e4e4e4;
}

/* 作品列表容器样式 - 用于设置作品列表的容器样式 */
.work-list-container {
    width: 99%;
    margin: 0 auto;
}

/* 作品信息表格样式 - 用于设置作品详细信息的表格布局 */
.work-info-table {
    width: 100%;
    height: 133px;
    border: 0;
}

/* 作品信息行样式 - 用于设置每行信息的样式 */
.work-info-row {
    display: flex;
    align-items: center;
    height: 19px;
    margin: 5px 0;
}

/* 作品信息标签样式 - 用于设置信息标签的样式 */
.work-info-label {
    width: 30%;
    text-align: right;
    padding-right: 5px;
}

/* 作品信息值样式 - 用于设置信息值的样式 */
.work-info-value {
    width: 70%;
    text-align: left;
}

/* 分页区域样式 - 用于设置分页信息的样式 */
.pagination-section {
    width: 100%;
    margin-top: 20px;
}

/* 分页内容样式 - 用于设置分页内容的样式 */
.pagination-content {
    width: 96%;
    margin: 0 auto;
    padding: 3px;
}

/* 分页信息样式 - 用于设置分页文字信息的样式 */
.pagination-info {
    text-align: center;
    color: #000000;
    font-size: 12px;
}

/* 作品信息表格单元格样式 - 用于设置作品信息表格的单元格样式 */
.info-cell-left {
    width: 30%;
    text-align: right;
    height: 19px;
}

/* 作品信息表格单元格样式 - 用于设置作品信息表格的单元格样式 */
.info-cell-right {
    width: 70%;
    text-align: left;
    height: 19px;
}

/* 作品信息表格单元格样式 - 用于设置作品信息表格的单元格样式 */
.info-cell-right-55 {
    width: 55%;
    text-align: left;
    height: 19px;
}

/* 底部背景样式 - 用于设置页面底部的背景 */
.footer-bg {
    height: auto;
    width: 100%;
    margin-top: 20px;
}

/* 底部内容样式 - 用于设置底部内容的样式 */
.footer-content {
    height: auto;
    width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* 底部装饰样式 - 用于设置底部装饰图片的样式 */
.footer-decoration {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* 头部图片样式 - 用于确保pic_top.gif头部图片精准对齐左上角 */
.header-pic-top {
    background-position: top left;
    display: block;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    width: 1200px;
    height: 82px;
}



/* 主内容区域样式 - 用于设置主要内容区域的样式 - 已在下方定义，此处删除 */

/* 内容区域样式 - 用于设置内容区域的样式 */
.content-section {
    width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 顶部区域样式 - 用于设置顶部内容 */
.top-section {
    width: 900px;
    height: 12px;
    margin: 0 auto;
    padding: 3px 0;
}

/* 顶部内容样式 - 用于设置顶部内容的样式 */
.top-content {
    text-align: center;
    width: 100%;
}

/* 面包屑容器样式 - 用于设置面包屑导航的容器样式 */
.breadcrumb-container {
    width: 900px;
    margin: 0 auto;
}





/* 艺术家信息容器样式 - 用于设置艺术家信息区域的样式 */
.artist-info-container {
    width: 900px;
    margin: 10px auto 0;
    min-height: 695px;
    border: 1px solid #663333;
    box-sizing: border-box;
}

/* 艺术家信息内容样式 - 用于设置艺术家信息内容区域的样式 */
.artist-info-content {
    width: 98%;
    margin: 0 auto;
    padding: 20px 0;
}

/* 艺术家详情样式 - 用于设置艺术家详情的布局 */
.artist-details {
    width: 100%;
    border: 1px solid #7f5022;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
}

/* 艺术家详情行样式 - 用于设置艺术家详情行的布局 */
.artist-detail-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

/* 艺术家照片单元格样式 - 用于设置艺术家照片部分的样式 */
.artist-photo-cell {
    padding: 2px;
    display: flex;
    align-items: flex-start;
    min-height: 130px;
    border: 1px solid #7f5022;
    flex: 0 0 21%;
    box-sizing: border-box;
    text-align: center;
}

/* 艺术家介绍单元格样式 - 用于设置艺术家介绍部分的样式 */
.artist-bio-cell {
    padding: 2px;
    display: flex;
    align-items: flex-start;
    min-height: 130px;
    border: 1px solid #7f5022;
    flex: 0 0 79%;
    box-sizing: border-box;
    vertical-align: top;
}

/* 艺术家照片背景样式 - 用于设置照片区域的背景色 */
.artist-photo-bg {
    width: 100%;
    min-height: 130px;
    background-color: #e4e4e4;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* 照片包装器样式 - 用于设置照片包装器的样式 */
.photo-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* 艺术家介绍内容样式 - 用于设置艺术家介绍内容的样式 */
.artist-bio-content {
    width: 100%;
    padding: 10px;
    display: block;
    background-color: #f7f7f7;
}

/* 艺术家作品区域样式 - 用于设置艺术家作品部分的样式 */
.artist-work-section {
    width: 100%;
    padding: 10px 0;
    background-color: #e4e4e4;
}

/* 作品列表背景样式 - 用于设置作品列表区域的背景色 */
.work-list-bg {
    width: 100%;
    padding: 10px 0;
    background-color: #e4e4e4;
}

/* 作品列表容器样式 - 用于设置作品列表的容器样式 */
.work-list-container {
    width: 99%;
    margin: 0 auto;
}

/* 修正艺术家详情样式 - 用于设置艺术家详情的布局 */
.artist-details {
    width: 100%;
    border: 1px solid #7f5022;
    margin-bottom: 20px;
}

/* 修正艺术家照片区域样式 - 用于设置艺术家照片部分的样式 */
.artist-photo-section {
    width: 21%;
    padding: 10px;
    vertical-align: top;
}

/* 修正艺术家照片背景样式 - 用于设置照片区域的背景色 */
.artist-photo-bg {
    padding: 10px;
    text-align: center;
    background-color: #e4e4e4;
}

/* 修正艺术家介绍区域样式 - 用于设置艺术家介绍部分的样式 */
.artist-bio-section {
    width: 79%;
    padding: 10px;
    vertical-align: top;
    background-color: #f7f7f7;
}

/* 修正艺术家作品区域样式 - 用于设置艺术家作品部分的样式 */
.artist-work-section {
    width: 100%;
    padding: 10px 0;
    background-color: #e4e4e4;
}

/* 修正作品列表背景样式 - 用于设置作品列表区域的背景色 */
.work-list-bg {
    width: 100%;
    padding: 10px 0;
    /* 移除背景色，由g-a控制 */
}

/* 作品信息网格样式 - 用于设置作品详细信息的网格布局 */
.work-info-grid {
    width: 100%;
    min-height: 133px;
    display: block;
    padding: 10px 0;
}

/* 作品信息行样式 - 用于设置每行信息的样式 */
.work-info-row {
    display: block;
    min-height: 19px;
    width: 100%;
    margin: 3px 0;
}

.work-info-row::after {
    content: "";
    display: table;
    clear: both;
}

/* 作品信息标签样式 - 用于设置信息标签的样式 */
.work-info-label {
    min-height: 19px;
    padding: 0;
    display: block;
    width: 30%;
    text-align: right;
    float: left;
}

/* 作品信息值样式 - 用于设置信息值的样式 */
.work-info-value {
    min-height: 19px;
    padding: 0 0 0 5px;
    display: block;
    width: 70%;
    text-align: left;
    float: left;
}

/* 分页容器样式 - 用于设置分页容器的样式 */
.pagination-container {
    width: 100%;
    margin-top: 20px;
}

/* 分页内容样式 - 用于设置分页内容的样式 */
.pagination-content {
    width: 96%;
    margin: 0 auto;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 分页信息单元格样式 - 用于设置分页信息单元格的样式 */
.pagination-info-cell {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

/* 空单元格样式 - 用于设置空单元格的样式 */
.empty-cell {
    width: 30%;
}

/* 分页信息中心样式 - 用于设置分页信息中心的样式 */
.pagination-info-center {
    width: 40%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 布局容器样式 - 用于设置整体布局容器 */
.layout-container {
    display: flex;
    height: 100%;
    width: 100%;
}

/* 侧边栏样式 - 用于设置左右侧边栏 */
.sidebar-left {
  flex: 0 0 29px;
  background-repeat: repeat-y;
  background-position: center;
}

.sidebar-right {
  flex: 0 0 32px;
  background-repeat: repeat-y;
  background-position: center;
}

/* 内容区域样式 - 用于设置内容区域 */
.content-area {
    flex: 1;
    min-height: 650px;
    background-repeat: repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}

/* 顶部区域样式 - 用于设置顶部内容 */
.top-section {
    width: 900px;
    height: 12px;
    margin: 0 auto;
    padding: 3px 0;
}

/* 内容节样式 - 用于设置内容节 */
.content-section {
    width: 900px;
    margin: 20px auto 0;
    box-sizing: border-box;
}

/* ========================================
   mingjia_content.php 名家详情页专用样式
   ======================================== */

/* 作品列表容器专用样式 - 确保与页面宽度匹配 */
.mingjia-content .work-list-container {
  width: 900px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* 作品网格区域样式 - 确保在页面中正确显示 */
.mingjia-content .g-a {
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  background-color: #eff2f5;
}

.mingjia-content .g-b {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.mingjia-content .g-cont {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  box-sizing: border-box;
}

/* 作品卡片样式 - 确保在网格中正确排列 */
.mingjia-content .g-item {
  display: block !important;
  width: 32.2% !important;
  margin: 5px;
  padding: 10px;
  border: 1px solid #EDDFC2;
  background-color: #FFF9F0;
  box-sizing: border-box;
  position: relative;
}

.mingjia-content .g-item:nth-child(3n) {
  margin-right: 5px;
}

.mingjia-content .g-img {
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.mingjia-content .g-text {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.mingjia-content .g-name {
  width: 100%;
  margin: 0;
}

.mingjia-content .work-info-grid {
  width: 100%;
  min-height: auto;
  padding: 5px 0;
  margin: 0;
}

.mingjia-content .work-info-row {
  display: block;
  width: 100%;
  margin: 3px 0;
}

.mingjia-content .work-info-row::after {
  content: "";
  display: table;
  clear: both;
}

.mingjia-content .work-info-label {
  display: block;
  width: 30%;
  text-align: right;
  float: left;
}

.mingjia-content .work-info-value {
  display: block;
  width: 70%;
  text-align: left;
  float: left;
}

.mingjia-content .pagination-section {
  width: 900px;
  margin: 20px auto 0;
}

.mingjia-content .pagination-container {
  width: 100%;
  margin: 0 auto;
}