@charset "utf-8";

/*补充和完善自定义部分 部分 begin */
.articleDetail .img-responsive{
  display: inline;
} 

.avatar-xs{
	width:32px;
	height:32px;
}/*头像统一渲染*/

.avatar-sm{
  width:64px;
	height:64px;
}

.avatar-lg{
  width:150px;
	height:150px;
}

.thumb-lg{
	width:300px;
	height:300px;
}/*缩略图统一渲染*/

.thumb-md{
	width:120px;
	height:120px;
}/*缩略图统一渲染*/

.thumb-sm{
	width:80px; 
	height:80px;
}/*缩略图统一渲染*/

.thumb-xs{
  width:32px; 
	height:32px;
}

.price{
  color: #ee6557;
  font-weight: 300;
}
.price-rmb::before{
  content:'￥';
}
.price-lg{
  font-size: 36px;
}





#frontEnd footer{
  margin-top:30px;
}




@media (min-width: 768px) {
	#frontEnd .body-home section,
  #frontEnd .body-sub section,
  #frontEnd .body-detail section{
  padding-top: 30px;
  padding-bottom:30px;
}
}




#frontEnd .body-home section:first-child,
#frontEnd .body-sub section:first-child,
#frontEnd .body-detail section:first-child{
  padding-top: 0px;
  padding-bottom:0px;
}


#frontEnd footer section:first-child{
	padding-top: 30px;
}

#frontEnd footer section:last-child{
  padding-bottom: 15px;
}

#frontEnd .component{
	margin-left: -10px;
	margin-right: -10px;
	margin-bottom: 10px;
	/* overflow:hidden; 防止内部元素 margin-top 效果与父元素重叠的 bug 但引起 bootstrap  nav nav-pills dropdown-toggle dropdown-menu 失效*/
}/*因为 component 必须在 col 里面的缘故，抵消两边的 padding ，抵消后刚好上下左右边距为10px 做设计的时候注意这一点就OK了*/

#frontEnd .component{
	margin-left: 0px;
	margin-right: 0px;
}/*记住不要搞错上下覆盖的逻辑顺序*/

#frontEnd .carousel,
#frontEnd .banner{
	margin-left: -15px;
	margin-right: -15px;
}/*覆盖 component 10px 不然 carousel 部分达到两边边缘*/



#frontEnd .banner{
	height:180px;
}
@media (min-width: 768px) {
	#frontEnd .banner{
		height:340px;
	}
}
@media (min-width: 1200px) {
	#frontEnd .banner{
		height:380px;
	}
}



.detail-info {
  color: #888;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  vertical-align: baseline;
}

.detail-info span{
margin-right: 3px;
}




.articleList,
.albumList,
.productList,
.jobList,
.downloadList,
.linkList {
	margin-top:30px;
	margin-bottom: 30px;
}

.articleList .row>div .media,
.jobList .row>div .media,
.linkList .row>div .media{
	margin-bottom:30px;
}

.comment,
.resume{
  margin-top:50px;
}

.comment .commentForm,
.resume .resumeForm{
  margin-top:30px;
}

.comment .commentList{
  position:relative;
  min-height: 360px;
  margin-top:60px;
}

.comment .form-group button{
  margin-top: 10px;
}


.callBackInfoBlock{
  position: absolute;
  top:40%;
  left:50%;
  transform:translateY(-50%);
  transform:translateX(-50%);
}


.searchResult .media-heading{
  margin-bottom: 15px;
}








.carousel-control {
	text-shadow:0px 1px 1px rgba(0,0,0,0.35);
	filter: alpha(opacity=35);
	opacity: 0.35;
}/*原版黑色太重了，而且不喜欢图标有投影，这样不够扁平，当然白色背景就有麻烦了，所以削弱就可以了*/

.carousel-control .glyphicon-menu-left,
.carousel-control .glyphicon-menu-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
  margin-top: -10px;
}
.carousel-control .glyphicon-menu-left {
  left: 50%;
	margin-left: -10px;
	transform:scale(0.9,1.1);
}
.carousel-control .glyphicon-menu-right {
  right: 50%;
	margin-right: -10px;
	transform:scale(0.9,1.1);
}

@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-menu-left,
  .carousel-control .glyphicon-menu-right {
    width: 60px;
    height: 60px;
    margin-top: -30px;
		font-size: 60px;
  }
  .carousel-control .glyphicon-menu-left{
    margin-left: -10px;
  }
  .carousel-control .glyphicon-menu-right{
    margin-right: -10px;
  }
}


.breadcrumb {
	padding-left: 2px;
	padding-right: 2px;
}
/*综合下来时 2px 刚好可以与两边对齐*/

.navbar-form .input-group{
  width:200px;
}

.album .carousel-control.left,
.album .carousel-control.right,
.product .carousel-control.left,
.product .carousel-control.right{
	background-image:none;
}

.album  .carousel-control .glyphicon-menu-left,
.album  .carousel-control .glyphicon-menu-right,
.product  .carousel-control .glyphicon-menu-left,
.product  .carousel-control .glyphicon-menu-right {
  top: 40%;
  margin-top: -10px;
}

.album  .carousel-control .glyphicon-menu-left,
.product  .carousel-control .glyphicon-menu-left {
  left: 50%;
	margin-left: -10px;
}

.album  .carousel-control .glyphicon-menu-right,
.product  .carousel-control .glyphicon-menu-right {
  right: 50%;
	margin-right: -10px;
}

@media screen and (min-width: 768px) {
  .album  .carousel-control .glyphicon-menu-left,
  .album  .carousel-control .glyphicon-menu-right,
  .product  .carousel-control .glyphicon-menu-left,
  .product  .carousel-control .glyphicon-menu-right {
		width: 50px;
		height: 50px;
		margin-top: -38px;
		font-size: 50px;
  }
  .album  .carousel-control .glyphicon-menu-left,
  .product  .carousel-control .glyphicon-menu-left{
    margin-left: -80px;
  }
  .album  .carousel-control .glyphicon-menu-right,
  .product  .carousel-control .glyphicon-menu-right{
    margin-right: -80px;
  }
}

.articlelist .row,
.articleDetail,
.albumList .row,
.albumDetail,
.productList .row,
.productDetail,
.productList,
.downloadList,
.linkList,
.linkDetail,
.imageDetail,
.fileDetail{
  position:relative;
  min-height: 600px;
}

.activation-form .form-control,
.activation-form .form-group
 {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-control.sn-width{
	width:65px;
}

@media screen and (max-width: 320px) {
  .form-control.sn-width{
	  width:55px;
  }
}

@media (min-width: 1200px) {
  .form-control.sn-width{
	  width:73px;
  }
}



/*补充和完善自定义部分 部分 end */






/*覆盖或改进原 bootstrap.css 部分 begin */
body {
  word-break: break-all;
  word-wrap: break-word;
}

article table tr th,
article table tr td  /*为了防止 后台用 tinyMCE 添加 table的时候 td 完全没有间距*/
{
  padding:5px;
}

article img{
  max-width: 100%; /*为了防止以后不慎上传了超宽的图片*/
  height: auto;
}


.navbar {
	border: none;
	margin-bottom: 0px;
}
/*1. 这个去掉 1px solid transparent 是为了不让出现反色的时候有一条线很突兀，不排除以后这块可设置
  2. 貌似在不加固定的时候还有默认20px的下边距 所以要 清0
*/

.navbar-brand{
	padding-top:5px;
	padding-bottom:5px;
}/*上下默认15px会把logo压缩得很小*/

.navbar-brand .img-responsive{
	max-height: 100%;
	width:auto;
}/*这个导航条logo必须适应高度*/


@media (max-width: 767px) {
    .glyphicon-search-to-word:before {
        content: "搜索";
	}
	
	.glyphicon-globe-to-word:before {
		content: "语言";
  }
}/*在平板竖起来即小于 768px的时候 导航条 折叠状态 下面的 图标变成文字 */

.carousel-caption{
	opacity:0;
	-moz-opacity:0;
	filter:Alpha(opacity=0);
	bottom:25%;
}




/*覆盖或改进原 bootstrap.css 部分 end */






/*其他第三方插件整体配置部分 begin */

/* wow 效果 先隐藏第一个子元素，达到渐入效果 */
.reveal:first-child {
	visibility: hidden;
}







/*
 * Off Canvas
 * --------------------------------------------------
 */
 
 
html,body {
  overflow-x: hidden;/* 防止下边有横拉条 */
}

@media screen and (max-width: 991px) { /* 为了让平板在竖着的时候即小于1070的时候就开始折叠 */
  .row-offcanvas {
    position: relative;                      /* 只有变成 relative 的时候 right 属性才能奏效 */
    -webkit-transition: all .25s ease-out;   /* 切换的时候过渡动画 */
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .sidebar-offcanvas {                       /* 只有 absolute 才能突破 col 忽视 width 满 12 不被顶下去 */
    position: absolute;
    top: 10%;
  }

  .row-offcanvas-right {
    right: 0;                               /* 按照满12计算，0保障主体贴右边，超出sidebar排除在外 */
  }

  .row-offcanvas-right.active {
    right: 50%;                             /* 通过把主体以右边参照回定 50% 带出 sidebar */
  }

  .row-offcanvas-right .sidebar-offcanvas {
    right: -50%;                            /* 被 absolute 之后 原本浮在左边贴边，-50% 保障其挡在右边屏外 */
  }


  /*sidebar 在左边的样式*/
  
  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-left .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }
}

/*其他第三方插件整体配置部分 end */