.page-banner {
	position: relative
}

.page-banner .banner-pic {
	position: relative;
	margin: 0 auto;
	height: 100%;
	background-repeat: no-repeat;
	background-position: right center
}

.page-banner .banner-description {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%)
}

.page-banner h5 {
	margin: 0;
	font-size: 42px;
	font-weight: 600;
	color: #fff;
	line-height: 42px
}

.page-banner h5 p {
	margin: 0;
	color: #fff
}

.page-banner h5 p+p {
	margin-top: 10px
}

.page-banner h5 small {
	display: block;
	margin-top: 8px;
	font-size: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
	line-height: 16px
}

.page-banner h6 {
	margin: 15px 0 0 0;
	font-size: 24px;
	font-weight: 500;
	color: #fff;
	line-height: 24px
}

.page-banner .banner-text {
	margin-top: 24px
}

.page-banner .banner-text p {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 400;
	color: #fff;
	line-height: 20px
}

.page-banner .banner-text p+p {
	margin-top: 12px
}

.page-banner .banner-btn-container {
	margin-top: 56px;
	font-size: 0
}

.page-banner .banner-btn-container .banner-btn {
	display: inline-block;
	width: 156px;
	height: 42px;
	font-size: 16px;
	font-weight: 500;
	color: #141D7E;
	background-color: #fff;
	line-height: 42px;
	text-align: center;
	border-radius: 4px;
	transition: all .3s
}

.page-banner .banner-btn-container .banner-btn:hover {
	background-color: rgba(255, 255, 255, 0.9)
}

.page-banner .banner-btn-container .banner-btn+.banner-btn {
	margin-left: 8px
}

.page-banner .banner-btn-container .banner-btn-primary {
	color: rgba(255, 255, 255, 0.95);
	background-color: #3083FF
}

.page-banner .banner-btn-container .banner-btn-primary:hover {
	background-color: #59a1ff
}

.page-banner .banner-btn-container .banner-btn-warning {
	color: rgba(255, 255, 255, 0.95);
	background-color: #E5A037
}

.page-banner .banner-btn-container .banner-btn-warning:hover {
	background-color: #ec971f
}

.page-banner .help {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.55);
	line-height: 12px
}

.page-banner .help.icon-ico {
	position: relative;
	text-indent: 15px
}

.page-banner .help.icon-ico::before {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	content: "";
	width: 12px;
	height: 12px;
	background: url(/themes/official_v3/Public/201906/b-ico.png) no-repeat center left
}

.common-title {
	padding: 92px 0 65px;
	text-align: center
}

.common-title small {
	font-size: 12px;
	line-height: 17px;
	color: #0089ff
}

.common-title h3 {
	margin-top: 6px;
	margin-bottom: 0;
	font-size: 36px;
	line-height: 50px;
	color: #333;
	font-weight: normal
}

.common-title p {
	margin-top: 6px;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 30px;
	color: #5c5f61dd;
	font-weight: normal
}

.imagetext {
	display: flex;
	align-items: center
}

.imagetext .image {
	width: 592px
}

.imagetext .image img {
	display: block;
	width: 100%
}

.imagetext .text {
	width: 500px
}

.imagetext .text dl dt {
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 500;
	color: #333;
	line-height: 20px
}

.imagetext .text dl dt span {
	display: inline-block;
	margin-right: 6px;
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-size: 14px
}

.imagetext .text dl dd {
	margin-top: 9px;
	font-size: 14px;
	font-weight: 400;
	color: #5C5F61;
	line-height: 24px
}

.imagetext .text dl+dl {
	margin-top: 30px
}

.imagetext .text dl:nth-child(1) dt span,
.imagetext .text dl:nth-child(5) dt span {
	background-image: url(../images/point-purple@2x.png)
}

.imagetext .text dl:nth-child(2) dt span {
	background-image: url(../images/point-green@2x.png)
}

.imagetext .text dl:nth-child(3) dt span {
	background-image: url(../images/point-blue@2x.png)
}

.imagetext .text dl:nth-child(4) dt span {
	background-image: url(../images/point-orange@2x.png)
}

.common-functional-highlights {
	padding-bottom: 100px
}

.common-functional-highlights .functional-highlights-content {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	margin: 0 auto;
	width: 1124px
}

.functional-item-1 {
	padding: 108px 24px 24px;
	background: #fff;
	box-shadow: 12px 12px 16px 0 rgba(70, 77, 115, 0.1), -12px -12px 16px 0 rgba(82, 96, 184, 0.06);
	border-radius: 8px;
	background-repeat: no-repeat;
	transition: all .3s
}

.functional-item-1 h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	color: #333;
	line-height: 28px
}

.functional-item-1 h3.hot::after {
	position: relative;
	top: -1px;
	content: "";
	display: inline-block;
	margin-left: 10px;
	width: 28px;
	height: 11px;
	background: url(../../images/flutter/hot@2x.png) no-repeat;
	background-size: 28px
}

.functional-item-1 p {
	margin: 9px 0 0 0;
	font-size: 14px;
	font-weight: 400;
	color: #5C5F61;
	line-height: 24px
}

.functional-item-1:hover {
	transform: scale(1.05)
}

.functional-item-2 {
	padding: 169px 32px 32px;
	background: #fff;
	box-shadow: 12px 12px 16px 0 rgba(70, 77, 115, 0.1), -12px -12px 16px 0 rgba(82, 96, 184, 0.06);
	border-radius: 8px;
	background-repeat: no-repeat;
	transition: all .3s
}

.functional-item-2 p {
	font-size: 14px;
	font-weight: 400;
	color: rgba(51, 51, 51, 0.85);
	line-height: 24px;
	text-align: justify
}

.functional-item-2:hover {
	transform: scale(1.05)
}

.classical-cases {
	/* padding-bottom: 100px */
}

.classical-cases .classical-cases-content {
	margin: 7px auto;
	width: 954px
}

.classical-cases .thumbnail {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	width: 100%
}

.classical-cases .thumbnail span {
	display: block;
	width: 144px;
	height: 54px
}

.classical-cases .thumbnail span img {
	display: block;
	width: 100%
}

.classical-cases .description {
	margin-top: 44px;
	padding-top: 57px;
	width: 100%;
	height: 182px;
	background: #FFFFFF;
	box-shadow: 2px 2px 11px 1px rgba(181, 192, 204, 0.06), 0 2px 14px 0 rgba(203, 211, 220, 0.21);
	border-radius: 91px
}

.classical-cases .description .item {
	display: flex;
	gap: 43px;
	align-items: center;
	padding: 0 89px 0 100px
}

.classical-cases .description .item .pic {
	flex: 1 0 auto;
	width: 68px;
	height: 68px
}

.classical-cases .description .item .pic img {
	display: block;
	width: 100%
}

.classical-cases .description .item .text {
	font-size: 13px;
	font-weight: 400;
	color: #3C3D3C;
	line-height: 24px
}

.classical-cases .description .swiper-button-next,
.classical-cases .description .swiper-button-prev {
	margin-top: -9px;
	width: 10px;
	height: 18px;
	color: #999
}

.classical-cases .description .swiper-button-next::after,
.classical-cases .description .swiper-button-prev::after {
	font-size: 20px
}

.classical-cases .description .swiper-button-prev {
	left: 40px
}

.classical-cases .description .swiper-button-next {
	right: 40px
}

.classical-cases .view-more-cases {
	margin-top: 46px
}

.classical-cases .view-more-cases a {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	width: 247px;
	height: 50px;
	border: 1px solid #099DFD;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 500;
	color: #099DFD;
	transition: all .3s
}

.classical-cases .view-more-cases a span {
	position: relative;
	margin-left: 13px;
	width: 38px;
	height: 1px;
	background: #099DFD
}

.classical-cases .view-more-cases a span::after {
	position: absolute;
	top: -6px;
	right: -20px;
	content: "";
	width: 0;
	height: 0;
	border-left: 12px solid #099DFD;
	border-right: 12px solid transparent;
	border-top: 6.5px solid transparent;
	border-bottom: 6.5px solid transparent
}

.classical-cases .view-more-cases a:hover {
	color: #fff;
	background: #099DFD
}

.classical-cases .view-more-cases a:hover span {
	background: #fff
}

.classical-cases .view-more-cases a:hover span:after {
	border-left-color: #fff
}

.gray-bg {
	background: #f2f4f6
}

@media screen and (max-width:1199px) {
	.solutions-banner .banner-pic {
		background-size: auto 400px
	}

	.common-functional-highlights .functional-highlights-content {
		gap: 3%;
		width: 96%
	}

	.common-functional-highlights .functional-highlights-content .functional-item-1 {
		width: 31.33% !important
	}

	.common-functional-highlights .functional-highlights-content .functional-item-1:nth-child(n+4) {
		margin-top: 3%
	}
}

@media screen and (max-width:991px) {
	.page-banner .banner-pic {
		width: 100%
	}

	.page-banner h5 {
		font-size: 32px
	}

	.page-banner .banner-text p {
		font-size: 18px
	}

	.classical-cases .classical-cases-content {
		width: 100%
	}

	.classical-cases .classical-cases-content .thumbnail {
		gap: 2.4%;
		margin: 0 auto;
		width: 98%
	}

	.classical-cases .classical-cases-content .thumbnail span {
		width: 14.66%;
		height: auto
	}

	.classical-cases .classical-cases-content .thumbnail span:nth-child(n+7) {
		margin-top: 2.4%
	}
}

@media screen and (max-width:767px) {
	.common-functional-highlights {
		padding-bottom: 40px !important
	}

	.common-functional-highlights .functional-highlights-content {
		flex-direction: column;
		gap: 20px;
		width: 90%
	}

	.common-functional-highlights .functional-highlights-content .functional-item-1 {
		width: 100% !important
	}

	.common-functional-highlights .functional-highlights-content .functional-item-1:nth-child(n+4) {
		margin-top: 0
	}

	.page-banner {
		height: 424px
	}

	.page-banner .banner-pic {
		background-size: auto 220px;
		background-position: bottom center !important
	}

	.page-banner .banner-description {
		top: 5%;
		left: 0;
		width: 100%;
		transform: translateY(0)
	}

	.page-banner h5 {
		font-size: 26px;
		line-height: 26px;
		text-align: center
	}

	.page-banner .banner-text {
		margin: 14px auto;
		width: 90%
	}

	.page-banner .banner-text p {
		font-size: 14px;
		line-height: 24px;
		text-align: center
	}

	.page-banner .banner-btn-container {
		margin-top: 20px;
		text-align: center
	}

	.common-title {
		padding: 42px 0 35px
	}

	.imagetext {
		flex-direction: column
	}

	.imagetext .image {
		width: 100% !important
	}

	.imagetext .text {
		width: 95% !important
	}

	.core-functions {
		padding-bottom: 0 !important
	}

	.core-functions-content .imagetext:nth-child(2) {
		flex-direction: column !important
	}

	.functional-highlights {
		margin-top: 20px !important;
		padding-bottom: 40px !important
	}

	.functional-highlights .functional-highlights-content {
		flex-direction: column;
		margin: 0 auto;
		width: 90% !important
	}

	.functional-highlights .functional-highlights-content .functional-item-1 {
		width: 100% !important
	}

	.functional-highlights .functional-highlights-content .functional-item-1+.functional-item-1 {
		margin-top: 20px
	}

	.functional-highlights .functional-highlights-content .functional-item-1:nth-child(n+4) {
		margin-top: 20px !important
	}

	.advantage {
		padding-bottom: 40px !important
	}

	.advantage .advantage-content {
		flex-direction: column;
		margin: 0 auto;
		width: 90% !important
	}

	.advantage .advantage-content .functional-item-2 {
		width: 100% !important;
		height: auto !important
	}

	.advantage .advantage-content .functional-item-2+.functional-item-2 {
		margin-top: 20px
	}

	.classical-cases {
		padding-bottom: 40px !important
	}

	.classical-cases .description {
		display: none
	}

	.classical-cases .classical-cases-content .thumbnail {
		gap: 4%;
		width: 94%
	}

	.classical-cases .classical-cases-content .thumbnail span {
		width: 48%
	}

	.classical-cases .classical-cases-content .thumbnail span:nth-child(n+3) {
		margin-top: 4%
	}

	body>footer {
		margin-bottom: 0
	}
}

.page-btn {
	margin: 65px;
	text-align: center
}

.page-btn .btn {
	padding: 0;
	width: 180px;
	height: 50px;
	font-size: 16px;
	line-height: 50px;
	color: #000000d9;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	text-align: center;
	transition: all .3s ease
}

.page-btn .btn:hover {
	font-weight: 500
}

.page-btn .btn.btn-warning {
	background: #F5B037;
	border-color: #F5B037;
	color: #fff
}

.page-btn .btn.btn-warning:hover {
	background-color: #ec971f;
	border-color: #d58512;
	color: #fff
}

.page-btn .btn-bordered {
	border-color: #099dfd;
	color: #099dfd
}

.page-btn .btn-bordered:hover {
	background: #099dfd;
	color: #fff
}