/*
Theme Name:zbtraining
Theme Author:博客吧
Theme Url:http://www.boke8.net/zbtraining.html 
Theme Version:1.0
*/
div,html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {margin:0; padding:0;}
body {background-color:#fff; font:100%/1.5em 'Microsoft Yahei',tahoma,Arial; overflow-x:hidden;}
a {text-decoration:none;}
li {list-style:none;}
.clear {clear:both;}
.leonhereclear {clear:both;}
a img {border:none;}
table {background-color: transparent; border-spacing: 0; border-collapse: collapse; font-size:0.75em; width:100%;border-top:solid 1px #ddd;border-left:solid 1px #ddd; box-sizing: border-box;}
table th{background-color:#f9f9f9;text-align:center; box-sizing: border-box;}
table td,table th{padding:5px 10px;border:1px solid #ddd; box-sizing: border-box;}
/*gold*/
.inner {width:1200px; margin:0 auto; position:relative;}
.banner {margin-bottom:30px;}
.banner img {display:block; width:100%; height:auto;}
/*top*/
#top {position:relative; z-index:2; background:#282828; width:100%; color:#fff; font-size:0.875em; height:36px; line-height:36px; font-weight:bold;}
#top .inner {position:relative;}
#top .tel {float:left; background:url(images/phone.png) no-repeat left center; padding-left:18px;}
#top .tel a {color:#fff;}
.social {float:right; margin-top:4px; display:inline;}
.social ul li {float:left; margin-left:5px; display:inline;}
.social ul li a {display:block; width:26px; height:26px; background:url(images/social_icon.png) no-repeat;}
.social ul li.qq a {background-position:-36px -2px;}
.social ul li.qq a:hover {background-position:-109px -2px;}
.social ul li.weixin a {background-position:0 -2px;}
.social ul li.weixin a:hover {background-position:-73px -2px;}
.social ul li.weibo a {background-position:-147px -2px;}
.social ul li.weibo a:hover {background-position:-183px -2px;}
.social ul li.search a{background:url(images/search.png) no-repeat center center;}
/*logo*/
.logo {float:left; padding:20px 0; overflow:hidden;}
.logo a {text-indent:-99999em; overflow:hidden; display:block; width:200px; height:60px; background:url(images/logo.png) no-repeat left center; background-size:contain;}
/*header*/
#header {width:100%; border-bottom:1px solid #eee;}
/*nav*/
.nav {float:right; height:40px; padding:30px 0;}
.nav li {float:left; display:inline-block; margin:0 10px; font-size:20px; line-height:40px; position:relative; transition:all 0.4s ease 0s;}
.nav li em {display: none;}
.nav li a {display:block; color:#333; padding:0 10px; border-radius:3px;}
.nav li a:hover,
.nav li.on > a,
.nav li.cur > a {background-color:#178EEE; color:#fff;}
.nav li ul {position:absolute; left:-1px; top:40px; background:#fff; border:1px solid #eee; border-radius:0 0 3px 3px; width:100%; padding:5px 0; display:none; z-index:5;}
.nav li li {font-size:14px; float:none; margin:0; display:block; text-align:center; line-height:2em;}
.nav li li a {padding:5px 10px;}
.nav li li a:hover {border-radius:0;}
/*navbtn*/
#navbtn {position:absolute; right:0; top:50%; transform:translateY(-50%); cursor:pointer; display:none; width:25px; height:20px;}
#navbtn i {display:block; position:absolute; top:50%; left:0; margin-top:-1px; height: 2px; background-color:#999; width:100%;}
#navbtn i:before, #navbtn i:after {content:''; display:block; height: 2px; background-color:#999; position:absolute; left:0; width:100%;}
#navbtn i:before {top:-9px;}
#navbtn i:after {bottom:-9px;}
/*banner*/
#slidershow {width:100%; height:auto; overflow:hidden; clear:both; background:#fff;}
#slidershow img {width:100%; max-width:1920px; display:block;}
/*slides*/
.owl-carousel {display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1;}
.owl-carousel img {width:100%; height:auto; display:block;}
.owl-carousel .owl-stage {position: relative; -ms-touch-action: pan-Y;
 -moz-backface-visibility: hidden;}
.owl-carousel .owl-stage:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.owl-carousel .owl-stage-outer {position: relative; -webkit-transform: translate3d(0px, 0px, 0px); }
.owl-carousel .owl-wrapper,.owl-carousel .owl-item {-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); }
.owl-carousel .owl-item {position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.owl-carousel .owl-nav.disabled,.owl-carousel .owl-dots.disabled { display: none;}
.owl-carousel .owl-nav .owl-prev,.owl-carousel .owl-nav .owl-next {cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-indent:-9999em; width:35px; height:35px; position:absolute; top:50%; margin-top:-17.5px; padding:0;}
.owl-carousel .owl-nav .owl-prev {background:url(images/controls.png) no-repeat 0 0; left:15px; transition:background 0.3s ease 0s;}
.owl-carousel .owl-nav .owl-next {background:url(images/controls.png) no-repeat -42px 0; right:15px; transition:background 0.3s ease 0s;}
.owl-carousel .owl-nav .owl-prev:hover {background-position:0 -35px;}
.owl-carousel .owl-nav .owl-next:hover {background-position:-42px -35px;}
.owl-carousel.owl-loaded {display: block; }
.owl-carousel.owl-loading {opacity: 0; display: block; }
.owl-carousel.owl-hidden {opacity: 0; }
.owl-carousel.owl-refresh .owl-item { visibility: hidden; }
.owl-carousel.owl-drag .owl-item {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity:0.2;}
.owl-carousel.owl-drag .owl-item.active {opacity:1;}
.owl-carousel.owl-grab { cursor: move; cursor: grab;}
.owl-carousel.owl-rtl {direction: rtl; }
.owl-carousel.owl-rtl .owl-item {float: right; }
.no-js .owl-carousel {display: block; }
.owl-carousel .animated {animation-duration: 1000ms; animation-fill-mode: both; }
.owl-carousel .owl-animated-in { z-index: 0; }
.owl-carousel .owl-animated-out { z-index: 1; }
.owl-carousel .fadeOut { animation-name: fadeOut; }
@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } 
}
.owl-height {transition: height 500ms ease-in-out; }
.owl-carousel .owl-item .owl-lazy {opacity: 0;  transition: opacity 400ms ease; }
.owl-carousel .owl-item img.owl-lazy {transform-style: preserve-3d; }
.owl-carousel .owl-video-wrapper {position: relative; height: 100%; background: #000; }
.owl-carousel .owl-video-play-icon {position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; }
.owl-carousel .owl-video-play-icon:hover {-ms-transform: scale(1.3, 1.3);    transform: scale(1.3, 1.3); }
.owl-carousel .owl-video-playing .owl-video-tn,.owl-carousel .owl-video-playing .owl-video-play-icon { display: none; }
.owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; }
.owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%;
  width: 100%; }  
.owl-nav { text-align: center; -webkit-tap-highlight-color: transparent; }
.owl-nav [class*='owl-'] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #D6D6D6; display: inline-block; cursor: pointer; border-radius: 3px; }
.owl-nav .disabled { opacity: 0.5; cursor: default; }
.owl-nav.disabled + .owl-dots { margin-top: 10px; }
.owl-dots {text-align: center;-webkit-tap-highlight-color: transparent; position:absolute; bottom:10px; width:100%; left:0;}
.owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; cursor:pointer;}
.owl-dots .owl-dot span {width: 15px; height: 5px; margin: 5px 5px;  background: #fff;  display: block;  -webkit-backface-visibility: visible;  transition: opacity 200ms ease; }
.owl-dots .owl-dot.active span,.owl-dots .owl-dot:hover span {background: #1E95F5; }
/*notice*/
#notice {background:rgba(23,142,238,0.9); margin-bottom:30px; padding:10px 0; color:#fff; overflow:hidden; font-size:16px; line-height: 1.875em;}
#notice.nb {margin-bottom: 0;}
/*service*/
#service {background-color: #fafafa;padding: 2% 0;overflow: hidden;}
#service ul {text-align:center; font-size:0; line-height: normal; overflow:hidden;}
#service li {width:14%; text-align:center; display:inline-block; padding:3%; }
#service li .thumbnail {width:60%; height:auto; margin: 0 auto 15px; border-radius:50%; overflow:hidden;}
#service li i {padding-bottom:100%; background:no-repeat center center; background-size:cover; display: block;}
#service li h2 {font-weight:normal; font-size:14px; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#service li a {color:#333; display:block; overflow:hidden;}
#service li a:hover {color:#1E95F5;}
/*section*/
.onbg {position:absolute; width:100%; height:100%; background:#000; opacity:0.5; left:0; top:0; display:none;}
/*hmTitle*/
.hmTitle {text-align:center; margin-bottom:3.5%; padding-bottom: 30px;}
.hmTitle .title {display: inline-block; position:relative;}
.hmTitle .title:before, .hmTitle .title:after {width:30px; height: 1px; background-color: #178EEE; transform:rotate(-45deg); content:''; display:block;margin-top:20px; position:absolute; left:50%;}
.hmTitle .title:before {margin-left:40px;}
.hmTitle .title:after {margin-left:-70px;}
.hmTitle i {display: inline-block; width:40px; height:40px; text-transform: uppercase; color:#fff; border-radius:50%; margin:0 auto; background-color: #178EEE; font:normal 26px/42px 'Arial'; position: relative;}
.hmTitle h3, .hmTitle h4 {font-weight: normal; color:#178EEE; font-size:18px; line-height: 1.5em; text-transform: uppercase; clear: both;}
.hmTitle h4 {color:#bbb;}

.bluebg .hmTitle i {background-color: #fff; color:#178EEE;}
.bluebg .hmTitle h3, .bluebg .hmTitle h4 {color:#fff;}
.bluebg .hmTitle .title:before, .bluebg .hmTitle .title:after {background-color: #fff;}
/*hmowl*/
#hmowl {padding:5% 0; overflow:hidden;}
#hmowl .box {padding:0 60px;}
#hmowl .owl-nav .owl-prev {left:-60px;}
#hmowl .owl-nav .owl-next {right:-60px;}
#hmowl .owl-stage-outer {overflow:hidden;}
#hmowl .bxitem {border:1px solid #eee; margin-right:1px;}
#hmowl .thumbnail {overflow:hidden;}
#hmowl .thumbnail a {display:block; padding-bottom:80%; position:relative;}
#hmowl .thumbnail img {position:absolute; top:0; height:100%;}

#hmowl h2 {font-weight:normal; font-size:18px; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.5em; margin-bottom:10px;}
#hmowl a {color:#333;}
#hmowl a:hover {color:#1E95F5;}
#hmowl .info {padding:20px;}
#hmowl .intro {font-size:14px; line-height:1.75em; text-align:justify; height:7em; overflow:hidden; color:#555; margin-bottom: 15px;}

#hmowl .more a { font-size:12px; display:block; width:90px; height:32px; line-height: 32px; text-align:center; background-color:#f6f6f6; color: #999; border-radius:3px; margin:0 auto;}
#hmowl .more a:hover {background-color:#1E95F5; color:#fff;}
/*bluebg*/
.bluebg {background:#1E95F5; width:100%; padding:5% 0;}
#products ul {width:102%;}
#products li {float:left; width:23%; padding-right:2%; padding-bottom:2%;}
#products li .thumbnail {border:2px solid #fff; padding-bottom:78%; position:relative; overflow:hidden; margin-bottom:5%;}
#products li .thumbnail img {position:absolute; top:0; width:100%; height:100%; display:block;}
#products li a {color:#fff;}
#products li h2 {font-weight:normal; font-size:1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; text-align:center;}
/*showcase*/
#showcase ul {width:104%;}
#showcase ul li {float:left; width:46%; margin-right:4%; margin-bottom:4%; background-color:#f1f1f1; overflow:hidden;}
#showcase ul li .thumbnail {width:172px; height:137px; float:left; overflow:hidden; display:inline-block; position:relative;}
#showcase ul li .thumbnail img {display:block; width:100%; height:100%; position:absolute; top:0;}
#showcase ul li h2 {font-weight:normal; padding:10px 5%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:1.125em; color:#178EEE;}
#showcase ul li p {font-size:0.875em; color:#333; text-align:justify; padding:0 5%;}
#showcase ul li p.info {height:48px; overflow:hidden; margin-bottom:10px;}
#showcase ul li p.more { text-align:right;}
#showcase ul li p.more a{color:#666;}
/*news*/
#news {text-align:center; position:relative; margin-bottom:50px; overflow:hidden;}
#news h2 {font-weight:normal; color:#111; font-size:1.25em; margin-bottom:20px;}
#news h2 a {color:#111;}
#news h2 a:hover {color:#1E95F5;}
#news p {color:#333; width:70%; margin:0 auto 15px; font-size:0.875em;}
#news .owl-dots {bottom:auto; position:static; left:auto; width: auto;}
#news .owl-dots .owl-dot span {background-color:#ddd; width:10px; height:10px; border-radius:50%;}
#news .owl-dots .owl-dot.active span {background-color:#1E95F5;}

#showcase,#products,#container {overflow:hidden; margin-bottom:30px;}
/*partner*/
#partner {overflow:hidden; margin-bottom:30px;}
#partner ul {width:102%; overflow:hidden;}
#partner li {float:left; width:14.66%; padding-right:2%; padding-bottom:2%; }
#partner li a {display:block; border:1px solid #ddd; padding:10px;}
#partner li i {padding-bottom:66.456%; background:no-repeat center center; background-size:contain; display:block;}

.widget .textwidget img {display:block; width:100%; height:auto;}
/*container*/
.sidebar {width:250px; float:left;}
.sideMenu,.widget{margin-bottom:25px;}
.sideMenu h3 a {color:#fff;}
.sideMenu h3,.widget h3 {background-color:#178EEE; color:#fff; padding:15px 10px 5px 20px; font-size:1em;}
.sideMenu h3 span,.widget h3 span {font-weight:normal; font-size:0.75em; margin-left:10px; text-transform:uppercase; text-transform:uppercase;}
.sideMenu ul {background-color:#FFF8FB; border:1px solid #eee;}
.sideMenu li {font-weight:bold; font-size:1em; color:#666; border-bottom:1px solid #eee;}
.sideMenu li a {color:#666; display:block; padding:10px 0 10px 45px;}
.sideMenu li a:hover,.sideMenu li.on a {background:url(images/menu-bg.gif) no-repeat left center; color:#178EEE;}
.widget h3 {padding:8px 10px 5px 20px;}
.widget ul,.widget .textwidget,.widget > div {border:1px solid #eee; padding:10px;}
.widget li {font-size:14px; line-height:2em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.widget li a {background:url(images/dot.png) no-repeat left center; padding-left:12px; color:#333;}
.widget li a:hover {background-image:url(images/dot-on.png); color:#178EEE;}
.widget img {max-width:100%; height:auto;}
.widget .textwidget {padding: 5px; font-size: 0.875em;}
.widget .textwidget img {margin-bottom: 10px;}
#divSearchPanel input[type="text"]{border:1px solid #ddd; width:70%; height:20px; line-height:20px; padding:5px 0;}
#divSearchPanel input[type="submit"] {border:1px solid #ddd; width:24%; cursor:pointer; padding:5px 0; background-color:#178EEE; color:#fff;}
#tbCalendar {width:100%;}
#divCalendar > div {padding:0;}
#tbCalendar a {color:#178EEE;}
#tbCalendar caption {padding:10px 0;}
#tbCalendar thead,#tbCalendar tbody {background:#fff;}
#tbCalendar thead tr th{padding:10px 0;}
#tbCalendar tbody tr td {padding-bottom:10px; text-align:center;}
#tbCalendar tbody tr td a {padding:2px; font-size:0.75em; font-weight:bold;}
#divMisc.widget li a {background:none;}
#contact.fixed {width:inherit; position:fixed; top:10px; left:auto;}
#divTags ul {overflow:hidden;}
#divTags li {float:left;}
#divTags li a {background:none; padding:3px 10px;}
#divTags li .tag-count {display:none;}
/*main*/
.main {width:900px; float:right;}
.breadcrumb-title {border-bottom:1px solid #eee; overflow:hidden; padding-top:6px; margin-bottom:25px;}
.breadcrumb-title h1,.breadcrumb-title .cate {float:left; font-weight:normal; font-size:1.25em; border-bottom:2px solid #178EEE; padding-bottom:5px;}
.breadcrumb-title h1 a,.breadcrumb-title .cate a {color:#000;}
.breadcrumb {float:right; font-size:0.75em; color:#666; background:url(images/home.png) no-repeat left center; padding-left:18px;}
.breadcrumb a {color:#666;}
ul.showlist {overflow:hidden; width:103.3%;}
ul.showlist li {float:left; width:30.333%; margin:0 3% 3% 0;}
ul.showlist li .thumbnail {width:100%; padding-bottom:80%; position:relative; margin-bottom:10px;}
ul.showlist li .thumbnail a {display:block;}
ul.showlist li .thumbnail img,ul.bloglist li .thumbnail img {width:100%; height:100%; display:block; position:absolute; top:0;}
ul.showlist li p {color:#555; font-size:0.875em; text-align:center;}
ul.showlist li p a {color:#555; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
ul.showlist li p a:hover, {color:#178EEE;}
ul.textlist,ul.bloglist {margin-bottom:30px;}
/*newslist*/
.newslist ul {margin-bottom: 5%;}
.newslist li {font-size:16px; line-height: 1.875em; border-bottom:1px dotted #ddd; overflow:hidden; padding-bottom: 8px; margin-bottom: 8px;}
.newslist li span {float:right; color:#666; font-size:12px;}
.newslist li a {background:url(images/dot.png) no-repeat left center; padding-left:15px; color:#444; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; margin-right:70px;}
.newslist li a:hover,.post .related-post ul li a:hover {background-image:url(images/dot-on.png); color:#2D99F0;}
ul.textlist li {height:115px; background:url(images/blog-line.png) no-repeat 120px 0; position:relative; overflow:hidden; transition:all 0.4s ease 0s;}
ul.textlist li span.time {position:absolute; font-size:0.875em; left:0; top:0; color:#666;}
ul.textlist .text-info {padding-left:150px; transition:all 0.4s ease 0s;}
ul.textlist .text-info h2,ul.bloglist li h2 {font-weight:normal; font-size:1.125em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:10px;}
ul.textlist .text-info h2 a,ul.bloglist li h2 a,#showcase ul li a {color:#178EEE; }
ul.textlist .text-info h2 a:hover,ul.bloglist li h2 a:hover {color:#444; text-decoration:underline;}
ul.textlist .text-info p,ul.bloglist li p {font-size:0.75em; color:#444; line-height:1.75em; text-align:justify; height:63px; overflow:hidden;}
ul.bloglist li {overflow:hidden; border-bottom:1px solid #eee; padding-bottom:15px; margin-bottom:25px;}
ul.bloglist li .thumbnail {width:230px; height:184px; float:left; margin-right:25px; display:inline-block; transition:all 0.4s ease 0s; position:relative;}
ul.bloglist li .thumbnail a {display:block;}
.grid-item img,.commentslist ol li .gravatar img {display:block; width:100%; height:auto; transition:transform 0.4s ease 0s;}
ul.bloglist li h2 {padding-bottom:5px; margin-bottom:10px;}
ul.bloglist li p {font-size:0.875em; height:123px;}
.waterfall {width:102%;}
.grid-sizer,.grid-item { width: 31.8%;}
.grid-item { margin-bottom:20px;}
.gutter-sizer { width: 1.5%; }
.grid-item--width2 { width: 40%; }
.grid-item .itembg {background:#f2f2f2; padding:10px; border:1px solid #eee;}
.grid-item .itembg .thumbnail {margin-bottom:15px;}
.grid-item .itembg .thumbnail a {display:block; overflow:hidden;}
.grid-item .itembg .thumbnail img:hover {transform:scale(1.4,1.4); transition:transform 0.4s ease 0s; opacity:0.8;}
.grid-item .itembg h2 {text-align:center; font-weight:normal; font-size:1.125em; margin-bottom:15px;}
.grid-item .itembg h2 a {color:#333;}
.grid-item .itembg p {font-size:0.875em; color:#333; text-align:justify; margin-bottom:15px; line-height:1.75em;}
.grid-item .itembg p.more {text-align:center; font-size:0.75em;}
.grid-item .itembg p.more a {background-color:#eee; padding:0 5px; color:#666;}
.grid-item .itembg p.more a:hover {background:#178EEE; color:#fff;}
/*pagenavi*/
.pagenavi {clear:both; text-align:center; font-size:0; line-height: normal;}
.pagenavi a,.pagenavi span.now-page {display:inline-block; background-color:#dfdfdf; color:#666; height:32px; line-height: 32px; padding:0 12px; font-size:14px; margin:2px;}
.pagenavi a:hover,.pagenavi span.now-page {color:#fff; background-color:#178EEE;}
/*post*/
.post h1 {text-align:center; font-weight:normal; font-size:1.5em; margin-bottom:15px;}
.post h1.post_page {margin-bottom:30px;}
.post .postmeta {font-size:0.75em; color:#888; text-align:center; margin-bottom:25px;}
.post .postmeta span {padding:5px;}
.post .entry {border-bottom:1px solid #eee;}
.post .entry p,.post .entry,.post .pn,.post .related-post{overflow:hidden; margin-bottom:20px;}
.post .entry p {line-height:1.75em;}
.post .entry h1 {font-size:1.5em; text-align:left;}
.post .entry h2 {font-size:1.25em; margin-bottom:15px;}
.post .entry h3 {font-size:1em; margin-bottom:15px;}
.post .entry h4 {font-size:0.875em; margin-bottom:15px;}
.post .entry h5 {font-size:0.75em; margin-bottom:15px;}
.post .entry h6 {font-size:0.7em; margin-bottom:15px;}
.post .entry blockquote {background:#f3f3f3; overflow:hidden; padding:15px 15px 0; margin-bottom:15px; color:#333; border-bottom:2px solid #eee;}
.post .entry ul,.post .entry ol {margin-bottom:15px; padding-left:2em;}
.post .entry ul li {list-style:inside disc none;}
.post .entry ol li {list-style:inside decimal none;}
.post .entry a {color:#178EEE;}
.post .entry img {max-width:100%; height:auto!important;}
.post .pn p {font-size:0.875em; color:#333;}
.post .pn p a {color:#555;}
.post .pn p a:hover {text-decoration:underline; color:#178EEE;}
.post .related-post h3,.commentslist h3,.comment-form h3,.related-products h3 {background:#178EEE; color:#fff; font-weight:normal; font-size:0.875em; padding-left:5px; height:30px; line-height:32px; margin-bottom:15px; border-bottom:2px solid #eee;}
.post .related-post ul li {font-size:1em; line-height:1.75em; overflow:hidden; padding:5px 0;}
.post .related-post ul li a {color:#333; background:url(images/dot.png) no-repeat left center; padding-left:15px; display:block; float:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:70%;}
.post .related-post ul li span {float:right; color:#888; font-size:0.75em;}
.post .tags {margin-bottom:20px; font-size:0.75em;}
.post .tags span {color:#666;}
.post .tags a {color:#178EEE; margin-left:5px;}
/*commentslist*/
.commentslist ol li {position:relative; clear:both; overflow:hidden; margin-bottom:15px;}
.commentslist ol li .gravatar {width:40px; height:40px; position:absolute; left:0; top:0; border:1px solid #eee; padding:1px; float:left;}
.commentslist ol li .cmt-info {margin-left:55px; border:1px solid #eee; border-radius:4px; padding:10px;}
.commentslist ol li .cmt-info .cmt-meta {border-bottom:1px solid #eee; padding-bottom:5px; margin-bottom:10px;}
.commentslist ol li .cmt-info .cmt-meta span {margin-right:5px; font-size:0.875em;}
.commentslist ol li .cmt-info .cmt-meta span.time {font-size:0.75em; color:#888;}
.commentslist ol li .cmt-info .cmt-meta span.reply {float:right;}
.commentslist ol li .cmt-info .cmt-meta a {color:#178EEE;}
.commentslist ol li .cmt-info .cmt-con {font-size:0.875em; color:#555;}
.commentslist ol li span.arrow {position:absolute; left:49px; top:15px; display:block; height:2px; border-right:6px solid #ddd; border-top:6px solid transparent; border-bottom:6px solid transparent;}
.commentslist ol li li {margin-bottom:0; margin-top:15px; margin-left:20px;}
/*comment-form*/
.comment-form p {margin-bottom:15px;}
.comment-form .text,.comment-form textarea {border:1px solid #ddd; padding:5px; border-radius:3px; box-shadow:inset 0px -1px 1px #ddd; width:30%; transition:all 0.4s ease 0s;}
.comment-form textarea {width:60%; height:150px; transition:all 0.4s ease 0s;}
.comment-form .submit,a#cancel-reply {cursor:pointer; background-color:#178EEE; border:none; color:#fff; padding:5px 10px;}
.comment-form .submit:hover,a#cancel-reply:hover {background-color:#2E2E2E;}
.reply-frm {margin-top:15px;}
/*friendlinks*/
#friendlinks {margin-bottom:30px; overflow:hidden;}
#friendlinks ul li {font-size:0.875em; float:left; margin:0 10px; display:inline;}
#friendlinks ul li a {color:#666;}
#friendlinks ul li a:hover {color:#1E95F5; text-decoration:underline;}
/*footer*/
#footer {background:#2E2E2E; width:100%; height:auto;}
.top-footer {font-size:0.875em; padding:20px 0; color:#fff; overflow:hidden; position:relative;}
.contact {float:left; padding-left:40px;}
.contact ul li {line-height:2em;}
.contact ul li i {color:#848484;}
.contact ul li .icon-map-marker {font-size:1.5em;}
.contact ul li .icon-phone {font-size:1.25em;}
.qrcode {float:left;}
.qrcode ul li {float:left; margin:0 10px; display:inline; text-align:center;}
.qrcode img {width:80px; height:80px;display:block; background-color:#fff;}
.footer-logo {float:right; margin-top:20px; display:inline; width:250px;}
.footer-logo img {width:100%; height:auto;}
.sub-footer {background:#282828; width:95%; padding:10px 2.5%; text-align:center; color:#ACACAC; font-size:0.75em;}
.sub-footer a {color:#ACACAC;}
/*searchForm*/
.searchForm {display:none; position:absolute; right:0; top:100%; width:310px; background:#1E95F5; overflow:hidden;}
.searchForm form {padding-right:55px; position:relative; display:block; margin:20px;}
.searchForm .s {height:25px; line-height:25px; width:90%; padding:5px 5%; border:none;}
.searchForm .submit {position:absolute; right:0; top:0; cursor:pointer; background-color:#fff; border:none; height:100%; width:50px; font-size:14px;}
.backtop {position:fixed; right:0; top:80%; background:#1E95F5 url(images/backtop.png) no-repeat; width:54px; height:54px; cursor:pointer;}
#weixin {background:rgba(0,0,0,0.7); position:fixed; left:0; top:0; width:100%; height:100%; z-index:10001; display:none;}
#weixin img {width:200px; height:200px; background-color:#fff; padding:10px; border:1px solid #ddd; position:fixed; top:50%; margin-top:-106px; left:50%; margin-left:-106px;}
/*mobile-bar*/
.mobile-bar {width: 100%;  font-size: 1em; text-align: center; background-color: #333; overflow: hidden; position: fixed; bottom: 0px; left: 0px; z-index: 9999; display:none;}
.mobile-bar li {float: left; width: 25%;}
.mobile-bar li a {padding-top: 25px; border-left: 1px solid #383838; border-right: 1px solid #2B2B2B; color: #EEE; background-image: url("images/icon-mobi.png"); background-repeat: no-repeat; display: block;}
.mobile-bar li.mobi-map a {background-position: center 6px;}
.mobile-bar li.mobi-phone a {background-position: center -67px;}
.mobile-bar li.mobi-email a {background-position: center -134px;}
.mobile-bar li.mobi-chat a {background-position: center -202px;}
.mobile-bar li i {font-style: normal; font-size:0.875em;}
/*screen width*/
@media only screen and (max-width:1280px){
	.inner {
		width:93.75%;
	}
	
	
	.footer-logo {
		width:20.833333%;
	}
	.sidebar {
		width:20.833333%;
	}
	.main {
		width:75%;
	}
	
	#contact.fixed {
		width:19.53125%;
	}
	/*1280*/
	.nav li {font-size:18px;}
}

@media only screen and (max-width:1024px){
	/*1024px*/
	#service li {padding:2%; width:16%;}
	/*1024px*/
	.nav {padding:25px 0;}
	.nav li {font-size:16px;}
	/*1024px*/
	.logo a {width:167px; height:50px;}
}
@media only screen and (max-width:960px){
	/*960*/
	.nav {position:fixed; float:none; width:100%; clear:both; width:200px; z-index: 9; left:-200px; top:0; height:100%; background-color:rgba(0,0,0,.8); color:#fff; padding:0; overflow-y:auto; -webkit-overflow-scrolling:touch; transition:left .3s;}	
	.nav.open {left:0;}
	.nav ul {padding:50px 0;}
	.nav li {float:none; margin:0; display: block; line-height: 45px;}
	.nav li em {display:block; position:absolute; right:0; top:0; width:45px; height:45px;}
	.nav li em:before {content:''; display:block; width:8px; height:8px; border-right: 1px solid #fff; border-bottom:1px solid #fff; transform:rotate(45deg); position:absolute; left:50%; top:50%; margin:-6px 0 0 -6px; transition:all .3s;}
	.nav li em.open:before {transform:rotate(-135deg); margin-top: 0;}
	.nav li a {color:#fff; padding:0 45px 0 2em;}
	.nav li a:hover, .nav li.on > a, .nav li.cur > a {background-color:transparent;}
	.nav li ul {position:static; left:auto; top:auto; width:auto; padding:0; border:none; background:none; }
	.nav li li {text-align:left; line-height: 45px;}
	.nav li li a {padding:0 0 0 4em;}
	/*960*/
	#navbtn {display: block;}
	/*960*/
	#hmowl {padding:5.5% 0;}
	#hmowl .box {padding:0;}
	#hmowl .owl-dots {position:static; margin-top:3.5%;}
	#hmowl .owl-dot span {width:10px; height:10px; border-radius:50%; background-color:#e4e4e4;}
	#hmowl .active span {background-color:#1E95F5;}
}
@media only screen and (max-width:900px){
	
	.footer-logo {
		position:absolute;
		right:0;
		top:40px;
	}
	
	
	#showcase ul li {
		width:100%;
		margin-right:0;
		float:none;
	}
}
@media only screen and (max-width:800px){	
	.sidebar {
		display:none;
	}
	.main {
		float:none;
		width:100%;
	}
}
@media only screen and (max-width:768px){
	/*768*/
	#top {position:relative;}
	#top .inner {position:static;}
	/*768*/
	#service {padding:5% 0;}
	#service li {width:18%; padding:1%;}
	#service li .thumbnail {width:88%; margin-bottom:10px;}
	#service li h2 {font-size:14px;}
	/*768*/
	#notice {font-size:12px; line-height: 1.5em; padding:8px 0; margin-bottom: 10px;}
	/*768*/
	.searchForm {width:93.75%; padding:3.125%;}
	.searchForm form {margin:0;}
	/*768*/
	.logo {padding:12.5px 0;}
	.logo a {width:133px; height: 40px;}
	/*768*/
	#partner ul {width:103%;}
	#partner li {width:31%;}
	/*768*/
	#hmowl h2 {font-size:14px; margin-bottom: 5px; white-space: normal; line-height: 1.75em; height:3.5em;}
	#hmowl .info {padding:15px;}
	#hmowl .intro {display: none;}
	#hmowl .more {display:none;}
	/*768*/
	.hmTitle {padding-bottom: 0;}
	.hmTitle .title:before, .hmTitle .title:after {transform:none; top:50%; margin-top:-0.5px;}
	.hmTitle .title:before {left:auto; right:120%; margin-left:0;}
	.hmTitle .title:after {left:120%; margin-left:0;}
	.hmTitle i {width:30px; height: 30px; font-size:18px; line-height: 32px;}
	.hmTitle h4 {font-size:14px;}
	/*768*/
	.newslist li {font-size:14px; margin-bottom: 5px; padding-bottom: 5px;}
	.newslist li a {padding-left:10px;}
}
@media only screen and (max-width:680px) {
	.social ul li.qq {
		display:none;
	}
	
	.mobile-bar {
		display:block;
	}
	
	.backtop {
		display:none;
	}
	
	.qrcode {
		float:none;
		text-align:center;
		margin-bottom:15px;
	}
	.qrcode ul li {
		float:none;
		display:inline-block;
	}
	.footer-logo {
		top:auto;
		bottom:20px;
	}
	.contact {
		float:none;
		padding-left:0;
	}
	.grid-sizer,.grid-item { 
		width: 47%;
	}
	.gutter-sizer {
		width: 4%; 
	}
	.comment-form .text {
		width:60%;		
	}
	.comment-form textarea {
		width:90%;		
	}
}
@media only screen and (max-width:540px) {
	ul.bloglist li .thumbnail {
		width:120px;
		height:96px;
		margin-right:3%;
	}
	ul.bloglist li p {
		display:none;
	}
	ul.bloglist li h2 {
		white-space:normal;
	}
	
	#products li h2 {
		font-size:0.875em;
	}
}
@media only screen and (max-width:480px) {
	.social ul li {
		margin-left:2px;
	}
	
	#products li {
		width:48%;
		padding-bottom:4%;
	}	
	
	
	ul.showlist {
		width:103%;
	}
	
	ul.showlist li {
		width:47%;
		margin:0px 3% 3% 0px;
	}
	.breadcrumb {
		float:none;
		margin-bottom:15px;
	}
	.breadcrumb-title h1,
	.breadcrumb-title .cate {
		clear:both;
		float:none;
	}
	
	ul.textlist li span.time {
		display:none;		
	}
	ul.textlist li {
		background-position:0 0;
	}
	ul.textlist .text-info {
		padding-left:30px;
	}
}
@media only screen and (max-width:420px) {
	#showcase ul li .thumbnail {
		width:120px;
		height:96px;
	}
	#showcase ul li p.more {
		display:none;
	}
	#showcase ul li h2 {
		font-size:1em;
		line-height:1.75em;
		padding:5px 20px 5px 15px;
		overflow:hidden;
	}
}
@media only screen and (max-width:380px) {
	#top .tel span,
	.commentslist ol li .gravatar,
	.commentslist ol li span.arrow {
		display:none;
	}	
	.grid-sizer,
	.grid-item,
	.waterfall,
	.grid-item--width2 { 
		width: 100%;
	}
	.gutter-sizer {
		width: 0; 
	}	
	.commentslist ol li .cmt-info {
		margin-left:0;
	}
}
@media only screen and (max-width:320px) {
	#navbtn {
		top:13px;
	}
	#navbtn span {
		display:none;
	}
}