/*行高*/
.line-height-2{
    line-height: 2;
}
.line-height-4{
    line-height: 4;
}

/*字体大小*/
.font-size-10{
    font-size: 10px;
}
.font-size-12{
    font-size: 12px;
}
.font-size-14{
    font-size: 14px;
}
.font-size-16{
    font-size: 16px;
}
.font-size-18{
    font-size: 18px;
}
.font-size-20{
    font-size: 20px;
}
.font-size-22{
    font-size: 22px;
}
.font-size-24{
    font-size: 24px;
}
.font-size-26{
    font-size: 26px;
}
.font-size-28{
    font-size: 28px;
}
.font-size-30{
    font-size: 30px;
}
.font-size-32{
    font-size: 32px;
}
.font-size-34{
    font-size: 34px;
}
.font-size-36{
    font-size: 36px;
}
.font-size-50{
    font-size: 50px;
}

.font-size-60{
    font-size: 60px;
}

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

.incline-text{
    font-style: italic;
}

/*字体颜色*/
.color-000{
    color: #000;
}
.color-fff{
    color: #fff;
}
.color-gray{
    color: gray;
}
.color-bcbcbc{
    color: #bcbcbc;
}
.color-8c8fa4{
    color: #8c8fa4;
}
.color-343434{
    color: #343434;
}
.color-8e8e8e{
    color: #8e8e8e;
}
.color-0167b1{
    color: #0167b1;
}
.color-666{
    color: #666;
}
.color-3370ff{
    color: #3370ff;
}

/*宽度*/
.width-100{
    width: 100%;
}
.width-90{
    width: 90%;
}
.width-80{
    width: 80%;
}
.width-70{
    width: 70%;
}
.width-60{
    width: 60%;
}
.width-50{
    width: 50%;
}
.width-40{
    width: 40%;
}
.width-15{
    width: 15%;
}
.width-10{
    width: 10%;
}
.width-5{
    width: 5%;
}
.height-100{
    height: 100%;
}
.height-35-px{
    height: 35px;
}
.width-50-px{
    width: 50px;
}
.width-100-px{
    width: 100px;
}
.width-200-px{
    width: 200px;
}
/*flex布局*/
.d-flex{
    display: flex;
}
.d-block{
    display: block;
}
.d-table{
    display: table;
}
.d-inline-block{
    display: inline-block;
}
.flex-wrap{
    flex-wrap: wrap;
}
.flex-nowrap{
    flex-wrap: nowrap;
}

/*对齐方式*/
.justify-content-center{
    justify-content: center;
}
.justify-content-around{
    justify-content: space-around;
}
.justify-content-between{
    justify-content: space-between;
}
.align-items-center{
    align-items: center;
}
.text-center{
    text-align: center;
}
.text-align-right{
    text-align: right;
}
.text-left{
    text-align: left;
}
.text-decoration-underline{
    text-decoration: underline;
}
.text-hidden{
    opacity: 0;
    transition: all .6s;
    color: #fff;
}
.m-auto{
    margin: 0 auto;
}
/*文本超出隐藏*/
.text-overflow-ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.overflow-hidden{
    overflow: hidden;
}
.border-box{
    box-sizing: border-box;
}
.text-indent-36{
    text-indent: 36px;
}
/*定位*/
.position-relative{
    position: relative;
}
.position-absolute{
    position: absolute;
}

/*背景颜色*/
.bg-white{
    background: #fff;
}
.bgColor-000{
    background: #000;
}
.bg-F4F4F4{
    background: #F4F4F4;
}

/*内边距*/
.pb-4-px{
    padding-bottom: 4px;
}
.pa-1{
    padding: 10px;
}
.px-1{
    padding: 0 10px;
}
.py-1{
    padding: 10px 0;
}
.pt-1{
    padding-top: 10px;
}
.pb-1{
    padding-bottom: 10px;
}
.pr-1{
    padding-right: 10px;
}
.pl-1{
    padding-left: 10px;
}
.pa-2{
    padding: 20px;
}
.px-2{
    padding: 0 20px;
}
.py-2{
    padding: 20px 0;
}
.pt-2{
    padding-top: 20px;
}
.pb-2{
    padding-bottom: 20px;
}
.pr-2{
    padding-right: 20px;
}
.pl-2{
    padding-left: 20px;
}
.pa-3{
    padding: 30px;
}
.px-3{
    padding: 0 30px;
}
.py-3{
    padding: 30px 0;
}
.pt-3{
    padding-top: 30px;
}
.pb-3{
    padding-bottom: 30px;
}
.pr-3{
    padding-right: 30px;
}
.pl-3{
    padding-left: 30px;
}
.pa-4{
    padding: 40px;
}
.px-4{
    padding: 0 40px;
}
.py-4{
    padding: 40px 0;
}
.pt-4{
    padding-top: 40px;
}
.pb-4{
    padding-bottom: 40px;
}
.pr-4{
    padding-right: 40px;
}
.pl-4{
    padding-left: 40px;
}
.px-16-px{
    padding: 0 16px;
}
.pt-6{
    padding-top: 60px;
}
.pb-6{
    padding-bottom: 60px;
}
.pl-6{
    padding-left: 60px;
}
.pt-9{
    padding-top: 90px;
}
.pt-10{
    padding-top: 100px;
}
.pb-10{
    padding-bottom: 100px;
}
.pt-13{
    padding-top: 130px;
}
.pt-15{
    padding-top: 150px;
}
/*外边距*/
.ma-1{
    margin: 10px;
}
.mx-1{
    margin: 0 10px;
}
.my-1{
    margin: 10px 0;
}
.mt-1{
    margin-top: 10px;
}
.mb-1{
    margin-bottom: 10px;
}
.mr-1{
    margin-right: 10px;
}
.ml-1{
    margin-left: 10px;
}
.ma-2{
    margin: 20px;
}
.mx-2{
    margin: 0 20px;
}
.my-2{
    margin: 20px 0;
}
.mt-2{
    margin-top: 20px;
}
.mb-2{
    margin-bottom: 20px;
}
.mr-2{
    margin-right: 20px;
}
.ml-2{
    margin-left: 20px;
}
.ma-3{
    margin: 30px;
}
.mx-3{
    margin: 0 30px;
}
.my-3{
    margin: 30px 0;
}
.mt-3{
    margin-top: 30px;
}
.mb-3{
    margin-bottom: 30px;
}
.mr-3{
    margin-right: 30px;
}
.ml-3{
    margin-left: 30px;
}
.ma-4{
    margin: 40px;
}
.mx-4{
    margin: 0 40px;
}
.my-4{
    margin: 40px 0;
}
.mt-4{
    margin-top: 40px;
}
.mb-4{
    margin-bottom: 40px;
}
.mr-4{
    margin-right: 40px;
}
.ml-4{
    margin-left: 40px;
}
.mt-5{
    margin-top: 50px;
}


.hover-color:hover{
  color: #0167b1;
}
.height-500-px{
    height: 500px;
}
.height-400-px{
    height: 400px;
}
.width-1200-px{
    width: 1200px;
}
/*圆角*/
.border-radius-10-px{
    border-radius: 10px;
}
.border-radius-20-px{
    border-radius: 20px;
}

@media (max-width: 900px) {
    .font-size-32{
        font-size: 24px;
    }
}
@media (max-width: 700px) {
    .font-size-32{
        font-size: 18px;
    }
}