﻿.title,.title2{text-align:center;padding: 20px 0;}
.title{background:url(../images/index/title_bg1.png) no-repeat center}
.title2{background:url(../images/index/title_bg2.png) no-repeat center}
.title strong,.title2 strong,.title4 strong{font-size:33px;font-weight:normal;line-height:35px}
.title2 strong,.title4 strong{color:#fff}
.title p,.title2 p,.title4 p{font-size:25px;line-height:25px}
.title p{color:#4BB344}
.title2 p,.title4 p{color:#ccc}
.title3{height:100px;text-align:center;line-height:100px}
.title4{padding:33px 0 40px 0;float:left;background:url(../images/index/title_bg3.png) no-repeat center left}
#product{padding:45px 0 43px 0;background:url(../images/index/pro_bg.jpg) center}
.iprolist{text-align:center;margin:24px auto 0}
.iprolist li{font-size:12px;line-height:58px;width: 14.2%;border:1px solid #959594;float:left;box-sizing: border-box;margin-right: -1px;}
.iprolist li a{display:block;font-size:16px}
.iprolist li a:hover{color:#fff;display:block;background:#4BB344}
.iprolist li:last-child{margin-right:0}
.iproduct{margin:33px 0 0 0}
.iproduct li{width: 25%;float:left;box-sizing:border-box;padding: 0 10px 29px;}
.iproduct li div{position:absolute;width:100%;height:100%;top:0;text-align:center;line-height:200px;transform:scale(0);transition:.5s all;background:rgba(0,0,0,.5)}
.iproduct a:hover div{transform:scale(1)}
.iproduct div img{vertical-align:middle}
.iproduct>li>a{display:block;overflow:hidden;position:relative;height:0;padding: 50% 0;}
.iproduct>li>a>img{width:100%;display:block;transition:.5s all;position:absolute;top:0;left:0;height:100%}
.iproduct>li p{position:absolute;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;width:82%;line-height:3;left:9%;bottom:8%;border:2px solid #fff}
.iproduct>li span{display:block;width:98%;height:98%;margin:1%;background:#fff}
#about{overflow:hidden;padding: 30px 0 40px 0;background:url(../images/index/about_bg.jpg) center 0;}
.aboutL{margin: 35px 35px 0 0;width:460px;}
.aboutL img{display:block;max-width:100%;border:1px solid #fff;margin-bottom:9px}
.about1{}
.about2{float:left}
.about3{float:right}
.aboutR{width: 56%;margin: 35px 0 0 0;font-size:20px;line-height:30px;border-radius:10px;}
.aboutR>p{font-size:18px;padding-left:30px;line-height:26px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 14;overflow:hidden;color:#fff;}
.aboutR a{font-size:20px;display:block;width:118px;line-height:38px;text-align:center;color:#fff;margin:51px 0 0 32px;transition:.5s all;transform:translateZ(0);border:1px solid #fff}
.aboutR a:before{position:absolute;top:0;left:0;display:block;content:' ';width:0;height:100%;background:#333;z-index:-1;transition:.5s all}
.aboutR a:hover:before{width:100%}
.aboutR a:hover{background:#333}
#why{padding:60px 0 76px 0;background:url(../images/index/ad_bg1.jpg) no-repeat center 55px}
#why dt{font-size:24px;border-bottom:2px solid #57B84F;display:inline-block;color:#57B84F;margin-bottom:18px}
#why dd{width:440px;line-height:23px;color:#666}
.why1{margin:126px 0 60px 229px}
.why2{margin:0px 0 0 229px}
.why3{margin:60px 0 0 682px}
.why4{margin:60px 0 0 682px}
#icontact{padding:19px 0 37px 0;background:url(../images/index/contact_bg.jpg) center}
#icontact dl{float:left;margin:110px 0 0 0;width:400px;color:#fff}
#icontact dl a{color:#fff}
#icontact dt{font-size:20px;line-height:50px}
#icontact dd{font-size:17px;line-height:36px}
.icontactR{float:right;margin:32px 71px 0 0}
.icontactR img{}
#news{padding:50px 0 70px 0}
.slideBox{width:525px;height:368px;overflow:hidden;position:relative;margin:51px 0 0 17px;border:1px solid #c5c5c5;float:left}
.slideBox .hd{height:15px;overflow:hidden;position:absolute;right:5px;bottom:5px;z-index:1}
.slideBox .hd ul{overflow:hidden;zoom:1;float:left}
.slideBox .hd ul li{float:left;margin-right:5px;width:15px;height:15px;line-height:14px;text-align:center;background:#AAAAAA;cursor:pointer;text-indent:100px}
.slideBox .hd ul li.on{background:#fff;color:#fff}
.slideBox .bd{position:relative;height:100%;z-index:0}
.slideBox .bd li{zoom:1;vertical-align:middle}
.slideBox .bd img{width:525px;height:368px;display:block}
.news{width:585px;float:right;margin:46px 0 0 0}
.news li{line-height:54px;height:54px;border-bottom:1px solid #ccc}
.news a{float:left}
.news span{display:block;float:right}
.news p{display:none}
.news li:first-child{height:auto;line-height:unset;border:0}
.news li:first-child a{font-size:22px;float:none;line-height:40px}
.news li:first-child span{float:none;line-height:27px;color:#666}
.news li:first-child p{display:block;line-height:27px;font-size:14px;color:#444}
#link{line-height:30px;padding:4px 0;background:#eee}
@media only screen and (min-width:100px) and (max-width:640px){
	#icontact{
    padding: 20px 10px 30px;
}
	.title strong, .title2 strong, .title4 strong{
    font-size: 24px;
}
.title p, .title2 p, .title4 p{
    font-size: 20px;
}
    .iproduct li{width:46%;padding:0;margin:1% 2%}
	.aboutR>p{color:#4BB344;padding:0 10px;font-size: 14px;-webkit-line-clamp: 5;}
	.news li{float:none!important;width:100%}
	.aboutL,.aboutR,.newsl,.newsr{width:100%!important;box-sizing: border-box;}
	.aboutR{font-size:16px;margin:0}
	#gg,.slideBox{display:none;}
	#footer .box1200,.news img{display:none}
	.news dl{float:none;width:100%}
	.iprolist li{width:46%;margin:1% 2%;box-sizing:border-box}
	#product>ul>li>p{line-height:30px}
	#product>ul>li>p a{font-size:15px}
	#case ul li strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;font-size:20px}
	#case ul li p{font-size:15px;line-height:30px;width:100%;margin:0 auto;position:unset}
	#about,#case{padding:0}
	#about{background:0 0;border:5px solid #4BB344;box-sizing: border-box;margin: 10px 10px 30px;}
	.iprolist{margin:0;width:100%}
	.newsl{padding:20px 0}
	#product{margin:0;padding:0}
	#footer ul,.title:before{display:none}
	#footer p{text-align:center;padding:0 10px;max-width:100%}
	.ljzx,.lxwm{width:40%}
	#product dt{float:none;margin:20px auto}
	#product dd{width:33.3%}
	#news{padding:10px;background:none}
	#case .title{margin:20px auto}
	.news{width:100%;margin: 0;}
	#icontact dl{margin:0;width:auto}
	.aboutR a{background:#5EB959;margin: 20px auto;}
	.title2 strong,.title4 strong{color:#666}
}
