/* 全局初始化 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #fff;
    font-family: "Microsoft Yahei",sans-serif;
    color: #333;
    line-height: 1.7;
    /* padding: 40px 3%; */
}


/* 顶部banner：通栏大图 */
.cases-banner{
    width: 100%;
    height: 350px; /* 高度可按需微调，参考图高度 */
    background: url("../images/top3.jpg") no-repeat center center;
    background-size: cover; /* 图片铺满、不变形 */
    margin-top: 90px; /* 向下避开fixed导航，不再用relative top产生空白 */
}

/* 移动端适配 */
@media(max-width:768px){
    /* banner头部 */
    .cases-banner {
        height: 220px;
        margin-top: 90px;
    }  
}

/* 标题样式 */
.cases-head{
    width: 87%;
    margin: 20px auto;
    padding: 20px 0 5px; /* 只保留上下间距，左右由父级company-intro控制 */
}
.cases-head h2{
    font-size:26px;
    color:#9B182F;
    position:relative;
    padding-left:16px; /* 原来12px加宽，防止竖线贴文字 */
}
.cases-head h2::before{
    content:"";
    width:4px;
    height:22px;
    background:#9B182F;
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
}
.cases-en-tip{
    font-size:12px;
    color:#999;
    display:block;
    margin-top:4px;
}


/* 经典案例区域 */
/* 仅给案例区域添加左右内边距，不影响顶部和底部 */
.case-section {
  padding: 40px 6%;
}
/* 顶部分类导航 */
.case-tab-wrap {
    display: flex;
    justify-content: center;
    gap: 60px;
    border-bottom: 1px solid #333;
    margin-bottom: 40px;
    position: relative;
}
.case-tab-item {
    padding: 12px 0;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    position: relative;
}
.case-tab-item.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: #000;
}

/* 案例列表容器 */
.case-list-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* 案例卡片样式 hover白边突出 */
.case-card {
    background: #f5f5f5;
    padding: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.case-card:hover {
    box-shadow: 0 0 0 6px #ffffff, 0 8px 20px rgba(0,0,0,0.12);
    transform: translateY(-6px);
}
.case-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    margin-bottom: 16px;
}
.case-card p {
    text-align: center;
    font-size: 15px;
    color: #333;
}

/* 分页 */
/* 分页整体布局 */
.page-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
/* 普通数字页码（保留原有边框样式） */
.page-btn[data-page] {
    /* width: 36px;
    height: 36px; */
    padding: 8px 14px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}
.page-btn[data-page].active {
    background: #9B182F;
    color: #fff;
    border-color: #9B182F;
}
.page-btn[data-page]:not(.active):hover {
    color: #9B182F;
    border-color: #9B182F;
}
/* 上一页、下一页 去除边框、改成文字样式 */
#prevPage, #nextPage {
    border: none;
    background: transparent;
    width: auto;
    height: 36px;
    padding: 0 12px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    border-radius: 0;
}
#prevPage:hover, #nextPage:hover {
    color: #9B182F;
}
/* 禁用态样式（首页/末页时置灰） */
#prevPage:disabled, #nextPage:disabled {
    color: #ccc;
    cursor: not-allowed;
}

/* 弹窗遮罩层 */
/* 弹窗遮罩层 修复版 */
.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.modal-box {
    width: 90%;
    height: 90vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 关键：盒子铺满全屏，图片可以向外溢出屏幕 */
    overflow: visible;
}
/* 关闭按钮 */
.modal-close {
    position: absolute;
    top: -30px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff33;
    color:#fff;
    border: none;
    cursor: pointer;
    font-size: 26px;
    z-index: 9999;
}
/* 左右箭头 固定层级，不被图片遮挡 */
.modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #00000040;
    border: none;
    color:#fff;
    font-size:22px;
    cursor: pointer;
    transition:0.2s;
    z-index: 9999; /* 关键：按钮永远在最上层 */
}
.modal-arrow:hover{
    background:#00000080;
}
.arrow-left{
    left:10px;
}
.arrow-right{
    right:10px;
}

/* 图片容器：只放图片，不包裹按钮和工具栏 */
.modal-img-box {
    width: 100%;
    height: calc(100% - 70px);
    overflow: visible;/* 关键：取消裁切，图片能溢出全屏 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* 缩放提示：独立固定，不跟随图片放大 */
.scale-tip{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.65);
    color: #fff;
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 9999; /* 最高层级 */
}
.scale-tip.show{
    opacity: 1;
}

/* 图片单独缩放旋转，不影响任何按钮 */
/* 图片：无容器限制，可无限放大溢出全屏 */
.modal-img-box img {
    width:auto;
    height:auto;
    max-width:none;
    max-height:none;
    transition: transform 0.15s ease;
    transform-origin:center center;
    cursor:grab;
}
.modal-img-box img:active{
    cursor:grabbing;
}
/* 底部工具栏：悬浮在画面最下方，层级置顶不会被大图盖住 */
.modal-toolbar{
    display:flex;
    gap:12px;
    padding:8px 16px;
    background:#00000060;
    border-radius:30px;
    position:fixed;
    bottom:30px;
    z-index:9999;
}
.tool-btn{
    width:36px;
    height:36px;
    background:transparent;
    border:none;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    border-radius:50%;
}
.tool-btn:hover{
    background:#ffffff25;
}