* {
    margin: 0;
    padding: 0;
}

.f-36{
    font-size: 36px;
}

.f-18{
    font-size: 18px;
}

.f-16{
    font-size: 16px;
}

.f-14{
    font-size: 14px;
}

.f-13{
	font-size: 13px;
}

.f-12{
    font-size: 12px;
}

.f-11{
    font-size: 11px;
}

.f-10{
    font-size: 10px;
}

.f-9{font-size: 9px;}

.f-7{font-size: 7px;}

.f-6{font-size: 6px;}

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

a{
    text-decoration: none;
}

.c-333639{
    color: #333639;
}
.c-333{color: #333;}
.c-777{
	color: #777;
}
.c-999{
	color: #999;
}

.c-666{ color: #666; }
.fill-base{ background-color: #fff; }

.pr-sm{ padding-right: 5px; }
.pr-md{ padding-right: 10px; }
.pr-lg{ padding-right: 15px; }
.pr-xl{ padding-right: 20px;}

.pl-sm{ padding-left: 5px; }
.pl-md{ padding-left: 10px; }
.pl-lg{ padding-left: 15px; }
.pl-xl{ padding-left: 20px; }

.pt-xl{ padding-top: 20px; }
.pt-lg{
	padding-top: 15px;
}
.pt-md{ padding-top: 10px;}

.ml-sm{ margin-left: 5px; }
.ml-md{ margin-left: 10px; }
.ml-lg{ margin-left: 15px; }
.ml-xl{ margin-left: 20px; }

.mr-sm{
	margin-right: 5px;
}

.mt-sm{ margin-top: 5px; }


.c-base{color:#ffffff;}/* 白色 */
.c-black{color: #000000;}/* 黑色 */
.c-danger{color:#FF0000;}/* 警告/非法 */ 
.c-warning{ color: #f1381f; }

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


.rel{
    position: relative;
}

.abs{
    position: absolute;
}

.pre-wrap{
    white-space: pre-wrap;
}

.ellipsis{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.ellipsis-1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:1;overflow: hidden;}
.ellipsis-6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:6;overflow: hidden;}

/* 阴影 */
.box-shadow{box-shadow:0 3px 15px rgba(21,13,13,0.05);}
.box-shadow-mini{box-shadow: 2px 0 5px rgba(4,0,0,0.08);}
.material-shadow{box-shadow: 0px 2px 20px 2px rgba(133,143,136,0.06);}

/* 旋转 */
.rotate-45{transform: rotate(45deg);}
.rotate-90{transform: rotate(90deg);}
.rotate-180{transform: rotate(180deg);}
.rotate-270{transform: rotate(270deg);}

/* 字体颜色 */
.icon-font-color{-webkit-background-clip: text;-webkit-text-fill-color: transparent;}


/*flex布局,可以自己定义适合自己的*/

.flex {
	display: flex;
}

.flex-1 {
	flex: 1;
}


.flex-4 {
	flex: 0 0 25%;
}


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

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

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

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

.flex-x-center {
	display: flex;
	justify-content: center;
}

.flex-x-between {
	display: flex;
	justify-content: space-between;
}

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

.flex-y-start {
	display: flex;
	align-items: flex-start;
}

.flex-y-end {
	display: flex;
	align-items: flex-end;
}

.flex-y-baseline {
	display: flex;
	align-items: baseline;
}