@charset='utf-8';
/* 全局标题 */
.title{ width: 100%; height: 65px; position: relative; box-sizing: border-box; padding-left: 15px;}
.title span{ display: block; width: 5px; height: 65px; position: absolute; left: 0; top: 0; background: #60bdde; }
.title .en-title{ display: block; width: 100%; height: 40px; line-height: 40px; font-size: 30px; color: #333; text-transform: uppercase; font-weight: 400; text-overflow:ellipsis; white-space:nowrap; *white-space:nowrap; overflow:hidden;}
.title .ch-title{ display: block; width: 100%; height: 25px; font-size: 18px; color: #666; text-overflow:ellipsis; white-space:nowrap; *white-space:nowrap; overflow:hidden;}

/* 产品 */
.in-pro-box{ width: 90%; height: auto; overflow: hidden; padding: 5% 0; margin: 0 auto; }
.in-pro-box .in-pro-white{ width: 100%; height: 2em; }
.in-pro-left{ display: none; }
.in-pro-rht{ width: 100%; height: auto; overflow: hidden;}
.in-pro-rht ul li{ display: block; width: 50%; height: auto; position: relative; box-sizing: border-box; border:solid 1px #eee; float: left; overflow: hidden;}
.in-pro-rht ul li:hover .line1{ display: block; width: 1px; height: 100%; left: 0; bottom: 0; background: #60bdde; position: absolute; animation: lineone 0.2s linear 0s alternate forwards; opacity: 0;}
.in-pro-rht ul li:hover .line2{ display: block; width: 100%; height: 1px; left: 0; top: 0; background: #60bdde; position: absolute; position: absolute; animation: linetwo 0.2s linear 0.4s alternate forwards; opacity: 0;}
.in-pro-rht ul li:hover .line3{ display: block; width: 1px; height: 100%; right: 0; top: 0; background: #60bdde; position: absolute; animation: lineone 0.2s linear 0.6s alternate forwards; opacity: 0;}
.in-pro-rht ul li:hover .line4{ display: block; width: 100%; height: 1px; right: 0; bottom: 0; background: #60bdde; position: absolute; animation: linetwo 0.2s linear 0.8s alternate forwards; opacity: 0;}
.in-pro-rht ul li img{ width: 100%; }

/* 解决方案 */
.in-cas-box{ width: 90%; height: auto; overflow: hidden; padding: 5%; background: #f5f5f5; }
.in-cas-box .in-cas-cen{ width: 100%; height: auto; margin: 0 auto; overflow: hidden; }
.in-cas-list{ width: 100%; height: auto; margin-bottom: 1em; margin-top: 1.5em; }
.in-cas-list ul li{ display: block; width: 100%; height: auto; border-radius: 5px; overflow: hidden; margin-bottom: 1em;}
.in-cas-list ul li img{ width: 100%; }
.in-cas-ad{ width: 100%; height: auto; border-radius: 5px; overflow: hidden; margin-bottom: 1em;}
.in-cas-ad img{ width: 100%; }
.in-cas-nav{ width: 100%; height: auto; overflow: hidden;}
.in-cas-nav dl{ display: block; width: 50%; height: auto; float: left; }
.in-cas-nav dl:first-child{ margin-left: 0; }
.in-cas-nav dl dt{ display: block; width: 100%; height: auto; }
.in-cas-nav dl dt img{ width: 100%; height: auto; }
.in-cas-nav dl dd{ text-align: center; width: 100%; height: auto; box-sizing: border-box; padding: 25px 20px; }
.in-cas-nav dl dd span{ font-size: 1em; padding-bottom: 15px; display: block; }
.in-cas-nav dl a:hover dd span{ color: #333 !important; }
.in-cas-nav dl a:hover dd p{ color: #666 !important; }
.in-cas-nav dl a:hover{ color: #333 !important;}

/* 关于我们 */
.in-about-box{ width: 90%; height: auto; overflow: hidden; padding: 5% 0; margin: 0 auto; }
.about-txt{ display: block; width: 100%; height: auto; margin-top: 2em;}
.about-txt dt{ display: none; }
.about-txt dd{ display: block; width: 100%; height: auto; box-sizing: border-box; padding-bottom: 15px;}
.about-txt dd h2{ font-size: 2em; color: #008fc1; }
.about-txt dd span{ display: block; font-size: 1em; color: #24acdc; padding: 15px 0 10px 0; }
.about-txt dd p{ font-size: 0.85em; color: #555; line-height: 26px; }
.about-txt dd a{ display: block; width: 123px; height: 38px; background: #60bdde !important; color: #fff !important; line-height: 38px; text-align: center; margin-top: 15px; }
.about-txt dd a em{ font-style: normal; font-family: '宋体'; padding-left: 7px; }
.about-btn{ width: 100%; height: auto;  }
.about-btn a{ display: block; width: 100%; height: auto; overflow: hidden; }
.about-btn a img{ width: 100%; }

/* 品牌展示 */
.in-brand-box{ width:90%; height: auto; overflow: hidden; margin: 0 auto; padding-bottom: 5%;}
.in-brand-list{ width: 100%; height: auto; overflow: hidden; margin-top: 1em; }
.in-brand-list ul li{display: block; width: 30%; height: auto; float: left; border:solid 1px #eee; margin:1.2%; position: relative;}
.in-brand-list ul li img{ width: 100%; height: auto; }
.in-brand-list ul li:hover .line1{ display: block; width: 1px; height: 100%; left: 0; bottom: 0; background: #60bdde; position: absolute; animation: lineone 0.2s linear 0s alternate forwards; opacity: 0;}
.in-brand-list ul li:hover .line2{ display: block; width: 100%; height: 1px; left: 0; top: 0; background: #60bdde; position: absolute; position: absolute; animation: linetwo 0.2s linear 0.4s alternate forwards; opacity: 0;}
.in-brand-list ul li:hover .line3{ display: block; width: 1px; height: 100%; right: 0; top: 0; background: #60bdde; position: absolute; animation: lineone 0.2s linear 0.6s alternate forwards; opacity: 0;}
.in-brand-list ul li:hover .line4{ display: block; width: 100%; height: 1px; right: 0; bottom: 0; background: #60bdde; position: absolute; animation: linetwo 0.2s linear 0.8s alternate forwards; opacity: 0;}


/*本例css*/
.www51buycom { width:90%; height:auto;position: relative; overflow:hidden; margin:0 auto 35px auto;}
.www51buycom a{ blr: expression(this.onFocus=this.blur()); outline: none; }
/*数字按钮样式*/
/*控制居中的时候，需要定位left50%，然后margin负当前DIV的宽度*/
.www51buycom .num { overflow:hidden; height: 12px;  bottom:20px; zoom:1; z-index:3; position: absolute;  left: 50%;  display: inline-block;  -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0);  transform: translate(-50%, 0);}
.www51buycom .num li { width: 12px; height: 12px; line-height: 112px; text-align: center; font-family: "微软雅黑", Arial; color: #FFFFFF; background: #262626; margin:0 3px; border-radius:12px; cursor:pointer; float: left; }
.www51buycom img.indexbanimg{ width: 100%; }
.www51buycom .num li.on { background: #c00900;} /*当前项*/


/*上一个  下一个*/
.www51buycom .next,.prev  { display: none; width: 40px; height: 100px; background: url(../images/btn.png) no-repeat; position: absolute; top: 115px;}
.www51buycom .prev { left: 0; }