/* 对应 CKEditor 中的 块引用*/
.blockquote {
    font-style: italic;
    font-family: Georgia, Times, "Times New Roman", serif;
    padding: 2px 8px 2px 20px;
    border: 0 solid #ccc;
    border-left-width: 5px;
}

.bgimage {
    background-size: cover;
    background-position: center;
}

/* 单项: 水平居左, 垂直居上(top-left) */
.flex-tl, .flex-lt {
    display: flex;
}

/* 单项: 水平居中, 垂直居上(top-center) */
.flex-tc, .flex-ct {
    display: flex;
    justify-content: center;
}

/* 单项: 水平居右, 垂直居上(top-right) */
.flex-tr, .flex-rt {
    display: flex;
    justify-content: flex-end;
}

/* 单项: 水平居左, 垂直居中(left-center) */
.flex-lc, .flex-cl {
    display: flex;
    align-items: center;
}

/* 单项: 水平居中, 垂直居中(center-center) */
.flex-c, .flex-cc {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 单项: 水平居右, 垂直居中(right-center) */
.flex-rc, .flex-cr {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* 单项: 水平居左, 垂直居下(left-bottom) */
.flex-bl, .flex-lb {
    display: flex;
    align-items: flex-end;
}

/* 单项: 水平居中, 垂直居下(center-bottom) */
.flex-bc, .flex-cb {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* 单项: 水平居右, 垂直居下(right-bottom) */
.flex-br, .flex-rb {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

/* 水平排列, 不自动换行 */
.flex-horizon, .flex-h {
    display: flex;
    flex-direction: row;
}

/* 水平排列, 不自动换行, 左对齐 */
.flex-h-start, .flex-h-s {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

/* 水平排列, 不自动换行, 右对齐 */
.flex-h-end, .flex-h-e {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

/* 水平排列, 不自动换行, 居中 */
.flex-h-center, .flex-h-c {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* 水平排列, 不自动换行, 两端对齐, 项目之间的间隔都相等 */
.flex-h-space-between, .flex-h-sb {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* 水平排列, 不自动换行, 两端对齐, 每个项目两侧的间隔相等. 所以, 项目之间的间隔比项目与边框的间隔大一倍 */
.flex-h-space-around, .flex-h-sa {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

/* 水平排列, 不自动换行, 两端对齐, 每个项目两侧以及与容器边框的间隔相等 */
.flex-h-space-evenly, .flex-h-se {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

/* 水平排列, 自动换行 */
.flex-h-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* 垂直排列, 不自动换行 */
.flex-vertical, .flex-v {
    display: flex;
    flex-direction: column;
}

/* 垂直排列, 自动换行 */
.flex-v-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1
}

.flex-2 {
    flex: 2
}

.flex-3 {
    flex: 3
}

.flex-4 {
    flex: 4
}

.flex-5 {
    flex: 5
}

.flex-6 {
    flex: 6
}

.flex-7 {
    flex: 7
}

.flex-8 {
    flex: 8
}

.flex-9 {
    flex: 9
}

.flex-10 {
    flex: 10
}

.flex-11 {
    flex: 11
}

/* 小屏幕下取消 flex 布局 */
@media (max-width: 768px) {
    .flex-xs-none {
        display: block;
    }

    .flex-xs-1 {
        flex: 1;
    }

    .flex-xs-2 {
        flex: 2;
    }

    .flex-xs-3 {
        flex: 3;
    }

    .flex-xs-4 {
        flex: 4;
    }

    .flex-xs-5 {
        flex: 5;
    }

    .flex-xs-6 {
        flex: 6;
    }

    .flex-xs-7 {
        flex: 7;
    }

    .flex-xs-8 {
        flex: 8;
    }

    .flex-xs-9 {
        flex: 9;
    }

    .flex-xs-10 {
        flex: 10;
    }

    .flex-xs-11 {
        flex: 11;
    }
}

/* 限制行数, 并在末尾显示省略号. IE 需配合容器高度 */
.ellipsis {
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.ellipsis-1 {
    -webkit-line-clamp: 1;
}

.ellipsis-2 {
    -webkit-line-clamp: 2;
}

.ellipsis-3 {
    -webkit-line-clamp: 3;
}

.ellipsis-4 {
    -webkit-line-clamp: 4;
}

/* 水平平均排列 */
.flex-h {
    display: flex;
}

/* 毛玻璃效果 */
/* 没有背景图时使用此类: 内容层半透明 */
.glass-container {
    overflow: hidden;
    background: hsla(0,0%,100%,.25) border-box;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset, 0 .5em 1em rgba(0, 0, 0, 0.6);
}
/* 有背景图时使用此类: 应用毛玻璃效果的容器最开头放置一张背景图(或不使用背景图), 并模糊化处理 */
.glass-container::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -99; /* 模糊层在最下面 */
    filter: blur(3px) brightness(75%); /* 值越大越模糊 */
    background-image: url("images/bg.jpg");
    background-position: center bottom;
    background-size: cover;
    background-attachment: fixed;
}