/*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{ font-family: Arial, Helvetica, sans-serif; line-height: 1; text-align:center; color: #000; word-break: break-all; overflow-x: hidden; font-size: 14px; font-family: Microsoft YaHei;}


/*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:#FE0000;}
.f-c-g{ color:green;}
.f-c-b{ color:#289de7;}

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

.f-fg{ -webkit-filter: grayscale(100%); filter: grayscale(100%);}

/*layout*/
.f-w{ width:100%;}
.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,
[v-cloak]{ 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;}

.f-pac{ position: absolute; left: 0; right: 0; margin: auto;}

/* 最多显示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-active{ transform: scale(.95); -webkit-transform: scale(.95);}

/*padding*/
.f-p5{padding:5px}
.f-p10{padding:10px}
.f-p15{padding:15px}
.f-p20{padding:20px}
.f-p30{padding:30px}
.f-p40{padding:40px}
.f-p50{padding:50px}
.f-pt5{padding-top:5px}
.f-pt10{padding-top:10px}
.f-pt15{padding-top:15px}
.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-pt50{padding-top:50px}
.f-pr5{padding-right:5px}
.f-pr10{padding-right:10px}
.f-pr15{padding-right:15px}
.f-pr20{padding-right:20px}
.f-pr25{padding-right:25px}
.f-pr30{padding-right:30px}
.f-pr35{padding-right:35px}
.f-pr40{padding-right:40px}
.f-pr50{padding-right:50px}
.f-pb5{padding-bottom:5px}
.f-pb10{padding-bottom:10px}
.f-pb15{padding-bottom:15px}
.f-pb20{padding-bottom:20px}
.f-pb25{padding-bottom:25px}
.f-pb30{padding-bottom:30px}
.f-pb35{padding-bottom:35px}
.f-pb40{padding-bottom:40px}
.f-pb50{padding-bottom:50px}
.f-pb60{padding-bottom:60px}
.f-pl-5{padding-left:5px}
.f-pl-10{padding-left:10px}
.f-pl-15{padding-left:15px}
.f-pl-20{padding-left:20px}
.f-pl-25{padding-left:25px}
.f-pl-30{padding-left:30px}
.f-pl-35{padding-left:35px}
.f-pl-40{padding-left:40px}
.f-pl-50{padding-left:50px}
.f-mt5{margin-top:5px}
.f-mt10{margin-top:10px}
.f-mt15{margin-top:15px}
.f-mt20{margin-top:20px}
.f-mt25{margin-top:25px}
.f-mt30{margin-top:30px}
.f-mt35{margin-top:35px}
.f-mt40{margin-top:40px}
.f-mt45{margin-top:45px}
.f-mt50{margin-top:50px}
.f-mr5{margin-right:5px}
.f-mr10{margin-right:10px}
.f-mr15{margin-right:15px}
.f-mr20{margin-right:20px}
.f-mr25{margin-right:25px}
.f-mr30{margin-right:30px}
.f-mr35{margin-right:35px}
.f-mr40{margin-right:40px}
.f-mr45{margin-right:45px}
.f-mr50{margin-right:50px}
.f-mb5{margin-bottom:5px}
.f-mb10{margin-bottom:10px}
.f-mb15{margin-bottom:15px}
.f-mb20{margin-bottom:20px}
.f-mb25{margin-bottom:25px}
.f-mb30{margin-bottom:30px}
.f-mb35{margin-bottom:35px}
.f-mb40{margin-bottom:40px}
.f-mb50{margin-bottom:50px}
.f-ml-5{margin-left:5px}
.f-ml-10{margin-left:10px}
.f-ml-15{margin-left:15px}
.f-ml-20{margin-left:20px}
.f-ml-25{margin-left:25px}
.f-ml-30{margin-left:30px}
.f-ml-35{margin-left:35px}
.f-ml-40{margin-left:40px}
.f-ml-50{margin-left:50px}


/* 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; width: 750px; 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: 14px; padding: 10px 15px; line-height: 1.4; border-radius: 3px;}


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



/* ***********动画********** */
.a-pulse{ animation: a-pulse 0.6s; -webkit-animation: a-pulse 0.6s;}
.a-fadeIn{ animation: a-fadeIn 0.6s; -webkit-animation: a-fadeIn 0.6s;}

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

/* 旋转 */
@keyframes a-rotate {
  100% { transform:rotate(360deg); -webkit-transform:rotate(360deg);}
}
@-webkit-keyframes a-rotate {
  100% { transform:rotate(360deg); -webkit-transform:rotate(360deg);}
}

/* 弹性 */
@keyframes a-pulse {
  0% { transform: scale(0); -webkit-transform: scale(0); }
  40% { transform: scale(1.1); -webkit-transform: scale(1.1); }
  60% { transform: scale(0.9); -webkit-transform: scale(0.9); }
}
@-webkit-keyframes a-pulse {
  0% { transform: scale(0); -webkit-transform: scale(0); }
  40% { transform: scale(1.1); -webkit-transform: scale(1.1); }
  60% { transform: scale(0.9); -webkit-transform: scale(0.9); }
}

/* 翻牌动画 */
.a-flip{ -webkit-animation: a-flip 1s; animation: a-flip 1s;}
@-webkit-keyframes a-flip {
  0% { -webkit-transform: perspective(400px) rotateY(180deg) scale(0); transform: perspective(400px) rotateY(180deg) scale(0); }
  0%, 50% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
  50% { -webkit-transform: perspective(400px) rotateY(-16deg); transform: perspective(400px) rotateY(-16deg) }
  67% { -webkit-transform: perspective(400px) rotateY(8deg); transform: perspective(400px) rotateY(8deg); }
  84% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) }
  to { -webkit-transform: perspective(400px); transform: perspective(400px) }
}
@keyframes a-flip {
  0% { -webkit-transform: perspective(400px) rotateY(180deg) scale(0); transform: perspective(400px) rotateY(180deg) scale(0); }
  0%, 50% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
  50% { -webkit-transform: perspective(400px) rotateY(-16deg); transform: perspective(400px) rotateY(-16deg) }
  67% { -webkit-transform: perspective(400px) rotateY(8deg); transform: perspective(400px) rotateY(8deg); }
  84% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) }
  to { -webkit-transform: perspective(400px); transform: perspective(400px) }
}


/* 入场 */
@-webkit-keyframes a-entry{
  100%{ opacity: 1; -webkit-transform: translate(0,0) scale(1); transform: translate(0,0) scale(1);}
}
@keyframes a-entry{
  100%{ opacity: 1; -webkit-transform: translate(0,0) scale(1); transform: translate(0,0) scale(1);}
}

/* 离场 */
@-webkit-keyframes a-leave{
  100%{ opacity: 0; -webkit-transform: translate(0,0) scale(0); transform: translate(0,0) scale(0);}
}
@keyframes a-leave{
  100%{ opacity: 0; -webkit-transform: translate(0,0) scale(0); transform: translate(0,0) scale(0);}
}

/* 循环 */
@-webkit-keyframes a-loop{
  50%{ opacity: 1; -webkit-transform: translate(0,0); transform: translate(0,0);}
}
@keyframes a-loop{
  50%{ opacity: 1; -webkit-transform: translate(0,0); transform: translate(0,0);}
}