/*
Theme Name: DouPHP Default
Theme URI: http://demo.douco.com/
Description: DouPHP 默认模板
Version: 1.0
Author: DouCo Co.,Ltd.
Author URI: http://www.douco.com/
*/
/* 初始化
----------------------------------------------- */
body{font-family: Microsoft Yahei, \5FAE\8F6F\96C5\9ED1, \5b8b\4f53, Arial, Lucida, Verdana, Helvetica, sans-serif; color: #555; background-color: #fff;}
body, button, input, textarea{font-size: 12px; line-height: 1.531; outline: none; margin: 0; padding: 0; border: 0;}
p, ul, ol, dl, dt, dd, form, blockquote{margin: 0; padding: 0;}
a{text-decoration: none; color: #333333;}
a:hover{text-decoration: underline;}
ul, ol{list-style: none;}
h1, h2, h3, h4, h5, h6{font-size: 12px; margin: 0; padding: 0;}
input, select{font-family: Microsoft Yahei; vertical-align: middle;}
em, b, i{font-style: normal; font-weight: normal;}
img{vertical-align: middle; border: 0;}
label{cursor: pointer;}
.red{ color: #e00; }
/* 主体框架
----------------------------------------------- */
#wrapper .wrap{width: 1200px; margin: 0px auto;}
#wrapper .mb{ box-sizing: border-box; margin: -110px auto 0; padding: 50px; position: relative; z-index: 9; background: #fff;}
/* -- page -- */
#pageLeft{float: left; width: 180px; margin-right: 20px;}
#pageIn{float: left; width: 780px; overflow: hidden;}
/* -- index -- */
#indexLeft{float: left; width: 600px;}
#indexRight{float: right; width: 360px; text-align: left;}
/* 头部导航
----------------------------------------------- */
/* -- top -- */
#top{background-color: #EEEEEE; height: 30px; border-bottom: 1px solid #D8D8D8; text-align: right; color: #CCC;}
#top a{height: 28px; line-height: 28px; color: #555;}
#top s{top: 9px; left: 0; width: 0; height: 12px; border-left: 1px solid #DDD; overflow: hidden;}
/* userTop */
#top .userTop{float:left;}
#top .userTop s{margin:0 12px;}
/* topNav */
#top .topNav{ position: relative; z-index: 1000; height: 30px; float: right; margin-right:-5px;}
#top .topNav li{border: 1px solid #EEEEEE; border-bottom: 0; float: left; zoom: 1; text-align: center;}
#top .topNav li a{padding: 0 12px;}
#top .topNav li.hover{position: relative; background: #FFFFFF; border: 1px solid #DDDDDD; border-bottom: 0;}
#top .topNav li.hover s{border-left: 1px solid #FFF;}
#top .topNav ul{background: #FFFFFF; border: 1px solid #DDDDDD; border-top: 0; width: 100%; display: none; position: absolute; top: 100%; left: -1px; padding-bottom: 4px;}
#top .topNav ul li{float: none;}
#top .topNav li.hover ul li{border: none;}
#top .topNav li.hover ul li a{height: 25px; line-height: 25px;}
/* -- header -- */
#header{min-height: 80px;}
#header .logo{padding: 20px 0; float: left;}
.domain{ float: right; padding: 20px 0; }
.domain a{ display: inline-block; height: 21px; padding-left: 25px; margin-left: 20px; background: url(images/domain.png) no-repeat left top; font-size: 14px; font-family:Microsoft Yahei; color: #999; vertical-align: middle;}
.domain .favorite{background-position: left bottom;}

/* -- mainNav -- */
#mainNav{ border-top: solid 1px #eee; clear: both; font-size: 16px; position: relative; z-index: 99; text-align: center;}
/* LEVEL ONE */
#mainNav>li{ display: inline-block;; border-bottom:solid 2px #fff; margin: 0 1px;}
#mainNav>li>a{display: block; width: 110px; text-align: center; height: 60px; line-height: 60px;  color: #000000; text-decoration: none;}
#mainNav>li:hover,#mainNav>li.hover, #mainNav>li.cur{ border-bottom:solid 2px #15a; position: relative;}
/* LEVEL TWO */
.subnav{ width:500px; position: absolute; top: 62px; left: 0; display: none; }
.subnav li{ float: left; padding: 10px 0; background: rgba(0,0,0,0.3); }
.subnav a{ display: inline-block; width: 110px; font-size: 14px; color: #fff;  border-right: solid 1px #fff;}
.subnav li:last-child a{ border: none;}
#mainNav>li:hover .subnav{ display: block; }

/* LEVEL THREE */

/* 首页样式
----------------------------------------------- */
/* -- slideShow -- */
.slideShow{position: relative; margin: 0 auto; padding: 0; *zoom: 1;}
.slideShow .slides a{display: block; height: 350px; background-repeat: no-repeat; background-position: center center;}
.slideShow .slideBox{background: #fff; /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0);}
/* -- slideLoading -- */
.slideShow .slideLoading{min-height: 50px; background: url(images/slide_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 60;}
/* -- previous 和 next 按钮 -- */
.slideShow .arrowBox a{z-index: 70; font-family: \5b8b\4f53, sans-serif; position: absolute; display: block; margin-bottom: -20px; width: 40px; height: 40px; bottom: 50%; line-height: 40px; text-decoration: none; text-align: center; color: #fff; font-size: 2em; background-color: #333; background-color: rgba(50, 50, 50, .3);}
.slideShow .arrowBox a.disabled{display: none;}
.slideShow .arrowBox .arrowPrev{left: 20px;}
.slideShow .arrowBox .arrowNext{right: 20px;}
.slideShow .arrowBox a:hover{background-color: rgba(50, 50, 50, .6);}
/* -- controlBox -- */
.slideShow .controlBox{z-index: 70; position: absolute; bottom: 100px; width: 100%; text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666;}
.slideShow .controlBox .control{display: inline-block; *zoom: 1; *display: inline;}
.slideShow .controlBox.controlDefault a{background: url(images/inactive.png) no-repeat 50% 50%; text-indent: -9999px; overflow:hidden; width: 20px; height: 30px; clear: none; display: block;}
.slideShow .controlBox.controlDefault a:hover, .slideShow .controlBox.controlDefault a.active{background: url(images/active.png) no-repeat 50% 50%;}
/* -- slideTitle -- */
.slideShow .slideTitle{z-index: 70; position: absolute; bottom: 0; left: 0; background: #666\9; background: rgba(80, 80, 80, 0.75); width: 100%;}
.slideShow .slideTitle span{color: #fff; display: block; font-size: .85em; padding: 15px 10px;}
/* -- sileThumb -- */
.slideShow .sileThumb{z-index: 70; text-align: center; position: absolute; bottom: 8px; right: 8px;}
.slideShow .sileThumb a{margin: 0 3px;}
.slideShow .sileThumb a img{border: solid #B0B0B0 1px;}
.slideShow .sileThumb a.active img{border: solid #19B4EA 1px;}
 
 /*application*/
.application{ position: relative; width: 1120px; padding:40px; margin: -95px auto 0; border:solid 1px #eee;  background: #fff;  z-index: 9; overflow: hidden; }
.application .item{ display: block; float: left; width: 500px; height: 110px; font-size: 14px; line-height: 26px; }
.application .item:first-child{ padding-right: 59px; border-right:solid 1px #eee; }
.application .item:last-child{ padding-left: 60px; }
.application .item:hover{ text-decoration: none; color:  }
.application .item img{ display: block; float: left; margin-right: 30px; transition:transform .2s;}
.application .item:hover img{ transition:transform .2s; transform: translate(-5px,0);}
.application .item .title{ font-size: 24px; line-height: 24px; font-weight: normal; margin-bottom: 10px; }

/*product*/
#wrapper .product{ margin: 40px auto 60px;}
.maintitle{ font-size: 30px; color: #15a; line-height: 60px; margin-bottom: 15px; font-weight: normal; }
.maintitle .sub{ font-size: 24px; color: #ccc; }
.bottomline{ border-bottom: solid 1px #eee; text-align: center; position: relative; }
.bottomline::after{ position: absolute; bottom: 0; left: 50%; width: 270px; height: 2px; margin-left: -135px; content: "";background: #15a;}
.product .list{ margin: 40px -30px; overflow: hidden; }
.product .item{ float: left; width: 360px; margin: 0 30px; background: #f3f3f3; overflow: hidden;}
.product .item img{ transform: scale(1,1); transition:transform .3s;}
.product .item:hover img{ transform: scale(1.05,1.05); transition:transform .3s;}
.intro{ padding: 30px;  font-size: 14px; line-height: 26px; color: #666;}
.intro .title{ font-size: 24px; color: #333; font-weight: normal; margin-bottom: 20px;}
.intro .more{ display: block; padding-left: 30px; margin-top: 30px; background:url(images/more.jpg) no-repeat #fff; width: 100px; text-align: center; line-height: 30px;}


/*server*/
.server{ height: 360px; padding: 60px 0;  background: url(images/server_bg.jpg) center no-repeat; }
.server .intro{ width: 300px; height: 300px; background: rgba(255,255,255,0.5); }
.server .wrap{ position: relative; }
.server .icon{ position: absolute; top:120px; right: 0; font-size: 14px; }
.server .icon a{ display: inline-block; margin-left:50px; text-align: center; }
.server .icon i{ display: block;width: 82px; height: 82px; margin-bottom: 10px; background: url(images/icon.png); }
.server .icon .icon2{ background-position: 0 -82px; }
.server .icon .icon3{ background-position: 0 -164px; }
.server .icon .icon4{ background-position: 0 -246px; }


.news{ float: left; width: 665px; padding: 40px 0 60px; }
.news .item{ display: block; overflow: hidden; font-size: 14px; color: #999; padding-bottom: 25px; border-bottom: dashed 1px #eee; margin-bottom: 25px; }
.news .item:last-child{ padding-bottom: 0;margin-bottom: 0;border-bottom: none; }
.news .time{ float: left; display: block; width: 80px; height: 80px; background: #f3f3f3; margin-right: 30px; font-size: 16px; text-align: center;}
.news .date{ display: block; font-size: 24px; padding-top: 10px;}
.news .title{ font-size: 16px; color: #333; font-weight: normal; margin-bottom: 10px; }
.about{ float: right; width: 475px; padding: 40px 0 60px;}
.about .intro{ background: #f3f3f3;}



/* -- link -- */
.link{ padding: 20px 0;background: #fcfcfc; }
.link .list{ margin-right: -24px; overflow: hidden;}
.link strong{ font-weight: normal; font-size: 16px; color: #333; margin-right: 15px;}

.link a{ display: block; float: left; margin:0 24px 24px 0; font-size: 14px; color: #999; }
.link a:hover{ color: #15a; text-decoration: none;  }

/* page
----------------------------------------------- */
.banner{ height: 350px; position: relative; }
.banner.indusry{ background: url(images/banner/indusry.jpg) center; margin: 0; }
.banner.clean{ background: url(images/banner/clean.jpg) center; margin: 0; }
.banner.server{ background: url(images/banner/server.jpg) center; margin: 0; }
.banner.article{ background: url(images/banner/article.jpg) center; margin: 0; }
.banner.aboutbanner{ background: url(images/banner/about.jpg) center; margin: 0; }
.banner.contact{ background: url(images/banner/contact.jpg) center; margin: 0; }
.mb{ font-size: 14px; line-height: 24px;}
.mb .page_title{ margin-bottom: 10px; font-size: 30px; line-height: 30px; text-align: center; color:#333;  }
.mb .page_content{ }
.mb .info{  text-align: center; }
.mb .content{  text-align: center; color: #999;  padding: 20px 0;}
.mb p{ margin: 20px 0;}

#product li{ display:inline-block; width: 280px; height: 160px;  padding: 0 30px; vertical-align: top; border-right: solid 1px #eee; }
#product li:last-child{ border:none;  }
#product h5{ color: #15a; font-size: 18px; font-weight: normal;  }
#product h5 strong{ display: block; color: #ccc; font-size: 14px;  }




/* product_category
----------------------------------------------- */
.productList{padding-top: 20px; color: #999999;}
.productList dl{float: left; width: 370px; height: 160px; margin: 0 20px 30px 0;}
.productList dl.last{margin-right: 0;}
.productList dt{float: left; width: 160px;}
.productList dd{float: left; width: 195px; padding: 15px 0 0 15px;}
.productList dt img{border: 1px solid #EEEEEE;}
.productList .name{height: 18px; overflow: hidden;}
.productList .name a{color: #333333; font-weight: bold;}
.productList .brief{color: #999999; padding-top: 8px; height: 60px;}
.productList .price{padding-bottom: 10px;}
/* product
----------------------------------------------- */
#product{padding: 15px 0;}
#product .productImg{float: left; width: 300px;}
#product .productInfo{float: left; width: 465px; padding: 10px 0 0 15px; line-height: 200%;}
#product .productInfo h1{font-size: 18px;}
#product .productInfo ul{padding-top: 10px; margin-bottom:50px;}
#product .productInfo .productPrice{margin-bottom: 5px;}
#product .productInfo .productPrice .price{font-family: Arial; font-size: 20px; font-weight: bold;}
#product .productInfo .btnAsk{zoom: 1; overflow: hidden;}
#product .productInfo .btnAsk dt{float: left; width: 88px; height: 39px; line-height: 39px; text-align: right; padding-right: 3px; margin-right: 6px; background-color: #E0E0E0; color: #333; font-weight: bold;}
#product .productInfo .btnAsk dd{float: left; width: 300px;}
#product .productInfo .btnBuy{margin-bottom: 40px;}
#product .productInfo .btnBuy .addToCart{background:#19B4EA url(images/btn_addtocart.png) no-repeat 20px 50%; color: #FFFFFF; padding: 8px 25px 8px 50px; text-decoration: none; cursor: pointer; font-size:16px;}
#product .productInfo .btnBuy .addToCart:hover{background-color: #44C4EE;}
#product .productContent{padding: 15px 0;}
#product .productContent h3{height: 35px; line-height: 35px; color: #7A7F81; font-weight: bold; font-size: 14px; border-bottom: 1px solid #CBD1D3;}
#product .productContent ul{padding: 15px 0; color: #666; line-height: 200%;}
/* article_category
----------------------------------------------- */
.articlelist{ overflow: hidden; }
.articlelist .news{ width: 700px;  }
.articlelist .smallbanner{ float: right; width: 293px; padding: 40px 0;  }
.articlelist .smallbanner a{ display:block; margin-bottom: 30px;}
/* article
----------------------------------------------- */
#article{padding: 20px 0;}
#article h1{color: #333333; font-size: 18px; font-weight: bold;}
#article .info{padding: 2px 0 20px 0; color: #999999; font-size: 13px;}
#article .content{color: #666666; line-height: 180%;}
/* 提示信息
----------------------------------------------- */
#douMsg{padding: 10px 0 100px 0;}
#douMsg dl{padding: 160px 0 200px 0; text-align: center; border: 1px solid #E4E4E4;}
#douMsg dt{color: #0072C6; font-size: 16px; margin-bottom: 30px; font-weight: bold;}
#douMsg dd{color: #666;}
#douMsg dd a{margin-left: 5px; color: #000;}
/* 全局样式
----------------------------------------------- */
/* -- common -- */
.captcha{text-transform: uppercase;}
#vcode{cursor: pointer;}
.clear{clear: both; height: 0; line-height: 0; font-size: 0;}
.none{display: none;}
.cue{color: red; font-size:12px;}
.price{color: #CC0000;}
/* -- form -- */
.btn{display: inline-block; background-color: #0072C6; color: #EEE; padding: 6px 25px; text-transform: capitalize; cursor: pointer; font-weight: bold; text-align:center; -webkit-appearance: none;}
.btn:hover{text-decoration: none; color: #FFFFFF; background-color: #007AD5;}
.btnGray{display: inline-block; background-color: #CCC; border: 0; color: #333; padding: 6px 15px; text-transform: capitalize; cursor: pointer; font-weight: bold; -webkit-appearance: none;}
.btnPayment{display: inline-block; background-color: #ff4246; color: #FFF; padding: 7px 28px; text-transform: capitalize; cursor: pointer; font-weight: bold; font-size:14px; text-align:center; -webkit-appearance: none;}
/* -- input -- */
.textInput{height: 20px; padding: 6px; font-size: 14px; border: 1px solid #DDD; background-color:#F4F4F4; color:#666; -webkit-appearance: none;}
.textArea{padding: 4px; border: 1px solid #DDDDDD; background-color:#F4F4F4; line-height: 20px; -webkit-appearance: none;}
.textAreaAuto{border: 1px solid #DBDBDB; background-color:#F4F4F4; padding: 0; font-size: 12x; line-height: 20px; resize: none; min-height: 40px; -webkit-appearance: none;}
/* -- incBox -- */
.incBox{margin-bottom: 15px;}
.incBox h3{height: 35px; line-height: 35px; color: #7A7F81; font-weight: bold; font-size: 14px; border-bottom: 1px solid #CBD1D3;}
.incBox h3 a{color: #7A7F81;}
/* -- urHere -- */
.urHere{height: 35px; line-height: 35px; margin:10px 0;  color: #999999;  font-size: 14px;}
.urHere a{color: #999999;}
.urHere b{margin: 0 8px;}
/* -- tree -- */
.treeBox{margin-bottom: 15px;}
.treeBox h3{height: 35px; line-height: 35px; color: #7A7F81; font-weight: bold; font-size: 14px; border-bottom: 1px solid #CBD1D3;}
.treeBox li{border-left: 4px solid #F4F4F4; line-height: 15px; margin-top: 15px; padding-left: 10px;}
.treeBox li.cur{border-left: 4px solid #19B4EA;}
.treeBox li a{color: #7A7F81;}
.treeBox .search{margin:20px 0;}
.treeBox .search .keyword{width: 136px;}
/* -- searchBox -- */
.searchBox{ background-color: #FFF; height: 30px; padding-left: 10px;}
.searchBox{position: relative; white-space: normal}
.searchBox label{height: 0; line-height: 0; overflow: hidden; width: 0; position: absolute; font-size: 0; z-index: -1; outline: 0}
.searchBox .keyword{color: #CCCCCC; width: 150px;}
.searchBox .keyword:focus{color: #555}
.searchBox .keyword::-webkit-input-placeholder{color:#CCCCCC;}
.searchBox .keyword:focus:-moz-placeholder, .searchBox .keyword:focus::-moz-placeholder{color:transparent!important}
.searchBox .keyword:focus::-webkit-input-placeholder{color:transparent!important}
.searchBox .btnSearch{background: #E0E0E0 url(images/btn_search.gif) no-repeat; width: 28px; height: 28px; text-indent: -999px; overflow:hidden; cursor: pointer;}
/*- tableBasic -*/
.tableBasic{color: #666666; border-left: 1px solid #DDDDDD; border-top: 1px solid #DDDDDD; border-collapse: collapse;}
.tableBasic select{color: #8F8F8F;}
.tableBasic td, .tableBasic th{border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD;}
.tableBasic th{background-color: #EFEFEF;}
.tableBasic .child{background-color: #FFFFFF;}
.tableBasic td label{margin-right:15px;}
.tableBasic td i{color:#F00; margin-left:5px; font-weight:bold;}
/*- tableDiv -*/
.tableDiv dl{zoom:1; overflow:hidden; margin-bottom:15px;}
.tableDiv dl dt{float:left; width:160px; text-align:right; line-height:34px; font-size:13px;}
.tableDiv dl dd{float:left; width:640px; padding-left:10px;}
.tableDiv dl dd i{color:#F00; margin-left:5px; font-weight:bold;}
.tableDiv dl dd label{margin-right: 15px; line-height:34px;}
/* -- lift -- */
.lift{margin-top:60px; color:#999; text-align: center;}
.lift a{color:#999;}
.lift span{margin-right:15px;}
/* -- pager -- */
.pager{text-align: right; padding-top: 20px; color: #666;}
.pager a{color: #666; text-decoration: underline;}
/* -- douBox -- */
#douBox .boxBg{position: fixed; top: 0; left: 0; z-index: 10000001; width: 100%; height: 100%; background: #000; filter: alpha(opacity=15); opacity:0.15}
#douBox .boxFrame{position: absolute; z-index: 10000002; overflow: hidden; padding: 0; border: 2px solid #C4C4C4; background-color:#FFF; width:360px; left:50%; top:300px; margin-left:-180px;}
#douBox .boxFrame h2{height: 28px; padding: 0 10px; background: #f5f5f5; line-height: 28px; color: #666; font-size:14px; font-weight:normal;}
#douBox .boxFrame h2 .close{background: url(images/icon_fork.png) no-repeat; width:12px; height:12px; display:block; float:right; text-indent:-9999px; margin-top:8px;}
#douBox .boxFrame .boxCon{background: url(images/icon_exclamation.png) no-repeat 15px 15px; padding:13px 10px 15px 70px; height:100px;}
#douBox .boxFrame .boxCon dt{font-family:Microsoft YaHei; font-size:16px; color:#19B4EA; font-weight:bold;}
#douBox .boxFrame .boxCon dd{color:#999; zoom:1; overflow:hidden;}
#douBox .boxFrame .boxCon dd a{background-color:#F5F5F5; border: 1px solid #CBD1D3; display:block; float:left; width:70px; line-height:26px; text-align:center; margin:10px 12px 0 0; text-decoration:none;}
/* -- onlineService -- */
#onlineService{position: fixed; _position: absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight)-380+"px"); top: 208px; right: 0; z-index: 999999; display: block;}
#onlineService .onlineIcon{position: relative; cursor: pointer; background: url(images/online_service.png) no-repeat; width: 34px; height: 110px; text-indent: -9999px; overflow:hidden;}
#onlineService #pop{border: 3px solid #19B4EA; background-color: #F2F2F2; padding: 8px; width: 95px; min-height: 84px; position: absolute; right: 34px; top: 0; display: none; z-index: 999999;}
#onlineService .onlineQQ a{display: block; background: url(images/online_service.png) no-repeat left -160px; color: #19B4EA; width: 82px; height: 24px; line-height: 23px; padding-left: 27px; margin-bottom: 8px;}
#onlineService .onlineQQ a:hover{text-decoration: none; color: #19B4EA;}
#onlineService .service{border-top: 1px solid #DDDDDD; padding-top: 8px; color: #666;}
#onlineService .service a{color: #666;}
#onlineService .service li{background: url(images/online_service.png) no-repeat left -202px; padding-left: 8px;}
#onlineService .goTop{display: none;}
#onlineService .goTop .goBtn{background: #F2F2F2 url(images/online_service.png) no-repeat left -120px; width: 34px; height: 34px; display: block;}
/* footer
----------------------------------------------- */
#footer{  background: #eee;padding: 40px 0 0;line-height: 25px;color: #999999;}
#footer a{color: #999;}
#footer .footNav{ overflow: hidden; }
#footer .footNav .item{ float:left; width:120px; margin-right: 20px; line-height: 20px; }
#footer .footNav .phone{ float:left; width:180px; margin-left: 30px; font-size: 20px; color: #333; }
#footer .footNav .phone h5{ background: url(images/phone.png) no-repeat 80px 50%; }
#footer .footNav .ewm{ float:right; width:100px; margin-left: 30px; text-align: center;}
#footer .footNav .item a{ display: block; font-size: 14px;  line-height: 24px; }
/*#footer .footNav .ewm{ margin-right: 30px; width: 90px; text-align: center; }*/
#footer .footNav .title{ font-size: 18px; font-weight: normal; color: #333; margin-bottom: 15px; }
#footer .copyRight{ font-family: Arial, Lucida, Verdana, Helvetica, sans-serif; padding:10px 0; margin-top: 15px; text-align: left; border-top: solid 1px #ddd;}
#footer .copyRight .content{ float: right; color: #ccc;}
#footer .copyRight .content a{ color: #ccc;}