@charset "utf-8";
#wrap{background: #f1f1f1;}
#header .menu ul li.nav4{color: #fff; background: #bc292f; }
#banner{ width: 100%; min-width: 1200px; height: 5rem; margin-top: 0; min-height: 500px; position: relative;}
#main{	position: relative; z-index: 1;}
#main .box{padding: .1rem 0; line-height: 1.8em; margin: 0 -15px; overflow: hidden;}
#main .box .list{ display: block; width: 370px; position: relative; overflow: hidden; margin: 0 15px 30px; float: left;}
#main .box .list .pic{position: relative; top:0}
#main .box .list img{ display: block; width: 100%; height:370px; position: relative; z-index: 1;}
#main .box .list div{ position: relative; display: flex; justify-content: center; align-content: center; align-items: center; }
#main .box .list h2{padding: 12px 0; color: #000; font-size:18px; text-align: center;}

@media screen and (max-width: 768px) {
	
	#header .menu ul li.nav4{color: #bc292f; border-top: 0; background:none; }
	#banner{ width: 100%; min-width: 100%; height: 50vw; margin-top: 50px; min-height: 50vw; position: relative;}
	
	#main{	position: relative; z-index: 1; }
	#main .box{padding: 0; line-height: 1.8em; margin: 0 ; overflow: hidden; padding: 10px;}
	#main .box .list{ display: block; width: 50%; position: relative; overflow: hidden; background: #f1f1f1; margin: 0 ; float: left; padding: 5px; box-sizing: border-box;}
	#main .box .list .pic{position: relative; top:0}
	#main .box .list img{ display: block; width: 100%; height: 50vw; position: relative; z-index: 1;}
	#main .box .list div{ position: relative; display: flex; justify-content: center; align-content: center; align-items: center; transition: all 0.3s ease-in-out; opacity: .85;}
	#main .box .list:hover div{ top: 0;}
	#main .box .list h2{padding: 10px 0; color: #000; font-size:12px; text-align: center;}
	
}