@charset "utf-8";
#wrap{background: #f1f1f1;}
#header .menu ul li.nav3{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%; 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.nav3{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;}
	#main .box .list{ display: block; width: 50%; position: relative; overflow: hidden; background: #fff; margin: 0 ; float: left;}
	#main .box .list .pic{position: relative; top:0}
	#main .box .list img{ display: block; width: 100%; position: relative; z-index: 1;}
	#main .box .list div{ position: absolute; display: flex; justify-content: center; align-content: center; align-items: center; left: 0; z-index: 2; top: 100%; height: 100%; width: 100%; background: rgba(0,0,0,0.5);	transition: all 0.3s ease-in-out; opacity: .85;}
	#main .box .list:hover div{ top: 0;}
	#main .box .list h2{padding: 12px 0; color: #fff; font-size:24px; text-align: center;}
	
}