*,
:after,
:before {
    box-sizing: border-box;
    outline: none;
}
ol,
ul {
    list-style: none;
}

a {
    color: inherit;
}

a,
a:hover {
    text-decoration: none;
}

.color-white {
    color: white;
}

.border {
    border: 1px solid;
}

.block {
    display: block;
}

.inline {
    display: inline-block;
}

.inline-block {
    display: inline-block;
}

.font-bold {
    font-weight: bold;
}

.font-rem {
    font-size: calc(20 * 1rem / 40);
}

.text-uppercase {
    text-transform: uppercase;
}

.text-underline {
    text-decoration: underline;
}

.text-del {
    text-decoration: line-through;
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.text-indent {
    text-indent: 0.5em;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.padding-xs {
    padding: 5px !important;
}

.padding-sm {
    padding: 10px !important;
}

.padding-md {
    padding: 20px !important;
}

.padding-lg {
    padding: 40px !important;
}

.paddingLR-xs {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.paddingLR-sm {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.paddingLR-md {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.paddingLR-lg {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.paddingTB-xs {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.paddingTB-sm {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.paddingTB-md {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.paddingTB-lg {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.p-top-xs {
    padding-top: 5px;
}

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

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

.p-top-lg {
    padding-top: 40px;
}

.p-left-xs {
    padding-left: 5px;
}

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

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

.p-left-lg {
    padding-left: 40px;
}

.p-right-xs {
    padding-right: 5px;
}

.p-right-sm {
    padding-right: 10px;
}

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

.p-right-lg {
    padding-right: 40px;
}

.p-bottom-xs {
    padding-bottom: 5px;
}

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

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

.p-bottom-lg {
    padding-bottom: 40px;
}

.no-m-top {
    margin-top: 0 !important;
}

.no-m-bottom {
    margin-bottom: 0 !important;
}

.no-m-left {
    margin-left: 0 !important;
}

.no-m-right {
    margin-right: 0 !important;
}

.margin-xs {
    margin: 5px !important;
}

.margin-sm {
    margin: 10px !important;
}

.margin-md {
    margin: 20px !important;
}

.margin-lg {
    margin: 40px !important;
}

.marginTB-xs {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.marginTB-sm {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.marginTB-md {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.marginTB-lg {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.marginLR-xs {
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.marginLR-sm {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.marginLR-md {
    margin-left: 20px !important;
    margin-right: 20px !important;
}

.marginLR-lg {
    margin-left: 40px !important;
    margin-right: 40px !important;
}

.m-top-xs {
    margin-top: 5px;
}

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

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

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

.m-left-xs {
    margin-left: 5px;
}

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

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

.m-left-lg {
    margin-left: 40px;
}

.m-right-xs {
    margin-right: 5px;
}

.m-right-sm {
    margin-right: 10px;
}

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

.m-right-lg {
    margin-right: 40px;
}

.m-bottom-xs {
    margin-bottom: 5px;
}

.m-bottom-sm {
    margin-bottom: 10px;
}

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

.m-bottom-lg {
    margin-bottom: 40px;
}

/* flex */
.row-flex {
    display: -webkit-box;
    /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box;
    /* Firefox 17- */
    display: -webkit-flex;
    /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex;
    /* Firefox 18+ */
    display: -ms-flexbox;
    /* IE 10 */
    display: flex;
    /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    /*flex-direction 属性规定灵活项目的方向。*/
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
}

.col-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
}

/*justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。*/
.flex-start {
    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
}

.flex-end {
    -webkit-justify-content: flex-end;
    -ms-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
}

.flex-center {
    -webkit-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
}

.flex-between {
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
}

/*align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。*/
.flex-items-start {
    -webkit-align-items: flex-start;
    -ms-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start;
}

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

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

.flex-items-stretch {
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    -moz-align-items: stretch;
    align-items: stretch;
}

/*flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向 */
.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*
 * align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
 * 可重写 align-items 属性。
 * flex子项
*/
.align-self-start {
    -webkit-align-self: flex-start;
    -ms-align-self: flex-start;
    align-self: flex-start;
    align-self: flex-start;
}

.align-self-end {
    -webkit-align-self: flex-end;
    -ms-align-self: flex-end;
    -moz-align-self: flex-end;
    align-self: flex-end;
}

.align-self-center {
    -webkit-align-self: center;
    -ms-align-self: center;
    -moz-align-self: center;
    align-self: center;
}

.pointer {
    cursor: pointer;
}

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

.relative {
    position: relative;
}

/* 垂直居中 */
.translateY-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    /* IE 9 */
    -moz-transform: translateY(-50%);
    /* Firefox */
    -webkit-transform: translateY(-50%);
    /* Safari 和 Chrome */
    -o-transform: translateY(-50%);
    /* Opera */
}

.innerbox::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}

.innerbox::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
}

.innerbox::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.05);
}