/* 外层盒子样式,左右箭头和小圆点都要采用绝对定位，所以其父盒子要采用相对定位*/
.banners {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
	margin: 0;
	border: 0;
}

.banners li {
	list-style: none;
}

/*滚动区 包裹所有图片的盒子 宽度要足够宽可以放下所有的图片*/
.images {
	position: absolute;
	top: 0;
	left: 0;
	width: 700%;
}

/* 对图片使用浮动 使其排列在一行*/
.images li {
	width: 100vw;
	height: 100vh; /* calc(100vh - 60px); */
	float: left;
	display: inline-block;
	list-style-type: none;
}

.images li img {
	width: 100vw;
	display: inline-block;
	height: 100%;
	object-fit: cover;
	min-width: 1200px;
}

/* .banner-1 {
	background: url('../static/img/index_banner1.png') center/cover no-repeat;
}

.banner-2 {
	background: url('../static/img/index_banner2.png') center/cover no-repeat;
} */

/*左右箭头相同样式*/
.prev,
.next {
	display: none;
	position: absolute;
	/* 绝对定位的盒子垂直居中 */
	top: 50%;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .3);
	text-align: center;
	text-align: center;
	color: #fff;
	text-decoration: none;
	padding-top: 10px;
	cursor: pointer;
}

.prev img,
.next img {
	width: 30px;
	height: 30px;
}

/*左箭头靠左定位*/
.prev {
	left: 30px;
	border-radius: 50%;
}

/*右箭头靠右定位*/
.next {
	right: 30px;

}

/* 小圆点外层盒子的样式 */
.dots {
	position: absolute;
	bottom: 60px;
	left: 50%;
	/* margin-left: -35px; */
	height: 13px;
	/* background:rgba(255,255,255, .3); */
	border-radius: 7px;
	transform: translate(-50%, 0);
}

/* 小圆点样式*/
.dots li {
	float: left;
	width: 28px;
	height: 6px;
	background-color: #505050;
	border-radius: 6px;
	margin: 5px;
}

/* 小圆点被点击的样式 */
.dots .active {
	background-color: #fff;
}

/* 核心业务区域 */
.core-business {
	background-color: #f9f9f9;
	padding: 80px 5% 70px;
}

.section-title {
	text-align: center;
	margin-bottom: 60px;
}

.section-title h2 {
	font-size: 1.875rem;
	color: #191919;
	margin-bottom: 10px;
}

.section-title p {
	color: #606266;
	font-size: 1.5rem;
}

.business-cards {
	display: flex;
	justify-content: space-around;
	/* gap: 30px; */
	flex-wrap: wrap;
}

.business-card {
	width: 350px;
	height: 480px;
	background: url('../static/img/guanggao_bg.png') center/cover no-repeat; 
	border-radius: 12px;
	padding: 48px 30px 0 40px;
	text-align: left;
	transition: transform 0.3s;
	position: relative;
	margin-bottom: 10px;
}

.business-card:hover {
	transform: translateY(-5px);
}

.business-icon {

	margin: 30px auto 20px;
	display: flex;
	align-items: center;
	justify-content: end;
	border-radius: 16px;
	background-color: #E8F3FF;
}

.business-icon img {
	max-width: 280px;
	max-height: 240px;
	position: absolute;
	bottom: 0;
	right: 0;
}

.business-card h3 {
	color: #191919;
	font-size: 1.5rem;
	margin-bottom: 15px;
}

.business-card h3 span {
	display: block;
	font-size: 1.25rem;
	color: #606266;
	font-weight: normal;
	margin-top: 5px;
}

.business-card p {
	color: #787878;
	font-size: 1rem;
	line-height: 1.5;
}

/* 解决方案区域 */
.solutions {
	padding: 80px 5%;
	background-color: white;
}

.solution-cards {
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
}

.solution-card {
	background-color: #f9f9f9;
	border-radius: 16px;
	padding: 56px 0;
	display: flex;
	align-items: center;
	/* gap: 40px; */
	/* box-shadow: 0 4px 20px rgba(0,0,0,0.05); */
}

.solution-text {
	flex: 1;
	min-width: 50%;
}

.solution-text-left {
	padding-left: 15%;

}

.solution-text-right {
	padding-left: 5%;

}

.solution-text h3 {
	color: #191919;
	font-size: 1.5rem;
	margin-bottom: 20px;
	font-family: PingFang SC, PingFang SC-Medium;
	padding-left: 20px;
	font-weight: Medium;
	/* text-align: left; */
}

.solution-text ul {
	list-style-type: none;
}

.solution-text li {
	color: #787878;
	font-size: 1rem;
	line-height: 2.2;
	padding-left: 20px;
	position: relative;
	/* text-align: left; */
}

.solution-text li:before {
	content: "。";
	color: #0052d9;
	position: absolute;
	left: 0;
	line-height: 1;
	font-weight: bold;
	font-size: 24px;
}

.solution-image {
	flex: 1;
	display: flex;
	justify-content: center;
	min-width: 50%;
}

.solution-image img {
	max-width: 100%;
}

.phone-mockup {
	width: 180px;
	height: 360px;
	background-color: white;
	border: 12px solid #333;
	border-radius: 36px;
	position: relative;
	overflow: hidden;
}

.phone-screen {
	width: 100%;
	height: 100%;
	background-color: #F5F7FA;
	position: relative;
}

.graphic-elements {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
}



/* 响应式调整 */
@media (max-width: 768px) {
	.solution-card {
		flex-direction: column;
		text-align: center;
	}

	.nav-links {
		display: none;
	}

	.hero h1 {
		font-size: 32px;
	}

	.hero p {
		font-size: 16px;
		padding: 0 5%;
	}
}