@keyframes float-bob-y {
	0% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}

	50% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}

	100% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}
}

@keyframes float-bob-x {
	0% {
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
	}

	50% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}

	100% {
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
	}
}

.project-info {
	padding-top: .8rem;
	padding-bottom: .8rem;
}

.project-info .imgbox {
	width: 7.52rem;
	padding: .15rem;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	max-width: 50%;
}

.project-info .imgbox img,
.project-info .rightpart .icon img,
.programme .list .item img {
	display: block;
	width: 100%;
}

/* .project-info .rightpart {
	margin-left: .47rem;
	width: 0;
} */

.project-info .rightpart .icon {
	width: .62rem;
	margin-right: .13rem;

}

.project-info .rightpart .name {
	font-weight: 500;
	font-size: .32rem;
	color: #222222;
}

.project-info .rightpart .subname {
	font-weight: 500;
	font-size: .28rem;
	line-height: 1.4;
	color: #666666;
}

.project-info .rightpart .info {
	color: #666;
	font-size: .16rem;
	line-height: 1.4;
	margin-top: .38rem;
}
.project-info .rightpart .info img{
	max-width: 100%;
	height:auto;
}
.project-info .rightpart .subname+.info {
	margin-top: .3rem;
}

.programme {
	background: url(../jpg/bg-2.jpg) no-repeat center center;
	padding-top: .96rem;
	padding-bottom: 2.27rem;
}

.programme .list {
	margin-top: 1rem;
}

.programme .list .item {
	width: 2.62rem;
	margin: .1rem;
	transition: all .3s;

}

.programme .list .item:hover {
	transform: translateY(-20px);
}

.page-title {
	font-weight: 700;
	font-size: .36rem;
	line-height: 1.5;
	color: #333333;
	text-align: center;
}

.page-subtitle {
	font-size: .16rem;
	line-height: 1.4;
	text-align: center;
	color: #666666;
	margin-top: .12rem;
}

.application {
	padding-top: .78rem;
	padding-bottom: 1.33rem;
	height: 1550px;
	overflow: hidden;
}

.application .sys-name {
	width: 3.3rem;
	height: .87rem;
	color: #394566;
	font-weight: 700;
	font-size: .32rem;
	border: 1px solid #EEEEEE;
	box-shadow: 0px 5px 12px -4px rgba(157, 209, 201, 0.42);
	border-radius: 1.47rem;
	background: #fff;
	margin: .78rem auto .36rem;
	text-align: center;
	line-height: .87rem;
}

.application .imgbox {
	position: relative;
	height: 1200px;
}

/* .application .imgbox>div {
	animation-duration: 1500ms;
	animation-delay: 0ms;
	animation-name: bounceInDown;
	animation-fill-mode: both;
}
 */
.application .imgbox .name {
	color: #394566;
	font-size: .28rem;
}

.application .imgbox .name:before {
	display: inline-block;
	width: .12rem;
	height: .12rem;
	background: #03B09A;
	content: '';
	border-radius: 100%;
	margin-right: .12rem;
}

.application .imgbox .icon1 {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 56.35%;
}

.application .imgbox .icon2 {
	position: absolute;
	left: 50%;
	margin-left: -39%;
	top: 13%;
}

.application .imgbox .icon .imgbox-item-in {
	display: none;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -130%);
	z-index: 9999;
}

.application .imgbox .icon:hover .imgbox-item-in {
	display: block;
}

.application .imgbox .icon:hover .imgbox-item-in .content {
	position: relative;
	padding: 0.18rem 0.26rem;
	background-color: #fff;
	box-shadow: 0px 4px 20px rgba(74, 113, 107, 0.2);
	border-radius: 0.14rem;
}

.application .imgbox .icon:hover .imgbox-item-in .content p {
	font-size: 0.18rem;
	line-height: .3rem;
	text-align: left;
	color: #222222;
	white-space: nowrap;
}

.application .imgbox .icon:hover .imgbox-item-in .content::after {
	content: '';
	position: absolute;
	bottom: -0.10rem;
	left: 45%;
	transform: translateX(-45%);
	width: 0.19rem;
	height: 0.19rem;
	background-color: #fff;
	transform: rotate(45deg);
}

.application .imgbox .icon2 .name {
	position: absolute;
	width: 7em;
	top: -.6rem;
	transform: translateX(-50%);
	left: 50%;
}

.application .imgbox .icon3 {
	position: absolute;
	left: 50%;
	margin-left: -36%;
	top: 45%;
	animation-delay: .1s;

}

.application .imgbox .icon3 .name {
	position: absolute;
	width: 5em;
	top: -.4rem;

}

.application .imgbox .icon4 {
	position: absolute;
	left: 50%;
	margin-left: -20%;
	top: 62%;

}

.application .imgbox .icon4 .name {
	position: absolute;
	width: 5em;
	top: 270px;
	left: 50%;
	transform: translateX(-50%);
}

.application .imgbox .icon5 {
	position: absolute;
	left: 50%;
	margin-left: 8%;
	top: 62%;
	animation-delay: .1s;
}

.application .imgbox .icon5 .name {
	position: absolute;
	width: 5em;
	top: 270px;
	left: 50%;
	transform: translateX(-50%);
}

.application .imgbox .icon6 {
	position: absolute;
	left: 50%;
	margin-left: 22%;
	top: 46%;
}

.application .imgbox .icon6 .name {
	position: absolute;
	width: 5em;
	top: -.4rem;
	right: -50%;

}

.application .imgbox .icon7 {
	position: absolute;
	left: 50%;
	margin-left: 25%;
	top: 13%;
	animation-delay: .05s;
}

.application .imgbox .icon7 .name {
	position: absolute;
	width: 4em;
	top: -.6rem;
	left: 50%;
	transform: translateX(-50%);
}

.application .imgbox .icon-img {
	width: 100%;
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
}

.application .imgbox>div {
	width: 14.57%;
}

.pro-param .bg-green .th1 {
	width: 1rem;
}

.pro-param .bg-green .th58 {
	width: 5.8rem;
}

.pro-tabs {
	display: flex;
}

.pro-tabs .pro-tabs-item {
	width: 2rem;
	height: .6rem;
	border-radius: 4px;
	text-align: center;
	border: 1px solid #03B09A;
	color: #03B09A;
	font-size: .24rem;
	line-height: .6rem;
	cursor: pointer;
}

.pro-tabs .pro-tabs-item:not(:last-child) {
	margin-right: 0.3rem;
}

.pro-tabs .pro-tabs-item.active,
.pro-tabs .pro-tabs-item:hover {
	background: linear-gradient(150.88deg, #03B09A 17.12%, #1FCAB4 96.09%);
	color: #FFF;
}

.pro-feature {
	font-size: .16rem;
	line-height: 3.12;
	color: #333333;
	padding-top: .56rem;
	padding-bottom: 2rem;
}


.pro-param {
	display: none;
	padding-top: .56rem;
	padding-bottom: 1.2rem;
}

.pro-param .table {
	width: 100%;
	font-size: 0.16rem;
	color: #333;
	table-layout: fixed;
}

.pro-param .table tr th {
	font-weight: normal;
	border-left: 1px solid #23a090;
	border-right: 1px solid #23a090;
}

.pro-param .table tr td {
	border: 1px solid #D8D8D8;
	text-align: left;

}

.pro-param .table tr th,
.pro-param .table tr td {
	height: .6rem;
	padding-left: 0.15rem;
}

.pro-param .table tr th.th1 {
	width: 1rem;
}

.pro-param .table tr th.th58 {
	width: 5.8rem;
}

.pro-param .table tr td.bg-green {
	padding: 0;
	text-align: center;
	border: none;
	border-left: 1px solid #23a090;
	border-right: 1px solid #23a090;
}

.pro-param .bg-green {
	background: #23a090;
	color: #fff;
	line-height: 0.44rem;
	font-size: 0.16rem;
}

@media screen and (max-width: 1280px) {

	.application .imgbox .icon3 {
		left: 50%;
		margin-left: -37%;
		top: 38%;

	}

	.application .imgbox .icon4 {
		left: 50%;
		margin-left: -22%;
		top: 52%;
	}

	.application .imgbox .icon4 .name,
	.application .imgbox .icon5 .name {
		position: absolute;
		top: 220px;

	}

	.application .imgbox .icon5 {
		left: 50%;
		margin-left: 8%;
		top: 52%;
	}

	.application .imgbox .icon6 {
		left: 50%;
		margin-left: 22%;
		top: 38%;
	}

}

@media screen and (max-width: 1024px) {
	.application {
		height: 1200px;
	}

	.application .imgbox .icon2,
	.application .imgbox .icon7 {
		top: 10%;
	}


	.application .imgbox .icon3,
	.application .imgbox .icon6 {
		top: 30%;

	}

	.application .imgbox .icon4,
	.application .imgbox .icon5 {
		top: 42%;
	}

	.application .imgbox .icon4 .name,
	.application .imgbox .icon5 .name {
		position: absolute;
		top: 180px;

	}



}

@media screen and (max-width: 768px) {
	.application {
		height: 1000px;
	}

	.project-info .imgbox {
		max-width: 100%;
	}

	.project-info .rightpart {
		margin-left: 0;
		width: 100%;
		margin-top: 0.2rem;
	}

	.programme .list .item {
		width: 34%
	}

	.application .imgbox .icon2,
	.application .imgbox .icon7 {
		top: 7%;
	}


	.application .imgbox .icon3,
	.application .imgbox .icon6 {
		top: 26%;

	}

	.application .imgbox .icon4,
	.application .imgbox .icon5 {
		top: 33%;
	}

	.application .imgbox .icon4 .name,
	.application .imgbox .icon5 .name {
		position: absolute;
		top: 130px;

	}

	.pro-param .table tr th,
	.pro-param .table tr td {
		min-width: 1.9rem;
		height: 0.8rem !important;
	}

	.pro-param .table,
	.project-info .rightpart .info,
	.pro-feature {
		font-size: 12px;
	}

	.pro-param .bg-green {
		font-size: 14px;
	}

	.pro-param .table .thw1 {
		width: 30%;
	}

}

@media (max-width: 576px) {
	.application {
		height: 600px;
	}

	.project-info .imgbox {
		max-width: 100%;
	}

	.project-info .rightpart {
		margin-left: 0;
		width: 100%;
		margin-top: 0.2rem;
	}

	.programme .list .item {
		width: 34%
	}

	.application .imgbox .icon2,
	.application .imgbox .icon7 {
		top: 3%;
	}


	.application .imgbox .icon3,
	.application .imgbox .icon6 {
		top: 12%;

	}

	.application .imgbox .icon4,
	.application .imgbox .icon5 {
		top: 16%;
	}

	.application .imgbox .icon4 .name,
	.application .imgbox .icon5 .name {
		position: absolute;
		top: 80px;

	}

	.pro-param .table tr th,
	.pro-param .table tr td {
		min-width: 1.9rem;
		height: 0.8rem !important;
	}

}
