@media (min-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 970px) {

	/* banner */
	.wrap-banner .indexban-page {
		width: 15%;
	}

	/* index */
	.wrap-body .wrap-content {
		display: block;
	}

	.wrap-body .wrap-content .wrapcont-l {
		width: 85%;
	}

	.wrapcont-l,
	.wrapcont-r {
		margin: 0 auto;
	}
}

@media screen and (max-width: 821px) {

	.cont-left {
		width: 26%;
	}
}

@media screen and (max-width: 768px) {

	/* banner */
	.wrap-banner .indexban-page {
		width: 17%;
	}

	.header-body {
		display: block;
	}

	.header-body .logo img {
		max-width: 100%;
	}

	.nav {
		width: 100%;
	}

	.nav ul {
		justify-content: center;
	}

	.nav ul li {
		line-height: inherit;
	}

	.nav ul li a {
		line-height: inherit;
	}

	.cont-left {
		width: 27%;
	}

	/* about us */
	.cont-left {
		width: 39%;
	}

	.cont-right {
		width: 56%;
	}
}

@media screen and (max-width: 700px) {

	/* banner */
	.wrap-banner .indexban-page {
		width: 18%;
	}

	/* index */
	.header-body {
		display: block;
	}

	.header-body .logo img {
		max-width: 100%;
	}

	.nav {
		width: 100%;
	}

	.nav ul {
		justify-content: center;
	}

	.nav ul li {
		line-height: inherit;
	}

	.nav ul li a {
		line-height: inherit;
	}
}

@media screen and (max-width: 580px) {

	/* banner */
	#header {
		height: 65px;
	}

	.wrap-banner .indexban-page {
		width: 31%;
	}

	.nav {
		display: none;
	}

	.wrap-body .wrap-content .wrapcont-l {
		width: 95%;
	}

	.head-bar {
		display: block !important;
	}

	.menu {
		width: 100%;
	}

	.header-body {
		display: flex;
		align-items: center;
		padding: 0 20px;
	}
	.logo{
		padding-top: 5px;
	}
	/* about us */
	.cont-left {
		width: 100%;
		background: url(../images/left.jpg) repeat;
	}

	.cont-right {
		width: 100%;
		margin-top: 30px;
	}

	.ppb{
		display: block;
	}

	/* products */
	.ppb-cont .pro_wrap li{
		width: 48%;
	}
	/* contact */
	.cact-body .ct-form{
		width: 100%;
	}
}