/*!
 * 样式名称：Hui.css
 * 样式作者：新生帝
 * 编写日期：2016年03月13日
 * 版权所有：中山赢友网络科技有限公司
 * 企业官网：http://www.winu.net
 * 开源协议：GPL v2 License
 * 样式描述：一切从简，只为了更懒！
 */


/* HTML5 重置样式 */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; }
article, aside, figure, footer, header, nav, section, details, summary { display: block; }
html { box-sizing: border-box; }
*,
*:before,
*:after { box-sizing: inherit; }
img,
object,
embed { max-width: 100%; }
html { overflow-y: scroll; }
ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
th { font-weight: bold; vertical-align: bottom; }
td { font-weight: normal; vertical-align: top; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 10px 0; padding: 0; }
input, select { vertical-align: middle; }
pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
select, input, textarea { font: 99% sans-serif; }
table { font-size: inherit; font: 100%; }
small { font-size: 85%; }
strong { font-weight: bold; }
td, td img { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
button,
input[type=button] { width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }
.clearfix:after { content: " "; display: block; clear: both; }

/* 清除移动浏览器默认样式 */
html, body { -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* 设置默认字体单位为rem，14px=1.4rem */
html { font-size: 62.5%; height: 100%; }
body { font-size: 1.6rem; background: #f4f5f9; width: 100%; height: 100%; color: #666666; }

/*css3常用流布局*/
.H-flexbox { display: -webkit-flex; display: flex; }
.H-flexbox-inline { display: -webkit-inline-flex; display: inline-flex; }
/*流布局方向*/
.H-flexbox-horizontal-direction-ltr { -webkit-flex-direction: row; flex-direction: row; }
.H-flexbox-horizontal-direction-rtl { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
.H-flexbox-vertical-direction-ttb { -webkit-flex-direction: column; flex-direction: column; }
.H-flexbox-vertical-direction-btt { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }
/*流布局是否换行*/
.H-flexbox-horizontal-nowrap { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
.H-flexbox-horizontal-wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
/*流布局是否反转*/
.H-flexbox-horizontal-nowrap-reverse { -webkit-flex-wrap: nowrap-reverse; flex-wrap: nowrap-reverse; }
.H-flexbox-horizontal-wrap-reverse { -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }

/*水平线*/
.H-horizontal-line { position: relative; height: 1px; width: 100%; }
.H-horizontal-line:after { border-bottom: 1px solid #d7d7d7; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(1); pointer-events: none; }

/*让元素水平排布*/
.H-block-row-parent { display: box; display: -webkit-box; -webkit-box-orient: horizontal; box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; }
.H-block-row-item { -webkit-box-align: center; box-sizing: border-box; -webkit-box-sizing: border-box; }

/*缩进两个空格*/
.H-text-indent { text-indent: 28px; }

/*常用浮动*/
.H-float-left { float: left; }
.H-float-right { float: right; }
.H-float-none { float: none; }

/*设置盒子模型*/
.H-box-sizing-border-box { box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-box-sizing-content-box { box-sizing: content-box; -webkit-box-sizing: content-box; }

/*常用快捷元素切换*/
.H-display-none { display: none; }
.H-display-block { display: block; }
.H-display-inline { display: inline; }
.H-display-inline-block { display: inline-block; }
.H-display-table { display: table; }
.H-display-table-cell { display: table-cell; }

/*常用定位*/
.H-position-absolute { position: absolute; }
.H-position-relative { position: relative; }
.H-position-fixed { position: fixed; }
.H-position-static { position: static; }

/*设置文字显示多少行*/
.H-text-show-row-1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.H-text-show-row-2 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.H-text-show-row-3 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.H-text-show-row-4 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.H-text-show-row-5 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }

/*流布局，水平、垂直、伸缩*/
.H-flexbox-vertical { display: box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-flow: column; flex-flow: column; height: 100%; -webkit-flex-direction: column; flex-direction: column; }
.H-flexbox-horizontal { display: box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-flex-flow: row; flex-flow: row; width: 100%; -webkit-flex-direction: row; flex-direction: row; }
.H-flex-item { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }

/*支持动画*/
.H-transition-all { transition: All 0.5s ease-in; -webkit-transition: All 0.5s ease-in; }

/*常用块元素，行元素垂直和水平都对齐*/
.H-center-all { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; }

/*常用块元素，行元素垂直对齐*/
.H-text-vertical-middle, .H-block-vertical-middle { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: center; display: box; box-orient: horizontal; box-align: center; }
.H-text-vertical-top, .H-block-vertical-top { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: start; display: box; box-orient: horizontal; box-align: start; }
.H-text-vertical-bottom, .H-block-vertical-bottom { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: end; display: box; box-orient: horizontal; box-align: end; }
.H-vertical-align-middle { vertical-align: middle; }

/*常用块元素，行元素水平对齐*/
.H-block-horizontal-center { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; display: box; box-orient: horizontal; box-pack: center; }
.H-block-horizontal-left { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: start; display: box; box-orient: horizontal; box-pack: start; }
.H-block-horizontal-right { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: end; display: box; box-orient: horizontal; box-pack: end; }

/*常用文本对齐*/
.H-text-horizontal-center { text-align: center !important; }
.H-text-horizontal-left { text-align: left !important; }
.H-text-horizontal-right { text-align: right !important; }

/*常用超出隐藏，滚动条处理*/
.H-overflow-hidden { overflow: hidden; }
.H-overflow-auto { overflow: auto; }
.H-overflow-scroll { overflow: scroll; }
.H-overflow-x-hidden { overflow-x: hidden; }
.H-overflow-x-auto { overflow-x: auto; }
.H-overflow-x-scroll { overflow-x: scroll; }
.H-overflow-y-hidden { overflow-y: hidden; }
.H-overflow-y-auto { overflow-y: auto; }
.H-overflow-y-scroll { overflow-y: scroll; }

/*常用内外边距*/
/*垂直水平内外边距*/
.H-vertical-padding10 { padding: 10px 0; }
.H-horizontal-padding10 { padding: 0 10px; }
.H-vertical-margin10 { margin: 10px 0; }
.H-horizontal-margin10 { margin: 0 10px; }
.H-vertical-padding0 { padding-top: 0; padding-bottom: 0; }
.H-horizontal-padding0 { padding-left: 0; padding-right: 0; }
.H-vertical-margin0 { margin-top: 0; margin-bottom: 0; }
.H-horizontal-margin0 { margin-left: 0; margin-right: 0; }
/*常用内外边距*/
.H-padding10 { padding: 10px; }
.H-margin10 { margin: 10px; }
.H-padding-top10 { padding-top: 10px; }
.H-margin-top10 { margin-top: 10px; }
.H-margin-top5 { margin-top: 5px; }
.H-padding-left10 { padding-left: 10px; }
.H-margin-left10 { margin-left: 10px; }
.H-padding-right10 { padding-right: 10px; }
.H-margin-right10 { margin-right: 10px; }
.H-padding-bottom10 { padding-bottom: 10px; }
.H-margin-bottom10 { margin-bottom: 10px; }
.H-padding-top0 { padding-top: 0; }
.H-margin-top0 { margin-top: 0; }
.H-padding-left0 { padding-left: 0; }
.H-margin-left0 { margin-left: 0; }
.H-padding-right0 { padding-right: 0; }
.H-margin-right0 { margin-right: 0; }
.H-padding-bottom0 { padding-bottom: 0; }
.H-margin-bottom0 { margin-bottom: 0; }
.H-block-margin-auto { margin: 0 auto; }


/*宽高度100%*/
.H-width100-percent { width: 100%; }
.H-height100-percent { height: 100%; }
.H-auto-height { min-height: 0; height: auto; overflow: hidden; }

/*常用背景颜色*/
.H-background-white { background: #fff; }
.H-background-black { background: #000; }
.H-background-red { background: #f00; }
.H-background-green { background: green; }
.H-background-blue { background: #00f; }
.H-background-eee { background: #eee; }
.H-backgroud-f8f8f8 { background: #f8f8f8; }
.H-background-f4f4f4 { background: #f4f4f4; }
.H-background-transparent { background: rgba(0,0,0,0); }
.H-background-transparent50-percent { background: rgba(0,0,0,0.5); }
.H-background-transparent20-percent { background: rgba(0,0,0,0.2); }
.H-background-transparent80-percent { background: rgba(0,0,0,0.8); }

/*常用字体颜色*/
.H-color-ccc { color: #ccc !important; }
.H-color-333 { color: #333 !important; }
.H-color-444 { color: #444 !important; }
.H-color-666 { color: #666666 !important; }
.H-color-999 { color: #999 !important; }
.H-color-eee { color: #eee !important; }
.H-color-d7d7d7 { color: #d7d7d7 !important; }
.H-color-white { color: #fff !important; }
.H-color-black { color: #000 !important; }

/*常用字体大小*/
.H-font-size-24 { font-size: 2.4rem !important; }
.H-font-size-22 { font-size: 2.2rem !important; }
.H-font-size-20 { font-size: 2rem !important; }
.H-font-size-18 { font-size: 1.8rem !important; }
.H-font-size-16 { font-size: 1.6rem !important; }
.H-font-size-15 { font-size: 1.5rem !important; }
.H-font-size-14 { font-size: 1.4rem !important; }
.H-font-size-13 { font-size: 1.3rem !important; }
.H-font-size-12 { font-size: 1.2rem !important; }
.H-font-size-10 { font-size: 1rem !important; }

/*圆角*/
.H-border-radius-circle { border-radius: 50%; -webkit-border-radius: 50%; }
.H-border-radius3-px { border-radius: 3px; -webkit-border-radius: 3px; }
.H-border-radius3-after-px:after { border-radius: 3px; -webkit-border-radius: 3px; }
.H-border-radius6-px { border-radius: 6px; -webkit-border-radius: 6px; }
.H-border-radius6-after-px:after { border-radius: 6px; -webkit-border-radius: 6px; }
.H-border-radius15-px { border-radius: 15px; -webkit-border-radius: 15px; }

/*边线*/
/*左*/
.H-border-left1-before-px { position: relative; }
.H-border-left1-before-px:before { border-left: 1px solid #d7d7d7; content: ""; position: absolute; top: 0; left: 0; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
/*右*/
.H-border-right1-after-px { position: relative; }
.H-border-right1-after-px:after { border-right: 1px solid #d7d7d7; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
/*上*/
.H-border-top1-before-px { position: relative; }
.H-border-top1-left10-before-px { position: relative; }
.H-border-top1-right10-before-px { position: relative; }
.H-border-top1-left10-right10-before-px { position: relative; }
.H-border-top1-before-px:before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; border-top: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; }
.H-border-top1-left10-before-px:before { content: ""; position: absolute; top: 0px; left: 10px; right: 0px; border-top: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; }
.H-border-top1-right10-before-px:before { content: ""; position: absolute; top: 0px; left: 0px; right: 10px; border-top: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; }
.H-border-top1-left10-right10-before-px:before { content: ""; position: absolute; top: 0px; left: 10px; right: 10px; border-top: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; }
/*下*/
.H-border-bottom1-after-px { position: relative; }
.H-border-bottom1-left10-after-px { position: relative; }
.H-border-bottom1-right10-after-px { position: relative; }
.H-border-bottom1-left10-right10-after-px { position: relative; }
.H-border-bottom1-after-px:after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; }
.H-border-bottom1-left10-after-px:after { content: ""; position: absolute; bottom: 0px; left: 10px; right: 0px; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; }
.H-border-bottom1-right10-after-px:after { content: ""; position: absolute; bottom: 0px; left: 0; right: 10px; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; }
.H-border-bottom1-left10-right10-after-px:after { content: ""; position: absolute; bottom: 0px; left: 10px; right: 10px; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; }
/*四边线*/
.H-border-all1-after-px { position: relative; }
.H-border-all1-after-px:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #d7d7d7; overflow: hidden; }

/*主题颜色*/
.H-theme1-bg { background: #52ace5 !important; }
.H-theme1-color { color: #52ace5 !important; }
.H-theme1-border { position: relative; }
.H-theme1-border:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #52ace5 !important; overflow: hidden; }
.H-theme2-bg { background: #ff7f8a !important; }
.H-theme2-color { color: #ff7f8a !important; }
.H-theme2-border { position: relative; }
.H-theme2-border:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #ff7f8a !important; overflow: hidden; }
.H-theme3-bg { background: #3c4146 !important; }
.H-theme3-color { color: #3c4146 !important; }
.H-theme3-border { position: relative; }
.H-theme3-border:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #3c4146 !important; overflow: hidden; }
.H-theme4-bg { background: #ffa977 !important; }
.H-theme4-color { color: #ffa977 !important; }
.H-theme4-border { position: relative; }
.H-theme4-border:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #ffa977 !important; overflow: hidden; }
.H-theme5-bg { background: #4db7ad !important; }
.H-theme5-color { color: #4db7ad !important; }
.H-theme5-border { position: relative; }
.H-theme5-border:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #4db7ad !important; overflow: hidden; }
.H-theme6-bg { background: #337ab7 !important; }
.H-theme6-color { color: #337ab7 !important; }
.H-theme6-border { position: relative; }
.H-theme6-border:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #337ab7 !important; overflow: hidden; }
.H-theme7-bg { background: #d9534f !important; }
.H-theme7-color { color: #d9534f !important; }
.H-theme7-border { position: relative; }
.H-theme7-border:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #d9534f !important; overflow: hidden; }
.H-theme8-bg { background: #f0ad4e !important; }
.H-theme8-color { color: #f0ad4e !important; }
.H-theme8-border { position: relative; }
.H-theme8-border:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #f0ad4e !important; overflow: hidden; }
.H-theme9-bg { background: #5cb85c !important; }
.H-theme9-color { color: #5cb85c !important; }
.H-theme9-border { position: relative; }
.H-theme9-border:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #5cb85c !important; overflow: hidden; }
.H-theme10-bg { background: #337ab7 !important; }
.H-theme10-color { color: #337ab7 !important; }
.H-theme10-border { position: relative; }
.H-theme10-border:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #337ab7 !important; overflow: hidden; }
.H-theme11-bg { background: #fff !important; }
.H-theme11-color { color: #fff !important; }
.H-theme11-border { position: relative; }
.H-theme11-border:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #fff !important; overflow: hidden; }


/*顶部导航栏*/
.H-header { min-height: 44px; position: relative; height: auto; box-sizing: initial; -webkit-box-sizing: initial; }
.H-header.fixStatuBar { padding-top: 25px; }
.H-header-title { color: #fff; position: absolute; height: 44px; left: 0; z-index: 10; width: 100%; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.8rem; line-height: 0; font-weight: 500; box-sizing: border-box; -webkit-box-sizing: border-box; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; }
.H-header .H-icon { height: 44px; position: relative; z-index: 30; display: inline-block; color: #fff; padding: 0 10px; line-height: 41px; }
.H-header .H-icon i { font-size: 1.7rem; color: #f5f5f5; vertical-align: middle; line-height: 44px; }

/*选项卡标题*/
.H-header-tab { display: inline-block; overflow: hidden; line-height: normal; position: relative; }
.H-header-tab span { display: inline-block; font-size: 1.3rem; float: left; padding: 3px 10px; vertical-align: middle; text-align: center; position: relative; }
.H-header-tab.H-border-radius3-after-px span:first-child { border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px;; }
.H-header-tab span:after { border-right: 1px solid #fff; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
.H-header-tab span:last-child:after { border-width: 0; }

/*带搜索的标题*/
.H-header-search { border-radius: 20px; -webkit-border-radius: 20px; box-sizing: border-box; -webkit-box-sizing: border-box; height: 34px; line-height: normal; overflow: hidden; padding: 6px 0 0 0; margin: 0; line-height: 0; }
.H-header-search.H-theme1-search-bg { background: #408CBB; }
.H-header-search.H-theme2-search-bg { background: #FC3B4C; }
.H-header-search.H-theme3-search-bg { background: #222427; }
.H-header-search.H-theme4-search-bg { background: #FC8B4A; }
.H-header-search.H-theme5-search-bg { background: #3F9189; }
.H-header-search.H-theme6-search-bg { background: #0C69BA; }
.H-header-search.H-theme7-search-bg { background: #D83632; }
.H-header-search.H-theme8-search-bg { background: #C89041; }
.H-header-search.H-theme9-search-bg { background: #28A028; }
.H-header-search.H-theme10-search-bg { background: #0F6AB8; }
.H-header-search .H-icon { vertical-align: middle; line-height: normal; }
.H-header-search-icon { vertical-align: top; line-height: normal; }
.H-header-search .H-icon i { line-height: 0 !important; }
.H-header-search-icon label { font-size: 1.5rem !important; vertical-align: middle; display: inline-block; }
.H-header-search-icon i { font-size: 1.4rem !important; }
.H-header-search input[type=text] { height: 22px; background: rgba(0,0,0,0); outline: none; border: none; vertical-align: top; margin: 0 15px 0 0; padding: 0 10px 0 0; font-size: 1.3rem; color: #fff; line-height: 23px; color: #f7f7f7; }
.H-header-search input[type=text]::-webkit-input-placeholder { color: #dfdfdf; }

/*底部导航*/
.H-footer, .H-footer ul { height: 55px; width: 100%; position: relative; line-height: normal; box-sizing: border-box; -webkit-box-sizing: border-box; overflow: hidden; }
.H-footer.bring-border:before { content: ""; position: absolute; left: 0; margin-left: 0; top: 0; right: 0; border-top: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
.H-footer ul li { line-height: normal; box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; }
.H-footer ul li .H-icon { display: block; padding: 5px 0 5px; box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-footer ul li .H-icon i { font-size: 2.6rem; line-height: 26px; }
.H-footer ul p { width: 100%; line-height: normal; font-size: 1.2rem; }
.H-footer .H-icon-circle { display: inline-block; height: 42px; width: 42px; border-radius: 50%; -webkit-border-radius: 50%; line-height: 42px; margin-top: 7px; }
.H-footer ul li:active { background: #f4f4f4; }
.H-footer ul li .H-badge { position: absolute; z-index: 1000; top: 1px; left: 50%; margin-left: 10px; }

/*分类标题*/
.H-title-channel { font-size: 1.8rem; padding: 10px; position: relative; clear: both; }
.H-title-channel:after { content: ""; position: absolute; left: 10px; margin-left: 0; bottom: 0; right: 10px; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
.H-bold-line { display: inline-block; margin-right: 10px; height: 16px; width: 3px; vertical-align: middle; line-height: 0; }
.H-label-text { display: inline-block; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/*角标*/
.H-badge { line-height: normal; }
.H-badge label { display: inline-block; height: 18px; line-height: 18px; padding: 0 6px; font-size: 1.2rem; vertical-align: middle; border-radius: 9px; -webkit-border-radius: 9px; -webkit-transform: translateY(0.5); transform: translateY(0.5); }

/*点击按钮*/
.H-button { display: inline-block; text-align: center; -webkit-appearance: none; appearance: none; background: none; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; padding: 6px 15px; user-select: none; touch-action: manipulation; -webkit-user-select: none; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 0; font-size: 1.6rem; border: none; min-width: 90px; text-align: center; }
.H-button.H-button-block { padding: 12px 15px; width: 100%; font-size: 16px; }

/*表单元素-切换框*/
.H-form-switch { background: #ffffff; cursor: pointer; box-shadow: #dfdfdf 0 0 0 0 inset; -webkit-box-shadow: #dfdfdf 0 0 0 0 inset; border-radius: 13px; -webkit-border-radius: 13px; background-clip: content-box; display: inline-block; -webkit-appearance: none; user-select: none; outline: none; transition: border cubic-bezier(0, 0, 0, 1) 0.2s, box-shadow cubic-bezier(0, 0, 0, 1) 0.2s; -webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.2s, box-shadow cubic-bezier(0, 0, 0, 1) 0.2s; width: 46px; height: 26px; position: relative; border: 1px solid #dddddd; }
.H-form-switch:before { position: absolute; top: 0; left: 0; border-radius: 13px; -webkit-border-radius: 13px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); content: ''; transition: left 0.2s; -webkit-transition: left 0.2s; width: 24px; height: 24px; }
.H-form-switch:checked:before { left: 2rem; transition: left 0.2s; -webkit-transition: left 0.2s; }
.H-form-switch.H-theme1-color:checked { border-color: #52ace5; box-shadow: #52ace5 0 0 0 0.1rem inset; -webkit-box-shadow: #52ace5 0 0 0 0.1rem inset; background: #52ace5; transition: border ease 0.15s, box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: border ease 0.15s, -webkit-box-shadow ease 0.15s, background ease 0.15s; }
.H-form-switch.H-theme2-color:checked { border-color: #ff7f8a; box-shadow: #ff7f8a 0 0 0 0.1rem inset; -webkit-box-shadow: #ff7f8a 0 0 0 0.1rem inset; background: #ff7f8a; transition: border ease 0.15s, box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: border ease 0.15s, -webkit-box-shadow ease 0.15s, background ease 0.15s; }
.H-form-switch.H-theme3-color:checked { border-color: #3c4146; box-shadow: #3c4146 0 0 0 0.1rem inset; -webkit-box-shadow: #3c4146 0 0 0 0.1rem inset; background: #3c4146; transition: border ease 0.15s, box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: border ease 0.15s, -webkit-box-shadow ease 0.15s, background ease 0.15s; }
.H-form-switch.H-theme4-color:checked { border-color: #ffa977; box-shadow: #ffa977 0 0 0 0.1rem inset; -webkit-box-shadow: #ffa977 0 0 0 0.1rem inset; background: #ffa977; transition: border ease 0.15s, box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: border ease 0.15s, -webkit-box-shadow ease 0.15s, background ease 0.15s; }
.H-form-switch.H-theme5-color:checked { border-color: #4db7ad; box-shadow: #4db7ad 0 0 0 0.1rem inset; -webkit-box-shadow: #4db7ad 0 0 0 0.1rem inset; background: #4db7ad; transition: border ease 0.15s, box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: border ease 0.15s, -webkit-box-shadow ease 0.15s, background ease 0.15s; }
.H-form-switch.H-theme6-color:checked { border-color: #337ab7; box-shadow: #337ab7 0 0 0 0.1rem inset; -webkit-box-shadow: #337ab7 0 0 0 0.1rem inset; background: #337ab7; transition: border ease 0.15s, box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: border ease 0.15s, -webkit-box-shadow ease 0.15s, background ease 0.15s; }
.H-form-switch.H-theme7-color:checked { border-color: #d9534f; box-shadow: #d9534f 0 0 0 0.1rem inset; -webkit-box-shadow: #d9534f 0 0 0 0.1rem inset; background: #d9534f; transition: border ease 0.15s, box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: border ease 0.15s, -webkit-box-shadow ease 0.15s, background ease 0.15s; }
.H-form-switch.H-theme8-color:checked { border-color: #f0ad4e; box-shadow: #f0ad4e 0 0 0 0.1rem inset; -webkit-box-shadow: #f0ad4e 0 0 0 0.1rem inset; background: #f0ad4e; transition: border ease 0.15s, box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: border ease 0.15s, -webkit-box-shadow ease 0.15s, background ease 0.15s; }
.H-form-switch.H-theme9-color:checked { border-color: #5cb85c; box-shadow: #5cb85c 0 0 0 0.1rem inset; -webkit-box-shadow: #5cb85c 0 0 0 0.1rem inset; background: #5cb85c; transition: border ease 0.15s, box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: border ease 0.15s, -webkit-box-shadow ease 0.15s, background ease 0.15s; }
.H-form-switch.H-theme10-color:checked { border-color: #337ab7; box-shadow: #337ab7 0 0 0 0.1rem inset; -webkit-box-shadow: #337ab7 0 0 0 0.1rem inset; background: #337ab7; transition: border ease 0.15s, box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: border ease 0.15s, -webkit-box-shadow ease 0.15s, background ease 0.15s; }

/*表单元素-复选框*/
.H-form-checkbox-radio { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; -webkit-transition: all 0.15s ease-out 0; transition: all 0.15s ease-out 0; background: #fff; border: none; color: #fff; cursor: pointer; display: inline-block; outline: none; vertical-align: middle; border: 1px solid #d7d7d7; }
.H-form-checkbox-radio:checked::before { width: 24px; height: 24px; position: absolute; content: '\2713'; display: inline-block; font-size: 1.8rem; text-align: center; line-height: 24px; }
.H-form-checkbox-radio.H-theme1-color:hover { }
.H-form-checkbox-radio.H-theme1-color:checked { background: #52ace5; transition: box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: box-shadow ease 0.15s, background ease 0.15s; border: 1px solid #52ace5; color: #fff !important; }
.H-form-checkbox-radio.H-theme2-color:checked { background: #ff7f8a; transition: box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: box-shadow ease 0.15s, background ease 0.15s; border: 1px solid #ff7f8a; color: #fff !important; }
.H-form-checkbox-radio.H-theme3-color:checked { background: #3c4146; transition: box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: box-shadow ease 0.15s, background ease 0.15s; border: 1px solid #3c4146; color: #fff !important; }
.H-form-checkbox-radio.H-theme4-color:checked { background: #ffa977; transition: box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: box-shadow ease 0.15s, background ease 0.15s; border: 1px solid #ffa977; color: #fff !important; }
.H-form-checkbox-radio.H-theme5-color:checked { background: #4db7ad; transition: box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: box-shadow ease 0.15s, background ease 0.15s; border: 1px solid #4db7ad; color: #fff !important; }
.H-form-checkbox-radio.H-theme6-color:checked { background: #337ab7; transition: box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: box-shadow ease 0.15s, background ease 0.15s; border: 1px solid #337ab7; color: #fff !important; }
.H-form-checkbox-radio.H-theme7-color:checked { background: #d9534f; transition: box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: box-shadow ease 0.15s, background ease 0.15s; border: 1px solid #d9534f; color: #fff !important; }
.H-form-checkbox-radio.H-theme8-color:checked { background: #f0ad4e; transition: box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: box-shadow ease 0.15s, background ease 0.15s; border: 1px solid #f0ad4e; color: #fff !important; }
.H-form-checkbox-radio.H-theme9-color:checked { background: #5cb85c; transition: box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: box-shadow ease 0.15s, background ease 0.15s; border: 1px solid #5cb85c; color: #fff !important; }
.H-form-checkbox-radio.H-theme10-color:checked { background: #337ab7; transition: box-shadow ease 0.15s, background ease 0.15s; -webkit-transition: box-shadow ease 0.15s, background ease 0.15s; border: 1px solid #337ab7; color: #fff !important; }

/*表单元素-单选框*/
.H-form-checkbox-radio[type=radio] { border-radius: 50%; -webkit-border-radius: 50%; width: 26px; height: 26px; vertical-align: middle; }
.H-form-checkbox-radio[type=radio]::after { border-radius: 50%; -webkit-border-radius: 50%; }
.H-form-checkbox-radio[type=radio]:checked::before { width: 26px; height: 26px; line-height: 26px; }

/*表单元素-文本框*/
.H-form-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-flex-flow: row; flex-flow: row; width: 100%; position: relative; background: #fff; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: center; display: box; box-orient: horizontal; box-align: center; clear: both; }
.H-form-row:after { content: ""; position: absolute; left: 0; margin-left: 0; bottom: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
.H-form-text > label { vertical-align: middle; color: #444; }
.H-form-text { user-select: none; padding: 5px; font-size: 1.6rem; color: #666; vertical-align: middle; display: flex; display: -webkit-box; display: -webkit-flex; border: 0; outline: 0; height: 32px; background: #fff; line-height: 32px; }
.H-form-row .H-icon i { font-size: 1.8rem; }

/*表单元素-滑块*/
.H-range-area { padding: 10px 0 1px 0; position: relative; margin-top: -11px; vertical-align: middle; }
.H-form-range { appearance: none !important; -webkit-appearance: none !important; position: relative; margin-top: 11px; margin-bottom: 8px; background: #d7d7d7; height: 4px; display: block; vertical-align: middle; box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-form-range:focus { outline: none; }
.H-form-range::-webkit-slider-thumb { height: 22px; width: 22px; border-radius: 50%; -webkit-border-radius: 50%; cursor: pointer; -webkit-appearance: none; margin-top: -10px; position: relative; }
.H-form-range:focus::-webkit-slider-runnable-track { }
.H-form-range::-webkit-slider-runnable-track { cursor: pointer; width: 100%; position: relative; background: #d7d7d7; height: 4px; }
.H-form-range.H-theme1-color::-webkit-slider-thumb { border: 1px solid #52ace5; background: #52ace5; }
.H-form-range.H-theme2-color::-webkit-slider-thumb { border: 1px solid #ff7f8a; background: #ff7f8a; }
.H-form-range.H-theme3-color::-webkit-slider-thumb { border: 1px solid #3c4146; background: #3c4146; }
.H-form-range.H-theme4-color::-webkit-slider-thumb { border: 1px solid #ffa977; background: #ffa977; }
.H-form-range.H-theme5-color::-webkit-slider-thumb { border: 1px solid #4db7ad; background: #4db7ad; }
.H-form-range.H-theme6-color::-webkit-slider-thumb { border: 1px solid #337ab7; background: #337ab7; }
.H-form-range.H-theme7-color::-webkit-slider-thumb { border: 1px solid #d9534f; background: #d9534f; }
.H-form-range.H-theme8-color::-webkit-slider-thumb { border: 1px solid #f0ad4e; background: #f0ad4e; }
.H-form-range.H-theme9-color::-webkit-slider-thumb { border: 1px solid #5cb85c; background: #5cb85c; }
.H-form-range.H-theme10-color::-webkit-slider-thumb { border: 1px solid #337ab7; background: #337ab7; }

/*表单元素-多行文本域*/
.H-textarea { min-height: 120px; overflow-y: scroll; line-height: 22px !important; }

/* 文本框默认提示样式 */
::-webkit-input-placeholder { position: relative; }

/*卡片模式*/
.H-border-card { position: relative; }
.H-border-card:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border: 1px solid #d7d7d7; border-radius: 6px; -webkit-border-radius: 6px; overflow: hidden; overflow: hidden; }

/*列表*/
.H-list { position: relative; }
.H-list-item { line-height: normal; padding: 14px 10px; position: relative; background: #fff; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: center; display: box; box-orient: horizontal; box-align: center; }
.H-list-item:active { background: #f4f4f4; }
.H-list-item .H-text { font-size: 1.6rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; line-height: normal; }
.H-list-item .H-text p { display: inline-block; }
.H-list-item:after { content: ""; position: absolute; left: 0; margin-left: 0; bottom: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }

/*列表箭头*/
.H-list-item .H-icon.H-arrow { margin: 0; }
.H-list-item .H-icon.H-arrow i { color: #ccc; font-size: 1.4rem; }

/*列表中间线缩进*/
.H-list-middle-line .H-list-item:after { left: 10px; }
.H-list-middle-line .H-list-item:last-child:after { left: 0; }
.H-list-middle-line .H-list-item:first-child:before { content: ""; position: absolute; left: 0; margin-left: 0; top: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }

/*列表带图标*/
.H-list-item .H-icon { line-height: normal; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: center; display: box; box-orient: horizontal; box-align: center; margin: 0 10px 0 0; vertical-align: middle; }
.H-list-item .H-icon i { font-size: 1.8rem; vertical-align: middle; }

/*列表图标带背景*/
.H-list-item .H-icon.H-bring-width { width: 24px; height: 24px; line-height: 24px; overflow: hidden; }
.H-list-item .H-icon.H-bring-width i { font-size: 1.4rem; line-height: normal; }

/*加载图片动画*/
.H-loading-fixed { position: fixed; top: 0; background: #fff; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; z-index: 199204; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; }
.H-loading-fixed img { width: 200px; }

/*图文列表*/
.H-rich-item { position: relative; line-height: 0; }
.H-rich-item:after { content: ""; position: absolute; left: 0; margin-left: 0; bottom: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
.H-rich-img { width: 60px; height: 60px; }
.H-rich-text { position: relative; line-height: normal; }
.H-rich-text strong { font-size: 1.6rem; font-style: normal; font-weight: normal; line-height: 20px; }
.H-rich-text p { line-height: 20px; padding-top: 3px; }
.H-rich-img-range { width: 90px; height: 60px; }
.H-rich-pushinfo { font-size: 1rem; position: absolute; left: 110px; right: 10px; bottom: 8px; z-index: 10; line-height: 0; line-height: normal; }
.H-rich-pushinfo.H-pushinfo-right { right: 110px; left: 10px; }
.H-rich-pushinfo * { line-height: normal; }

/*相册列表*/
.H-picture-list { position: relative; display: table; width: 100%; padding: 0 0 10px 10px; }
.H-picture-item { display: table-cell; text-align: center; padding: 10px 10px 0 0; vertical-align: middle; overflow: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-touch-callout: none; float: left; line-height: 0; }
.H-picture-item img { width: 100%; max-width: 100%; height: auto; font-size: 0; line-height: 0; }
.H-picture-item p { line-height: 20px; }
.H-picture-item.H-picture-row-two { width: 50%; }
.H-picture-item.H-picture-row-three { width: 33.33333333%; }
.H-picture-item.H-picture-row-four { width: 25%; }

/*相册之瀑布流*/
.H-picture-waterfall { position: relative; width: 100%; }
.H-picture-waterfall-item { display: inline-block; text-align: center; position: relative; line-height: 0; -webkit-column-break-inside: avoid; margin-bottom: 10px; }
.H-picture-waterfall-item p { position: relative; margin: 0; line-height: 20px; }
.H-picture-waterfall-item img { width: 100%; font-size: 0; line-height: 0; margin: 0; padding: 0; display: block; }
.H-waterfall-content { position: relative; }

/*宫格排版*/
.H-grid { position: relative; display: table; width: 100%; }
.H-grid:before { content: ""; position: absolute; left: 0; margin-left: 0; top: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
.H-grid-item { display: table-cell; text-align: center; vertical-align: middle; overflow: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-touch-callout: none; float: left; height: 100px; position: relative; }
.H-grid-item:active { background: #f4f4f4; }
.H-grid-item span i.iconfont { font-size: 3rem; }
.H-grid-item p { font-size: 1.4rem; padding: 5px; }
/*九宫格*/
.H-grid-nine { width: 33.33333333%; position: relative; }
.H-grid-nine:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border-right: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; overflow: hidden; overflow: hidden; }
.H-grid .H-grid-nine:nth-child(3n):after { border-right: none; }
/*十六宫格*/
.H-grid-sixteen { width: 25%; height: 90px; position: relative; }
.H-grid-sixteen:after { width: 200%; height: 200%; display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform-origin: 0 0; -webkit-transform: scale(0.5); pointer-events: none; border-right: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; overflow: hidden; overflow: hidden; }
.H-grid .H-grid-sixteen:nth-child(4n):after { border-right: none; }

/*会话列表*/
.H-chat-item { position: relative; clear: both; }
.H-chat-item:after { content: ""; position: absolute; left: 0; margin-left: 0; bottom: 0; right: 0; border-bottom: 1px solid #d7d7d7; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0, 0; z-index: 5; }
.H-chat-item:active { background: #f4f4f4; }
.H-chat-picture { position: relative; overflow: hidden; line-height: 0; font-size: 0; }
.H-chat-picture img { width: 48px; height: 48px; }
.H-chat-text { }
.H-chat-content strong { font-weight: normal; font-size: 1.6rem; font-weight: 500; }
.H-chat-content p { font-size: 1.4rem; padding: 1px 0 0 0; }
.H-chat-tip { font-size: 1.2rem; }
.H-chat-tip p { text-align: right; margin-bottom: 0; }

/*聊天组件*/
.H-chat-list-box { padding-bottom: 20px; width: 100%; max-width: 100%; width: 100%; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; min-height: 0; height: auto; overflow: hidden; }
.H-msg-receiver, .H-msg-sender { margin-top: 10px; width: 100%; clear: both; padding: 0 10px; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-msg-container { box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; max-width: 100%; width: auto; }
.H-msg-picture { line-height: 0; font-size: 0; width: 45px; position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; text-align: left; }
.H-msg-picture img { width: 45px; height: 45px; }
.H-msg-content { min-height: 45px; position: relative; line-height: 0; font-size: 0; display: inline-block; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 10px; border-radius: 10px; -webkit-border-radius: 10px; }
/*聊天各个组件样式*/
.H-msg-text { line-height: 24px; font-size: 1.6rem; max-width: 100%; }
.H-msg-voice { font-size: 1.6rem; max-width: 100%; padding-top: 13px; }
.H-msg-image { max-width: 100%; position: relative; font-size: 0; line-height: 0; }
.H-msg-image img { max-width: 100%; }
/*聊天状态图标*/
.H-msg-status { min-width: 30px; padding-top: 13px; }
.H-msg-status span i.iconfont { font-size: 1.8rem; color: #999; }
.H-msg-status span.H-statu-load { animation: 1s linear 0s normal none infinite myrotate; -webkit-animation: 1s linear 0s normal none infinite myrotate; }
.H-msg-status span.H-statu-warn i { color: #f00; }
/*聊天状态动画*/
@keyframes myrotate {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes myrotate {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/*接受方*/
.H-msg-receiver .H-msg-container { margin-left: 10px; }
.H-msg-receiver .H-msg-status { padding-left: 10px; }
.H-msg-receiver .H-msg-voice i { margin-right: 1rem; }
.H-msg-content.H-theme1-bg .H-receiver-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent #52ace5 transparent transparent; position: absolute; top: 15px; left: -13px; z-index: 12; }
.H-msg-content.H-theme2-bg .H-receiver-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent #ff7f8a transparent transparent; position: absolute; top: 15px; left: -13px; z-index: 12; }
.H-msg-content.H-theme3-bg .H-receiver-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent #3c4146 transparent transparent; position: absolute; top: 15px; left: -13px; z-index: 12; }
.H-msg-content.H-theme4-bg .H-receiver-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent #ffa977 transparent transparent; position: absolute; top: 15px; left: -13px; z-index: 12; }
.H-msg-content.H-theme5-bg .H-receiver-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent #4db7ad transparent transparent; position: absolute; top: 15px; left: -13px; z-index: 12; }
.H-msg-content.H-theme6-bg .H-receiver-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent #337ab7 transparent transparent; position: absolute; top: 15px; left: -13px; z-index: 12; }
.H-msg-content.H-theme7-bg .H-receiver-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent #d9534f transparent transparent; position: absolute; top: 15px; left: -13px; z-index: 12; }
.H-msg-content.H-theme8-bg .H-receiver-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent #f0ad4e transparent transparent; position: absolute; top: 15px; left: -13px; z-index: 12; }
.H-msg-content.H-theme9-bg .H-receiver-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent #5cb85c transparent transparent; position: absolute; top: 15px; left: -13px; z-index: 12; }
.H-msg-content.H-theme10-bg .H-receiver-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent #337ab7 transparent transparent; position: absolute; top: 15px; left: -13px; z-index: 12; }
/*发送方*/
.H-msg-sender .H-msg-container { margin-right: 10px; }
.H-msg-sender .H-msg-status { text-align: right; }
.H-msg-sender .H-msg-status { padding-right: 10px; }
.H-msg-content.H-theme1-bg .H-sender-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #52ace5; position: absolute; top: 15px; right: -13px; z-index: 12; }
.H-msg-content.H-theme2-bg .H-sender-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #ff7f8a; position: absolute; top: 15px; right: -13px; z-index: 12; }
.H-msg-content.H-theme3-bg .H-sender-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #3c4146; position: absolute; top: 15px; right: -13px; z-index: 12; }
.H-msg-content.H-theme4-bg .H-sender-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #ffa977; position: absolute; top: 15px; right: -13px; z-index: 12; }
.H-msg-content.H-theme5-bg .H-sender-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #4db7ad; position: absolute; top: 15px; right: -13px; z-index: 12; }
.H-msg-content.H-theme6-bg .H-sender-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #337ab7; position: absolute; top: 15px; right: -13px; z-index: 12; }
.H-msg-content.H-theme7-bg .H-sender-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #d9534f; position: absolute; top: 15px; right: -13px; z-index: 12; }
.H-msg-content.H-theme8-bg .H-sender-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #f0ad4e; position: absolute; top: 15px; right: -13px; z-index: 12; }
.H-msg-content.H-theme9-bg .H-sender-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #5cb85c; position: absolute; top: 15px; right: -13px; z-index: 12; }
.H-msg-content.H-theme10-bg .H-sender-jiao { font-style: normal; display: block; height: 0px; width: 0px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #337ab7; position: absolute; top: 15px; right: -13px; z-index: 12; }

/*普通标签*/
.H-tag-list { overflow: hidden; }
.H-tag-item { padding: 10px; text-align: center; border-bottom: 2px solid #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.H-tag-item:active { background: #f4f4f4; }
.H-tag-item.H-theme1-color { border-bottom: 2px solid #52ace5; color: #52ace5; }
.H-tag-item.H-theme2-color { border-bottom: 2px solid #ff7f8a; color: #ff7f8a; }
.H-tag-item.H-theme3-color { border-bottom: 2px solid #3c4146; color: #3c4146; }
.H-tag-item.H-theme4-color { border-bottom: 2px solid #ffa977; color: #ffa977; }
.H-tag-item.H-theme5-color { border-bottom: 2px solid #4db7ad; color: #4db7ad; }
.H-tag-item.H-theme6-color { border-bottom: 2px solid #337ab7; color: #337ab7; }
.H-tag-item.H-theme7-color { border-bottom: 2px solid #d9534f; color: #d9534f; }
.H-tag-item.H-theme8-color { border-bottom: 2px solid #f0ad4e; color: #f0ad4e; }
.H-tag-item.H-theme9-color { border-bottom: 2px solid #5cb85c; color: #5cb85c; }
.H-tag-item.H-theme10-color { border-bottom: 2px solid #337ab7; color: #337ab7; }
/*包含线标签*/
.H-tag-tab { overflow: hidden; line-height: normal; }
.H-tag-tab span { float: left; padding: 8px 0; vertical-align: middle; text-align: center; font-size: 1.4rem; position: relative; }
/*标签主题*/
.H-tag-tab.H-theme1-border span { color: #52ace5; }
.H-tag-tab.H-theme1-border span:after { border-right: 1px solid #52ace5; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
.H-tag-tab.H-theme2-border span { color: #ff7f8a; }
.H-tag-tab.H-theme2-border span:after { border-right: 1px solid #ff7f8a; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
.H-tag-tab.H-theme3-border span { color: #3c4146; }
.H-tag-tab.H-theme3-border span:after { border-right: 1px solid #3c4146; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
.H-tag-tab.H-theme4-border span { color: #ffa977; }
.H-tag-tab.H-theme4-border span:after { border-right: 1px solid #ffa977; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
.H-tag-tab.H-theme5-border span { color: #4db7ad; }
.H-tag-tab.H-theme5-border span:after { border-right: 1px solid #4db7ad; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
.H-tag-tab.H-theme6-border span { color: #337ab7; }
.H-tag-tab.H-theme6-border span:after { border-right: 1px solid #337ab7; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
.H-tag-tab.H-theme7-border span { color: #d9534f; }
.H-tag-tab.H-theme7-border span:after { border-right: 1px solid #d9534f; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
.H-tag-tab.H-theme8-border span { color: #f0ad4e; }
.H-tag-tab.H-theme8-border span:after { border-right: 1px solid #f0ad4e; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
.H-tag-tab.H-theme9-border span { color: #5cb85c; }
.H-tag-tab.H-theme9-border span:after { border-right: 1px solid #5cb85c; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
.H-tag-tab.H-theme10-border span { color: #337ab7; }
.H-tag-tab.H-theme10-border span:after { border-right: 1px solid #337ab7; content: ""; position: absolute; top: 0; right: 0px; bottom: 0; -webkit-transform: scaleX(.5); -webkit-transform-origin: 0 0; }
.H-tag-tab span:last-child:after { border-width: 0; }
/*标签圆角*/
.H-tag-tab.H-border-radius3-after-px span:first-child { border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; }
.H-tag-tab.H-border-radius3-after-px span:last-child { border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; }

/*启动画*/
.H-launch { height: 100%; width: 100%; display: box; display: -webkit-box; -webkit-box-orient: horizontal; box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; }
.H-launch-item { -webkit-box-align: center; box-sizing: border-box; -webkit-box-sizing: border-box; height: 100%; width: 100%; }
.H-launch-fixed { position: fixed; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 100; background: rgab(0,0,0,0); }
.H-launch-pages { position: fixed; bottom: 2rem; left: 0; width: 100%; right: 0; z-index: 100000; height: 1rem; text-align: center; }
.H-launch-pages a { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; -webkit-border-radius: 50%; background: rgba(0,0,0,0.5); margin-right: 0.5rem; }
.H-launch-pages a.active { background: rgba(255,255,255,0.5); transition: background 0.2s; -webkit-transition: background 0.2s; }
.skip-launch { position: fixed; top: 20px; right: 10px; z-index: 199305270356; display: inline-block; padding: 2px 10px; color: #fff; background: rgba(0,0,0,0.8); font-size: 1.4rem; }

/*改写App滚动条*/
::-webkit-scrollbar /*整体部分*/ { width: 0; height: 0; }
::-webkit-scrollbar-track /*滑动轨道*/ { background: rgba(0,0,0,0); }
::-webkit-scrollbar-thumb /*滑块*/ { background: rgba(0,0,0,0.0); }
::-webkit-scrollbar-thumb:hover /*滑块效果*/ { background: rgba(0,0,0,0); }

/*功能菜单*/
.H-func-menu-list .H-icon { width: 42px; height: 42px; }

/*分享菜单*/
.H-share-module { animation: share-swiper-start 0.2s; -webkit-animation: share-swiper-start 0.2s; }
.H-share-cancel-button { height: 48px; }
.H-share-module.H-share2 { animation: share2-swiper-start 0.3s; -webkit-animation: share2-swiper-start 0.3s; }

/*分享一动画*/
@keyframes share-swiper-start {
    from { height: 0; }
    to { height: 130px; }
}

@-webkit-keyframes share-swiper-start {
    from { height: 0; }
    to { height: 130px; }
}

@keyframes share-swiper-end {
    from { height: 130px; }
    to { height: 0; }
}

@-webkit-keyframes share-swiper-end {
    from { height: 130px; }
    to { height: 0; }
}
/*分享二动画*/
@keyframes share2-swiper-start {
    from { height: 0; }
    to { height: 212px; }
}

@-webkit-keyframes share2-swiper-start {
    from { height: 0; }
    to { height: 212px; }
}

@keyframes share2-swiper-end {
    from { height: 212px; }
    to { height: 0; }
}

@-webkit-keyframes share2-swiper-end {
    from { height: 212px; }
    to { height: 0; }
}

/*提示框*/
.H-alert-area { min-height: 140px; max-width: 280px; margin: 0 auto; }
.H-alert-title { padding: 0 20px; height: 42px; line-height: 42px; }
.H-alert-content { padding: 20px; line-height: 24px; }
.H-alert-button a:active { background: #f4f4f4; }

/*时间轴卡片效果*/

.H-timeline-card-list { position: relative; }
.H-timeline-card-list:before { border-left: 7px solid #d7d7d7; left: 25px; }
.H-timeline-card-content { line-height: 24px; }
.H-timeline-card-item { margin-bottom: 15px; }

/*引入字体图标*/
@font-face { font-family: 'iconfont'; src: url('Hui.ttf') format('truetype'); }
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
.icon-Hui-erweima:before { content: "\f024"; }
.icon-Hui-shezhi:before { content: "\f022"; }
.icon-Hui-pengyouquan:before { content: "\f027"; }
.icon-Hui-shsb:before { content: "\f002"; }
.icon-Hui-weibo:before { content: "\f026"; }
.icon-Hui-qq:before { content: "\f025"; }
.icon-Hui-allowleft:before { content: "\f003"; }
.icon-Hui-allow-right:before { content: "\f004"; }
.icon-Hui-zhengque:before { content: "\f005"; }
.icon-Hui-xinzen:before { content: "\f006"; }
.icon-Hui-diqiu:before { content: "\f007"; }
.icon-Hui-xiaolian:before { content: "\f008"; }
.icon-Hui-jinggao:before { content: "\f009"; }
.icon-Hui-sousuo:before { content: "\f010"; }
.icon-Hui-allow-down:before { content: "\f023"; }
.icon-Hui-Jiazhaizhong:before { content: "\f011"; }
.icon-Hui-dingwei:before { content: "\f021"; }
.icon-Hui-qqkongjian:before { content: "\f029"; }
.icon-Hui-wechat:before { content: "\f028"; }
.icon-Hui-fanhui:before { content: "\f013"; }
.icon-Hui-youyuyin:before { content: "\f014"; }
.icon-Hui-zuoyuyin:before { content: "\f015"; }
.icon-Hui-shijian:before { content: "\f030"; }
.icon-Hui-wo:before { content: "\f016"; }
.icon-Hui-shixinfaxian:before { content: "\f017"; }
.icon-Hui-kongxinfaxian:before { content: "\f018"; }
.icon-Hui-shixin:before { content: "\f019"; }
.icon-Hui-yuyin:before { content: "\f020"; }
.icon-Hui-kongxin:before { content: "\f012"; }
.icon-Hui-biyan:before { content: "\f001"; }