.zwqh-body {
    background-image: url(../image/common/bg-mini.png?v=1.0);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: repeat-y;
}

.zwqh-body2 {
    background-color: #F0EBE2;
}

/* 至味清欢 · Swiper slides-scale 风格竖轴 */
#zwqh-axis-wrap {
    min-width: 0;
}

.zwqh-axis-viewport {
    width: 100%;
    min-width: 0;
}

.zwqh-swiper {
    --zwqh-slide-dur: 0.5s;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 10.5rem;
    box-sizing: border-box;
    overflow: hidden;
}

/* 异形：仅 GPU 层，避免整列 transform 参与 flex 最小宽度计算导致撑破父级 */
.zwqh-swiper .zwqh-slide-irregular {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.zwqh-swiper .zwqh-slide-irregular .zwqh-slide-scale {
    transform: translateZ(0);
}

.zwqh-swiper .swiper-wrapper {
    align-items: center;
}

.zwqh-swiper .swiper-slide {
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}

.zwqh-slide-scale {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    will-change: transform;
}

a.zwqh-axis-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.zwqh-axis-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transform-origin: center center;
    /* 默认最矮档；中间两档与 100% 由 JS 按 slide.progress 写入 */
    /* height: 59.5238%; */
    height: 100%;
    transition: height var(--zwqh-slide-dur) cubic-bezier(0.33, 1, 0.68, 1);
}

.zwqh-ray {
    display: block;
    width: 2px;
    flex: 1 1 0;
    min-height: 8px;
}

.zwqh-ray--up,
.zwqh-ray--down {
    transition: background var(--zwqh-slide-dur) cubic-bezier(0.33, 1, 0.68, 1);
}

.zwqh-swiper .swiper-slide-active .zwqh-ray--up {
    background: linear-gradient(to top, #A35446 0%, rgba(163, 84, 70, 0) 100%);
}

.zwqh-swiper .swiper-slide-active .zwqh-ray--down {
    background: linear-gradient(to bottom, #A35446 0%, rgba(163, 84, 70, 0) 100%);
}

.zwqh-swiper .swiper-slide:not(.swiper-slide-active) .zwqh-ray--up {
    background: linear-gradient(to top, #E6D5CE 0%, rgba(230, 213, 206, 0) 100%);
}

.zwqh-swiper .swiper-slide:not(.swiper-slide-active) .zwqh-ray--down {
    background: linear-gradient(to bottom, #E6D5CE 0%, rgba(230, 213, 206, 0) 100%);
}

.zwqh-axis-text {
    display: block;
    flex-shrink: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    writing-mode: vertical-rl;
    letter-spacing: 0.12em;
    transition: color var(--zwqh-slide-dur) cubic-bezier(0.33, 1, 0.68, 1);
}

.zwqh-swiper .swiper-slide-active .zwqh-axis-text {
    color: #872311;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 0;
}

.zwqh-swiper .swiper-slide:not(.swiper-slide-active) .zwqh-axis-text {
    color: #CFB3A6;
    font-size: 20px;
    padding: 10px 0;
}

/* group2 叠放：悬停左右散开，left 过渡 */
#zwqh-group2-wrap .zwqh-group2-panel {
    transition: left 0.5s cubic-bezier(0.33, 0.86, 0.25, 1);
}

.zwqh-group2-title {
    writing-mode: vertical-rl;
}

/* 当前展开/悬停：标题 #872311；其余：浅色，随 .zwqh-group2-active 切换 */
#zwqh-group2-wrap .zwqh-group2-title-main,
#zwqh-group2-wrap .zwqh-group2-title-author {
    transition: color 0.38s ease;
}

#zwqh-group2-wrap .zwqh-group2-panel:not(.zwqh-group2-active) .zwqh-group2-title-main,
#zwqh-group2-wrap .zwqh-group2-panel:not(.zwqh-group2-active) .zwqh-group2-title-author {
    color: #cfb3a6;
}

#zwqh-group2-wrap .zwqh-group2-panel.zwqh-group2-active .zwqh-group2-title-main,
#zwqh-group2-wrap .zwqh-group2-panel.zwqh-group2-active .zwqh-group2-title-author {
    color: #872311;
}

/* group3 卡片：悬停放大 */
.zwqh-group3-item {
    position: relative;
    z-index: 0;
    transition: transform 0.3s cubic-bezier(0.33, 0.86, 0.25, 1);
    transform-origin: center center;
}

.zwqh-group3-item:hover {
    z-index: 2;
    transform: scale(1.06);
}


/* 内容区域 */
.zwqh-detail-box {
    /* 设置边框宽度，至少要等于花纹角的宽度/高度 */
    border-width: 55px 55px 55px 55px;
    /* 上 右 下 左，根据你的花纹尺寸调整 */
    border-style: solid;
    border-image-source: url('https://cdn.zhongcan.chengxuai.com/assets/image/nav4.zwqh/content/bg.svg');

    /* 关键：设置切割线（单位为像素，相对于图片） */
    /* 四个数值分别表示：上、右、下、左 的切割位置 */
    border-image-slice: 55 55 55 55;

    /* 边缘填充方式：repeat/stretch/round */
    border-image-repeat: repeat;
    /* 边缘重复，适合花纹连续 */

    /* 让图片填满边框区域 */
    border-image-width: 55px 55px 55px 55px;
}