/*reset*/
body,div,table,tr,td,th,h1,h2,h3,h4,h5,h6,form,input,select,textarea,p,ul,ol,li,dl,dd,dt,img{ margin:0; padding:0;}
img{ border:0 none; vertical-align:middle;}
li{ list-style:none;}
a,a:hover{ text-decoration:none;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight: normal;}
em,i,dfn{ font-style:normal;}
table{ border-collapse:collapse; border-spacing:0;}
a, input, select, textarea, button, area{ outline:none; font-family:inherit; font-size: inherit; color:inherit;}
textarea{ overflow:auto; resize:none;}
input[type="button"], input[type="submit"], input[type="reset"], button{ cursor:pointer;} /*FF*/
/*解决iphone手机点击背景问题*/
html,body{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body{ line-height: 1; text-align:center; color: #333; word-break: break-all; overflow-x: hidden; font-size: 14px;}

.f-clear::after{ content: ""; display: block; clear: both;}

/*text*/
.f-tr{ text-align:right;}
.f-tl{ text-align:left;}
.f-tc{ text-align:center;}
.f-tdu{ text-decoration:underline;}
.f-fwb{ font-weight:bold;}
.f-fwn{ font-weight:normal;}
.f-wsn{ white-space:nowrap;}

/*color*/
.f-c-w{ color:white;}
.f-c-r{ color:#D60C19;}
.f-c-g{ color:green;}
.f-c-b{ color:#289de7;}

.f-c-3{ color:#333;}
.f-c-6{ color:#666;}
.f-c-8{ color:#828282;}
.f-c-9{ color:#999;}
.f-c-c{ color:#ccc;}

.f-ft16{ font-size: 16px;}
.f-ft18{ font-size: 18px;}
.f-lh30{ line-height: 30px;}
.f-t2{ text-indent: 2em;}

.f-b-f2{ background-color: #f2f2f2;}

/* padding */
.f-pb5{ padding-bottom: 5px}
.f-pb10{ padding-bottom: 10px}
.f-pb20{ padding-bottom: 20px}
.f-pb40{ padding-bottom: 40px}
.f-pb60{ padding-bottom: 60px}
.f-pb80{ padding-bottom: 80px}
.f-pb100{ padding-bottom: 100px}
.f-pt20{ padding-top: 20px}
.f-pt25{ padding-top: 25px}
.f-pt30{ padding-top: 30px}
.f-pt35{ padding-top: 35px}
.f-pt40{ padding-top: 40px}
.f-pt60{ padding-top: 60px}
.f-pr15{ padding-right: 15px}
.f-pr20{ padding-right: 20px}
.f-mb60{ margin-bottom: 60px}
.f-mb100{ margin-bottom: 100px}
.f-mt60{ margin-top: 60px}

/*layout*/
.f-w{ width:100%;}
.f-w2{ width: 570px;}
.f-h{ height:100%;}
.f-df{ display: flex;}
.f-fl{ float:left;}
.f-fr{ float:right;}
.f-pr{ position:relative;}
.f-pa{ position:absolute;}
.f-dn{ display:none;}
.f-db{ display:block;}
.f-dib{ display:inline-block;}
.f-oh{ overflow:hidden;}
.f-vam{ vertical-align:middle;}
.f-vat{ vertical-align:top;}
.f-vab{ vertical-align:bottom;}
.f-auto{ margin-left: auto; margin-right: auto;}
.f-dfv{ display: flex; align-items: center;}
.f-dfvh{ display: flex; align-items: center; justify-content: center;}
.f-dfvb,
.f-dfvbw{ display: flex; align-items: center; justify-content: space-between;}
.f-dfvbw{ flex-wrap: wrap;}


/* 最多显示n行，超出显示省略号 */
.f-line,
.f-line2, 
.f-line3 { display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden;}
.f-line2 { -webkit-line-clamp: 2;}
.f-line3 { -webkit-line-clamp: 3;}
.f-line4 { -webkit-line-clamp: 4;}

.f-active{ transform: scale(.9); -webkit-transform: scale(.9);}


/* loading */
.f-loading { position:fixed; left:0; top:0; width:100%; height:100%; z-index: 1000000; transition: all 0.5s; -webkit-transition: all 0.5s;}
.f-loading .info { min-width: 50px; height: 50px; padding: 0 12px; box-sizing:border-box; background:rgba(0,0,0,.6);border-radius:6px; text-align:center; white-space:nowrap; color:#fff;}
.f-loading i { display:block; height:20px; width:20px; border-radius:50%; border:2px solid #fff; border-bottom-color: transparent; animation: a-rotate 0.75s linear infinite; -webkit-animation: a-rotate 0.75s linear infinite;}
.f-loading .info p { padding:0 0 0 10px;}

/* 消息提示框 */
.f-toast{ position:fixed; left:0; top: 45%; right: 0; margin: auto; z-index: 1000000; text-align: center; animation: a-fadeIn 0.5s;}
.f-toast p{ display: inline-block; max-width: 80%; background-color: rgba(0,0,0,.8); color: #fff; font-size: 24px; padding: 15px 30px; line-height: 1.4; border-radius: 6px;}


/* 弹窗 */
.m-popup{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, .7); z-index: 99;}
.m-popup .cont{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}


.a-fadeIn{ animation: a-fadeIn 0.4s; -webkit-animation: a-fadeIn 0.4s;}

/* 淡入 */
@keyframes a-fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes a-fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}