/* reset */
*{margin: 0;padding: 0;flex-shrink: 0;word-break: break-all;box-sizing: border-box;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body{font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;}
a{color:#333;display: block;}
/* reset end */


.hr{
	height: 1px;
	background-color: #eee;
}

.click:active{
	opacity: 0.5;
}
/* flex布局 */

.flex1 {
	flex: 1 !important ;
}
.flex2 {
	flex: 2 !important;
}
.flex3 {
	flex: 3 !important;
}
.column {
	display: flex;
	flex-direction: column !important;
	justify-content: space-between !important;
}
.row {
	display: flex;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
}
.center {
	display: flex;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
}
/* 主轴对齐方式 */
.flex_start{
	justify-content: flex-start !important;
}
.flex_end{
	justify-content: flex-end !important;
}
.space_between{
	justify-content: space-between !important;
}
.flex_around{
	justify-content:space-around !important;
}
.flex_center{
	justify-content:center !important;
}
/* 次轴对齐方式 */
.cross_start{
	align-items: flex-start !important ;
}
.cross_end{
	align-items: flex-end;
}
.wrap{
	flex-wrap: wrap !important;
}

/* 背景色 */
.bgcf2{
	background-color: #f2f2f2;
}
.bgcf8{
	background-color: #f8f8f8;
}
.bgcfff{
	background-color: #fff;
}

.Click{
	opacity: 0.5;
}
.bgcgr{
	background-color: #06AC8F;
}
.bgcred{
	background-color:#E71818;
}
.gr{
	color: #06AC8F;
}
.red{
	color: #E71818;
}
/* 字体设置 */
.text-s{
	font-size: 12px;
}
.text-x{
	font-size: 16px;
}
.text-xl{
	font-size: 18px;
}
.text-xll{
	font-size: 24px;
}
.text-xlll{
	font-size: 30px;
}
.bold{
	font-weight: bold;
}
.color000{
	color: #000;
}
.color666{
	color: #666;
}
.color333{
	color: #333;
}
.color999{
	color: #999
}
.colorfff{
	color: #fff;
}
.coloreee{
	color: #eee;
}
.colorccc{
	color: #ccc;
}
.green{
	color: #52A344;
}

/* 边框 */
.borderBt{
	border-bottom-width: 1px ;
	border-bottom-color: #eee ;
	border-bottom-style: solid;
}
.border{
	border-width: 1px ;
	border-style: solid ;
}
.radius{
	border-radius: 10px;
}
/* 边距 */
.mg020{
	margin: 0 20px;
}
.mg030{
	margin: 0 30px;
}
.mt{
	margin-top: 10px;
}
.mt15{
	margin-top: 15px;
}
.mt20{
	margin-top: 20px;
}
.mt30{
	margin-top: 30px;
}
.mt35{
	margin-top: 35px;
}
.mt40{
	margin-top: 40px;
}
.mt60{
	margin-top: 60px;
}
.mt80 {
	margin-top: 80px;
}
.mt100 {
	margin-top: 100px;
}
.mt120 {
	margin-top: 120px;
}
.mt140 {
	margin-top: 140px;
}
.mt160 {
	margin-top: 160px;
}
.mt200 {
	margin-top: 200px;
}

.mb20{
	margin-bottom: 20px;
}
.mr{
	margin-right: 10px;
}
.mr15{
	margin-right: 15px;
}
.mr20{
	margin-right: 20px;
}
.mr30{
	margin-right: 30px;
}
.mr40{
	margin-right: 40px;
}
.mr60{
	margin-right: 60px;
}
.ml{
	margin-left: 10px;
}
.ml20{
	margin-left: 20px;
}
.ml30{
	margin-left: 30px;
}
.ml40{
	margin-left: 40px;
}
.ml80{
	margin-left: 40px;
}
.mb{
	margin-bottom: 10px;
}
.mb20{
	margin-bottom: 20px;
}
.mb30{
	margin-bottom: 30px;
}
.mb40{
	margin-bottom: 40px;
}
/* 内边距 */
.pd{
	padding: 10px;
}
.pd020{
	padding: 0 20px;
}
.pd010{
	padding: 0 10px;
}
.pd015{
	padding: 0 15px;
}
.pd030{
	padding: 0 30px;
}
.pd040{
	padding: 0 40px;
}
.pt{
	padding-top: 10px;
}
.pt20{
	padding-top: 20px;
}
.pt30{
	padding-top: 30px;
}
.pd20{
	padding: 20px;
}
.pd30{
	padding: 30px;
}
.pl{
	padding-left: 10px;
}
.pl20{
	padding-left: 20px;
}
.pr{
	padding-right: 10px;
}
.pr20{
	padding-right: 20px;
}
.pb{
	padding-bottom: 10px;
}
.pb15{
	padding-bottom: 15px;
}
.pb20{
	padding-bottom: 20px;
}
.pb30{
	padding-bottom: 30px;
}

/* 淡入动画 从上至下  */
@keyframes fade-in {  
    0% {
		transform: translateY(-40%);
		opacity: 0;
	}
    100% {
		transform: translateY(0);
		opacity: 1;
	}
}
.fade-in{
	animation: fade-in 1s;  
	animation-fill-mode: forwards;
}
/* 淡入动画 从下至上  */
@keyframes fade-bottom {  
    0% {
		transform: translateY(20%);
		opacity: 0;
	}
    100% {
		transform: translateY(0);
		opacity: 1;
	}
}
.fade_bottom{
	animation: fade-bottom 1s;  
	animation-fill-mode: forwards;
}