/*
 *这是单独为hello mui准备的个性化css，可以覆盖标准mui的css定义；
 * 在实际项目开发时，建议为App单独写一个css文件，从而实现项目的自定义皮肤功能；
 * 
 * */
.mui-plus.mui-android header.mui-bar{
	display: none;
}
.mui-plus.mui-android .mui-bar-nav~.mui-content{
	padding: 0;
}

/*hm开头的表示仅为 Hello MUI示例定义*/
.hm-description{
	margin: .5em 0;
}

.hm-description>li {
	font-size: 14px;
	color: #8f8f94;
}
@font-face {
  font-family: 'iconfont';  /* project id 191646 */
  src: url('//at.alicdn.com/t/font_l9jdc844ttjoflxr.eot');
  src: url('//at.alicdn.com/t/font_l9jdc844ttjoflxr.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_l9jdc844ttjoflxr.woff') format('woff'),
  url('//at.alicdn.com/t/font_l9jdc844ttjoflxr.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_l9jdc844ttjoflxr.svg#iconfont') format('svg');
}
                                                      
                    
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
/*初始化*/
body{ color: #434241;}
a{ color: #434241;}
.mui-icon-bars i.iconfont{ font-size: 32px; color: #000000;}
.mui-icon-bars:before{ content: '';}
.mui-off-canvas-wrap .mui-bar{ background: #eeeeee; box-shadow: 1px 1px 1px 1px #aaa; -webkit-box-shadow: 1px 1px 1px 1px #aaa;}
.mui-bar-nav.mui-bar .mui-icon{ margin-top: -6px;}
.mui-bar .mui-title img{ max-height: 30px; margin-top: 4px;}
@font-face{font-style:normal;font-family:'bod';src:url(BOD_B.ttf) format('truetype');}
.mui-off-canvas-left{ background:no-repeat; background: url(../img/jnl.jpg) left top no-repeat; background-size: auto 100%}
.mui-off-canvas-wrap.mui-active .mui-off-canvas-backdrop{ box-shadow: none; background: none;}
video{ padding: 0; margin: 0;}



/*main*/
.left-nav{ padding: 20px; color: #e0dfdf; }
.left-nav a{border-bottom: 1px solid #c6c5c6; height: 54px; line-height: 54px; font-size: 14px; display: block; color: #e0dfdf; opacity:0.8}
.left-nav i{ font-family:bod;text-transform: uppercase;height: 54px; line-height: 54px; font-size: 22px; font-style: normal;color: #e0dfdf; margin-right: 10px;}
.left-nav a:after{font-family: Muiicons;font-size: inherit;color: #c6c5c6; float: right;-webkit-font-smoothing: antialiased; content: '\e583'; margin-right: 8px;}
.nav-foot-bar{  background: rgba(71,71,71,0.9); bottom: 0;display: table;width: 100%;height: 52px;padding: 0;table-layout: fixed;border-top: 0;border-bottom: 0;-webkit-touch-callout: none;position: fixed; z-index: 9999; color: #aeabab;}
.left-nav a.mui-active{ color:#fff; opacity:1; font-weight:bold}
.left-nav a.mui-active i{ color:#fff}
.left-nav a.mui-active:after{ color:#fff}
.nav-foot-bar a{ color: #AEABAB; width: 25%; float: left;; font-size: 12px; text-align: center;}
.nav-foot-bar .mui-icon{ text-transform: uppercase; display: block; font-size: 24px; margin-top: 6px; height: 20px;font-family:bod;}
.nav-foot-bar .mui-active{ color: #fff;}
.index-aboutus{position: relative; background:url(../img/index_aboutus.jpg) center center no-repeat; background-size: 100% auto; margin-top: 10px;}
.index-aboutus span{ text-shadow: 1px 1px 1px #333;-webkit-text-shadow: 1px 1px 1px #333; color: #fff; width: 100%; text-align: center; font-size: 14px; display: block; line-height: 30px; height: 30px;;}
#banner{ margin-top: 2px;}
.index-aboutus span.txt-cn{ font-size: 18px;;}
.index-aboutus span.txt-en{letter-spacing: 1px;}
.index-aboutus a{ height: 36px; width: 120px; line-height: 36px; border-radius: 2px;-webkit-border-radius: 2px;   display: block;; text-align: center;; color: #fff;;text-shadow: 1px 1px 1px #333; letter-spacing: 2px; font-size: 14px; position: absolute; }
.index-video{ width: 100%; margin: 0px auto; margin-top: 10px; margin-bottom: 5px;}
.padbottom{ padding-bottom: 0px;}
.newstab{ width: 100%;  background: #fff; margin-bottom: 10px;}
.newstab:after{ clear: both; content: ''; display: block; height: 0; width: 100%;}
.newstab .newsimg{position: relative;}
.newstab .newsimg a{position: absolute;}
.newstab .newsimg a img{position: absolute; top: 0; width: 100%;}
.newstab .newsimg p{ line-height:140%;width: 76%; position: absolute; text-align: center; z-index: 1; left: 12%; font-size: 22px;  color: #fff;text-shadow: 1px 1px 1px #333;}
.newstab .newsimg i.line{ width: 16%; height: 3px; background: #ffff00; display: block; left: 42%; z-index: 8; position: absolute;}
.newstab .des{ width: calc(100% - 30px);width: -webkit-calc(100% - 30px); display: block; padding:15px 0px; margin: 0px auto; font-size: 14px; border-bottom:1px solid #c9c5c4; line-height: 170%;}
.newstab .tools{width: calc(100% -30px);-webkit-width: calc(100% -30px); padding: 8px 15px; font-size: 14px;}
.newstab .tools i.iconfont{ font-size: 22px; color: #313131; float: left;}
.newstab .share{ width: 30px; float: left; margin-right: 20px; line-height: 36px; height: 36px;}
.newstab .heart{ width: 120px; float: left; line-height: 36px; height: 36px; display: block; float: left; font-weight: bold; color: #313131; font-size: 16px; color: #474646;}
.newstab .heart .iconfont{ margin-right: 5px;}
.newstab .tools a{ width: 60px; height: 28px; line-height: 28px; background: #828080; color: #fff; text-align: center; display: block; float: right; margin-top: 4px;}
.newstab .tools .active i.iconfont{color: #e10000;}
#sharetab{ width: 100%; background: rgba(255,255,255,0.9); padding: 0px; position: fixed; bottom:0px; z-index: 9999;transform: translate3d(0,200px,0px);-webkit-transform: translate3d(0,200px,0px);}
#sharetab .atitle{ text-align: center; line-height: 56px; height: 56px; display: block; font-size: 16px; color: #333; }
#sharetab .sharetype{ width: 90%; margin: 15px auto; padding:0px;}
#sharetab .sharetype a{ width: 25%; float: left; text-align: center; vertical-align: top;}
#sharetab .sharetype a i.iconfont{ font-size: 50px; color: #17181a;}
#sharetab .share-cancel{font-size: 18px; text-align: center; width: 100%; height: 50px; line-height:50px; border-top: 1px solid #d8d8d8; color: #17181a;}
#sharetab .sharetype p{ color: #3e3f41; font-size: 14px; margin-bottom: 0px;}
#sharetab .sharetype a:nth-child(2) i.iconfont{font-size: 46px; }
#sharetab .sharetype a:nth-child(4) i.iconfont{font-size: 46px; }
#sharetab .sharetype a:nth-child(3) i.iconfont{ line-height: 10px;}
#sharetab .sharetype a:nth-child(3) p{ line-height: 30px;}

/*brand*/
@font-face{font-style:normal;font-family:'cxfz';src:url(方正兰亭超细黑简体.TTF) format('truetype');}
.brand{ width: calc(100% + 2px);-webkit-width: calc(100% + 2px); margin-left: -1px;}
.brand a{ float: left; border: 1px solid #000000;}
.brand img{ display: block;}
.who{  width: 100%; margin: 60px auto;  font-size: 30px; font-family: cxfz; color: #1a1a1a;; text-align: center;}
.brand-ny{ background: url(../brand/nh.gif) top center no-repeat; background-size:100% 100%; position: relative; top: 0;}
.brand-aboutus{ background: url(../brand/aboutus.gif) top center no-repeat; background-size:100% 100%; position: relative; top: 0;}
.brand-history{ background: url(../brand/history.gif) top center no-repeat; background-size:100% 100%; position: relative;}
.brand-ln{ background: url(../brand/ln.gif) top center no-repeat; background-size:100% 100%; position: relative;}
.brand-des{ padding: 15px; background: rgba(255,255,255,0.8); position:absolute; bottom: 0px; left: 0px; width: 100%;  z-index: 888;}
.brand-des h1{font-family: cxfz;;font-size: 25px; text-align: right; font-weight:bold; padding: 15px 0px; color: #000;}
.brand-des h2{font-family: cxfz;;font-size: 17px; text-align: right;font-weight: bold;color: #000; padding: 5px 0px;}
.brand-des p{font-family: cxfz;;font-size: 14px; text-align: right;font-weight: bold; line-height: 170%;color: #000;margin-bottom: 0px;}
p.history-des{ text-align: left;text-indent: 2em;color: #000;}
/*brand*/

/*pro*/
.probg{ width: 100%; position: relative;}
.probg .proimg{position: absolute; top: 0px; width: 100%; z-index: 1;}
.probg .proimg img{ width: 100%; display: block;}
.probg .protext{ left:calc(50% - 130px);left:-webkit-calc(50% - 130px); position: absolute; width:260px; background: rgba(76,76,77,0.7); color: #fff; font-family: cxfz;; z-index: 8; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; padding:10px 20px; letter-spacing: 5px;}
.probg .protext b{ font-size: 25px;}
.probg .protext p{ margin-bottom: 0px; color: #fff; margin-top: 5px;}
.pro .swiper-slide{ width: 50%;}
.pro .swiper-slide img{ width: 100%;}
.pro{ margin-bottom: 15px;}
.protitle{ text-align: center; font-size: 16px; height: 45px; line-height: 45px;}

/*pro*/
.brand-us{ background: url(../brand/us.gif) top center no-repeat; background-size:100% auto;  position: relative;}
.us{ padding:0px 15px 15px 15px; background: rgba(255,255,255,0.75); width: 100%;  }
.us nav{ padding-left: 20px;;}
.us nav a{width: 100%; display: block; height: 50px; line-height: 50px;font-size: 16px; border-bottom: 1px solid #d4d3d5; color: #181818;}
.us nav a:after{    font-family: Muiicons;
    font-size: inherit;
    color: #c6c5c6;
    float: right;
    -webkit-font-smoothing: antialiased;
    content: '\e583';
    margin-right: 8px;}
    
.login-reg{ ; width: 100%; text-align: center; background: url(../img/pheadbg.png) center top no-repeat; background-size: 100% auto;}
.login-reg .pHead{ width: 70px;height: 70px; border: 4px solid #fff; border-radius: 120px; -webkit-border-radius: 120px; -moz-border-radius: 120px; display: block; overflow: hidden;margin-left:calc(50% - 35px);margin-left:-webkit-calc(50% - 35px); clear: both;}
.login-reg .pHead:after{ display: block; clear: both; content: ''; width: 100%;;}
 .login-reg .pHead img{width: 70px;height: 70px; display: block; margin: 0px auto; }  
 .hauto{min-height: 80px;}
 .login-reg a.reg,.login-reg .login{ padding:10px; display:inline-block; font-size: 16px;}
 
 .news-list{ padding-bottom: 60px;}
 .loginx{position:absolute; bottom: 52px; left: 0px; width: 100%;  z-index: 888;}
 .logintab{display: none; background: rgba(255,255,255,0.9); padding: 10px 15px; width: 280px; border-radius: 4px; -webkit-border-radius: 4px;}
.logintab .reg-line{border-radius: 4px; -webkit-border-radius: 4px; margin: 15px auto; font-size: 18px; background: #fff; height: 40px; line-height: 40px;}
.logintab .reg-line .iconfont{ font-size: 24px; color: #666; width: 30px; text-align: center; float: left; padding: 0; margin: 0;;}
.logintab .reg-line .inputs{ width: 200px; float: left; height: 40px; line-height: 40px; border: none; padding: 0; margin: 0;}
  input, select, textarea{ font-size: 15px;}
input[type=submit].reg-btn{ background-color: #111; border: none; color: #fff; text-align: center;font-size: 15px; border-radius: 4px; -webkit-border-radius: 4px; height: 42px; line-height: 42px; width: 100%; padding: 0;}
.note{ line-height: 50px; line-height: 50px; font-size: 14px; color: #666;}

/*job*/
.joblist{ padding: 15px; background: #fff; padding-bottom: 50px;}
.job{position: relative;}
.job .Apply{ border-radius: 2px;-webkit-border-radius: 2px; height: 38px; line-height: 38px; color: #fff; background: #333;position:absolute; right:0px; font-size: 12px; padding: 0px 10px; top: 8px;}
.job .t{ height: 30px; line-height: 30px; overflow: hidden; display: block; font-size: 16px;}
.job p.jobaddress{ border-bottom: 1px solid #eee; height: 32px; line-height: 32px;  display: block; color: #666;}
.job .intro{ display:none;color: #111;}
.job .intro{ border-bottom: 2px solid #333; margin-bottom: 8px;}
#applytab{border-radius: 2px;-webkit-border-radius: 2px; background: rgba(255,255,255,0.9); padding: 15px; width: 270px;}
#applytab .reg-line{border-radius: 4px; -webkit-border-radius: 4px; margin: 15px auto; font-size: 18px; background: #fff; height: 40px; line-height: 40px;}
#applytab .reg-line .iconfont{ font-size: 24px; color: #666; width: 30px; text-align: center; float: left; padding: 0; margin: 0;;}
#applytab .reg-line .inputs{ width: 200px; float: left; height: 40px; line-height: 40px; border: none; padding: 0; margin: 0;}
input[type=submit].apply-btn{ background-color: #111; border: none; color: #fff; text-align: center;font-size: 15px; border-radius: 4px; -webkit-border-radius: 4px; height: 42px; line-height: 42px; width: 100%; padding: 0;}

.single-content{ padding:30px;font-size: 14px; line-height: 180%;;}
.newsconent{ padding:20px 15px 60px 15px; background: #fff;;}
.newsconent h1.newstitle{ font-size: 20px; font-weight: normal; line-height: 150%; text-align: center; color: #050505;}
.newsconent .source{ text-align: center; height: 30px; line-height: 30px; color: #666; font-size: 12px;}
.newsconent .content{ line-height: 180%; font-size: 14px; color: #555;}
.news-foot-bar{ background: rgba(255,255,255,0.95); color: #5a5859; height: 50px; line-height: 50px; position: absolute; bottom: 0; width: 100%; z-index: 20; border-top: 1px solid #eee;;}
.news-foot-bar .mui-icon{ margin-top: 12px; margin-left: 5px;}
.news-foot-bar .foot-title{ font-size: 14px; text-align: right; padding-right: 10px;}
.tools2{ text-align: right; width: 300px; float:right; margin-top: 2px;}
.tools2 .share{ width: 30px; display: inline-block; margin-right: 20px; line-height: 36px; height: 36px;}
.tools2 .heart{ width: 220px;  display: inline-block; line-height: 36px; height: 36px;  font-weight: bold; color: #313131; font-size: 16px; color: #474646; padding-right: 40px;}
.tools2  i.iconfont{ margin-right: 5px; font-size: 22px;}

.tools2 .active i.iconfont{color: #e10000;}
.single-title{ font-size: 18px; font-weight: bold;  color: #333; padding-bottom: 10px;}
.newstab.notitle p,.newstab.notitle i.line,.newstab.notitle .des{ display: none;}
.index-title{ width: 100%; height: 45px; line-height: 45px; font-size: 14px; color: #666; background: #fff; text-align: center; position: relative;}
.index-title a{height: 45px; line-height: 45px; float: right; padding-right: 15px; color: #999; width: 60px; display: block; position: absolute; right: 0px; top: 0px;}
#prod-img img{ width: 100%;}
.pro-title{ background: #fff;margin-top: 5px; margin-bottom: 10px; text-align: center; padding: 10px;;}
.pro-title b{ font-size: 18px; color: #222;  font-weight:normal; line-height: 170%;}
.pro-title p{ font-size: 12px; color: #666; margin-bottom: 0px;}
#proc{ width:100%; padding: 15px; color: #333; background: #fff;line-height: 170%; padding-bottom: 70px;}
#proc b{ color: #222; line-height: 170%; margin-top: 10px; }
#proc p{ margin: 0px auto; color: #666;}
#proc img{ display: block; margin-top: 10px;margin-bottom: 10px;}
.tpic{ width: 100%; margin: 0px;background: #fff;; padding: 20px 0px;}
.tpic img{ width: 50%; float: left; border: 2px solid rgba(255,255,255,1);}

/*tpic*/
section{ display: block; width: 100%; height: 500px;}
#prod-img .swiper-pagination{ bottom: 10px; top: auto;}
.videolist{width: 100%; display: block; padding-bottom: 60px;}
.videotab{ display: block; padding-bottom: 10px;}


/*exponent*/
#exponent{ width: 100%; background: #fff;; font-size: 13px;min-height: 100px; padding: 10px; margin-top: 10px; color: #666; line-height: 170%; border-bottom:1px solid #dedede;border-top:1px solid #dedede;}
#exponent img{ margin-top:10px; max-width: 90px;max-height: 90px; display: inline-block; float: left; margin-right:15px;}
#exponent a{ border: 1px solid #eee; border-radius: 2px;-moz-border-radius: 2px;;-webkit-border-radius: 2px; padding: 3px 30px; display: block; margin: 0px auto; width: 120px; text-align: center; margin-top: 10px; background: #000000; color: #fff;}
#type-title{ width: 90%; margin: 0px auto; margin-top: 70px; background: #fff; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding: 10px; border: 1px solid #ddd;}
#type-title i.iconfont{ font-size: 26px; margin-right: 10px; float: left;}
#type-list{width: 90%; margin: 0px auto; border-radius:0px 0px 4px 4px;-webkit-border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px; background: #fff; border: 1px solid #ddd; border-top: none; padding: 10px; display: none;}
#type-list a{ color: #333;; padding-right: 10px;}
#type-list p{ line-height: 190%;}
#type-list.active{border-radius:4px 4px 0px 0px; -webkit-border-radius:4px 4px 0px 0px; -moz-border-radius:4px 4px 0px 0px;;}
.pation{width: 90%; margin: 0px auto; font-size: 14px; color: #333; padding:0px 10px; margin-top: 15px;}
.pation i.iconfont{ font-size: 22px; margin-right: 10px; float: left; color: #FF0000;}
.index-ss{ width: 90%; margin: 0px auto; border-radius:4px;-webkit-border-radius:4px; -moz-border-radius:4px; background: #fff; border: 1px solid #ddd; padding: 10px;min-height: 45px; margin-top: 15px;;}
.index-ss i.iconfont{ font-size: 22px; margin-right: 10px; float: left; color: #999;}
input.index-input{ width:calc(100% - 35px);-webkit-width:calc(100% - 35px);float: left; display: block; margin: 0px; margin: 0px; padding: 0px; margin-top: -8px; border: none; height: 38px; line-height: 38px;}
input.index-submit{width: 90%; margin: 0px auto; border-radius:4px;-webkit-border-radius:4px; -moz-border-radius:4px; background-color: #333; background: #333; border: 1px solid #ddd; padding: 10px;min-height: 45px; margin-left: 5%; margin-top: 15px; color: #fff; text-align: center;}
.index-intro{ width: 90%; margin: 20px auto; font-size: 12px; background: #fff; padding: 10px;; line-height: 170%;}
.index-intro b{ font-size: 14px; height: 32px; line-height: 32px;}
.index-intro p{ font-size: 12px; line-height: 180%;}

.index-result{width: 90%; margin: 15px auto; padding: 10px; background: #fff;;border-radius:4px;-webkit-border-radius:4px; -moz-border-radius:4px;}
.index-result b{ color: #f00; font-size: 14px; padding: 0px 3px;;}
.index-result a{ padding: 5px 0px; font-size: 15px; display: block; font-weight: bold;}
.bb, .bb:before, .bb:after {
		  position: absolute;
		  top: 0;
		  bottom: 0;
		  left: 0;
		  right: 0;
		}

		.bb {
		  width: 120px;
		  height: 36px;
		  margin: auto;
		 z-index: 999; 
		  color: #eee;
		
		}
		.bb:before, .bb:after { border-radius: 2px; -webkit-border-radius: 2px;;
		  content: '';
		  z-index: -1;
		  margin: -2px;
		  box-shadow: inset 0 0 0 1px;-webkit-box-shadow: inset 0 0 0 1px;
		  -webkit-animation: clipMe 6s linear infinite;animation: clipMe 6s linear infinite;
		}
		.bb:before {
		  -webkit-animation-delay: -3s;animation-delay: -3s;
		}
	
		@keyframes clipMe {
		  0%{ 
		    clip: rect(0px,123px,1px,0px);-webkit-clip: rect(0px,123px,1px,0px);
		  }
		  25% {
		    clip: rect(0px, 1px, 40px, 0px); -webkit-clip: rect(0px,1px,40px,0px);
		  }
		  50% {
		    clip: rect(39px,124px,40px, 0px);  -webkit-clip: rect(39px,124px,40px,0px);
		  }
		  75% {
		    clip: rect(0px,124px,40px,122px);-webkit-clip: rect(0px,124px,40px,122px);
		  }
		   100% {
		    clip: rect(0px,123px,1px,0px);-webkit-clip: rect(0px,123px,1px,0px);-webkit;
		  }
		}
		@-webkit-keyframes clipMe{
			 0% {
		    clip: rect(0px,123px,1px,0px);-webkit-clip: rect(0px,123px,1px,0px);
		  }
		  25% {
		    clip: rect(0px,1px,40px,0px); -webkit-clip: rect(0px,1px,40px,0px);
		  }
		  50% {
		    clip: rect(39px,124px,40px,0px);  -webkit-clip: rect(39px,124px,40px,0px);
		  }
		  75% {
		    clip: rect(0px, 124px, 40px, 122px);-webkit-clip: rect(0px, 124px, 40px, 122px);
		  }
		  100% {
		    clip: rect(0px,123px,1px,0px);-webkit-clip: rect(0px,123px,1px,0px);
		  }
		}
		


@media only screen and (min-width: 100px) and (max-width: 321px) and (max-device-height: 485px) {

}
@media only screen and (min-width: 100px) and (max-width: 321px) and (max-device-height: 570px) {

}
#page{ background:#fff; padding:15px 0px; text-align:center}
#page span{ display:none}
#page a{ border:1px solid  #ddd; padding:7px 10px; font-size:14px}