/* display */
.dn{display:none;}
.di{display: inline;}
.db{display: block;}
.dib{display: inline-block;}

/* position */
.rel{position:relative;}
.abs{position:absolute;}
.abs_full{left:0;right:0;top:0;bottom:0;}

/* height */
.height30{height: 30px;}
.height35{height: 35px;}
.height40{height: 40px;}
.height50{height: 50px;}
.height60{height: 60px;}
.height70{height: 70px;}
.height80{height: 80px;}
.height105{height: 105px;}
.height100{height: 100px;}
.height110{height: 110px;}
.height120{height: 120px;}
.pct_height100{height: 100%;}
.pct_height90{height: 90%;}
.pct_height80{height: 80%;}

/* width */
.width1em{width: 1em;}
.width2em{width: 2em;}
.width3em{width: 3em;}
.width4em{width: 4em;}
.width5em{width: 5em;}
.width10em{width: 10em;}

/* percent width value */
.pct10{width:10%;}
.pct15{width:15%;}
.pct20{width:20%;}
.pct25{width:25%;}
.pct30{width:30%;}
.pct33{width:33.3%;}
.pct40{width:40%;}
.pct50{width:50%;}
.pct60{width:60%;}
.pct66{width:66.6%;}
.pct70{width:70%;}
.pct75{width:75%;}
.pct80{width:80%;}
.pct90{width:90%;}
.pct100{width:100%;}

/* line-height */
.lh1{line-height: 1;}
.lh11{line-height: 1.1;}
.lh15{line-height: 1.5;}
.lh18{line-height: 1.8;}
.lh2{line-height: 2;}

.lh30{line-height: 30px;}
.lh40{line-height: 40px;}
.lh50{line-height: 50px;}
.lh60{line-height: 60px;}
.lh70{line-height: 70px;}

/* margin */
.m0{margin: 0;}
.m5{margin: 5px;}
.m10{margin: 10px;}
.m20{margin: 20px;}
.m30{margin: 30px;}
.mH5{margin-left: 5px;margin-right: 5px;}  /* mH表示水平方向上的margin,包括margin-left, margin-right */
.mH10{margin-left: 10px;margin-right: 10px;}
.mH20{margin-left: 20px;margin-right: 20px;}
.mH30{margin-left: 30px;margin-right: 30px;}
.mV2{margin-top: 2px;margin-bottom: 2px;}  /* mV表示垂直方向上的margin, 包括margin-top, margin-bottom */
.mV5{margin-top: 5px;margin-bottom: 5px;}  /* mV表示垂直方向上的margin, 包括margin-top, margin-bottom */
.mV10{margin-top: 10px;margin-bottom: 10px;}
.mV15{margin-top: 15px;margin-bottom: 15px;}
.mV20{margin-top: 20px;margin-bottom: 20px;}
.mV30{margin-top: 30px;margin-bottom: 30px;}
.mV40{margin-top: 40px;margin-bottom: 40px;}
.mV50{margin-top: 50px;margin-bottom: 50px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mb0{margin-bottom: 0;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.ml2{margin-left: 2px;}
.ml5{margin-left: 5px;}
.ml8{margin-left: 8px;}
.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}
.ml30{margin-left: 30px;}
.ml5{margin-left: 5px;}
.mr2{margin-right: 2px;}
.mr5{margin-right: 5px;}
.mr8{margin-right: 8px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}

/* padding */
.p0{padding: 0}
.p5{padding: 5px;}
.p10{padding: 10px;}
.p20{padding: 20px;}
.p30{padding: 30px;}
.pH0{padding-left: 0!important;padding-right: 0!important;}
.pH2{padding-left: 2px;padding-right: 2px;}
.pH5{padding-left: 5px;padding-right: 5px;}  /* pH表示水平方向上的padding,包括padding-left, padding-right */
.pH10{padding-left: 10px;padding-right: 10px;}
.pH20{padding-left: 20px;padding-right: 20px;}
.pH30{padding-left: 30px;padding-right: 30px;}
.pV5{padding-top: 5px;padding-bottom: 5px;}  /* pV表示垂直方向上的padding, 包括padding-top, padding-bottom */
.pV10{padding-top: 10px;padding-bottom: 10px;}
.pV20{padding-top: 20px;padding-bottom: 20px;}
.pV30{padding-top: 30px;padding-bottom: 30px;}
.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt20{padding-top: 20px;}
.pt30{padding-top: 30px;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb20{padding-bottom: 20px;}
.pb30{padding-bottom: 30px;}
.pl2{padding-left: 2px;}
.pl5{padding-left: 5px;}
.pl8{padding-left: 8px;}
.pl10{padding-left: 10px;}
.pl20{padding-left: 20px;}
.pl30{padding-left: 30px;}
.pl5{padding-left: 5px;}
.pr2{padding-right: 2px;}
.pr5{padding-right: 5px;}
.pr8{padding-right: 8px;}
.pr10{padding-right: 10px;}
.pr20{padding-right: 20px;}
.pr30{padding-right: 30px;}

/* top, bottom */
.top_15{top: -15px;}
.top0{top: 0;}
.top30{top: 30px;}
.top40{top: 40px;}
.top50{top: 50px;}
.top60{top: 60px;}
.top70{top: 70px;}
.top80{top: 80px;}
.top100{top: 100px;}
.top110{top: 110px;}
.top120{top: 120px;}
.top150{top: 150px;}
.bottom0{bottom: 0;}
.bottom50{bottom: 50px;}
.bottom60{bottom: 60px;}
.bottom70{bottom: 70px;}

/* border-color */
.border-c{border: 1px solid #ccc;}
.border-d{border: 1px solid #ddd;}
.border-e{border: 1px solid #eee;}
.border-info{border: 1px solid #00A1F6;}
.border-warn{border: 1px solid #F49500;}
.border-success{border: 1px solid #04B479;}
.border-none{border: none!important;}
.border-c__dashed{border: 1px dashed #ccc;}

/* bottom-1px */
.bottom-c{border-bottom: 1px solid #ccc;}
.bottom-d{border-bottom: 1px solid #ddd;}
.bottom-e{border-bottom: 1px solid #eee;}


/* 点击无框文本框文本域 */
.outline-none{ outline:none;}

/*background-color*/
.bg-white{background-color: #fff;}
.bg-default{background-color: #DDDEDF;}
.bg-info{background-color: #409EFF;}
.bg-warn{background-color: #F49500;}
.bg-danger{background-color: red;}
.bg-success{background-color: #04B479;}

/* color */
.color-gray{color: #9A9C9B;}
.color-white{color: #fff;}
.color-info{color: #409EFF;}
.color-warn{color: rgb(243, 182, 83);}
.color-success{color: #04B479;}
.color-danger{color: red;}
.color-l{color: rgba(0, 0, 0, 0.4);}
.color-default{color: rgba(0, 0, 0, 0.6);}
.color-d{color: rgba(0, 0, 0, 0.8);}
.color-theme{color: #4C8CC3;}
.color-green-light{color: #08a2b4
}

/* font-size */
.f0{font-size:0;}
.f10{font-size:10px;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f15{font-size:15px;}
.f16{font-size:16px;}
.f17{font-size:17px;}
.f18{font-size:18px;}
.f19{font-size:19px;}
.f20{font-size:20px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.f26{font-size:26px;}
.f30{font-size:30px;}

/* font-weight */
.fw200{font-weight: 200;}
.fw300{font-weight: 300;}
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}
.fw600{font-weight: 600;}

/* text-align */
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.tj{text-align:justify;}

/* text-decoration */
.tdl, .tdl:hover{text-decoration:underline;}
.tdn,.tdn:hover,.tdn a:hover,a.tdn:hover{text-decoration:none;}

/* white-space */
.nowrap{white-space:nowrap;}

/* word-wrap */
.bk{word-wrap:break-word;}

/* vertical-align */
.vt{vertical-align:top;}
.vb{vertical-align:bottom;}
.vm{vertical-align:middle;}
.vtb{vertical-align:text-bottom;}

/* float */
.fl{float:left;}
.fr{float:right;}

/* overflow */
.ovh{overflow:hidden;}
.ova{overflow:auto;}


/* opacity */
.opacity0{opacity: 0;}
.opacity5{opacity: 0.5;}
.opacity6{opacity: 0.6;}
.opacity7{opacity: 0.7;}
.opacity8{opacity: 0.8;}
.opacity9{opacity: 0.9;}

/* visibility */
.vh{visibility:hidden;}
.vv{visibility:visible;}

/* 居中 */
.auto{margin-left:auto; margin-right:auto;}  /* 块状元素水平居中 */
.dib-vm{display:inline-block; width:0; height:100%; vertical-align:middle;} /* 大小不定元素垂直居中 */
.abs-center{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} /* 大小不定的绝对子元素居中 */
.abs-center__y{position: absolute; top: 50%; transform: translate(0,-50%);} /* 大小不定的绝对子元素垂直居中 */
.abs-center__x{position: absolute; left: 50%; transform: translate(-50%, 0);} /* 大小不定的绝对子元素垂直居中 */


/* flex布局 flex_row横向排列  flex_column纵向排列  后两个词表示主轴和次副轴的排列方式 */
.flex_row-center{display: flex;  align-items: center; justify-content: center;}
.flex_row-center-start{display: flex;  align-items: flex-start;  justify-content: center;}
.flex_row-center-end{display: flex;  align-items: flex-end;  justify-content: center;}
.flex_row-between{display: flex;  align-items: center;  justify-content: space-between;}
.flex_row-between-start{display: flex;  align-items: flex-start;  justify-content: space-between;}
.flex_row-between-end{display: flex;  align-items: flex-end;  justify-content: space-between;}
.flex_row-start {display: flex; align-items: center; justify-content: flex-start;}
.flex_row-end {display: flex; align-items: center; justify-content: flex-end;}
.flex_column-center{display: flex;  flex-direction: column; align-items: center; justify-content: center;}
.flex_column-center-start{display: flex;  flex-direction: column; align-items: flex-start; justify-content: center;}
.flex_column-center-end{display: flex;  flex-direction: column; align-items: flex-end; justify-content: center;}
.flex_column-between{display: flex;  flex-direction: column; align-items: center; justify-content: space-between;}
.flex_column-between-start{display: flex;  flex-direction: column; align-items: flex-start; justify-content: space-between;}
.flex_column-between-end{display: flex;  flex-direction: column; align-items: flex-end; justify-content: space-between;}
.shrink0{flex-shrink: 1;}

/* flex布局下子元素所占比例 */
.flex1{flex: 1;}
.flex2{flex: 2;}
.flex3{flex: 3;}
.flex4{flex: 4;}
.flex5{flex: 5;}
.flex1em{flex: 0 0 1em; width: 1em;}
.flex2em{flex: 0 0 2em; width: 2em;}
.flex3em{flex: 0 0 3em; width: 3em;}
.flex4em{flex: 0 0 4em; width: 4em;}
.flex5em{flex: 0 0 5em; width: 5em;}
.flex6em{flex: 0 0 6em; width: 6em;}
.flex7em{flex: 0 0 7em; width: 7em;}
.flex8em{flex: 0 0 8em; width: 8em;}
.flex9em{flex: 0 0 9em; width: 9em;}
.flex10em{flex: 0 0 10em; width: 10em;}


/* border-radius */
.br0{border-radius: 0;}
.br2{border-radius: 2px;}
.br5{border-radius: 5px;}
.br8{border-radius: 8px;}
.br10{border-radius: 10px;}
.br12{border-radius: 12px;}
.br50{border-radius: 50%;}
.btr10{border-top-left-radius: 10px;border-top-right-radius: 10px;}

/* 清除浮动 */
.clearfix{*zoom:1;}
.clearfix:after{content: '';  display: block;  clear: both;  height: 0;}

/* 基于display:table-cell的自适应布局 */
.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}

/* 单行文字溢出虚点显示*/
.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

.zindex999{z-index: 999;}
.zindex50{z-index: 50;}

/*opacity*/
.opacity0{opacity: 0;}

/*ul list-style: none*/
.lsn{list-style: none;}

/*cursor*/
.cursorp{cursor: pointer}
.cursora{cursor: alias}
.cursor_notallowed{cursor: not-allowed}

.hover-color:hover{color: #409EFF;}
.hover-bgcolor:hover{background-color: #F5F7FB;}


.extend-click {position: relative;}
.extend-click:after{content: '';position: absolute;top: -10px;left: -10px;right: -10px;bottom: -10px;}