@charset "utf-8";
/* CSS Document */

.banner{  height:825px; background: url(../images/banner.jpg) center top no-repeat ;  -webkit-animation-name: fadeIn; animation-name: fadeIn}
.banner_zone{ position: relative;padding-top:185px}
.banner_slogan{position: relative}
.slogan_1{ position: absolute;left:90px;  font-size:38px; color:#535555; text-transform: uppercase;-webkit-animation-name: fadeInLeft; animation-name: fadeInLeft}
.slogan_1 h1{  font-weight: bold; color:#699610; font-size: 46px; }
.slogan_1 h2{margin-left:50px;}
.slogan_1 h3{margin-left:100px; }
.slogan_1 h3 span{font-weight: bold; color:#699610; font-size: 46px}

.ban_about{width:50%; position: absolute; right:0; font-size:13px;-webkit-animation-delay: 0.5s; animation-delay: 0.5s;-webkit-animation-name: fadeIn; animation-name: fadeIn}
.ban_about .ban_btn { text-align: right;padding-right:30px}
.ban_about  p{ line-height: 150%}
.ban_btn  a{color:#ec660c;padding:3px 5px; border:1px solid #ec660c; transition: all 0.5s ease-in-out}
.ban_btn  a:hover{ background: rgba(243,98,0,1.00);color:#fff}
.banner_zone .pro{ position: absolute;right:10px; top:180px;-webkit-animation-delay: 0.5s; animation-delay: 0.5s;-webkit-animation-name: fadeInRight; animation-name: fadeInRight}
.index_pro{padding-top:80px; text-align: center;}
.index_pro h2{-webkit-animation-name: fadeInDown; animation-name: fadeInDown}
.index_content h2{ text-align:center; background: url(../images/index/arrow.png) center top no-repeat;padding-top:40px; font-size:28px;color:#2d970f; font-weight: bold;margin-bottom:30px}
.slider-for{width:680px;margin:0 auto 80px}
.slider-for img{ margin:0 auto}
.index_pro_zone{ background: url(../images/index/pro_bg.png) center top no-repeat; background-size: contain; min-height: 750px;padding-top:80px;-webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-duration: 1s; animation-duration: 1s}

.slider-nav p{ line-height: 130%;color:rgba(50,50,50,1.00);margin-bottom:10px}

.slider-nav div.slick-active .pic { border:1px solid rgba(255,255,255,0.00);}
.slider-nav div.slick-active .pic img{margin:0 auto}
.slider-nav div.slick-current.slick-active .pic{ border: 1px solid #8fc87e}
.slider-nav div.slick-current.slick-active p{color:rgba(59,135,12,1.00)}
.index_about{ display: none;-webkit-animation-name: fadeInUp; animation-name: fadeInUp; text-align: center; line-height: 150%;color:#666}
.ban_btn{margin-top:15px}



@media  (max-width : 1200px) {
	.slogan_1{ left:25px}	
	.ban_about .ban_btn{margin-top:15px}
	
}
@media  (max-width : 1100px) {
.slogan_1{ font-size: 30px;}
.slogan_1 h1 , .slogan_1 h3 span{ font-size: 40px}
	.ban_about{width:45%}
	.banner_zone .pro{top:200px}
}

@media  (max-width : 950px) {
.ban_about{ display: none}
.banner{  height:728px; background: url(../images/banner_s.jpg) left top no-repeat ;}	
.index_about{ display:block}
.banner_zone .pro{top:150px;width:55%;-webkit-animation-delay: 0.2s; animation-delay: 0.2s;}
.slogan_1{ left:auto; right:5%}	
.banner_zone{padding-top:150px}
.index_about{padding:40px 0 10px}
.co_info { font-size: 15px}
	.index_pro{padding-top:50px}
}

@media  (max-width : 798px) {
.banner{  height:650px; background: url(../images/banner_s.jpg) 10% -20%  no-repeat ; background-size: cover}	
.slider-for{width:90%}
}
@media  (max-width : 650px) {
.slogan_1{right:15px;font-size: 20px;}
.slogan_1 h1 , .slogan_1 h3 span{ font-size: 33px}
.banner{  height:550px; }
.banner_zone .pro{top:140px;}
	.banner_zone{padding-top:120px}
	.index_pro_zone{padding-top:50px}
	.slider-for{width:80%;margin-bottom:30px}
	.slick-prev{left:-35px}
	.slick-next{right:-35px}
	.index_pro_zone{min-height:0}
	.slick-dotted.slick-slider{margin-bottom: 50px}
}

@media  (max-width : 580px) {
.banner{  height:450px; }	
.banner_zone .pro{width:60%;top:120px}
	.slogan_1 h2{margin-left:0px}
	.slogan_1 h3{margin-left:0px}
	.slogan_1{right:0}
	
}

@media  (max-width : 480px) {
.banner{  height:400px;  background: url(../images/banner_s.jpg) 15% 0%  no-repeat ; background-size: cover}
.slogan_1{right:0px;font-size: 16px;}
.slogan_1 h1 , .slogan_1 h3 span{ font-size: 28px}
.banner_zone .pro{top:100px;width:65%}
	}
@media  (max-width : 420px) {
.banner_zone .pro{top:120px;width:75%}	
}

@media  (max-width : 380px) {
.banner_zone .pro{top:130px;width:85%}	
	.slogan_1{top:10px}
.slogan_1 h1 , .slogan_1 h3 span{ font-size: 20px}
}