@charset "utf-8";
@media screen and (max-width:1380px){
	.wrap{
		width: 1100px;
	}
	.max-tit{
		top: 49%;
	}
		.max-tit p{
			font-size: 40px;
		}
	.page-btn{
		top: 60%;
	}
		.page-btn a{
			font-size: 26px;
		}
	.paymentbox li{
		width: 230px;
	}
	.projectbox{
		width: 699px;
	}
		.projectbox li{
			width: 200px;
			height: 119px;
		}
	.active .paymentbox li.wx{
		right: 285px;
	}
	.workbox{
		padding-right: 178px;
		padding-left: 178px;
		padding-bottom: 69px;
	}
	.active .erpwork{
		width: 378px;
		height: 346px;
	}
		.active .erpwork img,.paymentbox li img{
			width: 100%;
		}
	.active .btc,.active .btb{
		width: 178px;
	}
	.platform{
		width: 770px;
		height: 450px;
	}
	.active .pc-case{
		width: 770px;
		height: 450px;
	}
		.active .pc-case img,.active .phone-case img,.active .case-one img,.active .case-two img{
			width: 100%;
		}

	.active .phone-case{
		width: 150px;
	}
	.modul-box li{
		width: 220px;
		height: 318px;
	}
		.item{
			height: 318px;
		}
		.reflection{
			width: 220px;
		}
	.active .case-one,.active .case-two{
		width: 670px;
	}
	.case-two{
		left: 220px;
	}
	.titbox .tit, .l-titbox .tit{
		font-size: 34px;
	}
	.btn-fa{
		margin-left: -60px;
	}
	.btn-ota{
		margin-right: -60px;
	}
	.ninewrap{
		padding:0 50px;
	}

}
@media screen and (max-width:1200px){
	.wrap{
		width:80%;
	}
	.minlogo img{
		width: 74px;
	}
	.max-tit{
		top: 43%;
	}
	.max-tit p{
		font-size: 32px;
	}

		.max-tit i{
			height: 40px;
			background-size: contain;
		}
		.ytd{
			width: 96px;
		}
		.ott{
			width: 149px;
		}

	.page-btn a{
		height: 45px;
		line-height: 45px;
		padding:0 10px;
		font-size: 22px;
	}
	.projectbox{
		width: 480px;
		top: 35%;
	}
	.projectbox li{
		width: 143px;
		height: 85px;
		margin-left: 15px;
		margin-bottom: 15px;
	}
	.active .erpwork{
		width: 290px;
		height: 265px;
	}
	.active .btc, .active .btb{
		width: 136px;
	}
	.workbox{
		padding-right: 136px;
		padding-left: 136px;
		padding-bottom: 50px;
		top: 26%;
	}
	.platform,.active .pc-case,.pc-case{
		width: 600px;
		height: 351px;
	}
	.active .phone-case{
		width: 100px;
		left:0;
	}
	.ota-case{
		top: 39%;
	}
	.active .case-one, .active .case-two{
		width: 500px;
	}
	.yuan{
		width: 200px;
		height: 200px;
		background-size: contain;
		margin-left: -100px;
		margin-top:-100px;
	}
	.state h2{
		font-size: 28px;
	}
	.titbox .tit, .l-titbox .tit{
		font-size: 30px;
	}
	.titbox h2, .l-titbox h2{
		font-size: 26px;
	}
	.ninewrap{
		padding:0;
	}
	.ninetit{
		height: 45px;
		background-size: contain;
	}
		.nineul li{
			width: 264px;
			height: 60px;
			line-height: 60px;
			font-size: 20px;
			margin-right: 15px;
			margin-bottom: 15px;
		}
			.nineul li span{
				font-size: 28px;
				width: 54px;
			}
			.nineul li a{
				padding-left: 54px;
			}
}
@media screen and (max-width:1080px){
	.wrap{
		width:90%;
	}
	.btn-fa{
		margin-left: -90px;
	}
	.btn-ota{
		margin-right: -90px;
	}
	.nineul li{
		height: 40px;
		line-height: 40px;
	}
		.nineul li span{
			font-size: 26px;
		}
}
@media screen and (max-width: 768px){
	img{width: 100%;}
	.slide-bar{
		display: none;
	}
	.wrap{
		width:94%;
	}
	.headtop{
		top: 20px;
		height: auto;
	}
	.logo img{
		height: 68px;
		width: auto;
	}
	.menu img{
		height: 20px;
		width: auto;
	}
	.progressbox{
		display: none;
	}
	.down{
		display: none;
	}
	.max-tit p{
		font-size: 20px;
		line-height: 30px;
	}
		.max-tit i{
			height: 28px;
			margin-right:8px;
		}
		.ott{
			width: 89px;
		}
		.ytd{
			width: 65px;
		}
	.page-btn{
		top: 57%;
	}
		.page-btn a{
			height: 38px;
			line-height: 38px;
			font-size: 14px;
			border:1px solid #fff;
		}
	.titbox,.l-titbox{
		top: 17%;
	}
		.titbox .tit, .l-titbox .tit{
			font-size: 22px;
			height: 40px;
			line-height: 40px;
		}
		.titbox h2, .l-titbox h2{
			font-size: 16px;
			height: 28px;
			line-height: 28px;
			top: 40px;
		}
		.titbox .info, .l-titbox .info{
			top: 65px;
			line-height: 24px;
		}
	.projectbox{
		width: 100%;
		top:50%;
		right: -108%;
	}
		.projectbox li{
			width: 32%;
			margin-left:0;
			height: auto;
			margin-bottom: 10px;
			margin-right: 2%;
		}
		.projectbox li:nth-child(3n){
			margin-right: 0;
		}
	.paymentbox{
		width: 100%;
		height: 246px;
		top: 47%;
	}
		.paymentbox li{
			width:45%;
		}
		.active .paymentbox li.wx{
			right: 55%;
		}
		.active .paymentbox li.zfb{
			right: 4%;
		}
	.btb,.btc{
		top: 32px;
	}
	.active .erpwork,.erpwork{
		width: 100%;
		height:auto;
	}
	.active .btc, .active .btb,.btc,.btb{
		width:20%;
		top: 40px;
	}

	.pc-case{
		width: 100%;
		right: -500px;
	}
	.workbox{
		padding-top: 40px;
		padding-left: 80px;
		padding-right:80px;
		padding-bottom: 45px;
		top: 38%;
	}
	.workbody{
		margin-bottom: 0;
	}
	.platform{
		top: 45%;
	}
	.platform, .active .pc-case{
		width: 100%;
		height: 187px;
	}
	.phone-case{
		bottom: -27px;
	}
	.phone-case{
		width: 65px;
	}
	.active .phone-case{
		width: 65px;
		bottom: -27px;
	}
	.modul-box{
		top: 50%;
		margin-left: 0px;
		padding-left: 0;
		width: 1000px;
	}
		.modul-box li{
			width: 100px;
			height: 123px;
			margin-right:-50px;
		}
		.item{
			height: 123px;
		}
		.reflection{
			width:100px;
			height: 60px;
		}
		.overlay{
			width:100px;
			height: 30px;
			bottom: 30px;
		}
		.pic-down{
			top: 10px;
		}
		.modul-box li .reflection{
			background-size: 100%;
		}
		.modul-box li:hover, .modul-box li.on{
			margin-right: 0;
		    perspective: 500px;
		    -webkit-perspective:500px;
		}
	.ota-case{
		left:0;
		top: 40%;
	}
	.case-two{
		left: 85px;
	}
	.active .case-one, .active .case-two{
		width: 310px;
	}

	.yuan{
		width: 100px;
		height: 100px;
		margin-left: -50px;
		margin-top: -50px;
	}
	.state h2{
		font-size: 16px;
		height: 25px;
		line-height: 25px;
		margin-bottom: 5px;
	}
	.state h3{
		height: 18px;
		line-height: 18px;
		font-size: 14px;
	}
	.state-l{
		left: -115px;
		top:-100px;
	}
	.state-b{
		left: -115px;
		bottom: -100px;
	}
	.state-t{
		right: -115px;
		top:-100px;
	}
	.state-r{
		right: -115px;
		bottom: -100px;
	}
	.state span{
		font-size: 16px;
		width: 100px;
		height: 32px;
		line-height: 32px;
	}
	.fouredges li a{
		display: block;
		height: 100%;
		overflow: hidden;
	}
	.fouredges li a img{
		display: none;
	}
	.btn-fa{
		margin-left: -85px;
	}
	.btn-ota{
		margin-right: -85px;
	}
	.ninewrap{
		margin-top: 0;
		padding-top:110px;
	}
		.ninetit{
			height: 30px;

		}
		.nineul{
			margin-top: 10px;
		}
		.nineul li{
			font-size: 14px;
			width: 49%;
			margin-right: 2%;
			margin-bottom: 8px;
			height: 35px;
			line-height: 35px;
		}
		.nineul li:nth-child(even){
			margin-right: 0;
		}
			.nineul li a{
				padding-left: 30px;
			}
			.nineul li span{
				width: 30px;
				font-size: 18px;
			}
		.ninewrap .wxcode span{
			width: 50%;
			margin-right: 0;
		}
		.ninewrap .wxcode span img{
			width: auto;
		}
	.menu a{
		font-size: 15px;
	}
	.modulwrap{
		width: 100%;
		height: 100%;
		margin-top: 0;
	}
		.modul-body{
		     overflow: auto; 
		    -webkit-overflow-scrolling: touch;
		}
	.phonepage{display: block!important;}
	.pcpage{display: none!important;}
	.loading img{
		width: auto;
	}
}
@media screen and (max-width: 450px){
	.ninetit{
		height: 25px;
	}
}
@media screen and (max-width: 360px){
	.modul-box li{width: 95px;}
}
@media screen and (max-width: 320px){
	.page-btn a{
		height: 34px;
		line-height: 34px;
		padding:0 8px;
	}

}