/* 右侧容器布局 (垂直排列) */
.ssir_img {
    display: flex;
    flex-direction: column; /* 上下排列 */
    gap: 15px; /* 大图和缩略图之间的间距 */
}

/* 1. 大图区域样式 */
.ssir_main_view {
    width: 244px;  /* 保持你原有的宽度 */
    height: 442px; /* 保持你原有的高度 */
    background-color: #f5f5f5; /* 图片加载前的背景色 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #eee;
}

.ssir_main_view img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 保证图片完整显示且不变形 */
    transition: opacity 0.3s ease;
}

/* 2. 缩略图区域样式 */
.ssir_thumbs {
    display: flex;
    justify-content: flex-start; /* 缩略图居左或居中 */
    gap: 10px;
    overflow-x: auto; /* 如果缩略图太多，允许横向滚动 */
}

.thumb-item {
    width: 50px; /* 缩略图宽度 */
    height: 50px; /* 缩略图高度 */
    border: 2px solid transparent; /* 默认边框透明 */
    cursor: pointer;
    display: block;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 4px;
}

/* 缩略图被选中时的样式 */
.thumb-item.active {
    border-color: #0056b3; /* 选中高亮颜色，根据你网站主题修改 */
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}