@charset "utf-8";
/* ==========================================================================
   案例详情页 case_detail 样式
   ========================================================================== */

/* 固定头部占位 */
.zs-h-height { height: 0.96rem; }
@media only screen and (max-width: 1024px) { .zs-h-height { height: 56px; } }

/* 滚动进入动画 */
.zs-fadeup { opacity: 0; transform: translateY(60px); transition: opacity 0.8s, transform 0.8s; }
.zs-fadeup.is-in { opacity: 1; transform: none; }

/* 通用 */
.indexwrap { width: 1660px; max-width: 90%; margin: 0 auto; }
@media only screen and (max-width: 1024px) { .indexwrap { max-width: 94%; } }
.zs-detail img { max-width: 100%; }

/* body 灰色背景 */
.case_detail_body { background: #f5f5f5; }

/* ==========================================================================
   案例主体容器（标题+内容合为一体白色背景）
   ========================================================================== */
.case-main-wrap { background: #fff; padding: 0.6rem; margin-top: 0.4rem; border-radius: 8px; }
.case-header { padding: 0 0 0.4rem; text-align: center; border-bottom: 1px solid #eee; }
.case-title { font-weight: bold; line-height: 1.3; margin-bottom: 0.15rem; }
.case-meta { color: #999; }
.case-meta a { color: #999; }
.case-meta a:hover { color: #999; }
.case-meta i { margin-left: 6px; }

/* ==========================================================================
   案例正文
   ========================================================================== */
.case-content { padding-top: 0.4rem; }
.case-edit { line-height: 2; color: #333; }
.case-edit p { margin-bottom: 1em; text-align: justify; }
.case-edit strong { font-weight: bold; }
.case-edit img { max-width: 100%; height: auto; border-radius: 0.1rem; margin: 0.2rem 0; }

/* 高亮文字（红色重点） */
.case-highlight { color: #e60012; font-weight: bold; }

/* ==========================================================================
   数据表格
   ========================================================================== */
.case-table { margin: 0.4rem 0; overflow-x: auto; }
.case-table table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 900px; }
.case-table thead { background: #f5f5f5; }
.case-table th,
.case-table td { padding: 10px 12px; text-align: center; border: 1px solid #e8e8e8; white-space: nowrap; }
.case-table th { font-weight: bold; color: #333; }
.case-table td { color: #555; }
.case-table .td-up { color: #e60012; font-weight: bold; }
.case-table .td-up i { margin-right: 2px; }
.case-table .td-status { color: #52c41a; font-weight: bold; }

/* ==========================================================================
   案例标签
   ========================================================================== */
.case-tags { margin-top: 0.5rem; padding-top: 0.3rem; border-top: 1px solid #eaeaea; display: flex; align-items: center; flex-wrap: wrap; }
.case-tags-label { color: #666; margin-right: 10px; font-size: 14px; }
.case-tags-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-item { display: inline-block; padding: 4px 16px; border: 1px solid #ddd; border-radius: 4px; color: #333; font-size: 14px; transition: all 0.3s; }
.tag-item:hover { border-color: #132b88; color: #132b88; }

/* ==========================================================================
   上下篇导航
   ========================================================================== */
.case-nav { margin-top: 0.5rem; padding-top: 0.3rem; border-top: 1px solid #eaeaea; display: flex; justify-content: space-between; align-items: flex-end; }
.case-nav-links p { line-height: 2; color: #666; }
.case-nav-links p a { color: #333; }
.case-nav-links p a:hover { color: #132b88; }
.btn-back { display: inline-block; padding: 8px 24px; background: linear-gradient(135deg, #0140bf, #01b3bf); border: none; color: #fff; border-radius: 4px; transition: all 0.3s; }
.btn-back:hover { opacity: 0.85; color: #fff !important; }

@media only screen and (max-width: 767px) {
    .case-nav { flex-direction: column; align-items: flex-start; }
    .case-nav-back { margin-top: 15px; }
}

/* ==========================================================================
   相关案例推荐
   ========================================================================== */
.case-related { padding: 0.8rem 0; background: #fff; margin-top: 0.4rem; }
.case-related-title { text-align: center; font-weight: bold; margin-bottom: 0.5rem; }
.case-related-list { display: flex; gap: 20px; flex-wrap: wrap; }
.case-related-list li { flex: 0 0 calc(33.333% - 14px); min-width: 0; }
.case-related-list li a { display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; }
.case-related-list li a:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.case-related-img { overflow: hidden; }
.case-related-img img { width: 100%; height: 280px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.case-related-list li a:hover .case-related-img img { transform: scale(1.08); }
.case-related-info { padding: 15px; }
.case-related-info h3, .case-related-info h4 { font-weight: bold; margin-bottom: 4px; color: #333; }
.case-related-info p { color: #999; }

@media only screen and (max-width: 1024px) {
    .case-related-list li { min-width: 45%; flex: 0 0 48%; }
}
@media only screen and (max-width: 767px) {
    .case-related-list li { min-width: 100%; flex: 0 0 100%; }
    .case-related-img img { height: 180px; }
}

/* ==========================================================================
   index_07 底部 CTA
   ========================================================================== */
.zs-index-07 { background: linear-gradient(135deg, #0140bf, #01b3bf); overflow: hidden; text-align: center; padding: 0.9rem 0; }
.zs-index-07 h3 { line-height: 1em; margin-bottom: 0.4rem; }
.zs-index-07 .zs-cont { display: inline-block; text-align: left; }
.zs-index-07 .zs-header-map { margin: 0 auto; float: none; display: block; text-align: center; }
.zs-index-07 .zs-header-map a { background: #1e1e1e; width: 272px; height: 46px; line-height: 46px; margin: 0 auto; }
@media only screen and (max-width: 1440px) { .zs-index-07 .zs-header-map a { width: 200px; } }
@media only screen and (max-width: 767px) {
    .zs-index-07 h3 { line-height: 1.4em; margin-bottom: 15px; }
    .zs-index-07 .zs-header-map a { height: 36px; line-height: 36px; width: 170px; }
}

/* 头部样式 */
.case_detail_body .zs-header { background: #fff; box-shadow: none; border-bottom: none; }
.case_detail_body .zs-header.is-scroll { box-shadow: 0 10px 10px rgba(0,0,0,0.15); }

/* 响应式 */
@media only screen and (max-width: 767px) {
    .case-main-wrap { padding: 20px 15px; margin-top: 20px; }
    .case-related { padding: 30px 0; margin-top: 20px; }
}

/* ==========================================================================
   案例截图展示
   ========================================================================== */
.case-showcase { margin: 0.4rem 0 0; border-radius: 8px; overflow: hidden; position: relative; background: none; }
.case-showcase::before { display: none; }
.case-showcase-inner { padding: 0.8rem 0; position: relative; z-index: 1; }
.case-showcase-header { display: flex; align-items: center; margin-bottom: 0.2rem; }
.case-showcase-logo { width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; margin-right: 20px; overflow: hidden; flex-shrink: 0; }
.case-showcase-logo img { width: 140px; height: 140px; object-fit: contain; }
.case-showcase-name { font-size: 28px; font-weight: bold; color: #222; }
.case-showcase-desc { font-size: 14px; color: #666; line-height: 1.8; }

@media only screen and (max-width: 767px) {
    .case-showcase-inner { padding: 20px 15px; }
    .case-showcase-logo { width: 100px; height: 100px; margin-right: 12px; }
    .case-showcase-logo img { width: 100px; height: 100px; }
    .case-showcase-name { font-size: 20px; }
}