@charset "utf-8";
html{ min-height: 100%;background-color: #f0f2f5;  }
body{min-height: 100%;position: relative; padding-bottom: 64px; background: none;}
#page{ min-height: 100%; background-color: #f0f2f5; padding-top: 62px;}
.header{ width:100%; height:62px; border-bottom: 2px solid #2b2b2b; padding: 10px 10px; overflow: hidden;background-color: #fff; position: fixed; top: 0; z-index: 999;}
.header .logo{ width: auto; height: 100%; float: center;}
.header .logo img{ width: auto; height: 100%;}

.header .navBut,.header .return{ display: block; width: 40px; height: 40px; float: right; text-align: center; line-height: 40px;font-size: 28px; color: #363636; position: absolute; top: 10px; right: 10px;}
.header .return{ width: 20px; left: 10px; padding: 0 5px; }


.menu-icon { display: block; width:30px; height: auto; margin: 0 auto; padding-top: 12px; overflow: hidden;}
.menu-icon span { display: block;  width: 30px;  height: 2px;  background: #000;  margin-bottom: 5px;  border-radius: 1px;}
.menu-icon span.bar3 { margin: 0;}


.header .columnName{ width: 100%; height: 100%; line-height: 40px; font-size: 20px; text-align: center; padding: 0 10px;}

.header .tel{ display: none; width: auto; height: 100%; float: right; overflow: hidden; padding: 8px 0 2px; position: absolute; top: 10px; right: 50px;}
.header .tel p{ display:block; width: 90px; height: 100%; line-height: 13px; font-size: 12px; float: left; margin: 0; padding: 2px 0;}
.header .tel p span{font-weight: bold;}
.header .tel i{ width:auto; height: 100%; line-height: 30px; margin-right: 5px; font-size: 32px; float: left;}





.banner{ width: 100%; height: 160px !important; position: relative; z-index: 888;}
.banner ul{ width: 300%; height: 100% !important; position: absolute;}
.banner ul li{ width: 33.33%; height: 100%; float: left; background-size: auto 100%; background-position: center top; background-repeat: no-repeat;}


.footer{ width: 100%; height: auto; line-height: 20px; font-size: 12px; color: #333; text-align: center; padding: 10px 20px; background-color: #ccc; }
.footer a{color: #333;}

.getTop{ display: none; width: 20px; height: 39px; background: url(../images/top.png) top center no-repeat; position: fixed; bottom: 70px; right: 10px;}

.Menu{
   width: 100%; height: auto; line-height: 20px; font-size: 12px; color: #f0f2f5; text-align: center; padding: 10px 0; background-color: #2b2b2b; border-top: 2px solid #e62129;position: fixed; bottom: 0;
}
.Menu ul{ width: 100%; min-width: 320px; max-width: 640px; height: auto; margin: 0 auto; overflow: hidden;}
.Menu ul li{width: 25%; height: auto;overflow: hidden; float: left; text-align: center;}
.Menu ul li a{font-size: 13px; color:#fff;}
.Menu ul li i{font-size: 20px; }


/*main*/
.search{ width: 100%; height: auto;padding: 10px 0; background-color: #005bac;}
.search .searchBox{ width: 100%; height: 100%; margin: 0 auto; padding:0 10px;}
.search .searchBox input{ width: 100%; height: 25px; border: none; border-radius: 13px; overflow: hidden; padding-left: 28px; background: url(../images/BG015.png) no-repeat 5px center  #fff;}


.shortcut{ width: 100%; height: auto; overflow:hidden;}
.shortcut ul{ width: 100%; height: auto; margin: 0 auto; overflow: hidden;}
.shortcut ul li{ width: 25%; height: auto; float: left;padding:1px;}
.shortcut ul li a{display: block; width: 100%; height: 100%; background-color: #fff; text-align: center; padding: 5px 0; color: #363636;}
.shortcut ul li a i{ display: block;width: 100%; height: 30px; background-repeat: no-repeat; background-position: center center;}
.shortcut ul li a i.Q1{ background-image: url(../images/ICON001.png);}
.shortcut ul li a i.Q2{ background-image: url(../images/ICON002.png);}
.shortcut ul li a i.Q3{ background-image: url(../images/ICON003.png);}
.shortcut ul li a i.Q4{ background-image: url(../images/ICON004.png);}
.shortcut ul li a i.Q5{ background-image: url(../images/ICON005.png);}
.shortcut ul li a i.Q6{ background-image: url(../images/ICON006.png);}
.shortcut ul li a i.Q7{ background-image: url(../images/ICON007.png);}
.shortcut ul li a i.Q8{ background-image: url(../images/ICON008.png);}
.shortcut ul li a p{ display: inline-block; width: 100%; height: 25px; line-height: 25px; font-size: 12px; margin: 0;}

/*recoList*/
.recoList{ width: 100%; height: auto; padding: 0 10px; overflow: hidden; margin:10px 0 0;}
.recoList li{ width: 100%; height: auto; margin-bottom:20px;}
.recoList li p{ width: 100%; height: auto; line-height: 25px; text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 10px;}
.recoList li p span{ font-size: 13px; line-height: 20px; font-weight: lighter; text-transform: uppercase; }
.recoList li a.but{ display: block; width: 95px; height: 20px; line-height: 20px; background-color: #e62129; text-decoration: none; overflow: hidden; border-radius: 13px; margin: 0 auto 10px; text-align: center; font-size: 12px; color: #fff;}
.recoList li a.img{ width: 100%; max-width: 700px; height: auto; overflow: hidden;}
.recoList li a.img img{ width: 100%; }



@media (min-width: 768px) {
	.banner{ height: 360px !important;}
	.shortcut ul li{ width: 12.5%}	
}
@media (min-width: 480px) {
	.recoList{padding: 0 5px;}
	.recoList li{ width: 50%; padding: 0 5px; float:left;}
}
@media (min-width:320px) {
	.header .tel{ display: block; }
}


#loadMoreDlo{font-size:15px; height:40px; width:160px; margin: 10px auto 0; line-height:40px; text-align: center; cursor:hand; cursor:pointer; background: #f4f4f4;}
#loadMoreDlo span{ color:#888;-moz-text-shadow:1px 1px 1px #fff; -o-text-shadow:1px 1px 1px #fff;-webkit-text-shadow:1px 1px 1px #fff;text-shadow:1px 1px 1px #fff;}
img#loading{ height: 60%; vertical-align:middle; margin:0 0.5em; display:none;}



/* detailed */
.main{ width: 100%;height: auto; min-height: 354px;overflow: hidden; padding: 20px 0 20px;}

/*about text*/
.textCon{ width: 100%; height: auto; padding:0 10px; font-size: 14px; color: #636363; line-height: 25px;}

/* honor and news */
.newsList{ width: 100%; height: auto; overflow: hidden; padding: 0 10px 0 10px;}
.newsList li{ width: 100%; height: 40px; line-height: 40px;  padding:0 5px 0 25px; background: url(../images/IC0001.png) 5px center no-repeat; border-bottom: 1px solid #E2E2E2; overflow: hidden;}
.newsList li span{ float: right; font-size: 12px; color:#bababa; margin-left: 10px; }
.newsList li a{ ; width: auto; height:40px; color: #636363; overflow: hidden; } 

 .honorList{ width: 100%; height: auto; overflow: hidden; position:relative; margin: 0 auto;}
 .honorList li{width: 138px; height: auto; overflow: hidden;box-shadow:rgba(0,0,0,0.15) 0 0 0.5em;}
.honorList li a{width: 100%; height: auto; overflow: hidden;}
.honorList li a img{display: inline-block; width: 100%; height: auto;}
.honorList li a p{width:100%;height:30px;line-height:30px;padding:0 10px;color:#343434;color:#fff;background-color:#333;font-size:13px; margin: 0;}

/* language */
.header #language{display: inline-block; vertical-align: middle;}
.header #language a{display: block; width: 3.533333333333333rem; height: 3.533333333333333rem; line-height: 3.533333333333333rem; border: 1px solid #e7e7e7; font-size: 1.6rem; color: #e50012; text-align: center;}
.header #language a.on{background-color: #36bf57; border-color: #36bf57; color: #ffffff;}


/* news */
.newsTit{ width: 100%; height:auto; padding: 0 10px 0; margin-bottom: 20px; overflow: hidden;}
.newsTit h3.tit{ width: auto; height: auto; line-height: 25px; font-size: 17px;color: #363636; font-weight: bold; padding-bottom: 10px; margin: 0 0 10px 0; border-bottom: 1px solid #e62129;}
.newsTit span{ width:auto; height: auto; line-height: 15px; font-size: 12px; color: #636363;}
.newsTit .time{float: left;}
.newsTit .click{float: right;}
.newsTit .click i{margin-right:5px; }

.newsFooter{ width: 100%; height: auto; padding: 0 10px; margin-top: 20px}
.newsFooter p{display: inline-block; width: 100%; height: auto; border-top: 1px solid #e62129; margin: 0 auto; padding: 10px 0; }
.newsFooter a{ width: auto; height:auto; line-height: 15px; font-size: 13px; color: #636363;}
.newsFooter a.prve{ float:left;}
.newsFooter a.prve i{ margin-right: 10px; }
.newsFooter a.next{float: right;} 
.newsFooter a.next i{ margin-left: 10px; }


/* product */

.proListM{width: 100%; height: auto; padding: 5px 10px 0 20px ; overflow: hidden; margin-top: -20px; margin-bottom: 20px; background-color: #cbcbcb;}
.proListM a{ display: inline-block; width: auto; height: 22px; line-height: 22px; padding:0 10px;background-color: #fff; color:#333;border-radius: 11px;font-size: 13px; margin-bottom:6px; margin-right: 10px;}
.proListM a.in{ background-color: #333; color:#fff;}



.proList{ width: 100%; height: auto; overflow: hidden; padding: 0 5px;}
.proList li{ width:50%; height: auto; overflow: hidden; float:left; padding: 0 5px; margin-bottom:10px;}
.proList li a{ display: inline-block; width: 100%; height: auto; background-color: #fff; border:1px solid #ccc; padding: 5px;}
.proList li a .img{ width: 100%; height: auto; overflow: hidden;}
.proList li a .img img{ display: inline-block; width: 100%;}
.proList li a .name{width: 100%; height: 20px; font-size: 12px; text-align: center; color: #636363; line-height: 20px; margin:2px 0 0; overflow: hidden;}

.proTop{ width: 100%; height: auto; overflow: hidden; padding: 0 10px;}
.proTop .proIMG{ width: 100%; height: auto; overflow: hidden;}
.proTop .proIMG img{ display: inline-block; width: 100%;}
.proTop h3.name{  width: 100%; height: auto;line-height:30px; font-size: 20px; text-align: center; margin: 0; padding: 10px 0; font-weight: bold;}

.contect{ width: 100%; height:auto; overflow: hidden;}
.contect ul.tabNav{ width: 100%; height: auto;line-height: 61px; border-top: 1px solid #ccc; /*border-bottom: 1px solid #ccc;*/ overflow: hidden;}
.contect ul.tabNav li{ width: 100%; height: 40px; line-height: 40px; border-right: 1px solid #ccc;/* float: left;*/}
.contect ul.tabNav li:last-child{ border:none;}
.contect ul.tabNav li a{ display: inline-block; width:100%; height: 100%; text-align: center; color: #000; text-decoration: none;}
.contect ul.tabNav li#current a{ border-bottom: 2px solid #e62129;}


.tabCon{ width: 100%; height: auto; min-height: 200px; overflow:hidden; border-bottom: 1px solid #ccc; position: relative; margin: 0 0 10px 0;}
.tabCon li{ width: 100%; height:auto; overflow: hidden; padding: 10px 0 20px;float:left;}
.tabCon li:last-child{ display: none;}
.contect dl{width: 100%; height: auto; overflow: hidden; margin: 0;}
.contect dl dd{width: 100%; height: auto; line-height: 25px; font-size: 14px; color: #666; margin-bottom: 10px;}

.related{ width: 100%; height: auto; overflow: hidden;}
.related h3{ width: 100%; height: auto; padding:0 10px; font-size: 20px; font-weight: bold;line-height: 30px; color: #e62129; margin: 0 0 10px; overflow: hidden;}

/* photo */

.photoList{ width: 100%;  max-width: 640px; height: auto; overflow: hidden; margin: 0 auto 0;}
.photoList li{width:135px; height: auto; float: left; }
.photoList li a{display:block; width: 100%; height: auto; background-color: #fff; border:1px solid #ccc; padding: 5px; overflow: hidden;}
.photoList li .img{ display:block; width: 100%; height: auto; overflow: hidden;}
.photoList li .img img{ display:block; width: 100%;}

/*case*/
.caseTop{ width: 100%; height: auto; overflow: hidden; padding: 0 10px; border-bottom: 1px solid #ccc;}
.caseTop .caseIMG{ width: 100%; height: auto; overflow: hidden;}
.caseTop .caseIMG img{ display: inline-block; width: 100%;}
.caseTop h3.name{  width: 100%; height: auto;line-height:30px; font-size: 20px; text-align: center; margin: 0; padding: 10px 0; font-weight: bold;}

.caseLogo{ width: 100%; height: 100px; text-align: center; overflow: hidden; margin: 10px 0;}
.caseLogo img{ display: inline-block; height: 100%;}


/*contact*/
.contact h4{color:#363636; font-weight: bold;}


/* map */
.BMapLabel{ position: relative !important; left: 0 !important; top: 3px !important;margin-left: 27px;}

/* message */
.message{ width: 100%; height: auto; padding: 0 10px;}
.message p.con{ font-size:13px; color:#636363; line-height: 20px;  margin-bottom: 20px;}

.code{ overflow: hidden;}
.code input{ width: 50%; margin-right: 10px; float: left;}
.code .codeImg{ display:inline-block; width: auto; height: 34px; overflow: hidden;}
.code .codeImg img{ display: inline-block; height: 100%;}

.message button{ width: 100%; background-color:#636363; color: #fff;}