/* 首页 */
.banner {
	background-image: url(../images/service_banner.png);
}
.banner  .ban_con {
    padding-top: 150px;
 }

.skill {
	height: 800px;
	background-image: url(../images/index_skill_bg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
}

.skill .skl_ul {
	height: 80%;
	position: relative;
}

.skill .skl_ul li {
	width: 410px;
	background: linear-gradient(90deg, #E9F0FF 0%, #FFFFFF 100%);
	box-shadow: 0px 0px 13px 0px rgba(221, 224, 236, 0.41);
	border-radius: 10px;
	border: 2px solid #FFFFFF;
	padding: 20px;
	position: absolute;
}

.skill .skl_ul li .tit {
	font-size: 26px;
	margin-bottom: 5px;
}

.skill .skl_ul li:nth-child(1) {
	width: 380px;
	left: 53.5%;
	top: 14%;
	margin-left: -220px;
}

.skill .skl_ul li:nth-child(2) {
	top: 55%;
	left: 6%;
}

.skill .skl_ul li:nth-child(3) {
	top: 55%;
	right: 6%;
}

/* 案例 */
.case {
	background: linear-gradient(180deg, rgba(53, 120, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}

.case .case_ul {
	margin-top: 30px;
}

.case .case_ul li {
	border-radius: 12px;
	background: #fff;
	margin-bottom: 15px;
	padding: 20px;
	position: relative;
	/* 确保子元素可以定位 */
}

.case .case_ul li .icon {
	width: 30%;
	float: left;
	/* 横向排列 */
}
.case .case_ul li .icon2{
	display: none;
}

.case .case_ul li .icon .image {
	border-radius: 12px;
	height: 100%;
}

.case .case_ul li .info {
	width: 70%;
	float: left;
	/* 横向排列 */
	padding: 10px 20px;
	box-sizing: border-box;
	/* 包括内边距和边框在内计算宽度 */
}

.case .case_ul li .info .tit {
	font-size: 30px;
}

.case .case_ul li .info .txt {
	margin-top: 10px;
}

.case .case_ul li .info .txt span {
	color: #0118FF;
}

.case .case_ul li .info .lab {
	margin-top: 10px;
}

.case .case_ul li .info .lab .btn {
	background: #F3F3F3;
	width: 150px;
	height: 40px;
	line-height: 40px;
	color: #0118FF;
	margin-right: 20px;
	display: inline-block;
	/* 使其成为一个块级元素 */
}

.case .case_ul li .info .desc {
	margin-top: 5px;
}

/* 适配 */

@media (min-width: 1520px) {
	.skill {
		height: 800px;
	}

	.skill .skl_ul {
		height: 80%;
	}

	.skill .skl_ul li {
		width: 480px;
	}

	.skill .skl_ul li:nth-child(1) {
		width: 480px;
		left: 50%;
		margin-left: -240px;
		/* 调整居中 */
	}

	.skill .skl_ul li:nth-child(2) {
		left: -6%;
	}

	.skill .skl_ul li:nth-child(3) {
		right: -6%;
	}
}

@media (max-width: 1024px) {

	.skill .skl_ul li {
		width: 350px;
	}

	.skill .skl_ul li:nth-child(1) {
		margin-left: -170px;
		top: 3%;
	}

	.skill .skl_ul li:nth-child(2) {
		top: 40%;
	}

	.skill .skl_ul li:nth-child(3) {
		top: 40%;
	}
}

@media (max-width: 769px) {

	.skill {
		height: 600px;
	}

	.skill .skl_ul li {
		width: 350px;
	}

	.skill .skl_ul li .tit {
		font-size: 20px;
	}

	.skill .skl_ul li:nth-child(1) {
		margin-left: -170px;
		top: 0%;
	}

	.skill .skl_ul li:nth-child(2) {
		top: 35%;
	}

	.skill .skl_ul li:nth-child(3) {
		top: 35%;
	}

	.case {
		height: 580px;
	}

	.case .case_swiper .swiper-slide .info .txt {
		margin-top: 5px;
	}

}


@media (max-width: 431px) {
	.banner{
		background-image: url(../images/service_banner_small.png);
	}
	.banner .warp .ban_con {
        width: 100%;
        backdrop-filter: blur(2px);
        padding: 83px 10%;
    }

	.skill {
		height: 520px;
		background-image: url(../images/index_skill_small_bg.png);
	}

	.skill .skl_ul {
		margin-top: 30px;
	}

	.skill .skl_ul li {
		width: 90%;
	}

	.skill .skl_ul li .tit {
		font-size: 18px;
	}

	.skill .skl_ul li:nth-child(1) {
		width: 90%;
		left: 5%;
		margin-left: 0;
		top: 0%;
	}

	.skill .skl_ul li:nth-child(2) {
		width: 90%;
		top: 30%;
		left: 5%;
	}

	.skill .skl_ul li:nth-child(3) {
		width: 90%;
		top: 60%;
		left: 5%;
	}

	.case {
		height: auto;
	}

	.case .case_ul li {
		padding: 10px;
		display: block;
	}

	.case .case_ul li .icon {
		width: 100%;
		height: 212px;
		overflow: hidden;
		float: none;
		display: none;
	}
	.case .case_ul li .icon .image{
		height: auto;
	}
	.case .case_ul li .icon2{
		display: block;
	}

	.case .case_ul li .info {
		width: 100%;
		padding: 10px 0;
		float: none;
	}

	.case .case_ul li .info .tit {
		font-size: 18px;
	}

	.case .case_ul li .info .lab .btn {
		width: 100px;
		height: 35px;
		line-height: 35px;
		margin-right: 10px;
	}
}

@media (max-width: 401px) {
	.banner .warp .ban_con {
		padding: 87px 5%;
	}
	.case .case_ul li .info .lab .btn{
		width: 80px;
	}
}