body {
	font-family: '寰蒋闆呴粦'
}

button {
	cursor: pointer
}

@media only screen and (max-width:1280px) {
	.sidebar {
		display: none
	}
}

.container {
	width: 1200px;
	margin: 0 auto
}

.relative {
	position: relative
}

.bold {
	font-weight: 700
}

.justify-between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between
}

.width-1200 {
	width: 1200px!important
}

.width-1200 .pic {
	box-shadow: none!important;
	height: 530px!important
}

.width-914 {
	width: 914px!important
}

.primary-btn {
	display: inline-block;
	width: 180px;
	height: 48px;
	line-height: 48px;
	background: linear-gradient(90deg, rgba(200, 81, 255, 1), rgba(126, 105, 255, 1));
	box-shadow: 0 6px 40px 0 rgba(145, 88, 246, .5);
	border-radius: 24px;
	color: #fff;
	font-size: 18px;
	border: none;
	text-align: center
}

.animation-btn {
	position: relative;
	-webkit-transition: all .1s;
	box-shadow: 0 6px 40px 0 rgba(0, 0, 0, .35);
	transition: all .1s;
	z-index: 0;
	overflow: hidden
}

.animation-btn .anim {
	-moz-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1
}

.anim:before {
	position: relative;
	content: '';
	display: block;
	margin-top: 100%
}

.anim:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 50%
}

.animation-btn .anim {
	-moz-animation: anim-out .75s;
	-webkit-animation: anim-out .75s;
	animation: anim-out .75s
}

.animation-btn .anim:after {
	-moz-animation: anim-out-pseudo .75s;
	-webkit-animation: anim-out-pseudo .75s;
	animation: anim-out-pseudo .75s
}

.animation-btn .anim,
.animation-btn .anim:after {
	animation-iteration-count: infinite;
	animation-duration: 1.3s
}

@-webkit-keyframes anim-in {
	0% {
		width: 0%
	}
	100% {
		width: 100%
	}
}

@-moz-keyframes anim-in {
	0% {
		width: 0%
	}
	100% {
		width: 100%
	}
}

@-ms-keyframes anim-in {
	0% {
		width: 0%
	}
	100% {
		width: 100%
	}
}

@keyframes anim-in {
	0% {
		width: 0%
	}
	100% {
		width: 100%
	}
}

@-webkit-keyframes anim-in-pseudo {
	0% {
		background: rgba(0, 0, 0, .25)
	}
	100% {
		background: 0 0
	}
}

@-moz-keyframes anim-in-pseudo {
	0% {
		background: rgba(0, 0, 0, .25)
	}
	100% {
		background: 0 0
	}
}

@-ms-keyframes anim-in-pseudo {
	0% {
		background: rgba(0, 0, 0, .25)
	}
	100% {
		background: 0 0
	}
}

@keyframes anim-in-pseudo {
	0% {
		background: rgba(0, 0, 0, .25)
	}
	100% {
		background: 0 0
	}
}

@-webkit-keyframes anim-out {
	0% {
		width: 0%
	}
	100% {
		width: 100%
	}
}

@-moz-keyframes anim-out {
	0% {
		width: 0%
	}
	100% {
		width: 100%
	}
}

@-ms-keyframes anim-out {
	0% {
		width: 0%
	}
	100% {
		width: 100%
	}
}

@keyframes anim-out {
	0% {
		width: 0%
	}
	100% {
		width: 100%
	}
}

@-webkit-keyframes anim-out-pseudo {
	0% {
		background: rgba(0, 0, 0, .25)
	}
	100% {
		background: 0 0
	}
}

@-moz-keyframes anim-out-pseudo {
	0% {
		background: rgba(0, 0, 0, .25)
	}
	100% {
		background: 0 0
	}
}

@-ms-keyframes anim-out-pseudo {
	0% {
		background: rgba(0, 0, 0, .25)
	}
	100% {
		background: 0 0
	}
}

@keyframes anim-out-pseudo {
	0% {
		background: rgba(0, 0, 0, .25)
	}
	100% {
		background: 0 0
	}
}

.primary-btn:hover {
	background: linear-gradient(90deg, rgba(166, 72, 254, 1), rgba(97, 101, 245, 1));
	box-shadow: 0 4px 20px 0 rgba(145, 88, 246, .5);
	border: none
}

.animation-btn:hover {
	background: linear-gradient(90deg, rgba(177, 49, 236, 1), rgba(97, 74, 236, 1));
	box-shadow: 0 6px 40px 0 rgba(0, 0, 0, .1);
	border: none
}

.section-title {
	color: #333;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	position: relative
}

.section-title::after {
	content: '';
	width: 40px;
	height: 3px;
	background: rgba(129, 105, 255, 1);
	border-radius: 2px;
	position: absolute;
	bottom: -16px;
	left: calc(50% - 20px)
}

.sidebar {
	position: fixed;
	bottom: 80px;
	left: 220px;
	z-index: 900;
	font-size: 14px;
	height: 270px;
	transition: all .3s
}

.sidebar-item {
	margin-bottom: 28px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer
}

.sidebar-item a {
	color: #535353
}

.sidebar-item::after {
	content: '';
	width: 2px;
	height: 30px;
	background: #d1d1d1;
	position: absolute;
	left: 6px;
	bottom: -29px
}

.sidebar-item:last-child::after {
	background: 0 0
}

.sidebar .circle {
	width: 14px;
	height: 14px;
	background: rgba(255, 255, 255, 1);
	border: 5px solid #d1d1d1;
	border-radius: 50%;
	margin-right: 12px
}

.sidebar-item.active .circle,
.sidebar-item:hover .circle {
	border: 5px solid #8169ff
}

.sidebar-item.active a,
.sidebar-item:hover a {
	color: #8169ff
}

.banner {
	height: 506px;
	background: url(../img/mendian/banner.jpg);
	color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover
}

.banner.car {
	background: url(../img/mendian/banner_car.jpg)
}

.banner.fitness {
	background: url(../img/mendian/banner_fitness.jpg)
}

.banner.pet {
	background: url(../img/mendian/banner_pet.jpg)
}

.banner h2 {
	font-size: 40px;
	font-weight: 500
}

.banner .text {
	font-size: 18px;
	margin: 36px 0;
	text-align: center;
	line-height: 26px
}

.scope-wrap {
	height: 360px;
	position: relative
}

.scope-wrap .center-box {
	height: 380px;
	margin: 0 auto;
	background: url(../img/mendian/bg_scope.png) no-repeat;
	background-size: 100% 100%;
	background-clip: padding-box;
	border-radius: 8px;
	padding: 100px 0 0 0;
	top: -102px;
	position: relative
}

.scope-wrap .scope-list {
	margin-top: 55px;
	-webkit-box-pack: distribute;
	-ms-flex-pack: distribute;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 0 10%
}

.scope-item {
	-webkit-box-orient: vertical;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	color: #333;
	font-size: 16px;
	align-items: center
}

.scope-wrap .scope-item .icon {
	border-radius: 50%;
	margin-bottom: 24px;
	border-radius: 20px
}

.scope-wrap.fitness .scope-item .icon {
	width: 90px;
	height: 90px;
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .3);
	border: none
}

.industry-wrap {
	height: 600px;
	background: rgba(149, 131, 253, .04);
	padding: 70px 0 0 0;
	position: relative
}

.industry-wrap .list {
	margin: 88px auto 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between
}

.industry-wrap .item {
	width: 23%;
	height: 308px;
	font-size: 14px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 3px 30px 0 rgba(0, 0, 0, .08);
	border-radius: 4px
}

.industry-wrap .item img {
	height: 180px;
	width: 100%;
	border-radius: 4px 4px 0 0
}

.industry-wrap .info {
	padding: 0 15px;
	height: 128px
}

.industry-wrap .title {
	height: 52px;
	line-height: 52px;
	color: #333;
	font-size: 16px
}

.industry-wrap .title+p {
	color: #898989;
	line-height: 20px
}

.solution-wrap {
	padding: 105px 0 0 0;
	margin: 0 auto
}

.solution-wrap .box {
	margin: 115px 0 45px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.solution-wrap .info {
	width: 58%;
	line-height: 24px;
	font-size: 16px;
	padding: 0 2%
}

.solution-wrap .info li {
	margin-top: 24px
}

.solution-wrap .info ul {
	margin-bottom: 44px
}

.solution-wrap .info li:first-child {
	margin-top: 0
}

.solution-wrap .title {
	height: 100px;
	line-height: 100px;
	color: #333;
	font-size: 26px;
	position: relative;
	display: inline-block
}

.solution-wrap .right .title::before {
	right: -70px
}

.solution-wrap .title::before {
	content: '';
	background: url(../img/mendian/solution01.png) no-repeat;
	background-size: 100%;
	width: 90px;
	height: 90px;
	position: absolute;
	bottom: 24px
}

.solution-wrap .title.two::before {
	background: url(../img/mendian/solution02.png) no-repeat
}

.solution-wrap .title.three::before {
	background: url(../img/mendian/solution03.png) no-repeat
}

.solution-wrap .title.four::before {
	background: url(../img/mendian/solution04.png) no-repeat
}

.solution-wrap .sub-title {
	height: 24px;
	color: #333;
	line-height: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center
}

.solution-wrap .sub-title .circle {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	display: inline-block;
	background: #fff;
	margin-right: 8px;
	position: relative;
	background: #fff
}

.solution-wrap .sub-title .circle::after {
	position: absolute;
	z-index: -1;
	top: -2px;
	bottom: -2px;
	right: -2px;
	left: -2px;
	background: linear-gradient(-90deg, rgba(248, 88, 132, 1), rgba(134, 92, 254, 1));
	border-radius: 50%;
	content: ''
}

.solution-wrap .text {
	color: #898989;
	display: inline-block;
	padding-left: 10px
}

.application {
	background: rgba(149, 131, 253, .04);
	padding: 92px 0;
	text-align: center
}

.application .pannel {
	margin: 80px auto 54px auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: distribute;
	-ms-flex-pack: distribute;
	-webkit-justify-content: space-around;
	justify-content: space-around
}

.application .column-item {
	width: 17.3%;
	position: relative
}

.application .column-item .arrow {
	position: absolute;
	right: -28px;
	width: 20px;
	height: 16px;
	bottom: 105px
}

.application .content {
	margin-top: 25px;
	width: 100%;
	height: 239px;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(129, 105, 255, 1);
	border-radius: 4px;
	font-size: 14px
}

.application .content .title {
	height: 49px;
	line-height: 49px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: rgba(129, 105, 255, 1)
}

.application .content .list-wrap {
	text-align: center;
	padding: 0 18px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.application .content .list {
	text-align: left;
	margin: 0 auto;
	line-height: 22px
}

.application .sub-title {
	color: #535353;
	font-weight: 700;
	height: 42px;
	line-height: 42px
}

.case-wrap {
	padding: 106px 0 82px 0;
	text-align: center
}

.case-wrap .box-wrap {
	margin: 80px 0 53px 0
}

.case-wrap-box {
	width: 22.5%;
	height: 100px;
	line-height: 100px;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
	position: relative
}

.case-wrap-box img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 4px
}

.case-wrap-box.active {
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .3);
	opacity: 1
}

.case-wrap-box.active span {
	opacity: 1
}

.case-wrap-box span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
	opacity: .7
}

.case-wrap .details {
	height: 350px;
	background: rgba(255, 255, 255, .85);
	border-radius: 4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 70px;
	text-align: left;
	position: relative
}

.case-wrap .details .logo>div {
	position: absolute;
	width: 100%;
	z-index: 3;
	bottom: 100px
}

.case-wrap .details .logo {
	width: 37.5%;
	text-align: center;
	position: relative;
	color: #fff;
	font-size: 22px;
	font-weight: 700
}

.case-wrap .details .logo img {
	position: absolute;
	border-radius: 4px 0 0 4px;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.case-wrap .details .info {
	padding: 30px;
	position: relative;
	border-radius: 0 4px 4px 0;
	box-shadow: 0 3px 35px 0 rgba(0, 0, 0, .12)
}

.case-wrap .triangle {
	position: absolute;
	top: -22px;
	z-index: 10;
	left: 118px
}

.case-wrap .triangle.two {
	left: 430px
}

.case-wrap .triangle.three {
	left: 738px
}

.case-wrap .triangle.four {
	left: 1050px
}

.case-wrap .details .info .large {
	color: #535353;
	font-size: 16px;
	line-height: 24px
}

.case-wrap .details .info p {
	color: #898989;
	line-height: 20px;
	margin-bottom: 30px;
	font-size: 14px
}

.case-wrap .details .link {
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	right: 30px;
	cursor: pointer;
	bottom: 30px
}

.case-wrap .details .link a {
	color: #535353
}

.case-icon-active {
	display: none
}

.case-wrap .details .link:hover a {
	color: #8169ff
}

.case-wrap .details .link:hover img {
	display: none
}

.case-wrap .details .link:hover .case-icon-active {
	display: block!important
}

.case-wrap .details .link img {
	margin-left: 10px
}

.feature-wrap {
	text-align: center;
	background: rgba(149, 131, 253, .04);
	padding: 63px 0 108px 0;
	font-size: 14px
}

.feature-wrap .tabs {
	width: 45%;
	margin: 67px auto 50px auto;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 0 18px 12px 18px;
	color: #cacaca;
	border-bottom: 2px solid #8169ff
}

.feature-wrap .sub-tabs {
	border-radius: 4px;
	margin: -20px auto 30px;
	border: 1px solid rgba(230, 226, 255, 1);
	display: inline-block;
	letter-spacing: -5px
}

.feature-wrap .sub-tabs .sub-tab-item {
	width: 170px;
	height: 40px;
	background: rgba(255, 255, 255, 1);
	text-align: center;
	border-right: 1px solid rgba(230, 226, 255, 1);
	line-height: 40px;
	display: inline-block;
	cursor: pointer;
	letter-spacing: 0
}

.feature-wrap .sub-tabs .sub-tab-item:last-child {
	border: none
}

.feature-wrap .sub-tabs .active {
	background: rgba(129, 105, 255, .1);
	color: #8169ff
}

.feature-wrap .sub-tabs .sub-tab-item:hover {
	background: rgba(129, 105, 255, .1);
	color: #8169ff
}

.feature-wrap .tab-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	cursor: pointer;
	position: relative
}

.feature-wrap .active span {
	color: #8169ff!important;
	position: relative
}

.feature-wrap .tab-item.active::after {
	content: '';
	width: 90px;
	height: 2px;
	bottom: -12px;
	left: -18px;
	position: absolute;
	background: rgba(129, 105, 255, 1)
}

.feature-wrap .tabs img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	margin-bottom: 12px
}

.feature-wrap .pane-wrap {
	margin-bottom: 55px
}

.feature-wrap .absolute-text li {
	list-style: disc;
	margin: 0
}

.feature-wrap .absolute-text {
	position: absolute
}

.feature-wrap .absolute-text.one {
	bottom: 128px;
	left: 84px
}

.feature-wrap .absolute-text.two {
	bottom: 30px;
	left: 287px
}

.feature-wrap .absolute-text.three {
	bottom: 28px;
	left: 896px
}

.feature-wrap .tabs span {
	color: #535353
}

.feature-wrap .pane.large .pane-item {
	text-align: left;
	display: inline-block;
	line-height: 22px;
	width: 582px;
	height: 230px;
	margin: 0 14px 85px 0
}

.feature-wrap .pane.middle {
	padding: 0 0 50px 140px;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 4px 22px 0 rgba(0, 0, 0, .08);
	border-radius: 4px
}

.feature-wrap .pane.pet {
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap
}

.feature-wrap .pane.pet .pane-item img {
	box-shadow: none
}

.feature-wrap .pane.pet .pane-item {
	width: 216px;
	height: 272px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .03);
	border-radius: 4px;
	margin: 0 0 25px 0;
	cursor: pointer;
	text-align: center
}

.feature-wrap .pane.pet .pane-item .text {
	color: #898989;
	font-size: 12px;
	line-height: 18px
}

.feature-wrap .pane.middle .pane-item {
	width: 100px;
	margin: 48px 110px 0 0;
	text-align: center;
	color: #535353
}

.feature-wrap .pane.large .pane-item img {
	height: 230px
}

.feature-wrap .pane.pet .pane-item img {
	width: 100px;
	height: 100px;
	margin: 42px 0 24px 0;
	border-radius: 14px
}

.feature-wrap .pane.pet .pane-item .text {
	list-style: none;
	color: #898989;
	font-size: 12px;
	width: 137px;
	margin: 0 auto
}

.feature-wrap .pane.middle .pane-item img {
	width: 80px;
	height: 80px;
	margin-bottom: 4px;
	box-shadow: none
}

.feature-wrap .pane-item,
.sub-pane-item {
	width: 260px;
	text-align: left;
	line-height: 22px
}

.feature-wrap .pane-item .bold,
.sub-pane-item .bold {
	height: 22px;
	font-size: 14px
}

.feature-wrap .text {
	list-style: disc;
	margin-left: 16px;
	font-size: 14px;
	color: #535353
}

.feature-wrap .pane-item img,
.sub-pane-item img {
	height: 462px;
	width: 100%;
	box-shadow: 0 4px 22px 0 rgba(0, 0, 0, .08);
	border-radius: 4px;
	margin-bottom: 12px
}

.download-wrap a {
	width: 300px;
	height: 60px;
	display: inline-block;
	text-align: center;
	margin-top: 42px;
	line-height: 60px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 4px 22px 0 rgba(0, 0, 0, .15);
	border-radius: 30px;
	color: #6260e1;
	font-size: 20px;
	border: none
}

.download-wrap a:hover {
	color: rgba(129, 105, 255, .8);
	background: #fff;
	box-shadow: none
}

.footer-nav-wrap {
	height: 400px;
	background: #1c1f37;
	color: #fff
}

.split {
	width: 1px;
	width: 1px;
	height: 200px;
	background: rgba(255, 255, 255, .1)
}

.footer-nav-wrap .nav-bar {
	padding: 0 60px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	min-height: 200px;
	text-align: left
}

.footer-nav-wrap .qr-code-wrap {
	text-align: center
}

.footer-nav-wrap .sub-title {
	font-size: 18px;
	margin-bottom: 18px;
	height: 20px
}

.footer-nav-wrap .nav {
	margin-bottom: 18px
}

.footer-nav-wrap .nav a {
	opacity: .59;
	color: #fff;
	cursor: pointer
}

.footer-nav-wrap .nav a:hover {
	margin-bottom: 18px;
	opacity: 1;
	cursor: pointer
}

.footer-nav-wrap .qr-code {
	width: 160px;
	height: 160px;
	margin-bottom: 18px
}

.copyright-wrapper {
	background: #1c1f37
}

@keyframes bounceInLeft {
	0%,
	60%,
	75%,
	90%,
	to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-200px, 0, 0);
		transform: translate3d(-200px, 0, 0)
	}
	60% {
		opacity: .6
	}
	90% {
		opacity: 1
	}
	to {
		-webkit-transform: none;
		transform: none
	}
}

@-webkit-keyframes bounceInLeft {
	0%,
	60%,
	75%,
	90%,
	to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-200px, 0, 0);
		transform: translate3d(-200px, 0, 0)
	}
	60% {
		opacity: .6
	}
	90% {
		opacity: 1
	}
	to {
		-webkit-transform: none;
		transform: none
	}
}

@keyframes bounceInRight {
	0%,
	60%,
	75%,
	90%,
	to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(200px, 0, 0);
		transform: translate3d(200px, 0, 0)
	}
	60% {
		opacity: .6
	}
	90% {
		opacity: 1
	}
	to {
		-webkit-transform: none;
		transform: none
	}
}

@-webkit-keyframes bounceInRight {
	0%,
	60%,
	75%,
	90%,
	to {
		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	0% {
		opacity: 0
	}
	60% {
		opacity: .6
	}
	90% {
		opacity: 1
	}
	to {
		-webkit-transform: none;
		transform: none
	}
}