/*边框*/
.border-r3 {
    /*圆角边框*/
    border-radius: 3px;
}

.border-r5 {
    /*圆角边框*/
    border-radius: 5px;
}

.border-r {
    /*圆角边框*/
    border-radius: 10px;
}

.border-r10 {
    /*圆角边框*/
    border-radius: 10px;
}

.border-r15 {
    /*圆角边框*/
    border-radius: 10px;
}

.border-r20 {
    /*圆角边框*/
    border-radius: 20px;
}

.border-r25 {
    /*圆角边框*/
    border-radius: 25px;
}

.border-r30 {
    /*圆角边框*/
    border-radius: 30px;
}

.border-top-r5 {
    /*圆角边框*/
    border-radius: 5px 5px 0 0;
}

/*阴影*/
.box-shadow {
    box-shadow: 0 2px 5px 0 #dadada;
}

/*flex布局*/
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-row-left-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start
}

.flex-row-center-left {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start
}

.flex-row-left-center {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.flex-row-center-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flex-row-between-center {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.flex-column-center-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.flex-row-right-center {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.flex-center-left {
    display: flex;
    align-items: center;
}

.flex-center-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.flex-center-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-upright {
    display: flex;
    flex-direction: column;
}

.flex-upright-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flex-upDown {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.flex-column-center-up {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.flex-column-center-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/*外边距*/
.margin {
    margin: 20px;
}

.margin-left {
    margin-left: 20px;
}

.margin-left-10 {
    margin-left: 10px;
}

.margin-left-20 {
    margin-left: 20px;
}

.margin-left-30 {
    margin-left: 30px;
}


.margin-right {
    margin-right: 20px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-40 {
    margin-top: 40px;
}

.margin-bottom {
    margin-bottom: 20px;
}

/*内边距*/
.padding-5 {
    padding: 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}


.padding {
    padding: 20px;
}

.padding-left {
    padding-left: 20px;
}

.padding-left-10 {
    padding-left: 10px;
}

.padding-right {
    padding-right: 20px;
}

.padding-top {
    padding-top: 20px;
}

.padding-top-10 {
    padding-top: 10px;
}

.padding-bottom {
    padding-bottom: 20px;
}

.padding-bottom-10 {
    padding-bottom: 10px;
}

/*背景*/
.bgc-jb {
    /*渐变*/
    background: linear-gradient(to right, Rgba(255, 200, 100, 0.1), #5fc3e4);
}

.bgc-white {
    background-color: white;
}

/*其他*/
.overhidden {
    overflow: hidden;
}

/*高度100%*/
.page-init {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.page-init-all {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.page-init-overhidden {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.border-box {
    box-sizing: border-box;
}

/*字体超出省略*/
.text-overflow-hidden {
    /*强制文本在一行内显示*/
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*字体超出省略-多行*/
.text-overflow-hidden-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    word-break: break-all;
}

.text-overflow-hidden-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    word-break: break-all;
}

.text-overflow-hidden-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    word-break: break-all;
}

/*不允许换行*/
.text-nowrap {
    white-space: nowrap;
}