@charset "utf-8";

body{font-family: 'Microsoft YaHei', 微软雅黑, sans-serif;color:#222;}
/*.font-content-style{font-family:"Microsoft Yahei",Helvetica,STHeiti,Droid Sans Fallback;}*/

 /*font-icon 字体图标，设定字体类型*/
.font-icon{font-family:'Glyphicons Halflings' !important;}

/*在很多的页面中有要求图片width:100%;height:auto;的设定*/
.width-full{width:100%;}

/*圆形或椭圆形展示 ie8包括ie8在内以上版本的浏览器*/
.box-circle{
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}

/*
    展示圆形   可以使用一个透明度图片width==height，半径radius==width/2;中间挖个圆
    要注意到是不透明部分的颜色的设置
*/

/*元素四周都有阴影*/
.box-around-shadow{
    -webkit-box-shadow: 3px 3px 3px #ccc, 3px -3px 3px #ccc, -3px 3px 3px #ccc, -3px -3px 3px #ccc;
    -moz-box-shadow: 3px 3px 3px #ccc, 3px -3px 3px #ccc, -3px 3px 3px #ccc, -3px -3px 3px #ccc;
    box-shadow: 3px 3px 3px #ccc, 3px -3px 3px #ccc, -3px 3px 3px #ccc, -3px -3px 3px #ccc;
}

/*默认的ul li的设置*/
.custom-ul{padding:0;margin:0;list-style: none;}

.custom-ul:before, .custom-ul:after{display: table;content: " ";}
.custom-ul:after{clear: both;}
.custom-ul li{float:left;}


/*默认的ol li的设置*/
.custom-ol{padding-left:0;list-style-position: inside;}
.custom-ol li{dispay:block;}

/*很多a标签最好都是要去掉下划线的*/
.custom-a,.custom-a:hover,.custom-a:focus{text-decoration: none;}

/*尽量少用 important用多容易出问题*/
.left{float:left !important;}
.right{float:right !important;}

.left-area{float:left;}
.right-area{float:right;}


.relative{position:relative;}
.absolute{position:absolute;}
.block{display:block;}
.inline-block{display:inline-block;}
/*主要用来制作等高并排的元素（高度根据最高的那个元素算）*/
.table-cell{display:table-cell;float:none;}
.border-box{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content-box{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}


/*文字不换行，超出隐藏*/
/*鼠标移入后显示所有文字  如果文字可能会与其他内容重叠  根据当前界面的背景色设置 class的背景色*/
.custom-list-title{display:block;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;}
/*
    添加媒体查询是因为在触屏设备使用的时候hover相当于点击，但是消除效果需要再次点击一次    让文字超长显示很不好
    添加min-width:100%;的目的是防止出现在原本显示的title中设置的有text-align:center;并且文字没有超行显示的情况，如果不设置min-width:100%;则会出现文字向左对齐的效果
    padding-right:1em;目的是为了防止文字重合干扰，留出空白就没有这个问题了
*/
@media screen and (min-width:1200px){
    .custom-list-title:hover{display:inline-block;position:relative;z-index:5; min-width:100%;padding-right:2em;background-color:#fff;}

}

/*文字不换行，超出隐藏*/
/*
    跟上面的区别
    鼠标移入之后展示完整的标题（如果标题长度超出设定长度），这个常见于列表标题中，例如：起点网中的就是这个

    而下面的这个适合用于单独的一个标题使用，因为是自适应，所以可能会出现标题文字换行的情况，可以使用这个样式抑制换行和更友好的进行显示
*/
.custom-title{display:block;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;text-align: center;}


/*
    带有日期的标题链接列表
    日期格式一般是：2016-10-17，[2016-10-17]数字和符号占据的宽度一般是0.5em，因此可以设置padding-right:5em;或者padding-right;6em;等
    方式来个日期位置进行定位
*/
.font-list-box{display:block;padding:.3em 7em .3em 0;position:relative;top:0;left:0;}
.font-list-content{white-space: nowrap;overflow: hidden;display:block;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;}
.font-list-create-time{position:absolute;right:.5em;}

.font-list-box{width:100%;padding:.6em 7em .6em 1em;}
.font-list-create-time{right:.6em;top:.6em;}

/*
    设定固定宽高比例的元素进行展示
    padding，margin的百分比是根据宽度设置的
    可以自定义宽高比例  只需要添加一个类即可
    下面  ratio-box-box   和   ratio-box-img 的不同在于一个直接作用于img，一个作用于盛放img的元素
*/
/*4:3 width：height   4：3*/

.ratio-box-box{position:relative;top:0;left:0;width:100%;height:0;margin:0;padding-top:0;padding-right:0;padding-left:0;overflow:hidden;}
.ratio-show-box{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}

.ratio-box-img{position:relative;top:0;left:0;width:100%;height:0;margin:0;padding-top:0;padding-right:0;padding-left:0;overflow:hidden;}
.ratio-show-img{position:absolute;top:0;left:0;width:100%;min-height:100%;}

.ratio-w4h3{padding-bottom:75%;}
.ratio-index-video{padding-bottom:56.2%;}
.ratio-w3h2{padding-bottom:66.66%;}
.ratio-w3h1{padding-bottom:33.33%;}
.ratio-w20h9{padding-bottom:45%;}
.ratio-wEqualH{padding-bottom:100%;}

/*
    一行两列 图文显示
    适用于图片和文字所占据的根据两个元素所占据高度最高的元素决定
    并且需要进行居中或底部对齐等
*/
.img-font-half-line{width:50%;display:table-cell;float:none;}
.middle{vertical-align:middle;}
.bottom{vertical-align: bottom;}

/*
    确保文字不会出现超出被截断的现象（文字水平显示一半隐藏一半）
    5行显示
    width 100%继承，控制高度就不会出现文字被截断的现象，
    通过box-sizing padding-top padding-bottom line-height 以em字体字号为单位即可
    常用于竞价页面，首页，关于我们中的块状的介绍文字
*/
.font-content-box{width:100%;padding:.5em 16px;line-height:1.6;line-height:1.6\9;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height:8em;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:9em;
}

/*
    图片在移动端的展示形式
    图片大小其实是固定的，尤其是类似于产品图片列表，图片的大小总是在一定的范围内变化（200px-300px），过大过小都会出现展示好看，不协调的问题
    240px 210px 180px
    以下是根据bootstrap width 768px以下的不同的屏幕尺寸设置的
    针对img width:100%;来实现的
*/
.col-custom-max768{float:left;}
@media screen and (min-width:640px) and (max-width:767px){
    .col-custom-max768{width:33.33%;padding-left:15px;padding-right:15px;}
}
@media screen and (min-width:420px) and (max-width:639px){
    .col-custom-max768{width:50%;box-sizing:border-box;padding-left:15px;padding-right:15px;}
}
@media screen and (min-width:320px) and (max-width:419px){
    .col-custom-max768{width:100%;box-sizing:border-box;padding-left:8%;padding-right:8%;}
}
@media screen and (max-width:319px){
    .col-custom-max768{width:100%;padding-left:0;padding-right:0;}
}

/*
    栏目中标题的装饰（横线，横线正中位置有一个空心的圆）
    width:60%;max-width:560px;是为了实现自适应展示设置的
    margin的值是根据黄金比例进行设定的
*/
.description-line{position:relative;width:60%;max-width:560px;margin:40px auto 60px auto;height:1px;background:#ccc;}
.circle-position{position:absolute;display:inline-block;top:0;left:50%;}
.description-circle{position:absolute;top:-5px;left:-50%;width:9px;height:9px;border:1px solid #ccc;border-radius:50%;background:#fff;}


/*
    内页时使用此样式
    因为是自行编辑的，所以可能会有 float absolute 浮动   图片宽度超出 的问题
    width:100%;(防止因为误操作导致不是display:block;)
    position:relative;(防止内部有absolute定位)
    overflow：hidden;(超出隐藏，自适应可能会出现这样的问题)
    清除浮动
    img{max-width:80% !important;}(防止图片宽度超出最大宽度，很常见的自适应网页中的问题)加important是因为优先级问题，一些
    可以所见即所得的编辑器会直接给图片设置width的值，如果不加上important可能无法覆盖此值
*/
.custom-content{width:100%;position:relative;overflow: hidden;max-width:720px;margin-left:auto;margin-right:auto;}
@media screen and (max-width:991px){
	.custom-content img{max-width:80% !important;}
}
.custom-content:before,.custom-content:after{display: table;content: " ";}
.custom-content:after{clear: both;}
.custom-content p{/*text-indent: 2em;*/}