.divCon {

	width: 1200px;

	margin: 0 auto;

}





/* header */



.topHeader {

	float: left;

	width: 100%;

}



.topWell {

	float: left;

	width: 100%;

	height: 40px;

	background-color: #3381F3;

}



.well_left {

	float: left;

	width: 800px;

}



.well_left span {

	font-size: 12px;

	color: #FFFFFF;

	line-height: 40px;

	text-align: left;

}



.well_right {

	float: right;

	width: 400px;

	text-align: right;

	color: #FFFFFF;

}



.well_right a {

	font-size: 12px;

	color: #FFFFFF;

	text-decoration: none;

	line-height: 40px;

}



.topLogo {

	float: left;

	width: 100%;

	height: 155px;

	background-color: #FFFFFF;

}



.logo_left {

	float: left;

	width: 900px;

	height: 155px;

	display: flex;

	align-items: center;

}



.logo_right {

	float: right;

	padding-left: 55px;

	width: 200px;

	height: 155px;

	background: url(../images/topPhoneIMG.png) no-repeat center left;

}



.logo_right p {

	margin-top: 50px;

	font-size: 15px;

	color: #444444;

}



.logo_right h1 {

	font-size: 25px;

	color: #FEC803;

}



.topNav {

	float: left;

	width: 100%;

	height: 60px;

	border-top: 1px solid #CCCCCC;

}



.topNav ul {

	float: left;

	width: 100%;

	height: 60px;

	display: flex;

	align-items: center;

	justify-content: space-between;

}



.topNav ul li {

	width: 135px;

	height: 60px;

	text-align: center;

	line-height: 60px;

	cursor: pointer;

	position: relative;

	transition: .5s;

}



.topNav ul li:after {

	content: "";

	position: absolute;

	bottom: 0;

	left: 0;

	width: 0px;

	height: 2px;

	background-color: #3381F3;

	transition: .5s;

}



.topNav ul li.active a {

	color: #3381F3;

}



.topNav ul li.active:after {

	content: "";

	position: absolute;

	bottom: 0;

	left: 0;

	width: 135px;

	height: 2px;

	background-color: #3381F3;

}



.topNav ul li a {

	font-size: 16px;

	text-decoration: none;

	color: #2F2F2F;

}



.topNav ul li:hover a {

	color: #3381F3;

}



.topNav ul li:hover:after {

	width: 135px;

}



.topSearch {

	float: left;

	width: 100%;

	height: 55px;

	background-color: #FAF7FA;

	box-shadow: 0px 3px 5px rgba(0, 0, 0, .1);

}



.search_left {

	float: left;

	width: 850px;

	height: 55px;

	overflow: hidden;

}



.search_left > div {

	float: left;

	width: 90px;

	height: 55px;

	font-size: 14px;

	line-height: 55px;

	font-weight: bold;

	color: #444444;

}



.search_left > a {

	margin-right: 5px;

	font-family: "宋体";

	font-size: 13px;

	color: #666666;

	text-decoration: none;

	line-height: 55px;

	transition: .5;

}



.search_left > a:hover {

	color: #FF0000;

}



.search_right {

	float: right;

	width: 270px;

	height: 55px;

	line-height: 55px;

}



.searchinput {

	padding-left: 15px;

	width: 215px;

	height: 30px;

	outline: none;

	border-radius: 20px;

	border: 1px solid #E3E3E3;

	color: #999999;

	font-size: 12px;

}



.btnSearch {

	width: 20px;

	height: 20px;

	border: none;

	outline: none;

	background: url(../images/topSearch.png) no-repeat center;

	cursor: pointer;

}





/* nBanner */



.nBanner {

	float: left;

	width: 100%;

	height: 330px;

	background-position: center;

	background-repeat: no-repeat;

}





/* IndexCon */



.IndexCon {

	float: left;

	width: 100%;

}



.title1, .title2, .title3 {

	text-align: center;

}



.title1 h1 {

	font-size: 30px;

	color: #34393D;

	font-weight: 100;

}



.title1 h1 span {

	color: #327EEC;

}



.title1 h2 {

	font-size: 21px;

	color: #444444;

	font-weight: 100;

	line-height: 50px;

}



.title1 h3 {

	font-size: 12px;

	color: #8B8B8B;

	font-weight: 100;

}



.title2 h1 {

	font-size: 30px;

	font-weight: 100;

	color: #39343D;

}



.title2 h1 span {

	color: #327EEC;

}



.title2 h2 {

	font-size: 17px;

	color: #8B8B8B;

	font-weight: 100;

	line-height: 35px;

}



.title3 h1 {

	font-size: 37.5px;

	color: #327EEC;

}



.title3 h2 {

	font-size: 17px;

	color: #777777;

	font-weight: 100;

}





/* Advantage */



.Advantage {

	float: left;

	padding: 50px 0;

	width: 100%;

	height: 510px;

}



.Advantage_list {

	float: left;

	width: 100%;

	height: 400px;

	display: flex;

	justify-content: space-between;

}



.Advantage_list li {

	width: 334px;

	height: 334px;

	border-radius: 50%;

	background: url(../images/AdvlistIMG.png) no-repeat center;

	display: flex;

	align-items: center;

	justify-content: center;

}



.Advantage_list li:nth-child(2) {

	margin-top: 66px;

}



.Advantage_list li > div {

	width: 290px;

	height: 290px;

	border-radius: 50%;

	text-align: center;

	position: relative;

	overflow: hidden;

	cursor: pointer;

}



.Advantage_list li > div img {

	position: relative;

	top: 65px;

	z-index: 15;

}



.Advantage_list li > div h1 {

	position: relative;

	top: 75px;

	font-size: 20px;

	font-weight: 100;

	color: #333333;

	z-index: 15;

	transition: .5s;

}



.Advantage_list li > div span {

	position: relative;

	display: block;

	margin: 15px auto;

	top: 75px;

	width: 25px;

	height: 1px;

	background-color: #CCCCCC;

	transition: .5s;

	z-index: 15;

}



.Advantage_list li > div p {

	position: relative;

	padding: 0 30px;

	top: 85px;

	line-height: 25px;

	font-size: 14px;

	color: #333333;

	z-index: 15;

	transition: .5s;

}



.Advantage_list li > div:before {

	position: absolute;

	content: "";

	top: 0px;

	left: 0px;

	width: 290px;

	height: 290px;

	background-image: url(../images/Advantage_list.png);

	background-position: center;

	background-repeat: no-repeat;

	background-size: 0%;

	transition: .5s;

	z-index: 10;

}



.Advantage_list li:hover div:before {

	background-size: 100%;

}



.Advantage_list li:hover div h1 {

	color: #FFFFFF;

}



.Advantage_list li:hover div span {

	background-color: #FFFFFF;

}



.Advantage_list li:hover div p {

	color: #FFFFFF;

}





/* quality */



.quality {

	float: left;

	padding: 50px 0;

	width: 100%;

	height: 715px;

	background-color: #F9F6F9;

}



.quality_list {

	float: left;

	width: 100%;

	display: flex;

	flex-wrap: wrap;

	justify-content: space-between;

}



.quality_list li {

	margin: 20px 0;

	width: 380px;

	height: 290px;

	background-color: #FFFFFF;

}



.quality_list li a {

	text-decoration: none;

}



.quality_list li .proIMG {

	width: 100%;

	height: 245px;

	display: flex;

	align-items: center;

	justify-content: center;

	overflow: hidden;

}



.quality_list li .proIMG img {
	max-width:100%;
	max-height:245px;
	transition: .5s;

}



.quality_list li .proTXT {

	width: 100%;

	height: 45px;

	background-color: #327EEC;

	color: #FFFFFF;

	display: flex;

	justify-content: center;

	align-items: center;

	font-size: 15px;

	transition: .5s;

}



.quality_list li:hover .proIMG img {

	transform: scale(1.2, 1.2);

}



.quality_list li:hover .proTXT {

	background-color: #FEC803;

}





/* customer */



.customer {

	float: left;

	padding: 50px 0;

	width: 100%;

	height: 810px;

}



.customerCon {

	float: left;

	margin-top: 30px;

	width: 100%;

	position: relative;

}



.customerNav {

	position: absolute;

	left: 0;

	top: 0;

	width: 700px;

	height: 50px;

	background-color: #FFFFFF;

	z-index: 99999;

}



.customerNav ul {

	float: left;

	width: 100%;

	padding-left: 55px;

	background: url(../images/all-nav.png) no-repeat center left 15px;

}



.customerNav ul li {

	float: left;

	font-size: 18px;

	line-height: 50px;

}



.customerNav ul li a {

	text-decoration: none;

	color: #333333;

}



.customerNav ul li:after {

	content: "/";

	float: left;

	margin: 0 15px;

	font-size: 18px;

	line-height: 50px;

}



.customerNav ul li:first-child:after {

	display: none;

}



.customerNav ul li.tabon a {

	font-weight: bold;

	color: #327EEC;

}





/* Service */



.Service {

	float: left;

	width: 100%;

	height: 620px;

	background: url(../images/ServiceBG.png) no-repeat center;

}



.Service_left {

	float: left;

	padding: 75px 0;

	width: 660px;

	height: 400px;

}



.Service_ul {

	float: left;

	width: 100%;

	height: 120px;

	display: flex;

	align-items: center;

	justify-content: space-between;

}



.Service_ul li {

	width: 157px;

	height: 120px;

	background: rgba(255, 255, 255, 0.18);

	cursor: pointer;

}



.Service_ul li.tabon {

	background-color: #FEC803;

}



.Service_ul li h1 {

	font-family: impact;

	font-size: 41px;

	text-align: center;

	color: #FFFFFF;

	line-height: 75px;

}



.Service_ul li p {

	font-size: 21px;

	text-align: center;

	color: #FFFFFF;

}



.Service_List {

	float: left;

	margin-top: 65px;

	width: 1200px;

	height: 215px;

	position: relative;

}



.Service_List .title {

	width: 600px;

	height: 78px;

	position: relative;

}



.Service_List .title:after {

	content: "";

	position: absolute;

	bottom: 0;

	left: 0;

	width: 120px;

	height: 2px;

	background-color: #FFFFFF;

}



.Service_List .title span {

	float: left;

	font-family: impact;

	font-size: 50px;

	color: #FFFFFF;

}



.Service_List .title p {

	float: left;

	margin-left: 20px;

	font-size: 27px;

	color: #FFFFFF;

	line-height: 60px;

}



.Service_List .content {

	width: 600px;

	margin-top: 40px;

	font-size: 14px;

	color: #FFFFFF;

	line-height: 38px;

}



.Service_List .IMG{

	position: absolute;

	top: -110px;

	right: -1px;

	width: 488px;

	height: 469px;

}



.Service_right {

	float: right;

	width: 488px;

}



.Service_right h1 {

	padding-left: 125px;

	line-height: 50px;

	font-size: 29px;

	color: #8B8B8B;

	font-weight: 100;

}



.Service_right h2 {

	text-align: right;

	font-size: 33px;

	color: #444444;

}



.Service_right h3 {

	text-align: right;

	font-size: 22px;

	font-weight: 100;

	color: #327EEC;

	line-height: 40px;

	position: relative;

}



.Service_right h3:after {

	content: "";

	position: absolute;

	left: 125px;

	top: 20px;

	width: 85px;

	height: 2px;

	background-color: #327EEC;

}



.Service_right img {

	margin-top: 16px;

	margin-left: 1px;

}





/* process */



.process {

	float: left;

	padding: 60px 0;

	width: 100%;

	height: 420px;

}



.process_ul {

	float: left;

	margin-top: 20px;

	width: 100%;

	height: 203px;

	display: flex;

	align-items: center;

	justify-content: space-between;

}



.process_ul li {

	float: left;

	width: 176px;

	height: 203px;

	perspective: 1200px;

}



.process_ul li .processBG {

	width: 176px;

	height: 203px;

	background: url(../images/processlist1.png) no-repeat center;

	position: relative;

	color: #FFFFFF;

	cursor: pointer;

	transition: 1s;

}



.process_ul li:nth-child(2n) .processBG {

	background: url(../images/processlist2.png) no-repeat center;

	color: #333333;

}



.process_ul li .IMG {

	position: absolute;

	padding: 0 10px;

	top: 50px;

	left: 0;

	width: 156px;

	height: 103px;

	font-size: 15px;

	line-height: 25px;

	text-align: center;

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	align-content: space-between;

	align-items: center;

	transition: 1s;

}



.process_ul li .IMG p {

	width: 100%;

	font-size: 17px;

}



.process_ul li .content {

	position: absolute;

	padding: 0 10px;

	top: 50px;

	left: 0;

	width: 156px;

	height: 103px;

	font-size: 15px;

	line-height: 25px;

	display: flex;

	align-items: center;

	text-align: center;

	transform: rotateY(180deg) translateZ(1px);

	opacity: 0;

	transition: 1s;

}



.process_ul li:hover .processBG {

	transform: rotateY(180deg);

}



.process_ul li:hover .content {

	opacity: 1;

}



.process_ul li:hover .IMG {

	opacity: 0;

}



a.process_zixun {

	display: block;

	margin: 10px auto;

	width: 247px;

	height: 108px;

}





/* indeNews */



.indeNews {

	float: left;

	width: 100%;

	height: 500px;

}



.news_left {

	float: left;

	width: 725px;

	height: 500px;

}



.news_nav {

	float: left;

	width: 100%;

	height: 40px;

}



.news_nav ul li {

	float: left;

	margin-right: 20px;

	padding: 0 25px;

	height: 40px;

	font-size: 18px;

	line-height: 40px;

	cursor: pointer;

	color: #333333;

}



.news_nav ul li.tabon {

	background-color: #327EEC;

	color: #FFFFFF;

}



a.news_more {

	float: right;

	margin-top: 10px;

}



.news_list {

	float: left;

	margin-top: 30px;

	width: 100%;

}



.news_list ul li {

	float: left;

	width: 100%;

}



.news_list ul li .IMG {

	float: left;

	display: none;

}



.news_list ul li .TXT {

	float: right;

	width: 100%;

	display: none;

}



.news_list ul li .show {

	float: left;

	margin: 5px 0;

	width: 100%;

	height: 30px;

	background: url(../images/news_bot.png) no-repeat center left;

}



.news_list ul li .show a {

	text-decoration: none;

	color: #383838;

}



.news_list ul li .show h1 {

	float: left;

	margin-left: 15px;

	font-weight: 100;

	line-height: 30px;

}



.news_list ul li .show p {

	float: right;

	font-size: 15px;

	line-height: 30px;

}



.news_list ul li:first-child {

	height: 200px;

}



.news_list ul li:first-child .IMG {

	display: flex;

	width: 318px;

	height: 200px;

	justify-content: center;

	align-items: center;

	overflow: hidden;

}



.news_list ul li:first-child .IMG img {

	max-width: 100%;

	transition: .5s;

}



.news_list ul li:first-child .IMG:hover img {

	transform: scale(1.2, 1.2);

}



.news_list ul li:first-child .TXT {

	display: block;

	width: 380px;

	height: 200px;

	position: relative;

}



.news_list ul li:first-child .TXT h1 {

	padding-top: 20px;

	font-size: 16px;

	color: #333333;

}



.news_list ul li:first-child .TXT p {

	margin-top: 15px;

	font-size: 14px;

	color: #383838;

	line-height: 25px;

}



.news_list ul li:first-child .TXT a {

	display: block;

	position: absolute;

	bottom: 10px;

	left: 0;

	width: 113px;

	height: 35px;

	border: 1px solid #327EEC;

	border-radius: 20px;

	text-align: center;

	line-height: 35px;

	text-decoration: none;

	color: #333333;

}



.news_list ul li:first-child .show {

	display: none;

}



.problem_right {

	float: right;

	width: 405px;

}



.problem_tit {

	float: left;

	width: 100%;

	height: 40px;

	position: relative;

}



.problem_tit h1 {

	float: left;

	margin-left: 15px;

	font-weight: 100;

	font-size: 18px;

	color: #333333;

	line-height: 20px;

}



.problem_tit h1 span {

	font-size: 14px;

	color: #666666;

}



.problem_tit:before {

	content: "";

	position: absolute;

	left: 0;

	top: 0;

	width: 2px;

	height: 40px;

	background-color: #327EEC;

}



.problem_IMG {

	float: left;

	margin-top: 20px;

	width: 100%;

	height: 178px;

}



.problem_IMG img {

	max-width: 100%;

}



.problem_Ul {

	float: left;

	width: 100%;

}



.problem_Ul li {

	float: left;

	margin-top: 18px;

	width: 100%;

	height: 100px;

	background: url(../images/problemBG.png) no-repeat left top;

	border-bottom: 1px dashed #CCCCCC;

}



.problem_Ul li a {

	text-decoration: none;

}



.problem_Ul li h1 {

	padding-left: 40px;

	font-size: 15px;

	color: #383838;

}



.problem_Ul li p {

	margin-top: 15px;

	padding-left: 40px;

	font-size: 14px;

	color: #383838;

	line-height: 25px;

}





/* aboutus */



.aboutus {

	float: left;

	width: 100%;

	height: 513px;

	background: url(../images/index_about.png) no-repeat center;

}



.about_right {

	float: right;

	width: 50%;

	height: 513px;

	position: relative;

}



.about_tit {

	float: left;

	padding-left: 50px;

}



.about_tit h1 {

	padding-top: 75px;

	font-size: 30px;

	color: #FFFFFF;

}



.about_tit p {

	font-family: arial;

	padding-left: 15px;

	font-size: 25px;

	font-weight: bold;

	color: #E3E2E2;

	line-height: 35px;

	position: relative;

}



.about_tit p:after {

	content: "";

	position: absolute;

	left: 0;

	top: 5px;

	width: 3px;

	height: 25px;

	background-color: #E3E2E2;

}



.about_con {

	float: left;

	height: 240px;

	margin-left: 50px;

	margin-top: 20px;

	padding-right: 25px;

	line-height: 30px;

	color: #FFFFFF;

	font-size: 14px;

	overflow: hidden;

}



a.about_more {

	display: block;

	position: absolute;

	bottom: 40px;

	left: 50px;

	width: 140px;

	height: 45px;

	background-color: #FFFFFF;

	color: #777777;

	font-size: 13px;

	text-align: center;

	line-height: 45px;

	text-decoration: none;

}





/* indexMessage */



.indexMessage {

	float: left;

	padding: 50px 0;

	width: 100%;

	height: 380px;

}



.message_left {

	float: left;

	margin-top: 35px;

	width: 50%;

}



.messageDiv1 {

	float: left;

	margin-bottom: 20px;

	width: 50%;

	height: 40px;

}



.message_left p {

	float: left;

	width: 95px;

	height: 40px;

	background-color: #2B7EED;

	text-align: center;

	line-height: 40px;

	font-size: 14px;

	color: #FFFFFF;

}



.messageDiv1 input {

	float: left;

	padding-left: 10px;

	width: 148px;

	height: 38px;

	border: 1px solid #CCCCCC;

	outline: none;

}



.messageDiv1 span {

	margin-left: 8px;

	line-height: 40px;

	color: #FF0000;

	font-size: 20px;

}



.messageDiv2 {

	float: left;

	margin-bottom: 20px;

	width: 100%;

}



.messageDiv2 textarea {

	padding: 5px 10px;

	width: 533px;

	height: 68px;

	border: 1px solid #CCCCCC;

	outline: none;

}



.messageDiv3 .index_submit {

	width: 100px;

	height: 35px;

	background-color: #2B7EED;

	color: #FFFFFF;

	border: none;

	outline: none;

}



.messageDiv3 .index_reset {

	margin-left: 15px;

	width: 100px;

	height: 35px;

	background-color: #FEC803;

	border: none;

	outline: none;

}



.message_right {

	float: right;

	margin-top: 35px;

	width: 580px;

	height: 280px;

}





/* footer */



.footerDiv {

	float: left;

	width: 100%;

}





/* footerNav */



.footerNav {

	float: left;

	width: 100%;

	height: 50px;

	background-color: #2B7EED;

}



.footerNav ul {

	float: left;

	width: 100%;

	display: flex;

	justify-content: center;

	align-items: center;

}



.footerNav ul li {

	width: 145px;

	height: 50px;

	text-align: center;

}



.footerNav ul li a {

	text-decoration: none;

	color: #FFFFFF;

	font-size: 16px;

	line-height: 50px;

}





/* footerCon */



.footerCon {

	float: left;

	padding: 30px 0 45px 0;

	width: 100%;

	height: 200px;

}



.footerLogo {

	float: left;

	width: 250px;

	height: 200px;

	border-right: 1px solid #CCCCCC;

}



.footerLogo p {

	padding-left: 15px;

	font-size: 14px;

	color: #333333;

	line-height: 45px;

	background: url(../images/footername.png) no-repeat center left;

}



.footLink {

	float: left;

	width: 100%;

}



.footLink div {

	float: left;

	margin-right: 15px;

}



.footLink a {

	margin: 0 5px;

	text-decoration: none;

	font-size: 12px;

	color: #666666;

	line-height: 40px;

}



.footerCode {

	float: left;

	width: 670px;

	height: 200px;

	border-right: 1px solid #CCCCCC;

	display: flex;

	justify-content: space-around;

	align-items: center;

}



.footerCode div {

	width: 175px;

	height: 138px;

}



.footerCode div img {

	width: 138px;

	height: 138px;

}



.footerCode div p {

	float: right;

	margin-top: 18px;

	width: 30px;

	height: 102px;

	background: url(../images/codeIMG.png) no-repeat center;

	font-size: 13px;

	color: #333333;

	writing-mode: vertical-lr;

	/*从左向右 从右向左是 writing-mode: vertical-rl;*/

	writing-mode: tb-lr;

	/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/

	text-align: center;

	line-height: 30px;

	letter-spacing: 2px;

}



.footerTXT {

	float: right;

	width: 260px;

	height: 200px;

	display: flex;

	flex-direction: column;

	justify-content: space-between;

}



.footerTXT p {

	font-size: 16px;

	color: #333333;

}



.footerTXT h1 {

	font-size: 20px;

	color: #333333;

}



.footerTXT span {

	font-size: 14px;

}



.footerCopy {

	float: left;

	width: 100%;

	height: 45px;

	border-top: 1px solid #CCCCCC;

}



.copyLeft {

	float: left;

	width: 950px;

	height: 45px;

	display: flex;

	align-items: center;

	font-size: 12px;

	color: #777777;

}



.copyRight {

	float: right;

	width: 200px;

	height: 45px;

	display: flex;

	flex-direction: row-reverse;

	align-items: center;

	font-size: 12px;

	color: #777777;

}