.slider-block {
	display: block;
	cursor: grab;
	position: relative;
	user-select: none;
	margin-bottom: 0.3rem;
}

	.slider-block:active {
		cursor: grabbing;
	}

	.slider-block > div:not(.btns):not(.title) {
		border-top: 0.01rem solid var(--grey);
		border-bottom: 0.01rem solid var(--grey);
		opacity: 0;
		transform: translate(0, 1rem);
	}

	.slider-block.animate > div:not(.btns):not(.title) {
		transition:
			transform var(--dur-medium) var(--ease),
			opacity var(--dur-medium) var(--ease);
		opacity: 1;
		transform: translate(0, 0rem);
	}

	.slider-block .title {
		z-index: 2;
		position: absolute;
		top: 0.6rem;
		left: 0.5rem;
	}

	.slider-block .media {
		user-select: none;
		pointer-events: none;
	}

	.slider-block .btns {
		display: flex;
		gap: 0.04rem;
		position: absolute;
		bottom: -0.23rem;
		right: 0.5rem;
	}

	.slider-block .btns .btn {
			display: flex;
			cursor: pointer;
			transition: background-color var(--dur-fast) var(--ease);
			align-items: center;
			justify-content: center;
			width: 0.46rem;
			height: 0.46rem;
			background-color: #ffffff;
			border-radius: 0.03rem;
		}

	.slider-block .btns svg {
			display: block;
			width: 0.14rem;
		}

	.slider-block .btns .next svg {
			transform: rotate(180deg);
		}

	@media screen and (hover: hover) {
			.slider-block .btns .btn:hover {
				background-color: var(--grey);
			}
		}

	.slider-block .btns .btn:active {
			background-color: #ffffff;
		}

	.slider-block .main-slide {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		height: 100%;
		width: 7.06rem;
		border-right: 0.01rem solid var(--grey);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 0.2rem 0 0.5rem;
		background-color: var(--white);
		user-select: none;
	}

	.slider-block .main-slide > div {
			position: relative;
			top: 0.72rem;
			width: 100%;
		}

	.slider-block .main-slide .slide-title {
			max-width: 3.26rem;
		}

	.slider-block .main-slide .media-frame {
			overflow: clip;
			background-color: var(--black);
			user-select: none;
		}

	.slider-block .main-slide .main-image {
			transform-origin: 0% 50%;
			user-select: none;
		}

	.slider-block .main-slide .main-image.to-right {
				transform-origin: 100% 50%;
			}

	.slider-block .main-slide .button {
			position: absolute;
			right: 0.2rem;
			bottom: 0.2rem;
			padding: 0.06rem 0.2rem;
		}

	.slider-block .slider-frame {
		position: relative;
		color: var(--black);
		padding-left: 7.06rem;
		padding-right: 0.78rem;
	}

	.slider-block .slider-frame .splide__track {
			overflow: visible;
		}

	.slider-block .slider-frame .slide {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0.2rem;
			border-right: 0.01rem solid var(--grey);
			height: 8.2rem;
			user-select: none;
		}

	.slider-block .slider-frame .slide > div {
				width: 100%;
				min-height: 3.82rem;
			}

	.slider-block .slider-frame .slide-title {
			max-width: 3.2rem;
		}

	.slider-block .text-s {
		line-height: 1em;
		letter-spacing: -0.02em;
		user-select: none;
	}

	.slider-block .num {
		margin-bottom: 0.65rem;
	}

	.slider-block .date-category {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.17rem;
	}

	.slider-block .media-frame {
		display: block;
		position: relative;
		aspect-ratio: 324 / 150;
		margin-bottom: 0.2rem;
	}

	.slider-block .media-frame .media {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

	.slider-block .slide-title {
		font-size: 0.2rem;
		line-height: 0.24rem;
		letter-spacing: -0.02em;
		font-weight: 500;
		min-height: 0.48rem;
	}

	.slider-block .user {
		display: flex;
		align-items: center;
		gap: 0.1rem;
		margin-top: 0.2rem;
		min-height: 0.4rem;
	}

	.slider-block .user.mobile {
			display: none;
		}

	.slider-block .user .user-image {
			aspect-ratio: 1;
			width: 0.4rem;
			border-radius: 0.04rem;
			overflow: clip;
		}

	.slider-block .user .name {
			font-size: 0.14rem;
			line-height: 0.12rem;
			letter-spacing: -0.02em;
			font-weight: 500;
			margin-bottom: 0.03rem;
		}

	.slider-block .user .role {
			font-weight: 450;
		}

	.slider-block .mobile-button {
		display: none;
	}

	@media screen and (max-width: 768px) and (orientation: portrait) {
		.slider-block .title {
			top: 0.4rem;
			left: 0.2rem;
		}

		.slider-block .btns {
			display: none;
		}

		.slider-block .main-slide {
			display: none;
		}

		.slider-block .slider-frame {
			padding: 0;
			padding-right: 0.4rem;
		}

			.slider-block .slider-frame .slide {
				height: 5.36rem;
				padding-bottom: 0.4rem;
				justify-content: flex-end;
			}

		.slider-block .slide-title {
			font-size: 0.24rem;
			line-height: 0.26rem;
			min-height: 0.78rem;
			margin-bottom: 0.2rem;
		}

		.slider-block .num {
			margin-bottom: 0.24rem;
		}

		.slider-block .date-category {
			margin-bottom: 0.12rem;
		}

		.slider-block .media-frame {
			aspect-ratio: 290 / 160;
		}

		.slider-block .user:not(.mobile) {
			display: none;
		}

		.slider-block .user.mobile {
			position: absolute;
			left: 0.14rem;
			bottom: 0.25rem;
			margin: 0;
			width: 100%;
		}

			.slider-block .user.mobile .user-image {
				position: relative;
			}

			.slider-block .user.mobile .name,
			.slider-block .user.mobile .role {
				color: var(--white);
			}

		.slider-block .button {
			transition: opacity var(--dur-fast) var(--ease);
			width: 100%;
			opacity: 0;
			pointer-events: none;
		}

		.slider-block .slide.is-active .button {
			opacity: 1;
			pointer-events: all;
		}

		.slider-block .mobile-button {
			display: flex;
		}
	}