/* title */
.m-title {
	padding: 115px 0 95px;
}
.m-title h1 {
	line-height: 80px;
	font-size: 60px;
	font-weight: normal;
}
.m-title div {
	width: 514px;
	border-left: 1px solid #eee;
	padding-left: 39px;
	line-height: 40px;
	font-size: 16px;
	color: #999;
}
.m-title div p {
	margin-bottom: 50px;
	font-size: 22px;
	color: #000;
}
.m-title div a {
	font-size: 16px;
	color: #F40000;
}
.m-title div a .tf {
	vertical-align: 2px;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	margin-left: 10px;
	line-height: 20px;
	font-size: 12px;
	text-align: center;
	color: #fff;
	background: #F40000;
}
/* end title */

/* banner */
.m-banner {
	height: 400px;
	background-size: cover;
	background-position: center;
}
.m-banner .qrcode .item {
	width: 150px;
	margin-top: 70px;
	margin-right: 32px;
}
.m-banner .qrcode .item img {
	width: 100%;
	height: 150px;
	border-radius: 10px;
}
.m-banner .qrcode .item p {
	line-height: 46px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}
.m-banner .link p {
	margin-top: 18px;
	font-size: 14px;
	color: #666;
}
.m-banner .link .pc {
	font-size: 18px;
	color: #000;
}
.m-banner .link .pc a {
	color: #3267F6;
}
/* end banner */

/* schema */
.m-schema {
	padding: 44px 0 80px;
}
.m-schema .content {
	height: 535px;
	margin-top: 40px;
}
/* end schema */

/* mode */
.m-mode {
	padding: 54px 0 60px;
	background: #F5F9FF;
}
.m-mode ul {
	margin-top: 52px;
}
.m-mode li {
	box-sizing: border-box;
	width: 330px;
	height: 370px;
	border: 2px solid #fff;
	border-radius: 4px;
	padding: 40px 30px 0;
	margin-left: 26px;
	text-align: center;
	background: linear-gradient(0deg, #FFFFFF, #E6EDF8);
	box-shadow: 0 0 16px 0 rgba(167,179,198,.24);
	transition: all .3s ease;
}
.m-mode li:nth-child(4n-1) {
	margin-left: 27px;
}
.m-mode li:nth-child(4n+1) {
	margin-left: 0;
}
.m-mode li:nth-child(n+5) {
	margin-top: 26px;
}
.m-mode li:hover {
	transform: translate(0,-10px);
}
.m-mode li img {
	width: 120px;
	height: 120px;
}
.m-mode li h5 {
	margin: 40px 0 20px;
	font-size: 20px;
	font-weight: normal;
}
.m-mode li p {
	line-height: 24px;
	font-size: 14px;
	color: #90969F;
}
/* end mode */

/* sales */
.m-sales {
	padding: 62px 0 110px;
}
.m-sales ul {
	margin-top: 80px;
}
.m-sales li {
	box-sizing: border-box;
	width: 25%;
}
.m-sales li:nth-child(n+5) {
	margin-top: 60px;
}
.m-sales li img {
	width: 63px;
	height: 63px;
	margin-right: 22px;
	transition: all .3s ease;
}
.m-sales li:hover img {
	transform: scale(1.2);
}
.m-sales li h5 {
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: normal;
}
.m-sales li p {
	font-size: 16px;
}
/* end sales */

/* decorate */
.m-decorate {
	padding: 62px 0 100px;
	background-image: url('../img/system/decorate_bg.png');
	background-size: cover;
	background-position: center;
}
.m-decorate img {
	height: 535px;
	margin-top: 82px;
}
/* end decorate */

/* technique */
.m-technique {
	padding: 70px 0 126px;
}
.m-technique ul {
	margin-top: 86px;
}
.m-technique li {
	width: 183px;
	height: 183px;
	border: 1px solid #EBEBEB;
	margin-left: 26px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 0 rgba(0,0,0,.2);
	transition: box-shadow .3s ease;
}
.m-technique li:hover {
	box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
}
.m-technique li:nth-child(1) {
	margin-left: 0;
}
.m-technique li .icon {
	margin: 50px auto 36px;
	font-size: 50px;
}
.m-technique li p {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
/* end technique */

/* terminus */
.m-terminus {
	box-sizing: border-box;
	height: 700px;
	padding: 75px 0 80px;
	background-image: url('../img/system/terminus.jpg');
	background-size: cover;
	background-position: center;
}
.m-terminus .u-title,
.m-terminus .u-sub-title {
	color: #fff;
}
.m-terminus .u-sub-title {
	opacity: .8;
}
/* end terminus */

/* point */
.m-point {
	padding: 60px 0 68px;
}
.m-point dl {
	width: 670px;
	height: 650px;
	margin-top: 68px;
	background: #fff;
	box-shadow: 0 0 20px 0 rgba(191,194,208,.5);
}
.m-point dt {
	position: relative;
	height: 94px;
	line-height: 100px;
	font-size: 24px;
	text-indent: 35px;
	color: #00FFEA;
	background: linear-gradient(90deg, #1966FF, #6DB4F9);
}
.m-point dt:after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 50%;
	height: 86px;
	background-image: url('../img/system/point_title.png');
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: right center;
	opacity: .4;
}
.m-point ul {
	padding: 30px 75px;
}
.m-point li {
	position: relative;
	margin-bottom: 25px;
}
.m-point li:before {
	content: '';
	position: absolute;
	left: -40px;
	top: 4px;
	width: 30px;
	height: 30px;
	background-image: url('../img/system/point_item.png');
	background-size: 100% 100%;
}
.m-point li h5 {
	line-height: 38px;
	font-size: 16px;
	font-weight: normal;
}
.m-point li p {
	line-height: 24px;
	font-size: 15px;
	color: #828A98;
}
/* end point */

/* advantage */
.m-advantage {
	padding: 60px 0 68px;
	background: #F7F9FB;
}
.m-advantage ul {
	margin-top: 62px;
}
.m-advantage li {
	box-sizing: border-box;
	width: 680px;
	height: 170px;
	padding-right: 40px;
	border: 1px solid #E5E5E5;
	background: #fff;
	opacity: 0;
	transition: all 1.5s ease;
}
.m-advantage li:nth-child(n+3) {
	margin-top: 42px;
}
.m-advantage li:nth-child(2n) {
	margin-left: 40px;
}
.m-advantage.z-active li {
	opacity: 1;
}
.m-advantage li:nth-child(2) {
	transition-delay: .2s;
}
.m-advantage li:nth-child(3) {
	transition-delay: .4s;
}
.m-advantage li:nth-child(4) {
	transition-delay: .6s;
}
.m-advantage li .icon {
	width: 90px;
	height: 90px;
	margin: 0 40px;
}
.m-advantage li h1 {
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: normal;
}
.m-advantage li p {
	line-height: 24px;
	font-size: 15px;
	color: #6B798E;
}
/* end advantage */

/* ability */
.m-ability {
	padding: 66px 0 136px;
}

.m-ability ul {
	margin-top: 52px;
}
.m-ability li {
	position: relative;
	left: 100px;
	width: 380px;
	background: #F7F9FB;
	opacity: 0;
	transition: all 1s ease;
}
.m-ability li:nth-child(n+2) {
	margin-left: 50px;
}
.m-ability li:nth-child(2) {
	transition-delay: .4s;
}
.m-ability li:nth-child(3) {
	transition-delay: .8s;
}
.m-ability.z-active li {
	left: 0;
	opacity: 1;
}
.m-ability li .image {
	height: 210px;
	background-size: 100% auto;
	background-position: center;
    transition: all .3s ease;
}
.m-ability li:hover .image {
    background-size: 120% auto;
}
.m-ability li .content {
	height: 195px;
	padding: 0 24px;
}
.m-ability li .content h5 {
	line-height: 66px;
	font-size: 18px;
	font-weight: bold;
}
.m-ability li .content p {
	line-height: 24px;
	font-size: 14px;
	color: #444;
}
/* end ability */