.products {
	height: 90vh;
	background: var(--dark-color);
	color: var(--text);
}

.container-product {
	width: 100%;
	height: 100%;
}

/* 产品 */
.product-slider {
	display: flex;
	/* gap: 30px; */
	overflow-x: auto;
	padding: 10px 0;
	scroll-snap-type: x mandatory;
	height: 70vh;
	justify-content: space-between;
}

.product-item {
	min-width: 300px;
	scroll-snap-align: start;
	background: white;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	flex: 1;
	margin: 0 10px;
	/* 设置子元素之间的间距 */
	position: relative;
	background-color: var(--dark-color);
}

.product-item img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	transition: transform 0.5s ease, opacity 0.5s ease;
	opacity: 1;
}

.product-item img:hover {
	transform: scale(1.2);
	opacity: 0.8;
	transform: rotateX(15deg) rotateY(15deg);
}

.product-item img:not(:hover) {
	transform: scale(1);
	opacity: 1;
}

.product-title {
	position: absolute;
	top: 6%;
	left: 10%;
	transform: translate(-50%, -50%);
	color: var(--text);
}

.product-title2 {
	position: absolute;
	top: 50%;
	left: 12%;
	transform: translate(-50%, -50%);
	color: var(--text);
}

.product-content {
	position: absolute;
	top: 16%;
	left: 23%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
}

.product-content2 {
	position: absolute;
	top: 61%;
	left: 20%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
}

.product-content3 {
	position: absolute;
	top: 61%;
	left: 43%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
}

.product-content4 {
	position: absolute;
	top: 61%;
	left: 67%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
}

.product-content5 {
	position: absolute;
	top: 61%;
	left: 91%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
}

.product-content21 {
	position: absolute;
	top: 68%;
	left: 20%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
	display: -webkit-inline-box;
}

.product-content22 {
	position: absolute;
	top: 74%;
	left: 20%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
	display: -webkit-inline-box;
}

.product-content23 {
	position: absolute;
	top: 80%;
	left: 20%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
	display: -webkit-inline-box;
}

.product-content24 {
	position: absolute;
	top: 86%;
	left: 20%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
	display: -webkit-inline-box;
}

.product-content31 {
	position: absolute;
	top: 68%;
	left: 44%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
}

.product-content41 {
	position: absolute;
	top: 68%;
	left: 67%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
	display: -webkit-inline-box;
}

.product-content42 {
	position: absolute;
	top: 74%;
	left: 67%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
	display: -webkit-inline-box;
}

.product-content43 {
	position: absolute;
	top: 80%;
	left: 67%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
	display: -webkit-inline-box;
}

.product-content44 {
	position: absolute;
	top: 86%;
	left: 67%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
	display: -webkit-inline-box;
}

.product-content51 {
	position: absolute;
	top: 68%;
	left: 91%;
	transform: translate(-15%, -10%);
	color: var(--text);
	width: 90%;
}

.product-item h3 {
	padding: 20px;
	text-align: left;
	margin-left: 30px;
}