/*banner*/
.banner-wrapper {
	position: relative;
	width: 100%;
	height: 720px;
	color: #fff;
	background-image: url(//static.pcmes.cn/images/pc/index/v3/home/banner.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	animation: bannerZoomBig 35s infinite;
	animation-timing-function: swing;
	}
	@keyframes bannerZoomBig {
		0% {
			background-size: 100% 100%;
		}
		50% {
			background-size: 120% 120%;
			background-position: center center;
		}
		100% {
			background-size: 100% 100%;
		}
	}

	.banner-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#02024c, endColorstr=#0a5781);/*IE<9>*/
		background: linear-gradient(90deg, #02024c 0%, #0a5781 100%);
		opacity: .75;
	}

	.banner-main {
		position: absolute;
		top: 50%;
		width: 100%;
		margin-top: -150px;
		text-align: center;
		}
		.banner-main-logo {
			width: 400px;
			margin-bottom: 32px;
			opacity: .75;
		}
		.banner-main-slogan {
			font-size: 56px;
			font-weight: bold;
			letter-spacing: 2px;
			margin-bottom: 90px;
			/*text-decoration: 0px 0px 30px rgba(0, 0, 0, 0.65);*/
		}
		.banner-feature-wrapper {
			margin-bottom: 50px;
			letter-spacing: 4px;
			}
			.banner-feature-box {
				display: inline-block;
				text-align: center;
				margin-right: 20px;
				}
				.banner-feature-box:last-child {
					margin-right: 0;
				}
				.banner-feature-icon {
					width: 50px;
					height: 50px;
					margin: 0 auto 12px;
				}
				.banner-feature-text {
					position: relative;
					font-size: 22px;
				}
		.banner-bottom {
			position: absolute;
	    bottom: 0;
	    left: 50%;
	    width: 146px;
	    height: 220px;
	    margin-left: -73px;
	    text-align: center;
			}
			.btn-apply {
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 50px;
				font-weight: bold;
				transition: all .2s;
				box-shadow: 0px 5px 15px rgba(0, 0, 204, 0.8);
				}
				.btn-apply:hover {
					top: -5px;
				}
				@keyframes bannerBtnMove {
					0% {
						top: 0px;
					}
					50% {
						top: -5px;
					}
					100% {
						top: -5px;
					}
				}
			.arrow-down-outer {
				position: absolute;
		    left: 50%;
		    bottom: 62px;
		    width: 68px;
		    height: 68px;
		    margin-left: -34px;
		    margin-top: 70px;
		    padding: 19px;
		    cursor: pointer;
		    animation: bannerArrowMove 1s infinite;
		    animation-timing-function: ease-in-out;
			}
			.arrow-down {
				display: block;
				margin: auto;
				width: 18px;
		    height: 18px;
		    border-right: 3px solid #fff;
		    border-bottom: 3px solid #fff;
		    transform: rotate(45deg);
		    
				}
				@keyframes bannerArrowMove {
					0% {
						bottom: 62px;
					}
					50% {
						bottom: 50px;
					}
					100% {
						bottom: 62px;
					}
				}

/*feature*/
.feature-wrapper {
	}
	.slick-list {
		width: 100%;
	}
	.feature-ul {
		position: relative;
		border-bottom: 2px solid #ddd;
    padding: 0 128px;
    height: 220px;
    text-align: center;
		}
		.feature-hline {
			position: absolute;
			z-index: 2;
	    bottom: -2px;
	    left: 128px;
			height: 5px;
			background: #1890FF;
			}
			.feature-hline.animate{
				animation: hlineWidth 4s;
				animation-timing-function: ease-in-out;
			}
			@keyframes hlineWidth {
				0% { width: 0px; }
				100% {width: 160px;}
			}
		.feature-hline-progress {
			position: absolute;
	    bottom: -2px;
	    left: 128px;
			width: 160px;
			height: 5px;
			background: #ccc;
			transition: all .25s;
		}
	.feature-li {
		float: left;
		width: 160px;
		display: inline-block;
	  margin-bottom: -3px;
	  border-bottom: 5px solid transparent;
	  cursor: pointer;
	  transition: all .3s;
	  margin-right: 16px;
		}
		.feature-li.last {
			margin-right: 0;
		}
		.feature-li.active {
			
		}
		.feature-box {
			position: relative;
			padding: 24px 0;
			border-radius: 6px;
			text-align: center;
			transition: all .25s;
			}
			.feature-box:hover {
				transition: all .25s;
				background: rgba(129, 138, 153, .2);
			}
			.feature-box-bg {
				position: absolute;
				z-index: -1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#0099FF, endColorstr=#0066CC);/*IE<9>*/
				background: linear-gradient(-15deg, #0099FF 0%, #0066CC 100%);
				opacity: 0;
				border-radius: 6px;
				transition: all .25s;
			}
			.feature-li.active .feature-box {
				color: #fff;
			}
			.feature-li.active .feature-box-bg{
				opacity: 1;
			}
			.feature-icon {
				display: none;
				width: 40px;
				height: 40px;
				margin: 0 auto 22px;
				fill: #369;
				}
				.feature-icon-black {
					display: block;
				}
				.feature-li.active .feature-icon-white {
					display: block;
				}
				.feature-li.active .feature-icon-black {
					display: none;
				}

			.feature-title {
				font-size: 24px;
				font-weight: normal;
				margin-bottom: 12px;
			}
			.feature-intro {
				color: rgba(21, 31, 42, 0.6);
				}
				.feature-li.active .feature-intro {
					color: rgba(236, 239, 241, 0.8);
				}

	.feature-slider-container {
		height: 560px;
		}
		.feature-slider-container .slick-track {
			height: 100%;
		}
		.feature-slider {
			position: relative;
			height: 560px;
			overflow: hidden;
		}
		.feature-slider-image {
			margin: auto;
			height: 500px;
		}
		.feature-slider-arrow {
			position: absolute;
			top: 50%;
			margin-top: -30px;
			width: 60px;
			height: 60px;
			background: rgba(217,218,223,.7);
			border-radius: 50%;
			cursor: pointer;
			transition: all .25s;
			}
			.feature-slider-arrow:hover {
				background: #fff;
				box-shadow: 0 8px 24px rgba(0,0,0,.02);
			}
			.feature-slider-arrow.arrow-left {
				left: -60px;
			}
			.feature-slider-arrow.arrow-right {
				right: -60px;
			}
			.feature-slider-arrow .anticon {
			    font-size: 24px;
			    margin: 17.5px 20px;
			    display: block;
			    color: #fff;
			    transition: all .25s;

				}
				.feature-slider-arrow:hover .anticon {
					color: #1E88E5;
				}
				.feature-slider-arrow .anticon-left {
					margin: 17.5px 0;
    			margin-left: -2px;
				}
		.slider2-qr-wrapper {
			width: 276px;
	    height: 100%;
	    right: 130.5px;
	    position: absolute;
	    top: 118px;
	    overflow: hidden;
			}
			.slider2-qrinfo {
				width: 100%;
				}
				.slider2-qrinfo.animate {
					animation: slider2Qr 4s infinite;
				}
				@keyframes slider2Qr {
					0% {
						transform: translateY(0);
					}
					80% {
						transform: translateY(-500px);
					}
					100% {
						transform: translateY(-500px);
					}
				}

/*functions*/
.function-list {
	width: 1000px;
	margin: 60px auto 0;
	background: #fff;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
	padding: 12px 8px;
	border-radius: 6px;
	}
	.function-list-section:first-child {
		border-bottom: 1px solid rgba(0,0,0,.12);
	}
	.function-item {
		display: inline-block;
		width: 160px;
		text-align: center;
		padding: 14px 0;
    border-right: 1px solid rgba(0,0,0,.12);
		}
		.function-item:last-child {
			border-right: 0;
		}
		.function-item-icon {
			display: inline-block;
			width: 32px;
			height: 32px;
			vertical-align: bottom;
			background: url(//static.pcmes.cn/images/pc/index/v3/home/function-sprite.png) no-repeat;
			background-size: 192px 64px;
			opacity: .8;
			}
			.function-item-icon-2 {
				background-position: -32px 0;
			}
			.function-item-icon-3 {
				background-position: -64px 0;
			}
			.function-item-icon-4 {
				background-position: -98px 0;
			}
			.function-item-icon-5 {
				background-position: -130px 0;
			}
			.function-item-icon-6 {
				background-position: -162px 0;
			}

			.function-item-icon-7 {
				background-position: 0 -32px;
			}
			.function-item-icon-8 {
				background-position: -32px -32px;
			}
			.function-item-icon-9 {
				background-position: -64px -32px;
			}
			.function-item-icon-10 {
				background-position: -98px -32px;
			}
			.function-item-icon-11 {
				background-position: -130px -32px;
			}
			.function-item-icon-12 {
				background-position: -162px -32px;
			}
		.function-item-text {
			font-size: 20px;
	    font-weight: bold;
	    line-height: 32px;
	    vertical-align: middle;
	    display: inline-block;
	    margin-left: 8px;
		}

.function-main {
	width: 1080px;
  margin-left: 30px;
  margin-top: 40px;
	}
	.function-img-wrapper {
		position: relative;
		
		overflow: hidden;
		}
		.function-pc-img {
			float: left;
			width: 88%;
		}
		.function-mobile-img {
	    position: absolute;
	    right: 70px;
	    top: 20px;
	    width: 24%;
		}

.function-bg-1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
  left: 0;
  background: url(//static.pcmes.cn/images/pc/index/v3/home/function-bg.svg) no-repeat;
  height: 420px;
  background-size: cover;
}


/*advantage*/
.advantage-wrapper {
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#818A99, endColorstr=#4B5169);/*IE<9>*/
	background: linear-gradient(-105deg,#818A99 0%,#4B5169 100%);
	color: #fff;
	text-align: center;
	}
	.advantage-divider {
		border-bottom: 1px solid rgba(255,255,255,.4);
    width: 50%;
    margin: 40px auto 0;
	}
	.advantage-item-ul {
		overflow: hidden;
		margin-bottom: 0;
	}
	.advatage-item {
		float: left;
		width: 20%;
		display: inline-block;
		padding: 20px;
		}
		.advantage-box {
			color: #fff;
			}
			.advantage-icon {
				width: 47px;
				height: 47px;
				margin: auto;
			}
			.advantage-title {
				font-size: 24px;
				margin: 30px 0 20px;
				letter-spacing: 2px;
			}
			.advantage-intro {
				color: rgba(255,255,255,.8);
				line-height: 1.7;
			}

			.icon-advantage-sprite-1 {
				width: 0.99609375em;
			}

/*customer*/
.customer-title-divider {

}
.customer-box {
	padding: 24px 32px 24px;
	background: #fff;

	box-shadow: 0 8px 24px rgba(0,0,0,.02);
	font-size: 20px;
	text-align: left;
	border-radius: 4px;
	}
	.customer-box-title {
		border-bottom: 2px solid #eee;
    font-size: 20px;
    font-style: italic;
    line-height: 1;
    padding-bottom: 8px;
		}
		.customer-box-title-bold {
			font-family: 'TrebuchetMS-Italic', 'Trebuchet MS Italic', 'Trebuchet MS';
			font-style: italic;
			font-size: 62px;
			/*font-weight: bold;*/
			margin-right: 16px;
			letter-spacing: -2px;
		}
		.customer-title-unit {
			margin-top: -11px;
	    display: inline-block;
	    vertical-align: middle;
		}
	.customer-box-intro {
		color: #515872;
		margin-top: 18px;
		/*font-style: italic;*/
		letter-spacing: 2px;
	}
	.logo3 {
		width: 160px;
    float: right;
    margin-top: 20px;
    opacity: .8;
	}

/*recommendation*/
.recommendation-content {
	position: relative;
	width: 900px;
	margin: auto;
	}
	.quote-left, .quote-right {
		position: absolute;
		width: 16px;
		height: 18px;
		background: url(../images/appraise_上冒号.png) no-repeat;
		background-size: contain;
		opacity: .5;
		}
		.quote-right {
			right: 0;
			bottom: 20px;
			transform: rotate(180deg);
		}
	.recommendation-text {
		color: #515872;
    font-size: 18px;
    text-indent: 36px;
    text-align: left;
    line-height: 2;
    letter-spacing: 2px;
	}
.recommendation-swiper-container {
	width: 900px;
	margin: auto;
}
.recommendation-person-wrapper {
	position: relative;
	padding: 0 140px;
	margin-top: 30px;
	border-top: 2px solid #eee;
	text-align: center;
	height: 254px;
	}
	.recommendation-hline {
		position: absolute;
    top: -2px;
    left: calc(140px + ((280px - 174px) / 2));
		width: 173.33px;
		height: 2px;
		background: #4498F7;
		transition: all .25s;
		}
		.recommendation-hline:before {
			content: "";
	    position: absolute;
	    top: -10px;
	    left: 50%;
	    border-width: 10px;
	    border-style: dashed;
	    border-color: transparent;
	    border-top-width: 0;
	    border-bottom-color: #4498F7;
	    border-bottom-style: solid;
	    margin-left: -10px;
		}
	.recommendation-person {
		float: left;
		position: relative;
		width: 20%;
		display: inline-block;
		margin-top: -2px;
		cursor: pointer;
		}

		.recommendation-avatar {
			width: 90px;
			height: 90px;
			margin: 40px auto 20px;
			border: 4px solid #ddd;
			border-radius: 50%;
			background: #F2F2F2;
			}
			.recommendation-person.active .recommendation-avatar {
				border-color: #4498F7;
			}
		.recommendation-name {
			font-size: 22px;
			font-weight: bold;
			margin-bottom: 10px;
			letter-spacing: 1px;
		}
		.recommendation-job {
			margin-top: 4px;
			color: rgba(81, 88, 114, 0.7);
		}

/*support*/
.support-box {
	float: left;
	width: 25%;
	padding-top: 8px;
	}
	.support-icon {
		height: 54px;
	}
	.support-box-title {
		font-size: 24px;
		margin: 40px 0 12px;
		letter-spacing: 1px;
	}
	.support-box-intro {
		color: #515872;
		font-size: 16px;
	}



/*contact*/
.contact-wrapper {
	display: none;
	position: fixed;
	z-index: 2;
	right: 20px;
	bottom: 30%;
	margin-bottom: -150px;
	color: #515872;
	cursor: pointer;
	}
	.contact-main {
		width: 78px;
		height: 250px;
		border-radius: 6px;
		background: #fff;
		box-shadow: 0 0 12px rgba(81,81,81,.2);
		border: 1px solid rgba(140,143,148,.3);
		}
		.contanct-title {
			font-size: 14px;
			padding: 15px 0;
			text-align: center;
			/*font-weight: bold;*/
			border-bottom: 1px solid rgba(140,143,148,.4);
		}
		.contact-avatar {
			display: block;
			width: 54px;
			height: 54px;
			margin: 20px auto;
			border-radius: 50%;
			border: 1px solid rgba(101,110,129,.3);
		}
		.contact-name {
			padding-bottom: 20px;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			border-bottom: 1px solid rgba(140,143,148,.4);
		}
		.contact-phone-icon {
			display: block;
			width: 32px;
			margin: 14px auto;
		}

	.contact-apply {
		display: block;
		width: 66px;
    height: 66px;
    margin: 16px 6px;
    padding: 8px 10px;
    background: #1E88E5;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(81,81,81,.45);
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: all .3s;
		}
		.contact-apply:hover {
			opacity: .9;
			color: #fff;
		}
	.contact-detail {
		display: none;
		position: absolute;
		right: 80px;
		top: 100px;
		padding-right: 30px;
		}
		.contact-detail-inner {
			position: relative;
			width: 280px;
	    padding: 20px;
			background: #fff;
			box-shadow: 0 0 20px rgba(81,81,81,.15);
			border: 1px solid rgba(140,143,148,.3);
			border-radius: 6px;
			}
			.contact-detail-inner:before {
				content: '';
		    position: absolute;
		    z-index: 2;
		    right: -10px;
		    top: 50%;
		    margin-top: -10px;
		    border-width: 10px;
		    border-style: dashed;
		    border-color: transparent;
		    border-right-width: 0;
		    border-left-color: #fff;
		    border-left-style: solid;
			}
			.contact-detail-inner:after {
				content: '';
		    position: absolute;
		    right: -11px;
		    top: 50%;
		    margin-top: -10px;
		    border-width: 10px;
		    border-style: dashed;
		    border-color: transparent;
		    border-right-width: 0;
		    border-left-color: rgba(140,143,148,.3);
		    border-left-style: solid;
			}
			.contact-detail-title {
				padding-bottom: 10px;
	    	margin-bottom: 20px;
				font-size: 16px;
				border-bottom: 1px solid rgba(140,143,148,.4);
			}