@charset "gb2312";
/* CSS Document */

@media (max-width:1199px){
	#logo img{  width:320px; /* height:53px; */
	}
}


@media (max-width:990px){
    .mobile-hidden{ display:none;
	}
    .banner{ display:none;/*隐藏电脑版 首页大图*/
	}

	/*隐藏电脑版宽屏元素*/
	nav{ display:none;
	}
	#top_blank{ height:108px;
    }
	.dock{ display:none;/*隐藏 右侧浮动qq*/
	}
		
	/* 菜单按钮显示*/
	.menu-btn{ float:right; margin-right:16px;
	}
	
	
	/* 手机版导航2*/
.xn_mn_2_wrap{/*position: absolute;*/ position:fixed; left: 0;top:0;z-index: 9999; width: 100%;}
.xn_mn_2_nav{/*position: absolute;*/ position:fixed; right: 6px;top:8px;width:85%;height:auto;z-index: 2;overflow: hidden;margin-left: 10.2%;}
.xn_mn_2_box{width: 50px;height:50px; background: url(/images/nav_m.png) no-repeat center;background-size: 23px 17px;font-size: 0;z-index:10001;
 margin-top:8px; /* margin-right:6px;  float: right;*/ position:fixed; left:calc(100vw - 56px); z-index: 9999;
}
/* top.asp中 xn_mn_2_box换了位置*/

.xn_mn_2_nav_inner{width:85%;position:fixed; right:-85%;height: 100%;overflow: hidden;background: #fff;top: 0;text-align:center;z-index: 9999;padding-top: 25px;}
.xn_mn_2_nav_inner>ul{}
.xn_mn_2_nav_inner>ul>li{width: 100%;text-align: left;height:50px;line-height:50px;color: #959595;}
.xn_mn_2_nav_inner>ul>li>a{color: #959595;font-size: 16px;display: block;width:90%;padding-left:10%;height:50px;border-bottom: 1px solid #DBDBDB; text-decoration:none;}
.xn_mn_2_nav_inner>ul>li.nav_one_curr>a,.index_body .xn_mn_2_nav>ul>li.nav_home_curr>a{color: #005831;}
.xn_mn_2_nav_inner>ul>li.active>a{color: #005831;}
.xn_mn_2_nav_ver{margin-top:10px; color: #959595;font-size: 14px;height:50px;line-height:50px;text-align:left;padding-left:10%;}
.xn_mn_2_nav_ver a{color: #959595;margin:0 10px;}
.xn_mn_2_box_close{width:100%;position:fixed;right: 0;top:0;z-index:1000;height:100%;display: none;background: rgba(0,0,0,0.3);}
	
.xn_mn_2_nav_inner>ul>li.active2>a{color: #005831; border-bottom: 1px solid #005831;}
	
.xn_mn_2_nav_inner>ul>ul{ display:none;
}
.xn_mn_2_nav_inner>ul>ul li{ height:40px; line-height:40px; font-size:14px; width:90%;padding-left:10%; border-bottom:#f2f2f2 solid 1px; text-align:left;
}
.xn_mn_2_nav_inner>ul>ul li a{ color: #959595;
}
.xn_mn_2_nav_inner>ul>ul li a::before {
    content: "-"; color: #005831; margin-right: 8px; 
}
.xn_mn_2_nav_inner>ul>ul li:last-child{ border-bottom:none;
}
.xn_mn_2_nav_inner>ul>ul li.active3{ border-bottom: 1px solid #DBDBDB;
}

	#head{ width:100%;
	}
	#wrap{ width:100%; padding:10px; box-sizing:border-box;
	}
	
	#lanm_content img{ width:100%;
	}

    /*手机版 首页大图，电脑版也可以用，本站电脑版用其它的*/
	.myBanner{ position:relative;}
	.myBanner a{ display: block; font-size: 0; text-align: center;}
	.myBanner a img{ width: 100%;}
	.myBanner .swiper-pagination{ position: absolute; left: 0; bottom: 20px; z-index: 1; width: 100%; font-size: 0; text-align: center;}
	.myBanner .swiper-pagination span{ margin: 0 5px; width: 10px; height: 10px; background: #fff; opacity: 1;}
	.myBanner .swiper-pagination span.swiper-pagination-bullet-active{ background: #9fc43e;}


    /* 产品分类 部分*/
	#lanm_left .lanm_t{ position: relative; padding: 0 15px; font-size: 18px; line-height: 50px; }
	#lanm_left .lanm_t:before{ content: ""; position: absolute; right:15px; top: 50%; z-index: 1; margin-top: -6px; width: 0; height: 0; border-top:solid 6px transparent; border-bottom:solid 6px transparent; border-left:solid 8px #fff; transition: all 0.3s; }
	#lanm_left .lanm_t.active:before{ transform: rotate(90deg); }	
	
	footer{ height:auto; background:#005831; margin-top:20px; padding-top:6px;
	}
	#foot{ margin:0 auto; 
	}
	#foot a{ font-size:14px; color:#FFF;
	} 
	#foot a:hover{color:#77b0fc;
	} 
	#foot1{  margin-left:10px; margin-right:10px; font-size:14px; color:#fff; margin-bottom:10px;
	} 
		
	#foot1 ul li{ width:33.3%; float:left; padding-right:10px; padding-left:10px; box-sizing:border-box; text-align:center; line-height:normal;
	}
	#foot1 ul li img{ display:block;  max-width:120px; margin:0 auto;
	}
	#foot1 ul li div{ height:20px; line-height:20px; font-size:13px;
	}

	
	#foot2{ width:100%; height:auto; padding:0 10px; box-sizing:border-box; margin-top:10px;
	}
	#foot2 ul li{ width:100%; height:30px; 
	}
	#foot2 ul li img{ width:30px; height:30px; float:left; display:block;
	}
	#foot2 ul li p{  height:30px; float:left; line-height:30px; font-size:14px;display:block; color:#fff; padding:0; margin:0;
	}
	#foot2 ul li p#foot_addr{background:url(/images/f1.jpg) no-repeat; background-size:30px 30px; padding-left:30px; overflow:hidden;
	}
	#copyright{ height:50px; line-height:25px; text-align:center; color:#fff; clear:both; background:#09652f; padding-left:0 10px; font-size:10px;
	}
	#copyright span{ display:block; margin:0 auto; vertical-align:middle;
	}
	#copyright span a,#copyright img{ vertical-align:middle;
	}
	#copyright img{ width:12px; height:12px;
	}
	.foot_t{ line-height:40px; height:40px; margin-bottom:12px; border-bottom:#fff solid 1px; font-size:18px; color:#fff; font-weight:bold;
	}
	
	.menu-box{ display: none; position:fixed; top: 80px; right: 0; z-index:1000001; width: 120px; }
	.menu-box ul li{ margin-bottom:1px;}
	.menu-box ul li a{ display: block; font-size: 14px; color: #333; text-align:center; line-height:40px; background:rgba(255,255,255,0.8); }
	.menu-box ul li.active a{ color: #fff; background: #005831; }
	.menu-btn{ position: relative; top: 46px; width: 40px; }
	.menu-btn b{ display: block; height:3px; background: #005831;}
	.menu-btn b:nth-child(2){ margin:4px 0; }
	.menu-btn.active b:nth-child(1){ transform:rotate(45deg) translate(0,10px); }
	.menu-btn.active b:nth-child(2){ opacity: 0; }
	.menu-btn.active b:nth-child(3){ transform:rotate(-45deg) translate(0,-10px); }
	
	
	
	/* 手机版底部start*/
	#tabBar ul,#tabBar li{ list-style:none; padding:0; margin:0;
	}
	#tabBar img{ vertical-align:middle;
	}
	#tabBar .pull-left{ float:left;
	}
	#tabBar .text-center{ text-align:center;
	}
	#tabBar{ position: fixed; right:20px; bottom:20px; z-index: 99; width:50px; height: 50px;}
	#tabBar.active{ width: calc(100% - 40px); animation: tabBarAnimation 3s 1s infinite linear; -webkit-animation: tabBarAnimation 3s 1s infinite linear; -moz-animation: tabBarAnimation 3s 1s infinite linear; -o-animation: tabBarAnimation 3s 1s infinite linear;  }
	#tabBar .clickbtn{ position: absolute; right: 0; bottom: 0; z-index: 2; width:50px; height:50px; font-size: 0; line-height: 50px; background: rgba(255,255,255,0.8); border-radius: 50%; }
	#tabBar .clickbtn span{ display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; }
	#tabBar .clickbtn img{ width: 22px; }
	#tabBar .clickbtn.on{ animation:clickbtnAnimation 10s 0s infinite linear; -moz-animation:clickbtnAnimation 10s 0s infinite linear; -webkit-animation:clickbtnAnimation 10s 0s infinite linear; -o-animation:clickbtnAnimation 10s 0s infinite linear; box-shadow: 0 3px 5px rgba(0,0,0,0.5); }
	#tabBar .clickbtn.on:before{ content: ""; position: absolute; left: 0; bottom: -5px; z-index: 1; width: 20px; height: 5px;}
	#tabBar .clickbtn.active{ background:url(/images/tabBar/xian2.png) #9fc43e; background-size: 100% 100%; }
	#tabBar .clickbtn.active:before{ content: ""; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; border:solid 1px rgba(255,255,255,0.2); border-radius: 50%; }
	#tabBar .clickbtn.active > img{ opacity: 0; }
	#tabBar .clickbtn.active span{ opacity: 1; }
	#tabBar .navigation{ position: absolute; left:calc(100% - 100px); bottom: 0; z-index: 1; width:0; height: 50px; border-radius: 25px; transition: all 0.3s;}
	#tabBar .navigation:before{ content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; border-radius: 25px; 
background:-moz-linear-gradient(left,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.6) 100%);background:-webkit-linear-gradient(left,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.6) 100%);background:linear-gradient(to right,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.6) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff',endColorstr='#99ffffff',GradientType=1 );}
	#tabBar .navigation ul{ position: relative; z-index: 2; padding: 0 60px 0 20px; }
	#tabBar .navigation ul li{ width: calc(100% / 3); font-size: 0; width: calc(100% / 2);}
	#tabBar .navigation ul li a{ position: relative; left: 10px; display: inline-block; vertical-align: top; line-height: 50px;opacity: 0; }
	#tabBar .navigation ul li a .tab-icon{ margin-right: 5px; }
	#tabBar .navigation ul li a .tab-icon img{ width: 22px; }
	#tabBar .navigation ul li a .tab-title{ font-size: 12px;color: #333; }
	#tabBar .navigation.active{ box-shadow: 5px 5px 10px rgba(0,0,0,0.2); animation: navigationAnimation 0.5s 0s linear forwards; -webkit-animation: navigationAnimation 0.5s 0s linear forwards; -moz-animation: navigationAnimation 0.5s 0s linear forwards; -o-animation: navigationAnimation 0.5s 0s linear forwards; }
	#tabBar .navigation.active ul li:nth-child(1) a{animation:navigationAAnimation 0.3s 0.5s linear forwards; -webkit-animation:navigationAAnimation 0.3s 0.5s linear forwards; -moz-animation:navigationAAnimation 0.3s 0.5s linear forwards; -o-animation:navigationAAnimation 0.3s 0.5s linear forwards; }
	#tabBar .navigation.active ul li:nth-child(2) a{animation:navigationAAnimation 0.3s 0.6s linear forwards; -webkit-animation:navigationAAnimation 0.3s 0.6s linear forwards; -moz-animation:navigationAAnimation 0.3s 0.6s linear forwards; -o-animation:navigationAAnimation 0.3s 0.6s linear forwards; }
	#tabBar .navigation.active ul li:nth-child(3) a{animation:navigationAAnimation 0.3s 0.7s linear forwards; -webkit-animation:navigationAAnimation 0.3s 0.7s linear forwards; -moz-animation:navigationAAnimation 0.3s 0.7s linear forwards; -o-animation:navigationAAnimation 0.3s 0.7s linear forwards; }		

	@keyframes tabBarAnimation{
		0%{transform:translate(0,0);}
		30%{transform:translate(0,5px);}
		50%{transform:translate(0,0);}
		70%{transform:translate(0,-5px);}
		100%{transform:translate(0,0);}
	}
	@-webkit-keyframes tabBarAnimation{
		0%{transform:translate(0,0);}
		30%{transform:translate(0,5px);}
		50%{transform:translate(0,0);}
		70%{transform:translate(0,-5px);}
		100%{transform:translate(0,0);}
	}
	@-moz-keyframes tabBarAnimation{
		0%{transform:translate(0,0);}
		30%{transform:translate(0,5px);}
		50%{transform:translate(0,0);}
		70%{transform:translate(0,-5px);}
		100%{transform:translate(0,0);}
	}
	@-o-keyframes tabBarAnimation{
		0%{transform:translate(0,0);}
		30%{transform:translate(0,5px);}
		50%{transform:translate(0,0);}
		70%{transform:translate(0,-5px);}
		100%{transform:translate(0,0);}
	}

	@keyframes navigationAnimation{
		0%{left:calc(100% - 100px); width: 0; }
		80%{ left: -10px; width:100%; }
		90%{ left:  5px; width:100%; }
		100%{ left: 0; width:100%; }
	}
	@-webkit-keyframes navigationAnimation{
		0%{left:calc(100% - 100px); width: 0; }
		80%{ left: -10px; width:100%; }
		90%{ left:  5px; width:100%; }
		100%{ left: 0; width:100%; }
	}
	@-moz-keyframes navigationAnimation{
		0%{left:calc(100% - 100px); width: 0; }
		80%{ left: -10px; width:100%; }
		90%{ left:  5px; width:100%; }
		100%{ left: 0; width:100%; }
	}
	@-o-keyframes navigationAnimation{
		0%{left:calc(100% - 100px); width: 0; }
		80%{ left: -10px; width:100%; }
		90%{ left:  5px; width:100%; }
		100%{ left: 0; width:100%; }
	}

	@keyframes navigationAAnimation{
		from{ left: -10px; opacity: 0; }
		to{ left: 0; opacity: 1; }
	}
	@-moz-keyframes navigationAAnimation{
		from{ left: -10px; opacity: 0; }
		to{ left: 0; opacity: 1; }
	}
	@-webkit-keyframes navigationAAnimation{
		from{ left: -10px; opacity: 0; }
		to{ left: 0; opacity: 1; }
	}
	@-o-keyframes navigationAAnimation{
		from{ left: -10px; opacity: 0; }
		to{ left: 0; opacity: 1; }
	}

	@keyframes clickbtnAnimation{
		0%{ transform: rotateY(0deg); }
		10%{transform: rotateY(270deg); }
		15%{transform: rotateY(180deg); }
		30%{transform: rotateY(0deg); }
		100%{transform: rotateY(0deg); }
	}
	@-moz-keyframes clickbtnAnimation{
		0%{ transform: rotateY(0deg); }
		10%{transform: rotateY(270deg); }
		15%{transform: rotateY(180deg); }
		30%{transform: rotateY(0deg); }
		100%{transform: rotateY(0deg); }
	}
	@-webkit-keyframes clickbtnAnimation{
		0%{ transform: rotateY(0deg); }
		10%{transform: rotateY(270deg); }
		15%{transform: rotateY(180deg); }
		30%{transform: rotateY(0deg); }
		100%{transform: rotateY(0deg); }
	}
	@-o-keyframes clickbtnAnimation{
		0%{ transform: rotateY(0deg); }
		10%{transform: rotateY(270deg); }
		15%{transform: rotateY(180deg); }
		30%{transform: rotateY(0deg); }
		100%{transform: rotateY(0deg); }
	}
	/*手机版底部 end*/
	
}
@media (max-width:767px){
    header{ height:60px; border-bottom:#037e48 solid 1px; 
	}	
	#top_blank{ height:61px;
    }
	#logo{ float: left; width: 220px; height:60px;  
	}
	#logo img{  width:160px; margin-top:3px;/* height:37px;*/ 
	}
	.menu-box{top: 60px; width: 100px; }
	.menu-box ul li a{ font-size: 12px; line-height: 34px;}
	.menu-btn{ top: 21px; width: 30px;}	
}