.wrap {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
    overflow: visible;
    padding: 60px;
    margin-top: 20px;
}

.slider {
    position: relative;
    z-index: 200;
    padding: 0;
    margin: 0 auto;
    max-width: 800px;
    width: 100%;
    overflow: visible;
}

.slider .item {
    width: 310px;
    height: 280px !important;
    transition: all .5s ease;
    position: relative;
    border-radius: 24px !important;
    overflow: visible;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.slider .item img {
    max-width: 100%;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: 24px !important;
    display: block;
    transition: all .5s ease;
    opacity: 0.3;
}

/* 为所有非中心项应用模糊效果 */
.slider .item.slick-slide {
    transform: scale(0.65) translate(680px);
    opacity: 1;
    transition: all .5s ease;
    z-index: 1;
    filter: blur(4px);
}

.slider .item.slick-slide.slick-center + .slick-slide {
    transform: scale(0.75) translate(-280px);
    z-index: 10;
    opacity: 1;
}

.slider .item.slick-slide.slick-center + .slick-slide img {
    opacity: 0.6;
    filter: blur(2px);
}

.slider .item.slick-slide.slick-center + .slick-slide + .item.slick-slide {
    transform: scale(0.65) translate(-680px);
    z-index: 5;
    opacity: 1;
}

.slider .item.slick-slide.slick-active {
    transform: scale(0.75) translate(280px);
    opacity: 1;
    z-index: 10;
}

.slider .item.slick-slide.slick-active img {
    opacity: 0.6;
    filter: blur(2px);
}

/* 中心项样式 */
.slider .item.slick-slide.slick-center {
    transform: scale(0.9);
    z-index: 30;
    max-width: 313px;
    height: 355px !important;
    position: relative;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    overflow: visible;
    opacity: 1;
    background: none;
    filter: blur(0);
}

.slider .item.slick-slide.slick-center img {
    opacity: 1;
    filter: blur(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* 清除所有before和after伪元素 */
.slick-slide::before,
.slick-slide::after,
.slick-center::before,
.slick-center::after,
.slider::before,
.slider::after,
.item::before,
.item::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* 只为中心项添加装饰框 */
.slider .item.slick-slide.slick-center::before {
    display: none !important;
}

/* 自定义框架容器样式 */
.frame-container {
    position: absolute;
    width: 410px;
    height: 410px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.frame-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
}

/* 非中心项的框架不显示 */
.slider .item:not(.slick-center) .frame-container {
    display: none;
}

.slider .item.slick-center .frame-container {
    z-index: 101;
    display: block;
}

.slick-track {
    padding: 50px 0 !important;
    display: flex;
    align-items: center;
    overflow: visible;
}

.slick-list {
    overflow: visible !important;
}

.slick-slide {
    overflow: visible !important;
}

.slick-dots {
    display: none !important;
}

.slick-slide, .slick-slide * {
    border: none !important;
    outline: none !important;
}

/* 添加新的溢出控制 */
.col-md-7 {
    overflow: hidden;
}

/* 响应式样式 */
@media (max-width: 768px) {
    .slider .item.slick-slide.slick-center::before {
        width: 260px;
        height: 280px;
        top: 50%;
        left: 50%;
        transform: translate(-53%, -48%);
    }

    .frame-container {
        width: 260px;
        height: 280px;
    }
}