@charset "UTF-8";
html{ overflow-x: hidden;}
body{ font-family:"\5FAE\8F6F\96C5\9ED1"; color:#666; overflow-x:hidden;}
a,a:hover{ text-decoration:none}
.wrap{ width:19rem; margin:0 auto; overflow:hidden; position:relative; left:0; top:0; transition:all 0.3s}
img { max-width: 100%; height: auto;}

/*header*/
.header{ background:#fafafa; padding:15px; position:relative;}
a.logo{ float:left; background:url(../images/logo.png) no-repeat;background-size: 100%; width:170px; height:25px;}
span.search{ position: absolute; top: 13px; right: 60px; background: url("../images/search1.png") no-repeat; background-size: 100%; width: 26px; height: 26px; }
span.search.now{  background: url("../images/search2.png") no-repeat; background-size: 100%;}
span.icon1{ position: absolute; top: 15px; right: 9px; background: url("../images/hum.png") no-repeat; background-size: 100%; width: 30px; height: 30px; }
.header input{ width: 100%; height: 30px; border: 0; border: 1px solid #f0f0f0; border-radius: 3px; box-sizing: border-box;  margin-top: 18px; padding-left: 12px;}
.header .searchbox{ height: 0; opacity: 0; transition: all .3s;}
.header .searchbox.now{ height: 30px; opacity: 1; margin-bottom:15px;}
.search2{ background: url("../images/searchicon.png") no-repeat; background-size: 100%; width: 22px; height: 22px; position: absolute; top:62px; right: 20px;}

/*footer*/
.footer{ background:#202932;}
.footerb{ color:#fff; line-height:1.1rem; padding:.5rem; text-align:center; width: 106%; font-size:.6rem; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.90);}
.footerb a{color:#fff; }
.footerbtop li{opacity:0.6;}
.footerbbottom li{opacity:0.3;}

/*nav*/
.wrapss,.headerss,.footerss{ left:-70%}
.nav{ left: 100%;  height: 100%; position:fixed; top:0; right:0; background-color: #0089CF; transition:all 0.3s; overflow-y: scroll;}
.navnow{ left: 30%;}
.ssbg{ width:100%; height:100%; background:#fff; position:fixed; left:100%; top:0; opacity:0; z-index:11; transition:all 0.3s}
.ssbgnow{ left:-70%;}
.linklist{ padding-top: 1.1rem;}
.linklist li{ position: relative; line-height: 50px; color: #fff; font-size: 14px; padding: 0 40px 0 60px; border-bottom: 1px solid #1D96D4;}
.linklist a{ color: #fff;}
.linklist li .showspan{ position: absolute; background: url("../images/add.png") no-repeat; background-size: 100%; width: 15px; height: 16px; top: 22px ;right: 20px;}
.linklist li .showspan.minus{  background: url("../images/minus.png") no-repeat center; background-size: 100%;}
.linklist .hideli{ line-height: 0px; opacity: 0; transition:all 0.3s;}
.hideli span{display: none; border: 5px solid transparent; border-left-color: #fff; margin-right: 8px;}
.linklist .showli{ line-height: 60px; opacity: 1;}
.linklist .showli span{ display: inline-block;}
.linklist .showbox{ padding: 0;border: 0;}

/************** 首页 ***************/
/*banner slider*/
.bannerSlider{ position: relative;}
.bannerSlider{display:none; height:10.5rem; z-index:1; position:relative; box-shadow:0 0 3px #ccc}
.bannerSlider ul{ z-index:8}
.focus{ z-index:12;}
.focus div{ text-align:center; position:absolute; bottom:1rem;  height:.5rem; text-align:center; width:100%; left:0;}
.focus span{ display:inline-block; width: 1.2rem; height: 0.15rem; background-color: #fff; margin-left: .3rem; opacity:0.5; border-radius: .1rem;}
.focus span.current{ opacity:1; background:#0089CF;}
.imgs li{ position: relative;}

/*product display*/
.displayTitle{ margin: 1rem 0;}
.displayTitle h2{ color: #048ACE; padding-bottom: 0.15rem; font-size: .9rem; font-weight: 600;}
.displayTitle p{ color: #B3B3B3; font-size: .1rem; transform: scale(0.8);}
.pline{ background: url("../images/index/line2.png") no-repeat center; width: 7rem; height: .45rem; margin: 0 auto; margin-top: .25rem;}
.displaySlider{ position: relative;padding-bottom: 3rem; width: 19rem; overflow-x: hidden;}
.displaySlider ul.products{ position: relative; width: 114rem; left: 0; transition:all 0.3s}
.displaySlider ul.products li{ float: left; width: 19rem; padding:0 .5rem; box-sizing: border-box; position: relative;}
.pindexs{ position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%);}
.pindexs li{ float: left; width: 8px; height: 8px; border-radius: 4px; background-color: #D8D8D8; margin-left: 6px;}
.pindexs li.now{ background-color: #0089CF;}
.ptext{ position: absolute; z-index: 11; top: 3%; left: 6%; color: #666;}
.ptext h3{ font-size: .8rem; font-weight: 600; line-height: 2.5rem; color: #333;}
.ptext span{ display: inline-block; border: 7px solid transparent; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left-color: #0089CE; margin-right: 3px;  position: relative; top:-2px;}
.ptext ul li{ line-height: 1.2rem; font-size: .75rem;}

/************** 产品展示 ***************/
/*banner*/
.banner,.fbanner{ position: relative;}
.btitle{ position: absolute; top: 50%; left:1rem; color: #fff; padding-left: .5rem;}
.fbanner .btitle{ color: #000;}
.btitle h3{ font-size: 1.2rem; margin: -.25rem 0 0.15rem 0;}
.btitle span{ color:#0089CF;}
.btitle p{ opacity: .7; font-size: .45rem;}
.fbanner .btitle p{ opacity: .6;}
.btitle h2{ position: absolute; width: 0.15rem; height: 100%; background-color: #fff; left: -.25rem;}
.fbanner .btitle h2{ background-color: #0089CF;}


.navlist{ width:100%; margin:0 auto; padding:0; border-bottom:1px solid #ccc;}

.navlist li{ width:70px; height:35px; display:inline-table; font-size:16px;}
.navlist li a{  line-height:35px; text-align:center;width:70px; height:35px; display:block; color:#333;}
.navlist li a:hover{ background:#0089ce; color:#fff; }
.navlist li a.act{ background:#0089ce; color:#fff; width:100px; height:35px;}
.touzi_ad{ margin-top:1rem;}
.touzi_ad img{ width:100%;}


/*product info*/
.card{ margin: 0 .5rem 2.25rem .5rem; border:1px solid #EDEDEF; border-top: 0; min-height: 15rem; display: none;}
.card.now{ display: block; overflow: scroll; width: 95%;}
.infotitle{ border-bottom: 1px solid #EDEDEF; margin: 1.25rem .5rem 0 .5rem; height: 1.75rem;}
.infotitle li{ float: left; border: 1px solid #EDEDEF; border-bottom-color: transparent; width: 5rem; line-height: 1.75rem; text-align: center; font-size: .8rem; margin-right: .5rem;}
.infotitle .now{ border-top: 0.15rem solid #0089CF; border-bottom-color: #fff; margin-top: -.1rem; background-color: #fff;}
.productinfo .focus{ width: 94% !important;}
.productSlider img{ width: 94%;}
.productinfo .focus span{ background-color: #D8D8D8; }
.productinfo .focus span.current{ opacity:1; background:#0089CF;}
.productinfo p{ text-align: center; font-size: .8rem; margin:.5rem 0 1rem 0;}
.cardlist{ margin: 1.25rem .8rem; border-top: 1px solid #EDEDEF;}
.listtitle{ font-size: .6rem; color: #018ACE; line-height: 3rem;}
.listtitle span.fr{ display: inline-block; width: 8rem;}
.infotext,.infolist{ font-size: 0.45rem; color: #8B8B8B;line-height: 1.2rem;}
.infolist ul.fr{width: 49%}
.infolist ul li{white-space: normal; overflow: hidden;}
.infolist ul.fl{width: 44%}
.infolist span{ display: inline-block; border: 1px solid #8B8B8B; margin: 0 .3rem .25rem 0;}
.download{ color: #138ED1; font-size: .8rem; margin: .5rem;}
.downloadlist{ line-height: 2.25rem; font-size: .7rem; color: #999;}
.downloadlist li{ border-top: 1px solid #EDEDEF;}
.downloadlist a{ font-size: .7rem; color: #BABABA; text-decoration: underline;}
.downloadlist span,.question li>span{ display: inline-block; border: 5px solid transparent; border-left-color: #999; margin-right: 8px;}

/*product data*/
.productdata{ padding-top: .8rem; width: 50rem;}
.productdata:first-child{ margin-bottom: .5rem;}
.productdata li{ float: left; width:3.3rem; text-align: center; font-size: 12px;}
.productdata li:first-child{ width: 4.5rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: left; padding-left: .6rem;}
.datalist li:first-child{ padding-left: 0;}
.productdata li p{ color: #A5A5A5; font-size: .6rem;}
.thumb{ width: 26%;}
.datalist{ line-height: 1.5rem; margin: 0 0.75rem; width: 50rem;}
.scrollc{ overflow-x: scroll; position: relative; left: 0; width: 100%;}
.productdata .wider{ width: 6rem;}
.wider span{ display: inline-block; width: 50%;}
.datalist li img{ width: 30%;}
.datalist li:last-child img{ width: 20%;}

/*product pop*/
.cover{ position: fixed; z-index: 9999; top:0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.5) none repeat scroll 0% 0%;}
.productbox{ width: 95%; position: relative; top: 5rem; left: 2.5%;}
.productbox img{ border-radius: .1rem;}
.coverclose{ position: absolute; right: .7rem; bottom: 1.1rem; font-size: .7rem;}

/************** 工场巡礼 ***************/
.factoryinfo{ padding: .25rem .6rem; margin: 1.5rem 0;}
.factoryinfo ul li{ float: left; width: 47%; margin: 0 0 2.25rem 0; border-bottom: 1px solid #F4F4F4;}
.factoryinfo ul li:nth-child(odd){ margin-right: 1rem;}
.factoryinfo ul li h3{ line-height: 1.5rem; font-size: .7rem;}

/************** 资格证书 ***************/
.qualiinfo{ padding:.25rem 0.75rem 0 0.75rem; margin: 1.5rem 0;}
.qualiinfo ul li{ float: left; width: 42.5%; margin-bottom: 1.25rem;}
.qualiinfo ul li:nth-child(odd){ margin-right: 15%;}
.qualiinfo ul li h3{ line-height: .8rem; font-size: .7rem; text-align: center;}
.qualiinfo ul li img.cn{ display: none;}
.qualibox{ width: 95%; position: relative; top:16%; left: 2.5%; height: 65%;background-color: #fff; border-radius: .1rem;}
.qualibox img{ width: 60%; position: absolute; left: 20%; top: 8%;}
.qualibox h3{ position: absolute; left: .7rem; bottom: 1.1rem; font-size: .8rem;}

/************** 产品咨询 & 客户留言***************/
.ask{ background-color: #F5F5F5; padding: 0 .6rem; padding-bottom: 5rem;}
.message{ background-color: #fff; padding: 1.25rem .6rem 2.5rem .6rem;}
.asktitle{ color: #333; font-size: .9rem; line-height: 2rem;padding: 1.25rem 0 0.75rem 0;}
.asktitle span{ opacity: .6;font-size: .5rem;}
.form label{ font-size: .8rem; color: #787878; width: 100%; margin: 1rem 0; display: block}
.form label input{ line-height: 1.7rem; width: 74%; border-style:none; border: 1px solid #e3e3e4;}
.form label textarea{ vertical-align:top; border-color: #e3e3e4; width: 74%; border: 1px solid #e3e3e4;}
a.submit{ color:#fff; font-size: .8rem; padding: .6rem 2rem; background-color: #0089CF; display: inline-block; margin-left: 4.2rem;}

/************** 联系我们 & 联系方式 & 常见问题***************/
.linkus,.question{ background-color: #fff; padding: 1.25rem .6rem 1.25rem .6rem;}
.linkinfo{ font-size: .7rem; color: #7f7f7f; line-height: 1.3rem; border-bottom: 1px solid #e3e3e4; padding-bottom: 1rem;}
.linkinfo h3{ color: #333; line-height: 2rem;}
.linkinfo span{ color: #333; margin-right: .6rem;}
.question{ overflow-y: scroll;}
.question ul li{ font-size: .7rem; color: #555; border-bottom: 1px solid #e3e3e4; line-height: 2.25rem;}
.question li.now{ color: #138FD0;}
.question li p{ border: 1px solid #138FD0; padding: .5rem .6rem; line-height: 1.2rem; text-align:justify; display: none;}
.question li.now p{ display: block;}
.question li.now>span{ border-left-color: #138FD0;}
.linkus li h1{ line-height: 2rem;}
.linkus li p{ line-height: 1.2rem;}

/************** 关于我们 ***************/
.us{ background-color: #fff; padding: 1.25rem .6rem 2rem .6rem;}
.usbgbox{ background: url("../images/us/usbg.png") no-repeat; background-size: cover; width: 100%; height: 21rem; overflow: hidden;}
.usSlider{ position: relative; width: 100%; height: 90%;}
.usSlider .imgs{ position: absolute; left: 0; top:8%; width: 53.4rem; transition: all .3s;}
.usSlider .imgs li{ float: left; width: 17.8rem; padding:0 1.1rem; box-sizing: border-box;}
.usindex{ position: absolute; right: 1.1rem; bottom: -.25rem;}
.usindex li{ float: left; width: 2rem; height: .2rem; border-radius: 1px; background-color: #D8D8D8; margin-left: .3rem;}
.usindex li.now{ background-color: #0089CF;}
.usSlider h3{ position: absolute; left: 1.1rem; bottom: -.5rem; font-size: .6rem;}
.usinfot{ color: #333; margin-top: 1.5rem;}
.usinfot h2{ font-size: .8rem;}
.usinfot h4{ color: #999; font-size: .3rem;}
.usinfob li{ margin: 1.3rem 0; font-size: .6rem;}
.usinfob p{ line-height: 1.2rem;}

/*404*/
.bg404{ position: relative;}
.tip404{ position: absolute; left: 10%; top: 14%; width: 80%; height: 20rem;}
.tip404 img{ width: 90%; margin-left: 5%;}
.tip404 p{ text-align: center; color: #fff; font-size: .9rem; margin: 1rem 0;}
.tip404 .link404{ width: 90%; margin: 1.5rem auto;}
.tip404 a{ color: #67ACE5; font-size: .8rem; background-color: #fff; padding: .35rem 1.6rem; border-radius: .8rem;}
.qualimgc{min-height: 18rem;}