@charset "utf-8";
/* ============================================================
   产品截图画廊：轮播美化 + 融合式大图查看（gallery-lightbox）
   配套 /js/gallery-lightbox.js 使用，品牌色 #2B6CE5 / #FCB333
   ============================================================ */

/* ---------- 轮播区域美化（.mainfunction 为历史类名，其他容器加 .pd-gallery 即可接入） ---------- */
/* 基础布局兜底（仅供绝对定位按钮/分页锺点；宽度、裁切、图片尺寸仍由各产品 CSS 定义） */
.pd-gallery{
    position: relative;
    /* 只补底部留白给分页圆点，不覆盖各页已有的 padding-top */
    padding-bottom: 56px;
}
.mainfunction{
    padding: 16px 0 56px;
}
/* 将图片在 slide 内水平居中（slidesPerView:3 时 slide 宽与图宽不等，默认左对齐会导致中间主图偏移） */
.mainfunction .swiper-slide,
.pd-gallery .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainfunction .swiper-slide img,
.pd-gallery .swiper-slide img{
    display: block;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(31, 46, 69, 0.12);
    transition: opacity .35s ease, box-shadow .35s ease, filter .35s ease;
    /* 防拖拽保存 / 防选中复制 */
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* 非当前图弱化，突出中间主图 */
.mainfunction .swiper-slide:not(.swiper-slide-active) img,
.pd-gallery .swiper-slide:not(.swiper-slide-active) img{
    opacity: .5;
    filter: saturate(.85);
    cursor: pointer;
}
.mainfunction .swiper-slide-active img,
.pd-gallery .swiper-slide-active img{
    cursor: zoom-in;
    box-shadow: 0 14px 42px rgba(43, 108, 229, 0.22);
}
.mainfunction .swiper-slide-active img:hover,
.pd-gallery .swiper-slide-active img:hover{
    box-shadow: 0 16px 48px rgba(43, 108, 229, 0.3);
}

/* 圆形导航按钮（内缩，避开右侧固定悬浮组件 .Banner_Lists） */
.mainfunction [class*="swiper-button-prev"],
.mainfunction [class*="swiper-button-next"],
.pd-gallery [class*="swiper-button-prev"],
.pd-gallery [class*="swiper-button-next"]{
    width: 44px;
    height: 44px;
    margin-top: 0;
    top: calc(50% - 30px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 16px rgba(43, 108, 229, 0.18);
    color: #2B6CE5;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.mainfunction [class*="swiper-button-prev"],
.pd-gallery [class*="swiper-button-prev"]{ left: 120px; }
.mainfunction [class*="swiper-button-next"],
.pd-gallery [class*="swiper-button-next"]{ right: 120px; }
.mainfunction [class*="swiper-button-prev"]:hover,
.mainfunction [class*="swiper-button-next"]:hover,
.pd-gallery [class*="swiper-button-prev"]:hover,
.pd-gallery [class*="swiper-button-next"]:hover{
    background: #2B6CE5;
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(43, 108, 229, 0.35);
}
.mainfunction [class*="swiper-button-prev"]:after,
.mainfunction [class*="swiper-button-next"]:after,
.pd-gallery [class*="swiper-button-prev"]:after,
.pd-gallery [class*="swiper-button-next"]:after{
    font-size: 16px;
    font-weight: 700;
}

/* 分页圆点 */
.mainfunction .swiper-pagination,
.pd-gallery .swiper-pagination{
    bottom: 20px;
}
.mainfunction .swiper-pagination-bullet,
.pd-gallery .swiper-pagination-bullet{
    width: 8px;
    height: 8px;
    background: #B9CCF2;
    opacity: 1;
    border-radius: 4px;
    transition: width .25s ease, background .25s ease;
}
.mainfunction .swiper-pagination-bullet-active,
.pd-gallery .swiper-pagination-bullet-active{
    width: 22px;
    background: #2B6CE5;
}

/* ---------- 融合式大图查看层 ---------- */
.glb-mask{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10010; /* 高于右侧悬浮组件 .Banner_Lists 的 10000 */
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(21, 34, 58, 0.52);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    opacity: 0;
    transition: opacity .28s ease;
}
.glb-mask.glb-open{
    display: flex;
}
.glb-mask.glb-show{
    opacity: 1;
}

.glb-stage{
    position: relative;
    line-height: 0;
}
.glb-img{
    display: block;
    max-width: 86vw;
    max-height: 76vh;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 24px 80px rgba(10, 25, 60, 0.45);
    opacity: 0;
    transform: scale(.88) translateY(18px);
    transition: opacity .28s ease, transform .34s cubic-bezier(.22, .9, .3, 1.12);
    /* 防拖拽保存 / 防选中复制 */
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none; /* 屏蔽右键与拖拽，按钮交互不受影响 */
}
.glb-show .glb-img{
    opacity: 1;
    transform: none;
}
/* 切换图片时的滑入动效 */
@keyframes glbInNext{
    from{ opacity: 0; transform: translateX(46px) scale(.98); }
    to  { opacity: 1; transform: none; }
}
@keyframes glbInPrev{
    from{ opacity: 0; transform: translateX(-46px) scale(.98); }
    to  { opacity: 1; transform: none; }
}
.glb-show .glb-img.glb-to-next{
    animation: glbInNext .32s cubic-bezier(.22, .9, .3, 1.05);
}
.glb-show .glb-img.glb-to-prev{
    animation: glbInPrev .32s cubic-bezier(.22, .9, .3, 1.05);
}

/* 计数徽标 */
.glb-counter{
    position: absolute;
    left: 50%;
    bottom: -44px;
    transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 13px;
    line-height: 18px;
    color: #FFFFFF;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* 圆形按钮公共样式 */
.glb-btn{
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #2B6CE5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(10, 25, 60, 0.3);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.glb-btn:hover{
    background: #2B6CE5;
    color: #FFFFFF;
    transform: scale(1.06);
}
.glb-btn svg{
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.glb-prev{ left: -72px; }
.glb-next{ right: -72px; }

/* 关闭按钮 */
.glb-close{
    position: absolute;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #FFFFFF;
    color: #1F2E45;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(10, 25, 60, 0.3);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.glb-close:hover{
    background: #FCB333;
    color: #FFFFFF;
    transform: rotate(90deg);
}
.glb-close svg{
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* 视口较窄时按钮收进内侧，避免溢出 */
@media (max-width: 1280px){
    .glb-prev{ left: 12px; }
    .glb-next{ right: 12px; }
    .glb-close{ top: 12px; right: 12px; }
}