@charset "utf-8";

@media (max-width:575px) {
	.header{
		position: relative;
	}
	
	.header nav input{
		display: block;
		opacity: 0;
	}
	.header nav ul{
		display: none;
		position: absolute;
		width: 100%;
		top: 66px;
		z-index: 99;
		background-color: #fff;
	}
	
	.header nav ul li{
		padding: 10px 0px 10px 30px;
		border-top: 1px solid #F9EFEF;
	}
	
	.header nav ul a{
		float: none;
		margin: 0px;
		display: inline-block;
		width: 100%;
		/* padding-left: 10px; */
	}
	.header .menu{
		display: block;
		top: 18px;
		cursor: pointer;
	}
	.mobile_title{
		position: absolute;
		top: 40%;
		bottom: 0px;
		left: 42%;
		right: 0px;
		margin: auto;
		font-size: 16px;
		font-weight: 600;
		color: #64BE5F;
		display: block;
	}
	
	.swiper{
		height: auto !important;
	}
	
	#togglebox:checked ~ ul{
		display: block;
	}
	
	#banner{
		height: auto !important;
	}
	
	#four ul{
		display: flex;
		width: 100%;
		padding: 10px 0px !important;
		justify-content: space-around;
		height: auto;
	}
	
	#four ul>li{
		width: 45% !important;
		float: none;
		margin-right: 0px;
	}
	
	#wind .text{
		margin-top: 0px;
		height: auto;
	}
	
	#wind .text>p,
	#wind .text>h2,
	#wind .text>h3{
		width: 95% !important;
		margin: 10px auto;
		/* padding: 0px 10px; */
		line-height: 30px;
		font-size: 14px;
	}
	
	#wind .text>h2{
		font-size: 18px;
		font-weight: 400;
		margin-bottom: 20px;
	}
	
	#wind .wind_main{
		display: flex;
		width: 100%;
		height: auto;
		flex-direction: column;
	}
	
	#wind .wind_main div{
		float: none !important;
	}
	
	#wind .wind_left{
		width: 100% !important;
	}
	
	#wind .wind_main div:last-child{
		width: 95% !important;
		margin: 0px auto;
	}
	
	#wind .wind_main div:last-child img{
		width: 100%;
		margin: 0px auto;
	}
	
	#picture{
		width: 95%;
		margin: auto;
	}
	
	#picture img{
		margin: 10px 0px;
	}
	
	#case .case_top h2{
		font-size: 18px;
		font-weight: 400;
		padding: 0px 10px;
		width: auto;
	}
	
	#case ul{
		display: flex;
		width: 100%;
		height: auto;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	#case ul li{
		float: none;
		margin-right: 0px;
		width: 45% !important;
		margin-bottom: 10px !important;
	}
	
	#case ul li>p,
	#case ul li>h3{
		width: 100%;
		height: auto;
	}
	
	#two .two_bg{
		display: none;
	}
	
	#two .two_main{
		width: 100%;
		height: auto;
		margin-top: 0px;
	}
	
	.two_main ul{
		display: flex;
		flex-wrap: wrap;
		width: 100% !important;
		height: auto !important;
		margin: 0px !important;
	}
	
	.two_main>ul>li{
		float: none;
		margin: 30px 60px !important;
	}
	
	#about .about_main{
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
	}
	
	#about .about_main>div{
		margin-top: 0px;
		float: none !important;
		width: 100%;
		height: auto;
	}
	
	#about .about_main div:first-child img{
		margin-right: 0px;
		width: 95%;
		/* margin: 0px auto !important; */
		padding: 0px 10px;
	}
	
	.about_main>.about_right>.text{
		margin-top: 0px !important;
		float: none !important;
		height: auto !important;
		width: 95%;
		margin: auto;
	}
	
	.about_main .text h2,
	.about_main .text h3,
	.about_main .text p{
		width: 100% !important;
		margin: 10px 0px !important;
		line-height: 30px;
		font-size: 14px !important;
	}
	
	.about_main .text h2{
		font-size: 18px !important;
	}
	
	.about_main .text h3{
		width: 45% !important;
		/* margin: 0px; */
	}
	
	#footer .container{
		height: auto;
	}
	
	#footer ul{
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 20px 0px;
	}
	
	#footer ul li{
		width: 25%;
	}
	
	#footer ul li a{
		float: none;
		margin: 0px;
		display: inline-block;
		width: 100%;
		padding: 5px 0px;
		text-align: center;
		font-size: 14px;
	}
}

@media (max-width:992px) {
	#four ul{
		display: flex;
		width: 100%;
		justify-content: space-around;
		padding: 60px 0px;
	}
	#four ul li{
		float: none;
		margin-left: 0px;
		width: 23%;
	}
	
	#wind .wind_main{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.wind_main div{
		float: none !important;
	}
	#wind .wind_left{
		width: 55%;
	}
	#wind .text>p,
	#wind .text>h2,
	#wind .text>h3{
		width: 100% !important;
	}
	#wind .wind_main div:last-child img{
		margin-left: 0px;
	}
	
	#case ul{
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: auto;
	}
	#case ul li{
		float: none;
		width: 23%;
		margin-right: 0px;
	}

	#case li h3,
	#case li p{
		width: 100% !important;
	}
	
	#two .two_main{
		width: 100%;
	}
	
	#two .two_main ul{
		width: 100% !important;
		display: flex;
		justify-content: space-around;
	}
	#two .two_main ul li{
		margin: 0px;
	}
	
	#about .about_main{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	#about .about_main div{
		float: none;
	}
	#about .about_main div:first-child img{
		margin-right: 0px;
	}
	#about .about_right{
		width: 45%;
	}
	#about .text p,
	#about .text h2{
		width: 100%;
	}
	
}

/* @media (max-width:575px){
	.header{
		padding: 25px 0;
	}
	.menu{
		display: block;
		cursor: pointer;
	}
	nav>ul{
		display: none;
	}
	nav input[type="checkbox"]:checked~ul{
		display: block;
	}
	nav ul li{
		width: 100%;
		display: inline-block;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	nav ul li a{
		display: block;
		margin: 10px 0;
		

	}
	
}
@media (min-width:576px){
	nav>ul li a{
		font-size: 1em;
	}
	nav>ul li{
		margin: 0 10px;
	}
}
@media (min-width:768px){
	.header{
		padding: 24px 0;
	}
	
	nav>ul li {
		margin: 0 20px;
	}
	nav>ul li a{
		font-size: 1.1em;
	}
}
@media (min-width:992px){
	nav>ul li{
		margin: 0 35px;
	}
	nav>ul li a{
		font-size: 1.25em;
	}
}
@media (min-width:1200px){
	nav>ul li{
		margin: 0 40px;
	}
} */