html, body, title, head, ol, table, tr, td, ul, li, dt, dd, dl, h1, h2, h3, h4, h5, h6, form, input, select, textarea, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, font, span, div{font-family: '思源黑体';}
a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}
.fl {
	float: left;
}
.fr {
	float: right;
}

.cl {
	clear: both;
}

ul,li {
	padding:0;
	margin: 0;
	list-style: none;
}

input,button {
	border:0;
	outline:none;
}

h1,h2,h3 {
}

.word,.product {
	width: 100%;
	padding: 0 10%;
}

header {
	width: 100%;
	padding: 0 10% !important;
	position: absolute;
	top: 0;
}
header nav {
	margin-top: 4%;
}

header li {
	float: left;
	padding: 10px 20px;
	
}

header li a {
	color: #001880;
	font-size: 16px;
	padding-bottom: 10px;	
}
header li a:hover {
	border-bottom: 2px solid #001880;
}

header li .active {
	border-bottom: 2px solid #001880;
}

.banner {
	background: url(../images/banner.jpg) center center no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
}


.banner .ban_img {
	position: absolute;
    top: 45%;
    padding: 0 10%;
}

.about {
	padding: 6% 0;
	float: left;
	width: 100%;
}

.about .title p {
	font-size: 18px;
	color: #999;
	margin-top: 15px;
	margin-left: 10px;
}
.about .content ul {
	margin-top: 5%;
}

.about .content li {
	display: inline-block;
	margin-right: 50px;
}

.about .content li h3 {
	font-size: 85px;
	font-weight: 800;
	background-image: -webkit-gradient(linear,55% 0%, 30% 100%, from(#2EAEE2), to(#62AA46));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	color: #62aa46;
	margin-bottom: 0;
}

.about .content li h3 small {
	font-size: 26px;
	color: #39aec2 !important;
}

.about .content li p {
	font-size: 16px;
}

.about .about_text {
	line-height: 30px;
    padding-right: 10%;
    margin-top: 8%;
}

.about_img img {
	-moz-box-shadow:0px 0px 20px #ddd; 
	-webkit-box-shadow:0px 0px 20px #ddd; 
	box-shadow:0px 0px 20px #ddd;
}

.product {
	padding-top: 5%;
	background: url(../images/b.jpg) bottom no-repeat #fafafa;
	margin-bottom: 5px;
}
.product .title p {
	font-size: 18px;
	color: #999;
	margin-top: 15px;
}
.product ul {
	background: #fff;
	padding: 15px;
	width: 100%;
	margin-top: 3%;
	-moz-box-shadow:0px 0px 20px #ddd; 
	-webkit-box-shadow:0px 0px 20px #ddd; 
	box-shadow:0px 0px 20px #ddd;
}

.product .flag {
	padding: 10% 5% 3.45% 5%;
	background: url(../images/pro.jpg) no-repeat;
}

.product .flag h3 {
	font-size: 32px;
	color: #fff;
	margin: 0;
	margin-bottom: 10px;
}

.product .flag p {
	color: #fff;
	width: 50%;
	line-height: 25px;
	margin-top: 30px;
}

.product .more_a {	
    padding: 8px 20px;
    border: 1px solid #fff;
    border-radius: 10px;
    margin-top: 10%;
}
.product .more_r{position: relative;
    bottom: 300px;}

.product .flag:hover  {
	background: url(../images/proa.jpg) no-repeat;
}

.product .more_a a {
	color: #fff;
}

.product .beef {
	background: #dfccb0;
	padding-top: 2.5%;
}
.product .beef h3 {
	font-size: 30px;
}
.product .beef .beautiful {
	color: #ab8f66;
	font-size: 16px;
	padding-right: 16%;
	padding-bottom: 5%;
}
.product .beef .pic,.product .beef .picc {
	padding-bottom: 5%;
}
.product .beef .more {
	display: inline-block;
    width: 95%;
    height: 390px;
    line-height: 390px;
    text-align: center;
    background: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    top: 10px;
    right: 13px;
	opacity: 0;
	transition: all 1s;
}

.product .milk {
	background: #e6f5f3;
}

.product .paste {
	background: #f9eed0;
}

.product .dry {
	background: #a096cb;
	padding-top: 2.5%;
}
.product .dry .beautiful {
	padding-right: 29%;
	font-size: 16px;
	color: #dad3f5;
}

.product .lamb .beautiful {
	color: #81bc4d;
	padding-right: 24.5%;
}

.product .dry .pic {
	padding-right: 10%;
	margin-top: 5%;
	padding-bottom: 5%;
}

.product .lamb {
	background: #e6f5d9;
}

.product .dry .more {
	display: inline-block;
    width: 97%;
    height: 515px;
    line-height: 515px;
    text-align: center;
    background: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    top: 10px;
    right: 11px;
    opacity: 0;
    transition: all 1s;
}

.product .beef:hover .more,.product .dry:hover .more {
	opacity: 1;
	text-decoration: underline;
}

.join {
	padding: 15% 0;
}

.join .join_more {
	padding: 5% 0 0 25.5%;
}
.join .join_more a {
	color: #fff;
}
.join .join_more a span {
	padding-left: 10px;
}

.env .title {
	background: #fff;
	padding-top: 3.5%;
}

.envir .title p,.news .title p,.cooperation .title p {
	font-size: 18px;
	margin-top: 15px;
	color: #999;
}
.envir ul {
	margin-top: 3%;
}

.envir li {
	display: inline-block;
}
.envir li:nth-child(2){
	margin: 0 2%;
}

.envir li a img {
	width: 100%;
	height: 265px;
}

.envir li a p {
	font-size: 20px;
	padding: 5% 0;
	color: #222;
	margin: 0;
}

.envir li:hover {
	-moz-box-shadow:0px 0px 20px #ddd; 
	-webkit-box-shadow:0px 0px 20px #ddd; 
	box-shadow:0px 0px 20px #ddd;
}

.envir .more,.news .more_b {
	margin-top: 3%;
	border-bottom: 1px solid #f5f5f5;
	padding-bottom: 2%;
}

.envir .more a,.news .more_b a {
	display: inline-block;
	padding: 8px 30px;
	border: 1px solid #222;
	color: #222;
	border-radius: 5px;	
}

.envir .more a:hover,.news .more_b a:hover {
	background: #62AA46;
	border: 1px solid #62AA46;
	color: #fff;
}

.news {
	margin-top: 4%;
}
.news li {
	padding: 0 3%;
	width: 49%;
	display: inline-block;
}
.news li h3 {
	margin-bottom: 20px;
}

.news li .line {
	width: 75px;
	height: 3px;
	background: #222;
	transition: all 1s;
	margin: 20px 0 10px 0;
}

.news .more span {
	padding-left: 20px;
}

.news .more a {
	color: #222;
	padding-right: 20px;
	opacity: 0;
	transition: all 1s;
}

.news li:hover .line {
	width: 100%;
}

.news li:hover a {
	opacity: 1;
}
	
.cooperation {
	padding: 3% 10%;
	background: url(../images/cooperation.jpg) bottom no-repeat;
	width: 100%;
}

.cooperation .picture {
	margin-top: 3%;
	background: #FFF;
	padding: 5%;
	width: 100%
	-moz-box-shadow: 0px 0px 20px #ddd; 
	-webkit-box-shadow: 0px 0px 20px #ddd; 
	box-shadow: 0px 0px 20px #ddd;
}

.cooperation .picture li {
	float: left;
	width: 20%;
	text-align: center;
	border-bottom: 1px solid #f5f5f5;
	border-left: 1px solid #f5f5f5;
	padding-bottom: 50px;
	padding-top: 50px;
}
.cooperation .picture li img {
	height: 65px;
}

.cooperation .picture li:first-child {
	border-left: none;
}
.cooperation .picture li:nth-child(6) {
	border-bottom: none;
	border-left: none;
}

.cooperation .picture li:nth-child(n+6) {
	border-bottom: none;
	padding-top: 50px;
}


footer {
	background: -webkit-gradient(linear,55% 0%, 30% 100%, from(#136277), to(#30652f));
	padding: 3% 10%;
}
footer .fnav {
	margin-top: 40px;
	margin-bottom: 50px;
}

footer .fnav a {
	font-size: 16px;
	color: #fff;
	display: inline-block;
	padding: 0 35px;
}

.fcontact .fconter_text {
	padding: 0 23%;
	margin-top: 40px;
}

.fcontact .fconter_text span {
	color: #fff;
	padding: 5px 10px;
	display: inline-block;
}

.fcontact .fconter_text span a {
	color: #fff;
}


.flex_ma{     position: fixed; z-index: 999;  top: 30vh;  left: 0;}
.flex_ma .ma_tb,.flex_ma .ma_wx{width: 120px;}
.flex_ma .ma_tb_h,.flex_ma .ma_wx_h{display: none;position: absolute;}
.tb:hover .ma_tb_h,.wx:hover .ma_wx_h{display: block;}
.flex_ma p{color:#001d8c;font-weight: bold;}
.fcontact{position: relative;}
.liangzhao{    position: absolute; left: 15%;top: 45%;text-align: center;}

@media screen and (max-width: 1440px) {
	.ban_img img {
		width: 100%;
	}
	.about .content li h3 {
		font-size: 50px;
	}
	.about_img {
		margin-top: 60px;
	}
	.about_img img {
		width: 100%;
	}
	.product .beef h3 {
	    font-size: 23px;
	}
	.product .beef .pic img {
		width: 100%;
	}
	.product .beef .more {
	    width: 93%;
	    height: 380px;
	}
	.product .dry .more {
	    width: 96%;
	    height: 485px;
	}
	.envir li {
	    width: 30.7%;
	}
	.cooperation .title img {
		width: 100%;
	}
	.fcontact .fconter_text {
	    padding: 0 14%;
	}
}
.navigation {
	display: none;
}

@media screen and (max-width: 1440px) {
	.about .content li h3 {
		font-size: 45px;
	}
	.product .beef h3 {
	    font-size: 20px;
	}
	.fcontact .fconter_text {
	    padding: 0 10%;
	}
	.product .beef:nth-child(6) .pic img,.product .beef:nth-child(7) .pic img {
		width: auto;
	}
}
@media screen and (max-width: 800px){
	.about video{ width: 100%;}
  footer{  padding: 3% 4%;}
  footer .fnav{margin-bottom: 80px;}
  footer .fnav a{padding: 0 6px;line-height: 24px;}
  .fcontact .fconter_text{    padding: 0;}
  .liangzhao{left: 50%;margin-left: -43px;top:-70px;}
}





@media screen and (max-width: 500px) {header li .active{color: #fff;    border-bottom: 2px solid #fff;}header li a{color: #fff;}}
@media screen and (max-width: 414px) {
	header .logo {
		width: 150px;
	}
	header .logo img {
		width: 100%;
	}
	header nav {
		display: none;
		background: rgba(255,255,255,0.3);
	    position: absolute;
	    left: 0;
	    top: 90%;
	    z-index: 99;
	}
	header li {
		width: 100%;
	}
	header li .active {
		border-bottom: none;
	}
	.about .title img,.product .title img,.news .title img {
		width: 100%;
	}
	.about .content li h3 {
	    font-size: 25px;
	}
	.about .title p {
		font-size: 16px;
	}
	.about .content li {
	    margin-right: 20px;
	}
	.about_img {
	    margin-top: 20px;
	}
	.product .flag {
		padding-bottom: 20%;
	}
	.product .flag p {
		width: 100%;
		line-height: 20px;
	    margin-top: 12px;
	}
	.product .more_r {
		display: none;
	}
	.product .more_a {
		margin-top: 5px;
	}
	.product .dry .pic img {
		width: 100%;
	}
	.join_img img {
		width: 100%;
	}
	.envir li {
		width: 100%;
	}
	.envir li:nth-child(2) {
	    margin: 0;
	}
	.cooperation .picture li {
		width: 50%;
		border: none;
	}
	.fcontact .text-center {
		display: none;
	}
	.cooperation .picture li img {
		width: 100%;
	}
	.product .beef:nth-child(6),.product .beef:nth-child(7) {
		width: 100% !important;
	}
	.product .beef:nth-child(6) .pic img,.product .beef:nth-child(7) .pic img {
		width: 100%;
	}
	.navigation {
		display: block;
		margin-top: 10%;
	}
}

@media screen and (max-width:375px){
	.about .content li {
	    margin-right: 10px;
	}
	.about .title p,.product .title p,.envir .title p, .news .title p, .cooperation .title p {
	    font-size: 15px;
	}
}



























































//                            _ooOoo_  
//                           o8888888o  
//                           88" . "88  
//                           (| -_- |)  
//                            O\ = /O  
//                        ____/`---'\____  
//                      .   ' \\| |// `.  
//                       / \\||| : |||// \  
//                     / _||||| -:- |||||- \  
//                       | | \\\ - /// | |  
//                     | \_| ''\---/'' | |  
//                      \ .-\__ `-` ___/-. /  
//                   ___`. .' /--.--\ `. . __  
//                ."" '< `.___\_<|>_/___.' >'"".  
//               | | : `- \`.;`\ _ /`;.`/ - ` : | |  
//                 \ \ `-. \_ __\ /__ _/ .-` / /  
//         ======`-.____`-.___\_____/___.-`____.-'======  
//                            `=---='  
//  
//         .............................................  
//                  佛祖保佑             永无BUG 
//          佛曰:  
//                  写字楼里写字间，写字间里程序员；  
//                  程序人员写程序，又拿程序换酒钱。  
//                  酒醒只在网上坐，酒醉还来网下眠；  
//                  酒醉酒醒日复日，网上网下年复年。  
//                  但愿老死电脑间，不愿鞠躬老板前；  
//                  奔驰宝马贵者趣，公交自行程序员。  
//                  别人笑我忒疯癫，我笑自己命太贱；  
//                  不见满街漂亮妹，哪个归得程序员？