@charset "UTF-8";
.avg-list::before, .avg-list::after { content: ""; display: table; }
.avg-list::after { clear: both; }

.ellipsis, .header .page-tt, .media-item .item-bd .bd-tt, .picker-item .select-list li, .filter-nav .line-item, .avg-list li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.panel--picker .panel-hd { display: flex; justify-content: space-between; }

.line-list--indent, .media-list, .form { position: relative; }
.line-list--indent::before, .media-list::before, .form::before { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; right: 0; height: 0; transform: scaleY(0.5); border-top: 1px solid #dbdbdb; z-index: 1; }
.line-list--indent::after, .media-list::after, .form::after { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; right: 0; height: 0; transform: scaleY(0.5); border-top: 1px solid #dbdbdb; top: auto; bottom: 0; }

.popover--header-more .popover-triangle { content: ""; height: 0; width: 0; overflow: hidden; }

.line-item { line-height: 34px; padding: 5px 10px; position: relative; display: block; overflow: hidden; }
.line-item:not(:first-of-type)::before { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; right: 0; height: 0; transform: scaleY(0.5); border-top: 1px solid #dbdbdb; }

.line-list--after-v .line-item::after, .media-list--after-v .media-item::after { content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); color: #ccc; position: absolute; right: 15px; top: 50%; margin-top: -1px; transform: rotate(45deg) translate(0, -50%); box-sizing: border-box; }

.btn, .btn-outline, .btn-primary, .btn-primary--light, .btn-stress, .btn-success, .btn-danger { display: inline-block; vertical-align: middle; cursor: pointer; text-align: center; border: 1px solid transparent; box-sizing: border-box; user-select: none; padding: 0 1em; white-space: nowrap; }
.btn-warning {
    color: #fff !important;
    background-color: #ff9500 !important;
}
/** 文字排版 */
.fs12 { font-size: 12px !important; }

.fs14 { font-size: 14px !important; }

.fs15 { font-size: 15px !important; }

.fs16 { font-size: 16px !important; }

.fs18 { font-size: 18px !important; }

.fs20 { font-size: 20px !important; }

.fs22 { font-size: 22px !important; }

.fs24 { font-size: 24px !important; }

.fs32 { font-size: 32px !important; }

.fs48 { font-size: 48px !important; }

.fb { font-weight: 700; }

.fn { font-weight: 400; }

.ttu { text-transform: uppercase; }

.tal { text-align: left !important; }

.tar { text-align: right; }

.tac { text-align: center; }

.tdul { text-decoration: underline; }

.no-indent { text-indent: 0 !important; }

/**
* 文字行高
**/
.lh15 { line-height: 1.5; }

.lh18 { line-height: 1.8; }

.lh20 { line-height: 2; }

/**
* 文字颜色
**/
.c3 { color: #333; }

.c6 { color: #666; }

.c8 { color: #888; }

.c9 { color: #999; }

.cf { color: #fff; }

.c-pri { color: #31c238; }

/**
* 背景颜色
**/
.bg-fff { background: #fff; }

.bg-f1 { background: #f1f1f1; }

.bg-none { background: none; }

.bg-pri { background: #31c238; }

/** 定位 */
.bc { margin-left: auto; margin-right: auto; }

.fl { float: left; }

.fr { float: right; }

/* 清除浮动 */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

.hidden { visibility: hidden; }

.none { display: none !important; }

.db { display: block !important; }

.dib { display: inline-block !important; }

.vam { vertical-align: middle; }

.oh { overflow: hidden; }

/** 边距 */
.m10 { margin: 10px; }

.m15 { margin: 15px; }

.m20 { margin: 20px; }

.m30 { margin: 30px; }

.mt5 { margin-top: 5px; }

.mt10 { margin-top: 10px; }

.mt15 { margin-top: 15px; }

.mt20 { margin-top: 20px; }

.mt25 { margin-top: 25px; }

.mt30 { margin-top: 30px; }

.mt40 { margin-top: 40px; }

.mt50 { margin-top: 50px; }

.mt85 { margin-top: 85px; }

.mt100 { margin-top: 100px; }

.mr5 { margin-right: 5px; }

.mr10 { margin-right: 10px; }

.mr15 { margin-right: 15px; }

.mr20 { margin-right: 20px; }

.mr30 { margin-right: 30px; }

.mr50 { margin-right: 50px; }

.mr100 { margin-right: 100px; }

.mb5 { margin-bottom: 5px; }

.mb10 { margin-bottom: 10px; }

.mb15 { margin-bottom: 15px; }

.mb20 { margin-bottom: 20px; }

.mb30 { margin-bottom: 30px; }

.mb50 { margin-bottom: 50px; }

.mb100 { margin-bottom: 100px; }

.ml5 { margin-left: 5px; }

.ml10 { margin-left: 10px; }

.ml15 { margin-left: 15px; }

.ml20 { margin-left: 20px; }

.ml30 { margin-left: 30px; }

.ml50 { margin-left: 50px; }

.ml100 { margin-left: 100px; }

.mlr10 { margin-left: 10px; margin-right: 10px; }

.mlr20 { margin-left: 20px; margin-right: 20px; }

.mtb20 { margin-top: 20px; margin-bottom: 20px; }

.mtb50 { margin-top: 50px; margin-bottom: 50px; }

.p0 { padding: 0 !important; }

.p5 { padding: 5px; }

.p10 { padding: 10px; }

.p15 { padding: 15px; }

.p20 { padding: 20px; }

.p30 { padding: 30px; }

.pt5 { padding-top: 5px; }

.pt10 { padding-top: 10px; }

.pt15 { padding-top: 15px; }

.pt20 { padding-top: 20px; }

.pt30 { padding-top: 30px; }

.pt50 { padding-top: 50px; }

.pt60 { padding-top: 60px; }

.pt85 { padding-top: 85px; }

.pr0 { padding-right: 0 !important; }

.pr5 { padding-right: 5px; }

.pr10 { padding-right: 10px; }

.pr15 { padding-right: 15px; }

.pr20 { padding-right: 20px; }

.pr30 { padding-right: 30px; }

.pr50 { padding-right: 50px; }

.pr100 { padding-right: 100px; }

.pb0 { padding-bottom: 0 !important; }

.pb5 { padding-bottom: 5px; }

.pb10 { padding-bottom: 10px; }

.pb15 { padding-bottom: 15px; }

.pb20 { padding-bottom: 20px; }

.pb30 { padding-bottom: 30px; }

.pb50 { padding-bottom: 50px; }

.pl5 { padding-left: 5px; }

.pl10 { padding-left: 10px !important; }

.pl15 { padding-left: 15px; }

.pl20 { padding-left: 20px; }

.pl25 { padding-left: 25px; }

.pl30 { padding-left: 30px; }

.pl50 { padding-left: 50px; }

.plr0 { padding-left: 0 !important; padding-right: 0 !important; }

.plr5 { padding-left: 5px; padding-right: 5px; }

.plr10 { padding-left: 10px; padding-right: 10px; }

.plr15 { padding-left: 15px; padding-right: 15px; }

.plr20 { padding-left: 20px !important; padding-right: 20px !important; }

.plr30 { padding-left: 30px; padding-right: 30px; }

.plr35 { padding-left: 35px; padding-right: 35px; }

.plr40 { padding-left: 40px; padding-right: 40px; }

.plr50 { padding-left: 50px; padding-right: 50px; }

.ptb10 { padding-top: 10px; padding-bottom: 10px; }

.ptb15 { padding-top: 15px; padding-bottom: 15px; }

.ptb20 { padding-top: 20px; padding-bottom: 20px; }

.ptb30 { padding-top: 30px; padding-bottom: 30px; }

.ptb50 { padding-top: 50px; padding-bottom: 50px; }

.full-width { width: 100%; }

.pos-s { position: static !important; }

.pos-r { position: relative !important; }

.fixed-bottom { position: fixed; left: 0; right: 0; z-index: 1000; bottom: 0; }

.fixed-top { position: fixed; left: 0; right: 0; z-index: 1000; top: 0; }

.icon-svg { width: 16px; height: 16px; fill: currentColor; }

.icon-loading { animation: rotate 1s linear infinite; }

@keyframes rotate { to { transform: rotate(360deg); } }
.icon-checkbox, .icon-radio { display: inline-block; vertical-align: middle; width: 20px; height: 20px; color: #999; border: 1px solid currentColor; background-color: #fff; position: relative; top: -1px; margin-right: 5px; box-sizing: border-box; }
.icon-checkbox.active, .icon-radio.active { color: #31c238; }
.icon-checkbox.disabled, .icon-radio.disabled { color: #dbdbdb; }

.icon-checkbox--round { border-radius: 50%; }

.icon-checkbox.active::after { content: ""; height: 5px; width: 10px; border: 1px solid #fff; border-width: 0 0 2px 2px; position: absolute; top: 4px; left: 3px; transform: rotate(-52deg); }
//.icon-checkbox.active::before { content: ""; width: 5px; height: 6px; background-color: #fff; position: absolute; right: -1px; top: -1px; }

.icon-radio { border-radius: 10px; }
.icon-radio::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.icon-switch { height: 30px; width: 50px; position: relative; display: inline-block; vertical-align: middle; background-color: #ccc; border-radius: 15px; overflow: hidden; z-index: 1; }
.icon-switch::before { content: ""; height: 30px; width: 50px; position: absolute; left: -50px; background-color: #099FDE; border-radius: 15px; transition: left 0.2s ease 0s; z-index: 2; }
.icon-switch::after { content: ""; height: 26px; width: 26px; background-color: #fff; border-radius: 15px; position: absolute; left: 2px; top: 2px; transition: left 0.2s ease 0s; z-index: 3; }
.icon-switch.active::before { left: 0; }
.icon-switch.active::after { left: 22px; }

.icon-v-right { position: relative; }
.icon-v-right::after { content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); position: absolute; left: 50%; top: 50%; margin-left: -2px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); box-sizing: border-box; }

.icon-v-left { position: relative; }
.icon-v-left::after { content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 50%; top: 50%; margin-left: 2px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); box-sizing: border-box; }

.icon-v-bottom { position: relative; }
.icon-v-bottom::after { content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); position: absolute; left: 50%; top: 50%; margin-left: 2px; box-sizing: border-box; }

.icon-v-top { position: relative; }
.icon-v-top::after { content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(-45deg); position: absolute; left: 50%; top: 50%; margin-left: 2px; box-sizing: border-box; }

.icon-search { position: relative; }
.icon-search::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid currentColor; height: 12px; width: 12px; box-sizing: border-box; border-radius: 50%; margin-left: -2px; margin-top: -2px; }
.icon-search::after { content: ""; background: currentColor; height: 6px; width: 2px; position: absolute; top: 50%; left: 50%; margin-left: 4px; margin-top: 4px; transform: translate(-50%, -50%) rotate(-45deg); }

.icon-newsearch { position: relative; }
.icon-newsearch::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid currentColor; height: 12px; width: 12px; box-sizing: border-box; border-radius: 50%; margin-left: -2px; margin-top: -2px; }
.icon-newsearch::after { content: ""; background: currentColor; height: 6px; width: 2px; position: absolute; top: 50%; left: 50%; margin-left: 4px; margin-top: 4px; transform: translate(-50%, -50%) rotate(-45deg); }

.icon-cross { position: relative; }
.icon-cross::before, .icon-cross::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; transform: translate(-50%, -50%) rotate(45deg); background-color: currentColor; }
.icon-cross::after { transform: translate(-50%, -50%) rotate(-45deg); }

.icon-dots { position: relative; }
.icon-dots::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 5px; height: 5px; border-radius: 3px; background-color: #fff; box-shadow: 10px 0 0 #fff, -10px 0 0 #fff; }

.icon-plus { position: relative; }
.icon-plus::before, .icon-plus::after { content: ""; width: 16px; height: 2px; background-color: currentColor; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
.icon-plus::after { width: 2px; height: 16px; }

.icon-right { position: relative; }
.icon-right::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 8px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: translate(-50%, -50%) rotate(-52deg); box-sizing: border-box; margin-top: -1px; }

.icon-alert, .icon-info, .icon-question, .icon-ok { display: inline-block; vertical-align: middle; position: relative; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; line-height: 16px; text-align: center; }

.icon-alert { color: #ff3b30; }
.icon-alert::after { content: "!"; }

.icon-info { color: #007aff; }
.icon-info::after { content: "i"; }

.icon-question { color: #007aff; }
.icon-question::after { content: "?"; }

.icon-ok { color: #4cd964; }
.icon-ok::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 2px; border-bottom: 1px solid currentColor; border-left: 1px solid currentColor; transform: translate(-50%, -50%) rotate(-52deg) scale(1.5); margin-top: -1px; }

.btn { padding: 0 1em; line-height: 42px; border-radius: 3px; color: #333; background-color: #f5f5f5; border-color: rgba(0, 0, 0, 0.2); }
.btn:hover, .btn:active { background-color: #e8e8e8; }

.btn-outline { padding: 0 1em; line-height: 42px; border-radius: 3px; color: #31c238;  border-color: #31c238; }
.btn-outline:hover, .btn-outline:active { background-color: #f2f2f2; border-color: #31c238; }
.btn-outline.disabled { border-color: #e3e3e3 !important; }

.btn-primary, .btn-primary--light { padding: 0 1em; line-height: 42px; border-radius: 3px; color: #fff; background-color: #31c238; }
.btn-primary:hover, .btn-primary--light:hover, .btn-primary:active, .btn-primary--light:active { background-color: #ff6412; color: #fff; }

.btn-primary--light { color: #fff; background-color: #ffb791; }
.btn-primary--light:hover, .btn-primary--light:active { background-color: #ffa778; }

.btn-stress { padding: 0 1em; line-height: 42px; border-radius: 3px; color: #fff; background-color: #ff9500; }
.btn-stress:hover, .btn-stress:active { background-color: #e68600; }

.btn-success { padding: 0 1em; line-height: 42px; border-radius: 3px; color: #fff; background-color: #4cd964; }
.btn-success:hover, .btn-success:active { background-color: #37d552; }

.btn-danger { padding: 0 1em; line-height: 42px; border-radius: 3px; color: #fff; background-color: #ff3b30; }
.btn-danger:hover, .btn-danger:active { background-color: #ff2317; }

.full-width[class^="btn"] { border-radius: 0; }

.disabled[class^="btn"] { background-color: #e3e3e3 !important; color: #fff !important; cursor: default !important; pointer-events: none; }

.btn-s { line-height: 28px; font-size: 12px; }

.btn-m { line-height: 42px; }

.btn-xs { line-height: 22px; font-size: 12px; }

.btn-round { border-radius: 30px; }

.btn-radius { border-radius: 5px !important; }

.actions { display: table; table-layout: fixed; width: 100%; }
.actions actions-btn { display: table-cell; }
.actions .actions-btn { color: #007aff; height: 44px; line-height: 44px; text-align: center; border-top: 1px solid #dbdbdb; border-left: 1px solid rgba(0, 0, 0, 0.1); cursor: pointer; box-sizing: border-box; }
.actions .actions-btn:first-of-type { border-left: none; }
.actions .actions-btn:active, .actions .actions-btn:hover { background: #e6e6e6; }

.actions--full { display: block; }
.actions--full .actions-btn { display: block; width: 100%; border-left: none; }

.footer, .header-sub { position: fixed; left: 0; right: 0; }

.footer { bottom: 0; z-index: 2000; }

.header-sub { top: 44px; z-index: 1000; }

.page { width: 100%; padding-top: 44px; }
.page.page--header-sub { padding-top: 88px; }
.page.page--no-header { padding-top: 0; }
.page.page--has-footer { padding-bottom: 68px; }
.page.page--has-float { padding-bottom: 44px; }

.ios .page { position: absolute; top: 44px; bottom: 0; padding: 0; -webkit-overflow-scrolling: touch; }
.ios .page.page--header-sub { top: 88px; padding-top: 0; }
.ios .page.page--no-header { top: 0; }
.ios .page.page--has-footer { bottom: 48px; }

.transition { position: absolute; animation-fill-mode: both; }

.transition--right-in { animation: pageRightIn 0.3s cubic-bezier(0.42, 0, 0.58, 1); }

.transition--left-out { animation: pageLeftOut 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0.1s; }

.transition--left-in { animation: pageLeftIn 0.3s cubic-bezier(0.42, 0, 0.58, 1); }

.transition--right-out { animation: pageRightOut 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0.1s; }

@keyframes pageRightIn { 0% { transform: translate3d(100%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); } }
@keyframes pageLeftOut { 0% { transform: translate3d(0, 0, 0); opacity: 1; }
  100% { transform: translate3d(-100%, 0, 0); opacity: 0; } }
@keyframes pageLeftIn { 0% { transform: translate3d(-100%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); } }
@keyframes pageRightOut { 0% { transform: translate3d(0, 0, 0); opacity: 1; }
  100% { transform: translate3d(100%, 0, 0); opacity: 0; } }
.remind-num { position: absolute; border-radius: 10px; min-width: 17px; color: #fff; font-size: 12px; background-color: #ff9500; line-height: 1.2; text-align: center; padding: 0 4px; letter-spacing: 1px; }

.remind-num--gray { background: #d0d0d0; }

.remind-circle { position: absolute; width: 8px; height: 8px; border-radius: 4px; background-color: #ff9500; }

.remind-wrap { position: relative; }
.remind-wrap .remind-num, .remind-wrap .remind-circle { top: 0; right: 0; }

.overlay { display: none; background: rgba(0, 0, 0, 0.7); position: fixed; left: 0; right: 0; z-index: 1000; top: 0; bottom: 0; }
.active .overlay, .overlay.active { display: block; }
.overlay.overlay--no-header { top: 44px; }
.overlay.overlay--transparent { background: transparent; }

.header { position: fixed; left: 0; right: 0; top: 0; height: 44px; line-height: 44px; text-align: center; background-color: #31c238; color: #fff; z-index: 1000; }
.header .header-left { float: left; height: 44px; }
.header .header-right { float: right; height: 44px; }
.header .header-icon, .header .header-btn { cursor: pointer; }
.header .header-icon { width: 44px; height: 44px; float: left; position: relative; }
.header .header-btn { padding: 0 10px; float: left; line-height: 44px; }
.header .header-mix { float: left; padding-left: 20px; padding-right: 10px; }
.header .header-mix .mix-txt { margin-left: 10px; }
.header .icon-svg { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); fill: #fff; }
.header .page-tt, .header .page-mutil-tt, .header .page-select-tt { position: absolute; left: 88px; right: 88px; }
.header .page-tt { line-height: 44px; }
.header .page-tt .tt-l { line-height: 28px; display: block; }
.header .page-tt .tt-s { line-height: 1; font-size: 12px; display: block; }
.header .page-mutil-tt { font-size: 14px; line-height: 19px; padding-top: 4px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; height: 44px; }
.header .page-tabs-tt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.2); border-radius: 5px; line-height: 30px; padding: 1px; font-size: 14px; }
.header .page-tabs-tt .tt-option { float: left; padding: 0 15px; color: #fff; }
.header .page-tabs-tt .tt-option.active { background-color: #fff; color: #31c238; }
.header .page-tabs-tt .tt-option:first-of-type { border-radius: 5px 0 0 5px; }
.header .page-tabs-tt .tt-option:last-of-type { border-radius: 0 5px 5px 0; }

.nav-list--bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; }
.nav-list--bottom .remind-circle { margin-left: 10px; }
.nav-list--bottom .item-icon { top: 1px; font-size: 20px; }
.nav-list--bottom .item-icon img { width: 24px; height: 24px; }
.nav-list--bottom li { padding-top: 0; }
.nav-list--bottom li a { padding-top: 27px; }

.nav-list--tab { line-height: 34px; background: #fff; border-bottom: 1px solid #dbdbdb; }
.nav-list--tab .nav-item { position: relative; color: #333; }
.nav-list--tab .nav-item.active { color: #31c238; }
.nav-list--tab .nav-item.active::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #31c238; }

.nav-list--btn { line-height: 32px; }
.nav-list--btn .nav-item { background: #fff; border: 1px solid #dbdbdb; border-left-width: 0; }
.nav-list--btn .nav-item:first-of-type { border-left-width: 1px; border-radius: 16px 0 0 16px; }
.nav-list--btn .nav-item:last-of-type { border-radius: 0 16px 16px 0; }
.nav-list--btn .nav-item.active { background: #31c238; color: #fff; border-color: #31c238; }

.line-list { background: #fff; }
.line-list + .line-list { margin-top: 10px; }

.line-list--center { text-align: center; }

.line-list--indent .line-item::before { left: 10px; }

.line-list--after-v .line-item { padding-right: 30px; }

.line-list--flex .line-item { display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; /* IE 10 */ -webkit-align-items: center; -moz-align-items: center; align-items: center; padding-right: 0; }
.line-list--flex .line-item .item-icon, .line-list--flex .line-item .item-img, .line-list--flex .line-item .icon-switch, .line-list--flex .line-item .remind-num, .line-list--flex .line-item .item-append { margin-right: 10px; }
.line-list--flex .line-item .item-tt, .line-list--flex .line-item .item-bd { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ margin-right: 10px; width: 1%; }
.line-list--flex .line-item .bd-tt { line-height: 1.3; font-size: 16px; margin-bottom: 4px; }
.line-list--flex .line-item .bd-txt { line-height: 1.5; color: #999; font-size: 12px; }
.line-list--flex .line-item .item-append { color: #999; }
.line-list--flex .line-item .icon-v-right { width: 30px; height: 30px; color: #ccc; margin-left: -10px; }
.line-list--flex .line-item .remind-num { position: static; line-height: 1.5; }

.line-list--select .line-item { padding-right: 30px; }
.line-list--select .line-item.active { color: #31c238; }
.line-list--select .line-item.active::after { content: ""; display: block; width: 14px; height: 8px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(-52deg) translate(0, -50%); box-sizing: border-box; position: absolute; top: 50%; right: 8px; margin-top: -4px; }

.line-list--multi-select .active { color: #31c238; }
.line-list--multi-select .active .icon-checkbox { color: #31c238; }

.toast-wrap { position: fixed; left: 0; right: 0; z-index: 1000; top: 44px; bottom: 0; display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; /* IE 10 */ -webkit-align-items: center; -moz-align-items: center; align-items: center; z-index: 4010; display: none; flex-direction: column; }
.toast-wrap.active { display: flex; }

.toast { background: rgba(0, 0, 0, 0.7); color: #fff; padding: 10px 15px; text-align: center; white-space: nowrap; z-index: 4010; border-radius: 5px; position: relative; }
.toast .toast-icon { display: inline-block; margin-top: 5px; margin-bottom: 10px; }

.toast--loading { border-radius: 10px; }
.toast--loading .icon-loading { fill: #fff; width: 28px; height: 28px; display: block; margin: 0 auto; }
.toast--loading.has-close { padding: 15px; width: 100px; }
.toast--loading.has-close .icon-close { position: absolute; right: 0; top: 0; width: 24px; height: 24px; line-height: 24px; font-size: 20px; }
.toast--loading.has-close .toast-text { margin-top: 10px; }

.dialog-wrap { position: fixed; left: 0; right: 0; z-index: 1000; top: 0; bottom: 0; display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; /* IE 10 */ -webkit-align-items: center; -moz-align-items: center; align-items: center; z-index: 5000; display: none; flex-direction: column; }
.dialog-wrap.active { display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }

.dialog { position: relative; width: 280px; background: #fff; border-radius: 5px; overflow: hidden; z-index: 4005; }
.dialog .dialog-bd { padding: 20px 10px; text-align: center; }
.dialog .dialog-bd .bd-tt { font-size: 16px; font-weight: bold; line-height: 1.3; margin-bottom: 10px; }
.dialog .dialog-bd .bd-txt.txt--left { text-align: left; }
.dialog .dialog-ft { overflow: hidden; text-align: center; line-height: 44px; display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }
.dialog .dialog-ft .ft-btn { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 1%; }
.dialog .dialog-ft button { line-height: normal; height: 44px; border: none; background: transparent; }
.dialog .dialog-ft .ft-btn { position: relative; }
.dialog .dialog-ft .ft-btn::before { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; right: 0; height: 0; transform: scaleY(0.5); border-top: 1px solid #dbdbdb; }
.dialog .dialog-ft .ft-btn:nth-of-type(1)::after { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; width: 0; bottom: 0; transform: scaleX(0.5); border-left: 1px solid #dbdbdb; left: auto; right: 0; }
.dialog .dialog-ft .ft-btn.ft-btn--primary { color: #fff; background: #31c238; }
.dialog .dialog-ft .ft-btn.ft-btn--primary:hover, .dialog .dialog-ft .ft-btn.ft-btn--primary:active { background: #ff6b1c; }
.dialog .dialog-ft .ft-btn:first-of-type { border-bottom-left-radius: 5px; }
.dialog .dialog-ft .ft-btn:last-of-type { border-bottom-right-radius: 5px; }
.dialog .dialog-ft .ft-btn:hover, .dialog .dialog-ft .ft-btn:active { background: #f5f5f5; }
.dialog .dialog-ft.ft--full { flex-direction: column; }
.dialog .dialog-ft.ft--full .ft-btn { width: 100%; border-left: none; }
.dialog .dialog-ft.ft--full .ft-btn:first-of-type::after { display: none; }
.dialog .dialog-ft.ft--full .ft-btn:first-of-type { border-bottom-left-radius: 0; }
.dialog .dialog-ft.ft--full .ft-btn:last-of-type { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }

.popover { position: fixed; color: #fff; z-index: 4000; }
.popover .line-list { background: #ff6412; }
.popover .line-item { line-height: 36px; padding: 0 10px; display: flex; align-items: center; }
.popover .line-item .item-icon { margin-right: 5px; }

.popover--header-more { top: 44px; right: 5px; padding-top: 7px; }
.popover--header-more .popover-triangle { position: absolute; top: 1px; right: 10px; border-bottom: 6px solid #ff6412; border-left: 6px dashed transparent; border-right: 6px dashed transparent; }

.cell-list { background: #fff; position: relative; overflow: hidden; }
.cell-list::before { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; right: 0; height: 0; transform: scaleY(0.5); border-top: 1px solid #dbdbdb; }
.cell-list .cell-item { float: left; width: 25%; text-align: center; position: relative; padding: 15px 0; }
.cell-list .cell-item::before { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; right: 0; height: 0; transform: scaleY(0.5); border-top: 1px solid #dbdbdb; top: auto; bottom: 0; }
.cell-list .cell-item::after { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; width: 0; bottom: 0; transform: scaleX(0.5); border-left: 1px solid #dbdbdb; left: auto; right: 0; }
.cell-list .cell-item:nth-of-type(4)::after { display: none; }
.cell-list .cell-item .item-icon { width: 24px; height: 24px; }

.cell-list--square .cell-item { padding-top: 25%; padding-bottom: 0; height: 0; }
.cell-list--square .item-inner { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); }

.card-list { overflow: hidden; }
.card-list .card-item { position: relative; width: 50%; float: left; }
.card-list .card-item .item-img-wrap { position: relative;display: block; padding-top: 100%; overflow: hidden; background-repeat: no-repeat; background-position: center top; background-size: cover; }
//.card-list .card-item .item-img-wrap .item-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
//.card-list .card-item .item-img { width: 100%; }
.card-list .card-item .item-tt { line-height: 30px; }

.card-list--border { background: #fff; position: relative; }
.card-list--border::before { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; right: 0; height: 0; transform: scaleY(0.5); border-top: 1px solid #dbdbdb; }
.card-list--border .card-item { padding: 10px !important; }
.card-list--border .card-item::after { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; right: 0; height: 0; transform: scaleY(0.5); border-top: 1px solid #dbdbdb; top: auto; bottom: 0; }
.card-list--border .card-item::before { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; width: 0; bottom: 0; transform: scaleX(0.5); border-left: 1px solid #dbdbdb; left: auto; right: 0; }
.card-list--border .card-item:nth-of-type(2n)::before { display: none; }
.card-list--border .card-item a:not(.btn-cart-plus) { color: #333; }

.card-list--gap { padding-left: 5px; padding-right: 5px; }
.card-list--gap .card-item { margin-bottom: 10px; padding-left: 5px; padding-right: 5px; }

.media-item { width: 100%; padding: 10px; position: relative; display: block; padding-left: 100px; min-height: 100px; }
.media-item:not(:first-of-type)::before { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; right: 0; height: 0; transform: scaleY(0.5); border-top: 1px solid #dbdbdb; left: 10px; }
.media-item:active, .media-item:hover { background: #f5f5f5; }
.media-item.media-item--xs { padding-left: 70px; }
.media-item.media-item--has-chk { padding-left: 126px; }
.media-item.media-item--has-chk .item-img { left: 36px; }
.media-item .item-img { position: absolute; top: 10px; left: 10px; width: 80px; height: 80px; line-height: 80px; background: #fff; }
.media-item .item-img.item-img--round { border-radius: 50%; overflow: hidden; }
.media-item .item-img.item-img--border { border: 1px solid #dadada; }
.media-item.media-item--xs .item-img { width: 50px; height: 50px; }
.media-item .item-bd .bd-tt { font-weight: normal; }
.media-item .item-bd .bd-txt { font-size: 12px; color: #999; }

.media-list { background: #fff; }

.media-list--after-v .media-item { padding-right: 30px; }

.media-list--right .media-item { padding-right: 70px; }
.media-list--right .media-item .item-right { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }

.tool-bar { display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ background-color: rgba(0, 0, 0, 0.7); color: #fff; height: 34px; }
.tool-bar li { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 1%; }
.tool-bar li { position: relative; }
.tool-bar .tool-icon { width: 18px; height: 18px; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }

.fixed-quick-tool { position: fixed; right: 10px; bottom: 80px; color: #fff; }
.fixed-quick-tool .tool-switch { width: 44px; height: 44px; display: block; background: rgba(0, 0, 0, 0.7); border-radius: 50%; transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1); }
.fixed-quick-tool .tool-switch .icon-plus { display: block; width: 44px; height: 44px; }
.fixed-quick-tool .tool-list { width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
.fixed-quick-tool .tool-item { width: 30px; height: 30px; position: absolute; background: #31c238; border-radius: 50%; opacity: 0; transition: opacity 0.3s linear, transform 0.3s cubic-bezier(0.42, 0, 0.58, 1); display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; /* IE 10 */ -webkit-align-items: center; -moz-align-items: center; align-items: center; }
.fixed-quick-tool.active .tool-switch { transform: rotate(45deg); }
.fixed-quick-tool.active .tool-item { opacity: 1; }
.fixed-quick-tool.active .tool-item:nth-of-type(1) { transform: rotate(0deg) translateX(-80px); }
.fixed-quick-tool.active .tool-item:nth-of-type(1) .item-icon { transform: rotate(0deg); }
.fixed-quick-tool.active .tool-item:nth-of-type(2) { transform: rotate(30deg) translateX(-80px); }
.fixed-quick-tool.active .tool-item:nth-of-type(2) .item-icon { transform: rotate(-30deg); }
.fixed-quick-tool.active .tool-item:nth-of-type(3) { transform: rotate(60deg) translateX(-80px); }
.fixed-quick-tool.active .tool-item:nth-of-type(3) .item-icon { transform: rotate(-60deg); }
.fixed-quick-tool.active .tool-item:nth-of-type(4) { transform: rotate(90deg) translateX(-80px); }
.fixed-quick-tool.active .tool-item:nth-of-type(4) .item-icon { transform: rotate(-90deg); }

.f-text, .f-textarea { width: 100%; padding: 5px; border: 1px solid #dbdbdb; }

.f-text { height: 44px; padding: 7px 5px; }
.f-text.f-text--right-icon { padding-right: 30px; }

.f-textarea { height: 100px; line-height: 1.5; resize: none; }

.form { background: #fff; }

.form-item { display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; /* IE 10 */ -webkit-align-items: center; -moz-align-items: center; align-items: center; position: relative; line-height: 44px; overflow: hidden; }
.form-item:not(:first-of-type)::before { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; right: 0; height: 0; transform: scaleY(0.5); border-top: 1px solid #dbdbdb; }
.form-item .item-label { width: 90px; padding-left: 10px; margin: 0;}
.form-item .item-field { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 1%; }
.form-item .item-field .f-text { display: block; border: 0 none; width: 100%; box-sizing: border-box; }
.form-item .item-field .icon-input-clear { height: 44px; }
.form-item .item-append { margin-right: 10px; color: #999; }
.form-item .item-append + .icon-v-right { margin-left: -10px; }
.form-item .img-captcha { margin-left: 10px; }
.form-item .icon-v-right { display: block; width: 30px; height: 44px; color: #ccc; }

.form--no-label .f-text, .form--no-label .f-textarea { border: 0 none; padding-left: 10px; padding-right: 10px; }

.icon-input-clear { position: absolute; width: 30px; height: 30px; top: 50%; transform: translate(0, -50%); right: 0; }
.icon-input-clear::before { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 10px; background-color: #ccc; color: #fff; }
.icon-input-clear .icon-cross { position: absolute; top: 50%; left: 50%; color: #fff; }
.icon-input-clear .icon-cross::before, .icon-input-clear .icon-cross::after { height: 10px; }

.header-panel, .bottom-panel { position: fixed; left: 0; right: 0; z-index: 4005; background: #fff; }

.header-panel { top: 44px; }

.bottom-panel { bottom: 0; }

.panel--picker { display: none; }
.active .panel--picker { display: block; }
.panel--picker .panel-hd { background: #f5f5f5; line-height: 44px; color: #31c238; }
.panel--picker .panel-hd .hd-btn { padding: 0 15px; }

.picker-list, .picker-item { overflow: hidden; position: relative; }

.picker-item { background-color: #fff; height: 180px; box-sizing: border-box; }
.picker-item .select-list { text-align: center; line-height: 36px; color: #ccc; }
.picker-item .select-list li.active { color: #333; }
.picker-item::before, .picker-item::after { content: ""; height: 1px; background-color: #007aff; position: absolute; left: 0; right: 0; top: 50%; margin-top: -18px; }
.picker-item::after { margin-top: 18px; }

.picker-mask { position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 60%, white 100%); }

.picker-list { position: relative; display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }
.picker-list .picker-item { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 1%; }

.picker-tips { text-align: center; }

.panel--filter { top: 44px; display: flex; height: 176px; }

.filter-nav { position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.filter-nav::before { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; width: 0; bottom: 0; transform: scaleX(0.5); border-left: 1px solid #dbdbdb; left: auto; right: 0; z-index: auto; }
.filter-nav:last-of-type { flex: 1; width: 1%; background-color: #fff; }
.filter-nav:last-of-type::before { display: none; }
.filter-nav .line-list { background: transparent; }

.filter-nav:nth-of-type(1) { width: 80px; background-color: #f5f5f5; }
.filter-nav:nth-of-type(1) .line-item.active { background: #fafafa; }

.filter-nav:nth-of-type(2) { width: 100px; background-color: #fafafa; }
.filter-nav:nth-of-type(2) .line-item.active { background: #fff; }

.panel--actionsheet { background: #f5f5f5; display: none; }
.active .panel--actionsheet { display: block; }
.panel--actionsheet .line-list { position: relative; }
.panel--actionsheet .line-list::after { content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box; right: 0; height: 0; transform: scaleY(0.5); border-top: 1px solid #dbdbdb; top: auto; bottom: 0; }
.panel--actionsheet .line-list:last-of-type::after { top: 0; bottom: auto; }

.search-block { background-color: #f5f5f5; padding: 7px; position: relative; }
.search-block .search-ele-wrap { position: relative; }
.search-block .search-text { border: 0 none; border-radius: 18px; background-color: #fff; width: 100%; height: 36px; padding: 5px 60px 5px 30px; }
.search-block .icon-search{ position: absolute; top: 0; right: 0; color: #999; width: 30px; height: 30px; }
.search-block .icon-loading { position: absolute; right: 5px; top: 7px; }
.search-block .btn-voice { position: absolute; right: 0; width: 30px; height: 30px; padding-top: 7px; top: 0; }
.search-block .icon-newsearch{ position: absolute; top: 0; right: 0; color: #999; width: 30px; height: 30px; }

.search-block--center .search-ele-wrap { background: #fff; text-align: center; border-radius: 5px; color: #999; }
.search-block--center .icon-search { position: relative; display: inline-block; vertical-align: middle; width: 20px; text-align: center; }
.search-block--center .icon-newsearch { position: relative; display: inline-block; vertical-align: middle; width: 20px; text-align: center; }

.search-block--cancel .search-ele-wrap { position: relative; margin-right: 40px; }
.search-block--cancel .search-cancel { line-height: 44px; padding: 0 10px; color: #31c238; position: absolute; right: 0; top: 0; cursor: pointer; }

.alone-back { position: absolute; left: 0; top: 10px; width: 44px; height: 44px; z-index: 4000; }
.alone-back .icon-v-left { color: #fff; display: block; width: 100%; height: 100%; }
.alone-back.back--overlay { border-radius: 50%; left: 10px; background: rgba(0, 0, 0, 0.7); }
.alone-back.back--black .icon-v-left { color: #333; }

.infinite-loading { text-align: center; line-height: 3; }
.infinite-loading .loading-animate { display: inline-block; vertical-align: middle; }
.infinite-loading .loading-dotted { width: 6px; height: 6px; border-radius: 50%; float: left; margin-left: 6px; color: #333; background: currentColor; animation: loadingFade 1s linear infinite; }
.infinite-loading .loading-dotted:nth-of-type(2) { animation-delay: 0.25s; }
.infinite-loading .loading-dotted:nth-of-type(3) { animation-delay: 0.5s; }

@keyframes loadingFade { 0% { background: rgba(51, 51, 51, 0.2); }
  100% { background: currentColor; } }
input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ }

input[type=range]:focus { outline: none; }

input[type=range]:focus { outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ }

input[type=range]::-webkit-slider-container, input[type=range]::-webkit-media-slider-container { height: 44px; }

input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 2px; cursor: pointer; background: #ccc; border-radius: 1px; border: 0 none; }

input[type=range]:focus::-webkit-slider-runnable-track { background: #ccc; }

input[type=range]::-webkit-slider-thumb, input[type=range]::-webkit-media-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: #31c238; border-radius: 50%; display: block; margin-top: -10px; border: 0 none; box-shadow: none; }

.range-wrap { position: relative; }
.range-wrap:before { content: ""; position: absolute; height: 2px; left: 0; right: 0; background: #ccc; top: 21px; z-index: 0; }
.range-wrap input[type=range] { position: relative; z-index: 2; }

.range-all { display: flex; background: #fff; }
.range-all .range-value { width: 40px; text-align: center; line-height: 44px; }
.range-all .range-wrap { flex: 1; width: 1%; }

.circle-progress { position: relative; width: 100px; height: 100px; border: 4px solid #dbdbdb; border-radius: 50%; box-sizing: border-box; }
.circle-progress .progress-num { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
.circle-progress .circle-left, .circle-progress .circle-right { width: 50px; height: 100px; position: absolute; top: -4px; overflow: hidden; }
.circle-progress .circle-left { left: -4px; }
.circle-progress .circle-right { right: -4px; }
.circle-progress .right-inner, .circle-progress .left-inner { width: 100px; height: 100px; position: absolute; right: 0; top: 0; border-radius: 50%; border: 4px solid #31c238; box-sizing: border-box; transition: transform 0.5s linear; }
.circle-progress .right-inner { right: 0; clip: rect(0, 50px, 100px, 0); }
.circle-progress .left-inner { left: 0; transition-delay: 0.5s; clip: rect(0, 100px, 100px, 50px); }

.bar-progress { position: relative; height: 2px; background: #dbdbdb; overflow: hidden; border-radius: 2px; }
.bar-progress .progress-percent { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #31c238; border-radius: 2px; }

.circle-svg-progress { width: 100px; height: 100px; }

/* tag component */
.tag-item, .tag-item-outlined { display: inline-block; height: 24px; line-height: 24px; font-size: 12px; padding: 0 10px; border-radius: 5px; background: #fff; white-space: nowrap; }

.tag-item--round { border-radius: 12px; }
.tag-item--default { color: #333; background: #e6e6e6; }
.tag-item--primary { color: #fff; background: #31c238; }
.tag-item--info { color: #fff; background: #8fd4ed; }
.tag-item--warning { color: #fff; background: #ff9500; }
.tag-item--success { color: #fff; background: #4cd964; }
.tag-item--disabled { color: #fff; background: #999; }

.tag-item-outlined { border: 1px solid #dadada; line-height: 22px; }
.tag-item-outlined--primary { color: #31c238; background: none; border-color: currentColor; }

.tag-list { overflow: hidden;margin-bottom:0; }
.tag-list .tag-item { float: left; margin-right: 10px; margin-bottom: 10px; }

.stepper { position: relative; padding: 0 30px; width: 100px; background: #fff; border-radius: 5px; }
.stepper.stepper--disabled .stepper-plus, .stepper.stepper--disabled .stepper-minus, .stepper.stepper--disabled .stepper-num { opacity: .4; pointer-events: none; cursor: not-allowed; }
.stepper .stepper-plus, .stepper .stepper-minus { position: absolute; top: 0; border: 1px solid #dbdbdb; height: 30px; width: 30px; color: #666; }
.stepper .stepper-plus { right: 0; border-radius: 0 5px 5px 0; }
.stepper .stepper-plus::before, .stepper .stepper-plus::after { content: ""; height: 2px; width: 12px; background: currentColor; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
.stepper .stepper-plus::after { height: 12px; width: 2px; }
.stepper .stepper-minus { left: 0; border-radius: 5px 0 0 5px; }
.stepper .stepper-minus::before { content: ""; height: 2px; width: 12px; background: currentColor; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
.stepper .stepper-num { width: 100%; border: 1px solid #dbdbdb; border-width: 1px 0; height: 30px; text-align: center; }

.stepper--mini { width: 60px; height: 30px; }
.stepper--mini .stepper-plus { border-left: 0; }

.article { padding: 20px 10px; background: #fff; }
.article .tt-2, .article .tt-3 { line-height: 1.3; margin-bottom: 10px; font-weight: bold; }
.article p { margin-bottom: 10px; }
.article .article-img { max-width: 100%; margin-bottom: 10px; border: 1px solid #dbdbdb; padding: 2px; }
.article .list-disc, .article .list-decimal { list-style: disc; margin-left: 16px; margin-bottom: 10px; }
.article .list-decimal { list-style: decimal; }

.equal--gap { display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ padding-left: 10px; padding-right: 10px; }
.equal--gap .line-equal-item { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 1%; }
.equal--gap .line-equal-item:not(:first-of-type) { margin-left: 10px; }

.equal--item { display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.equal--item::before, .equal--item::after { content: ""; }
.equal--item .line-equal-item { width: 60px; }

table { max-width: 100%; background-color: transparent; empty-cells: show; }

table code { white-space: normal; }

th { text-align: left; }

.table { width: 100%; margin-bottom: 1.6rem; border-spacing: 0; border-collapse: separate; }

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { padding: 0.7rem; line-height: 1.6; vertical-align: top; border-top: 1px solid #ddd; }

.table > thead > tr > th { vertical-align: bottom; border-bottom: 1px solid #ddd; }

.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td { border-top: 0; }

.table > tbody + tbody tr:first-child td { border-top: 2px solid #ddd; }

/* Bordered version */
.table-bordered { border: 1px solid #ddd; border-left: none; }

.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border-left: 1px solid #ddd; /*&:first-child { border-left: none; }*/ }

.table-bordered > tbody > tr:first-child > th, .table-bordered > tbody > tr:first-child > td { border-top: none; }

.table-bordered > thead + tbody > tr:first-child > th, .table-bordered > thead + tbody > tr:first-child > td { border-top: 1px solid #ddd; }

.table-centered > thead > tr > th, .table-centered > tbody > tr > th, .table-centered > tfoot > tr > th, .table-centered > thead > tr > td, .table-centered > tbody > tr > td, .table-centered > tfoot > tr > td { text-align: center; }

body { position: relative; min-width: 320px; max-width: 750px; margin: 0 auto; background: #fff; }

/* 弹性盒模型 */
.flex-h { display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }

.flex1 { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }

.flex2 { -webkit-box-flex: 2; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 2; /* OLD - Firefox 19- */ -webkit-flex: 2; /* Chrome */ -ms-flex: 2; /* IE 10 */ flex: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }

.flex-v-c { display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; /* IE 10 */ -webkit-align-items: center; -moz-align-items: center; align-items: center; }

.flex-h-c { display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }

/* 1px边框 */
.bt1 { border-top: 1px solid #e5e5e5; }

.bb1 { border-bottom: 1px solid #e5e5e5; }

.bl1 { border-left: 1px solid #e5e5e5; }

.br1 { border-right: 1px solid #e5e5e5; }

/* 文本颜色 */
.c-primary { color: #31c238; }

.c-danger { color: #f00; }

.c-success { color: #4cd964; }

/* 文本截断 */
.text-overflow { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* 搜索条 */
.search-block-opa { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; padding: 10px; background: none; }
.search-block-opa .search-text { color: #fff; background-color: rgba(0, 0, 0, 0.5); }
.search-block-opa .icon-search  { color: rgba(255, 255, 255, 0.8); }
.search-block-opa .icon-newsearch  { color: rgba(255, 255, 255, 0.8); }

/* 尾部 */
.nav-bar { height: 48px; background: #fff; }
.nav-bar li a { display: block; font-size: 12px; color: #666; }
.nav-bar li a.nav-item--btn { padding: 0 5px; line-height: 47px; font-size: 14px; color: #fff; }

.nav-item { position: relative; text-align: center; }
.nav-item.active a { color: #31c238; }
.nav-item i { font-size: 22px; line-height: 28px; }
.nav-item .remind-num { position: absolute; top: -3px; left: 50%; }

/* n等分 */
.avg-list.avg-list--2 li { width: 48%; margin: 0 4% 10px 0; }
.avg-list.avg-list--2 li:nth-of-type(2n) { margin-right: 0; }
.avg-list.avg-list--3 li { width: 30%; margin: 0 5% 10px 0; }
.avg-list.avg-list--3 li:nth-of-type(3n) { margin-right: 0; }
.avg-list.avg-list--4 li { width: 22%; margin: 0 4% 10px 0; }
.avg-list.avg-list--4 li:nth-of-type(4n) { margin-right: 0; }
.avg-list.avg-list--5 li { width: 16%; margin: 0 5% 10px 0; }
.avg-list.avg-list--5 li:nth-of-type(5n) { margin-right: 0; }
.avg-list li { float: left; }

/* swiper切换标题栏 */
.swiper-tab-tle { position: relative; z-index: 2; background: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); }
.swiper-tab-tle li { position: relative; float: left; padding: 10px 0; text-align: center; }
.swiper-tab-tle li:not(:last-of-type):after { position: absolute; top: 50%; right: 0; width: 1px; height: 30px; margin-top: -15px; background: #e5e5e5; content: ""; }
.swiper-tab-tle li.active { color: #31c238; border-bottom: 2px solid #31c238; }
.swiper-tab-tle li.active span { color: #31c238; }
.swiper-tab-tle li span { display: block; color: #999; line-height: 18px; }

.slide-page { position: fixed; top: 0; left: 0; z-index: 5000; width: 100%; height: 100%; background: #f5f5f5; -webkit-transform: translate(100%, 0); transform: translate(100%, 0); transition: .3s; }
.slide-page.active { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.slide-page .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 加载gif图片 */
.loading-gif { display: inline-block; width: 30px; height: 30px; background: url(/Areas/Mobile/AngularTemplate/Resource/Images/loading.gif) no-repeat; }

.line-list select, .form-item select { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; opacity: 0; }
.line-list input[type=text], .form-item input[type=text], .form-item input[type=password] { border: 0; background: none; }

.item-field input[type=file] { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; opacity: 0; }

.file-dec { position: relative; margin: 10px; padding: 10px; border: 1px dashed #ccc; text-align: center; line-height: 20px; }
.file-dec i { display: block; width: 16px; height: 16px; margin: 0 auto 5px; color: #999; }

.badge { display: inline-block; padding: 3px 5px; background: #999; color: #fff; }

/* 分享 */
.share-list li a { display: block; color: #666; }
.share-list li i { font-size: 40px; }
.share-list li:nth-of-type(1) i { color: #609700; }
.share-list li:nth-of-type(2) i { color: #f9775a; }
.share-list li:nth-of-type(3) i { color: #14b9f7; }
.share-list li:nth-of-type(4) i { color: #ffce00; }
.share-list li:nth-of-type(5) i { color: #e6162d; }

/* 透明度 */
.opacity-0 { opacity: 0; }

/* empty */
.empty { margin-top: 70px; }
.empty .info-img { width: 90px; height: 90px; line-height: 90px; margin: 0 auto; text-align: center; background: #ccc; border-radius: 50%; }
.empty .info-img i { font-size: 50px; color: #fff; }
.empty .info .info-tle { margin-top: 10px; }
.empty .info .info-sub { font-size: 12px; color: #999; }
.empty .info .info-btn { margin-top: 15px; }
.empty .info .btn-outline { padding: 0 20px; }

.order_list .order-item-hd { border-top: 2px solid #31c238; }
.order_list .order-item-ding { background-color: #31c238; }
/* 上传相关 */
.upload-item {display: box; /* OLD - Android 4.4- */display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */display: -ms-flexbox; /* TWEENER - IE 10 *//* display: -webkit-flex; */ /* NEW - Chrome *//* display: flex; */ /* NEW, Spec - Opera 12.1, Firefox 20+ */-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;}

.upload-item { position: relative; padding: 10px; background: #fff; }
.upload-item label{font-weight:normal;}
.upload-field { width: 60px; height: 60px; overflow: hidden; padding-top: 5px; text-align: center; border: 1px dashed #dadaad; color: #999; }
.upload-field i { font-size: 24px; line-height: 1.2; }
.upload-field p { font-size: 12px; }

.file-field { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; opacity: 0; }

.upload-list li { padding: 5px; }
.upload-list li > div { position: relative; width: 100%; height: 120px; padding: 0 20px; text-align: center; color: #999; background-repeat: no-repeat; background-position: center center; background-size: contain; background-color: #e5e5e5; display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; /* IE 10 */ -webkit-align-items: center; -moz-align-items: center; align-items: center; }
.upload-list li i { font-size: 30px; }

.upload-img { padding: 15px; overflow: hidden; }
.upload-img li { position: relative; float: left; margin: 0 15px 15px 0; }
.upload-img li:last-child { width: 80px; height: 80px; line-height: 80px; text-align: center; border: 1px dashed #aaa; }
.upload-img li:last-child i { font-size: 30px; color: #bfbfbf; }
.upload-img li a { display: block; }
.upload-img li span { display: block; width: 80px; height: 80px; overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.upload-img li .upload-del { position: absolute; top: -10px; right: -10px; display: block; width: 25px; height: 25px; line-height: 23px; text-align: center; color: #fff; border-radius: 50%; background: rgba(0, 0, 0, 0.5); }
.upload-img--no-up li:last-child { border: 0; }
.upload-img--no-up li:last-child i { font-size: 16px; color: #fff; }

.upload-list li { padding: 5px; }
.upload-list li > div { position: relative; width: 100%; height: 120px; padding: 0 20px; text-align: center; color: #999; background-repeat: no-repeat; background-position: center center; background-size: contain; background-color: #e5e5e5; display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; /* IE 10 */ -webkit-align-items: center; -moz-align-items: center; align-items: center; }
.upload-list li i { font-size: 30px; }

/* nav-tab */
.nav-tab { background: #fff; }
.nav-tab .tab-tle { overflow: hidden; display: box; /* OLD - Android 4.4- */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }
.nav-tab .tab-tle li { position: relative; padding: 10px 0; text-align: center; border-bottom: 1px solid #e5e5e5; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }
.nav-tab .tab-tle li.active { color: #ff9500; }
.nav-tab .tab-tle li.active:after { position: absolute; bottom: -5px; left: 50%; z-index: 10; width: 10px; height: 10px; background: #fff; margin-left: -5px; border-left: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; content: ""; transform: rotate(135deg); }
.nav-tab .tab-container .tab-pane { display: none; }
.nav-tab .tab-container .tab-pane.active { display: block; }

.line-item--no-ovh { overflow: visible!important; }

.btn-no-radius { border-radius: 0; }

/* svg图标默认样式 */
.svg-icon { width: 1em; height: 1em; vertical-align: middle; fill: currentColor; }
/* 底部上滑分享菜单 */
.mod-share { overflow: hidden; margin: -20px 0 0; }
.mod-share__item { float: left; width: 25%; margin: 20px 0 0; text-align: center; }
.mod-share__item__icon { display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; background: #fff; border-radius: 5px; }
.mod-share__item__icon .svg-icon { font-size: 20px; }
.mod-share__item__tle { margin: 10px 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
/* 分享按钮 */
.mod-btn-share { position: fixed; top: 20px; right: 20px; z-index: 1000; display: block; width: 40px; height: 40px; line-height: 38px; text-align: center; background: rgba(0, 0, 0, 0.4); border-radius: 50%; cursor: pointer; }
.mod-btn-share:active { background: rgba(0, 0, 0, 0.5); }
.mod-btn-share .svg-icon { fill: rgba(255, 255, 255, 0.9); }