/* 水平居中 */
.level-center{
    margin:0 auto;
}
/* 布局样式 */
.flex{
    display:flex;
    flex-direction: row;
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items:center;
}
.flex-row{
    flex-direction: row;
}
.flex-reverse{
    flex-direction: row-reverse;
}
.flex-column{
    flex-direction: column;
}
.flex-column-reverse{
    flex-direction: column-reverse;
}
.flex-wrap{
    flex-wrap: wrap;
}
.flex-nowrap{
    flex-wrap: nowrap;
}
.flex-shrink{
    flex-shrink:0;
}
.flex-min{
    min-width:0;
}

/* flex布局每行的对齐方式 */
.justify-start{
    justify-content: flex-start;
}
.justify-end{
    justify-content: flex-end;
}
.justify-center{
    justify-content: center;
}
.justify-between{
    justify-content: space-between;
}
.justify-around{
    justify-content: space-around;
}

/* flex布局每列的对齐方式 */
.align-start{
    align-items:flex-start;
}
.align-end{
    align-items:flex-end;
}
.align-center{
    align-items: center;
}
.align-stretch{
    align-items: stretch;
}

/* flex布局每列的对齐方式 */
.content-start{
    align-content: flex-start;
}
.content-end{
    align-content: flex-end;
}
.content-center{
    align-content: center;
}
.content-between{
    align-content: space-between;
}
.content-around{
    align-content: space-around;
}
.content-stretch{
    align-content: stretch;
}

/* flex布局剩下的自动 */
.flex-1{
    flex:1;
}

/* float布局方式 */
.float-left{
    float:left;
}
.float-right{
    float:right;
}
.clearfix{
    content: "";
    display: table;
    clear: both;
}


/* 定位 */
.position-relative{
    position:relative;
}
.position-absolute{
    position: absolute;
}
.position-fixed{
    position:fixed;
}
.fixed-top{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:99;
    transform: translateZ(0);
}
.fixed-bottom{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:99;
    transform: translateZ(0);
}
.fixed-full{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:99;
    transform: translateZ(0);
}

/* 文字的样式 */
.text-left{
    text-align:left;
}
.text-center{
    text-align:center;
}
.text-right{
    text-align: right;
}

/* 多余文字隐藏 */
.ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}
.ellipsis-2{
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;       
}
.ellipsis-3{
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;       
}
.ellipsis-4{
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;       
}

/* 边框阴影 */
.shadow{
    box-shadow: 0 2rem 20rem rgba(0, 0, 0, 0.8); 
}
.shadow-sm{
    box-shadow: 0 0 6rem rgba(0, 0, 0, 0.03);
}
.shadow-lg{
    box-shadow: 0 6rem 30rem 0rem rgba(0, 0, 0, 0.05);
}
.shadow-none{
    box-shadow:none !important;
}