﻿/** 清除内外边距 **/

html, body {
    font-family: "microsoft yahei";
    margin: 0;
}

/* 	@font-face
	{
	    font-family: "Alibaba-PuHuiTi";
		src: url('../fonts/alibaba-puhuiti-regular.ttf');
	
	}
	​ */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */
{
    margin: 0;
    padding: 0;

}

/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */
{
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

address, cite, dfn, em, var {
    font-style: normal;
}

/* 将斜体扶正 */
code, kbd, pre, samp {
    font-family: Alibaba PuHuiTi, courier new, courier, monospace;
}

/* 统一等宽字体 */
small {
    font-size: 12px;
}

/* 小于 12px 的中文很难阅读, 让 small 正常化 */
/** 重置列表元素 **/
ul, ol {
    list-style: none;
}

div {
    box-sizing: border-box;
}

/** 重置文本格式元素 **/
a {
    text-decoration: none;
    color: #333;
    outline: none;
}

img {
    max-width: 100%;
    line-height: 1;
    display: block;
}

a:hover {
    text-decoration: none;
}

sup {
    vertical-align: text-top;
}

/* 重置, 减少对行高的影响 */
sub {
    vertical-align: text-bottom;
}

/** 重置表单元素 **/
legend {
    color: #000;
}

/* for ie6 */
fieldset, img {
    border: 0;
}

/* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea {
    font-size: 100%;
    outline: none;
}

/* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 重置 HTML5 元素 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,
summary, time, mark, audio, video {
    display: block;
    margin: 0;
    padding: 0;
}

mark {
    background: #ff0;
}

/* 设置placeholder的默认样式 */
:-moz-placeholder {
    color: #ddd;
    opacity: 1;
}

::-moz-placeholder {
    color: #ddd;
    opacity: 1;
}

input:-ms-input-placeholder {
    color: #ddd;
    opacity: 1;
}

input::-webkit-input-placeholder {
    color: #ddd;
    opacity: 1;
}


/*display*/
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.display_flex > * {
    display: block;
}

/*伸缩流方向*/
.flex-direction_column {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/*主轴对齐*/
.justify-content_flex-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.justify-content_flex-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.justify-content_flex-justify {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

/*侧轴对齐*/
.align-items_flex-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.align-items_flex-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.align-items_center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.flex_center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.align-items_baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}

/*伸缩性*/
.flex_auto {
    -webkit-box-flex: 1;
    -ms-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}

.flex_1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.container {
    /* padding-right: 15px;
     padding-left: 15px; */
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1230px;
    }
}

.hidden_1 {
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.hidden_2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hidden_3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.hidden_4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}