body {
	background-color: #F5F5F7;
	text-align: center;
}

.content-container{
	margin-top: 90px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1400px;
	height: auto;
	text-align: left;
	padding: 0;
	border-radius: 8px;
}

.core_title {
	font-size: 46px;
	font-weight: medium;
	padding: 0;
}

.core_title_grey {
	color: #727272;
}

.core_img_show {
	width: 100%;
	height: 521px;
	margin-top: 60px;
	display: flex;
	overflow: hidden;
	position: relative;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.core_img_show .img-wrapper {
	position: absolute;
    top: 0;
    height: 521px;
    overflow: hidden;
    cursor: pointer;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
    filter: brightness(0.85);
}

.core_img_show img {
	height: 521px;
    max-width: 555px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: -142px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 默认状态 - 第一张完整显示，其他只显示中间272px */
.core_img_show .img-wrapper.active {
	width: 555px;
}

.core_img_show .img-wrapper:nth-child(1) {
	left: 0;
}

.core_img_show .img-wrapper.active:nth-child(1) {
	left: 0px;
}

.core_img_show .img-wrapper:nth-child(2) {
	left: 565px;
}

.core_img_show .img-wrapper.active:nth-child(2) {
	left: 282px;
}

.core_img_show .img-wrapper:nth-child(3) {
	left: 847px; /* 555 + 272 + 10 */
}

.core_img_show .img-wrapper.active:nth-child(3) {
	left: 564px;
}

.core_img_show .img-wrapper:nth-child(4) {
	left: 1129px; /* 555 + 272 + 10 */
}

.core_img_show .img-wrapper.active:nth-child(4) {
	left: 847px;
}

.core_img_show .img-wrapper.active img {
	width: 555px;
	left: 0;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.core_img_show .img-wrapper img {
	width: 555px;
	left: -142px;
}

/* 图片内容容器 - 使用绝对定位，高度自适应 */
.img-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 35px 35px 35px;
    color: white;
    z-index: 10;
    box-sizing: border-box;
    pointer-events: none;
    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.45) 100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100px;
}

.img-title {
    font-size: 24px;
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    pointer-events: auto;
    line-height: 1.3;
    min-height: 26px;
    margin-bottom: 0;
}

/* 描述样式 - 自适应高度 */
.img-description {
    font-size: 15px;
    line-height: 24px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin: 0;
    padding: 0;
    pointer-events: auto;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* Active状态下的样式 */
.img-wrapper.active .img-content {
    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.45) 100%);
    padding-bottom: 35px;
}

.img-wrapper.active .img-title {
    font-size: 24px;
    transform: scale(1.1);
    transform-origin: left center;
    margin-bottom: 25px;
}

.img-wrapper.active .img-description {
    opacity: 1;
    max-height: 200px;
    transition-delay: 0.1s;
}

/* Not active状态下的样式 */
.img-wrapper:not(.active) .img-title {
    transform: scale(1);
    /* 非active状态下标题与图片底边间隙35px */
    /* 这通过.img-content的padding-bottom:35px实现 */
}

.img-wrapper:not(.active) .img-content {
    padding-bottom: 35px; /* 确保非active状态也有35px底边距 */
}

/* 悬停效果 */
.img-wrapper:hover .img-content {
    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.45) 100%);
}

/* 优化整体过渡性能 */
.img-wrapper,
.img-wrapper * {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 为不同行数的描述设置不同的max-height值 */
.img-wrapper.active .img-description {
    /* 根据你的最大行数设置，比如5行约120px */
    max-height: 120px;
}

/* 如果需要支持更长的描述，可以使用更大的值 */
.img-description.long-text {
    max-height: 0;
}

.img-wrapper.active .img-description.long-text {
    max-height: 200px;
}