/* ============================================================
   客户案例栏目 新版卡片样式  anli_new.css  (2026-09-17)
   版式参考行业通用的"左右交错卡片"设计，配色用海达品牌色：
   深蓝 #053882 (logo主色) + 珊瑚橙 #fc7449 (点缀色)
   仅作用于 .hd-case-* 类，不影响站内其他任何页面/模块。
   ============================================================ */
.hd-case-head { text-align:center; margin:40px auto 10px; }
.hd-case-head h2 { font-size:26px; font-weight:bold; color:#333; position:relative; display:inline-block; line-height:30px; margin:0; padding:0; }
.hd-case-head h2 span { color:#053882; }
.hd-case-head h2:after { content:''; display:block; width:50px; height:2px; background:#fc7449; margin:12px auto 0; }
.hd-case-head p { max-width:860px; margin:18px auto 0; font-size:14px; line-height:26px; color:#888; }

.hd-case-list { list-style:none; margin:30px 0 10px; padding:0; }
.hd-case-list:after { content:''; display:block; height:0; clear:both; }
.hd-case-item { position:relative; float:left; width:100%; margin-top:46px; border:5px solid #d9d9d9; background:#fff;
    -webkit-transition:box-shadow .5s ease, border-color .5s ease; transition:box-shadow .5s ease, border-color .5s ease; }
.hd-case-item:first-child { margin-top:16px; }
.hd-case-item:hover { box-shadow:0 0 18px rgba(12,3,6,.25); border-color:#c8c8c8; }

/* 四角装饰框（悬停时展开） */
.hd-corner { position:absolute; inset:0; pointer-events:none; z-index:3; }
.hd-corner:before { content:''; display:block; width:0; height:0; position:absolute; left:-5px; top:-5px;
    border-top:5px solid #053882; border-left:5px solid #053882; -webkit-transition:all .55s ease; transition:all .55s ease; }
.hd-corner:after { content:''; display:block; width:0; height:0; position:absolute; right:-5px; bottom:-5px;
    border-right:5px solid #053882; border-bottom:5px solid #053882; -webkit-transition:all .55s ease; transition:all .55s ease; }
.hd-case-item:hover .hd-corner:before, .hd-case-item:hover .hd-corner:after { width:101%; height:103%; }

/* 图片区：奇数条在右，偶数条在左；初始向外错位，悬停滑入 */
.hd-case-img { float:right; width:50%; height:340px; overflow:hidden; background:#f5f5f5; position:relative; z-index:2;
    -webkit-transform:translate(46px,-20px); transform:translate(46px,-20px);
    -webkit-transition:transform .55s ease; transition:transform .55s ease; }
.hd-case-item:nth-child(even) .hd-case-img { float:left; -webkit-transform:translate(-46px,-20px); transform:translate(-46px,-20px); }
.hd-case-item:hover .hd-case-img { -webkit-transform:translate(0,0); transform:translate(0,0); }
.hd-case-img a { display:block; width:100%; height:100%; }
.hd-case-img img { width:100%; height:100%; object-fit:cover; display:block; border:0; }

/* 文字区 */
.hd-case-text { position:absolute; left:0; top:0; width:50%; height:100%; text-align:center; z-index:1; }
.hd-case-item:nth-child(even) .hd-case-text { left:auto; right:0; }
.hd-case-inner { position:absolute; top:50%; left:50%; width:86%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
.hd-case-text h3 { font-size:20px; font-weight:bold; line-height:28px; margin:0; padding:0 0 14px; position:relative;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hd-case-text h3 a { color:#053882; text-decoration:none; }
.hd-case-text h3:after { content:''; display:block; width:40px; height:2px; background:#fc7449; position:absolute; left:50%; bottom:0; margin-left:-20px;
    -webkit-transition:width .45s ease; transition:width .45s ease; }
.hd-case-item:hover .hd-case-text h3:after { width:90px; }
.hd-case-desc { margin:16px 0 20px; font-size:13px; line-height:24px; color:#888; text-align:left;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hd-case-date { display:block; margin:-10px 0 16px; font-size:12px; color:#bbb; }

/* more 按钮 */
.hd-case-more { display:inline-block; width:130px; height:32px; line-height:32px; margin:0 auto; text-align:center;
    color:#053882; background:#fff; box-shadow:0 0 10px rgba(12,3,6,.13); text-decoration:none; font-size:13px;
    position:relative; overflow:hidden; }
.hd-case-more span { position:relative; z-index:1; }
.hd-case-more em { font-style:normal; float:right; width:32px; height:32px; line-height:32px; background:#053882; color:#fff; font-size:16px;
    position:relative; z-index:1; -webkit-transition:all .45s ease; transition:all .45s ease; }
.hd-case-more:before { content:''; display:block; width:0; height:100%; background:#053882; position:absolute; left:0; top:0;
    -webkit-transition:width .35s ease; transition:width .35s ease; }
.hd-case-more:hover { color:#fff; }
.hd-case-more:hover:before { width:100%; }
.hd-case-more:hover em { background:#fc7449; }

/* 窄桌面窗口兜底（本站 <1000px 会自动跳手机站，此条仅防浏览器窗口拖窄时错位） */
@media (max-width:1100px) {
    .hd-case-img, .hd-case-item:nth-child(even) .hd-case-img { -webkit-transform:translate(0,0); transform:translate(0,0); }
    .hd-case-img { height:280px; }
}