@charset "utf-8";
#wrap{background: #f1f1f1;}
#banner{ width: 100%; min-width: 1200px; height: 5.5rem; min-height: 500px; position: relative;}
#banner .banner-bg{ width: 100%; height: 100%; position: absolute; z-index: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 1;}




#main{	overflow: hidden;	position: relative;	z-index: 1; padding-top: 10px; margin-top: -50px;}
#main .mainBox{padding:0px; background-color: #f1f1f1;}
#main .title{text-align: left; padding: 40px 20px;}
#main .title h1{color: #63b027; font-weight: 400; text-transform: uppercase; font-size: 36px; margin-bottom: 15px;}
#main .title span{ width: 80px; margin: 0 0 0 2px; height: 2px; background: #63b027; display: block;}

#main .list-box{overflow: hidden;}
#main .list{ display: block; width: 31%; margin: 0 1% 25px; overflow: hidden; position: relative; background: #fff; float: left;}
#main .list .pic{ margin-bottom: 0px;}
#main .list .pic img{ width: 90%; max-height: 210px; display: block; margin: 5%; background-size: cover; background-position: center top;}

#main .list .title{ line-height: 1.6em; color: #555; padding: 10px; position: relative; margin: 0 0 10px; height: 75px;}
#main .list .title h2{text-align: center; display: block; width: 100%; font-weight: normal; font-size: 20px; padding-bottom: 5px;}
#main .list .title .p{text-align: center; color: #888;}

#main .list .con{ opacity: 0; line-height: 1.6em; color: #555; padding: 100px 50px; position: absolute; height: 90%; width: 90%; margin: 5%; top: 40%;transition: all 0.3s ease-in-out;}
#main .list .con h2{text-align: center; height: 90px; color: #fff; font-weight: normal; font-size: 28px; padding-bottom: 5px; transition: all 0.2s ease-in-out;}
#main .list .con h2::after{content: ""; display: block; width: 60px; background-color: #fff; height: 2px;margin: 15px auto;}
#main .list:hover .con{top: 0; background: #63B027; opacity: 1; text-align: center;}
#main .list .con .describe{  margin-top: 5px; padding-top: 5px ; border-top: 1px solid #fff; color: #fff;}
#main .list .con .more{width: 160px; height: 40px; line-height: 40px; color: #fff; text-align: center; border: 1px solid #fff; margin: 30px auto 0;transition: all 0.3s ease-in-out;}
#main .list .con .more:hover{color: #63B027; background-color: #fff;}

@media screen and (max-width: 768px) {
	
	#banner{ width: 100%; min-width: 100%; height: 50vw; margin-top: 50px; min-height: 50vw;}
	#banner .banner-bg{ width: 100%; height: 100%; position: absolute; z-index: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 1;}
	
	
	#main{	overflow: hidden;	position: relative;	z-index: 1; margin: 0; padding-top: 0; padding-bottom: 20px;}
	#main .title{text-align: center; margin-bottom: 0px; padding: 20px 0 0;}
	#main .title h1{color: #63b027; font-weight: 400; text-transform: uppercase; font-size: 20px; margin-bottom: 5px;}
	#main .title span{ width: 80px; height: 2px; background: #63b027; display: block; margin: 0 auto;}
	#main .list-box{overflow: hidden; padding: 20px;}
	#main .list{ display: block; width: 100%; margin: 0 0px 20px; overflow: hidden; position: relative; background: #fff; float: none;}
	#main .list .pic{ margin-bottom: 0px;}
	#main .list .pic img{ width: 90%; display: block; margin: 5%;}

	#main .list .title{ line-height: 1.6em; color: #555; padding: 10px; position: relative; margin: -20px 0 0px; height: auto;}
	#main .list .title h2{text-align: center; font-weight: normal; font-size: 18px; padding-bottom: 2px;}
	#main .list .title .p{text-align: center;}

	#main .list .con{ opacity: 0; display: none; line-height: 1.6em; color: #555; padding: 30px; position: absolute; height: 100%; width: 100%; top: 40%;transition: all 0.3s ease-in-out;}
	#main .list .con h2{text-align: left; color: #fff; font-weight: normal; font-size: 24px; padding-bottom: 5px; transition: all 0.2s ease-in-out;}
	#main .list .con .p{text-align: left; color: #fff;}

	#main .list:hover .con{top: 0; background: #FF5A01; opacity: 1;}
	#main .list .con .describe{  margin-top: 30px; padding-top: 30px ; border-top: 1px solid #ffaf85; color: #fff;}	
	
}