.list--2 {
	background-color: var(--bg);
	padding-inline: var(--pd);
	& .types {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		transform: translate(0, 4rem);
		justify-content: center;
		& .item {
			flex: 0 0 calc(100% / 3 - 2rem * 2 / 3);
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 1rem;
			& > img {
				position: relative;
				width: 100%;
				aspect-ratio: 4 / 3;
				object-fit: cover;
				box-shadow: var(--shad);
				border-radius: 1rem;
				overflow:hidden;
				z-index: 1;
			}
			& > .slider {
				position: relative;
				width: 100%;
				aspect-ratio: 4/3;
				overflow: hidden;
				border-radius: 1rem;
				  
				& .before,
				& .after {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
					overflow: hidden;
					& img {
						position: absolute;
						top: 0;
						left: 0;
						aspect-ratio: 4/3;
						height: 100%;
						object-fit: cover;
						z-index:1
					}
				}
				& .before {
					width: 50%;
					z-index: 2;
					img {
						z-index: 2;
					}
				}
				& .handle {
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 0.2rem;
					height: 100%;
					cursor: pointer;
					background-color: var(--bg);
					box-shadow: var(--shad);
					z-index: 3;
					&:before {
						content: "";
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 1.5rem;
						height: 1.5rem;
						border-radius: 50%;
						background-color: var(--main);
						z-index:4;
					}
				}
			}
			& > a {
				position: relative;
				display:block;
				text-decoration:none;
				color:var(--g6);
				font-size:1rem;
				font-weight:600;
				outline: none;
				z-index:2;
			}
		}
	}
	@media (max-width:991px) {
		& .types {
			& .item {
				flex: 0 0 calc(100% / 2 - 2rem * 1 / 2);
			}
		}
	}
	@media (max-width:767px) {
		& .title {
			flex-direction: column;
			& .ttl,
			& .dsc {
				width: 100%;
			}
			& .ttl {
				font-size: 2rem;
			}
		}
		& .types {
			& .item {flex:0 0 100%;}
		}
	}
}