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);
}

/* 榛樿鐘舵€ - 绗竴寮犲畬鏁存樉绀猴紝鍏朵粬鍙樉绀轰腑闂?72px */
.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);
    /* 闈瀉ctive鐘舵€佷笅鏍囬涓庡浘鐗囧簳杈归棿闅?5px */
    /* 杩欓€氳繃.img-content鐨刾adding-bottom:35px瀹炵幇 */
}

.img-wrapper:not(.active) .img-content {
    padding-bottom: 35px; /* 纭繚闈瀉ctive鐘舵€佷篃鏈?5px搴曡竟璺 */
}

/* 鎮仠鏁堟灉 */
.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;
}

/* 涓轰笉鍚岃鏁扮殑鎻忚堪璁剧疆涓嶅悓鐨刴ax-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;
}