/* banner */
.common-banner {
	background-image: url(../imgs/experience/banner.png);
	background-size: 100% 100%;
}

.main {
	padding: 40px 0 60px 0;
	background-image: url(../imgs/experience/main_bg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.item {
	width: 420px;
	box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.05);
}

.item-top {
	background-color: #DFEEFF;
	border-radius: 10px;
	text-align: center;
	height: 296px;
}

.item-top .img-box img {
	height: 78px;
	width: 78px;
}

.item-top .img-box {
	padding: 74px 0 36px 0;
}

.item-top .title {
	padding-bottom: 19px;
}


.item-bottom {
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	/* height: 245px; */
	padding: 24px 0 22px 0;
}

.item-bottom .img-box {
	border: 1px solid #dbdbdb;
	border-radius: 10px;
	padding: 12px;
	width: 150px;
	text-align: center;
}

.item-bottom .img-box img {
	height: 136px;
	width: 100%;
}

.item-bottom .desc {
	margin-top: 22px;
}

.center .item-top {}

.center .item-bottom {
	padding: 24px 42px 22px 42px;
}

.item-top img.active {
	display: none;
}

.main .right .title {
	padding: 0 98px;
}

.right .item-bottom {
	padding: 53px 0 81px 0;
}

.right .item-bottom a {
	width: 130px;
	height: 40px;
	line-height: 40px;
	background: #0172ff;
	border-radius: 5px;
	font-size: 16px;
	text-align: center;
	display: block;
	color: #fff;
	margin-top: 56px;
}

/* hover */
.item-active .item-top {
	background-color: #0172FF;
}

.item-active .font {
	color: #fff;
}

.item-active .item-top img.default {
	display: none;
}

.item-active .item-top img.active {
	display: inline-block;
}

/* 适配pc端 */
@media screen and (min-width:450px) {}

.item:hover {
	box-shadow: 0px 30px 40px 0px rgba(0, 0, 0, 0.09);
}

.item:hover .item-top {
	background-color: #0172FF;
}

.item:hover .default {
	display: none;
}

.item:hover .active {
	display: inline-block;
}

.item:hover .font {
	color: #fff;
}

/* 移动端适配 */
@media screen and (max-width:450px) {
	.common-banner {
		background-image: url(../imgs/experience/banner_mobile.png);
	}

	.main {
		padding: 34px 0;
		background-image: url(../imgs/experience/main_bg_mobile.png);
	}

	.main-body {
		display: block;
		padding: 0 12px;
	}

	.item {
		display: flex;
		justify-content: space-between;
		width: 100%;
		border-radius: 5px;
		margin-bottom: 15px;
	}

	.item-top {
		width: 55%;
		border-radius: 5px 0 0 5px;
	}

	.item-top .desc {
		display: none;
	}

	.item-top,
	.item-bottom {
		height: 104px;
	}

	.item-bottom {
		width: 100%;
		padding: 7px 0 0 0 !important;
		display: flex;
		justify-content: center;
	}

	.item-top .img-box {
		padding: 26.7px 0 6px 0;
	}

	.item-top .img-box img {
		height: 28px;
		width: 28px;
	}

	.item-top .title {
		font-size: 12px;
	}

	.item-bottom {
		border-radius: 0 5px 5px 0;
	}

	.item-bottom .img-box img {
		height: 64px;
		width: 64px;
	}

	.item-bottom .img-box {
		height: 70px;
		width: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 5px;
	}

	.item-bottom .desc {
		margin-top: 3px;
		font-size: 10px;
	}

	.center .item-bottom div:last-child {
		margin-left: 15px;
	}

	.main .right .title {
		padding: 0 8px;
	}

	.right .item-bottom div div {
		font-size: 10px;
		margin-top: 20px;
	}

	.right .item-bottom a {
		font-size: 10px;
		width: 80px;
		height: 28px;
		line-height: 28px;
		background: #0172ff;
		border-radius: 5px;
		font-size: 10px;
		text-align: center;
		display: block;
		color: #fff;
		margin-top: 14px;
	}

	.copyright-m {
		padding: 21px 17px 50px 17px;
	}
}
/* 适配平板 */
@media screen and (min-width:450px) and (max-width:1396px) {
	.main-body{
		padding: 0 1%;
	}
}
/* 适配平板 */
@media screen and (min-width:450px) and (max-width:1226px) {
	.item{
		width: 48%;
	}
	.main-body .item:last-child{
		margin-top: 20px;
	}
	.main-body .item:last-child .font{
		font-size: 22px;
	}
}